Suisin/74152/ts migration unsupported

packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx

@@ -9,7 +9,7 @@ type TCardDetails = {
     data: FormikValues;
     onComplete: (e: object) => void;
     goToCards: () => void;
-    is_from_external: boolean;
+    is_from_external?: boolean;
     setIsCfdPoiCompleted: (e: boolean) => void;
 };
 
@@ -18,7 +18,7 @@ const CardDetails = ({ data, goToCards, onComplete, is_from_external, setIsCfdPo
     const [selfie, setSelfie] = React.useState<FormikValues>();
     const [is_selfie_upload, setIsSelfieUpload] = React.useState(false);
 
-    const onSubmitDocuments = (values: FormikValues) => {
+    const onSubmitDocuments = (values?: FormikValues) => {
         setDocuments(values);
         setIsSelfieUpload(true);
     };
@@ -36,7 +36,7 @@ const CardDetails = ({ data, goToCards, onComplete, is_from_external, setIsCfdPo
                     is_from_external={is_from_external}
                     data={data}
                     goToCards={goToCards}
-                    onSubmit={onSubmitDocuments}
+                    onSubmit={() => onSubmitDocuments()}
                 />
             ) : (
                 <SelfieUpload

packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx

@@ -29,20 +29,14 @@ const icons = [
 ];
 
 type TDocumentsUpload = {
-    initial_values: FormikValues;
-    is_from_external: boolean;
+    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[];
-    };
+    data: FormikValues;
 };
 
 const IconsItem = ({ data }: TIconsItem) => (

packages/account/src/Components/poi/status/unsupported/detail-component.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Loading, Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { WS } from '@deriv/shared';
@@ -20,19 +19,31 @@ const STATUS = {
 
 type TDetailComponent = {
     document: {
-        onfido_name: string;
+        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[];
         };
     };
     onClickBack: () => void;
     root_class: string;
-    country_code_key: string;
+    country_code_key?: string;
     height?: string | number;
-    handleComplete: () => void;
+    handleComplete?: () => void;
     is_onfido_supported?: boolean;
-    is_from_external: boolean;
-    setIsCfdPoiCompleted: () => void;
+    is_from_external?: boolean;
+    setIsCfdPoiCompleted?: () => void;
     is_mt5?: boolean;
     handlePOIforMT5Complete: () => void;
 };
@@ -153,7 +164,7 @@ const DetailComponent = ({
                             onComplete={onComplete}
                             goToCards={onClickBack}
                             is_from_external={is_from_external}
-                            setIsCfdPoiCompleted={setIsCfdPoiCompleted}
+                            setIsCfdPoiCompleted={() => setIsCfdPoiCompleted?.()}
                         />
                     )}
                 </React.Fragment>

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

@@ -1,4 +1,4 @@
-import Unsupported from './unsupported.jsx';
+import Unsupported from './unsupported';
 import './unsupported.scss';
 
 export default Unsupported;

packages/account/src/Components/poi/status/unsupported/unsupported.jsx → packages/account/src/Components/poi/status/unsupported/unsupported.tsx

@@ -8,23 +8,31 @@ import DetailComponent from './detail-component';
 import { Documents } from './documents.jsx';
 import { getDocumentIndex, DOCUMENT_TYPES } from './constants';
 import UploadComplete from '../upload-complete';
+import { FormikValues } from 'formik';
 
-const checkNimcStep = documents => {
+const checkNimcStep = (documents: FormikValues) => {
     let has_nimc = false;
-    documents.forEach(document => {
+    documents.forEach((document: FormikValues) => {
         if (document.document_type === DOCUMENT_TYPES.NIMC_SLIP) {
             has_nimc = true;
         }
     });
     return has_nimc;
 };
 
-const Unsupported = ({ country_code, handlePOIforMT5Complete, ...props }) => {
-    const [detail, setDetail] = React.useState(null);
-    const toggleDetail = index => setDetail(index);
+type TUnsupported = {
+    country_code?: string;
+    handlePOIforMT5Complete: () => void;
+    manual?: {
+        status: string;
+    };
+};
+
+const Unsupported = ({ country_code, handlePOIforMT5Complete, ...props }: Partial<TUnsupported>) => {
+    const [detail, setDetail] = React.useState<number | null>(null);
+    const toggleDetail = (index: number) => setDetail(index);
 
     const documents = getDocumentIndex({
-        setDetail,
         country_code,
     });
 
@@ -34,11 +42,11 @@ const Unsupported = ({ country_code, handlePOIforMT5Complete, ...props }) => {
         return (
             <DetailComponent
                 is_onfido_supported={country_code === 'ng' && !checkNimcStep(documents[detail].details.documents)}
-                country_code={country_code}
+                country_code_key={country_code}
                 document={documents[detail]}
                 root_class='manual-poi'
                 onClickBack={() => setDetail(null)}
-                handlePOIforMT5Complete={handlePOIforMT5Complete}
+                handlePOIforMT5Complete={() => handlePOIforMT5Complete?.()}
                 {...props}
             />
         );