From e3d29414db30b1e046ba0237ffc1fef9ca456a8d Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 30 Nov 2022 15:09:13 +0800 Subject: [PATCH 1/5] refactor: ts migration for documents-upload.tsx --- ...uments-upload.jsx => documents-upload.tsx} | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) rename packages/account/src/Components/poi/status/unsupported/card-details/{documents-upload.jsx => documents-upload.tsx} (85%) diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx similarity index 85% rename from packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.jsx rename to packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx index 3ebd0e4e97d6..7d1f3ff042b0 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx @@ -1,7 +1,6 @@ import React from 'react'; import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import { Formik, Form } from 'formik'; +import { Formik, Form, FormikValues } from 'formik'; import { localize } from '@deriv/translations'; import { isMobile } from '@deriv/shared'; import { Button, Icon, Text } from '@deriv/components'; @@ -29,7 +28,21 @@ const icons = [ }, ]; -const IconsItem = ({ data }) => ( +type TDocumentsUpload = { + initial_values: object; + is_from_external: boolean; + goToCards: () => void; + onSubmit: () => void; +}; + +type TIconsItem = { + data: { + icon: string; + text: string; + }; +}; + +const IconsItem = ({ data }: TIconsItem) => (
@@ -38,8 +51,14 @@ const IconsItem = ({ data }) => (
); -const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, onSubmit }) => { - const { fields, documents_title, documents } = data; +const DocumentsUpload = ({ + initial_values, + is_from_external, + data, + goToCards, + onSubmit, +}: TDocumentsUpload & TIconsItem) => { + const { fields, documents_title, documents }: FormikValues = data; const fields_title = localize('First, enter your {{label}} and the expiry date.', { label: fields[0].label, @@ -56,7 +75,7 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on validate={values => validateFields(values, fields, documents)} onSubmit={onSubmit} > - {({ values, isValid, touched }) => { + {({ values, isValid, touched }: FormikValues) => { const is_form_touched = Object.keys(touched).length > 0; const is_form_empty = Object.values(values).some( (field, key) => (field === null || field === '') && fields[key]?.required @@ -69,7 +88,7 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on {fields_title}
- {fields.map(field => ( + {fields.map((field: FormikValues) => ( ))}
@@ -78,7 +97,7 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on {documents_title}
- {documents.map(item => ( + {documents.map((item: FormikValues) => ( Date: Wed, 30 Nov 2022 15:53:09 +0800 Subject: [PATCH 2/5] refactor: ts migration for documents-upload.tsx --- .../poi/status/unsupported/card-details/card-details.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.jsx b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.jsx index ee18179b32a7..96c35ee1bfba 100644 --- a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.jsx +++ b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import DocumentsUpload from './documents-upload.jsx'; +import DocumentsUpload from './documents-upload'; import SelfieUpload from './selfie-upload.jsx'; import { SELFIE_DOCUMENT } from '../constants'; import './card-details.scss'; From 92c0421c65af639541c3bc9dfd3d9b3e0ab34882 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 30 Nov 2022 17:02:41 +0800 Subject: [PATCH 3/5] refactor: ts migration for documents-uploads --- .../poi/status/unsupported/card-details/documents-upload.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7d1f3ff042b0..36b4062d10c6 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 @@ -29,7 +29,7 @@ const icons = [ ]; type TDocumentsUpload = { - initial_values: object; + initial_values: FormikValues; is_from_external: boolean; goToCards: () => void; onSubmit: () => void; From ab74ad2f9f84d551b88ad5717bafe3e104eb8b24 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Thu, 1 Dec 2022 15:40:16 +0800 Subject: [PATCH 4/5] refactor: change FormikValues to more specific values for data --- .../unsupported/card-details/documents-upload.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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 36b4062d10c6..6e643e1df73d 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 @@ -39,6 +39,9 @@ type TIconsItem = { data: { icon: string; text: string; + fields?: FormikValues[]; + documents_title?: string; + documents?: FormikValues[]; }; }; @@ -58,10 +61,10 @@ const DocumentsUpload = ({ goToCards, onSubmit, }: TDocumentsUpload & TIconsItem) => { - const { fields, documents_title, documents }: FormikValues = data; + const { fields, documents_title, documents } = data; const fields_title = localize('First, enter your {{label}} and the expiry date.', { - label: fields[0].label, + label: fields?.[0].label, }); return ( @@ -71,14 +74,14 @@ const DocumentsUpload = ({ })} > validateFields(values, fields, documents)} onSubmit={onSubmit} > {({ values, isValid, touched }: FormikValues) => { const is_form_touched = Object.keys(touched).length > 0; const is_form_empty = Object.values(values).some( - (field, key) => (field === null || field === '') && fields[key]?.required + (field, key) => (field === null || field === '') && fields?.[key]?.required ); return ( @@ -97,7 +100,7 @@ const DocumentsUpload = ({ {documents_title}
- {documents.map((item: FormikValues) => ( + {documents?.map((item: FormikValues) => ( Date: Thu, 1 Dec 2022 15:41:54 +0800 Subject: [PATCH 5/5] refactor: change FormikValues to more specific values for data --- .../poi/status/unsupported/card-details/documents-upload.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6e643e1df73d..92ce4d6b8121 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 @@ -91,7 +91,7 @@ const DocumentsUpload = ({ {fields_title}
- {fields.map((field: FormikValues) => ( + {fields?.map((field: FormikValues) => ( ))}