wojciech: feat: reset demo balance (deriv-com#10769)

* feat: routing, skeleton for reset balance [wip]

* feat: UI skeleton

* feat: functionally complete, pending component updates and style updates

* feat: switched buttons to new component

* feat: removed old Text components, removed classes

* feat: removed dependency on legacy components

* feat: added styling

* feat: final cleanups, added mobile (though would be cool to get rid of isMobile in future)

* feat: fixed incorrect number

* Update packages/wallets/src/features/cashier/flows/WalletResetBalance/WalletResetBalance.scss

Co-authored-by: thisyahlen  <104053934+thisyahlen-deriv@users.noreply.github.com>

* Update packages/wallets/src/features/cashier/flows/WalletResetBalance/WalletResetBalance.scss

Co-authored-by: thisyahlen  <104053934+thisyahlen-deriv@users.noreply.github.com>

* Update packages/wallets/src/features/cashier/flows/WalletResetBalance/WalletResetBalance.scss

Co-authored-by: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>

* feat: updated as per new requirements, switched to useMutation

---------

Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Co-authored-by: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>

packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx

@@ -13,7 +13,7 @@ const getWalletHeaderButtons = (isDemo: boolean, handleAction?: () => void) => {
     const buttons = [
         {
             icon: <IcCashierAdd />,
-            name: 'deposit',
+            name: isDemo ? 'reset-balance' : 'deposit',
             text: isDemo ? 'Reset balance' : 'Deposit',
         },
         {

packages/wallets/src/features/cashier/components/WalletCashierContent/WalletCashierContent.tsx

@@ -1,26 +1,31 @@
 import React, { useEffect } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { WalletDeposit } from '../../flows/WalletDeposit';
+import { WalletResetBalance } from '../../flows/WalletResetBalance';
 import { WalletTransactions } from '../../flows/WalletTransactions';
 import { WalletTransfer } from '../../flows/WalletTransfer';
 import { WalletWithdrawal } from '../../flows/WalletWithdrawal';
 
 const WalletCashierContent = () => {
     const history = useHistory();
-    const isTransfer = useRouteMatch('/wallets/cashier/transfer');
+
     const isDeposit = useRouteMatch('/wallets/cashier/deposit');
+    const isResetBalance = useRouteMatch('/wallets/cashier/reset-balance');
+    const isTransfer = useRouteMatch('/wallets/cashier/transfer');
     const isTransactions = useRouteMatch('/wallets/cashier/transactions');
     const isWithdraw = useRouteMatch('/wallets/cashier/withdraw');
 
     useEffect(() => {
         // redirect to deposit page if no other page is matched
-        if (!isTransfer && !isDeposit && !isTransactions && !isWithdraw) {
+        if (!isTransfer && !isDeposit && !isTransactions && !isWithdraw && !isResetBalance) {
             history.push('/wallets/cashier/deposit');
         }
-    }, [isTransfer, isDeposit, isTransactions, isWithdraw, history]);
+    }, [isTransfer, isDeposit, isTransactions, isWithdraw, isResetBalance, history]);
 
     if (isDeposit) return <WalletDeposit />;
 
+    if (isResetBalance) return <WalletResetBalance />;
+
     if (isTransfer) return <WalletTransfer />;
 
     if (isTransactions) return <WalletTransactions />;

packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx

@@ -8,14 +8,20 @@ import useDevice from '../../../../hooks/useDevice';
 import CloseIcon from '../../../../public/images/close-icon.svg';
 import './WalletCashierHeader.scss';
 
-const tabs = ['deposit', 'withdraw', 'transfer', 'transactions'] as const;
+const realAccountTabs = ['deposit', 'withdraw', 'transfer', 'transactions'];
+const virtualAccountTabs = ['withdraw', 'transfer', 'transactions', 'reset-balance'];
 
 const WalletCashierHeader = () => {
     const { data } = useActiveWalletAccount();
     const { isMobile } = useDevice();
     const history = useHistory();
     const location = useLocation();
 
+    let tabs = realAccountTabs;
+    if (data?.is_virtual) {
+        tabs = virtualAccountTabs;
+    }
+
     return (
         <WalletGradientBackground
             currency={data?.currency_config?.display_code || 'USD'}

packages/wallets/src/features/cashier/flows/WalletResetBalance/WalletResetBalance.scss

@@ -0,0 +1,16 @@
+.wallets-reset-balance {
+    text-align: center;
+
+    &__icon {
+     margin: 4rem 0rem;
+    }
+
+    &__title,
+    &__subtitle {
+   margin: 1.6rem 0rem;
+    }
+
+    &__button {
+        margin-top: 3rem;
+    }
+}

packages/wallets/src/features/cashier/flows/WalletResetBalance/WalletResetBalance.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useActiveWalletAccount, useMutation } from '@deriv/api';
+import { useHistory } from 'react-router-dom';
+import useDevice from '../../../../hooks/useDevice';
+import WalletButton from '../../../../components/Base/WalletButton/WalletButton';
+import WalletText from '../../../../components/Base/WalletText/WalletText';
+import IcResetDemoBalance from '../../../../public/images/ic-demo-reset-balance.svg';
+import IcResetDemoBalanceDone from '../../../../public/images/ic-demo-reset-balance-done.svg';
+import './WalletResetBalance.scss';
+
+const WalletResetBalance = () => {
+    const history = useHistory();
+    const { isSuccess: isResetBalanceSuccess, mutate } = useMutation('topup_virtual');
+    const { data: activeWallet } = useActiveWalletAccount();
+    const { isMobile } = useDevice();
+
+    const resetBalance = () => {
+        mutate();
+    };
+
+    const showResetButton = activeWallet?.balance !== 10000;
+
+    return (
+        <div className='wallets-reset-balance'>
+            <div className='wallets-reset-balance__icon'>
+                {isResetBalanceSuccess ? <IcResetDemoBalanceDone /> : <IcResetDemoBalance />}
+            </div>
+
+            <div className='wallets-reset-balance__title'>
+                <WalletText size={isMobile ? 'lg' : '2xl'} weight='bold'>
+                    Reset balance to 10,000.00 USD
+                </WalletText>
+            </div>
+
+            <div className='wallets-reset-balance__subtitle'>
+                <WalletText size={isMobile ? 'md' : 'lg'}>
+                    {isResetBalanceSuccess ? (
+                        <>Your balance has been reset to 10,000.00 USD.</>
+                    ) : (
+                        <> Reset your virtual balance if it falls below 10,000.00 USD or exceeds 10,000.00 USD.</>
+                    )}
+                </WalletText>
+            </div>
+
+            <div className='wallets-reset-balance__button'>
+                {showResetButton && (
+                    <WalletButton color='primary' onClick={resetBalance} size='lg' text='Reset balance' />
+                )}
+
+                {!showResetButton && (
+                    <WalletButton
+                        color='primary'
+                        onClick={() => history.push(`/wallets/cashier/transfer`)}
+                        size='lg'
+                        text='Transfer funds'
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default WalletResetBalance;

packages/wallets/src/features/cashier/flows/WalletResetBalance/index.ts

@@ -0,0 +1 @@
+export { default as WalletResetBalance } from './WalletResetBalance';

packages/wallets/src/routes/Router.tsx

@@ -7,6 +7,7 @@ const prefix = '/wallets';
 
 type TRoutes =
     | `${typeof prefix}/cashier/deposit`
+    | `${typeof prefix}/cashier/reset-balance`
     | `${typeof prefix}/cashier/transactions`
     | `${typeof prefix}/cashier/transfer`
     | `${typeof prefix}/cashier/withdraw`