From 922ead14f8894309a811b30ca57cafc96b981fb0 Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Thu, 17 Nov 2022 17:10:24 +0300 Subject: [PATCH 1/8] fix: fix --- packages/account/build/webpack.config.js | 1 + .../card-details/selfie-upload.jsx | 84 +++++--- packages/cashier/globals.d.ts | 1 + .../signup-side-note/signup-side-note.tsx | 1 - .../selfie-step/selfie-step.tsx | 26 +++ .../selfie-step/selfie.scss | 192 ++++++++++++++++++ .../signup-wizard/signup-wizard.tsx | 16 +- packages/cashier/tsconfig.json | 4 +- 8 files changed, 290 insertions(+), 35 deletions(-) create mode 100644 packages/cashier/globals.d.ts create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js index e28c13beb8af..0c6d04607b6f 100644 --- a/packages/account/build/webpack.config.js +++ b/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', diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx index aee638f92191..f0ade4744932 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx @@ -9,7 +9,13 @@ 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 SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileDrop, setIsSelfieStepEnabled }) => { + const [formik_values, setFormikValues] = React.useState({}); + + React.useEffect(() => { + setIsSelfieStepEnabled(formik_values[SELFIE_DOCUMENT.name]); + }, [formik_values, setIsSelfieStepEnabled]); + return (
{ initialValues={initial_values || setInitialValues([SELFIE_DOCUMENT])} validate={values => validateFields(values, undefined, [SELFIE_DOCUMENT])} onSubmit={onConfirm} + innerRef={formik_actions => + formik_actions ? setFormikValues(formik_actions.values) : setFormikValues({}) + } > {({ values, isValid, isSubmitting, touched }) => { const is_form_touched = Object.keys(touched).length > 0; @@ -28,9 +37,22 @@ const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => { return (
- - {localize('Upload your selfie')} - + {is_pa_signup ? ( + + {localize('Selfie verification')} + + ) : ( + + {localize('Upload your selfie')} + + )} + {is_pa_signup && ( + + {localize( + "First, we'll need to verify your identity. Please upload your selfie here." + )} + + )}
{ />
- - {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.' - )} - + {is_pa_signup ? ( + + {localize( + 'Face forward and remove your glasses if necessary. Make sure your eyes are clearly visible and your face is within the frame.' + )} + + ) : ( + + {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.' + )} + + )}
-
-
+ {!is_pa_signup && ( +
+
+ )}
); }} @@ -74,8 +106,10 @@ const SelfieUpload = ({ initial_values, goBack, onConfirm, onFileDrop }) => { SelfieUpload.propTypes = { initial_values: PropTypes.object, + is_pa_signup: PropTypes.bool, goBack: PropTypes.func, onConfirm: PropTypes.func, + setIsSelfieStepEnabled: PropTypes.func, }; export default SelfieUpload; diff --git a/packages/cashier/globals.d.ts b/packages/cashier/globals.d.ts new file mode 100644 index 000000000000..647c3403ce94 --- /dev/null +++ b/packages/cashier/globals.d.ts @@ -0,0 +1 @@ +declare module '@deriv/account'; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-side-note/signup-side-note.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-side-note/signup-side-note.tsx index 427aeb321beb..8607f812fefd 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-side-note/signup-side-note.tsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-side-note/signup-side-note.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { observer } from 'mobx-react-lite'; import { Button, Icon, Text } from '@deriv/components'; import getNote from './signup-side-note-provider'; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx new file mode 100644 index 000000000000..73755f1de229 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { SelfieUpload } from '@deriv/account'; +import './selfie.scss'; + +type TSelfieStep = { + setIsSelfieStepEnabled: (value: boolean) => void; +}; + +const SelfieStep = ({ setIsSelfieStepEnabled }: TSelfieStep) => { + const [selfie, setSelfie] = React.useState(); + + const onFileDrop = value => setSelfie({ selfie_with_id: value }); + + return ( + <> + + + ); +}; + +export default SelfieStep; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss new file mode 100644 index 000000000000..71d6fc696abc --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss @@ -0,0 +1,192 @@ +.manual-poi-details { + max-width: 67.2rem; + height: 100%; + display: flex; + + &--mobile { + padding: 2.4rem 1.6rem; + } + + h3 { + margin-bottom: 2.5rem; + } + + h2 { + margin-bottom: 2.4rem; + } + &__form { + flex: 1; + display: flex; + flex-direction: column; + } + &__fields-content { + flex: auto; + } + &__fields-wrap { + display: flex; + margin-bottom: 0.7rem; + + .manual-poi-details--mobile & { + flex-wrap: wrap; + } + } + &__field { + margin-bottom: 3.5rem; + + &:first-of-type { + margin-right: 2.4rem; + + .manual-poi-details--mobile & { + margin-right: 0; + } + } + } + &__divider { + height: 2px; + background-color: var(--general-section-1); + margin-bottom: 2.4rem; + + &--m16 { + margin-bottom: 1.6rem; + } + } + &__uploaders-wrap { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .dc-file-dropzone__message { + width: 100%; + max-width: none; + pointer-events: all; + } + } + &__uploader { + position: relative; + width: 100%; + max-width: 32.4rem; + height: 25rem; + margin: 3.2rem 18rem 1.6rem; + + .manual-poi-details--mobile & { + max-width: none; + } + + &--full { + max-width: none; + } + } + &__uploader-details { + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-between; + padding: 0 1.5rem; + min-height: 19.2rem; + + &--preview { + padding: 0 2.4rem; + max-height: 20.3rem; + } + + p { + margin-bottom: 2.4rem; + + @at-root .manual-poi-details__uploader-details--preview p { + margin-bottom: 0; + } + } + } + &__uploader-image { + position: relative; + width: 100%; + max-width: 27.6rem; + height: 16.6rem; + border-radius: 0.8rem; + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + margin-bottom: 1.6rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &--has-frame { + background-size: contain; + } + + .manual-poi-details--mobile & { + height: 13.4rem; + } + } + &__uploader-frame { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: auto; + } + &__uploader-remove { + position: absolute; + top: 0.8rem; + right: 0.8rem; + cursor: pointer; + transition: transform 0.25s linear; + + &:hover { + transform: scale(1.25, 1.25); + } + } + &__uploader-icon { + width: 12.8rem; + height: 7.9rem; + margin-bottom: 1.5rem; + } + &__icons { + display: flex; + flex-wrap: wrap; + margin-bottom: 1.7rem; + } + &__icons-item { + flex: 0.25; + display: flex; + flex-direction: column; + align-items: center; + padding: 0 1rem; + min-height: 9.2rem; + + .manual-poi-details--mobile & { + flex: none; + width: 50%; + min-height: 7.6rem; + } + + p { + max-width: 12.4rem; + + .manual-poi-details--mobile & { + max-width: 13.2rem; + } + } + + svg { + height: 4.8rem; + } + } + &__btns { + height: 15.2rem; + flex: none; + border-top: 2px solid var(--general-section-1); + display: flex; + align-items: center; + justify-content: flex-end; + padding-bottom: 8rem; + + .dc-btn:not(:last-of-type) { + margin-right: 0.8rem; + } + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx index af6554c720c9..246639ee593f 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx @@ -5,6 +5,7 @@ import { Text } from '@deriv/components'; import { Localize, localize } from '@deriv/translations'; import { Wizard } from '@deriv/ui'; import CancelWizardDialog from '../cancel-wizard-dialog'; +import SelfieStep from '../signup-wizard-steps/selfie-step/selfie-step'; import './signup-wizard.scss'; type TSignupWizardProps = { @@ -16,6 +17,8 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => { const [current_step_key, setCurrentStepKey] = React.useState(); const is_final_step = current_step_key === 'complete_step'; + const [is_selfie_step_enabled, setIsSelfieStepEnabled] = React.useState(false); + const wizard_root_el = document.getElementById('wizard_root'); const onClose = () => { @@ -67,14 +70,13 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => { - + <> - - - - - - + diff --git a/packages/cashier/tsconfig.json b/packages/cashier/tsconfig.json index 55659e08bee8..926efa1202b7 100644 --- a/packages/cashier/tsconfig.json +++ b/packages/cashier/tsconfig.json @@ -15,5 +15,5 @@ "outDir": "./dist", "baseUrl": "./" }, - "include": ["src"] -} + "include": ["src", "globals.d.ts"] +} \ No newline at end of file From a9a4501d9ee8275f8d5039bcbc0042807f0289f2 Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Mon, 21 Nov 2022 21:34:26 +0300 Subject: [PATCH 2/8] style: add style for selfie components --- .../unsupported/card-details/selfie-upload.jsx | 2 +- .../signup-wizard-steps/selfie-step/selfie.scss | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx index f0ade4744932..9d2deb9c69b3 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx @@ -13,7 +13,7 @@ const SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileD const [formik_values, setFormikValues] = React.useState({}); React.useEffect(() => { - setIsSelfieStepEnabled(formik_values[SELFIE_DOCUMENT.name]); + if (typeof setIsSelfieStepEnabled === 'function') setIsSelfieStepEnabled(formik_values[SELFIE_DOCUMENT.name]); }, [formik_values, setIsSelfieStepEnabled]); return ( diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss index 71d6fc696abc..4cfbf380d396 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss @@ -61,18 +61,20 @@ pointer-events: all; } } + //new css &__uploader { position: relative; width: 100%; - max-width: 32.4rem; + max-width: 42.4rem; height: 25rem; - margin: 3.2rem 18rem 1.6rem; + margin: 3.2rem auto 1.6rem; - .manual-poi-details--mobile & { - max-width: none; + //new css + .dc-file-dropzone { + border: 2px dashed var(--border-normal); } - &--full { + .manual-poi-details--mobile & { max-width: none; } } @@ -176,6 +178,11 @@ height: 4.8rem; } } + //new css + &__notice { + max-width: 42.4rem; + margin: 0 auto; + } &__btns { height: 15.2rem; flex: none; From 92e1481ad791eda57d0913090d1b81f434f0ac6a Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Thu, 24 Nov 2022 11:18:12 +0300 Subject: [PATCH 3/8] style: add styles for selfie in cashier --- .../poi/status/unsupported/constants.js | 2 +- .../selfie-step/selfie.scss | 24 +++++++++++-------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/account/src/Components/poi/status/unsupported/constants.js b/packages/account/src/Components/poi/status/unsupported/constants.js index fea16504f784..a839357a88ec 100644 --- a/packages/account/src/Components/poi/status/unsupported/constants.js +++ b/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', diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss index 4cfbf380d396..ec7eec1c83f7 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie.scss @@ -1,10 +1,10 @@ -.manual-poi-details { +.pa-signup-selfie { max-width: 67.2rem; height: 100%; display: flex; &--mobile { - padding: 2.4rem 1.6rem; + padding: 0; } h3 { @@ -26,7 +26,7 @@ display: flex; margin-bottom: 0.7rem; - .manual-poi-details--mobile & { + .pa-signup-selfie--mobile & { flex-wrap: wrap; } } @@ -36,7 +36,7 @@ &:first-of-type { margin-right: 2.4rem; - .manual-poi-details--mobile & { + .pa-signup-selfie--mobile & { margin-right: 0; } } @@ -66,15 +66,19 @@ position: relative; width: 100%; max-width: 42.4rem; - height: 25rem; + height: 25.8rem; margin: 3.2rem auto 1.6rem; + @include mobile { + margin-top: 2.4rem; + } + //new css .dc-file-dropzone { border: 2px dashed var(--border-normal); } - .manual-poi-details--mobile & { + .pa-signup-selfie--mobile & { max-width: none; } } @@ -95,7 +99,7 @@ p { margin-bottom: 2.4rem; - @at-root .manual-poi-details__uploader-details--preview p { + @at-root .pa-signup-selfie__uploader-details--preview p { margin-bottom: 0; } } @@ -119,7 +123,7 @@ background-size: contain; } - .manual-poi-details--mobile & { + .pa-signup-selfie--mobile & { height: 13.4rem; } } @@ -160,7 +164,7 @@ padding: 0 1rem; min-height: 9.2rem; - .manual-poi-details--mobile & { + .pa-signup-selfie--mobile & { flex: none; width: 50%; min-height: 7.6rem; @@ -169,7 +173,7 @@ p { max-width: 12.4rem; - .manual-poi-details--mobile & { + .pa-signup-selfie--mobile & { max-width: 13.2rem; } } From df4829e30cf7c1788406be3072b075b4361e993e Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Thu, 24 Nov 2022 11:18:50 +0300 Subject: [PATCH 4/8] refactor: add new text for selfie compoennt --- .../card-details/selfie-upload.jsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx index 9d2deb9c69b3..7948d04ae39f 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx @@ -16,6 +16,19 @@ const SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileD if (typeof setIsSelfieStepEnabled === 'function') setIsSelfieStepEnabled(formik_values[SELFIE_DOCUMENT.name]); }, [formik_values, setIsSelfieStepEnabled]); + const selfie_header_for_pa_signup = ( + <> + {!isMobile() ? ( + + {localize('Selfie verification')} + + ) : null} + + {localize("First, we'll need to verify your identity. Please upload your selfie here.")} + + + ); + return (
{is_pa_signup ? ( - - {localize('Selfie verification')} - + selfie_header_for_pa_signup ) : ( {localize('Upload your selfie')} )} - {is_pa_signup && ( - - {localize( - "First, we'll need to verify your identity. Please upload your selfie here." - )} - - )}
Date: Thu, 24 Nov 2022 11:19:16 +0300 Subject: [PATCH 5/8] refactor: add types --- .../selfie-step/selfie-step.tsx | 34 ++++++++++++++++--- .../signup-wizard/signup-wizard.tsx | 15 ++++---- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx index 73755f1de229..3e15018fb0c7 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx @@ -2,15 +2,41 @@ import React from 'react'; import { SelfieUpload } from '@deriv/account'; 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 }; setIsSelfieStepEnabled: (value: boolean) => void; + setSelfie: (value: { selfie_with_id: TSelfie }) => void; }; -const SelfieStep = ({ setIsSelfieStepEnabled }: TSelfieStep) => { - const [selfie, setSelfie] = React.useState(); - - const onFileDrop = value => setSelfie({ selfie_with_id: value }); +const SelfieStep = ({ selfie, setIsSelfieStepEnabled, setSelfie }: TSelfieStep) => { + const onFileDrop = (value: TSelfie) => setSelfie({ selfie_with_id: value }); + //TODO: change the description for the selfie depending on the step number return ( <> { const [is_cancel_wizard_dialog_active, setIsCancelWizardDialogActive] = React.useState(false); const [current_step_key, setCurrentStepKey] = React.useState(); const [is_country_selected, setIsCountrySelected] = React.useState(false); - const is_final_step = current_step_key === 'complete_step'; - + const [selfie, setSelfie] = React.useState<{ selfie_with_id: TSelfie }>(); const [is_selfie_step_enabled, setIsSelfieStepEnabled] = React.useState(false); + const is_final_step = current_step_key === 'complete_step'; + const wizard_root_el = document.getElementById('wizard_root'); const onClose = () => { @@ -77,9 +78,11 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => { is_submit_disabled={!is_selfie_step_enabled} is_fullwidth > - <> - - + <> From 4286143018412e14d508ebf7c4e6bc03b601dd51 Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Thu, 24 Nov 2022 18:14:51 +0300 Subject: [PATCH 6/8] fix: resolve comments, add useReducer hook --- .../card-details/selfie-upload.jsx | 38 ++++++++++------ .../selfie-step/selfie-step.tsx | 25 +++++------ .../signup-wizard/signup-wizard.tsx | 15 +++---- .../signup-wizard/steps-reducer.ts | 45 +++++++++++++++++++ 4 files changed, 88 insertions(+), 35 deletions(-) create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/steps-reducer.ts diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx index 7948d04ae39f..3622c14a43e5 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx @@ -9,14 +9,8 @@ import Uploader from './uploader.jsx'; import { setInitialValues, validateFields } from './utils'; import { ROOT_CLASS, SELFIE_DOCUMENT } from '../constants'; -const SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileDrop, setIsSelfieStepEnabled }) => { - const [formik_values, setFormikValues] = React.useState({}); - - React.useEffect(() => { - if (typeof setIsSelfieStepEnabled === 'function') setIsSelfieStepEnabled(formik_values[SELFIE_DOCUMENT.name]); - }, [formik_values, setIsSelfieStepEnabled]); - - const selfie_header_for_pa_signup = ( +const PaymentAgentSignupSelfieHeader = React.memo(() => { + return ( <> {!isMobile() ? ( @@ -28,6 +22,22 @@ const SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileD ); +}); + +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 (
validateFields(values, undefined, [SELFIE_DOCUMENT])} onSubmit={onConfirm} - innerRef={formik_actions => - formik_actions ? setFormikValues(formik_actions.values) : setFormikValues({}) - } + innerRef={formik_actions => is_pa_signup && setFormikValues(formik_actions?.values || {})} > {({ values, isValid, isSubmitting, touched }) => { const is_form_touched = Object.keys(touched).length > 0; @@ -51,7 +59,7 @@ const SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileD
{is_pa_signup ? ( - selfie_header_for_pa_signup + ) : ( {localize('Upload your selfie')} @@ -109,11 +117,15 @@ const SelfieUpload = ({ initial_values, is_pa_signup, goBack, onConfirm, onFileD }; SelfieUpload.propTypes = { + dispatch: PropTypes.func, initial_values: PropTypes.object, is_pa_signup: PropTypes.bool, goBack: PropTypes.func, + onFileDrop: PropTypes.func, onConfirm: PropTypes.func, - setIsSelfieStepEnabled: PropTypes.func, + setSelfieStepEnabled: PropTypes.func, }; +PaymentAgentSignupSelfieHeader.displayName = 'PaymentAgentSignupSelfieHeader'; + export default SelfieUpload; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx index 3e15018fb0c7..fc620e1707f3 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { SelfieUpload } from '@deriv/account'; +import { setSelfie, setSelfieStepEnabled, TActionsTypes } from '../../signup-wizard/steps-reducer'; import './selfie.scss'; type TSelfieError = { @@ -28,24 +29,22 @@ export type TSelfie = { }; type TSelfieStep = { - selfie?: { selfie_with_id: TSelfie }; - setIsSelfieStepEnabled: (value: boolean) => void; - setSelfie: (value: { selfie_with_id: TSelfie }) => void; + selfie: { selfie_with_id: TSelfie } | null; + dispatch: React.Dispatch; }; -const SelfieStep = ({ selfie, setIsSelfieStepEnabled, setSelfie }: TSelfieStep) => { - const onFileDrop = (value: TSelfie) => setSelfie({ selfie_with_id: value }); +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 ( - <> - - + ); }; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx index 7b5c659e77a6..b68f5bb18de3 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx @@ -6,7 +6,8 @@ import { Localize, localize } from '@deriv/translations'; import { Wizard } from '@deriv/ui'; import CancelWizardDialog from '../cancel-wizard-dialog'; import SelectCountryStep from '../signup-wizard-steps/select-country-step'; -import SelfieStep, { TSelfie } from '../signup-wizard-steps/selfie-step/selfie-step'; +import SelfieStep from '../signup-wizard-steps/selfie-step/selfie-step'; +import { stepReducer, initial_state } from './steps-reducer'; import './signup-wizard.scss'; type TSignupWizardProps = { @@ -17,8 +18,8 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => { const [is_cancel_wizard_dialog_active, setIsCancelWizardDialogActive] = React.useState(false); const [current_step_key, setCurrentStepKey] = React.useState(); const [is_country_selected, setIsCountrySelected] = React.useState(false); - const [selfie, setSelfie] = React.useState<{ selfie_with_id: TSelfie }>(); - const [is_selfie_step_enabled, setIsSelfieStepEnabled] = React.useState(false); + + const [steps_state, dispatch] = React.useReducer(stepReducer, initial_state); const is_final_step = current_step_key === 'complete_step'; @@ -75,14 +76,10 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => { - + <> diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/steps-reducer.ts b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/steps-reducer.ts new file mode 100644 index 000000000000..5db0c7901613 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/steps-reducer.ts @@ -0,0 +1,45 @@ +import { TSelfie } from '../signup-wizard-steps/selfie-step/selfie-step'; + +type TStepsState = { + selfie: { + selfie_with_id: TSelfie; + } | null; + is_selfie_step_enabled: boolean; +}; + +const ACTION_TYPES = { + SET_SELFIE: 'SET_SELFIE', + SET_SELFIE_STEP_ENABLED: 'SET_SELFIE_STEP_ENABLED', +} as const; + +// Action creators +export const setSelfie = (value: { selfie_with_id: TSelfie }) => { + return { + type: ACTION_TYPES.SET_SELFIE, + value, + }; +}; + +export const setSelfieStepEnabled = (value: boolean) => { + return { + type: ACTION_TYPES.SET_SELFIE_STEP_ENABLED, + value, + }; +}; + +// Initial state +export const initial_state = { selfie: null, is_selfie_step_enabled: false }; + +// Reducer +export const stepReducer = (state: TStepsState, action: TActionsTypes): TStepsState => { + switch (action.type) { + case ACTION_TYPES.SET_SELFIE: + return { ...state, selfie: action.value }; + case ACTION_TYPES.SET_SELFIE_STEP_ENABLED: + return { ...state, is_selfie_step_enabled: action.value }; + default: + return state; + } +}; + +export type TActionsTypes = ReturnType; From b55aec3680b98397a26d724e2664e74ef409d143 Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Fri, 25 Nov 2022 09:33:24 +0300 Subject: [PATCH 7/8] fix: resolve comments --- .../poi/status/unsupported/card-details/selfie-upload.jsx | 4 ++-- packages/cashier/globals.d.ts | 1 - packages/cashier/tsconfig.json | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) delete mode 100644 packages/cashier/globals.d.ts diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx index 3622c14a43e5..14b33fe0c78c 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/selfie-upload.jsx @@ -9,7 +9,7 @@ import Uploader from './uploader.jsx'; import { setInitialValues, validateFields } from './utils'; import { ROOT_CLASS, SELFIE_DOCUMENT } from '../constants'; -const PaymentAgentSignupSelfieHeader = React.memo(() => { +const PaymentAgentSignupSelfieHeader = () => { return ( <> {!isMobile() ? ( @@ -22,7 +22,7 @@ const PaymentAgentSignupSelfieHeader = React.memo(() => { ); -}); +}; const SelfieUpload = ({ dispatch, diff --git a/packages/cashier/globals.d.ts b/packages/cashier/globals.d.ts deleted file mode 100644 index 647c3403ce94..000000000000 --- a/packages/cashier/globals.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '@deriv/account'; diff --git a/packages/cashier/tsconfig.json b/packages/cashier/tsconfig.json index 926efa1202b7..a6f91db6b5a2 100644 --- a/packages/cashier/tsconfig.json +++ b/packages/cashier/tsconfig.json @@ -15,5 +15,5 @@ "outDir": "./dist", "baseUrl": "./" }, - "include": ["src", "globals.d.ts"] + "include": ["src"] } \ No newline at end of file From 4ed3736437c680c8fbadd1af29dff2b23fa98bd2 Mon Sep 17 00:00:00 2001 From: george-usynin-binary Date: Fri, 25 Nov 2022 12:33:08 +0300 Subject: [PATCH 8/8] perf: add empty line --- packages/cashier/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cashier/tsconfig.json b/packages/cashier/tsconfig.json index a6f91db6b5a2..55659e08bee8 100644 --- a/packages/cashier/tsconfig.json +++ b/packages/cashier/tsconfig.json @@ -16,4 +16,4 @@ "baseUrl": "./" }, "include": ["src"] -} \ No newline at end of file +}