Monetization: Fix monetization withdraw flow (#4995)

src/api/gramjs/apiBuilders/statistics.ts

@@ -265,10 +265,12 @@ function buildChannelMonetizationBalances({
   currentBalance,
   availableBalance,
   overallRevenue,
+  withdrawalEnabled,
 }: GramJs.BroadcastRevenueBalances): ChannelMonetizationBalances {
   return {
     currentBalance: Number(currentBalance) / DECIMALS,
     availableBalance: Number(availableBalance) / DECIMALS,
     overallRevenue: Number(overallRevenue) / DECIMALS,
+    isWithdrawalEnabled: withdrawalEnabled,
   };
 }

src/api/types/statistics.ts

@@ -139,4 +139,5 @@ export interface ChannelMonetizationBalances {
   currentBalance: number;
   availableBalance: number;
   overallRevenue: number;
+  isWithdrawalEnabled?: boolean;
 }

src/components/right/statistics/MonetizationStatistics.module.scss

@@ -71,6 +71,7 @@
 }
 
 .textBottom {
+  margin-top: 0.5rem;
   font-size: 0.875rem;
   color: var(--color-text-secondary);
 }

src/components/right/statistics/MonetizationStatistics.tsx

@@ -84,7 +84,9 @@ const MonetizationStatistics = ({
   ] = useFlag(false);
   const [isConfirmPasswordDialogOpen, openConfirmPasswordDialogOpen, closeConfirmPasswordDialogOpen] = useFlag();
   const availableBalance = statistics?.balances?.availableBalance;
-  const canWithdraw = isCreator && isChannelRevenueWithdrawalEnabled && Boolean(availableBalance);
+  const isWithdrawalEnabled = statistics?.balances?.isWithdrawalEnabled;
+  const canWithdraw = isCreator && isChannelRevenueWithdrawalEnabled && Boolean(availableBalance)
+    && isWithdrawalEnabled;
 
   useEffect(() => {
     if (chatId) {
@@ -144,12 +146,14 @@ const MonetizationStatistics = ({
         <div className={styles.toncoin}>
           <Icon className={styles.toncoinIcon} name="toncoin" />
           <b className={styles.rewardValue}>
-            {integerTonPart}<span className={styles.decimalPart}>.{decimalTonPart}</span>
+            {integerTonPart}
+            {decimalTonPart ? <span className={styles.decimalPart}>.{decimalTonPart}</span> : undefined}
           </b>
         </div>
         {' '}
         <span className={styles.integer}>
-          ≈ ${integerUsdPart}<span className={styles.decimalUsdPart}>.{decimalUsdPart}</span>
+          ≈ ${integerUsdPart}
+          {decimalUsdPart ? <span className={styles.decimalUsdPart}>.{decimalUsdPart}</span> : undefined}
         </span>
       </div>
     );
@@ -212,6 +216,9 @@ const MonetizationStatistics = ({
         isToncoin
         type="monetization"
         title={oldLang('MonetizationOverview')}
+        subtitle={
+          <div className={styles.textBottom}>{oldLang('MonetizationProceedsTONInfo')}</div>
+        }
       />
 
       {!loadedCharts.current.length && <Loading />}

src/components/right/statistics/StatisticsOverview.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { FC } from '../../../lib/teact/teact';
 import React, { memo } from '../../../lib/teact/teact';
 
@@ -109,6 +110,7 @@ export type OwnProps = {
   ApiPostStatistics |
   ApiBoostStatistics |
   ApiChannelMonetizationStatistics;
+  subtitle?: ReactNode;
 };
 
 const StatisticsOverview: FC<OwnProps> = ({
@@ -117,6 +119,7 @@ const StatisticsOverview: FC<OwnProps> = ({
   statistics,
   isToncoin,
   className,
+  subtitle,
 }) => {
   const lang = useOldLang();
 
@@ -234,6 +237,8 @@ const StatisticsOverview: FC<OwnProps> = ({
           </tr>
         ))}
       </table>
+
+      {subtitle}
     </div>
   );
 };