From 4c99809766202ce313b20063394f347a2e40ec84 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Wed, 18 Jun 2025 09:40:31 +0300
Subject: [PATCH 1/2] PM-1278 - disable payme button in wallet if min
 withdrawal amount is not met

---
 .../src/home/tabs/winnings/WinningsTab.tsx    |  3 +-
 .../payments-table/PaymentTable.module.scss   |  7 ++++
 .../payments-table/PaymentTable.tsx           | 35 +++++++++++++------
 .../wallet/src/lib/models/WalletDetails.ts    |  1 +
 .../ui/lib/components/tooltip/Tooltip.tsx     | 23 ++++++------
 5 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx b/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
index f50550f62..b740ff1d6 100644
--- a/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
+++ b/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
@@ -3,7 +3,7 @@
 import { toast } from 'react-toastify'
 import { AxiosError } from 'axios'
 import { Link } from 'react-router-dom'
-import React, { FC, useCallback, useEffect } from 'react'
+import React, { FC, useCallback, useEffect, useMemo } from 'react'
 
 import { Collapsible, ConfirmModal, LoadingCircles } from '~/libs/ui'
 import { UserProfile } from '~/libs/core'
@@ -414,6 +414,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                             <PaymentsTable
                                 currentPage={pagination.currentPage}
                                 numPages={pagination.totalPages}
