ordering-ui-external 11.0.11 → 12.0.0

package/src/themes/five/src/components/UserFormDetails/index.js

@@ -50,7 +50,10 @@ export const UserFormDetailsUI = (props) => {
     requiredFields,
     handleChangeNotifications,
     handlePlaceOrderAsGuest,
-    isAllowGuest
+    isAllowGuest,
+    isOrderTypeValidationField,
+    checkoutFields,
+    isCheckoutPlace
   } = props
 
   const formMethods = useForm()
@@ -103,8 +106,8 @@ export const UserFormDetailsUI = (props) => {
     handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
   }
 
-  const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
-  const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
+  const showInputPhoneNumber = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'mobile_phone')?.enabled : (validationFields?.fields?.checkout?.cellphone?.enabled ?? false)
+  const showInputBirthday = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'birthdate')?.enabled : (validationFields?.fields?.checkout?.birthdate?.enabled ?? false)
 
   const setUserCellPhone = (isEdit = false) => {
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -130,29 +133,37 @@ export const UserFormDetailsUI = (props) => {
   }
 
   const onSubmit = () => {
-    const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
+    const isPhoneNumberValid = userPhoneNumber && showInputPhoneNumber ? isValidPhoneNumber : true
+    const requiredPhone = (user?.guest_id && requiredFields?.includes?.('cellphone')) || (validationFields?.fields?.checkout?.cellphone?.enabled && validationFields?.fields?.checkout?.cellphone?.required)
+    const content = []
+    if (requiredFields?.includes?.('birthdate') && !birthdate) {
+      content.push(t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required'))
+    }
     if (!userPhoneNumber &&
       ((validationFields?.fields?.checkout?.cellphone?.enabled &&
         validationFields?.fields?.checkout?.cellphone?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
+      content.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.'))
       setAlertState({
         open: true,
-        content: [t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.')]
+        content: content
       })
       return
     }
     if (!isPhoneNumberValid && userPhoneNumber) {
       if (user?.country_phone_code) {
+        content.push(t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid'))
         setAlertState({
           open: true,
-          content: [t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')]
+          content: content
         })
         return
       }
+      content.push(t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid'))
       setAlertState({
         open: true,
-        content: [t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid')]
+        content: content
       })
       return
     }
@@ -167,6 +178,13 @@ export const UserFormDetailsUI = (props) => {
       if (isCustomerMode) {
         setUserCustomer(formState.result.result, true)
       }
+      if (content?.length > 0) {
+        setAlertState({
+          open: true,
+          content: content
+        })
+        return
+      }
       handleButtonUpdateClick(changes)
     }
   }
@@ -207,9 +225,6 @@ export const UserFormDetailsUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    if (emailInput.current) {
-      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
-    }
   }
 
   const showFieldWithTheme = (name) => {
@@ -258,14 +273,6 @@ export const UserFormDetailsUI = (props) => {
     if (!isEdit) onCancel && onCancel()
   }, [user, isEdit])
 
-  useEffect(() => {
-    if (!validationFields.loading && emailInput.current) {
-      formMethods.setValue('email', formState?.result?.result
-        ? formState?.result?.result?.email
-        : formState?.changes?.email ?? (user && user?.email) ?? '')
-    }
-  }, [validationFields, emailInput.current])
-
   useEffect(() => {
     if (!validationFields.loading && birthdate) {
       formMethods.setValue('birthdate', formState?.result?.result
@@ -274,19 +281,6 @@ export const UserFormDetailsUI = (props) => {
     }
   }, [validationFields, birthdate])
 
-  useEffect(() => {
-    if (requiredFields) return
-    formMethods.register('email', {
-      required: isRequiredField('email')
-        ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email'))
-        : null,
-      pattern: {
-        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-        message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-      }
-    })
-  }, [formMethods])
-
   useEffect(() => {
     if (isChanged && userPhoneNumber && isValidPhoneNumber && formState?.changes?.country_phone_code && formState?.changes?.cellphone && configs?.verification_phone_required?.value === '1') {
       setWillVerifyOtpState && setWillVerifyOtpState(true)
@@ -329,11 +323,12 @@ export const UserFormDetailsUI = (props) => {
               props.beforeMidComponents?.map((BeforeMidComponents, i) => (
                 <BeforeMidComponents key={i} {...props} />))
             }
-            {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
-              ((showField && showField(field.code) && showFieldWithTheme(field.code)) || user?.guest_id) && (
+            {sortInputFields({ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout }).map(item => {
+              const field = item?.validation_field || item
+              return (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
-                    ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
+                    ((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
                       <InputGroup>
                         <p>{t(field.code.toUpperCase(), field?.name)}</p>
                         <Input
@@ -346,15 +341,18 @@ export const UserFormDetailsUI = (props) => {
                           placeholder={t(field.code.toUpperCase(), field?.name)}
                           defaultValue={formState?.changes[field.code] ?? (user && user[field.code]) ?? ''}
                           onChange={handleChangeInputEmail}
-                          ref={(e) => {
-                            emailInput.current = e
-                          }}
+                          ref={
+                            formMethods.register({
+                              required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+                              pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
+                            })
+                          }
                           autoComplete='off'
                         />
                       </InputGroup>
                     )
                   ) : (
-                    ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
+                    ((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
                       <InputGroup>
                         <p>{t(field.code.toUpperCase(), field?.name)}</p>
                         <Input
@@ -379,34 +377,45 @@ export const UserFormDetailsUI = (props) => {
                   )}
                 </React.Fragment>
               )
-            )}
-            {((!user?.guest_id && showInputBirthday) || (user?.guest_id && requiredFields?.includes?.('birthdate'))) && (
-              <InputPhoneNumberWrapper>
-                <p>{t('BIRTHDATE', 'Birthdate')}</p>
-                <Input
-                  borderBottom
-                  className='form'
-                  value={birthdate ? moment(birthdate).format('YYYY/MM/DD') : ''}
-                  autoComplete='off'
-                  onFocus={() => setOpenCalendar(true)}
-                />
-                {openCalendar && (
-                  <DatePickerUI value={birthdate} onChange={_handleChangeDate} name={'birthdate'} />
-                )}
-              </InputPhoneNumberWrapper>
-            )}
-            {((!user?.guest_id && !!showInputPhoneNumber) || (user?.guest_id && requiredFields?.includes?.('cellphone'))) && showCustomerCellphone && ((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields) && (
-              <InputPhoneNumberWrapper>
-                <p>{t('PHONE', 'Phone')}</p>
-                <InputPhoneNumber
-                  user={user}
-                  value={userPhoneNumber}
-                  setValue={handleChangePhoneNumber}
-                  handleIsValid={setIsValidPhoneNumber}
-                  disabled={!isEdit}
-                />
-              </InputPhoneNumberWrapper>
-            )}
+            })}
+            {((!user?.guest_id && showInputBirthday) || (isOrderTypeValidationField || user?.guest_id)) &&
+              showInputBirthday &&
+              ((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields || !isCheckoutPlace) &&
+              (
+                <InputPhoneNumberWrapper>
+                  <p>{t('BIRTHDATE', 'Birthdate')}</p>
+                  <Input
+                    borderBottom
+                    className='form'
+                    value={birthdate ? moment(birthdate).format('YYYY/MM/DD') : ''}
+                    autoComplete='off'
+                    onFocus={() => setOpenCalendar(true)}
+                    ref={formMethods.register({
+                      required: isRequiredField('birthdate')
+                        ? t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required')
+                        : null
+                    })}
+                  />
+                  {openCalendar && (
+                    <DatePickerUI value={birthdate} onChange={_handleChangeDate} name={'birthdate'} />
+                  )}
+                </InputPhoneNumberWrapper>
+              )}
+            {((!user?.guest_id && !!showInputPhoneNumber) || (isOrderTypeValidationField || user?.guest_id)) &&
+              showCustomerCellphone &&
+              ((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields || !isCheckoutPlace) &&
+              (
+                <InputPhoneNumberWrapper>
+                  <p>{t('PHONE', 'Phone')}</p>
+                  <InputPhoneNumber
+                    user={user}
+                    value={userPhoneNumber}
+                    setValue={handleChangePhoneNumber}
+                    handleIsValid={setIsValidPhoneNumber}
+                    disabled={!isEdit}
+                  />
+                </InputPhoneNumberWrapper>
+              )}
             {!isCheckout && showCustomerPassword && !requiredFields && !isCustomerMode && (
               <InputGroup>
                 <p>{t('PASSWORD', 'Password')}</p>

package/src/utils/index.js

@@ -198,15 +198,15 @@ export const fieldsToSort = ['name', 'middle_name', 'lastname', 'second_lastname
 export const sortInputFields = ({ fields, values }) => {
   let fieldsBase = fields
   const fieldsSorted = []
-  const fieldsArray = Array.isArray(values) ? values : Object.values(values)
+  const fieldsArray = Array.isArray(values) ? values : values && Object.values(values)
 
   if (!fieldsBase) {
     fieldsBase = fieldsToSort
   }
 
   fieldsBase.forEach(f => {
-    fieldsArray.forEach(field => {
-      if (f === field.code) {
+    fieldsArray && fieldsArray.forEach(field => {
+      if (f === field.code || f === field?.validation_field?.code) {
         fieldsSorted.push(field)
       }
     })