feat(cashier-v2): ✨ add fiat deposit module (deriv-com#13588)

packages/cashier-v2/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeLazyLoader, moduleLoader } from './utils/loader';
+import { makeLazyLoader, moduleLoader } from './utils';
 
 const LazyApp = makeLazyLoader(
     () => moduleLoader(() => import(/* webpackChunkName: "cashier-v2", webpackPreload: true */ './App')),

packages/cashier-v2/src/lib/DepositFiat/DepositFiat.module.scss

@@ -0,0 +1,6 @@
+.iframe {
+    max-width: 58.8rem;
+    width: 100%;
+    flex: 1;
+    margin-inline: auto;
+}

packages/cashier-v2/src/lib/DepositFiat/DepositFiat.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import { useAuthorize, useCashierFiatAddress } from '@deriv/api';
+import { Loader } from '@deriv-com/ui';
+import { ErrorScreen } from '../../components/ErrorScreen';
+import { isServerError } from '../../utils';
+import styles from './DepositFiat.module.scss';
+
+const DepositFiat = () => {
+    const { isSuccess: isAuthorizeSuccess } = useAuthorize();
+    const { data: iframeUrl, error: depositError, isError, mutate } = useCashierFiatAddress();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        if (isAuthorizeSuccess) {
+            mutate('deposit');
+        }
+    }, [isAuthorizeSuccess, mutate]);
+
+    useEffect(() => {
+        setIsLoading(true);
+    }, []);
+
+    if (isError && isServerError(depositError.error)) return <ErrorScreen message={depositError.error.message} />;
+
+    return (
+        <React.Fragment>
+            {isLoading && <Loader />}
+            {iframeUrl && (
+                <iframe
+                    className={styles.iframe}
+                    data-testid='dt_deposit-fiat-iframe'
+                    key={iframeUrl}
+                    onLoad={() => setIsLoading(false)}
+                    src={iframeUrl}
+                    style={{ display: isLoading ? 'none' : 'block' }}
+                    title='deposit_fiat_iframe'
+                />
+            )}
+        </React.Fragment>
+    );
+};
+
+export default DepositFiat;

packages/cashier-v2/src/lib/DepositFiat/__tests__/DepositFiat.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useAuthorize, useCashierFiatAddress } from '@deriv/api';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import DepositFiat from '../DepositFiat';
+
+jest.mock('@deriv/api', () => ({
+    useAuthorize: jest.fn(),
+    useCashierFiatAddress: jest.fn(),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    Loader: jest.fn(() => <div>Loader</div>),
+}));
+
+describe('DepositFiat', () => {
+    beforeEach(() => {
+        (useAuthorize as jest.Mock).mockReturnValueOnce({ isSuccess: true });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render error screen if isError and depositError is a server error', () => {
+        const serverError = { code: '500', message: 'Server Error' };
+
+        (useCashierFiatAddress as jest.Mock).mockReturnValueOnce({
+            data: null,
+            error: { error: serverError },
+            isError: true,
+            isLoading: false,
+            mutate: jest.fn(),
+        });
+
+        render(<DepositFiat />);
+        expect(screen.getByText('Server Error')).toBeInTheDocument();
+    });
+
+    it('should render loader while loading', () => {
+        (useAuthorize as jest.Mock).mockReturnValueOnce({ isSuccess: false });
+        (useCashierFiatAddress as jest.Mock).mockReturnValueOnce({
+            data: null,
+            error: null,
+            isError: false,
+            isLoading: true,
+            mutate: jest.fn(),
+        });
+
+        render(<DepositFiat />);
+        expect(screen.getByText('Loader')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_deposit-fiat-iframe')).not.toBeInTheDocument();
+    });
+
+    it('should render iframe after loading is completed and iframe url is received', async () => {
+        (useCashierFiatAddress as jest.Mock).mockReturnValueOnce({
+            data: 'https://iframe_url',
+            error: null,
+            isError: false,
+            isLoading: false,
+            mutate: jest.fn(),
+        });
+
+        await act(async () => {
+            render(<DepositFiat />);
+            await waitFor(() => {
+                expect(screen.queryByTestId('Loader')).not.toBeInTheDocument();
+            });
+            const iframe = screen.getByTestId('dt_deposit-fiat-iframe');
+            expect(iframe).toHaveAttribute('src', 'https://iframe_url');
+        });
+    });
+});

packages/cashier-v2/src/lib/DepositFiat/index.ts

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

packages/cashier-v2/src/lib/index.ts

@@ -1 +1,2 @@
+export * from './DepositFiat';
 export * from './WithdrawalVerification';

packages/cashier-v2/src/routes/Router.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Switch } from 'react-router-dom';
 import { DummyComponent } from '../components';
 import { Cashier } from '../containers';
-import { WithdrawalVerificationModule } from '../lib';
+import { DepositFiatModule, WithdrawalVerificationModule } from '../lib';
 import { TRouteTypes } from '../types';
 import RouteWithSubRoutes from './RouteWithSubRoutes';
 
@@ -25,7 +25,7 @@ const routesConfig: TRouteTypes.IRouteConfig[] = [
         routes: [
             {
                 path: cashierPathRoutes.cashierDeposit,
-                component: DummyComponent,
+                component: DepositFiatModule,
                 title: 'Deposit',
             },
             {

packages/cashier-v2/src/types.ts

@@ -14,6 +14,16 @@ export namespace TRouteTypes {
     export type TRouteComponent = React.ComponentProps<IRouteConfig['component']>;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace TErrorTypes {
+    export type TServerError = {
+        code: string;
+        details?: { [key: string]: string };
+        fields?: string[];
+        message: string;
+    };
+}
+
 export type TSideNotes = {
     notes: JSX.Element[] | [];
     position?: 'bottom' | 'top';

packages/cashier-v2/src/utils/utils.ts

@@ -1,9 +1,4 @@
-type TServerError = {
-    code: string;
-    details?: { [key: string]: string };
-    fields?: string[];
-    message: string;
-};
+import type { TErrorTypes } from '../types';
 
-export const isServerError = (error: unknown): error is TServerError =>
+export const isServerError = (error: unknown): error is TErrorTypes.TServerError =>
     typeof error === 'object' && error !== null && 'code' in error;