From 0cc71d1931e9cbb41d56953e535637d1b7e3353a Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Tue, 2 May 2023 10:05:21 +0400
Subject: [PATCH] feat: incorporated shared component into poi

---
 .../forms/personal-details-form.jsx           | 12 +++++--
 ...oi-confirm-with-example-form-container.tsx | 31 ++++++++++++++++---
 .../ProofOfIdentity/onfido-sdk-view.jsx       |  2 +-
 packages/core/src/sass/account-wizard.scss    | 10 +++---
 .../_common/components/onfido-container.scss  | 11 ++++---
 5 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
index 6641eaad9cee..6a01833bdc11 100644
--- 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/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx b/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx
index 109bfd3d47f9..0ff77562ba54 100644
--- a/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx
+++ b/packages/account/src/Components/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
index b272079a88e9..d89ecfbf2adc 100644
--- 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
index 0f46851827db..d50811b709fc 100644
--- 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
index 85453dc80b94..80d185204885 100644
--- 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 {