Farzin/WALL-1628/Side Note issue on staging environment (#9820)

* fix(cashier): 🐛 fix * fix(cashier): 🐛 fix * fix(cashier): 🐛 fix * fix(cashier): 🐛 fix * fix(cashier): 🐛 fix * fix: don't show side note in FIAT withdrawal page --------- Co-authored-by: Farzin Mirzaie <farzin@deriv.com> Co-authored-by: Nijil Nirmal <nijil@deriv.com>
binary-com · Aug 25, 2023 · c495888 · c495888 · vercel · Aug 25, 2023
1 parent e0e8a53
commit c495888
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 43 deletions.
diff --git a/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx b/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx
@@ -22,7 +22,6 @@ jest.mock('../account-transfer-form', () => jest.fn(() => 'mockedAccountTransfer
 jest.mock('Components/crypto-transactions-history', () => jest.fn(() => 'mockedCryptoTransactionsHistory'));
 jest.mock('Components/cashier-locked', () => jest.fn(() => 'mockedCashierLocked'));
 jest.mock('../account-transfer-no-account', () => jest.fn(() => 'mockedAccountTransferNoAccount'));
-jest.mock('../account-transfer-receipt', () => jest.fn(() => 'mockedAccountTransferReceipt'));
 jest.mock('Components/error', () => jest.fn(() => 'mockedError'));
 
 jest.mock('@deriv/hooks');
@@ -271,30 +270,4 @@ describe('<AccountTransfer />', () => {
 
         expect(await screen.findByText(/You have no funds/i)).toBeInTheDocument();
     });
-
-    it('should show the receipt if transfer is successful', async () => {
-        const mock_root_store = mockStore({
-            client: {
-                mt5_login_list: [
-                    {
-                        account_type: 'demo',
-                        sub_account_type: 'financial_stp',
-                    },
-                ],
-            },
-            modules: {
-                cashier: {
-                    ...cashier_mock,
-                    account_transfer: {
-                        ...cashier_mock.account_transfer,
-                        is_transfer_confirm: true,
-                    },
-                },
-            },
-        });
-
-        renderAccountTransfer(mock_root_store);
-
-        expect(await screen.findByText('mockedAccountTransferReceipt')).toBeInTheDocument();
-    });
 });
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
@@ -22,12 +22,13 @@ import SideNote from '../../../components/side-note';
 import AccountPlatformIcon from '../../../components/account-platform-icon';
 import { useCashierStore } from '../../../stores/useCashierStores';
 import './account-transfer-form.scss';
+import AccountTransferReceipt from '../account-transfer-receipt/account-transfer-receipt';
 
 type TAccountTransferFormProps = {
     error?: TError;
     onClickDeposit?: () => void;
     onClickNotes?: () => void;
-    onClose?: () => void;
+    onClose: () => void;
     setSideNotes?: (notes: React.ReactNode[]) => void;
 };
 
@@ -76,7 +77,7 @@ let mt_accounts_to: TAccount[] = [];
 let remaining_transfers: number | undefined;
 
 const AccountTransferForm = observer(
-    ({ error, onClickDeposit, onClickNotes, setSideNotes }: TAccountTransferFormProps) => {
+    ({ error, onClickDeposit, onClickNotes, setSideNotes, onClose }: TAccountTransferFormProps) => {
         const {
             client,
             common: { is_from_derivgo },
@@ -101,6 +102,7 @@ const AccountTransferForm = observer(
             transfer_limit,
             validateTransferFromAmount,
             validateTransferToAmount,
+            is_transfer_confirm,
         } = account_transfer;
         const { is_crypto, percentage, should_percentage_reset } = general_store;
         const {
@@ -361,6 +363,10 @@ const AccountTransferForm = observer(
             );
         };
 
+        if (is_transfer_confirm) {
+            return <AccountTransferReceipt onClose={onClose} />;
+        }
+
         return (
             <div
                 className='cashier__wrapper account-transfer-form__wrapper'

diff --git a/packages/cashier/src/pages/account-transfer/account-transfer.tsx b/packages/cashier/src/pages/account-transfer/account-transfer.tsx
@@ -6,7 +6,6 @@ import Error from '../../components/error';
 import NoBalance from '../../components/no-balance';
 import { Virtual } from '../../components/cashier-container';
 import CashierLocked from '../../components/cashier-locked';
-import AccountTransferReceipt from './account-transfer-receipt';
 import AccountTransferForm from './account-transfer-form';
 import AccountTransferNoAccount from './account-transfer-no-account';
 import AccountTransferLocked from './account-transfer-locked';
@@ -29,7 +28,6 @@ const AccountTransfer = observer(({ onClickDeposit, onClickNotes, onClose, setSi
         error,
         has_no_account,
         has_no_accounts_balance,
-        is_transfer_confirm,
         is_transfer_locked,
         onMountAccountTransfer: onMount,
         setAccountTransferAmount,
@@ -84,12 +82,10 @@ const AccountTransfer = observer(({ onClickDeposit, onClickNotes, onClose, setSi
     if (has_no_accounts_balance) {
         return <NoBalance onClickDeposit={onClickDeposit} />;
     }
-    if (is_transfer_confirm) {
-        return <AccountTransferReceipt onClose={onClose} />;
-    }
 
     return (
         <AccountTransferForm
+            onClose={onClose}
             error={error}
             setSideNotes={setSideNotes}
             onClickDeposit={onClickDeposit}

diff --git a/packages/cashier/src/pages/withdrawal/withdrawal.tsx b/packages/cashier/src/pages/withdrawal/withdrawal.tsx
@@ -50,13 +50,32 @@ const WithdrawalPageContent = observer(() => {
     const { is_withdraw_confirmed } = withdraw;
     const currency_config = useCurrentCurrencyConfig();
 
-    if (!currency_config.is_crypto && (verification_code || iframe_url)) return <Withdraw />;
+    if (!currency_config.is_crypto && (verification_code || iframe_url))
+        return (
+            <PageContainer hide_breadcrumb>
+                <Withdraw />
+            </PageContainer>
+        );
 
-    if (verification_code && currency_config.is_crypto && !is_withdraw_confirmed) return <CryptoWithdrawForm />;
+    if (verification_code && currency_config.is_crypto && !is_withdraw_confirmed)
+        return (
+            <PageContainer hide_breadcrumb right={<WithdrawalSideNotes />}>
+                <CryptoWithdrawForm />
+            </PageContainer>
+        );
 
-    if (is_withdraw_confirmed) return <CryptoWithdrawReceipt />;
+    if (is_withdraw_confirmed)
+        return (
+            <PageContainer hide_breadcrumb right={<WithdrawalSideNotes />}>
+                <CryptoWithdrawReceipt />
+            </PageContainer>
+        );
 
-    return <WithdrawalVerificationEmail />;
+    return (
+        <PageContainer hide_breadcrumb right={currency_config.is_crypto ? <WithdrawalSideNotes /> : undefined}>
+            <WithdrawalVerificationEmail />
+        </PageContainer>
+    );
 });
 
 const Withdrawal = observer(() => {
@@ -123,11 +142,7 @@ const Withdrawal = observer(() => {
 
     if (is_crypto_transactions_visible) return <CryptoTransactionsHistory />;
 
-    return (
-        <PageContainer hide_breadcrumb right={<WithdrawalSideNotes />}>
-            <WithdrawalPageContent />
-        </PageContainer>
-    );
+    return <WithdrawalPageContent />;
 });
 
 export default Withdrawal;