From 8662dfad7c3e565614001c472e8bb4ac2e069357 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Fri, 4 Nov 2022 15:33:36 +0800 Subject: [PATCH 1/7] TS Migration for Financial Details Partials --- ...als.jsx => financial-details-partials.tsx} | 364 +++++++++++++++--- 1 file changed, 312 insertions(+), 52 deletions(-) rename packages/account/src/Components/financial-details/{financial-details-partials.jsx => financial-details-partials.tsx} (77%) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.jsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx similarity index 77% rename from packages/account/src/Components/financial-details/financial-details-partials.jsx rename to packages/account/src/Components/financial-details/financial-details-partials.tsx index d162a02fcf4b..b3349c733b05 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.jsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -1,8 +1,27 @@ -import { Field } from 'formik'; +import { Field, FormikValues } from 'formik'; import React from 'react'; import { DesktopWrapper, MobileWrapper, Dropdown, SelectNative } from '@deriv/components'; import { localize } from '@deriv/translations'; +type TCommonFinancialDetailsPartials = { + handleChange: (e: React.ChangeEvent) => void; + setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void; +}; + +type TEmploymentStatus = { + values: { + employment_status: string; + }; + handleBlur: () => boolean; + touched: { + employment_status: string; + }; + errors: { + employment_status: string; + }; + employment_status_enum: Array; +} & TCommonFinancialDetailsPartials; + export const EmploymentStatus = ({ values, handleChange, @@ -11,9 +30,9 @@ export const EmploymentStatus = ({ errors, setFieldValue, employment_status_enum, -}) => ( +}: TEmploymentStatus) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('employment_status', e.target.value, true); }} @@ -51,6 +70,20 @@ export const EmploymentStatus = ({ ); +type TIncomeSource = { + values: { + income_source: string; + }; + handleBlur: () => boolean; + touched: { + income_source: string; + }; + errors: { + income_source: string; + }; + income_source_enum: Array; +} & TCommonFinancialDetailsPartials; + export const IncomeSource = ({ values, handleChange, @@ -59,9 +92,9 @@ export const IncomeSource = ({ errors, setFieldValue, income_source_enum, -}) => ( +}: TIncomeSource) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('income_source', e.target.value, true); }} @@ -99,6 +132,20 @@ export const IncomeSource = ({ ); +type TEmploymentIndustry = { + values: { + employment_industry: string; + }; + handleBlur: () => boolean; + touched: { + employment_industry: string; + }; + errors: { + employment_industry: string; + }; + employment_industry_enum: Array; +} & TCommonFinancialDetailsPartials; + export const EmploymentIndustry = ({ values, handleChange, @@ -107,9 +154,9 @@ export const EmploymentIndustry = ({ errors, setFieldValue, employment_industry_enum, -}) => ( +}: TEmploymentIndustry) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('employment_industry', e.target.value, true); }} @@ -146,9 +193,32 @@ export const EmploymentIndustry = ({ )} ); -export const Occupation = ({ values, handleChange, handleBlur, touched, errors, setFieldValue, occupation_enum }) => ( + +type TOccupation = { + values: { + occupation: string; + }; + handleBlur: () => boolean; + touched: { + occupation: string; + }; + errors: { + occupation: string; + }; + occupation_enum: Array; +} & TCommonFinancialDetailsPartials; + +export const Occupation = ({ + values, + handleChange, + handleBlur, + touched, + errors, + setFieldValue, + occupation_enum, +}: TOccupation) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('occupation', e.target.value, true); }} @@ -186,6 +256,20 @@ export const Occupation = ({ values, handleChange, handleBlur, touched, errors, ); +type TSourceOfWealth = { + values: { + source_of_wealth: string; + }; + handleBlur: () => boolean; + touched: { + source_of_wealth: string; + }; + errors: { + source_of_wealth: string; + }; + source_of_wealth_enum: Array; +} & TCommonFinancialDetailsPartials; + export const SourceOfWealth = ({ values, handleChange, @@ -194,9 +278,9 @@ export const SourceOfWealth = ({ errors, setFieldValue, source_of_wealth_enum, -}) => ( +}: TSourceOfWealth) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('source_of_wealth', e.target.value, true); }} @@ -234,6 +318,20 @@ export const SourceOfWealth = ({ ); +type TEducationLevel = { + values: { + education_level: string; + }; + handleBlur: () => boolean; + touched: { + education_level: string; + }; + errors: { + education_level: string; + }; + education_level_enum: Array; +} & TCommonFinancialDetailsPartials; + export const EducationLevel = ({ values, handleChange, @@ -242,9 +340,9 @@ export const EducationLevel = ({ errors, setFieldValue, education_level_enum, -}) => ( +}: TEducationLevel) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('education_level', e.target.value, true); }} @@ -282,9 +380,31 @@ export const EducationLevel = ({ ); -export const NetIncome = ({ values, handleChange, handleBlur, touched, errors, setFieldValue, net_income_enum }) => ( +type TNetIncome = { + values: { + net_income: string; + }; + handleBlur: () => boolean; + touched: { + net_income: string; + }; + errors: { + net_income: string; + }; + net_income_enum: Array; +} & TCommonFinancialDetailsPartials; + +export const NetIncome = ({ + values, + handleChange, + handleBlur, + touched, + errors, + setFieldValue, + net_income_enum, +}: TNetIncome) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('net_income', e.target.value, true); }} @@ -322,6 +442,20 @@ export const NetIncome = ({ values, handleChange, handleBlur, touched, errors, s ); +type TEstimatedWorth = { + values: { + estimated_worth: string; + }; + handleBlur: () => boolean; + touched: { + estimated_worth: string; + }; + errors: { + estimated_worth: string; + }; + estimated_worth_enum: Array; +} & TCommonFinancialDetailsPartials; + export const EstimatedWorth = ({ values, handleChange, @@ -330,9 +464,9 @@ export const EstimatedWorth = ({ errors, setFieldValue, estimated_worth_enum, -}) => ( +}: TEstimatedWorth) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('estimated_worth', e.target.value, true); }} @@ -370,6 +504,20 @@ export const EstimatedWorth = ({ ); +type TAccountTurnover = { + values: { + account_turnover: string; + }; + handleBlur: () => boolean; + touched: { + account_turnover: string; + }; + errors: { + account_turnover: string; + }; + account_turnover_enum: Array; +} & TCommonFinancialDetailsPartials; + export const AccountTurnover = ({ values, handleChange, @@ -378,9 +526,9 @@ export const AccountTurnover = ({ errors, setFieldValue, account_turnover_enum, -}) => ( +}: TAccountTurnover) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('account_turnover', e.target.value, true); }} @@ -418,6 +566,20 @@ export const AccountTurnover = ({ ); +type TForexTradingExperience = { + values: { + forex_trading_experience: string; + }; + handleBlur: () => boolean; + touched: { + forex_trading_experience: string; + }; + errors: { + forex_trading_experience: string; + }; + forex_trading_experience_enum: Array; +} & TCommonFinancialDetailsPartials; + export const ForexTradingExperience = ({ values, handleChange, @@ -426,9 +588,9 @@ export const ForexTradingExperience = ({ errors, setFieldValue, forex_trading_experience_enum, -}) => ( +}: TForexTradingExperience) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('forex_trading_experience', e.target.value, true); }} @@ -466,6 +628,20 @@ export const ForexTradingExperience = ({ ); +type TForexTradingFrequency = { + values: { + forex_trading_frequency: string; + }; + handleBlur: () => boolean; + touched: { + forex_trading_frequency: string; + }; + errors: { + forex_trading_frequency: string; + }; + forex_trading_frequency_enum: Array; +} & TCommonFinancialDetailsPartials; + export const ForexTradingFrequency = ({ values, handleChange, @@ -474,9 +650,9 @@ export const ForexTradingFrequency = ({ errors, setFieldValue, forex_trading_frequency_enum, -}) => ( +}: TForexTradingFrequency) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('forex_trading_frequency', e.target.value, true); }} @@ -514,6 +690,20 @@ export const ForexTradingFrequency = ({ ); +type TBinaryOptionsTradingExperience = { + values: { + binary_options_trading_experience: string; + }; + handleBlur: () => boolean; + touched: { + binary_options_trading_experience: string; + }; + errors: { + binary_options_trading_experience: string; + }; + binary_options_trading_experience_enum: Array; +} & TCommonFinancialDetailsPartials; + export const BinaryOptionsTradingExperience = ({ values, handleChange, @@ -522,9 +712,9 @@ export const BinaryOptionsTradingExperience = ({ errors, setFieldValue, binary_options_trading_experience_enum, -}) => ( +}: TBinaryOptionsTradingExperience) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('binary_options_trading_experience', e.target.value, true); }} @@ -562,6 +752,20 @@ export const BinaryOptionsTradingExperience = ({ ); +type TBinaryOptionsTradingFrequency = { + values: { + binary_options_trading_frequency: string; + }; + handleBlur: () => boolean; + touched: { + binary_options_trading_frequency: string; + }; + errors: { + binary_options_trading_frequency: string; + }; + binary_options_trading_frequency_enum: Array; +} & TCommonFinancialDetailsPartials; + export const BinaryOptionsTradingFrequency = ({ values, handleChange, @@ -570,9 +774,9 @@ export const BinaryOptionsTradingFrequency = ({ errors, setFieldValue, binary_options_trading_frequency_enum, -}) => ( +}: TBinaryOptionsTradingFrequency) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('binary_options_trading_frequency', e.target.value, true); }} @@ -610,6 +814,20 @@ export const BinaryOptionsTradingFrequency = ({ ); +type TCFDTradingExperience = { + values: { + cfd_trading_experience: string; + }; + handleBlur: () => boolean; + touched: { + cfd_trading_experience: string; + }; + errors: { + cfd_trading_experience: string; + }; + cfd_trading_experience_enum: Array; +} & TCommonFinancialDetailsPartials; + export const CFDTradingExperience = ({ values, handleChange, @@ -618,9 +836,9 @@ export const CFDTradingExperience = ({ errors, setFieldValue, cfd_trading_experience_enum, -}) => ( +}: TCFDTradingExperience) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('cfd_trading_experience', e.target.value, true); }} @@ -658,6 +876,20 @@ export const CFDTradingExperience = ({ ); +type TCFDTradingFrequency = { + values: { + cfd_trading_frequency: string; + }; + handleBlur: () => boolean; + touched: { + cfd_trading_frequency: string; + }; + errors: { + cfd_trading_frequency: string; + }; + cfd_trading_frequency_enum: Array; +} & TCommonFinancialDetailsPartials; + export const CFDTradingFrequency = ({ values, handleChange, @@ -666,9 +898,9 @@ export const CFDTradingFrequency = ({ errors, setFieldValue, cfd_trading_frequency_enum, -}) => ( +}: TCFDTradingFrequency) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('cfd_trading_frequency', e.target.value, true); }} @@ -706,6 +938,20 @@ export const CFDTradingFrequency = ({ ); +type TOtherInstrumentsTradingExperience = { + values: { + other_instruments_trading_experience: string; + }; + handleBlur: () => boolean; + touched: { + other_instruments_trading_experience: string; + }; + errors: { + other_instruments_trading_experience: string; + }; + other_instruments_trading_experience_enum: Array; +} & TCommonFinancialDetailsPartials; + export const OtherInstrumentsTradingExperience = ({ values, handleChange, @@ -714,9 +960,9 @@ export const OtherInstrumentsTradingExperience = ({ errors, setFieldValue, other_instruments_trading_experience_enum, -}) => ( +}: TOtherInstrumentsTradingExperience) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('other_instruments_trading_experience', e.target.value, true); }} @@ -758,6 +1004,20 @@ export const OtherInstrumentsTradingExperience = ({ ); +type TOtherInstrumentsTradingFrequency = { + values: { + other_instruments_trading_frequency: string; + }; + handleBlur: () => boolean; + touched: { + other_instruments_trading_frequency: string; + }; + errors: { + other_instruments_trading_frequency: string; + }; + other_instruments_trading_frequency_enum: Array; +} & TCommonFinancialDetailsPartials; + export const OtherInstrumentsTradingFrequency = ({ values, handleChange, @@ -766,9 +1026,9 @@ export const OtherInstrumentsTradingFrequency = ({ errors, setFieldValue, other_instruments_trading_frequency_enum, -}) => ( +}: TOtherInstrumentsTradingFrequency) => ( - {({ field }) => ( + {({ field }: FormikValues) => ( { + onChange={(e: React.ChangeEvent) => { handleChange(e); setFieldValue('other_instruments_trading_frequency', e.target.value, true); }} From ca07d9a123eecad5af39d636c0311d9ea446ac29 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Fri, 4 Nov 2022 16:01:03 +0800 Subject: [PATCH 2/7] remove .jsx from financial-details --- .../src/Components/financial-details/financial-details.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/financial-details/financial-details.jsx b/packages/account/src/Components/financial-details/financial-details.jsx index 32c47cf65b00..f4942f8c960f 100644 --- a/packages/account/src/Components/financial-details/financial-details.jsx +++ b/packages/account/src/Components/financial-details/financial-details.jsx @@ -22,7 +22,7 @@ import { OtherInstrumentsTradingExperience, OtherInstrumentsTradingFrequency, SourceOfWealth, -} from './financial-details-partials.jsx'; +} from './financial-details-partials'; import FormSubHeader from '../form-sub-header'; import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; From 24c4cc28dd458521b435bc8033e20573dea751fe Mon Sep 17 00:00:00 2001 From: tay suisin Date: Fri, 4 Nov 2022 16:51:22 +0800 Subject: [PATCH 3/7] update any to React.ReactNode --- .../Components/financial-details/financial-details-partials.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index b3349c733b05..2482db1b1247 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -5,7 +5,7 @@ import { localize } from '@deriv/translations'; type TCommonFinancialDetailsPartials = { handleChange: (e: React.ChangeEvent) => void; - setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void; + setFieldValue: (field: string, value: React.ReactNode, shouldValidate?: boolean) => void; }; type TEmploymentStatus = { From e9e45072c9ecd5a6af00b96c7251123a9931820e Mon Sep 17 00:00:00 2001 From: tay suisin Date: Tue, 8 Nov 2022 17:00:38 +0800 Subject: [PATCH 4/7] add react fragment to footer --- packages/components/src/components/modal/modal-footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/modal/modal-footer.tsx b/packages/components/src/components/modal/modal-footer.tsx index 028964ea656f..26f8b1481846 100644 --- a/packages/components/src/components/modal/modal-footer.tsx +++ b/packages/components/src/components/modal/modal-footer.tsx @@ -8,7 +8,7 @@ type TFooter = { }; const Footer = ({ children, className, has_separator, is_bypassed }: React.PropsWithChildren>) => { - if (is_bypassed) return children; + if (is_bypassed) return children; return (
Date: Wed, 9 Nov 2022 15:59:47 +0800 Subject: [PATCH 5/7] update type rules --- .../financial-details-partials.tsx | 178 +----------------- 1 file changed, 6 insertions(+), 172 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index 2482db1b1247..421752a5eb4d 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -1,24 +1,18 @@ -import { Field, FormikValues } from 'formik'; +import { Field, FormikErrors, FormikHelpers, FormikTouched, FormikValues } from 'formik'; import React from 'react'; import { DesktopWrapper, MobileWrapper, Dropdown, SelectNative } from '@deriv/components'; import { localize } from '@deriv/translations'; type TCommonFinancialDetailsPartials = { handleChange: (e: React.ChangeEvent) => void; - setFieldValue: (field: string, value: React.ReactNode, shouldValidate?: boolean) => void; + setFieldValue: FormikHelpers['setFieldValue']; + handleBlur: () => boolean; + values: FormikValues; + touched: FormikTouched; + errors: FormikErrors; }; type TEmploymentStatus = { - values: { - employment_status: string; - }; - handleBlur: () => boolean; - touched: { - employment_status: string; - }; - errors: { - employment_status: string; - }; employment_status_enum: Array; } & TCommonFinancialDetailsPartials; @@ -71,16 +65,6 @@ export const EmploymentStatus = ({ ); type TIncomeSource = { - values: { - income_source: string; - }; - handleBlur: () => boolean; - touched: { - income_source: string; - }; - errors: { - income_source: string; - }; income_source_enum: Array; } & TCommonFinancialDetailsPartials; @@ -133,16 +117,6 @@ export const IncomeSource = ({ ); type TEmploymentIndustry = { - values: { - employment_industry: string; - }; - handleBlur: () => boolean; - touched: { - employment_industry: string; - }; - errors: { - employment_industry: string; - }; employment_industry_enum: Array; } & TCommonFinancialDetailsPartials; @@ -195,16 +169,6 @@ export const EmploymentIndustry = ({ ); type TOccupation = { - values: { - occupation: string; - }; - handleBlur: () => boolean; - touched: { - occupation: string; - }; - errors: { - occupation: string; - }; occupation_enum: Array; } & TCommonFinancialDetailsPartials; @@ -257,16 +221,6 @@ export const Occupation = ({ ); type TSourceOfWealth = { - values: { - source_of_wealth: string; - }; - handleBlur: () => boolean; - touched: { - source_of_wealth: string; - }; - errors: { - source_of_wealth: string; - }; source_of_wealth_enum: Array; } & TCommonFinancialDetailsPartials; @@ -319,16 +273,6 @@ export const SourceOfWealth = ({ ); type TEducationLevel = { - values: { - education_level: string; - }; - handleBlur: () => boolean; - touched: { - education_level: string; - }; - errors: { - education_level: string; - }; education_level_enum: Array; } & TCommonFinancialDetailsPartials; @@ -381,16 +325,6 @@ export const EducationLevel = ({ ); type TNetIncome = { - values: { - net_income: string; - }; - handleBlur: () => boolean; - touched: { - net_income: string; - }; - errors: { - net_income: string; - }; net_income_enum: Array; } & TCommonFinancialDetailsPartials; @@ -443,16 +377,6 @@ export const NetIncome = ({ ); type TEstimatedWorth = { - values: { - estimated_worth: string; - }; - handleBlur: () => boolean; - touched: { - estimated_worth: string; - }; - errors: { - estimated_worth: string; - }; estimated_worth_enum: Array; } & TCommonFinancialDetailsPartials; @@ -505,16 +429,6 @@ export const EstimatedWorth = ({ ); type TAccountTurnover = { - values: { - account_turnover: string; - }; - handleBlur: () => boolean; - touched: { - account_turnover: string; - }; - errors: { - account_turnover: string; - }; account_turnover_enum: Array; } & TCommonFinancialDetailsPartials; @@ -567,16 +481,6 @@ export const AccountTurnover = ({ ); type TForexTradingExperience = { - values: { - forex_trading_experience: string; - }; - handleBlur: () => boolean; - touched: { - forex_trading_experience: string; - }; - errors: { - forex_trading_experience: string; - }; forex_trading_experience_enum: Array; } & TCommonFinancialDetailsPartials; @@ -629,16 +533,6 @@ export const ForexTradingExperience = ({ ); type TForexTradingFrequency = { - values: { - forex_trading_frequency: string; - }; - handleBlur: () => boolean; - touched: { - forex_trading_frequency: string; - }; - errors: { - forex_trading_frequency: string; - }; forex_trading_frequency_enum: Array; } & TCommonFinancialDetailsPartials; @@ -691,16 +585,6 @@ export const ForexTradingFrequency = ({ ); type TBinaryOptionsTradingExperience = { - values: { - binary_options_trading_experience: string; - }; - handleBlur: () => boolean; - touched: { - binary_options_trading_experience: string; - }; - errors: { - binary_options_trading_experience: string; - }; binary_options_trading_experience_enum: Array; } & TCommonFinancialDetailsPartials; @@ -753,16 +637,6 @@ export const BinaryOptionsTradingExperience = ({ ); type TBinaryOptionsTradingFrequency = { - values: { - binary_options_trading_frequency: string; - }; - handleBlur: () => boolean; - touched: { - binary_options_trading_frequency: string; - }; - errors: { - binary_options_trading_frequency: string; - }; binary_options_trading_frequency_enum: Array; } & TCommonFinancialDetailsPartials; @@ -815,16 +689,6 @@ export const BinaryOptionsTradingFrequency = ({ ); type TCFDTradingExperience = { - values: { - cfd_trading_experience: string; - }; - handleBlur: () => boolean; - touched: { - cfd_trading_experience: string; - }; - errors: { - cfd_trading_experience: string; - }; cfd_trading_experience_enum: Array; } & TCommonFinancialDetailsPartials; @@ -877,16 +741,6 @@ export const CFDTradingExperience = ({ ); type TCFDTradingFrequency = { - values: { - cfd_trading_frequency: string; - }; - handleBlur: () => boolean; - touched: { - cfd_trading_frequency: string; - }; - errors: { - cfd_trading_frequency: string; - }; cfd_trading_frequency_enum: Array; } & TCommonFinancialDetailsPartials; @@ -939,16 +793,6 @@ export const CFDTradingFrequency = ({ ); type TOtherInstrumentsTradingExperience = { - values: { - other_instruments_trading_experience: string; - }; - handleBlur: () => boolean; - touched: { - other_instruments_trading_experience: string; - }; - errors: { - other_instruments_trading_experience: string; - }; other_instruments_trading_experience_enum: Array; } & TCommonFinancialDetailsPartials; @@ -1005,16 +849,6 @@ export const OtherInstrumentsTradingExperience = ({ ); type TOtherInstrumentsTradingFrequency = { - values: { - other_instruments_trading_frequency: string; - }; - handleBlur: () => boolean; - touched: { - other_instruments_trading_frequency: string; - }; - errors: { - other_instruments_trading_frequency: string; - }; other_instruments_trading_frequency_enum: Array; } & TCommonFinancialDetailsPartials; From 67571c76e139889e50e6002cf3e6936eaef48c5a Mon Sep 17 00:00:00 2001 From: tay suisin Date: Fri, 11 Nov 2022 11:42:20 +0800 Subject: [PATCH 6/7] update type script rules with formik values --- .../financial-details-partials.tsx | 353 ++++++++++-------- 1 file changed, 207 insertions(+), 146 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index 421752a5eb4d..bfa8f3829785 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -1,20 +1,11 @@ -import { Field, FormikErrors, FormikHelpers, FormikTouched, FormikValues } from 'formik'; +import { Field, FormikProps, FormikValues } from 'formik'; import React from 'react'; import { DesktopWrapper, MobileWrapper, Dropdown, SelectNative } from '@deriv/components'; import { localize } from '@deriv/translations'; -type TCommonFinancialDetailsPartials = { - handleChange: (e: React.ChangeEvent) => void; - setFieldValue: FormikHelpers['setFieldValue']; - handleBlur: () => boolean; - values: FormikValues; - touched: FormikTouched; - errors: FormikErrors; -}; - type TEmploymentStatus = { employment_status_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const EmploymentStatus = ({ values, @@ -24,7 +15,7 @@ export const EmploymentStatus = ({ errors, setFieldValue, employment_status_enum, -}: TEmploymentStatus) => ( +}: Partial> & TEmploymentStatus) => ( {({ field }: FormikValues) => ( @@ -34,10 +25,10 @@ export const EmploymentStatus = ({ is_align_text_left name={field.name} list={employment_status_enum} - value={values.employment_status} + value={values?.employment_status} onChange={handleChange} handleBlur={handleBlur} - error={touched.employment_status && errors.employment_status} + error={touched?.employment_status && errors?.employment_status} list_portal_id='modal_root' {...field} required @@ -49,11 +40,15 @@ export const EmploymentStatus = ({ name={field.name} label={localize('Employment Status')} list_items={employment_status_enum} - value={values.employment_status} - error={touched.employment_status && errors.employment_status} + value={values?.employment_status} + error={touched?.employment_status && errors?.employment_status} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('employment_status', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('employment_status', e.target.value, true); + } }} {...field} required @@ -66,7 +61,7 @@ export const EmploymentStatus = ({ type TIncomeSource = { income_source_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const IncomeSource = ({ values, @@ -76,7 +71,7 @@ export const IncomeSource = ({ errors, setFieldValue, income_source_enum, -}: TIncomeSource) => ( +}: Partial> & TIncomeSource) => ( {({ field }: FormikValues) => ( @@ -86,10 +81,10 @@ export const IncomeSource = ({ is_align_text_left name={field.name} list={income_source_enum} - value={values.income_source} + value={values?.income_source} onChange={handleChange} handleBlur={handleBlur} - error={touched.income_source && errors.income_source} + error={touched?.income_source && errors?.income_source} list_portal_id='modal_root' {...field} required @@ -101,11 +96,15 @@ export const IncomeSource = ({ name={field.name} label={localize('Source of income')} list_items={income_source_enum} - value={values.income_source} - error={touched.income_source && errors.income_source} + value={values?.income_source} + error={touched?.income_source && errors?.income_source} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('income_source', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('income_source', e.target.value, true); + } }} {...field} required @@ -118,7 +117,7 @@ export const IncomeSource = ({ type TEmploymentIndustry = { employment_industry_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const EmploymentIndustry = ({ values, @@ -128,7 +127,7 @@ export const EmploymentIndustry = ({ errors, setFieldValue, employment_industry_enum, -}: TEmploymentIndustry) => ( +}: Partial> & TEmploymentIndustry) => ( {({ field }: FormikValues) => ( @@ -138,10 +137,10 @@ export const EmploymentIndustry = ({ is_align_text_left name={field.name} list={employment_industry_enum} - value={values.employment_industry} + value={values?.employment_industry} onChange={handleChange} handleBlur={handleBlur} - error={touched.employment_industry && errors.employment_industry} + error={touched?.employment_industry && errors?.employment_industry} list_portal_id='modal_root' {...field} required @@ -153,11 +152,15 @@ export const EmploymentIndustry = ({ name={field.name} label={localize('Industry of employment')} list_items={employment_industry_enum} - value={values.employment_industry} - error={touched.employment_industry && errors.employment_industry} + value={values?.employment_industry} + error={touched?.employment_industry && errors?.employment_industry} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('employment_industry', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('employment_industry', e.target.value, true); + } }} {...field} required @@ -170,7 +173,7 @@ export const EmploymentIndustry = ({ type TOccupation = { occupation_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const Occupation = ({ values, @@ -180,7 +183,7 @@ export const Occupation = ({ errors, setFieldValue, occupation_enum, -}: TOccupation) => ( +}: Partial> & TOccupation) => ( {({ field }: FormikValues) => ( @@ -190,10 +193,10 @@ export const Occupation = ({ is_align_text_left name={field.name} list={occupation_enum} - value={values.occupation} + value={values?.occupation} onChange={handleChange} handleBlur={handleBlur} - error={touched.occupation && errors.occupation} + error={touched?.occupation && errors?.occupation} list_portal_id='modal_root' {...field} required @@ -205,11 +208,15 @@ export const Occupation = ({ name={field.name} label={localize('Occupation')} list_items={occupation_enum} - value={values.occupation} - error={touched.occupation && errors.occupation} + value={values?.occupation} + error={touched?.occupation && errors?.occupation} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('occupation', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('occupation', e.target.value, true); + } }} {...field} required @@ -222,7 +229,7 @@ export const Occupation = ({ type TSourceOfWealth = { source_of_wealth_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const SourceOfWealth = ({ values, @@ -232,7 +239,7 @@ export const SourceOfWealth = ({ errors, setFieldValue, source_of_wealth_enum, -}: TSourceOfWealth) => ( +}: Partial> & TSourceOfWealth) => ( {({ field }: FormikValues) => ( @@ -242,10 +249,10 @@ export const SourceOfWealth = ({ is_align_text_left name={field.name} list={source_of_wealth_enum} - value={values.source_of_wealth} + value={values?.source_of_wealth} onChange={handleChange} handleBlur={handleBlur} - error={touched.source_of_wealth && errors.source_of_wealth} + error={touched?.source_of_wealth && errors?.source_of_wealth} list_portal_id='modal_root' {...field} required @@ -257,11 +264,15 @@ export const SourceOfWealth = ({ name={field.name} label={localize('Source of wealth')} list_items={source_of_wealth_enum} - value={values.source_of_wealth} - error={touched.source_of_wealth && errors.source_of_wealth} + value={values?.source_of_wealth} + error={touched?.source_of_wealth && errors?.source_of_wealth} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('source_of_wealth', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('source_of_wealth', e.target.value, true); + } }} {...field} required @@ -274,7 +285,7 @@ export const SourceOfWealth = ({ type TEducationLevel = { education_level_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const EducationLevel = ({ values, @@ -284,7 +295,7 @@ export const EducationLevel = ({ errors, setFieldValue, education_level_enum, -}: TEducationLevel) => ( +}: Partial> & TEducationLevel) => ( {({ field }: FormikValues) => ( @@ -294,10 +305,10 @@ export const EducationLevel = ({ is_align_text_left name={field.name} list={education_level_enum} - value={values.education_level} + value={values?.education_level} onChange={handleChange} handleBlur={handleBlur} - error={touched.education_level && errors.education_level} + error={touched?.education_level && errors?.education_level} list_portal_id='modal_root' {...field} required @@ -309,11 +320,15 @@ export const EducationLevel = ({ name={field.name} label={localize('Level of education')} list_items={education_level_enum} - value={values.education_level} - error={touched.education_level && errors.education_level} + value={values?.education_level} + error={touched?.education_level && errors?.education_level} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('education_level', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('education_level', e.target.value, true); + } }} {...field} required @@ -326,7 +341,7 @@ export const EducationLevel = ({ type TNetIncome = { net_income_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const NetIncome = ({ values, @@ -336,7 +351,7 @@ export const NetIncome = ({ errors, setFieldValue, net_income_enum, -}: TNetIncome) => ( +}: Partial> & TNetIncome) => ( {({ field }: FormikValues) => ( @@ -346,10 +361,10 @@ export const NetIncome = ({ is_align_text_left name={field.name} list={net_income_enum} - value={values.net_income} + value={values?.net_income} onChange={handleChange} handleBlur={handleBlur} - error={touched.net_income && errors.net_income} + error={touched?.net_income && errors?.net_income} list_portal_id='modal_root' {...field} required @@ -361,11 +376,15 @@ export const NetIncome = ({ name={field.name} label={localize('Net annual income')} list_items={net_income_enum} - value={values.net_income} - error={touched.net_income && errors.net_income} + value={values?.net_income} + error={touched?.net_income && errors?.net_income} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('net_income', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('net_income', e.target.value, true); + } }} {...field} required @@ -378,7 +397,7 @@ export const NetIncome = ({ type TEstimatedWorth = { estimated_worth_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const EstimatedWorth = ({ values, @@ -388,7 +407,7 @@ export const EstimatedWorth = ({ errors, setFieldValue, estimated_worth_enum, -}: TEstimatedWorth) => ( +}: Partial> & TEstimatedWorth) => ( {({ field }: FormikValues) => ( @@ -398,10 +417,10 @@ export const EstimatedWorth = ({ is_align_text_left name={field.name} list={estimated_worth_enum} - value={values.estimated_worth} + value={values?.estimated_worth} onChange={handleChange} handleBlur={handleBlur} - error={touched.estimated_worth && errors.estimated_worth} + error={touched?.estimated_worth && errors?.estimated_worth} list_portal_id='modal_root' {...field} required @@ -413,11 +432,15 @@ export const EstimatedWorth = ({ name={field.name} label={localize('Estimated net worth')} list_items={estimated_worth_enum} - value={values.estimated_worth} - error={touched.estimated_worth && errors.estimated_worth} + value={values?.estimated_worth} + error={touched?.estimated_worth && errors?.estimated_worth} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('estimated_worth', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('estimated_worth', e.target.value, true); + } }} {...field} required @@ -430,7 +453,7 @@ export const EstimatedWorth = ({ type TAccountTurnover = { account_turnover_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const AccountTurnover = ({ values, @@ -440,7 +463,7 @@ export const AccountTurnover = ({ errors, setFieldValue, account_turnover_enum, -}: TAccountTurnover) => ( +}: Partial> & TAccountTurnover) => ( {({ field }: FormikValues) => ( @@ -450,10 +473,10 @@ export const AccountTurnover = ({ is_align_text_left name={field.name} list={account_turnover_enum} - value={values.account_turnover} + value={values?.account_turnover} onChange={handleChange} handleBlur={handleBlur} - error={touched.account_turnover && errors.account_turnover} + error={touched?.account_turnover && errors?.account_turnover} list_portal_id='modal_root' {...field} required @@ -465,11 +488,15 @@ export const AccountTurnover = ({ name={field.name} label={localize('Anticipated annual turnover')} list_items={account_turnover_enum} - value={values.account_turnover} - error={touched.account_turnover && errors.account_turnover} + value={values?.account_turnover} + error={touched?.account_turnover && errors?.account_turnover} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('account_turnover', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('account_turnover', e.target.value, true); + } }} {...field} required @@ -482,7 +509,7 @@ export const AccountTurnover = ({ type TForexTradingExperience = { forex_trading_experience_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const ForexTradingExperience = ({ values, @@ -492,7 +519,7 @@ export const ForexTradingExperience = ({ errors, setFieldValue, forex_trading_experience_enum, -}: TForexTradingExperience) => ( +}: Partial> & TForexTradingExperience) => ( {({ field }: FormikValues) => ( @@ -502,10 +529,10 @@ export const ForexTradingExperience = ({ is_align_text_left name={field.name} list={forex_trading_experience_enum} - value={values.forex_trading_experience} + value={values?.forex_trading_experience} onChange={handleChange} handleBlur={handleBlur} - error={touched.forex_trading_experience && errors.forex_trading_experience} + error={touched?.forex_trading_experience && errors?.forex_trading_experience} list_portal_id='modal_root' {...field} required @@ -517,11 +544,15 @@ export const ForexTradingExperience = ({ name={field.name} label={localize('Forex trading experience')} list_items={forex_trading_experience_enum} - value={values.forex_trading_experience} - error={touched.forex_trading_experience && errors.forex_trading_experience} + value={values?.forex_trading_experience} + error={touched?.forex_trading_experience && errors?.forex_trading_experience} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('forex_trading_experience', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('forex_trading_experience', e.target.value, true); + } }} {...field} required @@ -534,7 +565,7 @@ export const ForexTradingExperience = ({ type TForexTradingFrequency = { forex_trading_frequency_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const ForexTradingFrequency = ({ values, @@ -544,7 +575,7 @@ export const ForexTradingFrequency = ({ errors, setFieldValue, forex_trading_frequency_enum, -}: TForexTradingFrequency) => ( +}: Partial> & TForexTradingFrequency) => ( {({ field }: FormikValues) => ( @@ -554,10 +585,10 @@ export const ForexTradingFrequency = ({ is_align_text_left name={field.name} list={forex_trading_frequency_enum} - value={values.forex_trading_frequency} + value={values?.forex_trading_frequency} onChange={handleChange} handleBlur={handleBlur} - error={touched.forex_trading_frequency && errors.forex_trading_frequency} + error={touched?.forex_trading_frequency && errors?.forex_trading_frequency} list_portal_id='modal_root' {...field} required @@ -569,11 +600,15 @@ export const ForexTradingFrequency = ({ name={field.name} label={localize('Forex trading frequency')} list_items={forex_trading_frequency_enum} - value={values.forex_trading_frequency} - error={touched.forex_trading_frequency && errors.forex_trading_frequency} + value={values?.forex_trading_frequency} + error={touched?.forex_trading_frequency && errors?.forex_trading_frequency} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('forex_trading_frequency', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('forex_trading_frequency', e.target.value, true); + } }} {...field} required @@ -586,7 +621,7 @@ export const ForexTradingFrequency = ({ type TBinaryOptionsTradingExperience = { binary_options_trading_experience_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const BinaryOptionsTradingExperience = ({ values, @@ -596,7 +631,7 @@ export const BinaryOptionsTradingExperience = ({ errors, setFieldValue, binary_options_trading_experience_enum, -}: TBinaryOptionsTradingExperience) => ( +}: Partial> & TBinaryOptionsTradingExperience) => ( {({ field }: FormikValues) => ( @@ -606,10 +641,10 @@ export const BinaryOptionsTradingExperience = ({ is_align_text_left name={field.name} list={binary_options_trading_experience_enum} - value={values.binary_options_trading_experience} + value={values?.binary_options_trading_experience} onChange={handleChange} handleBlur={handleBlur} - error={touched.binary_options_trading_experience && errors.binary_options_trading_experience} + error={touched?.binary_options_trading_experience && errors?.binary_options_trading_experience} list_portal_id='modal_root' {...field} required @@ -621,11 +656,15 @@ export const BinaryOptionsTradingExperience = ({ name={field.name} label={localize('Digital options trading experience')} list_items={binary_options_trading_experience_enum} - value={values.binary_options_trading_experience} - error={touched.binary_options_trading_experience && errors.binary_options_trading_experience} + value={values?.binary_options_trading_experience} + error={touched?.binary_options_trading_experience && errors?.binary_options_trading_experience} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('binary_options_trading_experience', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('binary_options_trading_experience', e.target.value, true); + } }} {...field} required @@ -638,7 +677,7 @@ export const BinaryOptionsTradingExperience = ({ type TBinaryOptionsTradingFrequency = { binary_options_trading_frequency_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const BinaryOptionsTradingFrequency = ({ values, @@ -648,7 +687,7 @@ export const BinaryOptionsTradingFrequency = ({ errors, setFieldValue, binary_options_trading_frequency_enum, -}: TBinaryOptionsTradingFrequency) => ( +}: Partial> & TBinaryOptionsTradingFrequency) => ( {({ field }: FormikValues) => ( @@ -658,10 +697,10 @@ export const BinaryOptionsTradingFrequency = ({ is_align_text_left name={field.name} list={binary_options_trading_frequency_enum} - value={values.binary_options_trading_frequency} + value={values?.binary_options_trading_frequency} onChange={handleChange} handleBlur={handleBlur} - error={touched.binary_options_trading_frequency && errors.binary_options_trading_frequency} + error={touched?.binary_options_trading_frequency && errors?.binary_options_trading_frequency} list_portal_id='modal_root' {...field} required @@ -673,11 +712,15 @@ export const BinaryOptionsTradingFrequency = ({ name={field.name} label={localize('Digital options trading frequency')} list_items={binary_options_trading_frequency_enum} - value={values.binary_options_trading_frequency} - error={touched.binary_options_trading_frequency && errors.binary_options_trading_frequency} + value={values?.binary_options_trading_frequency} + error={touched?.binary_options_trading_frequency && errors?.binary_options_trading_frequency} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('binary_options_trading_frequency', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('binary_options_trading_frequency', e.target.value, true); + } }} {...field} required @@ -690,7 +733,7 @@ export const BinaryOptionsTradingFrequency = ({ type TCFDTradingExperience = { cfd_trading_experience_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const CFDTradingExperience = ({ values, @@ -700,7 +743,7 @@ export const CFDTradingExperience = ({ errors, setFieldValue, cfd_trading_experience_enum, -}: TCFDTradingExperience) => ( +}: Partial> & TCFDTradingExperience) => ( {({ field }: FormikValues) => ( @@ -710,10 +753,10 @@ export const CFDTradingExperience = ({ is_align_text_left name={field.name} list={cfd_trading_experience_enum} - value={values.cfd_trading_experience} + value={values?.cfd_trading_experience} onChange={handleChange} handleBlur={handleBlur} - error={touched.cfd_trading_experience && errors.cfd_trading_experience} + error={touched?.cfd_trading_experience && errors?.cfd_trading_experience} list_portal_id='modal_root' {...field} required @@ -725,11 +768,15 @@ export const CFDTradingExperience = ({ name={field.name} label={localize('CFD trading experience')} list_items={cfd_trading_experience_enum} - value={values.cfd_trading_experience} - error={touched.cfd_trading_experience && errors.cfd_trading_experience} + value={values?.cfd_trading_experience} + error={touched?.cfd_trading_experience && errors?.cfd_trading_experience} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('cfd_trading_experience', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('cfd_trading_experience', e.target.value, true); + } }} {...field} required @@ -742,7 +789,7 @@ export const CFDTradingExperience = ({ type TCFDTradingFrequency = { cfd_trading_frequency_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const CFDTradingFrequency = ({ values, @@ -752,7 +799,7 @@ export const CFDTradingFrequency = ({ errors, setFieldValue, cfd_trading_frequency_enum, -}: TCFDTradingFrequency) => ( +}: Partial> & TCFDTradingFrequency) => ( {({ field }: FormikValues) => ( @@ -762,10 +809,10 @@ export const CFDTradingFrequency = ({ is_align_text_left name={field.name} list={cfd_trading_frequency_enum} - value={values.cfd_trading_frequency} + value={values?.cfd_trading_frequency} onChange={handleChange} handleBlur={handleBlur} - error={touched.cfd_trading_frequency && errors.cfd_trading_frequency} + error={touched?.cfd_trading_frequency && errors?.cfd_trading_frequency} list_portal_id='modal_root' {...field} required @@ -777,11 +824,15 @@ export const CFDTradingFrequency = ({ name={field.name} label={localize('CFD trading frequency')} list_items={cfd_trading_frequency_enum} - value={values.cfd_trading_frequency} - error={touched.cfd_trading_frequency && errors.cfd_trading_frequency} + value={values?.cfd_trading_frequency} + error={touched?.cfd_trading_frequency && errors?.cfd_trading_frequency} onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('cfd_trading_frequency', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('cfd_trading_frequency', e.target.value, true); + } }} {...field} required @@ -794,7 +845,7 @@ export const CFDTradingFrequency = ({ type TOtherInstrumentsTradingExperience = { other_instruments_trading_experience_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const OtherInstrumentsTradingExperience = ({ values, @@ -804,7 +855,7 @@ export const OtherInstrumentsTradingExperience = ({ errors, setFieldValue, other_instruments_trading_experience_enum, -}: TOtherInstrumentsTradingExperience) => ( +}: Partial> & TOtherInstrumentsTradingExperience) => ( {({ field }: FormikValues) => ( @@ -814,11 +865,12 @@ export const OtherInstrumentsTradingExperience = ({ is_align_text_left name={field.name} list={other_instruments_trading_experience_enum} - value={values.other_instruments_trading_experience} + value={values?.other_instruments_trading_experience} onChange={handleChange} handleBlur={handleBlur} error={ - touched.other_instruments_trading_experience && errors.other_instruments_trading_experience + touched?.other_instruments_trading_experience && + errors?.other_instruments_trading_experience } list_portal_id='modal_root' {...field} @@ -831,13 +883,18 @@ export const OtherInstrumentsTradingExperience = ({ name={field.name} label={localize('Experience with trading other financial instruments')} list_items={other_instruments_trading_experience_enum} - value={values.other_instruments_trading_experience} + value={values?.other_instruments_trading_experience} error={ - touched.other_instruments_trading_experience && errors.other_instruments_trading_experience + touched?.other_instruments_trading_experience && + errors?.other_instruments_trading_experience } onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('other_instruments_trading_experience', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('other_instruments_trading_experience', e.target.value, true); + } }} {...field} required @@ -850,7 +907,7 @@ export const OtherInstrumentsTradingExperience = ({ type TOtherInstrumentsTradingFrequency = { other_instruments_trading_frequency_enum: Array; -} & TCommonFinancialDetailsPartials; +}; export const OtherInstrumentsTradingFrequency = ({ values, @@ -860,7 +917,7 @@ export const OtherInstrumentsTradingFrequency = ({ errors, setFieldValue, other_instruments_trading_frequency_enum, -}: TOtherInstrumentsTradingFrequency) => ( +}: Partial> & TOtherInstrumentsTradingFrequency) => ( {({ field }: FormikValues) => ( @@ -870,11 +927,11 @@ export const OtherInstrumentsTradingFrequency = ({ is_align_text_left name={field.name} list={other_instruments_trading_frequency_enum} - value={values.other_instruments_trading_frequency} + value={values?.other_instruments_trading_frequency} onChange={handleChange} handleBlur={handleBlur} error={ - touched.other_instruments_trading_frequency && errors.other_instruments_trading_frequency + touched?.other_instruments_trading_frequency && errors?.other_instruments_trading_frequency } list_portal_id='modal_root' {...field} @@ -887,13 +944,17 @@ export const OtherInstrumentsTradingFrequency = ({ name={field.name} label={localize('Trading frequency in other financial instruments')} list_items={other_instruments_trading_frequency_enum} - value={values.other_instruments_trading_frequency} + value={values?.other_instruments_trading_frequency} error={ - touched.other_instruments_trading_frequency && errors.other_instruments_trading_frequency + touched?.other_instruments_trading_frequency && errors?.other_instruments_trading_frequency } onChange={(e: React.ChangeEvent) => { - handleChange(e); - setFieldValue('other_instruments_trading_frequency', e.target.value, true); + if (typeof handleChange === 'function') { + handleChange(e); + } + if (typeof setFieldValue === 'function') { + setFieldValue('other_instruments_trading_frequency', e.target.value, true); + } }} {...field} required From a87424c0cf1994ffd68d36dc08cf1447bc6beba5 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Fri, 11 Nov 2022 11:51:06 +0800 Subject: [PATCH 7/7] update Array to object[] --- .../financial-details-partials.tsx | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx index bfa8f3829785..ef06470daa09 100644 --- a/packages/account/src/Components/financial-details/financial-details-partials.tsx +++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx @@ -4,7 +4,7 @@ import { DesktopWrapper, MobileWrapper, Dropdown, SelectNative } from '@deriv/co import { localize } from '@deriv/translations'; type TEmploymentStatus = { - employment_status_enum: Array; + employment_status_enum: object[]; }; export const EmploymentStatus = ({ @@ -60,7 +60,7 @@ export const EmploymentStatus = ({ ); type TIncomeSource = { - income_source_enum: Array; + income_source_enum: object[]; }; export const IncomeSource = ({ @@ -116,7 +116,7 @@ export const IncomeSource = ({ ); type TEmploymentIndustry = { - employment_industry_enum: Array; + employment_industry_enum: object[]; }; export const EmploymentIndustry = ({ @@ -172,7 +172,7 @@ export const EmploymentIndustry = ({ ); type TOccupation = { - occupation_enum: Array; + occupation_enum: object[]; }; export const Occupation = ({ @@ -228,7 +228,7 @@ export const Occupation = ({ ); type TSourceOfWealth = { - source_of_wealth_enum: Array; + source_of_wealth_enum: object[]; }; export const SourceOfWealth = ({ @@ -284,7 +284,7 @@ export const SourceOfWealth = ({ ); type TEducationLevel = { - education_level_enum: Array; + education_level_enum: object[]; }; export const EducationLevel = ({ @@ -340,7 +340,7 @@ export const EducationLevel = ({ ); type TNetIncome = { - net_income_enum: Array; + net_income_enum: object[]; }; export const NetIncome = ({ @@ -396,7 +396,7 @@ export const NetIncome = ({ ); type TEstimatedWorth = { - estimated_worth_enum: Array; + estimated_worth_enum: object[]; }; export const EstimatedWorth = ({ @@ -452,7 +452,7 @@ export const EstimatedWorth = ({ ); type TAccountTurnover = { - account_turnover_enum: Array; + account_turnover_enum: object[]; }; export const AccountTurnover = ({ @@ -508,7 +508,7 @@ export const AccountTurnover = ({ ); type TForexTradingExperience = { - forex_trading_experience_enum: Array; + forex_trading_experience_enum: object[]; }; export const ForexTradingExperience = ({ @@ -564,7 +564,7 @@ export const ForexTradingExperience = ({ ); type TForexTradingFrequency = { - forex_trading_frequency_enum: Array; + forex_trading_frequency_enum: object[]; }; export const ForexTradingFrequency = ({ @@ -620,7 +620,7 @@ export const ForexTradingFrequency = ({ ); type TBinaryOptionsTradingExperience = { - binary_options_trading_experience_enum: Array; + binary_options_trading_experience_enum: object[]; }; export const BinaryOptionsTradingExperience = ({ @@ -676,7 +676,7 @@ export const BinaryOptionsTradingExperience = ({ ); type TBinaryOptionsTradingFrequency = { - binary_options_trading_frequency_enum: Array; + binary_options_trading_frequency_enum: object[]; }; export const BinaryOptionsTradingFrequency = ({ @@ -732,7 +732,7 @@ export const BinaryOptionsTradingFrequency = ({ ); type TCFDTradingExperience = { - cfd_trading_experience_enum: Array; + cfd_trading_experience_enum: object[]; }; export const CFDTradingExperience = ({ @@ -788,7 +788,7 @@ export const CFDTradingExperience = ({ ); type TCFDTradingFrequency = { - cfd_trading_frequency_enum: Array; + cfd_trading_frequency_enum: object[]; }; export const CFDTradingFrequency = ({ @@ -844,7 +844,7 @@ export const CFDTradingFrequency = ({ ); type TOtherInstrumentsTradingExperience = { - other_instruments_trading_experience_enum: Array; + other_instruments_trading_experience_enum: object[]; }; export const OtherInstrumentsTradingExperience = ({ @@ -906,7 +906,7 @@ export const OtherInstrumentsTradingExperience = ({ ); type TOtherInstrumentsTradingFrequency = { - other_instruments_trading_frequency_enum: Array; + other_instruments_trading_frequency_enum: object[]; }; export const OtherInstrumentsTradingFrequency = ({