feat: deriv-go-redirection issue (#7889)

* feat: deriv-go-redirection issue

* feat: added bderivgo redirection

* feat: ✨ mavigate back to DerivGO

* feat: removed debug console

* feat: 🎨 code refactor

* feat: added missing button

* feat: ✨ added redirect button for POA

* feat: 🐛 resolved failing testcases

* feat: ♻️ incorporated review comments

* feat: 🐛 added redirection button to missing scenarios

---------

Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>

packages/account/src/Components/poa/status/needs-review/__tests__/needs-review-spec.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
+import { render, screen } from '@testing-library/react';
+
 import { BrowserRouter } from 'react-router-dom';
-import { screen, render } from '@testing-library/react';
+import { Button } from '@deriv/components';
 import { NeedsReview } from '../needs-review';
+import React from 'react';
 
 jest.mock('Components/poa/continue-trading-button/continue-trading-button', () => ({
     ContinueTradingButton: jest.fn(() => <div>ContinueTradingButton</div>),
 }));
 
+const mock_redirection_btn = <Button>Redirection button</Button>;
+
 describe('<NeedsReview/>', () => {
     it('should render NeedsReview component if it does not need poi', () => {
         render(
             <BrowserRouter>
-                <NeedsReview needs_poi={false} is_description_enabled />
+                <NeedsReview needs_poi={false} redirect_button={false} />
             </BrowserRouter>
         );
 
@@ -23,38 +27,25 @@ describe('<NeedsReview/>', () => {
     it('should render NeedsReview component if it does not need poi and is_description_enabled', () => {
         render(
             <BrowserRouter>
-                <NeedsReview needs_poi={false} is_description_enabled={false} />
+                <NeedsReview needs_poi={false} redirect_button={mock_redirection_btn} />
             </BrowserRouter>
         );
 
         expect(screen.getByText('Your proof of address was submitted successfully')).toBeInTheDocument();
         expect(screen.getByText('Your document is being reviewed, please check back in 1-3 days.')).toBeInTheDocument();
         expect(screen.queryByText('ContinueTradingButton')).not.toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
     it('should render NeedsReview component if it needs poi', () => {
         render(
             <BrowserRouter>
-                <NeedsReview needs_poi is_description_enabled />
+                <NeedsReview needs_poi redirect_button={mock_redirection_btn} />
             </BrowserRouter>
         );
 
         expect(screen.getByText('Your proof of address was submitted successfully')).toBeInTheDocument();
         expect(screen.getByText('Your document is being reviewed, please check back in 1-3 days.')).toBeInTheDocument();
         expect(screen.getByText('You must also submit a proof of identity.')).toBeInTheDocument();
     });
-
-    it('should render NeedsReview component if it needs poi and is_description_enabled false', () => {
-        render(
-            <BrowserRouter>
-                <NeedsReview needs_poi is_description_enabled={false} />
-            </BrowserRouter>
-        );
-
-        expect(screen.getByText('Your proof of address was submitted successfully')).toBeInTheDocument();
-        expect(
-            screen.queryByText('Your document is being reviewed, please check back in 1-3 days.')
-        ).not.toBeInTheDocument();
-        expect(screen.queryByText('You must also submit a proof of identity.')).not.toBeInTheDocument();
-    });
 });

packages/account/src/Components/poa/status/needs-review/needs-review.tsx

@@ -1,12 +1,13 @@
 import { Icon, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import React from 'react';
+
+import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button';
 import IconMessageContent from 'Components/icon-message-content';
 import PoiButton from 'Components/poi/poi-button';
-import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button';
+import React from 'react';
 import { TPoaStatusProps } from 'Types';
+import { localize } from '@deriv/translations';
 
-export const NeedsReview = ({ needs_poi, is_description_enabled = true }: TPoaStatusProps) => {
+export const NeedsReview = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
     const message = localize('Your proof of address was submitted successfully');
     if (!needs_poi) {
         return (
@@ -15,25 +16,21 @@ export const NeedsReview = ({ needs_poi, is_description_enabled = true }: TPoaSt
                 text={localize('Your document is being reviewed, please check back in 1-3 days.')}
                 icon={<Icon icon='IcPoaVerified' size={128} />}
             >
-                {is_description_enabled && <ContinueTradingButton />}
+                {redirect_button || <ContinueTradingButton />}
             </IconMessageContent>
         );
     }
     return (
         <IconMessageContent message={message} icon={<Icon icon='IcPoaVerified' size={128} />}>
-            {is_description_enabled && (
-                <React.Fragment>
-                    <div className='account-management__text-container'>
-                        <Text align='center' size='xs' as='p'>
-                            {localize('Your document is being reviewed, please check back in 1-3 days.')}
-                        </Text>
-                        <Text align='center' size='xs' as='p'>
-                            {localize('You must also submit a proof of identity.')}
-                        </Text>
-                    </div>
-                    <PoiButton />
-                </React.Fragment>
-            )}
+            <div className='account-management__text-container'>
+                <Text align='center' size='xs' as='p'>
+                    {localize('Your document is being reviewed, please check back in 1-3 days.')}
+                </Text>
+                <Text align='center' size='xs' as='p'>
+                    {localize('You must also submit a proof of identity.')}
+                </Text>
+            </div>
+            <PoiButton />
         </IconMessageContent>
     );
 };

packages/account/src/Components/poa/status/submitted/submitted.tsx

@@ -8,7 +8,7 @@ import { ContinueTradingButton } from 'Components/poa/continue-trading-button/co
 import PoiButton from 'Components/poi/poi-button';
 import IconMessageContent from 'Components/icon-message-content';
 
-export const Submitted = ({ needs_poi, is_description_enabled = true }: TPoaStatusProps) => {
+export const Submitted = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
     const { is_appstore }: TPlatformContext = React.useContext(PlatformContext);
     const message = localize('Your documents were submitted successfully');
     if (needs_poi) {
@@ -48,7 +48,7 @@ export const Submitted = ({ needs_poi, is_description_enabled = true }: TPoaStat
                 icon={<Icon icon='IcPoaVerified' size={128} />}
                 full_width={is_appstore}
             >
-                {!is_description_enabled && <ContinueTradingButton />}
+                {redirect_button || <ContinueTradingButton />}
             </IconMessageContent>
         </div>
     );

packages/account/src/Components/poa/status/verified/__tests__/verified.spec.tsx

@@ -1,5 +1,7 @@
+import { render, screen } from '@testing-library/react';
+
+import { Button } from '@deriv/components';
 import React from 'react';
-import { screen, render } from '@testing-library/react';
 import { Verified } from '../verified';
 
 jest.mock('Components/poa/continue-trading-button/continue-trading-button', () => ({
@@ -9,30 +11,34 @@ jest.mock('Components/poi/poi-button/poi-button', () => ({
     PoiButton: jest.fn(() => <div>PoiButton</div>),
 }));
 
+const mock_redirection_btn = <Button>Redirection button</Button>;
+
 describe('<Verified/>', () => {
     const message = 'Your proof of address is verified';
     const needs_poi_msg = 'To continue trading, you must also submit a proof of identity.';
 
     it('should render Verified component without needs_poi', () => {
-        render(<Verified needs_poi={false} />);
+        render(<Verified needs_poi={false} redirect_button={mock_redirection_btn} />);
 
         expect(screen.getByText(message)).toBeInTheDocument();
         expect(screen.queryByText('ContinueTradingButton')).not.toBeInTheDocument();
         expect(screen.queryByText(needs_poi_msg)).not.toBeInTheDocument();
         expect(screen.queryByText('PoiButton')).not.toBeInTheDocument();
+        expect(screen.queryByRole('button')).toBeInTheDocument();
     });
 
     it('should render Verified component without needs_poi and is_description_enabled', () => {
-        render(<Verified needs_poi={false} is_description_enabled={false} />);
+        render(<Verified needs_poi={false} redirect_button={false} />);
 
         expect(screen.getByText('ContinueTradingButton')).toBeInTheDocument();
         expect(screen.getByText(message)).toBeInTheDocument();
         expect(screen.queryByText(needs_poi_msg)).not.toBeInTheDocument();
         expect(screen.queryByText('PoiButton')).not.toBeInTheDocument();
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
 
     it('should render Verified component with needs_poi', () => {
-        render(<Verified needs_poi={true} />);
+        render(<Verified needs_poi={true} redirect_button={mock_redirection_btn} />);
 
         expect(screen.getByText(message)).toBeInTheDocument();
         expect(screen.getByText(needs_poi_msg)).toBeInTheDocument();

packages/account/src/Components/poa/status/verified/verified.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
-import classNames from 'classnames';
+import { TPlatformContext, TPoaStatusProps } from 'Types';
+
+import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button';
 import { Icon } from '@deriv/components';
+import IconMessageContent from 'Components/icon-message-content';
 import { PlatformContext } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-import { TPlatformContext, TPoaStatusProps } from 'Types';
 import { PoiButton } from 'Components/poi/poi-button/poi-button';
-import IconMessageContent from 'Components/icon-message-content';
-import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button';
+import React from 'react';
+import classNames from 'classnames';
+import { localize } from '@deriv/translations';
 
-export const Verified = ({ needs_poi, is_description_enabled = true }: TPoaStatusProps) => {
+export const Verified = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
     const { is_appstore }: TPlatformContext = React.useContext(PlatformContext);
 
     const message = localize('Your proof of address is verified');
@@ -23,7 +24,7 @@ export const Verified = ({ needs_poi, is_description_enabled = true }: TPoaStatu
                     message={message}
                     text={localize('To continue trading, you must also submit a proof of identity.')}
                     icon={<Icon icon='IcPoaVerified' size={128} />}
-                    className={is_appstore && 'account-management-dashboard'}
+                    className={classNames({ 'account-management-dashboard': is_appstore })}
                 >
                     <PoiButton />
                 </IconMessageContent>
@@ -39,9 +40,9 @@ export const Verified = ({ needs_poi, is_description_enabled = true }: TPoaStatu
             <IconMessageContent
                 message={message}
                 icon={<Icon icon='IcPoaVerified' size={128} />}
-                className={is_appstore && 'account-management-dashboard'}
+                className={classNames({ 'account-management-dashboard': is_appstore })}
             >
-                {!is_description_enabled && <ContinueTradingButton />}
+                {redirect_button || <ContinueTradingButton />}
             </IconMessageContent>
         </div>
     );

packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.tsx

@@ -1,15 +1,16 @@
+import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
+import PoaButton from 'Components/poa/poa-button';
 import React from 'react';
 import { Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import PoaButton from 'Components/poa/poa-button';
-import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
 
 type TIdvSubmitComplete = {
     needs_poa: boolean;
     is_from_external: boolean;
+    redirect_button: React.ReactNode;
 };
 
-const IdvSubmitComplete = ({ needs_poa, is_from_external }: TIdvSubmitComplete) => {
+const IdvSubmitComplete = ({ needs_poa, is_from_external, redirect_button }: TIdvSubmitComplete) => {
     const poa_button = !is_from_external && <PoaButton custom_text={localize('Submit proof of address')} />;
 
     return (
@@ -21,13 +22,15 @@ const IdvSubmitComplete = ({ needs_poa, is_from_external }: TIdvSubmitComplete)
             <Text className='proof-of-identity__text text' size='xs' align='center'>
                 {localize('We’ll review your documents and notify you of its status within 5 minutes.')}
             </Text>
-            {!!needs_poa && (
+            {needs_poa ? (
                 <React.Fragment>
                     <Text className='text' size='xs' align='center'>
                         {localize("Next, we'll need your proof of address.")}
                     </Text>
                     {poa_button}
                 </React.Fragment>
+            ) : (
+                redirect_button
             )}
         </div>
     );

packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.tsx

@@ -1,16 +1,17 @@
+import IdvDocumentVerified from 'Assets/ic-idv-verified.svg';
+import PoaButton from 'Components/poa/poa-button';
 import React from 'react';
 import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import PoaButton from 'Components/poa/poa-button';
-import IdvDocumentVerified from 'Assets/ic-idv-verified.svg';
 
 type TIdvVerified = {
     needs_poa: boolean;
     is_from_external: boolean;
+    redirect_button: React.ReactNode;
 };
 
-const IdvVerified = ({ needs_poa, is_from_external }: Partial<TIdvVerified>) => {
+const IdvVerified = ({ needs_poa, is_from_external, redirect_button }: Partial<TIdvVerified>) => {
     const header_Text = needs_poa
         ? localize('Your ID is verified. You will also need to submit proof of your address.')
         : localize('ID verification passed');
@@ -21,7 +22,7 @@ const IdvVerified = ({ needs_poa, is_from_external }: Partial<TIdvVerified>) =>
             <Text className='proof-of-identity__text btm-spacer' align='center' weight='bold'>
                 {header_Text}
             </Text>
-            {!!needs_poa && (
+            {needs_poa ? (
                 <React.Fragment>
                     {!isMobile() && (
                         <Text className='text' size='xs' align='center'>
@@ -30,6 +31,8 @@ const IdvVerified = ({ needs_poa, is_from_external }: Partial<TIdvVerified>) =>
                     )}
                     {!is_from_external && <PoaButton custom_text={localize('Submit proof of address')} />}
                 </React.Fragment>
+            ) : (
+                redirect_button
             )}
         </div>
     );

packages/account/src/Components/poi/status/unsupported/unsupported.jsx

@@ -41,7 +41,8 @@ const Unsupported = ({
     });
 
     if (manual) {
-        if (manual.status === identity_status_codes.pending) return <UploadComplete is_manual_upload />;
+        if (manual.status === identity_status_codes.pending)
+            return <UploadComplete is_manual_upload needs_poa={needs_poa} redirect_button={redirect_button} />;
         else if ([identity_status_codes.rejected, identity_status_codes.suspected].includes(manual.status)) {
             if (!allow_poi_resubmission) return <Limited />;
         } else if (manual.status === identity_status_codes.verified) {

packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+
 import { Button } from '@deriv/components';
+import React from 'react';
 import { Verified } from '../verified';
 
 jest.mock('Components/poa/poa-button', () => () => <div data-testid='poa-button' />);
@@ -35,6 +36,5 @@ describe('<Verified/>', () => {
         render(<Verified needs_poa redirect_button={redirect_button} />);
         expect(screen.getByTestId('poa-button')).toBeInTheDocument();
         expect(screen.getByText(needs_poa_msg)).toBeInTheDocument();
-        expect(screen.getByRole('button')).toBeInTheDocument();
     });
 });

packages/account/src/Components/poi/status/verified/verified.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { PropTypes } from 'prop-types';
 import { Icon } from '@deriv/components';
+import IconMessageContent from 'Components/icon-message-content';
 import { PlatformContext } from '@deriv/shared';
-import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
-import IconMessageContent from 'Components/icon-message-content';
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import { localize } from '@deriv/translations';
 
 export const Verified = ({ needs_poa, redirect_button, is_from_external }) => {
     const { is_appstore } = React.useContext(PlatformContext);
@@ -42,7 +42,6 @@ export const Verified = ({ needs_poa, redirect_button, is_from_external }) => {
             {!is_from_external && (
                 <React.Fragment>
                     <PoaButton />
-                    {redirect_button}
                 </React.Fragment>
             )}
         </IconMessageContent>