Skip to content

Commit

Permalink
kyc / wall-1551: CTA 'Next' button enhancement (#10010)
Browse files Browse the repository at this point in the history 
* feat: scroll to field with error component

* chore: account signup next behaviour improve

* chore: personal details on signup field order chnage

* chore: improving behavior for address details page in account signup flow

* chore: errors fields order

* chore: should_scroll_to_error_field flag added

* chore: custom hook for getting error field and scroll to it

* chore: remove one field error and hool

* chore: review comments

* chore: remove shaking, added error message

* chore: KYC-586/ client cannot add personal details after switching from I want to do it later

* fix: checkbox handling field

* chore: add chechbox to formik value

* fix: checkbox field name

* chore: eu account confirmation fix

* chore: description for scrolling component

* chore: mobile scroll to errors

* chore: handling status for checkbox

* chore: review comments

* chore: confirmation refactoring

* chore: error message, scroll for checkboxes

* trigger build

* chore: review comments

* fix: failing tests

* fix: unnecessary field removed from data to BE

* fix: placeholders color with error

* fix: red error placegolder for input

* fix: failing tests

---------

Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com>
  • Loading branch information
@yauheni-deriv @likhith-deriv
3 people committed Oct 26, 2023
1 parent 2a66d9b commit 3b114c9
Show file tree
Hide file tree
Showing 26 changed files with 341 additions and 360 deletions.
51 changes: 16 additions & 35 deletions packages/account/src/Components/address-details/address-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import {
Formik,
Field,
FormikProps,
FormikValues,
FormikErrors,
FormikHelpers,
FormikHandlers,
FormikState,
} from 'formik';
import { Formik, Field, FormikValues, FormikHelpers, FormikHandlers, FormikState } from 'formik';
import { StatesList } from '@deriv/api-types';
import {
Autocomplete,
Expand All @@ -29,6 +20,7 @@ import { getLocation } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { localize, Localize } from '@deriv/translations';
import { FormInputField } from '../forms/form-fields';
import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';

export type TAddressDetailFormProps = {
Expand All @@ -55,7 +47,6 @@ type TAddressDetails = {
next_step: () => void
) => void;
is_gb_residence: boolean | string;
selected_step_ref?: React.RefObject<FormikProps<TAddressDetailFormProps>>;
value: TAddressDetailFormProps;
has_real_account: boolean;
};
Expand All @@ -77,7 +68,6 @@ type TAutoComplete = {
* @param validate - function to validate form values
* @param onSubmit - function to submit form values
* @param is_gb_residence - is residence Great Britan
* @param selected_step_ref - reference to selected step
* @param value - form values
* @param disabled_items - array of disabled fields
* @param has_real_account - has real account
Expand All @@ -93,7 +83,6 @@ const AddressDetails = observer(
validate,
onSubmit,
is_gb_residence,
selected_step_ref,
disabled_items,
has_real_account,
...props
Expand All @@ -108,11 +97,6 @@ const AddressDetails = observer(
const { is_desktop, is_mobile } = ui;
const { data: states_list, isFetched } = useStatesList(residence);

const isSubmitDisabled = (errors: FormikErrors<TAddressDetailFormProps> = {}): boolean => {
const is_submitting = selected_step_ref?.current?.isSubmitting ?? false;
return is_submitting || Object.keys(errors).length > 0;
};

const handleCancel = (values: TAddressDetailFormProps) => {
const current_step = (getCurrentStep?.() || 1) - 1;
onSave(current_step, values);
Expand All @@ -134,16 +118,10 @@ const AddressDetails = observer(
};

return (
<Formik
innerRef={selected_step_ref}
initialValues={props.value}
validate={handleValidate}
validateOnMount
onSubmit={handleSubmitData}
>
<Formik initialValues={props.value} validate={handleValidate} validateOnMount onSubmit={handleSubmitData}>
{({
handleSubmit,
errors,
isSubmitting,
values,
setFieldValue,
handleChange,
Expand All @@ -157,12 +135,14 @@ const AddressDetails = observer(
setRef: (instance: HTMLFormElement) => void;
height: number | string;
}) => (
<form ref={setRef} onSubmit={handleSubmit}>
//noValidate here is for skipping default browser validation
<form ref={setRef} onSubmit={handleSubmit} noValidate>
<Div100vhContainer
className='details-form'
height_offset='90px'
is_disabled={is_desktop}
>
<ScrollToFieldWithError />
<Text
as='p'
align='left'
Expand All @@ -186,7 +166,7 @@ const AddressDetails = observer(
placeholder={localize('First line of address')}
disabled={
disabled_items.includes('address_line_1') ||
(props.value?.address_line_1 && has_real_account)
(!!props.value?.address_line_1 && has_real_account)
}
/>
<FormInputField
Expand All @@ -196,7 +176,7 @@ const AddressDetails = observer(
placeholder={localize('Second line of address')}
disabled={
disabled_items.includes('address_line_2') ||
(props.value?.address_line_2 && has_real_account)
(!!props.value?.address_line_2 && has_real_account)
}
/>
<FormInputField
Expand All @@ -206,7 +186,7 @@ const AddressDetails = observer(
placeholder={localize('Town/City')}
disabled={
disabled_items.includes('address_city') ||
(props.value?.address_city && has_real_account)
(!!props.value?.address_city && has_real_account)
}
/>
{!isFetched && (
Expand Down Expand Up @@ -266,7 +246,8 @@ const AddressDetails = observer(
}}
disabled={
disabled_items.includes('address_state') ||
(props.value?.address_state && has_real_account)
(!!props.value?.address_state &&
has_real_account)
}
/>
</MobileWrapper>
Expand All @@ -281,13 +262,13 @@ const AddressDetails = observer(
placeholder={localize('State/Province')}
disabled={
disabled_items.includes('address_state') ||
(props.value?.address_state && has_real_account)
(!!props.value?.address_state && has_real_account)
}
/>
)}
<FormInputField
name='address_postcode'
required={is_gb_residence}
required={!!is_gb_residence}
label={localize('Postal/ZIP Code')}
placeholder={localize('Postal/ZIP Code')}
onChange={e => {
Expand All @@ -296,15 +277,15 @@ const AddressDetails = observer(
}}
disabled={
disabled_items.includes('address_postcode') ||
(props.value?.address_postcode && has_real_account)
(!!props.value?.address_postcode && has_real_account)
}
/>
</div>
</ThemedScrollbars>
</Div100vhContainer>
<Modal.Footer has_separator is_bypassed={is_mobile}>
<FormSubmitButton
is_disabled={isSubmitDisabled(errors)}
is_disabled={isSubmitting}
label={localize('Next')}
is_absolute={is_mobile}
has_cancel
Expand Down
12 changes: 2 additions & 10 deletions packages/account/src/Components/currency-selector/currency-selector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { Field, Formik, FormikHandlers, FormikProps, FormikState } from 'formik';
import { Field, Formik, FormikHandlers, FormikState } from 'formik';
import { WebsiteStatus } from '@deriv/api-types';
import { AutoHeightWrapper, FormSubmitButton, Div100vhContainer, Modal, ThemedScrollbars } from '@deriv/components';
import { getPlatformSettings, reorderCurrencies, getAddressDetailsFields } from '@deriv/shared';
Expand Down Expand Up @@ -37,7 +37,6 @@ type TCurrencySelectorExtend = {
action: (isSubmitting: boolean) => void,
next_step: () => void
) => void;
selected_step_ref?: React.RefObject<FormikProps<TCurrencySelectorFormProps>>;
set_currency: boolean;
validate: (values: TCurrencySelectorFormProps) => TCurrencySelectorFormProps;
value: TCurrencySelectorFormProps;
Expand All @@ -58,7 +57,6 @@ type TCurrencySelector = React.HTMLAttributes<HTMLInputElement | HTMLLabelElemen
* @param onCancel - To handle click on cancel button
* @param onSave - To handle click on save button
* @param onSubmit - To handle click on submit button
* @param selected_step_ref - Ref of the selected step
* @param set_currency - Is current set
* @param alidate - To validate the form
* @param alue - Value of the form
Expand All @@ -76,7 +74,6 @@ const CurrencySelector = observer(
set_currency,
validate,
has_cancel = false,
selected_step_ref,
has_wallet_account,
value,
}: TCurrencySelector) => {
Expand Down Expand Up @@ -114,10 +111,6 @@ const CurrencySelector = observer(
item => item.landing_company_shortcode === real_account_signup_target
).length;

const isSubmitDisabled = (values: TCurrencySelectorFormProps) => {
return selected_step_ref?.current?.isSubmitting || !values.currency;
};

const handleCancel = (values: TCurrencySelectorFormProps) => {
const current_step = getCurrentStep() - 1;
onSave(current_step, values);
Expand Down Expand Up @@ -196,7 +189,6 @@ const CurrencySelector = observer(

return (
<Formik
innerRef={selected_step_ref}
initialValues={value}
onSubmit={(values, actions) => {
onSubmit(getCurrentStep ? getCurrentStep() - 1 : null, values, actions.setSubmitting, goToNextStep);
Expand Down Expand Up @@ -288,7 +280,7 @@ const CurrencySelector = observer(
? 'currency-selector--set-currency'
: 'currency-selector--deriv-account'
}
is_disabled={isSubmitDisabled(values)}
is_disabled={!values.currency}
is_center={false}
is_absolute={set_currency}
label={getSubmitLabel()}
Expand Down
16 changes: 13 additions & 3 deletions packages/account/src/Components/financial-details/financial-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { isDesktop, isMobile } from '@deriv/shared';
import { Localize, localize } from '@deriv/translations';
import FinancialInformation from './financial-details-partials';
import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';

type TFinancialDetailsFormValues = {
income_source: string;
Expand Down Expand Up @@ -59,6 +60,11 @@ const FinancialDetails = (props: TFinancialDetails) => {
return errors;
};

const fields_to_scroll_top = isMobile()
? ['income_source', 'account_turnover', 'estimated_worth']
: ['income_source'];
const fields_to_scroll_bottom = isMobile() ? [] : ['account_turnover', 'estimated_worth'];

return (
<Formik
initialValues={{ ...props.value }}
Expand All @@ -68,7 +74,7 @@ const FinancialDetails = (props: TFinancialDetails) => {
}}
validateOnMount
>
{({ handleSubmit, isSubmitting, errors, values }) => {
{({ handleSubmit, isSubmitting, values }) => {
return (
<AutoHeightWrapper default_height={200}>
{({
Expand All @@ -78,7 +84,11 @@ const FinancialDetails = (props: TFinancialDetails) => {
setRef: (instance: HTMLFormElement) => void;
height?: number | string;
}) => (
<form ref={setRef} onSubmit={handleSubmit}>
<form ref={setRef} onSubmit={handleSubmit} noValidate>
<ScrollToFieldWithError
fields_to_scroll_top={fields_to_scroll_top}
fields_to_scroll_bottom={fields_to_scroll_bottom}
/>
<Div100vhContainer
className={classNames('details-form', 'financial-assessment')}
height_offset='110px'
Expand All @@ -100,7 +110,7 @@ const FinancialDetails = (props: TFinancialDetails) => {
</Div100vhContainer>
<Modal.Footer has_separator is_bypassed={isMobile()}>
<FormSubmitButton
is_disabled={isSubmitting || Object.keys(errors).length > 0}
is_disabled={isSubmitting}
is_absolute={isMobile()}
label={localize('Next')}
has_cancel
Expand Down
25 changes: 0 additions & 25 deletions ...count/src/Components/forms/confirmation-checkbox/__tests__/confirmation-checkbox.spec.tsx
View file

This file was deleted.

60 changes: 0 additions & 60 deletions packages/account/src/Components/forms/confirmation-checkbox/confirmation-checkbox.tsx
View file

This file was deleted.

3 changes: 0 additions & 3 deletions packages/account/src/Components/forms/confirmation-checkbox/index.ts
View file

This file was deleted.

9 changes: 7 additions & 2 deletions packages/account/src/Components/forms/idv-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,9 @@ const IDVForm = ({
}
disabled={!values.document_type.id}
error={
(touched.document_number && errors.document_number) ||
(values.document_type.id &&
touched.document_number &&
errors.document_number) ||
errors.error_message
}
autoComplete='off'
Expand All @@ -218,7 +220,10 @@ const IDVForm = ({
}
className='additional-field'
required
label={generatePlaceholderText(selected_doc)}
label={
values.document_type.id &&
generatePlaceholderText(selected_doc)
}
/>
{values.document_type.additional?.display_name && (
<Input
Expand Down
Loading

1 comment on commit 3b114c9

@vercel
Copy link

@vercel vercel bot commented on 3b114c9 Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.vercel.app
binary.sx
deriv-app-git-master.binary.sx
deriv-app.binary.sx

Please sign in to comment.