Suisin/82332/ts migration for document upload

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';
 import { SELFIE_DOCUMENT } from '../constants';
 import './card-details.scss';

packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.jsx → 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,24 @@ const icons = [
     },
 ];
 
-const IconsItem = ({ data }) => (
+type TDocumentsUpload = {
+    initial_values: FormikValues;
+    is_from_external: boolean;
+    goToCards: () => void;
+    onSubmit: () => void;
+};
+
+type TIconsItem = {
+    data: {
+        icon: string;
+        text: string;
+        fields?: FormikValues[];
+        documents_title?: string;
+        documents?: FormikValues[];
+    };
+};
+
+const IconsItem = ({ data }: TIconsItem) => (
     <div className={`${ROOT_CLASS}__icons-item`}>
         <Icon icon={data.icon} size={24} />
         <Text as='p' size='xxxs' align='center'>
@@ -38,11 +54,17 @@ const IconsItem = ({ data }) => (
     </div>
 );
 
-const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, onSubmit }) => {
+const DocumentsUpload = ({
+    initial_values,
+    is_from_external,
+    data,
+    goToCards,
+    onSubmit,
+}: TDocumentsUpload & TIconsItem) => {
     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 (
@@ -52,14 +74,14 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on
             })}
         >
             <Formik
-                initialValues={initial_values || setInitialValues([...fields, ...documents])}
+                initialValues={initial_values || setInitialValues([...(fields || []), ...(documents || [])])}
                 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
+                        (field, key) => (field === null || field === '') && fields?.[key]?.required
                     );
 
                     return (
@@ -69,7 +91,7 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on
                                     {fields_title}
                                 </Text>
                                 <div className={`${ROOT_CLASS}__fields-wrap`}>
-                                    {fields.map(field => (
+                                    {fields?.map((field: FormikValues) => (
                                         <InputField key={field.name} data={field} />
                                     ))}
                                 </div>
@@ -78,7 +100,7 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on
                                     {documents_title}
                                 </Text>
                                 <div className={`${ROOT_CLASS}__uploaders-wrap`}>
-                                    {documents.map(item => (
+                                    {documents?.map((item: FormikValues) => (
                                         <Uploader
                                             key={item.name}
                                             data={item}
@@ -117,10 +139,4 @@ const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, on
     );
 };
 
-DocumentsUpload.propTypes = {
-    initial_values: PropTypes.object,
-    data: PropTypes.object,
-    goToCards: PropTypes.func,
-    onSubmit: PropTypes.func,
-};
 export default DocumentsUpload;