Merge pull request #46 from suisin-deriv/suisin/WALL884/add_country_i…

…n_poi_modal chore: include country selection in POI for EU users
amina-deriv · Jul 3, 2023 · 1ae1129 · 1ae1129
2 parents 8fbc37f + ac36098
commit 1ae1129
Show file tree

Hide file tree

Showing 10 changed files with 509 additions and 3 deletions.
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/index.js b/packages/account/src/Sections/Verification/ProofOfIdentity/index.js
@@ -1 +1,2 @@
-export default from './proof-of-identity.jsx';
+export { default as ProofOfIdentity } from './proof-of-identity.jsx';
+export { default as ProofOfIdentityContainer } from './proof-of-identity-container.jsx';
diff --git a/packages/account/src/Sections/index.js b/packages/account/src/Sections/index.js
@@ -3,7 +3,7 @@ import AccountLimits from 'Sections/Security/AccountLimits';
 import PersonalDetails from 'Sections/Profile/PersonalDetails';
 import TradingAssessment from 'Sections/Assessment/TradingAssessment';
 import FinancialAssessment from 'Sections/Assessment/FinancialAssessment';
-import ProofOfIdentity from 'Sections/Verification/ProofOfIdentity';
+import { ProofOfIdentityContainer, ProofOfIdentity } from 'Sections/Verification/ProofOfIdentity';
 import ProofOfAddress from 'Sections/Verification/ProofOfAddress';
 import ProofOfOwnership from 'Sections/Verification/ProofOfOwnership';
 import TwoFactorAuthentication from 'Sections/Security/TwoFactorAuthentication';
@@ -23,6 +23,7 @@ export {
     PersonalDetails,
     TradingAssessment,
     FinancialAssessment,
+    ProofOfIdentityContainer,
     ProofOfIdentity,
     ProofOfAddress,
     ProofOfOwnership,

diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx
@@ -57,10 +57,13 @@ const WarningCloseCreateRealAccountModal = React.lazy(() =>
     import(/* webpackChunkName: "warning-close-create-real-account" */ '../WarningCloseCreateRealAccountModal')
 );
 
+const VerificationModal = React.lazy(() => import(/* webpackChunkName: "verification-modal" */ '../VerificationModal'));
+
 const AppModals = ({
     is_account_needed_modal_on,
     is_acuity_modal_open,
     is_closing_create_real_account_modal,
+    is_from_eu,
     is_welcome_modal_visible,
     is_reality_check_visible,
     is_set_residence_modal_visible,
@@ -162,6 +165,10 @@ const AppModals = ({
     if (is_need_real_account_for_cashier_modal_visible) {
         ComponentToLoad = <NeedRealAccountForCashierModal />;
     }
+    //TODO: Have to update this when cashier pop-up is done,this is just temporary
+    if (is_from_eu) {
+        ComponentToLoad = <VerificationModal />;
+    }
 
     return (
         <>
@@ -178,6 +185,7 @@ export default connect(({ client, ui, traders_hub }) => ({
     is_closing_create_real_account_modal: ui.is_closing_create_real_account_modal,
     is_close_mx_mlt_account_modal_visible: ui.is_close_mx_mlt_account_modal_visible,
     is_close_uk_account_modal_visible: ui.is_close_uk_account_modal_visible,
+    is_from_eu: traders_hub.is_eu_user,
     is_set_residence_modal_visible: ui.is_set_residence_modal_visible,
     is_real_acc_signup_on: ui.is_real_acc_signup_on,
     is_logged_in: client.is_logged_in,

diff --git a/packages/core/src/App/Containers/VerificationModal/index.ts b/packages/core/src/App/Containers/VerificationModal/index.ts
@@ -0,0 +1,3 @@
+import verificationModal from './verification-modal';
+
+export default verificationModal;
diff --git a/packages/core/src/App/Containers/VerificationModal/verification-modal-content.tsx b/packages/core/src/App/Containers/VerificationModal/verification-modal-content.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { ProofOfIdentityContainer } from '@deriv/account';
+import { AutoHeightWrapper } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+
+type TVerificationModal = {
+    is_from_external?: boolean;
+    onStateChange?: () => void;
+};
+
+const VerificationModalContent = observer(({ is_from_external, onStateChange }: TVerificationModal) => {
+    const { client, common, notifications, ui } = useStore();
+    const {
+        account_status,
+        account_settings,
+        fetchResidenceList,
+        getChangeableFields,
+        is_switching,
+        is_high_risk,
+        is_withdrawal_lock,
+        should_allow_authentication,
+        is_virtual,
+        updateAccountStatus,
+    } = client;
+    const { refreshNotifications } = notifications;
+    const { app_routing_history, routeBackInApp } = common;
+
+    return (
+        <AutoHeightWrapper default_height={200}>
+            {({ setRef }) => (
+                <div ref={setRef} className='proof-of-identity'>
+                    <div className='proof-of-identity__main-container'>
+                        <ProofOfIdentityContainer
+                            height='620px'
+                            account_settings={account_settings}
+                            account_status={account_status}
+                            app_routing_history={app_routing_history}
+                            fetchResidenceList={fetchResidenceList}
+                            getChangeableFields={getChangeableFields}
+                            is_from_external={is_from_external}
+                            is_switching={is_switching}
+                            is_virtual={is_virtual}
+                            is_high_risk={is_high_risk}
+                            is_withdrawal_lock={is_withdrawal_lock}
+                            onStateChange={onStateChange}
+                            refreshNotifications={refreshNotifications}
+                            routeBackInApp={routeBackInApp}
+                            should_allow_authentication={should_allow_authentication}
+                            is_description_enabled
+                            updateAccountStatus={updateAccountStatus}
+                        />
+                    </div>
+                </div>
+            )}
+        </AutoHeightWrapper>
+    );
+});
+
+export default VerificationModalContent;