Ott 487 registration fields (#183)

* refactor(#487): left only name, lastname, email and password fields in registration (#180)

* refactor(#487): moved all User account feauter components into components folder (#182)

* refactor(#487): moved back global hooks into user account feature (#181)

src/features/Register/components/RegistrationStep/hooks/index.tsx

@@ -0,0 +1,39 @@
+import type { FocusEvent } from 'react'
+import { useCallback } from 'react'
+
+import trim from 'lodash/trim'
+
+import { isValidEmail } from 'helpers/isValidEmail'
+
+import { formIds } from 'config/form'
+
+import { useForm } from 'features/FormStore'
+
+import { useSubmitHandler } from './useSubmitHandler'
+
+export const useRegistrationForm = () => {
+  const {
+    readFormError,
+    readFormValue,
+    updateFormError,
+    updateFormValue,
+  } = useForm()
+
+  const handleSubmit = useSubmitHandler()
+
+  const onEmailBlur = useCallback(({ target }: FocusEvent<HTMLInputElement>) => {
+    const email = trim(target.value)
+    if (email && !isValidEmail(email)) {
+      updateFormError(formIds.email, 'error_invalid_email_format')
+    }
+  }, [updateFormError])
+
+  return {
+    handleSubmit,
+    onEmailBlur,
+    readFormError,
+    readFormValue,
+    updateFormError,
+    updateFormValue,
+  }
+}

src/features/Register/components/RegistrationStep/hooks/useSubmitHandler.tsx

@@ -2,25 +2,14 @@ import type { FormEvent } from 'react'
 
 import trim from 'lodash/trim'
 
-import type { City } from 'requests'
-
 import { formIds } from 'config/form'
 
 import { useAuthStore } from 'features/AuthStore'
 import { useForm } from 'features/FormStore'
 
-import type { SelectedCountry } from 'hooks/useCountries'
+import { useValidateForm } from './useValidateForm'
-import { useValidateForm } from 'hooks/useValidateForm'
-
-type Args = {
-  selectedCity: City | null,
-  selectedCountry: SelectedCountry,
-}
 
-export const useSubmitHandler = ({
+export const useSubmitHandler = () => {
-  selectedCity,
-  selectedCountry,
-}: Args) => {
   const { register } = useAuthStore()
   const { readFormValue } = useForm()
   const validateForm = useValidateForm()
@@ -30,31 +19,17 @@ export const useSubmitHandler = ({
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault()
 
-    if (validateForm() && selectedCountry) {
+    if (validateForm()) {
       const firstname = readTrimmedValue(formIds.firstname)
       const lastname = readTrimmedValue(formIds.lastname)
-      const phone = readTrimmedValue(formIds.phone)
       const email = readTrimmedValue(formIds.email)
       const password = readTrimmedValue(formIds.password)
-      const postalCode = Number(readTrimmedValue(formIds.postalCode))
-      const region = readTrimmedValue(formIds.region)
-      const address1 = readTrimmedValue(formIds.address1)
-      const address2 = readTrimmedValue(formIds.address2)
-      const city = readTrimmedValue(formIds.city)
 
       register({
-        address1,
-        address2,
-        city,
-        cityId: selectedCity?.id,
-        countryId: selectedCountry.id,
         email,
         firstname,
         lastname,
         password,
-        phone,
-        postalCode,
-        region,
       })
     }
   }

src/features/Register/components/RegistrationStep/hooks/useValidateForm.tsx

@@ -0,0 +1,50 @@
+import trim from 'lodash/trim'
+
+import { formIds } from 'config/form'
+
+import { isValidEmail } from 'helpers/isValidEmail'
+import { isValidPassword } from 'helpers/isValidPassword'
+
+import { useForm } from 'features/FormStore'
+
+export const useValidateForm = () => {
+  const {
+    readFormValue,
+    updateFormError,
+  } = useForm()
+
+  const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName))
+
+  const validateForm = () => {
+    let hasError = false
+    const firstname = readTrimmedValue(formIds.firstname)
+    const lastname = readTrimmedValue(formIds.lastname)
+    const email = readTrimmedValue(formIds.email)
+    const password = readTrimmedValue(formIds.password)
+    if (!firstname) {
+      updateFormError(formIds.firstname, 'error_fill_out_this_field')
+      hasError = true
+    }
+    if (!lastname) {
+      updateFormError(formIds.lastname, 'error_fill_out_this_field')
+      hasError = true
+    }
+    if (!email) {
+      updateFormError(formIds.email, 'error_empty_email')
+      hasError = true
+    } else if (!isValidEmail(email)) {
+      updateFormError(formIds.email, 'error_invalid_email_format')
+      hasError = true
+    }
+    if (!password) {
+      updateFormError(formIds.password, 'error_empty_password')
+      hasError = true
+    } else if (!isValidPassword(password)) {
+      updateFormError(formIds.password, 'error_simple_password')
+      hasError = true
+    }
+    return !hasError
+  }
+
+  return validateForm
+}

src/features/Register/components/RegistrationStep/index.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { formIds } from 'config/form'
 
 import { T9n } from 'features/T9n'
-import { Combobox } from 'features/Combobox'
 import { Input, ButtonSolid } from 'features/Common'
 import { Error } from 'features/Common/Input/styled'
 import {
@@ -13,20 +12,14 @@ import {
 } from 'features/Login/styled'
 import { FormStore } from 'features/FormStore'
 
-import { useRegistrationForm } from 'hooks/useForm'
+import { useRegistrationForm } from './hooks'
 
 const labelWidth = 116
 
 const Registration = () => {
   const {
-    cities,
-    countries,
     handleSubmit,
-    onCitySelect,
-    onCountrySelect,
     onEmailBlur,
-    onPhoneBlur,
-    onRegionOrCityChange,
     readFormError,
     readFormValue,
     updateFormValue,
@@ -68,62 +61,6 @@ const Registration = () => {
         labelWidth={labelWidth}
         onChange={updateFormValue(formIds.password)}
       />
-      <Combobox
-        withArrow
-        value={readFormValue(formIds.country)}
-        error={readFormError(formIds.country)}
-        labelLexic='form_country'
-        labelWidth={labelWidth}
-        options={countries}
-        onChange={updateFormValue(formIds.country)}
-        onSelect={onCountrySelect}
-      />
-      <Input
-        value={readFormValue(formIds.region)}
-        error={readFormError(formIds.region)}
-        labelLexic='form_region'
-        labelWidth={labelWidth}
-        onChange={onRegionOrCityChange(formIds.region)}
-      />
-      <Combobox
-        value={readFormValue(formIds.city)}
-        error={readFormError(formIds.city)}
-        labelLexic='form_city'
-        labelWidth={labelWidth}
-        onChange={onRegionOrCityChange(formIds.city)}
-        options={cities}
-        onSelect={onCitySelect}
-      />
-      <Input
-        value={readFormValue(formIds.postalCode)}
-        error={readFormError(formIds.postalCode)}
-        labelLexic='form_postal_code'
-        labelWidth={labelWidth}
-        onChange={updateFormValue(formIds.postalCode)}
-      />
-      <Input
-        value={readFormValue(formIds.address1)}
-        error={readFormError(formIds.address1)}
-        labelLexic='form_address1'
-        labelWidth={labelWidth}
-        onChange={updateFormValue(formIds.address1)}
-      />
-      <Input
-        value={readFormValue(formIds.address2)}
-        error={readFormError(formIds.address2)}
-        labelLexic='form_address2'
-        labelWidth={labelWidth}
-        onChange={updateFormValue(formIds.address2)}
-      />
-      <Input
-        value={readFormValue(formIds.phone)}
-        error={readFormError(formIds.phone)}
-        type='tel'
-        labelLexic='form_phone'
-        labelWidth={labelWidth}
-        onChange={updateFormValue(formIds.phone)}
-        onBlur={onPhoneBlur}
-      />
       <ButtonsBlock>
         <ButtonSolid type='submit'>
           <T9n t='next' />

src/features/UserAccount/hooks/index.tsx

@@ -13,9 +13,8 @@ import type { UserInfo } from 'requests/saveUserInfo'
 import { getUserInfo } from 'requests/getUserInfo'
 import { saveUserInfo } from 'requests/saveUserInfo'
 
-import type { SelectedCountry } from 'hooks/useCountries'
+import type { SelectedCountry } from './useCountries'
-import { useRegistrationForm } from 'hooks/useForm'
+import { useUserInfoForm } from './useUserInfoForm'
-
 import { useValidateForm } from './useValidateForm'
 
 export const useUserInfo = () => {
@@ -37,7 +36,7 @@ export const useUserInfo = () => {
     selectedCity,
     updateFormError,
     updateFormValue,
-  } = useRegistrationForm()
+  } = useUserInfoForm()
 
   const readTrimmedValue = useCallback(
     (fieldName: string) => trim(readFormValue(fieldName)),

src/features/UserAccount/hooks/useUserInfoForm.tsx

@@ -10,19 +10,18 @@ import { isValidEmail } from 'helpers/isValidEmail'
 import { isValidPhone } from 'helpers/isValidPhone'
 import { formatPhoneCode } from 'helpers/formatPhoneCode'
 
-import type { SelectedCountry } from 'hooks/useCountries'
-import { useCountries } from 'hooks/useCountries'
-import { useCities } from 'hooks/useCities'
-
 import { formIds } from 'config/form'
 
 import { useForm } from 'features/FormStore'
-import { useSubmitHandler } from 'features/Register/components/RegistrationStep/hooks/useSubmitHandler'
 import { useLexicsStore } from 'features/LexicsStore'
 
+import type { SelectedCountry } from './useCountries'
+import { useCountries } from './useCountries'
+import { useCities } from './useCities'
+
 type Name = 'name_rus' | 'name_eng'
 
-export const useRegistrationForm = () => {
+export const useUserInfoForm = () => {
   const {
     readFormError,
     readFormValue,
@@ -45,10 +44,6 @@ export const useRegistrationForm = () => {
     selectedCity,
   } = useCities()
 
-  const handleSubmit = useSubmitHandler({
-    selectedCity,
-    selectedCountry,
-  })
   const { suffix } = useLexicsStore()
 
   const onEmailBlur = useCallback(({ target }: FocusEvent<HTMLInputElement>) => {
@@ -121,7 +116,6 @@ export const useRegistrationForm = () => {
     cities,
     countries,
     getCities,
-    handleSubmit,
     onCitySelect,
     onCountrySelect,
     onEmailBlur,

src/features/UserAccount/index.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { userAccountLexics } from 'config/lexics/userAccount'
 import { formIds } from 'config/form'
 
-import { Background } from 'features/Background'
 import { Combobox } from 'features/Combobox'
 import { Input } from 'features/Common'
 import { Form } from 'features/Login/styled'
@@ -11,11 +10,11 @@ import { T9n } from 'features/T9n'
 import { Error } from 'features/Common/Input/styled'
 import { useLexicsStore, useLexicsConfig } from 'features/LexicsStore'
 
-import { CardNumber } from './CardNumber'
+import { CardNumber } from './components/CardNumber'
-import { UserAccountButton } from './UserAccountButton'
+import { UserAccountButton } from './components/UserAccountButton'
-import { PageTitle } from './PageTitle'
+import { PageTitle } from './components/PageTitle'
-import { UserAccountSubscription } from './UserAccountSubscription'
+import { UserAccountSubscription } from './components/UserAccountSubscription'
-import { TextNoBorder } from './TextNoBorder'
+import { TextNoBorder } from './components/TextNoBorder'
 import { useUserInfo } from './hooks'
 
 import {
@@ -51,7 +50,6 @@ export const UserAccount = () => {
 
   return (
     <UserAccountComponentWrapper>
-      <Background>
       <UserAccountWrapper>
         <PageTitle titleText={translate('user_account')} />
         <UserAccountFormWrapper>
@@ -235,7 +233,6 @@ export const UserAccount = () => {
           </FormWrapper>
         </UserAccountFormWrapper>
       </UserAccountWrapper>
-      </Background>
     </UserAccountComponentWrapper>
   )
 }

src/helpers/isValidPassword/__tests__/index.tsx

@@ -2,15 +2,11 @@ import { isValidPassword } from '..'
 
 it('invalid passwords', () => {
   expect(isValidPassword('')).toBeFalsy()
-  expect(isValidPassword('a')).toBeFalsy()
-  expect(isValidPassword('1')).toBeFalsy()
-  expect(isValidPassword('abcdef')).toBeFalsy()
-  expect(isValidPassword('abcdef@')).toBeFalsy()
-  expect(isValidPassword('abcdef@123')).toBeFalsy()
-  expect(isValidPassword('ABcd12$')).toBeFalsy()
 })
 
 it('valid passwords', () => {
+  expect(isValidPassword('a')).toBeTruthy()
+  expect(isValidPassword('1')).toBeTruthy()
   expect(isValidPassword('aASbc!def123$')).toBeTruthy()
   expect(isValidPassword('Abcdef@123$')).toBeTruthy()
   expect(isValidPassword('Abcd1234')).toBeTruthy()

src/helpers/isValidPassword/index.tsx

@@ -1,13 +1,6 @@
-export const passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,500}$'
+import trim from 'lodash/trim'
+import isEmpty from 'lodash/isEmpty'
 
-const passwordRegExp = new RegExp(passwordRegex)
-
-/**
- * At least one upper case English letter, (?=.*?[A-Z])
- * At least one lower case English letter, (?=.*?[a-z])
- * At least one digit, (?=.*?[0-9])
- * Minimum eight in length .{8,} (with the anchors)
- */
 export const isValidPassword = (password: string) => (
-  passwordRegExp.test(password)
+  !isEmpty(trim(password))
 )

src/hooks/useValidateForm.tsx

@@ -1,69 +0,0 @@
-import trim from 'lodash/trim'
-import reduce from 'lodash/reduce'
-
-import { useForm } from 'features/FormStore'
-import { isValidEmail } from 'helpers/isValidEmail'
-import { isValidPassword } from 'helpers/isValidPassword'
-import { isValidPhone } from 'helpers/isValidPhone'
-
-import {
-  formIds,
-  requiredFields,
-  simpleValidationFields,
-} from 'config/form'
-
-export const useValidateForm = () => {
-  const {
-    allFieldsEmpty,
-    isFieldEmpty,
-    readFormValue,
-    updateFormError,
-  } = useForm()
-
-  const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName))
-
-  const setErrorOnEmptyFields = (fieldNames: Array<string>, message: string) => (
-    reduce(
-      fieldNames,
-      (acc, fieldName) => {
-        if (isFieldEmpty(fieldName)) {
-          updateFormError(fieldName, message)
-          return true
-        }
-        return acc
-      },
-      false,
-    )
-  )
-
-  const validateForm = () => {
-    let hasError = false
-    const email = readTrimmedValue(formIds.email)
-    const password = readTrimmedValue(formIds.password)
-    const phone = readTrimmedValue(formIds.phone)
-    if (allFieldsEmpty(requiredFields)) {
-      updateFormError(formIds.formError, 'error_fill_out_required_fields')
-      setErrorOnEmptyFields(requiredFields, '')
-      return false
-    }
-    hasError = setErrorOnEmptyFields(simpleValidationFields, 'error_fill_out_this_field')
-    if (isFieldEmpty(formIds.email)) {
-      updateFormError(formIds.email, 'error_empty_email')
-      hasError = true
-    } else if (!isValidEmail(email)) {
-      updateFormError(formIds.email, 'error_invalid_email_format')
-      hasError = true
-    }
-    if (!isValidPassword(password)) {
-      updateFormError(formIds.password, 'error_simple_password')
-      hasError = true
-    }
-    if (!isValidPhone(phone)) {
-      updateFormError(formIds.phone, 'error_invalid_phone_format')
-      hasError = true
-    }
-    return !hasError
-  }
-
-  return validateForm
-}

src/requests/register.tsx

@@ -14,49 +14,25 @@ type Response = {
 }
 
 type Args = {
-  address1: string,
-  address2?: string,
-  city?: string,
-  cityId?: number,
-  countryId: number,
   email: string,
   firstname: string,
   lastname: string,
   password: string,
-  phone: string,
-  postalCode: number,
-  region: string,
 }
 
 export const register = async ({
-  address1,
-  address2,
-  city,
-  cityId,
-  countryId,
   email,
   firstname,
   lastname,
   password,
-  phone,
-  postalCode,
-  region,
 }: Args) => {
   const config = {
     body: {
       params: {
-        _p_address_line1: address1,
-        _p_address_line2: address2,
-        _p_city: city,
-        _p_city_id: cityId,
-        _p_country_id: countryId,
         _p_email: email,
         _p_firstname: firstname,
         _p_lastname: lastname,
         _p_password: password,
-        _p_phone: phone,
-        _p_postal_code: postalCode,
-        _p_region: region,
       },
       proc,
     },