Merge branch 'master' into WALL-4850-Password-change-and-account-crea…

…tion-success-message-are-not-shown

packages/account/build/webpack.config.js

@@ -16,6 +16,7 @@ module.exports = function (env) {
             'financial-details-config': 'Configs/financial-details-config',
             'get-status-badge-config': 'Configs/get-status-badge-config',
             'personal-details-config': 'Configs/personal-details-config',
+            'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted',
             'risk-tolerance-warning-modal': 'Components/trading-assessment/risk-tolerance-warning-modal',
             'sent-email-modal': 'Components/sent-email-modal',
             'terms-of-use-config': 'Configs/terms-of-use-config',

packages/account/package.json

@@ -38,7 +38,7 @@
         "@deriv-com/quill-ui": "1.18.0",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
-        "@deriv/quill-icons": "1.23.14",
+        "@deriv/quill-icons": "1.23.3",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

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

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+
+import { BrowserRouter } from 'react-router-dom';
+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} redirect_button={false} />
+            </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('ContinueTradingButton')).toBeInTheDocument();
+    });
+
+    it('should render NeedsReview component if it does not need poi and is_description_enabled', () => {
+        render(
+            <BrowserRouter>
+                <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 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();
+    });
+});

packages/account/src/Components/poa/status/needs-review/index.ts