+                                minWithdrawAmount={walletDetails?.minWithdrawAmount ?? 0}
                                 payments={winnings}
                                 selectedPayments={selectedPayments}
                                 onSelectedPaymentsChange={function onSelectedPaymentsChanged(selectedWinnings: { [paymentId: string]: Winning }) {
diff --git a/src/apps/wallet/src/lib/components/payments-table/PaymentTable.module.scss b/src/apps/wallet/src/lib/components/payments-table/PaymentTable.module.scss
index 35dbfc7a2..80894b460 100644
--- a/src/apps/wallet/src/lib/components/payments-table/PaymentTable.module.scss
+++ b/src/apps/wallet/src/lib/components/payments-table/PaymentTable.module.scss
@@ -91,6 +91,13 @@ table {
 
         color: #333;
     }
+
+    .paymeBtn {
+        pointer-events: initial;
+        &[disabled] {
+            cursor: not-allowed;
+        }
+    }
 }
 
 @media (max-width: 768px) {
diff --git a/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx b/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx
index 502eb5a15..72d84e49d 100644
--- a/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx
+++ b/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx
@@ -2,13 +2,14 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { useEffect, useState } from 'react'
 
-import { Button, IconOutline } from '~/libs/ui'
+import { Button, IconOutline, Tooltip } from '~/libs/ui'
 
 import { Winning } from '../../models/WinningDetail'
 
 import styles from './PaymentTable.module.scss'
 
 interface PaymentTableProps {
+    minWithdrawAmount: number;
     payments: ReadonlyArray<Winning>;
     selectedPayments?: { [paymentId: string]: Winning };
     currentPage: number;
@@ -85,6 +86,8 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
 
     const total = calculateTotal()
 
+    const isPaymeDisabled = !total || total < props.minWithdrawAmount;
+
     return (
         <>
             <div className={styles.tableContainer}>
@@ -191,15 +194,27 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                         </div>
                     </>
                 )}
-                <Button
-                    primary
-                    onClick={() => {
-                        props.onPayMeClick(selectedPayments, total.toFixed(2))
-                    }}
-                    disabled={total === 0}
-                >
-                    PAY ME
-                </Button>
+                <Tooltip content={(
+                    <>
+                        Minimum withdrawal amounti is ${props.minWithdrawAmount}.
+                        <br />
+                        Please select more payments.
+                    </>
+                )} disableTooltip={!isPaymeDisabled}>
+                    <Button
+                        primary
+                        onClick={() => {
+                            if (isPaymeDisabled) {
+                                return;
+                            }
+                            props.onPayMeClick(selectedPayments, total.toFixed(2))
+                        }}
+                        className={styles.paymeBtn}
+                        disabled={isPaymeDisabled}
+                    >
+                        PAY ME
+                    </Button>
+                </Tooltip>
             </div>
         </>
     )
diff --git a/src/apps/wallet/src/lib/models/WalletDetails.ts b/src/apps/wallet/src/lib/models/WalletDetails.ts
index f81cac0d8..8f11c8510 100644
--- a/src/apps/wallet/src/lib/models/WalletDetails.ts
+++ b/src/apps/wallet/src/lib/models/WalletDetails.ts
@@ -23,4 +23,5 @@ export interface WalletDetails {
     primaryCurrency?: string | null;
     estimatedFees?: string | null;
     taxWithholdingPercentage?: string | null;
+    minWithdrawAmount: number;
 }
diff --git a/src/libs/ui/lib/components/tooltip/Tooltip.tsx b/src/libs/ui/lib/components/tooltip/Tooltip.tsx
index 489f444b8..7351b0830 100644
--- a/src/libs/ui/lib/components/tooltip/Tooltip.tsx
+++ b/src/libs/ui/lib/components/tooltip/Tooltip.tsx
@@ -25,6 +25,7 @@ interface TooltipProps {
     children?: ReactNode
     triggerOn?: 'click' | 'hover'
     strategy?: 'absolute' | 'fixed'
+    disableTooltip?: boolean
 }
 
 function wrapComponents(el: ReactNode, disableWrap?: boolean): ReactNode {
@@ -56,16 +57,18 @@ const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
     return (
         <>
             {renderTrigger()}
-            <ReactTooltip
-                className={classNames(styles.tooltip, props.className)}
-                id={tooltipId.current as string}
-                aria-haspopup='true'
-                openOnClick={triggerOnClick}
-                clickable={props.clickable}
-                positionStrategy={props.strategy ?? 'absolute'}
-            >
-                {props.content}
-            </ReactTooltip>
+            {!props.disableTooltip && (
+                <ReactTooltip
+                    className={classNames(styles.tooltip, props.className)}
+                    id={tooltipId.current as string}
+                    aria-haspopup='true'
+                    openOnClick={triggerOnClick}
+                    clickable={props.clickable}
+                    positionStrategy={props.strategy ?? 'absolute'}
+                >
+                    {props.content}
+                </ReactTooltip>
+            )}
         </>
     )
 }

From 620eb49c67b017c038ca3bd69bf52c4813425347 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Wed, 18 Jun 2025 09:47:21 +0300
Subject: [PATCH 2/2] lint fixes

---
 .../src/home/tabs/winnings/WinningsTab.tsx    |  2 +-
 .../payments-table/PaymentTable.tsx           | 24 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx b/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
index b740ff1d6..ea3a25a95 100644
--- a/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
+++ b/src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
@@ -3,7 +3,7 @@
 import { toast } from 'react-toastify'
 import { AxiosError } from 'axios'
 import { Link } from 'react-router-dom'
-import React, { FC, useCallback, useEffect, useMemo } from 'react'
+import React, { FC, useCallback, useEffect } from 'react'
 
 import { Collapsible, ConfirmModal, LoadingCircles } from '~/libs/ui'
 import { UserProfile } from '~/libs/core'
diff --git a/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx b/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx
index 72d84e49d..09467435c 100644
--- a/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx
+++ b/src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx
@@ -86,7 +86,7 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
 
     const total = calculateTotal()
 
-    const isPaymeDisabled = !total || total < props.minWithdrawAmount;
+    const isPaymeDisabled = !total || total < props.minWithdrawAmount
 
     return (
         <>
@@ -194,19 +194,25 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                         </div>
                     </>
                 )}
-                <Tooltip content={(
-                    <>
-                        Minimum withdrawal amounti is ${props.minWithdrawAmount}.
-                        <br />
-                        Please select more payments.
-                    </>
-                )} disableTooltip={!isPaymeDisabled}>
+                <Tooltip
+                    content={(
+                        <>
+                            Minimum withdrawal amounti is $
+                            {props.minWithdrawAmount}
+                            .
+                            <br />
+                            Please select more payments.
+                        </>
+                    )}
+                    disableTooltip={!isPaymeDisabled}
+                >
                     <Button
                         primary
                         onClick={() => {
                             if (isPaymeDisabled) {
-                                return;
+                                return
                             }
+
                             props.onPayMeClick(selectedPayments, total.toFixed(2))
                         }}
                         className={styles.paymeBtn}