refactor 🔧: Aum / WALL-297 / deposit fiat module

packages/cashier/src/components/page-container/page-container.scss

@@ -11,6 +11,7 @@
     }
 
     &__content {
+        min-height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;

packages/cashier/src/modules/deposit-fiat/components/deposit-fiat-iframe/__test__/deposit-fiat-iframe.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockStore } from '@deriv/stores';
+import { useDepositFiatAddress } from '@deriv/hooks';
+import CashierProviders from '../../../../../cashier-providers';
+import DepositFiatIframe from '../deposit-fiat-iframe';
+
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useDepositFiatAddress: jest.fn(),
+}));
+
+const mockedUseDepositFiatAddress = useDepositFiatAddress as jest.MockedFunction<typeof useDepositFiatAddress>;
+
+describe('<DepositFiatIframe />', () => {
+    it('should render the loader when waiting for the response from the cashier API', () => {
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockedUseDepositFiatAddress.mockReturnValue({
+            data: undefined,
+            isLoading: false,
+            isSuccess: true,
+            error: undefined,
+            resend: jest.fn(),
+        });
+
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <CashierProviders store={mock}>{children}</CashierProviders>
+        );
+        render(<DepositFiatIframe />, { wrapper });
+
+        expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument();
+    });
+
+    it('should render the iframe once the url is received from API', () => {
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockedUseDepositFiatAddress.mockReturnValue({
+            data: 'https://example.com',
+            isLoading: false,
+            isSuccess: true,
+            error: undefined,
+            resend: jest.fn(),
+        });
+
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <CashierProviders store={mock}>{children}</CashierProviders>
+        );
+        render(<DepositFiatIframe />, { wrapper });
+
+        expect(screen.getByTestId('dt_deposit_fiat_iframe_iframe')).toBeInTheDocument();
+    });
+});

packages/cashier/src/modules/deposit-fiat/components/deposit-fiat-iframe/deposit-fiat-iframe.scss

@@ -0,0 +1,6 @@
+.deposit-fiat-iframe {
+    &__iframe {
+        width: 100%;
+        flex: 1;
+    }
+}

packages/cashier/src/modules/deposit-fiat/components/deposit-fiat-iframe/deposit-fiat-iframe.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Loading } from '@deriv/components';
+import { useDepositFiatAddress } from '@deriv/hooks';
+import { observer } from '@deriv/stores';
+import './deposit-fiat-iframe.scss';
+
+const DepositFiatIframe: React.FC = observer(() => {
+    const { data: iframe_url, isSuccess } = useDepositFiatAddress();
+    const [is_loading, setIsLoading] = useState(true);
+
+    React.useEffect(() => {
+        setIsLoading(true);
+    }, [iframe_url]);
+
+    return (
+        <React.Fragment>
+            {is_loading && <Loading is_fullscreen={false} />}
+            {isSuccess && (
+                <iframe
+                    key={iframe_url}
+                    className='deposit-fiat-iframe__iframe'
+                    onLoad={() => setIsLoading(false)}
+                    src={iframe_url}
+                    style={{ display: is_loading ? 'none' : 'block' }}
+                    data-testid='dt_deposit_fiat_iframe_iframe'
+                />
+            )}
+        </React.Fragment>
+    );
+});
+
+export default DepositFiatIframe;

packages/cashier/src/modules/deposit-fiat/components/deposit-fiat-iframe/index.ts

@@ -0,0 +1 @@
+export { default as DepositFiatIframe } from './deposit-fiat-iframe';

packages/cashier/src/modules/deposit-fiat/components/index.ts

@@ -0,0 +1 @@
+export * from './deposit-fiat-iframe';

packages/cashier/src/modules/deposit-fiat/deposit-fiat.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageContainer } from '../../components/page-container';
+import { DepositFiatIframe } from './components';
+
+const DepositFiat: React.FC = () => (
+    <PageContainer>
+        <DepositFiatIframe />
+    </PageContainer>
+);
+
+export default DepositFiat;

packages/cashier/src/modules/deposit-fiat/index.ts

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

packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx

@@ -48,11 +48,6 @@ jest.mock('../crypto-deposit', () => {
     return CryptoDeposit;
 });
 