@@ -0,0 +1,3 @@
+import { NeedsReview as PoaNeedsReview } from './needs-review';
+
+export default PoaNeedsReview;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { isNavigationFromP2P, isNavigationFromDerivGO } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import ContinueTradingButton from '../../continue-trading-button';
+import IconMessageContent from '../../../icon-message-content';
+import PoiButton from '../../../poi/poi-button';
+import { TPoaStatusProps } from '../../../../Types';
+
+export const NeedsReview = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
+    const message = localize('Your proof of address was submitted successfully');
+    const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO();
+    if (!needs_poi) {
+        return (
+            <IconMessageContent
+                message={message}
+                text={localize('Your document is being reviewed, please check back in 1-3 days.')}
+                icon={<Icon icon='IcPoaVerified' size={128} />}
+            >
+                {redirect_button || (!is_redirected_from_platform && <ContinueTradingButton />)}
+            </IconMessageContent>
+        );
+    }
+    return (
+        <IconMessageContent message={message} icon={<Icon icon='IcPoaVerified' size={128} />}>
+            <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/__tests__/submitted.spec.tsx

@@ -14,23 +14,23 @@ describe('<Submitted />', () => {
 
     it('should render the Submitted component', () => {
         renderWithRouter(<Submitted needs_poi />);
-        expect(screen.getByText('Review in progress')).toBeInTheDocument();
+        expect(screen.getByText('Your documents were submitted successfully')).toBeInTheDocument();
     });
 
     it('should show submit_poi message if needs_poi is true', () => {
         renderWithRouter(<Submitted needs_poi />);
-        expect(screen.getByText('To start trading, you also need to verify your identity.')).toBeInTheDocument();
+        expect(screen.getByText('You must also submit a proof of identity.')).toBeInTheDocument();
     });
 
     it('should show review message if needs_poi is true', () => {
         renderWithRouter(<Submitted needs_poi />);
         expect(
-            screen.getByText('Your proof of address is under review. We’ll get back to you in 1–3 working days.')
+            screen.getByText('We’ll review your documents and notify you of its status within 1 to 3 days.')
         ).toBeInTheDocument();
     });
 
     it('should show ContinueTradingButton if no props are passed', () => {
         renderWithRouter(<Submitted />);
-        expect(screen.getByText("Return to Trader's Hub")).toBeInTheDocument();
+        expect(screen.getByTestId('continue-trading-button')).toBeInTheDocument();
     });
 });

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

@@ -1,29 +1,28 @@
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { isNavigationFromP2P, isNavigationFromDerivGO, routes } from '@deriv/shared';
+import { isNavigationFromP2P, isNavigationFromDerivGO } from '@deriv/shared';
+import ContinueTradingButton from '../../continue-trading-button';
 import IconMessageContent from '../../../icon-message-content';
-import RouteButton from '../../../route-button';
+import PoiButton from '../../../poi/poi-button';
 import { TPoaStatusProps } from '../../../../Types';
 
 export const Submitted = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
-    const message = localize('Review in progress');
+    const message = localize('Your documents were submitted successfully');
     const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO();
     if (needs_poi) {
         return (
             <div className='account-management__container'>
                 <IconMessageContent message={message} icon={<Icon icon='IcPoaVerified' size={128} />}>
                     <div className='account-management__text-container'>
                         <Text align='center' size='xs' as='p'>
-                            {localize(
-                                'Your proof of address is under review. We’ll get back to you in 1–3 working days.'
-                            )}
+                            {localize('We’ll review your documents and notify you of its status within 1 to 3 days.')}
                         </Text>
                         <Text align='center' size='xs' as='p'>
-                            {localize('To start trading, you also need to verify your identity.')}
+                            {localize('You must also submit a proof of identity.')}
                         </Text>
                     </div>
-                    <RouteButton button_label={localize('Next')} route={routes.proof_of_identity} />
+                    <PoiButton />
                 </IconMessageContent>
             </div>
         );
@@ -32,13 +31,10 @@ export const Submitted = ({ needs_poi, redirect_button }: TPoaStatusProps) => {
         <div className='account-management__container'>
             <IconMessageContent
                 message={message}
-                text={localize('Your proof of address is under review. We’ll get back to you in 1–3 working days.')}
+                text={localize('We’ll review your documents and notify you of its status within 1 to 3 days.')}
                 icon={<Icon icon='IcPoaVerified' size={128} />}
             >
-                {redirect_button ||
-                    (!is_redirected_from_platform && (
-                        <RouteButton button_label={localize("Return to Trader's Hub")} route={routes.traders_hub} />
-                    ))}
+                {redirect_button || (!is_redirected_from_platform && <ContinueTradingButton />)}
             </IconMessageContent>
         </div>
     );

packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, Icon, Loading } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared';
+import IconMessageContent from 'Components/icon-message-content';
+import { GetAccountStatus } from '@deriv/api-types';
+
+type TPoiPoaDocsSubmitted = {
+    account_status: GetAccountStatus;
+    onClickOK: () => void;
+    jurisdiction_selected_shortcode: string;
+    has_created_account_for_selected_jurisdiction: boolean;
+    openPasswordModal: () => void;
+    updateAccountStatus: () => Promise<void>;
+};
+
+const PoiPoaDocsSubmitted = ({
+    account_status,
+    jurisdiction_selected_shortcode,
+    onClickOK,
+    updateAccountStatus,
+    has_created_account_for_selected_jurisdiction,
+    openPasswordModal,
+}: TPoiPoaDocsSubmitted) => {
+    const [is_loading, setIsLoading] = React.useState(false);
+
+    React.useEffect(() => {
+        const fetchAccountStatus = async () => {
+            await updateAccountStatus();
+            setIsLoading(false);
+        };
+        setIsLoading(true);
+        fetchAccountStatus();
+
+        return () => setIsLoading(false);
+    }, [updateAccountStatus]);
+
+    const onSubmit = () => {
+        onClickOK();
+        if (!has_created_account_for_selected_jurisdiction) {
+            openPasswordModal();
+        }
+    };
+
+    const getDescription = () => {
+        const { manual_status, poi_verified_for_maltainvest, poi_verified_for_bvi_labuan_vanuatu, poa_pending } =
+            getAuthenticationStatusInfo(account_status);
+        const is_maltainvest_selected = jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST;
+        if (
+            (is_maltainvest_selected && poi_verified_for_maltainvest && poa_pending) ||
+            (!is_maltainvest_selected && poi_verified_for_bvi_labuan_vanuatu && poa_pending) ||
+            manual_status === 'pending'
+        ) {
+            return localize('We’ll review your documents and notify you of its status within 1 - 3 working days.');
+        }
+        return localize('We’ll review your documents and notify you of its status within 5 minutes.');
+    };
+
+    return is_loading ? (
+        <Loading is_fullscreen={false} />
+    ) : (
+        <IconMessageContent
+            message={localize('Your documents were submitted successfully')}
+            text={getDescription()}
+            icon={<Icon icon='IcDocsSubmit' size={128} />}
+            className='poi-poa-submitted'
+        >
+            <Button has_effect text={localize('Ok')} onClick={onSubmit} primary />
+        </IconMessageContent>
+    );
+};
+
+export default PoiPoaDocsSubmitted;

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

@@ -51,12 +51,18 @@ describe('<IdvSubmitComplete/>', () => {
 
         expect(screen.getByText('DerivLightWaitingPoiIcon')).toBeInTheDocument();
         expect(screen.getByText('Mock Redirect Button')).toBeInTheDocument();
-        expect(screen.queryByText('Your profile is updated')).not.toBeInTheDocument();
-        expect(screen.queryByText('Review in progress')).toBeInTheDocument();
+        expect(screen.getByText('Your documents were submitted successfully')).toBeInTheDocument();
         expect(
-            screen.queryByText('Your proof of identity is under review. We’ll get back to you within 5 minutes.')
+            screen.getByText('We’ll review your documents and notify you of its status within 5 minutes.')
         ).toBeInTheDocument();
-        expect(screen.queryByText('To start trading, you also need to verify your address.')).not.toBeInTheDocument();
+        expect(screen.queryByText('Your profile is updated')).not.toBeInTheDocument();
+        expect(screen.queryByText('Your document has been submitted')).not.toBeInTheDocument();
+        expect(
+            screen.queryByText(
+                "We'll review your proof of identity again and will give you an update as soon as possible."
+            )
+        ).not.toBeInTheDocument();
+        expect(screen.queryByText("Next, we'll need your proof of address.")).not.toBeInTheDocument();
     });
 
     it('should render IdvSubmitComplete component needs_poa not external, without mismatch_status and redirect_button', () => {
@@ -68,12 +74,16 @@ describe('<IdvSubmitComplete/>', () => {
         renderComponent({ props: new_props });
 
         expect(screen.getByText('DerivLightWaitingPoiIcon')).toBeInTheDocument();
-        expect(screen.queryByText('Review in progress')).toBeInTheDocument();
+        expect(screen.getByText('Your documents were submitted successfully')).toBeInTheDocument();
+        expect(screen.getByText('Submit proof of address')).toBeInTheDocument();
+        expect(screen.getByText("Next, we'll need your proof of address.")).toBeInTheDocument();
+        expect(screen.queryByText('Your profile is updated')).not.toBeInTheDocument();
+        expect(screen.queryByText('Your document has been submitted')).not.toBeInTheDocument();
         expect(
-            screen.queryByText('Your proof of identity is under review. We’ll get back to you within 5 minutes.')
-        ).toBeInTheDocument();
-        expect(screen.queryByText('To start trading, you also need to verify your address.')).toBeInTheDocument();
-        expect(screen.queryByText('Next')).toBeInTheDocument();
+            screen.queryByText(
+                "We'll review your proof of identity again and will give you an update as soon as possible."
+            )
+        ).not.toBeInTheDocument();
     });
 
     it('should render IdvSubmitComplete component with mismatch_status ', () => {

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

@@ -33,7 +33,7 @@ const IdvSubmitComplete = observer(
                 if (is_expired_or_failed_error)
                     return <Localize i18n_default_text='Your document has been submitted' />;
             }
-            return <Localize i18n_default_text='Review in progress' />;
+            return <Localize i18n_default_text='Your documents were submitted successfully' />;
         };
 
         const getDescriptionText = () => {
@@ -42,11 +42,13 @@ const IdvSubmitComplete = observer(
                     <Localize i18n_default_text="We'll review your proof of identity again and will give you an update as soon as possible." />
                 );
             return (
-                <Localize i18n_default_text='Your proof of identity is under review. We’ll get back to you within 5 minutes.' />
+                <Localize i18n_default_text='We’ll review your documents and notify you of its status within 5 minutes.' />
             );
         };
 
-        const poa_button = !is_from_external && <PoaButton custom_text={<Localize i18n_default_text='Next' />} />;
+        const poa_button = !is_from_external && (
+            <PoaButton custom_text={<Localize i18n_default_text='Submit proof of address' />} />
+        );
 
         return (
             <div className={clsx('proof-of-identity__container', 'proof-of-identity__container--status')}>
@@ -60,7 +62,7 @@ const IdvSubmitComplete = observer(
                 {needs_poa ? (
                     <React.Fragment>
                         <Text className='text' size='xs' align='center'>
-                            <Localize i18n_default_text='To start trading, you also need to verify your address.' />
+                            <Localize i18n_default_text="Next, we'll need your proof of address." />
                         </Text>
                         {poa_button}
                     </React.Fragment>

packages/account/src/Components/poi/status/unsupported/detail-component.tsx

@@ -31,7 +31,6 @@ type TDetailComponent = {
     is_from_external?: boolean;
     is_for_mt5?: boolean;
     handlePOIforMT5Complete?: () => void;
-    needs_poa?: boolean;
 };
 
 const DetailComponent = ({
@@ -45,7 +44,6 @@ const DetailComponent = ({
     is_from_external,
     is_for_mt5,
     handlePOIforMT5Complete,
-    needs_poa,
     ...props
 }: TDetailComponent) => {
     const [status, setStatus] = React.useState('');
@@ -123,7 +121,7 @@ const DetailComponent = ({
         case STATUS.IS_UPLOADING:
             return <Loading is_fullscreen={false} is_slow_loading status={[localize('Uploading documents')]} />;
         case STATUS.IS_COMPLETED:
-            return <UploadComplete is_from_external needs_poa={needs_poa} is_manual_upload />;
+            return <UploadComplete is_from_external={true} needs_poa={false} is_manual_upload />;
         case STATUS.IS_FAILED:
             return <POIManualUploadFailed error={response_error} />;
         case STATUS.IS_DUPLICATE_UPLOAD: