[Wallet] Lubega / WALL-2174 / Withdrawal fiat main screen and redirec…

…tion (#11081)

* feat: fiat withdrawal module

* fix: applied comments

* fix: resolved failed test

packages/core/src/App/Containers/Redirect/redirect.jsx

@@ -26,7 +26,9 @@ const Redirect = ({
     let redirected_to_route = false;
     const action_param = url_params.get('action');
     const code_param = url_params.get('code') || verification_code[action_param];
+    sessionStorage.verification_code = code_param;
     const ext_platform_url = url_params.get('ext_platform_url');
+    const is_next_wallet = localStorage.getObject('FeatureFlagsStore')?.data.next_wallet;
     const { is_appstore } = React.useContext(PlatformContext);
 
     const redirectToExternalPlatform = url => {
@@ -122,7 +124,7 @@ const Redirect = ({
             break;
         }
         case 'payment_withdraw': {
-            history.push(routes.cashier_withdrawal);
+            is_next_wallet ? history.push(routes.wallets_withdrawal) : history.push(routes.cashier_withdrawal);
             redirected_to_route = true;
             break;
         }

packages/shared/src/utils/routes/routes.ts

@@ -75,4 +75,5 @@ export const routes = {
 
     // Wallets
     wallets: '/wallets',
+    wallets_withdrawal: '/wallets/cashier/withdraw',
 };

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { WithdrawalVerificationModule } from '../../modules';
+import { WithdrawalFiatModule } from '../../modules';
 
 const WalletWithdrawal = () => {
-    return <WithdrawalVerificationModule />;
+    //TODO: add withdrawal crypto module
+    return <WithdrawalFiatModule />;
 };
 
 export default WalletWithdrawal;

packages/wallets/src/features/cashier/modules/WithdrawalFiat/WithdrawalFiat.scss

@@ -0,0 +1,11 @@
+.wallets-withdrawal-fiat {
+    &__iframe {
+        width: 50%;
+        max-width: 58.8rem;
+        border: none;
+
+        @include mobile {
+            width: 100%;
+        }
+    }
+}

packages/wallets/src/features/cashier/modules/WithdrawalFiat/WithdrawalFiat.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { useCashierFiatAddress } from '@deriv/api';
+import { Loader } from '../../../../components';
+import { WithdrawalVerificationModule } from '../WithdrawalVerification';
+import './WithdrawalFiat.scss';
+
+const WithdrawalFiat = () => {
+    const verificationCode = sessionStorage.getItem('verification_code');
+    const { data: iframeUrl, isLoading, mutate } = useCashierFiatAddress();
+
+    useEffect(() => {
+        if (iframeUrl) sessionStorage.removeItem('verification_code');
+    }, [iframeUrl, isLoading]);
+
+    useEffect(() => {
+        if (verificationCode)
+            mutate('withdraw', {
+                verification_code: verificationCode,
+            });
+    }, [mutate]);
+
+    if (verificationCode || iframeUrl) {
+        return (
+            <React.Fragment>
+                {isLoading && <Loader />}
+                {iframeUrl && (
+                    <iframe
+                        className='wallets-withdrawal-fiat__iframe'
+                        key={iframeUrl}
+                        src={iframeUrl}
+                        style={{ display: isLoading ? 'none' : 'block' }}
+                    />
+                )}
+            </React.Fragment>
+        );
+    }
+    return <WithdrawalVerificationModule />;
+};
+
+export default WithdrawalFiat;

packages/wallets/src/features/cashier/modules/WithdrawalFiat/index.ts

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

packages/wallets/src/features/cashier/modules/index.ts

@@ -3,4 +3,5 @@ export * from './DepositFiat';
 export * from './ResetBalance';
 export * from './Transactions';
 export * from './Transfer';
+export * from './WithdrawalFiat';
 export * from './WithdrawalVerification';