feat: incorporated shared component into poi

sergei-deriv · May 2, 2023 · 0cc71d1 · 0cc71d1
1 parent b501501
commit 0cc71d1
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 17 deletions.
diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
@@ -91,6 +91,7 @@ const PersonalDetailsForm = ({
         account_opening_reason_list,
         closeRealAccountSignup,
         salutation_list,
+        is_rendered_for_onfido,
     } = props;
     const autocomplete_value = 'none';
     const PoiNameDobExampleIcon = PoiNameDobExample;
@@ -126,7 +127,10 @@ const PersonalDetailsForm = ({
     return (
         <div className={classNames({ 'account-form__poi-confirm-example': is_qualified_for_idv })}>
             <InlineNoteWithIcon message={name_dob_clarification_message} font_size='xs' />
-            <FormBodySection has_side_note={is_qualified_for_idv} side_note={<PoiNameDobExampleIcon />}>
+            <FormBodySection
+                has_side_note={is_qualified_for_idv || is_rendered_for_onfido}
+                side_note={<PoiNameDobExampleIcon />}
+            >
                 <fieldset className='account-form__fieldset'>
                     {'salutation' in values && (
                         <div>
@@ -151,7 +155,7 @@ const PersonalDetailsForm = ({
                             </Text>
                         </div>
                     )}
-                    {!is_qualified_for_idv && !is_appstore && (
+                    {!is_qualified_for_idv && !is_appstore && !is_rendered_for_onfido && (
                         <FormSubHeader title={'salutation' in values ? localize('Title and name') : localize('Name')} />
                     )}
                     {'salutation' in values && (
@@ -197,7 +201,9 @@ const PersonalDetailsForm = ({
                             data-testid='last_name'
                         />
                     )}
-                    {!is_appstore && !is_qualified_for_idv && <FormSubHeader title={localize('Other details')} />}
+                    {!is_appstore && !is_qualified_for_idv && !is_rendered_for_onfido && (
+                        <FormSubHeader title={localize('Other details')} />
+                    )}
                     {'date_of_birth' in values && (
                         <DateOfBirthField
                             name='date_of_birth'

diff --git a/...s/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx b/...s/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx
@@ -7,7 +7,8 @@ import { filterObjProperties, toMoment, validLength, validName, WS } from '@deri
 import { localize } from '@deriv/translations';
 import FormBody from 'Components/form-body';
 import LoadErrorMessage from 'Components/load-error-message';
-import PoiConfirmWithExampleForm from 'Components/poi/poi-confirm-with-example-form';
+// import PoiConfirmWithExampleForm from 'Components/poi/poi-confirm-with-example-form';
+import PersonalDetailsForm from 'Components/forms/personal-details-form';
 
 type TValues = { [p: string]: string };
 
@@ -147,16 +148,38 @@ const PoiConfirmWithExampleFormContainer = ({
 
     return (
         <Formik initialValues={form_initial_values} enableReinitialize onSubmit={onSubmit} validate={validateFields}>
-            {({ values, errors, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
-                <Form className='account-form__poi-confirm-example_container ' onSubmit={handleSubmit}>
+            {({
+                values,
+                errors,
+                touched,
+                handleChange,
+                handleBlur,
+                handleSubmit,
+                isSubmitting,
+                setFieldValue,
+                setFieldTouched,
+            }) => (
+                <Form className='account-form__poi-confirm-example' onSubmit={handleSubmit}>
                     <FormBody>
-                        <PoiConfirmWithExampleForm
+                        {/* <PoiConfirmWithExampleForm
                             values={values}
                             handleChange={handleChange}
                             handleBlur={handleBlur}
                             errors={errors}
                             setFieldValue={setFieldValue}
                             checked={checked}
+                        /> */}
+
+                        <PersonalDetailsForm
+                            errors={errors}
+                            touched={touched}
+                            values={values}
+                            handleChange={handleChange}
+                            handleBlur={handleBlur}
+                            setFieldValue={setFieldValue}
+                            setFieldTouched={setFieldTouched}
+                            disabled_items={[]}
+                            is_rendered_for_onfido={true}
                         />
                         <button
                             type='submit'

diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.jsx
@@ -231,7 +231,7 @@ const OnfidoSdkView = ({
                         }}
                         unmountOnExit
                     >
-                        <div className='account-form__poi-confirm-example_wrapper'>
+                        <div className='account-form__poi-confirm-example_wrapper account-form__poi-confirm-example_container'>
                             <PoiConfirmWithExampleFormContainer
                                 account_settings={account_settings}
                                 getChangeableFields={getChangeableFields}

diff --git a/packages/core/src/sass/account-wizard.scss b/packages/core/src/sass/account-wizard.scss
@@ -459,9 +459,9 @@
             margin-bottom: 0.5rem;
         }
     }
-    &__header:not(:first-child) {
-        margin-top: 1.6rem;
-    }
+    // &__header:not(:first-child) {
+    //     margin-top: 1.6rem;
+    // }
     &__title {
         padding-right: 0.8rem;
     }
@@ -779,5 +779,7 @@
 
 .personal-details-form {
     width: 100%;
-    padding: 0 16rem;
+    @include mobile() {
+        padding: 0 1.6rem;
+    }
 }
diff --git a/packages/core/src/sass/app/_common/components/onfido-container.scss b/packages/core/src/sass/app/_common/components/onfido-container.scss
@@ -75,8 +75,6 @@
         }
 
         .da-inline-note-with-icon {
-            // border-radius: 0.8rem;
-            // margin-top: 0;
             margin-top: 0.8rem;
             padding: 0.8rem;
             display: flex;
@@ -118,9 +116,12 @@
 
     &__section {
         display: grid;
-        grid-template-areas: 'section-side-note section-content';
-        grid-template-columns: 0.5fr 1fr;
-        grid-gap: 1rem;
+        @include desktop() {
+            grid-template-areas: 'section-side-note section-content';
+            grid-template-columns: 0.5fr 1fr;
+            grid-gap: 1rem;
+        }
+
         align-items: center;
 
         @include mobile {