Akmal / Fix styles for cfd financial stp modal (deriv-com#6432)

* Fix styles for cfd financial stp modal * fix: 🐛 resolved an error related to pending status * fix: 🐛 added a check for empty obj leading to props of undefined error Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>
adrienne-deriv · Oct 7, 2022 · 8a45e28 · 8a45e28
1 parent 903860a
commit 8a45e28
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 11 deletions.
diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -57,7 +57,7 @@ module.exports = function (env) {
             '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',
-            'proof-of-identity-containerfor-mt5':
+            'proof-of-identity-container-for-mt5':
                 'Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5',
             'poi-poa-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx',
         },

diff --git a/...c/Components/proof-of-identity-container-for-mt5/proof-of-identity-container-for-mt5.scss b/...c/Components/proof-of-identity-container-for-mt5/proof-of-identity-container-for-mt5.scss
@@ -0,0 +1,17 @@
+.manual-poi {
+    .dc-timeline {
+        &__container {
+            flex: 1;
+            max-width: 63.4rem;
+
+            @at-root .manual-poi--mobile .dc-timeline__container {
+                max-width: none;
+            }
+        }
+        &__title {
+            font-size: var(--text-size-s);
+            line-height: 2.4rem;
+            margin: -4px 0 2.4rem;
+        }
+    }
+}
diff --git a/...account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx b/...account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx
@@ -22,7 +22,7 @@ const ShowDemoMessage = () => (
         </Text>
     </div>
 );
-const ProofOfIdentityContainerforMt5 = ({
+const ProofOfIdentityContainerForMt5 = ({
     account_status,
     fetchResidenceList,
     height,
@@ -97,4 +97,4 @@ const ProofOfIdentityContainerforMt5 = ({
     );
 };
 
-export default ProofOfIdentityContainerforMt5;
+export default ProofOfIdentityContainerForMt5;
diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx
@@ -27,10 +27,10 @@ const POISubmission = ({
 }) => {
     const [submission_status, setSubmissionStatus] = React.useState(); // selecting, submitting, complete
     const [submission_service, setSubmissionService] = React.useState();
-    const [selected_country, setSelectedCountry] = React.useState();
+    const [selected_country, setSelectedCountry] = React.useState({});
 
     const handleSelectionNext = () => {
-        if (selected_country) {
+        if (Object.keys(selected_country).length) {
             const { submissions_left: idv_submissions_left } = idv;
             const { submissions_left: onfido_submissions_left } = onfido;
             const is_idv_supported = selected_country.identity.services.idv.is_country_supported;

diff --git a/packages/cfd/src/Components/__tests__/cfd-poi.spec.js b/packages/cfd/src/Components/__tests__/cfd-poi.spec.js
@@ -11,13 +11,13 @@ jest.mock('Stores/connect', () => ({
 
 jest.mock('@deriv/account', () => ({
     ...jest.requireActual('@deriv/account'),
-    ProofOfIdentityContainerforMt5: () => <div>ProofOfIdentityContainerforMt5</div>,
+    ProofOfIdentityContainerForMt5: () => <div>ProofOfIdentityContainerForMt5</div>,
 }));
 
 describe('<CFDPOI />', () => {
     let props;
 
-    const ProofOfIdentityContainerforMt5 = 'ProofOfIdentityContainerforMt5';
+    const ProofOfIdentityContainerForMt5 = 'ProofOfIdentityContainerForMt5';
 
     beforeEach(() => {
         props = {
@@ -92,8 +92,8 @@ describe('<CFDPOI />', () => {
         };
     });
 
-    it('should render ProofOfIdentityContainerforMt5', () => {
+    it('should render ProofOfIdentityContainerForMt5', () => {
         render(<CFDPOI {...props} />);
-        expect(screen.getByText(ProofOfIdentityContainerforMt5)).toBeInTheDocument();
+        expect(screen.getByText(ProofOfIdentityContainerForMt5)).toBeInTheDocument();
     });
 });
diff --git a/packages/cfd/src/Components/cfd-poi.tsx b/packages/cfd/src/Components/cfd-poi.tsx
@@ -1,4 +1,4 @@
-import { ProofOfIdentityContainerforMt5 } from '@deriv/account';
+import { ProofOfIdentityContainerForMt5 } from '@deriv/account';
 import { GetAccountStatus, GetSettings, ResidenceList } from '@deriv/api-types';
 import React from 'react';
 import RootStore from 'Stores/index';
@@ -53,7 +53,7 @@ const CFDPOI = ({ index, onSave, onSubmit, height, ...props }: TCFDPOIProps) =>
         onSubmit(index, { poi_state });
     };
     return (
-        <ProofOfIdentityContainerforMt5
+        <ProofOfIdentityContainerForMt5
             {...props}
             height={height}
             is_from_external={true}

diff --git a/packages/cfd/src/Containers/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal.tsx
@@ -54,6 +54,7 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & {
     toggleCFDVerificationModal: () => void;
     account_status: GetAccountStatus;
     mt5_login_list: DetailsOfEachMT5Loginid[];
+    updateAccountStatus: () => void;
 };
 
 const JurisdictionModal = ({
@@ -74,6 +75,8 @@ const JurisdictionModal = ({
     setJurisdictionSelectedShortcode,
     toggleCFDVerificationModal,
     account_status,
+    updateAccountStatus,
+
     mt5_login_list,
 }: TJurisdictionModalProps) => {
     const [checked, setChecked] = React.useState(false);
@@ -117,8 +120,10 @@ const JurisdictionModal = ({
             setJurisdictionSelectedShortcode('');
         }
     };
+
     React.useEffect(() => {
         if (is_jurisdiction_modal_visible) {
+            updateAccountStatus();
             selectSVGJurisdiction();
             if (!has_submitted_personal_details) {
                 let get_settings_response: GetSettings = {};
@@ -369,4 +374,5 @@ export default connect(({ modules, ui, client }: RootStore) => ({
     setJurisdictionSelectedShortcode: modules.cfd.setJurisdictionSelectedShortcode,
     account_status: client.account_status,
     mt5_login_list: client.mt5_login_list,
+    updateAccountStatus: client.updateAccountStatus,
 }))(JurisdictionModal);
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss
@@ -1439,6 +1439,47 @@
             display: grid;
             grid-template-rows: minmax(20rem, 1fr);
         }
+
+        .manual-poi {
+            margin: auto;
+            width: max-content;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            &-details {
+                margin: auto;
+
+                &__form {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                }
+
+                &__btns {
+                    height: 7.2rem;
+                    padding-bottom: 0;
+                }
+
+                &__field {
+                    margin-bottom: 0.5rem;
+                }
+
+                &__fields-content {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                }
+            }
+        }
+
+        .account-management__message-wrapper {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
     }
 
     &__form {