Ott 525 user account optional fields (#201)

* refactor(#525): removed validation of optional fields

* refactor(#525): removed form store validation helpers

* fixup! refactor(#525): removed validation of optional fields

src/features/FormStore/hooks/useFormValidators.tsx

@@ -1,23 +0,0 @@
-import trim from 'lodash/trim'
-import every from 'lodash/every'
-import isEmpty from 'lodash/isEmpty'
-
-import { useFormState } from './useFormState'
-
-type Args = ReturnType<typeof useFormState>
-
-export const useFormValidators = ({
-  readFormValue,
-  updateFormError,
-}: Args) => {
-  const isFieldEmpty = (fieldName: string) => isEmpty(trim(readFormValue(fieldName)))
-
-  const allFieldsEmpty = (fieldNames: Array<string>) => (
-    every(fieldNames, isFieldEmpty)
-  )
-
-  return {
-    allFieldsEmpty,
-    isFieldEmpty,
-  }
-}

src/features/FormStore/index.tsx

@@ -2,16 +2,11 @@ import type { ReactNode } from 'react'
 import React, {
   createContext,
   useContext,
-  useMemo,
 } from 'react'
 
 import { useFormState } from './hooks/useFormState'
-import { useFormValidators } from './hooks/useFormValidators'
 
-type FormStore = (
-  ReturnType<typeof useFormState>
-  & ReturnType<typeof useFormValidators>
-)
+type FormStore = ReturnType<typeof useFormState>
 type Props = {
   children: ReactNode,
 }
@@ -27,13 +22,8 @@ export const FormStore = ({
   children,
 }: Props) => {
   const formState = useFormState()
-  const validators = useFormValidators(formState)
-  const value = useMemo(
-    () => ({ ...formState, ...validators }),
-    [formState, validators],
-  )
   return (
-    <FormContext.Provider value={value}>
+    <FormContext.Provider value={formState}>
       {children}
     </FormContext.Provider>
   )

src/features/UserAccount/config.tsx

@@ -1,28 +0,0 @@
-export const formIds = {
-  address_line1: 'address_line1',
-  address_line2: 'address_line2',
-  city: 'city',
-  city_id: 'city_id',
-  country: 'country',
-  countryId: 'countryId',
-  firstname: 'firstname',
-  formError: 'formError',
-  lastname: 'lastname',
-  password: 'password',
-  phone: 'phone',
-  postalCode: 'postalCode',
-  region: 'region',
-}
-
-export const requiredFields = [
-  formIds.country,
-  formIds.firstname,
-  formIds.lastname,
-  formIds.phone,
-]
-
-export const simpleValidationFields = [
-  formIds.country,
-  formIds.firstname,
-  formIds.lastname,
-]

src/features/UserAccount/hooks/useUserInfo.tsx

@@ -39,7 +39,7 @@ export const useUserInfo = () => {
   } = useUserInfoForm()
 
   const readTrimmedValue = useCallback(
-    (fieldName: string) => trim(readFormValue(fieldName)),
+    (fieldName: string) => trim(readFormValue(fieldName)) || null,
     [readFormValue],
   )
   const handleSubmit = useCallback(() => {

src/features/UserAccount/hooks/useValidateForm.tsx

@@ -1,63 +1,34 @@
 import trim from 'lodash/trim'
-import reduce from 'lodash/reduce'
 
 import { useForm } from 'features/FormStore'
 import { isValidPhone } from 'helpers/isValidPhone'
 import { isValidPassword } from 'helpers/isValidPassword'
 
-import {
-  formIds,
-  requiredFields,
-  simpleValidationFields,
-} from 'config/form'
+import { formIds } 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
+    let isValid = true
     const phone = readTrimmedValue(formIds.phone)
     const password = readTrimmedValue(formIds.password)
 
-    if (allFieldsEmpty(requiredFields)) {
-      updateFormError(formIds.formError, 'error_fill_out_required_fields')
-      setErrorOnEmptyFields(requiredFields, '')
-      return false
-    }
-
-    hasError = setErrorOnEmptyFields(simpleValidationFields, 'error_fill_out_this_field')
-
     if (!isValidPassword(password)) {
       updateFormError(formIds.password, 'error_simple_password')
-      hasError = true
+      isValid = false
     }
 
-    if (!isValidPhone(phone)) {
+    if (phone && !isValidPhone(phone)) {
       updateFormError(formIds.phone, 'error_invalid_phone_format')
-      hasError = true
+      isValid = false
     }
-    return !hasError
+    return isValid
   }
 
   return validateForm

src/features/UserAccount/index.tsx

@@ -69,7 +69,6 @@ export const UserAccount = () => {
                 autoComplete='given-name'
                 labelWidth={labelWidth}
                 onChange={updateFormValue(formIds.firstname)}
-                error={readFormError(formIds.firstname)}
                 editIcon
                 maxLength={500}
               />
@@ -79,7 +78,6 @@ export const UserAccount = () => {
                 autoComplete='family-name'
                 labelWidth={labelWidth}
                 onChange={updateFormValue(formIds.lastname)}
-                error={readFormError(formIds.lastname)}
                 editIcon
                 maxLength={500}
               />
@@ -107,7 +105,6 @@ export const UserAccount = () => {
               />
               <Combobox
                 value={readFormValue(formIds.country)}
-                error={readFormError(formIds.country)}
                 labelLexic='form_country'
                 labelWidth={labelWidth}
                 onChange={updateFormValue(formIds.country)}
@@ -117,7 +114,6 @@ export const UserAccount = () => {
               />
               <Input
                 value={readFormValue(formIds.postalCode)}
-                error={readFormError(formIds.postalCode)}
                 labelLexic='form_postal_code'
                 autoComplete='postal-code'
                 labelWidth={labelWidth}
@@ -126,7 +122,6 @@ export const UserAccount = () => {
               />
               <Input
                 value={readFormValue(formIds.region)}
-                error={readFormError(formIds.region)}
                 labelLexic='form_region'
                 labelWidth={labelWidth}
                 onChange={onRegionOrCityChange(formIds.region)}
@@ -135,7 +130,6 @@ export const UserAccount = () => {
               />
               <Combobox
                 value={readFormValue(formIds.city)}
-                error={readFormError(formIds.city)}
                 labelLexic='form_city'
                 labelWidth={labelWidth}
                 onChange={onRegionOrCityChange(formIds.city)}
@@ -145,7 +139,6 @@ export const UserAccount = () => {
               />
               <Input
                 value={readFormValue(formIds.address1)}
-                error={readFormError(formIds.address1)}
                 labelLexic='form_address1'
                 labelWidth={labelWidth}
                 autoComplete='address-line1'
@@ -155,7 +148,6 @@ export const UserAccount = () => {
               />
               <Input
                 value={readFormValue(formIds.address2)}
-                error={readFormError(formIds.address2)}
                 labelLexic='form_address2'
                 labelWidth={labelWidth}
                 autoComplete='address-line2'

src/requests/saveUserInfo.tsx

@@ -7,17 +7,17 @@ import { callApi } from 'helpers'
 const proc = PROCEDURES.save_user_info
 
 export type UserInfo = {
-  address_line1: string,
-  address_line2: string,
-  city: string,
+  address_line1: string | null,
+  address_line2: string | null,
+  city: string | null,
   cityId: number | null,
-  countryId: number,
-  firstname: string,
-  lastname: string,
-  password: string,
-  phone: string,
-  postalCode: number,
-  region: string,
+  countryId: number | null,
+  firstname: string | null,
+  lastname: string | null,
+  password: string | null,
+  phone: string | null,
+  postalCode: number | null,
+  region: string | null,
 }
 
 type Response = {