ordering-ui-external 11.0.10 → 12.0.0

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

@@ -76,10 +76,10 @@ const CartUI = (props) => {
     businessConfigs,
     loyaltyRewardRate,
     isCustomerMode,
-    guestCheckoutComment,
-    guestCheckoutCupon,
     productLoading,
-    setProductLoading
+    setProductLoading,
+    hideCommentsByValidationCheckout,
+    hideCouponByValidationCheckout
   } = props
 
   const theme = useTheme()
@@ -114,8 +114,8 @@ const CartUI = (props) => {
   const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
   const cart = cartMulticart || orderState?.carts?.[`businessId:${props.cart?.business_id}`]
   const viewString = isStore ? 'business_view' : 'header'
-  const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden || ((loginUser?.guest_id && guestCheckoutComment) ? !guestCheckoutComment?.enabled : !validationFields?.fields?.checkout?.comments?.enabled)
-  const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount_coupon?.hidden || ((loginUser?.guest_id && guestCheckoutCupon) ? !guestCheckoutCupon?.enabled : !validationFields?.fields?.checkout?.comments?.enabled)
+  const hideCartComments = isCheckout ? hideCommentsByValidationCheckout : !validationFields?.fields?.checkout?.comments?.enabled || theme?.[viewString]?.components?.cart?.components?.comments?.hidden
+  const hideCartDiscount = isCheckout ? hideCouponByValidationCheckout : !validationFields?.fields?.checkout?.coupon?.enabled || theme?.[viewString]?.components?.cart?.components?.discount_coupon?.hidden
   const cateringTypeString = orderState?.options?.type === 7
     ? 'catering_delivery'
     : orderState?.options?.type === 8
@@ -566,7 +566,7 @@ const CartUI = (props) => {
                     )}
                   </tbody>
                 </table>
