Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Suisin/refactor: ts migration for poi form on signup and idv submit on sign up #31

Merged
merged 9 commits into from
Jan 9, 2023
Merged

Suisin/refactor: ts migration for poi form on signup and idv submit on sign up #31

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e5aa168
refactor: ts migration for poi form on signup and idv submit on sign up
suisin-deriv Jan 5, 2023
ed0f3fc
chore: empty commit
suisin-deriv Jan 6, 2023
626ad56
chore: remote .jsx from indx file
suisin-deriv Jan 6, 2023
ac8a282
chore: remove prop-types
suisin-deriv Jan 6, 2023
795e274
chore: remove ts values for constant variables
suisin-deriv Jan 9, 2023
03cca5a
chore: remove cfd changes
suisin-deriv Jan 9, 2023
1bd5a06
chore: add Assets for icons
suisin-deriv Jan 9, 2023
2634d7a
Update tsconfig.json
suisin-deriv Jan 9, 2023
a4a39f3
chore: change function call in global.d.ts
suisin-deriv Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/account/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
declare module '@binary-com/binary-document-uploader';
declare module '*.svg' {
const content: React.SVGAttributes<SVGElement>;
export default content;
}
37 changes: 17 additions & 20 deletions packages/account/src/Components/currency-selector/currency-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const Hr = () => <div className='currency-hr' />;
type TCurrencySelectorExtend = {
accounts: { [key: string]: TAuthAccountInfo };
available_crypto_currencies: TCurrencyConfig[];
getCurrentStep?: () => number;
getCurrentStep: () => number;
goToNextStep: () => void;
goToPreviousStep: () => void;
has_cancel: boolean;
Expand Down Expand Up @@ -181,7 +181,7 @@ const CurrencySelector = ({
>
{({ handleSubmit, values }: FormikState<FormikValues> & FormikHandlers) => (
<AutoHeightWrapper default_height={450}>
{({ setRef, height }: { setRef: string; height: number }) => (
{({ setRef, height }: { setRef: (instance: HTMLFormElement | null) => void; height: number }) => (
<form
ref={setRef}
onSubmit={handleSubmit}
Expand All @@ -207,7 +207,7 @@ const CurrencySelector = ({
description={description}
has_fiat={should_disable_fiat && has_fiat}
>
{reorderCurrencies(fiat).map((currency: TCurrencyConfig) => (
{reorderCurrencies(fiat).map((currency: FormikValues) => (
<Field
key={currency.value}
component={RadioButton}
Expand All @@ -229,23 +229,20 @@ const CurrencySelector = ({
item_count={reorderCurrencies(crypto, 'crypto').length}
description={description}
>
{reorderCurrencies(crypto, 'crypto').map(
(currency: TCurrencyConfig) => (
<Field
key={currency.value}
component={RadioButton}
selected={
available_crypto_currencies?.filter(
({ value }: TCurrencyConfig) =>
value === currency.value
)?.length === 0
}
name='currency'
id={currency.value}
label={currency.name}
/>
)
)}
{reorderCurrencies(crypto, 'crypto').map((currency: FormikValues) => (
<Field
key={currency.value}
component={RadioButton}
selected={
available_crypto_currencies?.filter(
({ value }: TCurrencyConfig) => value === currency.value
)?.length === 0
}
name='currency'
id={currency.value}
label={currency.name}
/>
))}
</RadioButtonGroup>
</React.Fragment>
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Components/currency-selector/radio-button-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
123 changes: 78 additions & 45 deletions ...it-on-signup/idv-doc-submit-on-signup.jsx → ...it-on-signup/idv-doc-submit-on-signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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<object[]>([]);
const [document_image, setDocumentImage] = React.useState<string | null>(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: {
Expand Down Expand Up @@ -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<FormikValues> = {};
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 {
Expand All @@ -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)) {
Expand All @@ -105,7 +111,7 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o
return errors;
};

const resetDocumentItemSelected = setFieldValue => {
const resetDocumentItemSelected = (setFieldValue: FormikHelpers<FormikValues>['setFieldValue']) => {
setFieldValue(
'document_type',
{
Expand All @@ -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 : '';
};

Expand All @@ -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<FormikValues>,
| 'errors'
| 'handleBlur'
| 'handleChange'
| 'handleSubmit'
| 'isValid'
| 'setFieldValue'
| 'touched'
| 'values'
>) => (
<AutoHeightWrapper default_height={450} height_offset={isDesktop() ? 81 : null}>
{({ setRef }) => (
{({ setRef }: { setRef: (instance: HTMLFormElement | null) => void }) => (
<form ref={setRef} className='poi-form-on-signup' onSubmit={handleSubmit} noValidate>
<ThemedScrollbars height='calc(100vh - 80px'>
<ThemedScrollbars height='calc(100vh - 80px)'>
<div className='details-form'>
<div className='poi-form-on-signup__fields'>
<div className='proof-of-identity__container'>
Expand Down Expand Up @@ -184,7 +209,7 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o
<div className='proof-of-identity__fieldset-container'>
<fieldset className='proof-of-identity__fieldset'>
<Field name='document'>
{({ field }) => (
{({ field }: FormikValues) => (
<React.Fragment>
<DesktopWrapper>
<div className='document-dropdown'>
Expand All @@ -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<HTMLInputElement>
) => {
handleBlur(e);
if (!getDocument(e.target.value)) {
resetDocumentItemSelected(
Expand All @@ -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' ||
Expand Down Expand Up @@ -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<HTMLSelectElement>
) => {
handleChange(e);
const selected_document = getDocument(
const selected_document:
| undefined
| FormikValues = getDocument(
e.target.value
);
if (selected_document) {
Expand Down Expand Up @@ -281,7 +314,7 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o
</fieldset>
<fieldset className='proof-of-identity__fieldset-input'>
<Field name='document_number'>
{({ field }) => (
{({ field }: FormikValues) => (
<Input
{...field}
name='document_number'
Expand All @@ -299,20 +332,20 @@ export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, o
autoComplete='off'
placeholder='Enter your document number'
value={values.document_number}
onPaste={e => e.preventDefault()}
onBlur={handleBlur}
onChange={handleChange}
onKeyUp={e => {
onKeyUp={(
e: React.KeyboardEvent<HTMLInputElement>
) => {
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,
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { IdvDocSubmitOnSignup } from './idv-doc-submit-on-signup.jsx';
import { IdvDocSubmitOnSignup } from './idv-doc-submit-on-signup';

export default IdvDocSubmitOnSignup;
2 changes: 1 addition & 1 deletion packages/account/src/Components/poi/poi-form-on-signup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { ProofOfIdentityFormOnSignup } from './poi-form-on-signup.jsx';
import { ProofOfIdentityFormOnSignup } from './poi-form-on-signup';

export default ProofOfIdentityFormOnSignup;
Loading