kyc / wall-1551: CTA 'Next' button enhancement

packages/account/src/Components/address-details/address-details.tsx

@@ -29,6 +29,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 = {
@@ -58,6 +59,7 @@ type TAddressDetails = {
     selected_step_ref?: React.RefObject<FormikProps<TAddressDetailFormProps>>;
     value: TAddressDetailFormProps;
     has_real_account: boolean;
+    should_scroll_to_error_field?: boolean;
 };
 
 type TAutoComplete = {
@@ -96,6 +98,7 @@ const AddressDetails = observer(
         selected_step_ref,
         disabled_items,
         has_real_account,
+        should_scroll_to_error_field = false,
         ...props
     }: TAddressDetails) => {
         const [address_state_to_display, setAddressStateToDisplay] = React.useState('');
@@ -144,6 +147,7 @@ const AddressDetails = observer(
                 {({
                     handleSubmit,
                     errors,
+                    isSubmitting,
                     values,
                     setFieldValue,
                     handleChange,
@@ -157,12 +161,13 @@ const AddressDetails = observer(
                             setRef: (instance: HTMLFormElement) => void;
                             height: number | string;
                         }) => (
-                            <form ref={setRef} onSubmit={handleSubmit}>
+                            <form ref={setRef} onSubmit={handleSubmit} noValidate>
                                 <Div100vhContainer
                                     className='details-form'
                                     height_offset='90px'
                                     is_disabled={is_desktop}
                                 >
+                                    {should_scroll_to_error_field && <ScrollToFieldWithError />}
                                     <Text
                                         as='p'
                                         align='left'
@@ -304,7 +309,9 @@ const AddressDetails = observer(
                                 </Div100vhContainer>
                                 <Modal.Footer has_separator is_bypassed={is_mobile}>
                                     <FormSubmitButton
-                                        is_disabled={isSubmitDisabled(errors)}
+                                        is_disabled={
+                                            should_scroll_to_error_field ? isSubmitting : isSubmitDisabled(errors)
+                                        }
                                         label={localize('Next')}
                                         is_absolute={is_mobile}
                                         has_cancel

packages/account/src/Components/financial-details/financial-details.tsx

@@ -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;
@@ -78,7 +79,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={['income_source', isMobile() ? 'account_turnover' : '']}
+                                    fields_to_scroll_end={isMobile() ? undefined : ['account_turnover']}
+                                />
                                 <Div100vhContainer
                                     className={classNames('details-form', 'financial-assessment')}
                                     height_offset='110px'
@@ -100,7 +105,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

packages/account/src/Components/forms/confirmation-checkbox/confirmation-checkbox.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { useFormikContext } from 'formik';
-
-import { Checkbox, Text } from '@deriv/components';
+import { FormikValues, useFormikContext } from 'formik';
+import { Checkbox } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 
 /**
@@ -11,11 +10,11 @@ type TConfirmationCheckboxProps = {
     /**
      * The label of the checkbox.
      */
-    label: React.ReactNode;
+    label: string | React.ReactElement;
     /**
      * The size of the checkbox label.
      */
-    label_size?: 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 's' | 'sm' | 'm' | 'l' | 'xl' | 'xxl';
+    label_font_size?: 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 's' | 'sm' | 'm' | 'l' | 'xl' | 'xxl';
     disabled?: boolean;
 };
 
@@ -31,30 +30,30 @@ type TConfirmationCheckboxProps = {
  * @name ConfirmationCheckbox
  * @returns {JSX.Element} React component that renders a checkbox with a label
  */
-export const ConfirmationCheckbox = ({
-    label,
-    label_size,
-    disabled = false,
-}: TConfirmationCheckboxProps): JSX.Element => {
+export const ConfirmationCheckbox = ({ label, label_font_size, disabled = false }: TConfirmationCheckboxProps) => {
     /**
      * The formik context for the current form.
      *
      * This context provides information about the form's state and helps in managing form behavior.
      */
-    const { setStatus, status } = useFormikContext();
+    const { setFieldValue, setStatus, status, values, touched, errors } = useFormikContext<FormikValues>();
 
     const handleChange = () => {
         // check if status is an object to avoid overwriting the status if it is a string
         if (typeof status === 'object') setStatus({ ...status, is_confirmed: !status?.is_confirmed });
+        setFieldValue('confirmation_checkbox', !values.confirmation_checkbox);
     };
 
     return (
         <Checkbox
+            name='confirmation_checkbox'
             className='formik__confirmation-checkbox'
             value={status?.is_confirmed ?? false}
-            label={<Text size={label_size ?? (isMobile() ? 'xxs' : 'xs')}>{label}</Text>}
+            label={label}
+            label_font_size={label_font_size ?? (isMobile() ? 'xxs' : 'xs')}
             disabled={disabled}
             onChange={handleChange}
+            has_error={!!(touched.confirmation_checkbox && errors.confirmation_checkbox)}
         />
     );
 };

packages/account/src/Components/forms/personal-details-form.jsx

@@ -16,16 +16,14 @@ import {
 } from '@deriv/components';
 import { getLegalEntityName, isDesktop, isMobile, routes, validPhone } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-
 import PoiNameDobExample from '../../Assets/ic-poi-name-dob-example.svg';
+import ConfirmationCheckbox from './confirmation-checkbox';
 import { isFieldImmutable } from '../../Helpers/utils';
-import { getEmploymentStatusList } from '../../Sections/Assessment/FinancialAssessment/financial-information-list';
 import FormBodySection from '../form-body-section';
+import { DateOfBirthField, FormInputField } from './form-fields';
 import FormSubHeader from '../form-sub-header';
 import InlineNoteWithIcon from '../inline-note-with-icon';
-
-import ConfirmationCheckbox from './confirmation-checkbox';
-import { DateOfBirthField, FormInputField } from './form-fields';
+import { getEmploymentStatusList } from '../../Sections/Assessment/FinancialAssessment/financial-information-list';
 
 const PersonalDetailsForm = props => {
     const {
@@ -66,10 +64,15 @@ const PersonalDetailsForm = props => {
     }, [should_close_tooltip, handleToolTipStatus, setShouldCloseTooltip]);
 
     React.useEffect(() => {
-        if (no_confirmation_needed && typeof status === 'object' && !status.is_confirmed) {
+        if (
+            !no_confirmation_needed &&
+            typeof status === 'object' &&
+            !status.is_confirmed &&
+            values.confirmation_checkbox
+        ) {
             setStatus({ ...status, is_confirmed: true });
         }
-    }, [no_confirmation_needed, setStatus, status]);
+    }, [no_confirmation_needed, setStatus, status, values.confirmation_checkbox]);
 
     const getNameAndDobLabels = () => {
         const is_asterisk_needed = is_svg || is_mf || is_rendered_for_onfido || is_qualified_for_idv;
@@ -206,6 +209,7 @@ const PersonalDetailsForm = props => {
                                             disabled={
                                                 !!values.salutation && isFieldImmutable('salutation', editable_fields)
                                             }
+                                            has_error={touched.salutation && errors.salutation}
                                         />
                                     ))}
                                 </RadioGroup>
@@ -529,6 +533,9 @@ const PersonalDetailsForm = props => {
                                         )}
                                         withTabIndex={0}
                                         data-testid='tax_identification_confirm'
+                                        has_error={
+                                            !!(touched.tax_identification_confirm && errors.tax_identification_confirm)
+                                        }
                                     />
                                 )}
                             </React.Fragment>

packages/account/src/Components/forms/scroll-to-field-with-error.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+
+type TScrollToFieldWithError = {
+    /**
+     * The fields_to_scroll_top is to scroll to top for exact fields.
+     */
+    fields_to_scroll_top?: string[];
+    /**
+     * The fields_to_scroll_end is to scroll to end for exact fields.
+     */
+    fields_to_scroll_end?: string[];
+    /**
+     * The should_recollect_inputs_names is to recollect all inputs on the page .
+     */
+    should_recollect_inputs_names?: boolean;
+};
+
+/**
+ * A ScrollToFieldWithError for scrolling to field with error.
+ *
+ * **Note**: This component is supposed to be used with Formik.
+ * To use scrolling to field with error, you have to use this component within Formik.
+ *
+ * @name ScrollToFieldWithError
+ * @returns {null} React component that renders nothing
+ */
+const ScrollToFieldWithError = ({
+    fields_to_scroll_top,
+    fields_to_scroll_end,
+    should_recollect_inputs_names = false,
+}: TScrollToFieldWithError) => {
+    const [all_page_inputs_names, setAllPageInputsNames] = React.useState<string[]>([]);
+    const formik = useFormikContext();
+    const is_submitting = formik.isSubmitting;
+    const scrollToElement = (element_name: string, block: ScrollLogicalPosition = 'center') => {
+        const el = document.querySelector(`[name="${element_name}"]`) as HTMLInputElement;
+        (el?.parentElement ?? el)?.scrollIntoView({ behavior: 'smooth', block });
+        el?.focus();
+    };
+
+    React.useEffect(() => {
+        const inputs = [...document.querySelectorAll('input, select')] as HTMLInputElement[];
+        setAllPageInputsNames(inputs.map(input => input.name));
+    }, [should_recollect_inputs_names]);
+    React.useEffect(() => {
+        let current_error_field_name = '';
+
+        for (let i = 0; i <= all_page_inputs_names.length; i++) {
+            if (Object.hasOwn(formik.errors, all_page_inputs_names[i])) {
+                current_error_field_name = all_page_inputs_names[i];
+                break;
+            }
+        }
+
+        if (fields_to_scroll_top?.includes(current_error_field_name)) {
+            scrollToElement(current_error_field_name, 'start');
+        } else if (fields_to_scroll_end?.includes(current_error_field_name)) {
+            scrollToElement(current_error_field_name, 'end');
+        } else {
+            scrollToElement(current_error_field_name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [is_submitting]);
+
+    return null;
+};
+
+export default ScrollToFieldWithError;

packages/account/src/Components/personal-details/personal-details.jsx

@@ -21,10 +21,11 @@ import {
     shouldShowIdentityInformation,
 } from 'Helpers/utils';
 
-import FormSubHeader from '../form-sub-header';
 import IDVForm from '../forms/idv-form';
 import PersonalDetailsForm from '../forms/personal-details-form';
 import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
+import FormSubHeader from '../form-sub-header';
+import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';
 
 const PersonalDetails = ({
     getCurrentStep,
@@ -45,10 +46,12 @@ const PersonalDetails = ({
     selected_step_ref,
     closeRealAccountSignup,
     has_real_account,
+    should_scroll_to_error_field = false,
     ...props
 }) => {
     const { account_status, account_settings, residence, real_account_signup_target } = props;
     const [should_close_tooltip, setShouldCloseTooltip] = React.useState(false);
+    const [no_confirmation_needed, setNoConfirmationNeeded] = React.useState(false);
 
     const isSubmitDisabled = errors => {
         return selected_step_ref?.current?.isSubmitting || Object.keys(errors).length > 0;
@@ -83,10 +86,19 @@ const PersonalDetails = ({
         }
 
         errors.document_number = isDocumentNumberValid(document_number, document_type);
+
+        if (document_type.id !== IDV_NOT_APPLICABLE_OPTION.id && !values.confirmation_checkbox) {
+            errors.confirmation_checkbox = 'error';
+        }
         return removeEmptyPropertiesFromObject(errors);
     };
 
     const handleValidate = values => {
+        if (values?.document_type?.id === IDV_NOT_APPLICABLE_OPTION.id) {
+            setNoConfirmationNeeded(true);
+        } else {
+            setNoConfirmationNeeded(false);
+        }
         let idv_error = {};
         if (is_qualified_for_idv) {
             idv_error = validateIDV(values);
@@ -126,21 +138,41 @@ const PersonalDetails = ({
             validate={handleValidate}
             validateOnMount
             enableReinitialize
-            initialStatus={{ is_confirmed: !is_qualified_for_idv }}
+            initialStatus={{ is_confirmed: no_confirmation_needed || !is_qualified_for_idv }}
             onSubmit={(values, actions) => {
                 onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep);
             }}
         >
-            {({ handleSubmit, errors, setFieldValue, touched, values, handleChange, handleBlur, status }) => (
+            {({
+                handleSubmit,
+                errors,
+                isSubmitting,
+                setFieldValue,
+                touched,
+                values,
+                handleChange,
+                handleBlur,
+                status,
+            }) => (
                 <AutoHeightWrapper default_height={380} height_offset={isDesktop() ? 81 : null}>
                     {({ setRef, height }) => (
                         <Form
+                            noValidate
                             ref={setRef}
                             onSubmit={handleSubmit}
                             autoComplete='off'
                             onClick={closeToolTip}
                             data-testid='personal_details_form'
                         >
+                            {should_scroll_to_error_field && (
+                                <ScrollToFieldWithError
+                                    fields_to_scroll_end={isMobile() ? '' : ['account_opening_reason']}
+                                    fields_to_scroll_top={isMobile() ? ['account_opening_reason'] : ''}
+                                    should_recollect_inputs_names={
+                                        values?.document_type?.id === IDV_NOT_APPLICABLE_OPTION.id
+                                    }
+                                />
+                            )}
                             <Div100vhContainer className='details-form' height_offset='100px' is_disabled={isDesktop()}>
                                 {!is_qualified_for_idv && (
                                     <Text as='p' size='xxxs' align='center' className='details-form__description'>
@@ -200,9 +232,7 @@ const PersonalDetails = ({
                                             should_close_tooltip={should_close_tooltip}
                                             setShouldCloseTooltip={setShouldCloseTooltip}
                                             should_hide_helper_image={shouldHideHelperImage(values?.document_type?.id)}
-                                            no_confirmation_needed={
-                                                values?.document_type?.id === IDV_NOT_APPLICABLE_OPTION.id
-                                            }
+                                            no_confirmation_needed={no_confirmation_needed}
                                         />
                                     </div>
                                 </ThemedScrollbars>
@@ -211,7 +241,11 @@ const PersonalDetails = ({
                                 <FormSubmitButton
                                     cancel_label={localize('Previous')}
                                     has_cancel
-                                    is_disabled={!status?.is_confirmed || isSubmitDisabled(errors)}
+                                    is_disabled={
+                                        should_scroll_to_error_field
+                                            ? isSubmitting
+                                            : !status?.is_confirmed || isSubmitDisabled(errors)
+                                    }
                                     is_absolute={isMobile()}
                                     label={localize('Next')}
                                     onCancel={() => handleCancel(values)}