-jest.mock('Components/cashier-container/real', () => {
-    const CashierContainerReal = () => <div>Real</div>;
-    return CashierContainerReal;
-});
-
 jest.mock('../deposit-locked', () => {
     const DepositLocked = () => <div>DepositLocked</div>;
     return DepositLocked;
@@ -435,50 +430,6 @@ describe('<Deposit />', () => {
         expect(screen.getByText('CryptoDeposit')).toBeInTheDocument();
     });
 
-    it('should render <Real /> component', () => {
-        const mock_root_store = mockStore({
-            client: {
-                mt5_login_list: [
-                    {
-                        account_type: 'demo',
-                        sub_account_type: 'financial_stp',
-                    },
-                ],
-                currency: 'USD',
-                can_change_fiat_currency: false,
-                current_currency_type: 'fiat',
-                is_switching: false,
-                is_virtual: false,
-            },
-            modules: {
-                cashier: {
-                    iframe: {},
-                    transaction_history: {
-                        is_crypto_transactions_visible: false,
-                        onMount: jest.fn(),
-                    },
-                    deposit: {
-                        error: { is_ask_uk_funds_protection: false, message: '', setErrorMessage: jest.fn() },
-                        onMountDeposit: jest.fn(),
-                    },
-                    general_store: {
-                        is_deposit: true,
-                        is_loading: false,
-                        setActiveTab: jest.fn(),
-                        setIsDeposit: jest.fn(),
-                    },
-                },
-            },
-            traders_hub: { content_flag: ContentFlag.CR_DEMO },
-        });
-
-        render(<Deposit setSideNotes={jest.fn()} />, {
-            wrapper: ({ children }) => <CashierProviders store={mock_root_store}>{children}</CashierProviders>,
-        });
-
-        expect(screen.getByText('Real')).toBeInTheDocument();
-    });
-
     it('should trigger "setSideNotes" callback', () => {
         const mock_root_store = mockStore({
             client: {

packages/cashier/src/pages/deposit/deposit.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Loading } from '@deriv/components';
 import { useCashierLocked, useDepositLocked, useIsSystemMaintenance } from '@deriv/hooks';
 import { useStore, observer } from '@deriv/stores';
-import { Real, Virtual } from '../../components/cashier-container';
+import { Virtual } from '../../components/cashier-container';
 import CashierLocked from '../../components/cashier-locked';
 import CryptoTransactionsHistory from '../../components/crypto-transactions-history';
 import Error from '../../components/error';
@@ -15,6 +15,7 @@ import SideNote from '../../components/side-note';
 import { useCashierStore } from '../../stores/useCashierStores';
 import { CashierOnboardingModule } from '../../modules';
 import { CashierOnboardingSideNotes } from '../../modules/cashier-onboarding/components';
+import { DepositFiatModule } from '../../modules/deposit-fiat';
 
 type TDeposit = {
     setSideNotes: (notes: object | null) => void;
@@ -130,7 +131,7 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => {
                 {is_fiat_currency_banner_visible_for_MF_clients && (
                     <CashierOnboardingSideNotes setSideNotes={setSideNotes} />
                 )}
-                <Real is_deposit />
+                <DepositFiatModule />
             </>
         );
     }

packages/hooks/src/__tests__/useDepositFiatAddress.spec.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { APIProvider } from '@deriv/api';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import useDepositFiatAddress from '../useDepositFiatAddress';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useRequest: jest.fn(() => ({ data: { cashier: 'https://example.com' }, mutate: jest.fn })),
+}));
+
+describe('useDepositFiatAddress', () => {
+    it('should get the iframe url when cashier API is called', () => {
+        const mock = mockStore({ ui: { is_dark_mode_on: false } });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
+        );
+
+        const { result } = renderHook(() => useDepositFiatAddress(), { wrapper });
+
+        result.current.resend();
+
+        expect(result.current.data).toMatch('https://example.com');
+    });
+
+    it('should get the iframe url for dark mode', () => {
+        const mock = mockStore({ ui: { is_dark_mode_on: true } });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
+        );
+
+        const { result } = renderHook(() => useDepositFiatAddress(), { wrapper });
+
+        result.current.resend();
+
+        expect(result.current.data).toBe('https://example.com&DarkMode=on');
+    });
+
+    it('should get the iframe url for light mode', () => {
+        const mock = mockStore({ ui: { is_dark_mode_on: false } });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
+        );
+
+        const { result } = renderHook(() => useDepositFiatAddress(), { wrapper });
+
+        result.current.resend();
+
+        expect(result.current.data).toBe('https://example.com&DarkMode=off');
+    });
+});

packages/hooks/src/index.ts

@@ -5,6 +5,7 @@ export { default as useCFDDemoAccounts } from './useCFDDemoAccounts';
 export { default as useCFDRealAccounts } from './useCFDRealAccounts';
 export { default as useCashierLocked } from './useCashierLocked';
 export { default as useCountdown } from './useCountdown';
+export { default as useDepositFiatAddress } from './useDepositFiatAddress';
 export { default as useDepositLocked } from './useDepositLocked';
 export { default as useExchangeRate } from './useExchangeRate';
 export { default as useFiatAccountList } from './useFiatAccountList';

packages/hooks/src/useDepositFiatAddress.ts

@@ -0,0 +1,25 @@
+import { useCallback, useEffect } from 'react';
+import { useRequest } from '@deriv/api';
+import { useStore } from '@deriv/stores';
+
+const useDepositFiatAddress = () => {
+    const { ui } = useStore();
+    const { is_dark_mode_on } = ui;
+    const { data, mutate, ...rest } = useRequest('cashier');
+    const deposit_iframe_url =
+        typeof data?.cashier === 'string' ? `${data?.cashier}&DarkMode=${is_dark_mode_on ? 'on' : 'off'}` : undefined;
+
+    const send = useCallback(() => mutate([{ payload: { cashier: 'deposit', provider: 'doughflow' } }]), [mutate]);
+
+    useEffect(() => {
+        send();
+    }, [send]);
+
+    return {
+        ...rest,
+        resend: send,
+        data: deposit_iframe_url,
+    };
+};
+
+export default useDepositFiatAddress;