Merge pull request #1111 from topcoder-platform/PM-1278_limit-withdrawal-min

PM-1278 limit withdrawal min

Author: vas3a

src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx

@@ -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,33 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                         </div>
                     </>
                 )}
-                <Button
-                    primary
-                    onClick={() => {
-                        props.onPayMeClick(selectedPayments, total.toFixed(2))
-                    }}
-                    disabled={total === 0}
+                <Tooltip
+                    content={(
+                        <>
+                            Minimum withdrawal amounti is $
+                            {props.minWithdrawAmount}
+                            .
+                            <br />
+                            Please select more payments.
+                        </>
+                    )}
+                    disableTooltip={!isPaymeDisabled}
                 >
-                    PAY ME
-                </Button>
+                    <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>
+            )}
         </>
     )
 }