[COJ1414] Suisin/fix: add Continue Trading button in POI (#17243)

* fix: add Continue Trading button in POI * chore: fix test case fail issue
deriv-com · Oct 21, 2024 · ef59d53 · ef59d53
1 parent 4462035
commit ef59d53
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.tsx b/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { Button } from '@deriv/components';
 import React from 'react';
 import { Verified } from '../verified';
+import { MemoryRouter } from 'react-router';
 
 jest.mock('Components/poa/poa-button', () => jest.fn(() => <div data-testid='poa-button' />));
 
@@ -12,12 +13,20 @@ describe('<Verified/>', () => {
     const needs_poa_msg = 'To continue trading, you must also submit a proof of address.';
 
     it('should render Verified component', () => {
-        render(<Verified />);
+        render(
+            <MemoryRouter>
+                <Verified />
+            </MemoryRouter>
+        );
         expect(screen.getByText(message)).toBeInTheDocument();
     });
 
     it('should show icon with message if needs_poa is false', () => {
-        render(<Verified />);
+        render(
+            <MemoryRouter>
+                <Verified />
+            </MemoryRouter>
+        );
 
         expect(screen.getByTestId('dt_IcPoaVerified')).toBeInTheDocument();
         expect(screen.getByText(message)).toBeInTheDocument();
@@ -28,13 +37,21 @@ describe('<Verified/>', () => {
         expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
-    it('should not show redirect button if redirect_button is not passed', () => {
-        render(<Verified />);
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    it('should show continue trading button if redirect_button is not passed', () => {
+        render(
+            <MemoryRouter>
+                <Verified />
+            </MemoryRouter>
+        );
+        expect(screen.getByText('Continue trading')).toBeInTheDocument();
     });
 
     it('should show poa buttons and the message if needs_poa is true and is_from_external is false ', () => {
-        render(<Verified needs_poa redirect_button={redirect_button} />);
+        render(
+            <MemoryRouter>
+                <Verified needs_poa redirect_button={redirect_button} />
+            </MemoryRouter>
+        );
         expect(screen.getByTestId('poa-button')).toBeInTheDocument();
         expect(screen.getByText(needs_poa_msg)).toBeInTheDocument();
     });

diff --git a/packages/account/src/Components/poi/status/verified/verified.tsx b/packages/account/src/Components/poi/status/verified/verified.tsx
@@ -5,6 +5,7 @@ import { TPOIStatus } from 'Types';
 import IconMessageContent from '../../../icon-message-content';
 import PoaButton from '../../../poa/poa-button';
 import { service_code } from '../../../../Sections/Verification/ProofOfIdentity/proof-of-identity-utils';
+import ContinueTradingButton from '../../../poa/continue-trading-button';
 
 export const Verified = ({ needs_poa, redirect_button, is_from_external, service }: TPOIStatus) => {
     const message =
@@ -19,7 +20,7 @@ export const Verified = ({ needs_poa, redirect_button, is_from_external, service
                 icon={<Icon icon='IcPoaVerified' size={128} data_testid='dt_IcPoaVerified' />}
                 className='account-management-dashboard'
             >
-                {!is_from_external && redirect_button}
+                {!is_from_external && (redirect_button || <ContinueTradingButton />)}
             </IconMessageContent>
         );
     }