From ef59d53e772952a4ccad903d83280fa533f8f3e1 Mon Sep 17 00:00:00 2001
From: Sui Sin <103026762+suisin-deriv@users.noreply.github.com>
Date: Mon, 21 Oct 2024 19:27:20 +0800
Subject: [PATCH] [COJ1414] Suisin/fix: add Continue Trading button in POI
 (#17243)

* fix: add Continue Trading button in POI

* chore: fix test case fail issue
---
 .../verified/__tests__/verified.spec.tsx      | 29 +++++++++++++++----
 .../poi/status/verified/verified.tsx          |  3 +-
 2 files changed, 25 insertions(+), 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
index 75038f36a5a3..2f0dfb689b7d 100644
--- 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
index 82297e24fe96..2dc14e85d0e9 100644
--- 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>
         );
     }