-                {cart?.status !== 2 && !hideCartComments && (
+                {cart?.status !== 2 && !hideCartComments && !hideCommentsByValidationCheckout && (
                   <table className='comments'>
                     <tbody>
                       <tr>

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

@@ -10,7 +10,6 @@ import {
   useApi,
   useLanguage,
   useUtils,
-  useValidationFields,
   useConfig,
   useCustomer,
   useEvent
@@ -104,7 +103,6 @@ const CheckoutUI = (props) => {
   } = props
 
   const theme = useTheme()
-  const [validationFields] = useValidationFields()
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
@@ -128,7 +126,6 @@ const CheckoutUI = (props) => {
   const [allowedGuest, setAllowedGuest] = useState(false)
   const [cardList, setCardList] = useState([])
   const [paymethodClicked, setPaymethodClicked] = useState(null)
-  const [orderTypeValidationFields, setOrderTypeValidationFields] = useState([])
   const [productLoading, setProductLoading] = useState(false)
 
   const cardsMethods = ['stripe', 'credomatic']
@@ -141,20 +138,22 @@ const CheckoutUI = (props) => {
     (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode
   const isMultiDriverTips = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
-
+  const hexTest = /[0-9A-Fa-f]{6}/g;
+  const primaryColor = theme?.colors?.primary?.split?.('#')?.[1]
   const placeSpotTypes = [3, 4, 5]
   const placeSpotsEnabled = placeSpotTypes.includes(options?.type) && !useKioskApp
   const isGiftCardCart = !cart?.business_id
-  const guestCheckoutDriveTip = checkoutFieldsState?.fields?.find(field => field.order_type_id === 1 && field?.validation_field?.code === 'driver_tip')
-  const guestCheckoutComment = useMemo(() => checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [checkoutFieldsState, options])
-  const guestCheckoutCupon = useMemo(() => checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [checkoutFieldsState, options])
-  // const [hasBusinessPlaces, setHasBusinessPlaces] = useState(null)
-
-  const validateCommentsCartField = (!user?.guest_id ? (validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required) : (guestCheckoutComment?.enabled && guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
-  const validateDriverTipField = options.type === 1 && (!user?.guest_id ? (validationFields?.fields?.checkout?.driver_tip?.enabled && validationFields?.fields?.checkout?.driver_tip?.required) : (guestCheckoutDriveTip?.enabled && guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
+  const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter(field => field.order_type_id === options?.type), [checkoutFieldsState, options])
+  const guestCheckoutDriveTip = useMemo(() => checkoutFields?.find(field => field.order_type_id === 1 && field?.validation_field?.code === 'driver_tip'), [JSON.stringify(checkoutFields), options])
+  const guestCheckoutComment = useMemo(() => checkoutFields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [JSON.stringify(checkoutFields), options])
+  const guestCheckoutCoupon = useMemo(() => checkoutFields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [JSON.stringify(checkoutFields), options])
+  const guestCheckoutZipcode = useMemo(() => checkoutFields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'zipcode'), [JSON.stringify(checkoutFields), options])
 
-  const validateZipcodeCard =
-    validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
+  // const [hasBusinessPlaces, setHasBusinessPlaces] = useState(null)
+  const validateCommentsCartField = (guestCheckoutComment?.enabled && (user?.guest_id ? guestCheckoutComment?.required_with_guest : guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
+  const validateDriverTipField = options.type === 1 && (guestCheckoutDriveTip?.enabled && (user?.guest_id ? guestCheckoutDriveTip?.required_with_guest : guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
+  const validateCouponField = (guestCheckoutCoupon?.enabled && (user?.guest_id ? guestCheckoutCoupon?.required_with_guest : guestCheckoutCoupon?.required)) && !cart?.offers?.some(offer => offer?.type === 2)
+  const validateZipcodeCard = (guestCheckoutZipcode?.enabled && (user?.guest_id ? guestCheckoutZipcode?.required_with_guest : guestCheckoutZipcode?.required)) && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
 
   const isDisablePlaceOrderButton = !cart?.valid ||
     (!paymethodSelected && cart?.balance > 0) ||
@@ -166,8 +165,9 @@ const CheckoutUI = (props) => {
     !cart?.valid_maximum ||
     (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ||
     // (((placeSpotTypes.includes(options?.type) && !cart?.place) && hasBusinessPlaces)) ||
-    (validateDriverTipField && !isGiftCardCart) ||
-    (validateCommentsCartField) ||
+    validateCommentsCartField ||
+    validateDriverTipField ||
+    validateCouponField ||
     validateZipcodeCard
 
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -184,7 +184,7 @@ const CheckoutUI = (props) => {
   const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
   const hideBusinessMap = theme?.checkout?.components?.map?.hidden
   const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
-  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && ((!user?.guest_id && validationFields?.fields?.checkout?.driver_tip?.enabled) || (user?.guest_id && guestCheckoutDriveTip?.enabled)) && driverTipsOptions.length > 0 && !useKioskApp
+  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && (guestCheckoutDriveTip?.enabled) && driverTipsOptions.length > 0 && !useKioskApp
 
   const creditPointPlan = loyaltyPlansState?.result?.find(loyal => loyal.type === 'credit_point')
   const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find(b => b.business_id === cart?.business_id && b.accumulates)
@@ -235,22 +235,21 @@ const CheckoutUI = (props) => {
   const checkGuestValidationFields = () => {
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = checkoutFieldsState?.fields
-      .filter(field => (field?.order_type_id === options?.type) && field?.enabled && field?.required &&
+      .filter((field) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
         !notFields.includes(field?.validation_field?.code) &&
         userSelected && !userSelected[field?.validation_field?.code])
-      .map(item => item?.validation_field?.code)
-    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
-
+    const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
+    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
     if (
       userSelected &&
-        !userSelected?.cellphone &&
-        ((guestCheckoutCellPhone?.enabled &&
-          guestCheckoutCellPhone?.required) ||
-          configs?.verification_phone_required?.value === '1')
+      !userSelected?.cellphone &&
+      ((guestCheckoutCellPhone?.enabled &&
+        guestCheckoutCellPhone?.required_with_guest) ||
+        configs?.verification_phone_required?.value === '1')
     ) {
-      _requiredFields.push('cellphone')
+      requiredFieldsCode.push('cellphone')
     }
-    setRequiredFields(_requiredFields)
+    setRequiredFields(requiredFieldsCode)
   }
 
   const checkValidationFields = () => {
@@ -258,26 +257,28 @@ const CheckoutUI = (props) => {
     const errors = []
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = []
-
-    Object.values(validationFields?.fields?.checkout).map(field => {
-      if (field?.enabled && field?.required && !notFields.includes(field.code)) {
-        if (userSelected && !userSelected[field?.code]) {
-          _requiredFields.push(field?.code)
+    Object.values(checkoutFieldsState?.fields).map(field => {
+      if (options?.type === field?.order_type_id &&
+        field?.enabled &&
+        field?.required &&
+        !notFields.includes(field?.validation_field?.code)
+      ) {
+        if (userSelected && !userSelected[field?.validation_field?.code]) {
+          _requiredFields.push(field?.validation_field?.code)
         }
       }
     })
-
+    const mobilePhoneField = Object.values(checkoutFieldsState?.fields)?.find(field => field?.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
     if (
       userSelected &&
       !userSelected?.cellphone &&
-      ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
+      ((mobilePhoneField?.enabled &&
+        mobilePhoneField?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
       _requiredFields.push('cellphone')
     }
     setRequiredFields(_requiredFields)
-
     if (userSelected && userSelected?.cellphone) {
       if (userSelected?.country_phone_code) {
         let phone = null
@@ -314,15 +315,13 @@ const CheckoutUI = (props) => {
   }
 
   useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout && !customerState.loading && !userLoading) {
+    if (checkoutFieldsState?.loading || customerState.loading || userLoading) return
+    if (user?.guest_id) {
+      checkGuestValidationFields()
+    } else {
       checkValidationFields()
     }
-  }, [validationFields, user, customerState])
-
-  useEffect(() => {
-    if (checkoutFieldsState?.loading || !user?.guest_id || customerState.loading || userLoading) return
-    checkGuestValidationFields()
-  }, [user, checkoutFieldsState, customerState])
+  }, [checkoutFieldsState, user, customerState, options?.type])
 
   useEffect(() => {
     if (errors) {
@@ -387,13 +386,15 @@ const CheckoutUI = (props) => {
                     </div>
                   ) : (
                     <AddressDetails
-                      location={options?.address?.location}
+                      location={cart?.business?.location}
                       businessLogo={businessDetails?.business?.logo || theme.images?.dummies?.businessLogo}
                       isCartPending={cart?.status === 2}
                       businessId={cart?.business_id}
                       apiKey={configs?.google_maps_api_key?.value}
                       mapConfigs={mapConfigs}
                       isCustomerMode={isCustomerMode}
+                      cart={cart}
+                      primaryColor={hexTest.test(primaryColor || '') ? `0x${primaryColor}` : 'red'}
                     />
                   )}
                 </>
@@ -428,12 +429,14 @@ const CheckoutUI = (props) => {
                           isUserDetailsEdit={isUserDetailsEdit}
                           cartStatus={cart?.status}
                           businessId={cart?.business_id}
-                          useValidationFields
                           useDefualtSessionManager
                           useSessionUser={!isCustomerMode}
                           isCustomerMode={isCustomerMode}
                           userData={isCustomerMode && customerState.user}
                           userId={isCustomerMode && customerState?.user?.id}
+                          isOrderTypeValidationField
+                          requiredFields={requiredFields}
+                          checkoutFields={checkoutFields}
                           isSuccess={isSuccess}
                           isCheckout
                         />
@@ -572,24 +575,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-            <>
-              <DriverTipContainer>
-                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-                <DriverTips
-                  businessId={cart?.business_id}
-                  driverTipsOptions={driverTipsOptions}
-                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                    ? cart?.driver_tip
-                    : cart?.driver_tip_rate}
-                  cart={cart}
-                  useOrderContext
-                />
-              </DriverTipContainer>
-              <DriverTipDivider />
-            </>
+          <>
+            <DriverTipContainer>
+              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+              <DriverTips
+                businessId={cart?.business_id}
+                driverTipsOptions={driverTipsOptions}
+                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                  ? cart?.driver_tip
+                  : cart?.driver_tip_rate}
+                cart={cart}
+                useOrderContext
+              />
+            </DriverTipContainer>
+            <DriverTipDivider />
+          </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
@@ -624,8 +627,8 @@ const CheckoutUI = (props) => {
                 creditPointPlanOnBusiness?.accumulation_rate ??
                 (!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
               }
-              guestCheckoutComment={guestCheckoutComment}
-              guestCheckoutCupon={guestCheckoutCupon}
+              hideCommentsByValidationCheckout={!guestCheckoutComment?.enabled}
+              hideCouponByValidationCheckout={!guestCheckoutCoupon?.enabled}
               productLoading={productLoading}
               setProductLoading={setProductLoading}
             />
@@ -698,7 +701,12 @@ const CheckoutUI = (props) => {
               {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
             </WarningText>
           )}
-
+        {validateCouponField &&
+          (
+            <WarningText>
+              {t('WARNING_INVALID_COUPON_FIELD', 'Coupon is required.')}
+            </WarningText>
+          )}
         {validateCommentsCartField && (
           <WarningText>
             {t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
@@ -751,7 +759,6 @@ const CheckoutUI = (props) => {
           isUserDetailsEdit={isUserDetailsEdit}
           cartStatus={cart?.status}
           businessId={cart?.business_id}
-          useValidationFields
           useDefualtSessionManager
           useSessionUser={!isCustomerMode}
           isCustomerMode={isCustomerMode}
@@ -764,6 +771,8 @@ const CheckoutUI = (props) => {
           isEdit
           isModal
           handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
+          isOrderTypeValidationField
+          checkoutFields={checkoutFields}
           isAllowGuest={paymethodSelected?.gateway === 'cash' || paymethodSelected?.gateway === 'card_delivery'}
           onClose={() => {
             setIsOpen(false)

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 import {
   MultiCheckout as MultiCheckoutController,
@@ -71,7 +71,8 @@ const MultiCheckoutUI = (props) => {
     cartUuid,
     totalCartsFee,
     walletState,
-    handleSearchRedirect
+    handleSearchRedirect,
+    checkoutFieldsState
   } = props
 
   const [, t] = useLanguage()
@@ -79,7 +80,7 @@ const MultiCheckoutUI = (props) => {
   const [{ parsePrice }] = useUtils()
   const [customerState] = useCustomer()
   const [validationFields] = useValidationFields()
-  const [{ user }, { login }] = useSession()
+  const [{ user, loading: userLoading }, { login }] = useSession()
   const [orderState] = useOrder()
   const history = useHistory()
   const [, { showToast }] = useToast()
@@ -102,6 +103,7 @@ const MultiCheckoutUI = (props) => {
     (paymethodSelected?.gateway === 'stripe' && cardList?.cards?.length === 0) ||
     walletCarts.length > 0
 
+  const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -121,8 +123,11 @@ const MultiCheckoutUI = (props) => {
   const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b) => b.accumulates) ?? []
   const isWalletEnabled = (configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' &&
     (configs?.wallet_cash_enabled?.value === '1' ||
-    configs?.wallet_credit_point_enabled?.value === '1'))
+      configs?.wallet_credit_point_enabled?.value === '1'))
+  const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter(field => field.order_type_id === orderState?.options?.type), [checkoutFieldsState, orderState?.options])
 
+  const hexTest = /[0-9A-Fa-f]{6}/g
+  const primaryColor = theme?.colors?.primary?.split?.('#')?.[1]
   const accumulationRateBusiness = (businessId) => {
     const value = loyalBusinessAvailable?.find((loyal) => loyal.business_id === businessId)?.accumulation_rate ?? 0
     return value || (creditPointGeneralPlan?.accumulation_rate ?? 0)
@@ -147,8 +152,7 @@ const MultiCheckoutUI = (props) => {
       return
     }
 
-    if (!userErrors.length && (!requiredFields?.length ||
-      (allowedGuest && (paymethodSelected?.gateway === 'cash' || paymethodSelected?.gateway === 'card_delivery')))) {
+    if (!userErrors.length && !requiredFields?.length) {
       handleGroupPlaceOrder && handleGroupPlaceOrder()
       return
     }
@@ -176,36 +180,57 @@ const MultiCheckoutUI = (props) => {
     setIsUserDetailsEdit(false)
   }
 
+  const checkGuestValidationFields = () => {
+    const userSelected = isCustomerMode ? customerState.user : user
+    const _requiredFields = checkoutFieldsState?.fields
+      .filter((field) => (field?.order_type_id === orderState?.options?.type) && field?.enabled && field?.required_with_guest &&
+        !notFields.includes(field?.validation_field?.code) &&
+        userSelected && !userSelected[field?.validation_field?.code])
+    const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
+    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === orderState?.options?.type && field?.validation_field?.code === 'mobile_phone')
+    if (
+      userSelected &&
+      !userSelected?.cellphone &&
+      ((guestCheckoutCellPhone?.enabled &&
+        guestCheckoutCellPhone?.required_with_guest) ||
+        configs?.verification_phone_required?.value === '1')
+    ) {
+      requiredFieldsCode.push('cellphone')
+    }
+    setRequiredFields(requiredFieldsCode)
+  }
+
   const checkValidationFields = () => {
     setUserErrors([])
     const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = []
-
-    Object.values(validationFields?.fields?.checkout).map(field => {
-      if (field?.enabled && field?.required && !notFields.includes(field.code)) {
-        if (userSelected && !userSelected[field?.code]) {
-          _requiredFields.push(field?.code)
+    Object.values(checkoutFieldsState?.fields).map(field => {
+      if (orderState.options?.type === field?.order_type_id &&
+        field?.enabled &&
+        field?.required &&
+        !notFields.includes(field?.validation_field?.code)
+      ) {
+        if (userSelected && !userSelected[field?.validation_field?.code]) {
+          _requiredFields.push(field?.validation_field?.code)
         }
       }
     })
-
+    const mobilePhoneField = Object.values(checkoutFieldsState?.fields)?.find(field => field?.order_type_id === orderState?.options?.type && field?.validation_field?.code === 'mobile_phone')
     if (
       userSelected &&
       !userSelected?.cellphone &&
-      ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
+      ((mobilePhoneField?.enabled &&
+        mobilePhoneField?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
       _requiredFields.push('cellphone')
     }
     setRequiredFields(_requiredFields)
-
     if (userSelected && userSelected?.cellphone) {
       if (userSelected?.country_phone_code) {
         let phone = null
-        phone = `+${userSelected?.country_phone_code}${userSelected?.cellphone}`
+        phone = `+${userSelected?.country_phone_code}${userSelected?.cellphone.replace(`+${userSelected?.country_phone_code}`, '')}`
         const phoneNumber = parsePhoneNumber(phone)
         if (!phoneNumber?.isValid()) {
           errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_INVALID', 'The field Phone number is invalid.'))
@@ -232,10 +257,13 @@ const MultiCheckoutUI = (props) => {
   }
 
   useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout) {
+    if (checkoutFieldsState?.loading || customerState.loading || userLoading) return
+    if (user?.guest_id) {
+      checkGuestValidationFields()
+    } else {
       checkValidationFields()
     }
-  }, [validationFields, user, customerState])
+  }, [checkoutFieldsState, user, customerState, orderState?.options?.type])
 
   useEffect(() => {
     if (openCarts.length || cartGroup.loading) {
@@ -308,7 +336,6 @@ const MultiCheckoutUI = (props) => {
                   ) : (
                     <UserDetails
                       isUserDetailsEdit={isUserDetailsEdit}
-                      useValidationFields
                       useDefualtSessionManager
                       useSessionUser={!isCustomerMode}
                       isCustomerMode={isCustomerMode}
@@ -316,6 +343,9 @@ const MultiCheckoutUI = (props) => {
                       userId={isCustomerMode && customerState?.user?.id}
                       isCheckout
                       isSuccess={isSuccess}
+                      isOrderTypeValidationField
+                      requiredFields={requiredFields}
+                      checkoutFields={checkoutFields}
                     />
                   )}
                 </WrapperUserDetails>
@@ -474,13 +504,15 @@ const MultiCheckoutUI = (props) => {
           >
             <UserDetails
               isUserDetailsEdit={isUserDetailsEdit}
-              useValidationFields
               useDefualtSessionManager
               useSessionUser={!isCustomerMode}
               isCustomerMode={isCustomerMode}
               userData={isCustomerMode && customerState.user}
               userId={isCustomerMode && customerState?.user?.id}
               requiredFields={requiredFields}
+              isOrderTypeValidationField
+              checkoutFields={checkoutFields}
+              isCheckoutPlace
               setIsSuccess={setIsSuccess}
               isCheckout
               isEdit

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

@@ -153,7 +153,7 @@ const UserDetailsUI = (props) => {
         <Container>
           {isModal && (
             <TitleContainer isAddressFormOpen={isAddressFormOpen && !isEdit}>
-              {!requiredFields && (
+              {!isCheckoutPlace && (
                 <ModalIcon>
                   <MdClose onClick={() => onClose()} />
                 </ModalIcon>
@@ -161,7 +161,7 @@ const UserDetailsUI = (props) => {
               <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>
             </TitleContainer>
           )}
-          {!requiredFields && (
+          {!isCheckoutPlace && (
             <Header className='user-form'>
               {!isModal && (
                 <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>