[TRAH] Sergei / TRAH - 2832 / Password setting modal (deriv-com#13703)

* feat: create useClientCountry hook

* feat: intermediate result

* feat: done with citizenship modal

* feat: move changes back for AppContent

* fix: sonarcloud issue

* feat: implement review comments

* feat: implement review comments #2

* feat: create PasswordSettingModal component

* chore: delete unused import

* feat: add custom style

* feat: set text by center

packages/tradershub/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx

@@ -0,0 +1,42 @@
+import React, { ChangeEvent } from 'react';
+import { useFormikContext } from 'formik';
+import { validPassword } from '@/utils';
+import { Button, PasswordInput, Text } from '@deriv-com/ui';
+import { TSignupFormValues } from '../SignupWrapper/SignupWrapper';
+
+const PasswordSettingModal = () => {
+    const { values, setFieldValue } = useFormikContext<TSignupFormValues>();
+
+    const onPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setFieldValue('password', e.target.value);
+    };
+
+    return (
+        <div className='h-full rounded-default max-w-[328px] lg:max-w-[440px] bg-system-light-primary-background'>
+            <div className='flex flex-col p-16 space-y-16 lg:space-y-24 lg:p-24'>
+                <Text align='center' weight='bold'>
+                    Keep your account secure with a password
+                </Text>
+                <PasswordInput
+                    isFullWidth
+                    label='Create a password'
+                    onChange={onPasswordChange}
+                    value={values.password}
+                />
+                <Text align='center' size='xs'>
+                    Strong passwords contain at least 8 characters. combine uppercase and lowercase letters, numbers,
+                    and symbols.
+                </Text>
+                <Button
+                    className='w-full lg:self-end lg:w-fit'
+                    disabled={!validPassword(values.password)}
+                    type='submit'
+                >
+                    Start trading
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default PasswordSettingModal;

packages/tradershub/src/flows/Signup/PasswordSettingModal/index.ts

@@ -0,0 +1 @@
+export { default as PasswordSettingModal } from './PasswordSettingModal';

packages/tradershub/src/flows/Signup/SignupScreens/SignupScreens.tsx

@@ -1,5 +1,6 @@
 import React, { Dispatch } from 'react';
 import { CitizenshipModal } from '../CitizenshipModal';
+import { PasswordSettingModal } from '../PasswordSettingModal';
 
 type TSignupScreens = {
     setStep: Dispatch<React.SetStateAction<number>>;
@@ -11,11 +12,7 @@ const SignupScreens = ({ step, setStep }: TSignupScreens) => {
         case 1:
             return <CitizenshipModal onClickNext={() => setStep(prev => prev + 1)} />;
         case 2:
-            return (
-                <div className='max-w-[328px] lg:max-w-[440px] bg-system-light-primary-background rounded-default p-16 space-y-16 lg:space-y-24 lg:p-24'>
-                    Screen 2
-                </div>
-            );
+            return <PasswordSettingModal />;
         default:
             return null;
     }

packages/tradershub/src/flows/Signup/SignupWrapper/SignupWrapper.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Form, Formik } from 'formik';
 import ReactModal from 'react-modal';
 import { CUSTOM_STYLES } from '@/helpers';
+import { signup } from '@/utils';
 import { SignupScreens } from '../SignupScreens';
 
 export type TSignupFormValues = {
@@ -11,8 +12,7 @@ export type TSignupFormValues = {
 };
 
 const SignupWrapper = () => {
-    // setIsOpen will be added later when flow is completed
-    const [isOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
     const [step, setStep] = useState(1);
 
     const initialValues = {
@@ -22,16 +22,15 @@ const SignupWrapper = () => {
     };
 
     const handleSubmit = () => {
-        // will be added later
+        // logic will be added later
+        setIsOpen(false);
     };
 
-    useEffect(() => {
-        ReactModal.setAppElement('#v2_modal_root');
-    }, []);
+    const customStyles = { ...CUSTOM_STYLES, content: { ...CUSTOM_STYLES.content, overflow: 'unset' } };
 
     return (
-        <ReactModal isOpen={isOpen} shouldCloseOnOverlayClick={false} style={CUSTOM_STYLES}>
-            <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <ReactModal ariaHideApp={false} isOpen={isOpen} shouldCloseOnOverlayClick={false} style={customStyles}>
+            <Formik initialValues={initialValues} onSubmit={handleSubmit} validationSchema={signup}>
                 <Form>
                     <SignupScreens setStep={setStep} step={step} />
                 </Form>

packages/tradershub/src/utils/validations/validations.ts

@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { passwordRegex } from '@/constants';
 
 export const personalDetails = Yup.object().shape({
     accountOpeningReason: Yup.string().required('Account opening reason is required.'),
@@ -53,3 +54,9 @@ export const termsOfUse = Yup.object().shape({
     pepConfirmation: Yup.boolean().oneOf([true], 'You must confirm that you are not a PEP.'),
     termsAndCondition: Yup.boolean().oneOf([true], 'You must agree to the terms and conditions.'),
 });
+
+export const signup = Yup.object().shape({
+    citizenship: Yup.string(),
+    country: Yup.string(),
+    password: Yup.string().matches(passwordRegex.isPasswordValid),
+});