From b4d25e4a8a0e4f1cbda4a6df7652911c7315e1f4 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Fri, 24 Mar 2023 15:40:42 +0400 Subject: [PATCH 01/20] feat: :sparkles: incorporated FA to MF real account creation --- .../financial-details/financial-details.jsx | 109 ++++------------ .../form-sub-header/form-sub-header.tsx | 42 +++--- .../personal-details/personal-details.jsx | 73 ++--------- .../src/Configs/financial-details-config.js | 43 +------ .../src/Configs/personal-details-config.js | 8 +- packages/account/src/Containers/account.jsx | 20 ++- .../financial-assessment.jsx | 55 ++++---- .../PersonalDetails/personal-details.jsx | 120 ++++-------------- .../withdrawal/disable-withdrawal-modal.jsx | 18 --- .../Layout/Header/toggle-menu-drawer.jsx | 26 ++-- .../RealAccountSignup/account-wizard-form.js | 16 ++- .../RealAccountSignup/account-wizard.jsx | 20 +-- .../Containers/app-notification-messages.jsx | 20 +-- packages/core/src/Stores/client-store.js | 17 +-- .../core/src/Stores/notification-store.js | 32 ++--- packages/core/src/sass/details-form.scss | 10 ++ packages/stores/src/mockStore.ts | 3 +- packages/stores/types.ts | 6 +- 18 files changed, 210 insertions(+), 428 deletions(-) delete mode 100644 packages/cashier/src/pages/withdrawal/disable-withdrawal-modal.jsx diff --git a/packages/account/src/Components/financial-details/financial-details.jsx b/packages/account/src/Components/financial-details/financial-details.jsx index f4942f8c960f..c5d033d161be 100644 --- a/packages/account/src/Components/financial-details/financial-details.jsx +++ b/packages/account/src/Components/financial-details/financial-details.jsx @@ -1,29 +1,28 @@ -import { Formik } from 'formik'; -import React from 'react'; -import { AutoHeightWrapper, Div100vhContainer, FormSubmitButton, Modal, ThemedScrollbars } from '@deriv/components'; - -import { localize } from '@deriv/translations'; -import { isDesktop, isMobile } from '@deriv/shared'; import { AccountTurnover, - BinaryOptionsTradingExperience, - BinaryOptionsTradingFrequency, - CFDTradingExperience, - CFDTradingFrequency, EducationLevel, EmploymentIndustry, EmploymentStatus, EstimatedWorth, - ForexTradingExperience, - ForexTradingFrequency, IncomeSource, NetIncome, Occupation, - OtherInstrumentsTradingExperience, - OtherInstrumentsTradingFrequency, SourceOfWealth, } from './financial-details-partials'; -import FormSubHeader from '../form-sub-header'; +import { + AutoHeightWrapper, + Div100vhContainer, + FormSubmitButton, + Modal, + Text, + ThemedScrollbars, +} from '@deriv/components'; +import { Localize, localize } from '@deriv/translations'; +import { isDesktop, isMobile } from '@deriv/shared'; + +import { Formik } from 'formik'; +import React from 'react'; +import classNames from 'classnames'; import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; const FinancialInformation = ({ @@ -39,11 +38,6 @@ const FinancialInformation = ({ account_turnover_enum, }) => ( - @@ -56,46 +50,6 @@ const FinancialInformation = ({ ); -const TradingExperience = ({ - shared_props, - forex_trading_experience_enum, - forex_trading_frequency_enum, - binary_options_trading_experience_enum, - binary_options_trading_frequency_enum, - cfd_trading_experience_enum, - cfd_trading_frequency_enum, - other_instruments_trading_experience_enum, - other_instruments_trading_frequency_enum, -}) => ( - - - - - - - - - - - -); - const FinancialDetails = props => { const handleCancel = values => { const current_step = props.getCurrentStep() - 1; @@ -132,12 +86,24 @@ const FinancialDetails = props => { {({ setRef, height }) => (
+ + + -
+
{ estimated_worth_enum={props.estimated_worth_enum} account_turnover_enum={props.account_turnover_enum} /> -
diff --git a/packages/account/src/Components/form-sub-header/form-sub-header.tsx b/packages/account/src/Components/form-sub-header/form-sub-header.tsx index 747613640a3a..9f2d626c3f94 100644 --- a/packages/account/src/Components/form-sub-header/form-sub-header.tsx +++ b/packages/account/src/Components/form-sub-header/form-sub-header.tsx @@ -1,34 +1,38 @@ -import classNames from 'classnames'; import React from 'react'; import { Text } from '@deriv/components'; +import classNames from 'classnames'; export type TFormSubHeader = { description?: string; subtitle?: string; - title: string; + title?: string; }; export const FormSubHeader = ({ description, subtitle, title }: TFormSubHeader) => { - const title_as_class = title.replace(/\s+/g, '-').toLowerCase(); + const title_as_class = title?.replace(/\s+/g, '-').toLowerCase(); return ( -
-
- - {title} - - {subtitle && ( - - {subtitle} - - )} + {(title || subtitle) && ( +
+
+ {title && ( + + {title} + + )} + {subtitle && ( + + {subtitle} + + )} +
-
+ )} {description && ( {description} diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx index 879855526a6f..1a0696d00cc3 100644 --- a/packages/account/src/Components/personal-details/personal-details.jsx +++ b/packages/account/src/Components/personal-details/personal-details.jsx @@ -1,30 +1,29 @@ -import { Formik, Field } from 'formik'; -import React from 'react'; import { - Modal, - Autocomplete, AutoHeightWrapper, + Autocomplete, Checkbox, - Dropdown, - DesktopWrapper, - MobileWrapper, DateOfBirthPicker, + DesktopWrapper, Div100vhContainer, + Dropdown, FormSubmitButton, Input, + MobileWrapper, + Modal, Popover, RadioGroup, SelectNative, - ThemedScrollbars, Text, + ThemedScrollbars, } from '@deriv/components'; +import { Field, Formik } from 'formik'; +import { Localize, localize } from '@deriv/translations'; +import { PlatformContext, getLegalEntityName, isDesktop, isMobile, routes, toMoment, validPhone } from '@deriv/shared'; + +import FormSubHeader from '../form-sub-header'; import { Link } from 'react-router-dom'; -import { localize, Localize } from '@deriv/translations'; -import { getLegalEntityName, isDesktop, isMobile, routes, toMoment, PlatformContext, validPhone } from '@deriv/shared'; -import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list'; +import React from 'react'; import { splitValidationResultTypes } from '../real-account-signup/helpers/utils'; -import FormSubHeader from '../form-sub-header'; -import classNames from 'classnames'; const DateOfBirthField = props => ( @@ -164,7 +163,7 @@ const PersonalDetails = ({ onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep); }} > - {({ handleSubmit, errors, setFieldValue, setFieldTouched, touched, values, handleChange, handleBlur }) => ( + {({ handleSubmit, errors, setFieldValue, touched, values, handleChange, handleBlur }) => ( {({ setRef, height }) => ( )} - {'employment_status' in props.value && ( -
- - - - - { - setFieldTouched('employment_status', true); - handleChange(e); - }} - /> - -
- )} {'tax_identification_confirm' in props.value && ( { return { account_turnover: { @@ -8,41 +9,11 @@ const financial_details_config = ({ financial_assessment }) => { default_value: financial_assessment?.account_turnover ?? '', rules: [['req', localize('Please select an option')]], }, - binary_options_trading_experience: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.binary_options_trading_experience ?? '', - rules: [['req', localize('Please select an option')]], - }, - binary_options_trading_frequency: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.binary_options_trading_frequency ?? '', - rules: [['req', localize('Please select an option')]], - }, - cfd_trading_experience: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.cfd_trading_experience ?? '', - rules: [['req', localize('Please select an option')]], - }, - cfd_trading_frequency: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.cfd_trading_frequency ?? '', - rules: [['req', localize('Please select an option')]], - }, education_level: { supported_in: ['maltainvest'], default_value: financial_assessment?.education_level ?? '', rules: [['req', localize('Please select an option')]], }, - forex_trading_experience: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.forex_trading_experience ?? '', - rules: [['req', localize('Please select an option')]], - }, - forex_trading_frequency: { - supported_in: ['maltainvest'], - default_value: financial_assessment?.forex_trading_frequency ?? '', - rules: [['req', localize('Please select an option')]], - }, employment_industry: { default_value: financial_assessment?.employment_industry ?? '', supported_in: ['maltainvest'], @@ -73,16 +44,6 @@ const financial_details_config = ({ financial_assessment }) => { supported_in: ['maltainvest'], rules: [['req', localize('Please select an option')]], }, - other_instruments_trading_experience: { - default_value: financial_assessment?.other_instruments_trading_experience ?? '', - supported_in: ['maltainvest'], - rules: [['req', localize('Please select an option')]], - }, - other_instruments_trading_frequency: { - default_value: financial_assessment?.other_instruments_trading_frequency ?? '', - supported_in: ['maltainvest'], - rules: [['req', localize('Please select an option')]], - }, source_of_wealth: { default_value: financial_assessment?.source_of_wealth ?? '', supported_in: ['maltainvest'], diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js index a994b15edf82..260244f6a640 100644 --- a/packages/account/src/Configs/personal-details-config.js +++ b/packages/account/src/Configs/personal-details-config.js @@ -1,4 +1,5 @@ -import { toMoment, getErrorMessages, generateValidationFunction, getDefaultFields, validLength } from '@deriv/shared'; +import { generateValidationFunction, getDefaultFields, getErrorMessages, toMoment, validLength } from '@deriv/shared'; + import { localize } from '@deriv/translations'; const personal_details_config = ({ residence_list, account_settings, is_appstore, real_account_signup_target }) => { @@ -133,11 +134,6 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore ], ], }, - employment_status: { - default_value: '', - supported_in: ['maltainvest'], - rules: [['req', localize('Employment status is required.')]], - }, tax_identification_confirm: { default_value: false, supported_in: ['maltainvest'], diff --git a/packages/account/src/Containers/account.jsx b/packages/account/src/Containers/account.jsx index aae57fba274d..b051ba7025a5 100644 --- a/packages/account/src/Containers/account.jsx +++ b/packages/account/src/Containers/account.jsx @@ -1,14 +1,16 @@ +import 'Styles/account.scss'; + +import { FadeWrapper, Icon, Loading, PageOverlay, Text, VerticalTab } from '@deriv/components'; +import { PlatformContext, getSelectedRoute, isMobile, matchRoute, routes as shared_routes } from '@deriv/shared'; + +import AccountLimitInfo from '../Sections/Security/AccountLimits/account-limits-info.jsx'; import PropTypes from 'prop-types'; import React from 'react'; -import { withRouter } from 'react-router-dom'; -import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text, Icon } from '@deriv/components'; -import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, PlatformContext } from '@deriv/shared'; -import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import { flatten } from '../Helpers/flatten'; -import AccountLimitInfo from '../Sections/Security/AccountLimits/account-limits-info.jsx'; -import 'Styles/account.scss'; +import { localize } from '@deriv/translations'; import { useHistory } from 'react-router'; +import { withRouter } from 'react-router-dom'; const AccountLogout = ({ logout, history }) => { return ( @@ -117,7 +119,6 @@ const Account = ({ is_logged_in, is_logging_in, is_pre_appstore, - is_risky_client, is_virtual, is_visible, location, @@ -150,8 +151,7 @@ const Account = ({ } if (route.path === shared_routes.financial_assessment) { - route.is_disabled = - is_virtual || (active_account_landing_company === 'maltainvest' && !is_risky_client); + route.is_disabled = is_virtual; } if (route.path === shared_routes.trading_assessment) { @@ -227,7 +227,6 @@ Account.propTypes = { is_logged_in: PropTypes.bool, is_logging_in: PropTypes.bool, is_pre_appstore: PropTypes.bool, - is_risky_client: PropTypes.bool, is_virtual: PropTypes.bool, is_visible: PropTypes.bool, location: PropTypes.object, @@ -246,7 +245,6 @@ export default connect(({ client, common, ui }) => ({ is_logged_in: client.is_logged_in, is_logging_in: client.is_logging_in, is_pre_appstore: client.is_pre_appstore, - is_risky_client: client.is_risky_client, is_virtual: client.is_virtual, is_visible: ui.is_account_settings_visible, logout: client.logout, diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx index 931a3ac2b8bd..35802fa67306 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.jsx @@ -1,50 +1,51 @@ -import classNames from 'classnames'; -import React from 'react'; -import { PropTypes } from 'prop-types'; -import { Formik } from 'formik'; -import { useHistory, withRouter } from 'react-router'; import { - FormSubmitErrorMessage, - Loading, Button, + DesktopWrapper, Dropdown, - Modal, + FormSubmitErrorMessage, Icon, - DesktopWrapper, + Loading, MobileWrapper, + Modal, SelectNative, Text, } from '@deriv/components'; -import { routes, isMobile, isDesktop, platforms, PlatformContext, WS } from '@deriv/shared'; -import { localize, Localize } from '@deriv/translations'; -import { connect } from 'Stores/connect'; -import LeaveConfirm from 'Components/leave-confirm'; -import IconMessageContent from 'Components/icon-message-content'; -import DemoMessage from 'Components/demo-message'; -import LoadErrorMessage from 'Components/load-error-message'; -import FormBody from 'Components/form-body'; -import FormBodySection from 'Components/form-body-section'; -import FormSubHeader from 'Components/form-sub-header'; -import FormFooter from 'Components/form-footer'; +import { Localize, localize } from '@deriv/translations'; +import { PlatformContext, WS, isDesktop, isMobile, platforms, routes } from '@deriv/shared'; import { getAccountTurnoverList, + getBinaryOptionsTradingExperienceList, + getBinaryOptionsTradingFrequencyList, + getCfdTradingExperienceList, + getCfdTradingFrequencyList, getEducationLevelList, getEmploymentIndustryList, getEmploymentStatusList, getEstimatedWorthList, + getForexTradingExperienceList, + getForexTradingFrequencyList, getIncomeSourceList, getNetIncomeList, getOccupationList, - getSourceOfWealthList, - getBinaryOptionsTradingExperienceList, - getBinaryOptionsTradingFrequencyList, - getCfdTradingExperienceList, - getCfdTradingFrequencyList, - getForexTradingExperienceList, - getForexTradingFrequencyList, getOtherInstrumentsTradingExperienceList, getOtherInstrumentsTradingFrequencyList, + getSourceOfWealthList, } from './financial-information-list'; +import { useHistory, withRouter } from 'react-router'; + +import DemoMessage from 'Components/demo-message'; +import FormBody from 'Components/form-body'; +import FormBodySection from 'Components/form-body-section'; +import FormFooter from 'Components/form-footer'; +import FormSubHeader from 'Components/form-sub-header'; +import { Formik } from 'formik'; +import IconMessageContent from 'Components/icon-message-content'; +import LeaveConfirm from 'Components/leave-confirm'; +import LoadErrorMessage from 'Components/load-error-message'; +import { PropTypes } from 'prop-types'; +import React from 'react'; +import classNames from 'classnames'; +import { connect } from 'Stores/connect'; const ConfirmationContent = ({ className }) => { return ( diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index b4da912be5b0..ac7c8c2b70a1 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -1,53 +1,52 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Formik, Field } from 'formik'; -import classNames from 'classnames'; import { Autocomplete, - Checkbox, Button, + Checkbox, + DateOfBirthPicker, + DesktopWrapper, FormSubmitErrorMessage, + HintBox, Input, - DesktopWrapper, - Dropdown, Loading, MobileWrapper, SelectNative, - DateOfBirthPicker, Text, useStateCallback, - HintBox, } from '@deriv/components'; +import { Field, Formik } from 'formik'; +import { Localize, localize } from '@deriv/translations'; import { - toMoment, - isMobile, - validAddress, - validPostCode, - validPhone, - validLetterSymbol, - validLength, + PlatformContext, + WS, + filterObjProperties, getBrandWebsiteName, getLocation, - removeObjProperties, - filterObjProperties, - PlatformContext, + isMobile, regex_checks, + removeObjProperties, routes, - WS, + toMoment, useIsMounted, + validAddress, + validLength, + validLetterSymbol, validName, + validPhone, + validPostCode, } from '@deriv/shared'; -import { Localize, localize } from '@deriv/translations'; -import { withRouter } from 'react-router'; -import { connect } from 'Stores/connect'; -import LeaveConfirm from 'Components/leave-confirm'; -import FormFooter from 'Components/form-footer'; + import FormBody from 'Components/form-body'; import FormBodySection from 'Components/form-body-section'; +import FormFooter from 'Components/form-footer'; import FormSubHeader from 'Components/form-sub-header'; +import LeaveConfirm from 'Components/leave-confirm'; import LoadErrorMessage from 'Components/load-error-message'; import POAAddressMismatchHintBox from 'Components/poa-address-mismatch-hint-box'; -import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list'; +import PropTypes from 'prop-types'; +import React from 'react'; +import classNames from 'classnames'; +import { connect } from 'Stores/connect'; +import { withRouter } from 'react-router'; const validate = (errors, values) => (fn, arr, err_msg) => { arr.forEach(field => { @@ -310,7 +309,7 @@ export const PersonalDetailsForm = ({ required_fields.push('citizen'); } if (is_mf) { - const required_tax_fields = ['tax_residence', 'tax_identification_number', 'employment_status']; + const required_tax_fields = ['tax_residence', 'tax_identification_number']; required_fields.push(...required_tax_fields); } @@ -475,7 +474,6 @@ export const PersonalDetailsForm = ({ 'allow_copiers', !is_mf && 'tax_residence', !is_mf && 'tax_identification_number', - !is_mf && 'employment_status', 'client_tnc_status', 'country_code', 'has_secret_answer', @@ -554,7 +552,7 @@ export const PersonalDetailsForm = ({ form_initial_values.tax_residence = ''; } if (!form_initial_values.tax_identification_number) form_initial_values.tax_identification_number = ''; - if (!form_initial_values.employment_status) form_initial_values.employment_status = ''; + // if (!form_initial_values.employment_status) form_initial_values.employment_status = ''; } const is_poa_verified = authentication_status?.document_status === 'verified'; @@ -892,32 +890,6 @@ export const PersonalDetailsForm = ({ )} - {/* Hide Account Opening Reason, uncomment block below to re-enable */} - {/*
*/} - {/* {account_opening_reason && is_fully_authenticated ? ( */} - {/* */} - {/* ) : ( */} - {/* */} - {/* )} */} - {/*
*/} {is_mf && ( @@ -986,43 +958,6 @@ export const PersonalDetailsForm = ({ /> )} - {'employment_status' in values && ( -
- - - - - { - setFieldTouched('employment_status', true); - handleChange(e); - }} - /> - -
- )} )} @@ -1307,7 +1242,6 @@ export const PersonalDetailsForm = ({ (is_mf && !values.tax_identification_number) || (!is_svg && errors.place_of_birth) || (!is_svg && !values.place_of_birth) || - // (errors.account_opening_reason || !values.account_opening_reason) || errors.address_line_1 || !values.address_line_1 || errors.address_line_2 || diff --git a/packages/cashier/src/pages/withdrawal/disable-withdrawal-modal.jsx b/packages/cashier/src/pages/withdrawal/disable-withdrawal-modal.jsx deleted file mode 100644 index 2590125a0384..000000000000 --- a/packages/cashier/src/pages/withdrawal/disable-withdrawal-modal.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Button, Modal, Text } from '@deriv/components'; -import { Localize, localize } from '@deriv/translations'; - -const DisableWithdrawalModal = ({ is_risky_client, onClick }) => ( - - - - - - - -