Merge pull request binary-com#17 from george-usynin-binary/selfie_stepp

georeg / rm80662 / add selfie step into signup wizard

packages/account/build/webpack.config.js

@@ -50,6 +50,7 @@ module.exports = function (env) {
             'proof-of-address-container': 'Sections/Verification/ProofOfAddress/proof-of-address-container.jsx',
             'reset-trading-password-modal': 'Components/reset-trading-password-modal',
             'self-exclusion': 'Components/self-exclusion',
+            'selfie-upload': 'Components/poi/status/unsupported/card-details/selfie-upload.jsx',
             'scrollbars-container': 'Components/scrollbars-container',
             'sent-email-modal': 'Components/sent-email-modal',
             'terms-of-use': 'Components/terms-of-use',

packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx

@@ -9,7 +9,36 @@ import Uploader from './uploader.jsx';
 import { setInitialValues, validateFields } from './utils';
 import { ROOT_CLASS, SELFIE_DOCUMENT } from '../constants';
 
-const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => {
+const PaymentAgentSignupSelfieHeader = () => {
+    return (
+        <>
+            {!isMobile() ? (
+                <Text as='h2' size='m' weight='bold' color='prominent'>
+                    {localize('Selfie verification')}
+                </Text>
+            ) : null}
+            <Text as='p' size='xs' color='prominent'>
+                {localize("First, we'll need to verify your identity. Please upload your selfie here.")}
+            </Text>
+        </>
+    );
+};
+
+const SelfieUpload = ({
+    dispatch,
+    initial_values,
+    is_pa_signup,
+    goBack,
+    onConfirm,
+    onFileDrop,
+    setSelfieStepEnabled,
+}) => {
+    const [formik_values, setFormikValues] = React.useState({});
+
+    React.useEffect(() => {
+        dispatch?.(setSelfieStepEnabled(!!formik_values[SELFIE_DOCUMENT.name]));
+    }, [formik_values, dispatch, setSelfieStepEnabled]);
+
     return (
         <div
             className={classNames(ROOT_CLASS, {
@@ -20,6 +49,7 @@ const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => {
                 initialValues={initial_values || setInitialValues([SELFIE_DOCUMENT])}
                 validate={values => validateFields(values, undefined, [SELFIE_DOCUMENT])}
                 onSubmit={onConfirm}
+                innerRef={formik_actions => is_pa_signup && setFormikValues(formik_actions?.values || {})}
             >
                 {({ values, isValid, isSubmitting, touched }) => {
                     const is_form_touched = Object.keys(touched).length > 0;
@@ -28,9 +58,13 @@ const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => {
                     return (
                         <Form className={`${ROOT_CLASS}__form`}>
                             <div className={`${ROOT_CLASS}__fields-content`}>
-                                <Text as='h3' size='s' weight='bold' color='prominent'>
-                                    {localize('Upload your selfie')}
-                                </Text>
+                                {is_pa_signup ? (
+                                    <PaymentAgentSignupSelfieHeader />
+                                ) : (
+                                    <Text as='h3' size='s' weight='bold' color='prominent'>
+                                        {localize('Upload your selfie')}
+                                    </Text>
+                                )}
                                 <div className={`${ROOT_CLASS}__uploaders-wrap`}>
                                     <Uploader
                                         data={SELFIE_DOCUMENT}
@@ -41,29 +75,39 @@ const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => {
                                     />
                                 </div>
                                 <div className={`${ROOT_CLASS}__notice`}>
-                                    <Text as='p' size='xs' color='general'>
-                                        {localize(
-                                            'Before uploading, please ensure that you’re facing forward in the selfie, your face is within the frame, and your eyes are clearly visible even if you’re wearing glasses.'
-                                        )}
-                                    </Text>
+                                    {is_pa_signup ? (
+                                        <Text as='p' size='xs' color='general'>
+                                            {localize(
+                                                'Face forward and remove your glasses if necessary. Make sure your eyes are clearly visible and your face is within the frame.'
+                                            )}
+                                        </Text>
+                                    ) : (
+                                        <Text as='p' size='xs' color='general'>
+                                            {localize(
+                                                'Before uploading, please ensure that you’re facing forward in the selfie, your face is within the frame, and your eyes are clearly visible even if you’re wearing glasses.'
+                                            )}
+                                        </Text>
+                                    )}
                                 </div>
                             </div>
-                            <div className={`${ROOT_CLASS}__btns`}>
-                                <Button
-                                    onClick={goBack}
-                                    secondary
-                                    large
-                                    text={localize('Go back')}
-                                    icon={<Icon icon={'IcButtonBack'} size={16} />}
-                                />
-                                <Button
-                                    type='submit'
-                                    primary
-                                    large
-                                    is_disabled={!isValid || isSubmitting || (!is_form_touched && is_form_empty)}
-                                    text={localize('Confirm and upload')}
-                                />
-                            </div>
+                            {!is_pa_signup && (
+                                <div className={`${ROOT_CLASS}__btns`}>
+                                    <Button
+                                        onClick={goBack}
+                                        secondary
+                                        large
+                                        text={localize('Go back')}
+                                        icon={<Icon icon={'IcButtonBack'} size={16} />}
+                                    />
+                                    <Button
+                                        type='submit'
+                                        primary
+                                        large
+                                        is_disabled={!isValid || isSubmitting || (!is_form_touched && is_form_empty)}
+                                        text={localize('Confirm and upload')}
+                                    />
+                                </div>
+                            )}
                         </Form>
                     );
                 }}
@@ -73,9 +117,15 @@ const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => {
 };
 
 SelfieUpload.propTypes = {
+    dispatch: PropTypes.func,
     initial_values: PropTypes.object,
+    is_pa_signup: PropTypes.bool,
     goBack: PropTypes.func,
+    onFileDrop: PropTypes.func,
     onConfirm: PropTypes.func,
+    setSelfieStepEnabled: PropTypes.func,
 };
 
+PaymentAgentSignupSelfieHeader.displayName = 'PaymentAgentSignupSelfieHeader';
+
 export default SelfieUpload;

packages/account/src/Components/poi/status/unsupported/constants.js

@@ -1,6 +1,6 @@
 import { localize } from '@deriv/translations';
 
-export const ROOT_CLASS = 'manual-poi-details';
+export const ROOT_CLASS = window.location.pathname.includes('cashier') ? 'pa-signup-selfie' : 'manual-poi-details';
 
 export const DOCUMENT_TYPES = {
     NATIONAL_IDENTITY_CARD: 'national_identity_card',

packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SelfieUpload } from '@deriv/account';
+import { setSelfie, setSelfieStepEnabled, TActionsTypes } from '../../signup-wizard/steps-reducer';
+import './selfie.scss';
+
+type TSelfieError = {
+    code: string;
+    message: string;
+};
+
+type TSelfieFile = {
+    lastModified: number;
+    lastModifiedDate: Date;
+    name: string;
+    path: string;
+    size: number;
+    type: string;
+    webkitRelativePath: string;
+};
+
+export type TSelfie = {
+    document_type: string;
+    errors: TSelfieError[] | [];
+    file: TSelfieFile;
+    icon: string;
+    info: string;
+    name: string;
+    pageType: string;
+};
+
+type TSelfieStep = {
+    selfie: { selfie_with_id: TSelfie } | null;
+    dispatch: React.Dispatch<TActionsTypes>;
+};
+
+const SelfieStep = ({ selfie, dispatch }: TSelfieStep) => {
+    const onFileDrop = (value: TSelfie) => dispatch(setSelfie({ selfie_with_id: value }));
+
+    //TODO: change the description for the selfie depending on the step number
+    return (
+        <SelfieUpload
+            initial_values={selfie}
+            is_pa_signup
+            onFileDrop={onFileDrop}
+            dispatch={dispatch}
+            setSelfieStepEnabled={setSelfieStepEnabled}
+        />
+    );
+};
+
+export default SelfieStep;