hamid/80661/add-poa-into-signup-wizard (binary-com#14)

* Create POA component * feat: enhance poa * feat: wip: update poa step * feat: wip: poa * feat: enhance poa * feat: enhance poa components * feat: save uploaded file of the poa into reducer * fix: resolve pr comment * fix: resolve pr comment * chore: sort return types * feat: add initial value to the fileuploadercontainer * fix: use @deriv/stores * chore: rebuild
hamid-deriv · Dec 15, 2022 · 9c22ea0 · 9c22ea0
1 parent c158e91
commit 9c22ea0
Show file tree

Hide file tree

Showing 14 changed files with 700 additions and 16 deletions.
diff --git a/packages/account/src/Components/file-uploader-container/file-uploader-container.jsx b/packages/account/src/Components/file-uploader-container/file-uploader-container.jsx
@@ -37,7 +37,7 @@ const FileProperties = () => {
     );
 };
 
-const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFileDrop, onRef }) => {
+const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFileDrop, onRef, values }) => {
     const { is_appstore } = React.useContext(PlatformContext);
     const ref = React.useRef();
 
@@ -118,7 +118,7 @@ const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFil
                     'account-poa__upload-file--dashboard': isDesktop() && is_appstore,
                 })}
             >
-                <FileUploader getSocket={getSocketFunc} ref={ref} onFileDrop={onFileDrop} />
+                <FileUploader getSocket={getSocketFunc} ref={ref} onFileDrop={onFileDrop} values={values} />
             </div>
         </div>
     );
@@ -129,6 +129,7 @@ FileUploaderContainer.propTypes = {
     getSocket: PropTypes.func,
     onFileDrop: PropTypes.func,
     onRef: PropTypes.func,
+    values: PropTypes.array,
 };
 
 export default FileUploaderContainer;
diff --git a/packages/account/src/Components/file-uploader-container/file-uploader.jsx b/packages/account/src/Components/file-uploader-container/file-uploader.jsx
@@ -27,8 +27,8 @@ const fileReadErrorMessage = filename => {
     return localize('Unable to read file {{name}}', { name: filename });
 };
 
