Merge pull request #5 from amina-deriv/signup-poi

Amina_Signup_poi
maryia-deriv · Jun 29, 2022 · 662cddc · 662cddc
2 parents 3f035be + 2ea0776
commit 662cddc
Show file tree

Hide file tree

Showing 13 changed files with 705 additions and 157 deletions.
diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -55,6 +55,8 @@ module.exports = function (env) {
             'text-container': 'Components/text-container',
             'terms-of-use': 'Components/terms-of-use',
             'terms-of-use-config': 'Configs/terms-of-use-config',
+            'proof-of-identity-config': 'Configs/proof-of-identity-config',
+            'proof-of-identity-form-on-signup': 'Components/poi/poi-form-on-signup',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx
diff --git a/packages/account/src/Components/poi/poi-form-on-signup/index.js b/packages/account/src/Components/poi/poi-form-on-signup/index.js
@@ -0,0 +1,3 @@
+import { ProofOfIdentityFormOnSignup } from './poi-form-on-signup.jsx';
+
+export default ProofOfIdentityFormOnSignup;
diff --git a/packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.jsx b/packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.jsx
diff --git a/packages/account/src/Configs/proof-of-identity-config.js b/packages/account/src/Configs/proof-of-identity-config.js
@@ -0,0 +1,15 @@
+import { localize } from '@deriv/translations';
+
+const proofOfIdentityConfig = ({ account_settings }, ProofOfIdentityForm) => {
+    return {
+        header: {
+            active_title: localize('Identity information'),
+            title: localize('Identity information'),
+        },
+        body: ProofOfIdentityForm,
+        props: { citizen: account_settings.citizen },
+        passthrough: ['refreshNotifications', 'residence_list'],
+    };
+};
+
+export default proofOfIdentityConfig;
diff --git a/packages/cfd/src/Components/cfd-real-account-display.tsx b/packages/cfd/src/Components/cfd-real-account-display.tsx
@@ -64,6 +64,8 @@ type TCFDRealAccountDisplayProps = {
     residence: string;
     residence_list: ResidenceList;
     account_status?: object;
+    openDerivRealAccountNeededModal: () => void;
+    should_enable_add_button?: boolean;
 };
 
 const getRealFinancialStpBtnLbl = (
@@ -111,6 +113,8 @@ const CFDRealAccountDisplay = ({
     can_have_more_real_synthetic_mt5,
     residence,
     residence_list,
+    openDerivRealAccountNeededModal,
+    should_enable_add_button,
 }: TCFDRealAccountDisplayProps) => {
     const should_show_trade_servers =
         is_logged_in &&
@@ -151,14 +155,18 @@ const CFDRealAccountDisplay = ({
     }, [residence, is_logged_in, is_eu, is_eu_country, platform]);
 
     const onSelectRealSynthetic = () => {
-        if (is_eu && standpoint.malta && !has_malta_account) {
+        if (should_enable_add_button) {
+            openDerivRealAccountNeededModal();
+        } else if (is_eu && standpoint.malta && !has_malta_account) {
             openAccountNeededModal('malta', localize('Deriv Synthetic'), localize('DMT5 Synthetic'));
         } else {
             onSelectAccount({ type: 'synthetic', category: 'real', platform });
         }
     };
     const onSelectRealFinancial = () => {
-        if (is_eu && !has_maltainvest_account) {
+        if (should_enable_add_button) {
+            openDerivRealAccountNeededModal();
+        } else if (is_eu && !has_maltainvest_account) {
             openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('real CFDs'));
         } else {
             onSelectAccount({ type: 'financial', category: 'real', platform });
@@ -199,7 +207,7 @@ const CFDRealAccountDisplay = ({
         switch (sub_account_type) {
             case 'synthetic':
             case 'financial':
-                return !has_real_account;
+                return should_enable_add_button ? false : !has_real_account;
             default:
                 return false;
         }

diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx
@@ -159,6 +159,7 @@ type TCFDDashboardProps = {
     setCurrentAccount: (data: DetailsOfEachMT5Loginid, meta: TOpenAccountTransferMeta) => void;
     setAccountType: (account_type: TOpenAccountTransferMeta) => void;
     mt5_status_server: TMt5StatusServer;
+    openDerivRealAccountNeededModal: () => void;
 };
 
 const CFDDashboard = (props: TCFDDashboardProps) => {
@@ -392,10 +393,13 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
         mt5_verification_code,
         dxtrade_verification_code,
         mt5_status_server,
+        openDerivRealAccountNeededModal,
     } = props;
 
     const should_show_missing_real_account =
-        !is_eu && is_logged_in && !has_real_account && upgradeable_landing_companies?.length > 0;
+        is_logged_in && !has_real_account && upgradeable_landing_companies?.length > 0;
+    const should_enable_add_button = should_show_missing_real_account && CFD_PLATFORMS.MT5 && is_real_enabled;
+
     if ((!country && is_logged_in) || is_logging_in) return <Loading />; // Wait for country name to be loaded before rendering
 
     // all: 1 in mt5_status response means that server is suspended
@@ -526,6 +530,8 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
                                                 can_have_more_real_synthetic_mt5={can_have_more_real_synthetic_mt5}
                                                 residence={residence}
                                                 residence_list={residence_list}
+                                                openDerivRealAccountNeededModal={openDerivRealAccountNeededModal}
+                                                should_enable_add_button={should_enable_add_button}
                                             />
                                         </React.Fragment>
                                     </div>
@@ -754,5 +760,6 @@ export default withRouter(
         mt5_verification_code: client.verification_code.trading_platform_mt5_password_reset,
         dxtrade_verification_code: client.verification_code.trading_platform_dxtrade_password_reset,
         mt5_status_server: client.website_status.mt5_status,
+        openDerivRealAccountNeededModal: ui.openDerivRealAccountNeededModal,
     }))(CFDDashboard)
 );
diff --git a/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx b/packages/core/src/App/Components/Elements/Modals/deriv-real-account-required-modal.jsx
@@ -38,7 +38,7 @@ DerivRealAccountRequiredModal.propTypes = {
 
 export default connect(({ ui }) => ({
     is_open: ui.is_deriv_account_needed_modal_visible,
-    onClose: ui.toggleDerivAccountNeededModal,
+    onClose: ui.openDerivRealAccountNeededModal,
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
     openRealAccountSignup: ui.openRealAccountSignup,

diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js b/packages/core/src/App/Containers/RealAccountSignup/account-wizard-form.js
@@ -6,6 +6,8 @@ import {
     PersonalDetails,
     termsOfUseConfig,
     TermsOfUse,
+    proofOfIdentityConfig,
+    ProofOfIdentityFormOnSignup,
 } from '@deriv/account';
 import CurrencySelector from './currency-selector.jsx';
 import FinancialDetails from './financial-details.jsx';
@@ -15,6 +17,12 @@ const shouldShowFinancialDetails = ({ real_account_signup_target }) => real_acco
 const shouldShowPersonalAndAddressDetailsAndCurrency = ({ real_account_signup_target }) =>
     real_account_signup_target !== 'samoa';
 
+const shouldShowIdentityInformation = ({ account_settings, residence_list }) => {
+    const citizen = { account_settings };
+    const country = residence_list.find(residence => residence.value === account_settings.citizen);
+    return citizen && country?.identity?.services?.idv?.is_country_supported;
+};
+
 export const getItems = props => {
     return [
         ...(shouldShowPersonalAndAddressDetailsAndCurrency(props)
@@ -24,6 +32,7 @@ export const getItems = props => {
             ? [personalDetailsConfig(props, PersonalDetails)]
             : []),
         ...(shouldShowPersonalAndAddressDetailsAndCurrency(props) ? [addressDetailsConfig(props, AddressDetails)] : []),
+        ...(shouldShowIdentityInformation(props) ? [proofOfIdentityConfig(props, ProofOfIdentityFormOnSignup)] : []),
         ...(shouldShowFinancialDetails(props) ? [financialDetailsConfig(props, FinancialDetails)] : []),
         termsOfUseConfig(props, TermsOfUse),
     ];

diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import fromEntries from 'object.fromentries';
 import React from 'react';
 import { DesktopWrapper, MobileWrapper, FormProgress, Wizard, Text } from '@deriv/components';
-import { toMoment, getLocation, makeCancellablePromise } from '@deriv/shared';
+import { toMoment, getLocation, makeCancellablePromise, WS } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import LoadingModal from './real-account-signup-loader.jsx';
@@ -235,6 +235,16 @@ const AccountWizard = props => {
         return properties;
     };
 
+    const submitIDVData = async (document_type, document_number, country_code) => {
+        const idv_submit_data = {
+            identity_verification_document_add: 1,
+            document_number,
+            document_type: document_type.id,
+            issuing_country: country_code,
+        };
+        await WS.send(idv_submit_data);
+    };
+
     const createRealAccount = (payload = undefined) => {
         props.setLoading(true);
         submitForm(payload)
@@ -247,6 +257,11 @@ const AccountWizard = props => {
                 } else {
                     props.onFinishSuccess(response.new_account_real.currency.toLowerCase());
                 }
+
+                const { document_type, document_number, country_code } = { ...form_values() };
+                if (document_type && document_number && country_code) {
+                    submitIDVData(document_type, document_number, country_code);
+                }
             })
             .catch(error => {
                 if (error.code === 'show risk disclaimer') {

diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -1038,9 +1038,11 @@ export default class ClientStore extends BaseStore {
             form_values.accept_risk = form_values.accept_risk || 0;
         }
 
+        const { document_number, document_type, country_code, ...required_form_values } = form_values;
+        required_form_values.citizen = country_code;
         const response = is_maltainvest_account
-            ? await WS.newAccountRealMaltaInvest(form_values)
-            : await WS.newAccountReal(form_values);
+            ? await WS.newAccountRealMaltaInvest(required_form_values)
+            : await WS.newAccountReal(required_form_values);
 
         if (!response.error) {
             await this.accountRealReaction(response);
@@ -1049,6 +1051,7 @@ export default class ClientStore extends BaseStore {
             }
             localStorage.removeItem('real_account_signup_wizard');
             await this.root_store.gtm.pushDataLayer({ event: 'real_signup' });
+
             return Promise.resolve({
                 ...response,
                 ...(is_maltainvest_account

diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
@@ -672,7 +672,7 @@ export default class UIStore extends BaseStore {
     }
 
     @action.bound
-    toggleDerivAccountNeededModal() {
+    openDerivRealAccountNeededModal() {
         this.is_deriv_account_needed_modal_visible = !this.is_deriv_account_needed_modal_visible;
     }
 }
diff --git a/packages/core/src/sass/real-account-signup.scss b/packages/core/src/sass/real-account-signup.scss
@@ -44,3 +44,121 @@
         }
     }
 }
+.poi-form-on-signup {
+    height: 100%;
+    overflow: auto;
+
+    &__fields {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+
+        @include mobile {
+            display: unset;
+            position: relative;
+        }
+
+        .proof-of-identity {
+            &:is(span) {
+                width: unset;
+                height: unset;
+            }
+            &__container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                width: 45%;
+                justify-content: unset;
+
+                @include mobile {
+                    width: 100%;
+                    padding: 0 1.2rem;
+                    overflow-y: unset;
+                    justify-content: unset;
+                }
+
+                .icon {
+                    width: 12.8rem;
+                    height: 12.8rem;
+                    margin: 1.6rem 0 2.4rem;
+                }
+                .dc-input__bottom-label {
+                    margin: unset;
+                }
+                .btm-spacer {
+                    margin-bottom: 1.6rem;
+                }
+                .spacer {
+                    margin: 1.6rem 0;
+                }
+            }
+
+            &__inner-container {
+                display: unset;
+                flex-direction: unset;
+                justify-content: unset;
+                align-items: unset;
+                width: 100%;
+            }
+            &__image {
+                width: 100%;
+                max-width: unset;
+                border-radius: unset;
+                object-fit: unset;
+
+                &-container {
+                    width: unset;
+                    height: unset;
+                    padding: unset;
+                    border-radius: unset;
+                    background-color: unset;
+                }
+            }
+            &__fieldset {
+                width: 100%;
+                margin-bottom: 3rem;
+
+                @include mobile {
+                    margin: 0 0 1.8rem;
+                }
+
+                &-container {
+                    display: unset;
+                    flex-direction: unset;
+                    justify-content: unset;
+                    align-items: unset;
+                }
+                &-input {
+                    width: unset;
+                    margin-bottom: 1rem;
+                }
+            }
+            &__sample-container {
+                margin-top: 2.4rem;
+                margin-left: unset;
+                width: unset;
+            }
+
+            &__submit-button {
+                margin-left: 0.8rem;
+                @include mobile {
+                    margin-right: unset;
+                }
+            }
+        }
+    }
+    & .details-form {
+        display: grid;
+        grid-template-rows: minmax(10rem, 1fr) 8.2rem;
+        height: 100%;
+        position: relative;
+
+        @include mobile {
+            max-height: calc(100% - 1rem);
+        }
+    }
+    @include mobile {
+        overflow: hidden;
+    }
+}