diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss index 087b3952f5b2..99fb087b3441 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss +++ b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss @@ -5,7 +5,7 @@ display: flex; &--mobile { - padding: 2.4rem 1.6rem; + padding: 2.4rem; } h3 { @@ -21,22 +21,25 @@ } &__fields-wrap { display: flex; - margin-bottom: 0.7rem; + margin-bottom: 2rem; .manual-poi-details--mobile & { flex-wrap: wrap; } - } - &__field { - &:first-of-type { - margin-right: 2.4rem; - margin-bottom: 1.75rem; - .manual-poi-details--mobile & { - margin-right: 0; + .dc-datepicker { + margin-left: 2.4rem; + } + + @include mobile { + .dc-input { + margin-bottom: 2rem; } } } + &__field { + margin-bottom: 1.75rem; + } &__divider { height: 2px; background-color: var(--general-section-1); @@ -145,6 +148,7 @@ display: flex; flex-wrap: wrap; margin-bottom: 1.7rem; + justify-content: center; } &__icons-item { flex: 0.25; @@ -184,5 +188,10 @@ .dc-btn:not(:last-of-type) { margin-right: 0.8rem; } + @include mobile { + height: auto; + padding-bottom: unset; + padding-top: 2rem; + } } } diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx index 0f3e745c86c0..7c082a639c83 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx @@ -1,12 +1,12 @@ import React from 'react'; import DocumentsUpload from './documents-upload'; import SelfieUpload from './selfie-upload'; -import { SELFIE_DOCUMENT } from '../constants'; +import { SELFIE_DOCUMENT, getDocumentIndex } from '../constants'; import './card-details.scss'; import { FormikValues } from 'formik'; type TCardDetails = { - data: FormikValues; + data: ReturnType[number]['details']; onComplete: (e: object) => void; goToCards: () => void; is_from_external?: boolean; diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx b/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx index 5e073f5cefe1..70531e62ecf6 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx @@ -1,13 +1,13 @@ import React from 'react'; import classNames from 'classnames'; import { Formik, Form, FormikValues } from 'formik'; -import { localize } from '@deriv/translations'; +import { Localize, localize } from '@deriv/translations'; import { isMobile } from '@deriv/shared'; import { Button, Icon, Text } from '@deriv/components'; import InputField from './input-field'; import Uploader from './uploader'; import { setInitialValues, validateFields } from './utils'; -import { ROOT_CLASS } from '../constants'; +import { ROOT_CLASS, date_field, getDocumentIndex } from '../constants'; const icons = [ { @@ -33,6 +33,7 @@ type TDocumentsUpload = { is_from_external?: boolean; goToCards: () => void; onSubmit: () => void; + data: ReturnType[number]['details']; }; type TIconsItem = { @@ -48,18 +49,25 @@ const IconsItem = ({ data }: TIconsItem) => ( ); -const DocumentsUpload = ({ - initial_values, - is_from_external, - data, - goToCards, - onSubmit, -}: TDocumentsUpload & TIconsItem) => { +const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, onSubmit }: TDocumentsUpload) => { const { fields, documents_title, documents } = data; + const is_expiry_date_required = fields.some(field => field.name === date_field.name); - const fields_title = localize('First, enter your {{label}} and the expiry date.', { - label: fields?.[0].label, - }); + const fields_title = is_expiry_date_required ? ( + + ) : ( + + ); return (
- {icons.map(item => ( - - ))} + {icons.map(item => + item.icon === 'IcPoiDocExpiry' && !is_expiry_date_required ? null : ( + + ) + )}
diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/utils.ts b/packages/account/src/Components/poi/status/unsupported/card-details/utils.ts index 45121bc67510..94709e0ce4eb 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/utils.ts +++ b/packages/account/src/Components/poi/status/unsupported/card-details/utils.ts @@ -13,7 +13,22 @@ export const checkIsEmpty = (value: unknown) => { return typeof value === 'string' ? !value.trim() : !value; }; -export const validateFields = (values: FormikValues, fields = [], documents = []) => { +type TFields = { + name: string; + label: string; + type: string; + required: boolean; +}[]; + +type TDocument = { + document_type: string; + pageType: string; + name: string; + icon: string; + info: string; +}[]; + +export const validateFields = (values: FormikValues, fields: TFields = [], documents: TDocument = []) => { const errors: FormikErrors = {}; fields.forEach((field: { name: string; label: string; type: string; required: boolean }) => { @@ -24,6 +39,10 @@ export const validateFields = (values: FormikValues, fields = [], documents = [] errors[name] = localize('{{label}} is required.', { label, }); + } else if (type === 'text' && value.length > 30) { + errors[name] = localize('{{label}} must be less than 30 characters.', { + label, + }); } else if (type === 'text' && !/^[\w\s-]{0,30}$/g.test(value)) { errors[name] = localize('Only letters, numbers, space, underscore, and hyphen are allowed for {{label}}.', { label, @@ -31,13 +50,13 @@ export const validateFields = (values: FormikValues, fields = [], documents = [] } }); - documents.forEach((document: { name: string; label: string }) => { - const { name, label } = document; + documents.forEach((document: { name: string }) => { + const { name } = document; const value = values[name]; if (checkIsEmpty(value)) { - errors[name] = localize('{{label}} is required.', { - label, + errors[name] = localize('{{name}} is required.', { + name, }); } else if (value.errors?.length) { errors[name] = value.errors[0]; diff --git a/packages/account/src/Components/poi/status/unsupported/constants.ts b/packages/account/src/Components/poi/status/unsupported/constants.ts index ad172ba7fd8a..61017c369552 100644 --- a/packages/account/src/Components/poi/status/unsupported/constants.ts +++ b/packages/account/src/Components/poi/status/unsupported/constants.ts @@ -27,7 +27,7 @@ export const SELFIE_DOCUMENT = { info: localize('Upload your selfie.'), }; -const date_field = { +export const date_field = { name: 'expiry_date', label: localize('Expiry date'), type: 'date', @@ -154,7 +154,6 @@ export const getDocumentIndex = ({ country_code }: FormikValues) => [ type: 'text', required: true, }, - { ...date_field, required: false }, ], documents_title: localize('Next, upload both of the following documents.'), documents: [ diff --git a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx index aa1be79a3e56..03fa2c5604ec 100644 --- a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx +++ b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx @@ -8,7 +8,7 @@ import uploadFile from '../../../file-uploader-container/upload-file'; import OnfidoUpload from '../../../../Sections/Verification/ProofOfIdentity/onfido-sdk-view-container'; import CardDetails from './card-details'; -import { SELFIE_DOCUMENT } from './constants'; +import { SELFIE_DOCUMENT, getDocumentIndex } from './constants'; import { FormikValues } from 'formik'; const STATUS = { @@ -18,24 +18,7 @@ const STATUS = { }; type TDetailComponent = { - document: { - onfido_name?: string; - card: { - title: string; - description: string; - icon: string; - }; - details: { - fields: { - name: string; - label: string; - type: string; - required: boolean; - }[]; - documents_title: string; - documents: object[]; - }; - }; + document: ReturnType[number]; onClickBack: () => void; root_class: string; country_code_key?: string;