Merge pull request #6 from likhith-deriv/likhith/wall-379-incorporate…

…-idv-new-flow Likhith/wall 379 incorporate idv new flow
likhith-deriv · May 4, 2023 · d52c832 · d52c832
2 parents c257736 + 1576e0e
commit d52c832
Show file tree

Hide file tree

Showing 11 changed files with 413 additions and 626 deletions.
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
@@ -92,13 +92,22 @@ const PersonalDetailsForm = ({
         closeRealAccountSignup,
         salutation_list,
         is_rendered_for_onfido,
+        should_close_tooltip,
+        setShouldCloseTooltip,
     } = props;
     const autocomplete_value = 'none';
     const PoiNameDobExampleIcon = PoiNameDobExample;
 
     const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = React.useState(false);
     const [is_tin_popover_open, setIsTinPopoverOpen] = React.useState(false);
 
+    React.useEffect(() => {
+        if (should_close_tooltip) {
+            handleToolTipStatus();
+            setShouldCloseTooltip(false);
+        }
+    }, [should_close_tooltip]);
+
     const getLastNameLabel = () => {
         if (is_appstore) return localize('Family name*');
         return is_svg || is_mf ? localize('Last name*') : localize('Last name');
@@ -117,6 +126,15 @@ const PersonalDetailsForm = ({
         );
     };
 
+    const handleToolTipStatus = () => {
+        if (is_tax_residence_popover_open) {
+            setIsTaxResidencePopoverOpen(false);
+        }
+        if (is_tin_popover_open) {
+            setIsTinPopoverOpen(false);
+        }
+    };
+
     const name_dob_clarification_message = (
         <Localize
             i18n_default_text='To avoid delays, enter your <0>name</0> and <0>date of birth</0> exactly as they appear on your identity document.'
@@ -126,7 +144,13 @@ const PersonalDetailsForm = ({
 
     return (
         <div className={classNames({ 'account-form__poi-confirm-example': is_qualified_for_idv })}>
-            <InlineNoteWithIcon message={name_dob_clarification_message} font_size={isMobile() ? 'xxxs' : 'xs'} />
+            {!is_qualified_for_idv ||
+                (is_rendered_for_onfido && (
+                    <InlineNoteWithIcon
+                        message={name_dob_clarification_message}
+                        font_size={isMobile() ? 'xxxs' : 'xs'}
+                    />
+                ))}
             <FormBodySection
                 has_side_note={is_qualified_for_idv || is_rendered_for_onfido}
                 side_note={<PoiNameDobExampleIcon />}

diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx
@@ -41,8 +41,7 @@ const PersonalDetails = ({
 }) => {
     const { account_status, account_settings, residence, real_account_signup_target } = props;
     const { is_appstore } = React.useContext(PlatformContext);
-    const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = React.useState(false);
-    const [is_tin_popover_open, setIsTinPopoverOpen] = React.useState(false);
+    const [should_close_tooltip, setShouldCloseTooltip] = React.useState(false);
     const [warning_items, setWarningItems] = React.useState({});
     const is_submit_disabled_ref = React.useRef(true);
 
@@ -116,22 +115,7 @@ const PersonalDetails = ({
         return error_data;
     };
 
-    const closeTooltipOnScroll = () => {
-        // Close any open tooltip
-        if (!is_tax_residence_popover_open || !is_tin_popover_open) {
-            setIsTaxResidencePopoverOpen(false);
-            setIsTinPopoverOpen(false);
-        }
-    };
-
-    const handleClickOutside = () => {
-        if (is_tax_residence_popover_open) {
-            setIsTaxResidencePopoverOpen(false);
-        }
-        if (is_tin_popover_open) {
-            setIsTinPopoverOpen(false);
-        }
-    };
+    const closeToolTip = () => setShouldCloseTooltip(true);
 
     /*
     In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.
@@ -143,6 +127,9 @@ const PersonalDetails = ({
         return example_format ? localize('Example: ') + example_format : '';
     };
 
+    const citizen = account_settings?.citizen || residence;
+    const selected_country = residence_list.find(residence_data => residence_data.value === citizen) || {};
+
     return (
         <Formik
             innerRef={selected_step_ref}
@@ -160,8 +147,9 @@ const PersonalDetails = ({
                             ref={setRef}
                             onSubmit={handleSubmit}
                             autoComplete='off'
-                            onClick={handleClickOutside}
+                            onClick={closeToolTip}
                             data-testid='personal_details_form'
+                            style={{ border: '1px solid red' }}
                         >
                             <Div100vhContainer className='details-form' height_offset='100px' is_disabled={isDesktop()}>
                                 {!is_qualified_for_idv && (
@@ -175,7 +163,7 @@ const PersonalDetails = ({
                                 )}
                                 <ThemedScrollbars
                                     height={height}
-                                    onScroll={closeTooltipOnScroll}
+                                    onScroll={closeToolTip}
                                     testId='dt_personal_details_container'
                                 >
                                     {!is_qualified_for_idv && is_appstore && (
@@ -198,9 +186,7 @@ const PersonalDetails = ({
                                                 <Field name='document'>
                                                     {({ field }) => (
                                                         <IDVForm
-                                                            account_settings={account_settings}
-                                                            residence={residence}
-                                                            residence_list={residence_list}
+                                                            selected_country={selected_country}
                                                             errors={errors}
                                                             touched={touched}
                                                             values={values}
@@ -245,6 +231,8 @@ const PersonalDetails = ({
                                                             salutation_list={salutation_list}
                                                             warning_items={warning_items}
                                                             account_opening_reason_list={account_opening_reason_list}
+                                                            should_close_tooltip={should_close_tooltip}
+                                                            setShouldCloseTooltip={setShouldCloseTooltip}
                                                             {...field}
                                                         />
                                                     </div>