PM-1278 - disable payme button in wallet if min withdrawal amount is not met

Author: vas3a

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 }) {

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) {

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>
         </>
     )

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;
 }

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>
+            )}
         </>
     )
 }