From 1d7b180423fb8c25c5858f7ae6d78cc3bc672885 Mon Sep 17 00:00:00 2001 From: likhith Date: Fri, 27 Sep 2024 17:03:23 +0400 Subject: [PATCH 1/2] chore: incorporated changes to Financial assessment --- packages/account/package.json | 2 +- .../forms/form-fields/employment-status.tsx | 7 +- .../tax-indentification-number.tsx | 4 + .../forms/form-fields/tax-residence.tsx | 5 ++ .../employment-tax-details-container.tsx | 25 ++++++- .../NavigateToPersonalDetails.tsx | 74 +++++++++++++++++++ .../financial-assessment.tsx | 5 ++ .../navigate-to-personal-details.scss | 53 +++++++++++++ .../PersonalDetails/personal-details-form.tsx | 6 +- packages/bot-web-ui/package.json | 2 +- packages/core/package.json | 2 +- packages/shared/package.json | 2 +- packages/trader/package.json | 2 +- packages/wallets/package.json | 2 +- 14 files changed, 178 insertions(+), 13 deletions(-) create mode 100644 packages/account/src/Sections/Assessment/FinancialAssessment/NavigateToPersonalDetails.tsx create mode 100644 packages/account/src/Sections/Assessment/FinancialAssessment/navigate-to-personal-details.scss diff --git a/packages/account/package.json b/packages/account/package.json index 0c830f9b622f..7c3f0e6133f3 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -38,7 +38,7 @@ "@deriv-com/quill-ui": "1.16.18", "@deriv/components": "^1.0.0", "@deriv/hooks": "^1.0.0", - "@deriv/quill-icons": "1.23.3", + "@deriv/quill-icons": "2.1.0", "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", diff --git a/packages/account/src/Components/forms/form-fields/employment-status.tsx b/packages/account/src/Components/forms/form-fields/employment-status.tsx index 8513178b4ec5..1308342f46db 100644 --- a/packages/account/src/Components/forms/form-fields/employment-status.tsx +++ b/packages/account/src/Components/forms/form-fields/employment-status.tsx @@ -4,13 +4,15 @@ import { Dropdown, SelectNative } from '@deriv/components'; import { useTranslations } from '@deriv-com/translations'; import { getEmploymentStatusList } from '../../../Constants/financial-information-list'; import { useDevice } from '@deriv-com/ui'; +import clsx from 'clsx'; type TEmploymentStatusFieldProps = { required: boolean; is_disabled: boolean; + fieldFocused?: boolean; }; -const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusFieldProps) => { +const EmploymentStatusField = ({ required, is_disabled, fieldFocused }: TEmploymentStatusFieldProps) => { const { isDesktop } = useDevice(); const { localize } = useTranslations(); @@ -21,7 +23,6 @@ const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusField {isDesktop ? ( ) : ( )} diff --git a/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx b/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx index 03d87e390dc4..6f2366b1786a 100644 --- a/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx +++ b/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx @@ -3,6 +3,7 @@ import FormInputField from './form-input-field'; import { Popover } from '@deriv/components'; import { OECD_TIN_FORMAT_URL } from '../../../Constants/external-urls'; import { useDevice } from '@deriv-com/ui'; +import clsx from 'clsx'; type TTaxIdentificationNumberFieldProps = { required?: boolean; @@ -10,6 +11,7 @@ type TTaxIdentificationNumberFieldProps = { is_tin_popover_open: boolean; setIsTinPopoverOpen: (is_open: boolean) => void; setIsTaxResidencePopoverOpen: (is_open: boolean) => void; + fieldFocused?: boolean; }; const TaxIdentificationNumberField = ({ @@ -18,6 +20,7 @@ const TaxIdentificationNumberField = ({ setIsTinPopoverOpen, setIsTaxResidencePopoverOpen, disabled, + fieldFocused, }: TTaxIdentificationNumberFieldProps) => { const { localize } = useTranslations(); @@ -32,6 +35,7 @@ const TaxIdentificationNumberField = ({ data-testid='tax_identification_number' disabled={disabled} required={required} + className={clsx({ 'focus-field': fieldFocused })} />
void; is_tax_residence_popover_open: boolean; disabled: boolean; + fieldFocused?: boolean; }; const TaxResidenceField = ({ @@ -24,6 +26,7 @@ const TaxResidenceField = ({ setIsTinPopoverOpen, is_tax_residence_popover_open, disabled, + fieldFocused, }: TTaxResidenceFieldProps) => { const { data: residence_list } = useResidenceList(); const { isDesktop } = useDevice(); @@ -51,6 +54,7 @@ const TaxResidenceField = ({ data-testid='tax_residence' disabled={disabled} required={required} + className={clsx({ 'focus-field': fieldFocused })} /> ) : ( )}
void; tin_validation_config: TinValidations; id?: string; + should_focus_fields?: boolean; }; const EmploymentTaxDetailsContainer = observer( @@ -31,6 +32,7 @@ const EmploymentTaxDetailsContainer = observer( should_display_long_message, tin_validation_config, handleChange, + should_focus_fields, }: TEmploymentTaxDetailsContainerProps) => { const { values, setFieldValue, touched, errors, setValues } = useFormikContext(); const { isDesktop } = useDevice(); @@ -38,6 +40,8 @@ const EmploymentTaxDetailsContainer = observer( const { localize } = useTranslations(); const { client } = useStore(); + const { is_virtual, account_settings } = client; + const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = useState(false); const [is_tin_popover_open, setIsTinPopoverOpen] = useState(false); @@ -118,22 +122,26 @@ const EmploymentTaxDetailsContainer = observer( const { tin_employment_status_bypass } = tin_validation_config; - const is_tin_required = !client.is_virtual && !tin_employment_status_bypass?.includes(values.employment_status); + const is_tin_required = !is_virtual && !tin_employment_status_bypass?.includes(values.employment_status); const should_show_no_tax_details_checkbox = (tin_employment_status_bypass?.includes(values.employment_status) && !!values.tax_residence) || Boolean(values.tin_skipped); const should_show_tax_confirm_checkbox = - !client.account_settings.tax_identification_number || touched.tax_identification_number; + !account_settings.tax_identification_number || touched.tax_identification_number; const isFieldDisabled = (field_name: string) => isFieldImmutable(field_name, editable_fields); return (
- + - {!client.account_settings.tax_identification_number && should_show_no_tax_details_checkbox && ( + {!account_settings.tax_identification_number && should_show_no_tax_details_checkbox && (
@@ -174,6 +185,12 @@ const EmploymentTaxDetailsContainer = observer( setIsTinPopoverOpen={setIsTinPopoverOpen} setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen} required={(should_display_long_message && !values.tin_skipped) || is_tin_required} + fieldFocused={ + should_focus_fields && + values.employment_status && + !values.tin_skipped && + (should_display_long_message || is_tin_required) + } />
{should_show_tax_confirm_checkbox && ( diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/NavigateToPersonalDetails.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/NavigateToPersonalDetails.tsx new file mode 100644 index 000000000000..474f32234465 --- /dev/null +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/NavigateToPersonalDetails.tsx @@ -0,0 +1,74 @@ +import { Button, Text } from '@deriv/components'; +import { Localize, useTranslations } from '@deriv-com/translations'; +import { useDevice } from '@deriv-com/ui'; +import { useHistory } from 'react-router'; +import { routes } from '@deriv/shared'; +import FormFooter from '../../../Components/form-footer'; +import { DerivLightOrdersDefaultIcon } from '@deriv/quill-icons'; +import { observer, useStore } from '@deriv/stores'; +import './navigate-to-personal-details.scss'; + +const NavigateToPersonalDetails = observer(() => { + const { localize } = useTranslations(); + const { isDesktop } = useDevice(); + const { ui, client } = useStore(); + const history = useHistory(); + + const { account_settings } = client; + + const handleOnclick = () => { + let field_to_scroll; + + if (!account_settings.account_opening_reason) { + field_to_scroll = 'account-opening-reason'; + } else { + field_to_scroll = 'employment-tax-section'; + } + + ui.setFieldRefToFocus(field_to_scroll); + history.push(routes.personal_details); + }; + + const icon_size = isDesktop ? { height: '200px', width: '200px' } : { height: '124px', width: '124px' }; + + return ( +
+
+ + + + +
+ {isDesktop ? ( +
+
+ ) : ( + +
+ ); +}); + +export default NavigateToPersonalDetails; diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index a98ed96d183e..fc57867bc199 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -40,6 +40,7 @@ import { getFormattedOccupationList } from 'Configs/financial-details-config'; import { TFinancialInformationForm } from 'Types'; import { EmploymentStatusField } from 'Components/forms/form-fields'; import { useDevice } from '@deriv-com/ui'; +import NavigateToPersonalDetails from './NavigateToPersonalDetails'; type TConfirmationPage = { toggleModal: (prop: boolean) => void; @@ -390,6 +391,10 @@ const FinancialAssessment = observer(() => { return form_data; }; + if (!employment_status) { + return ; + } + return ( {({ diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/navigate-to-personal-details.scss b/packages/account/src/Sections/Assessment/FinancialAssessment/navigate-to-personal-details.scss new file mode 100644 index 000000000000..64ae30a15339 --- /dev/null +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/navigate-to-personal-details.scss @@ -0,0 +1,53 @@ +.navigate-to-personal-details { + display: flex; + flex-direction: column; + + @include desktop-screen { + position: relative; + top: 10%; + row-gap: 2.6rem; + width: 50%; + height: 100%; + align-self: center; + } + + &__body { + display: flex; + flex-direction: column; + align-items: center; + + @include mobile-or-tablet-screen { + margin-top: 45%; + } + + &--text { + @include desktop-screen { + line-height: 3rem; + } + + @include mobile-or-tablet-screen { + line-height: 2.4rem; + padding: 0 3.2rem; + } + } + + @include desktop-screen { + row-gap: 2.6rem; + } + + @include mobile-or-tablet-screen { + row-gap: 1.6rem; + flex-grow: 1; + } + } + + &__footer { + width: 100%; + display: flex; + justify-content: center; + + &--layout { + padding: 1.6rem; + } + } +} diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx index c863558655be..096a73fece3e 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx @@ -439,7 +439,10 @@ const PersonalDetailsForm = observer(() => { Boolean(account_settings?.account_opening_reason) } required - fieldFocused={field_ref_to_focus === 'account-opening-reason'} + fieldFocused={ + !account_settings.account_opening_reason && + field_ref_to_focus === 'account-opening-reason' + } /> )} @@ -452,6 +455,7 @@ const PersonalDetailsForm = observer(() => { handleChange={mutate} tin_validation_config={tin_validation_config} should_display_long_message={is_mf_account} + should_focus_fields={field_ref_to_focus === 'employment-tax-section'} /> {!is_virtual && ( diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json index 8bbd96d473f9..54d0cd6b9f93 100644 --- a/packages/bot-web-ui/package.json +++ b/packages/bot-web-ui/package.json @@ -81,7 +81,7 @@ "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", - "@deriv/quill-icons": "1.23.3", + "@deriv/quill-icons": "2.1.0", "blockly": "^10.4.3", "@testing-library/user-event": "^13.5.0", "@types/react-router-dom": "^5.1.6", diff --git a/packages/core/package.json b/packages/core/package.json index 977c770fab46..482e05204c98 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -114,7 +114,7 @@ "@deriv/hooks": "^1.0.0", "@deriv/p2p": "^0.7.3", "@deriv/quill-design": "^1.3.2", - "@deriv/quill-icons": "1.23.3", + "@deriv/quill-icons": "2.1.0", "@deriv/reports": "^1.0.0", "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", diff --git a/packages/shared/package.json b/packages/shared/package.json index eef00a58756c..785be27de973 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@deriv-com/analytics": "1.14.0", - "@deriv/quill-icons": "1.23.3", + "@deriv/quill-icons": "2.1.0", "@deriv/api-types": "1.0.172", "@deriv/translations": "^1.0.0", "@deriv-com/utils": "^0.0.34", diff --git a/packages/trader/package.json b/packages/trader/package.json index e0409bbede4c..7e2e2c57a0f8 100644 --- a/packages/trader/package.json +++ b/packages/trader/package.json @@ -102,7 +102,7 @@ "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", "@deriv/utils": "^1.0.0", - "@deriv/quill-icons": "1.23.3", + "@deriv/quill-icons": "2.1.0", "@lottiefiles/dotlottie-react": "0.7.2", "@types/react-loadable": "^5.5.6", "classnames": "^2.2.6", diff --git a/packages/wallets/package.json b/packages/wallets/package.json index 6b0457875f9f..3a80f164bd9f 100644 --- a/packages/wallets/package.json +++ b/packages/wallets/package.json @@ -19,7 +19,7 @@ "@deriv-com/ui": "1.35.0", "@deriv-com/utils": "^0.0.34", "@deriv/api-v2": "^1.0.0", - "@deriv/quill-icons": "1.23.3", + "@deriv/quill-icons": "2.1.0", "@deriv/utils": "^1.0.0", "@tanstack/react-table": "^8.10.3", "@zxcvbn-ts/core": "^3.0.4", From 1c843652f7ab6eeedb9bc6c106cbddde12ae4918 Mon Sep 17 00:00:00 2001 From: likhith Date: Fri, 27 Sep 2024 17:11:35 +0400 Subject: [PATCH 2/2] fix: updated render condition --- .../FinancialAssessment/financial-assessment.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx index fc57867bc199..60b43d63a4f7 100644 --- a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx +++ b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx @@ -195,6 +195,7 @@ const FinancialAssessment = observer(() => { updateAccountStatus, is_authentication_needed, is_financial_information_incomplete, + account_settings, } = client; const { isMobile, isTablet, isDesktop } = useDevice(); const { platform, routeBackInApp } = common; @@ -391,7 +392,12 @@ const FinancialAssessment = observer(() => { return form_data; }; - if (!employment_status) { + if ( + !employment_status || + !account_settings.account_opening_reason || + !account_settings.tax_residence || + !account_settings.tax_identification_number + ) { return ; }