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,58 @@
+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<
+    () => Partial<ReturnType<typeof useDepositFiatAddress>>
+>;
+
+describe('<DepositFiatIframe />', () => {
+    it('should render the loader when waiting for the response from the cashier API', () => {
+        mockedUseDepositFiatAddress.mockImplementation(() => {
+            return {
+                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', () => {
+        mockedUseDepositFiatAddress.mockImplementation(() => {
+            return {
+                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,31 @@
+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 className='deposit-fiat-iframe__loader' is_fullscreen={false} />}
+            {isSuccess && (
+                <iframe
+                    className='deposit-fiat-iframe__iframe'
+                    onLoad={() => setIsLoading(false)}
+                    src={iframe_url}
+                    style={!is_loading ? { display: 'block' } : { display: 'none' }}
+                    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,10 @@
+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/deposit.tsx

@@ -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/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;