diff --git a/packages/account/global.d.ts b/packages/account/global.d.ts index 5ac902685ee5..a492758edbd7 100644 --- a/packages/account/global.d.ts +++ b/packages/account/global.d.ts @@ -1 +1,5 @@ declare module '@binary-com/binary-document-uploader'; +declare module '*.svg' { + const content: React.ElementType>; + export default content; +} diff --git a/packages/account/src/Components/currency-selector/currency-selector.tsx b/packages/account/src/Components/currency-selector/currency-selector.tsx index 9a7f579d9521..17a3b398b4cd 100644 --- a/packages/account/src/Components/currency-selector/currency-selector.tsx +++ b/packages/account/src/Components/currency-selector/currency-selector.tsx @@ -14,7 +14,7 @@ export const Hr = () =>
; type TCurrencySelectorExtend = { accounts: { [key: string]: TAuthAccountInfo }; available_crypto_currencies: TCurrencyConfig[]; - getCurrentStep?: () => number; + getCurrentStep: () => number; goToNextStep: () => void; goToPreviousStep: () => void; has_cancel: boolean; @@ -181,7 +181,7 @@ const CurrencySelector = ({ > {({ handleSubmit, values }: FormikState & FormikHandlers) => ( - {({ setRef, height }: { setRef: string; height: number }) => ( + {({ setRef, height }: { setRef: (instance: HTMLFormElement | null) => void; height: number }) => (
- {reorderCurrencies(fiat).map((currency: TCurrencyConfig) => ( + {reorderCurrencies(fiat).map((currency: FormikValues) => ( - {reorderCurrencies(crypto, 'crypto').map( - (currency: TCurrencyConfig) => ( - - value === currency.value - )?.length === 0 - } - name='currency' - id={currency.value} - label={currency.name} - /> - ) - )} + {reorderCurrencies(crypto, 'crypto').map((currency: FormikValues) => ( + value === currency.value + )?.length === 0 + } + name='currency' + id={currency.value} + label={currency.name} + /> + ))} )} diff --git a/packages/account/src/Components/currency-selector/radio-button-group.tsx b/packages/account/src/Components/currency-selector/radio-button-group.tsx index 0c028cbfe850..31ae2ab10ead 100644 --- a/packages/account/src/Components/currency-selector/radio-button-group.tsx +++ b/packages/account/src/Components/currency-selector/radio-button-group.tsx @@ -5,7 +5,7 @@ import { Text } from '@deriv/components'; export type TRadioButtonGroup = { className: string; - is_fiat: boolean; + is_fiat?: boolean; is_title_enabled?: boolean; item_count: number; label: string; diff --git a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx similarity index 87% rename from packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx rename to packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx index aa2364cae019..acd248f54380 100644 --- a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx +++ b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx @@ -1,6 +1,5 @@ +import { Formik, Field, FormikErrors, FormikValues, FormikHelpers, FormikProps } from 'formik'; import React from 'react'; -import { useLocation } from 'react-router'; -import { Formik, Field } from 'formik'; import { localize, Localize } from '@deriv/translations'; import { Autocomplete, @@ -15,19 +14,35 @@ import { ThemedScrollbars, } from '@deriv/components'; import { isDesktop, formatInput, isMobile } from '@deriv/shared'; -import { getDocumentData, getRegex, isSequentialNumber, isRecurringNumberRegex } from '../../idv-document-submit/utils'; -import { useToggleValidation } from '../../../hooks/useToggleValidation'; +import { getDocumentData, getRegex } from '../../idv-document-submit/utils'; import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg'; -export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, onNext, value, has_idv_error }) => { - const location = useLocation(); - const validation_is_enabled = useToggleValidation(location?.hash); - const [document_list, setDocumentList] = React.useState([]); - const [document_image, setDocumentImage] = React.useState(null); +type TIdvDocSubmitOnSignup = { + citizen_data: FormikValues; + has_previous: boolean; + onPrevious: (values: FormikValues) => void; + onNext: ( + values: FormikValues, + action: FormikHelpers<{ document_type: FormikValues; document_number: FormikValues }> + ) => void; + value: FormikValues; + has_idv_error?: boolean; +}; + +export const IdvDocSubmitOnSignup = ({ + citizen_data, + has_previous, + onPrevious, + onNext, + value, + has_idv_error, +}: TIdvDocSubmitOnSignup) => { + const [document_list, setDocumentList] = React.useState([]); + const [document_image, setDocumentImage] = React.useState(null); const [is_input_disable, setInputDisable] = React.useState(true); const [is_doc_selected, setDocSelected] = React.useState(false); - const document_data = citizen_data.identity.services.idv.documents_supported; + const document_data = citizen_data?.identity.services.idv.documents_supported; const { value: country_code, identity: { @@ -73,16 +88,9 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o document_number: value ? value.document_number : '', }; - const validateFields = values => { - const errors = {}; + const validateFields = (values: FormikValues) => { + const errors: FormikErrors = {}; const { document_type, document_number } = values; - const is_sequential_number = isSequentialNumber(document_number); - const is_recurring_number = isRecurringNumberRegex(document_number); - - // QA can manually toggle this regex now through this feature flag. - // Otherwise it blocks their test suite. - const is_allowing_validation = validation_is_enabled; - if (!document_type || !document_type.text || !document_type.value) { errors.document_type = localize('Please select a document type.'); } else { @@ -92,8 +100,6 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o if (!document_number) { errors.document_number = localize('Please enter your document number. ') + getExampleFormat(document_type.example_format); - } else if (is_allowing_validation && (is_recurring_number || is_sequential_number)) { - errors.document_number = localize('Please enter a valid ID number.'); } else { const format_regex = getRegex(document_type.value); if (!format_regex.test(document_number)) { @@ -105,7 +111,7 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o return errors; }; - const resetDocumentItemSelected = setFieldValue => { + const resetDocumentItemSelected = (setFieldValue: FormikHelpers['setFieldValue']) => { setFieldValue( 'document_type', { @@ -120,11 +126,11 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o setDocumentImage(''); }; - const getDocument = text => { - return document_list.find(d => d.text === text); + const getDocument = (text: string) => { + return document_list.find((d: FormikValues) => d.text === text); }; - const getExampleFormat = example_format => { + const getExampleFormat = (example_format: string) => { return example_format ? localize('Example: ') + example_format : ''; }; @@ -139,11 +145,30 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o validateOnChange validateOnBlur > - {({ errors, handleBlur, handleChange, handleSubmit, isValid, setFieldValue, touched, values }) => ( + {({ + errors, + handleBlur, + handleChange, + handleSubmit, + isValid, + setFieldValue, + touched, + values, + }: Pick< + FormikProps, + | 'errors' + | 'handleBlur' + | 'handleChange' + | 'handleSubmit' + | 'isValid' + | 'setFieldValue' + | 'touched' + | 'values' + >) => ( - {({ setRef }) => ( + {({ setRef }: { setRef: (instance: HTMLFormElement | null) => void }) => ( - +
@@ -184,7 +209,7 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o
- {({ field }) => ( + {({ field }: FormikValues) => (
@@ -203,7 +228,9 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o )} list_items={document_list} value={values.document_type.text} - onBlur={e => { + onBlur={( + e: React.ChangeEvent + ) => { handleBlur(e); if (!getDocument(e.target.value)) { resetDocumentItemSelected( @@ -212,7 +239,9 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o } }} onChange={handleChange} - onItemSelection={item => { + onItemSelection={( + item: FormikValues + ) => { if ( item.text === 'No results found' || @@ -251,9 +280,13 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o label={localize('Choose the document type')} list_items={document_list} value={values.document_type.text} - onChange={e => { + onChange={( + e: React.ChangeEvent + ) => { handleChange(e); - const selected_document = getDocument( + const selected_document: + | undefined + | FormikValues = getDocument( e.target.value ); if (selected_document) { @@ -281,7 +314,7 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o
- {({ field }) => ( + {({ field }: FormikValues) => ( e.preventDefault()} onBlur={handleBlur} onChange={handleChange} - onKeyUp={e => { + onKeyUp={( + e: React.KeyboardEvent + ) => { const { example_format } = values.document_type; - const current_input = example_format?.includes( - '-' - ) - ? formatInput( - example_format, - current_input || e.target.value, - '-' - ) - : e.target.value; + const current_input: string = + example_format.includes('-') + ? formatInput( + example_format, + e.currentTarget.value, + '-' + ) + : e.currentTarget.value; setFieldValue( 'document_number', current_input, diff --git a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/index.js b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/index.js index 2341d2a1ad6a..b00615be2bba 100644 --- a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/index.js +++ b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/index.js @@ -1,3 +1,3 @@ -import { IdvDocSubmitOnSignup } from './idv-doc-submit-on-signup.jsx'; +import { IdvDocSubmitOnSignup } from './idv-doc-submit-on-signup'; export default IdvDocSubmitOnSignup; diff --git a/packages/account/src/Components/poi/poi-form-on-signup/index.js b/packages/account/src/Components/poi/poi-form-on-signup/index.js index 94a1e091030e..126606374626 100644 --- a/packages/account/src/Components/poi/poi-form-on-signup/index.js +++ b/packages/account/src/Components/poi/poi-form-on-signup/index.js @@ -1,3 +1,3 @@ -import { ProofOfIdentityFormOnSignup } from './poi-form-on-signup.jsx'; +import { ProofOfIdentityFormOnSignup } from './poi-form-on-signup'; export default ProofOfIdentityFormOnSignup; diff --git a/packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.jsx b/packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.tsx similarity index 50% rename from packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.jsx rename to packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.tsx index f07f66bcffdd..85440a08bddf 100644 --- a/packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.jsx +++ b/packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.tsx @@ -1,6 +1,18 @@ import React from 'react'; -import PropTypes from 'prop-types'; import IdvDocSubmitOnSignup from './idv-doc-submit-on-signup'; +import { FormikValues } from 'formik'; + +type TProofOfIdentityFormOnSignup = { + getCurrentStep: () => number; + goToPreviousStep: () => void; + goToNextStep: () => void; + onCancel: (step: number, prev_step: () => void) => void; + onSave: (step: number, values: object) => void; + onSubmit: (step: number, values: object, action: FormikValues, next_step: () => void) => void; + value: object; + residence_list: object[]; + citizen: string; +}; export const ProofOfIdentityFormOnSignup = ({ getCurrentStep, @@ -12,14 +24,14 @@ export const ProofOfIdentityFormOnSignup = ({ value, residence_list, citizen, -}) => { - const citizen_data = residence_list.find(residence => residence.value === citizen); +}: TProofOfIdentityFormOnSignup) => { + const citizen_data = residence_list.find((residence: FormikValues) => residence.value === citizen) || {}; - const handleSubmit = (values, actions) => { + const handleSubmit = (values: FormikValues, actions: FormikValues) => { onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep); }; - const handleCancel = values => { + const handleCancel = (values: FormikValues) => { const current_step = getCurrentStep() - 1; onSave(current_step, values); onCancel(current_step, goToPreviousStep); @@ -34,15 +46,3 @@ export const ProofOfIdentityFormOnSignup = ({ /> ); }; - -ProofOfIdentityFormOnSignup.propTypes = { - onCancel: PropTypes.func, - onSave: PropTypes.func, - onSubmit: PropTypes.func, - value: PropTypes.object, - getCurrentStep: PropTypes.func, - goToPreviousStep: PropTypes.func, - goToNextStep: PropTypes.func, - residence_list: PropTypes.arrayOf(PropTypes.object), - citizen: PropTypes.string, -}; diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx index 1fcbd1dc56f9..3cf0ba7bd81e 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx @@ -4,7 +4,7 @@ import { WS } from '@deriv/shared'; import Unsupported from 'Components/poi/status/unsupported'; import OnfidoUpload from './onfido-sdk-view.jsx'; import { identity_status_codes, submission_status_code, service_code } from './proof-of-identity-utils'; -import { IdvDocSubmitOnSignup } from '../../../Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx'; +import { IdvDocSubmitOnSignup } from '../../../Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup'; import { AutoHeightWrapper } from '@deriv/components'; const POISubmissionForMT5 = ({ diff --git a/packages/account/tsconfig.json b/packages/account/tsconfig.json index e6ab00429c19..b78d41877d2d 100644 --- a/packages/account/tsconfig.json +++ b/packages/account/tsconfig.json @@ -4,6 +4,7 @@ "outDir": "./dist", "baseUrl": "./", "paths": { + "Assets/*": ["src/Assets/*"], "Components/*": ["src/Components/*"], "Containers/*": ["src/Containers/*"], "Constants/*": ["src/Constants/*"], diff --git a/packages/components/src/components/auto-height-wrapper/auto-height-wrapper.tsx b/packages/components/src/components/auto-height-wrapper/auto-height-wrapper.tsx index 5ad9864ccbad..d7a391b95c97 100644 --- a/packages/components/src/components/auto-height-wrapper/auto-height-wrapper.tsx +++ b/packages/components/src/components/auto-height-wrapper/auto-height-wrapper.tsx @@ -1,15 +1,15 @@ import React from 'react'; import { usePrevious } from '../../hooks'; -type TAutoHeightWrapperChildProps = { - height: number | string; - setRef: (ref: HTMLElement) => void; +export type TAutoHeightWrapperChildProps = { + height: number; + setRef: (ref: HTMLFormElement | null) => void; }; type TAutoHeightWrapperProps = { - default_height: number | string; + default_height: number; children: (props: TAutoHeightWrapperChildProps) => React.ReactElement; - height_offset: number | null; + height_offset?: number | null; }; const AutoHeightWrapper = (props: TAutoHeightWrapperProps) => { @@ -31,9 +31,9 @@ const AutoHeightWrapper = (props: TAutoHeightWrapperProps) => { : props.default_height ); - const setRef = (ref: HTMLElement) => { - if (Number.isInteger(ref?.clientHeight) && ref.clientHeight !== prev_child_client_height) { - child_client_height_ref.current = ref.clientHeight; + const setRef = (ref: HTMLFormElement | null) => { + if (Number.isInteger(ref?.clientHeight) && ref?.clientHeight !== prev_child_client_height) { + child_client_height_ref.current = Number(ref?.clientHeight); setTimeout(updateHeight, 0); } }; diff --git a/packages/components/src/components/auto-height-wrapper/index.ts b/packages/components/src/components/auto-height-wrapper/index.ts index 3be84d2b9617..c4890133fd9d 100644 --- a/packages/components/src/components/auto-height-wrapper/index.ts +++ b/packages/components/src/components/auto-height-wrapper/index.ts @@ -1,3 +1,4 @@ -import AutoHeightWrapper from './auto-height-wrapper'; +import AutoHeightWrapper, { TAutoHeightWrapperChildProps } from './auto-height-wrapper'; +export type { TAutoHeightWrapperChildProps }; export default AutoHeightWrapper; diff --git a/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx b/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx index 300084e47494..c2f046929505 100644 --- a/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx +++ b/packages/components/src/components/themed-scrollbars/themed-scrollbars.tsx @@ -6,7 +6,7 @@ type TThemedScrollbars = { autohide?: boolean; className?: string; has_horizontal?: boolean; - height?: string; + height?: number | string; is_bypassed?: boolean; is_only_horizontal?: boolean; is_only_horizontal_overlay?: boolean; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 897d7785cd21..f2b5c3a46a84 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -10,7 +10,7 @@ // export default { Label, Button }; export { default as Accordion } from './components/accordion'; -export { default as AutoHeightWrapper } from './components/auto-height-wrapper'; +export { default as AutoHeightWrapper, TAutoHeightWrapperChildProps } from './components/auto-height-wrapper'; export { default as Autocomplete } from './components/autocomplete'; export { default as AutoSizer } from './components/autosizer'; export { default as Button } from './components/button';