From 9ddad6924f7a1b23e06d7a20c52353ff50a32145 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 27 Sep 2024 16:11:19 +0200
Subject: [PATCH] Monetization: Fix monetization withdraw flow (#4995)

---
 src/api/gramjs/apiBuilders/statistics.ts            |  2 ++
 src/api/types/statistics.ts                         |  1 +
 .../statistics/MonetizationStatistics.module.scss   |  1 +
 .../right/statistics/MonetizationStatistics.tsx     | 13 ++++++++++---
 .../right/statistics/StatisticsOverview.tsx         |  5 +++++
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/api/gramjs/apiBuilders/statistics.ts b/src/api/gramjs/apiBuilders/statistics.ts
index 016ea55f1..78312bf5c 100644
--- a/src/api/gramjs/apiBuilders/statistics.ts
+++ b/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,
   };
 }
diff --git a/src/api/types/statistics.ts b/src/api/types/statistics.ts
index 9fbbc8dd9..5f9bfabf2 100644
--- a/src/api/types/statistics.ts
+++ b/src/api/types/statistics.ts
@@ -139,4 +139,5 @@ export interface ChannelMonetizationBalances {
   currentBalance: number;
   availableBalance: number;
   overallRevenue: number;
+  isWithdrawalEnabled?: boolean;
 }
diff --git a/src/components/right/statistics/MonetizationStatistics.module.scss b/src/components/right/statistics/MonetizationStatistics.module.scss
index 1b5dc866d..1fe279298 100644
--- a/src/components/right/statistics/MonetizationStatistics.module.scss
+++ b/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);
 }
diff --git a/src/components/right/statistics/MonetizationStatistics.tsx b/src/components/right/statistics/MonetizationStatistics.tsx
index ded4ae75c..611e987dd 100644
--- a/src/components/right/statistics/MonetizationStatistics.tsx
+++ b/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 />}
diff --git a/src/components/right/statistics/StatisticsOverview.tsx b/src/components/right/statistics/StatisticsOverview.tsx
index 72e4c9e06..fd66ac219 100644
--- a/src/components/right/statistics/StatisticsOverview.tsx
+++ b/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>
   );
 };