-const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
-    const [document_file, setDocumentFile] = useStateCallback({ files: [], error_message: null });
+const FileUploader = React.forwardRef(({ onFileDrop, getSocket, values }, ref) => {
+    const [document_file, setDocumentFile] = useStateCallback({ files: values || [], error_message: null });
 
     const handleAcceptedFiles = files => {
         if (files.length > 0) {
@@ -125,6 +125,7 @@ FileUploader.displayName = 'FileUploader';
 FileUploader.propTypes = {
     onFileDrop: PropTypes.func,
     getSocket: PropTypes.func,
+    values: PropTypes.array,
 };
 
 export default FileUploader;
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
@@ -2749,7 +2749,7 @@ $MIN_HEIGHT_FLOATING: calc(
 .financial-banner {
     width: 49.5rem;
     border-radius: 4px;
-    position: relaitve;
+    position: relative;
     background-color: var(--status-warning-transparent);
 
     @include mobile {

diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard.scss b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard.scss
@@ -10,6 +10,15 @@
         &-hint {
             margin-top: 0.8rem;
         }
+        &-form-container {
+            margin: 3.2rem auto 0;
+            width: 42.2rem;
+
+            @include mobile {
+                margin-top: 2.4rem;
+                width: 100%;
+            }
+        }
         &-country-dropdown {
             margin-top: 3.2rem;
 
@@ -19,7 +28,33 @@
 
             .is-desktop {
                 margin: 0 auto;
-                width: 422px;
+                width: 42.2rem;
+            }
+        }
+        &-address {
+            .dc-autocomplete {
+                margin-bottom: 3.2em;
+            }
+
+            &-upload-section {
+                margin-top: 1.2em;
+
+                &-list {
+                    margin-top: 1.4em;
+
+                    li {
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-start;
+
+                        &:before {
+                            content: '\2022';
+                            color: $color-grey-1;
+                            font-weight: bold;
+                            margin-right: 0.8em;
+                        }
+                    }
+                }
             }
         }
         &-selector-hint {

diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard.tsx
@@ -9,6 +9,7 @@ import CancelWizardDialog from './components/cancel-wizard-dialog';
 import CountryOfIssue from './steps/country-of-issue';
 import IdentityVerification from './steps/identity-verification';
 import Selfie from './steps/selfie';
+import AddressVerification from './steps/address-verification';
 import { populateVerificationStatus } from './helpers/verification';
 import { usePaymentAgentSignupReducer } from './steps/steps-reducer';
 import './signup-wizard.scss';
@@ -30,6 +31,8 @@ const SignupWizard = ({ account_status, closeWizard }: TSignupWizardProps) => {
         setIDVData,
         setManualData,
         setIsIdentitySubmissionDisabled,
+        setAddress,
+        setIsAddressVerificationDisabled,
     } = usePaymentAgentSignupReducer();
 
     const is_final_step = current_step_key === 'complete_step';
@@ -113,6 +116,18 @@ const SignupWizard = ({ account_status, closeWizard }: TSignupWizardProps) => {
                         >
                             <Selfie idv_status={idv.status} selfie={steps_state.selfie} onSelect={setSelfie} />
                         </Wizard.Step>
+                        <Wizard.Step
+                            title={localize('Address verification')}
+                            is_submit_disabled={steps_state.is_address_verification_disabled}
+                            is_fullwidth
+                        >
+                            <AddressVerification
+                                selected_country_id={steps_state.selected_country?.value || ''}
+                                address={steps_state.address}
+                                onSelect={setAddress}
+                                setIsAddressVerificationDisabled={setIsAddressVerificationDisabled}
+                            />
+                        </Wizard.Step>
                         <Wizard.Step step_key='complete_step' title='Step 3' is_fullwidth>
                             <>
                                 <Text as='p' size='m' line-height='m' weight='bold'>

diff --git a/...es/payment-agent/payment-agent-signup/steps/address-verification/address-verification.tsx b/...es/payment-agent/payment-agent-signup/steps/address-verification/address-verification.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, DesktopWrapper } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import ProofOfAddressForm from './proof-of-address-form';
+import type { TAddress } from './proof-of-address-form/proof-of-address-form';
+
+type TAddressVerificationProps = {
+    address?: TAddress;
+    onSelect: React.ComponentProps<typeof ProofOfAddressForm>['onSelect'];
+    setIsAddressVerificationDisabled: React.ComponentProps<
+        typeof ProofOfAddressForm
+    >['setIsAddressVerificationDisabled'];
+    selected_country_id: string;
+};
+
+const AddressVerification = ({
+    address,
+    onSelect,
+    setIsAddressVerificationDisabled,
+    selected_country_id,
+}: TAddressVerificationProps) => {
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <Text as='p' size='m' line-height='m' weight='bold'>
+                    <Localize i18n_default_text='Address verification' />
+                </Text>
+            </DesktopWrapper>
+            <Text as='p' size='xs' line-height='m' className='pa-signup-wizard__step-text'>
+                <Localize i18n_default_text="Next, we'll need to verify your address. Fill in your complete and correct address details." />
+            </Text>
+            <Text as='p' size='xs' color='less-prominent' line-height='m' className='pa-signup-wizard__step-hint'>
+                <Localize i18n_default_text='Note: An accurate and complete address helps to speed up your verification process.' />
+            </Text>
+            <ProofOfAddressForm
+                selected_country_id={selected_country_id}
+                setIsAddressVerificationDisabled={setIsAddressVerificationDisabled}
+                address={address}
+                onSelect={onSelect}
+            />
+        </React.Fragment>
+    );
+};
+
+export default AddressVerification;
diff --git a/.../cashier/src/pages/payment-agent/payment-agent-signup/steps/address-verification/index.ts b/.../cashier/src/pages/payment-agent/payment-agent-signup/steps/address-verification/index.ts
@@ -0,0 +1,3 @@
+import AddressVerification from './address-verification';
+
+export default AddressVerification;
diff --git a/...ment-agent/payment-agent-signup/steps/address-verification/proof-of-address-form/index.ts b/...ment-agent/payment-agent-signup/steps/address-verification/proof-of-address-form/index.ts
@@ -0,0 +1,3 @@
+import ProofOfAddressForm from './proof-of-address-form';
+
+export default ProofOfAddressForm;