ordering-ui-external 1.0.0 → 1.1.1

package/src/themes/seven/src/components/LoginForm/index.js

@@ -149,7 +149,9 @@ const LoginFormUI = (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, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   const handleChangePhoneNumber = (number, isValid) => {
@@ -317,7 +319,7 @@ const LoginFormUI = (props) => {
                   <InputPhoneNumber
                     value={credentials?.cellphone}
                     setValue={handleChangePhoneNumber}
-                    handleIsValid={() => {}}
+                    handleIsValid={() => { }}
                   />
                 )}
               </FormInline>
@@ -435,7 +437,7 @@ const LoginFormUI = (props) => {
                   (useLoginByCellphone && loginTab === 'cellphone') &&
                   (configs && Object.keys(configs).length > 0) &&
                   (configs?.twilio_service_enabled?.value === 'true' || configs?.twilio_service_enabled?.value === '1') &&
-                    <SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />
+                  <SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />
                 }
               </SocialButtons>
             ) : (

package/src/themes/seven/src/components/OrderDetails/index.js

@@ -147,7 +147,7 @@ const OrderDetailsUI = (props) => {
       '_blank' // <- This is what makes it open in a new window.
     )
   }
-  
+
   useEffect(() => {
     if (driverLocation) {
       locations[0] = driverLocation

package/src/themes/seven/src/components/SignUpForm/index.js

@@ -172,7 +172,9 @@ const SignUpFormUI = (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, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   const toggleSelect = () => {

package/src/themes/seven/src/components/SignUpForm/styles.js

@@ -287,6 +287,7 @@ export const WrapperBirthday = styled.div`
   .react-datepicker-popper {
     display: block;
   }
+
   .birthdate-input::placeholder {
       color: #dbdcdb;
   }

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

@@ -149,7 +149,9 @@ 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, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/six/index.js

@@ -45,7 +45,7 @@ import { SignUpForm } from './src/components/SignUpForm'
 import { SingleProductCard } from './src/components/SingleProductCard'
 import { UpsellingPage } from './src/components/UpsellingPage'
 import { UserDetails } from './src/components/UserDetails'
-import { UserFormDetails } from './src/components/UserFormDetails'
+import { UserFormDetailsUI as UserFormDetails } from './src/components/UserFormDetails'
 import { NotFoundSource } from './src/components/NotFoundSource'
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm'
 import { ProductIngredient } from './src/components/ProductIngredient'
@@ -53,9 +53,9 @@ import { GoogleLoginButton } from './src/components/GoogleLogin'
 import { AppleLogin } from './src/components/AppleLogin'
 import { SmsLoginButton } from './src/components/SmsLogin'
 
-import { Inputs } from './src/styles/Inputs'
+import { Input as Inputs } from './src/styles/Inputs'
 import { Select } from './src/styles/Select'
-import { Selects } from './src/styles/Selects'
+import { Select as Selects } from './src/styles/Selects'
 import { Tabs, Tab } from './src/styles/Tabs'
 import { Button } from '../../styles/Buttons'
 import { TextArea } from '../../styles/Inputs'

package/src/themes/six/src/components/AddressForm/index.js

@@ -29,7 +29,7 @@ import {
   WrapperSkeleton
 } from './styles'
 import { Button } from '../../../../../styles/Buttons'
-import { Input, TextArea } from '../../styles/inputs'
+import { Input, TextArea } from '../../styles/Inputs'
 const inputNames = [
   { name: 'address', code: 'Address' },
   { name: 'internal_number', code: 'Internal number' },

package/src/themes/six/src/components/BusinessBasicInformation/index.js

@@ -4,7 +4,7 @@ import FiClock from '@meronex/icons/fi/FiClock'
 import GrLocation from '@meronex/icons/gr/GrLocation'
 import GrDeliver from '@meronex/icons/gr/GrDeliver'
 import FaStar from '@meronex/icons/fa/FaStar'
-import { useUtils, useOrder, useLanguage } from 'ordering-components-external'
+import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components-external'
 import { convertHoursToMinutes } from '../../../../../utils'
 
 import {
@@ -23,6 +23,7 @@ export const BusinessBasicInformation = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance }] = useUtils()
+  const [orderingTheme] = useOrderingTheme()
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -32,6 +33,12 @@ export const BusinessBasicInformation = (props) => {
     return _types.join(', ')
   }
 
+  const showDeliveryFee = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const showTime = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const showBusinessInfo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+  const showReviews = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const showDistance = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -58,40 +65,52 @@ export const BusinessBasicInformation = (props) => {
                   <Skeleton width={150} height={30} />
                 )}
               </div>
-              <div>
-                {!loading ? (
-                  <p className='type'>{getBusinessType()}</p>
-                ) : (
-                  <Skeleton width={100} />
-                )}
-              </div>
+              {
+                showBusinessInfo && (
+                  <div>
+                    {!loading ? (
+                      <p className='type'>{getBusinessType()}</p>
+                    ) : (
+                      <Skeleton width={100} />
+                    )}
+                  </div>
+                )
+              }
               <div className='meta'>
-                {!loading ? (
+                {showTime && (
                   <>
-                    {orderState?.options?.type === 1 ? (
-                      <p>
-                        <FiClock />
-                        {convertHoursToMinutes(business?.delivery_time)}
-                      </p>
+                    {!loading ? (
+                      <>
+                        {orderState?.options?.type === 1 ? (
+                          <p>
+                            <FiClock />
+                            {convertHoursToMinutes(business?.delivery_time)}
+                          </p>
+                        ) : (
+                          <p>
+                            <FiClock />
+                            {convertHoursToMinutes(business?.pickup_time)}
+                          </p>
+                        )}
+                      </>
                     ) : (
+                      <Skeleton width={50} />
+                    )}
+                  </>
+                )}
+                {showDistance && (
+                  <>
+                    {!loading ? (
                       <p>
-                        <FiClock />
-                        {convertHoursToMinutes(business?.pickup_time)}
+                        <GrLocation />
+                        {parseDistance(business?.distance || 0)}
                       </p>
+                    ) : (
+                      <Skeleton width={50} />
                     )}
                   </>
-                ) : (
-                  <Skeleton width={50} />
                 )}
-                {!loading ? (
-                  <p>
-                    <GrLocation />
-                    {parseDistance(business?.distance || 0)}
-                  </p>
-                ) : (
-                  <Skeleton width={50} />
-                )}
-                {orderState?.options.type === 1 && (
+                {orderState?.options.type === 1 && showDeliveryFee && (
                   <>
                     {!loading ? (
                       <p>
@@ -103,13 +122,17 @@ export const BusinessBasicInformation = (props) => {
                     )}
                   </>
                 )}
-                {!loading ? (
-                  <p>
-                    <FaStar className='start' />
-                    {business?.reviews?.total}
-                  </p>
-                ) : (
-                  <Skeleton width={50} />
+                {showReviews && (
+                  <>
+                    {!loading ? (
+                      <p>
+                        <FaStar className='start' />
+                        {business?.reviews?.total}
+                      </p>
+                    ) : (
+                      <Skeleton width={50} />
+                    )}
+                  </>
                 )}
               </div>
             </BusinessInfoItem>

package/src/themes/six/src/components/BusinessProductsListing/SearchProducts/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { Select } from '../../../styles/Select'
 import { SearchBar } from '../../SearchBar'
 import { useTheme } from 'styled-components'
-import { useLanguage } from 'ordering-components-external'
+import { useLanguage, useOrderingTheme } from 'ordering-components-external'
 
 export const SearchProducts = (props) => {
   const {
@@ -17,7 +17,8 @@ export const SearchProducts = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
-  const showSort = !theme?.layouts?.business_view?.components?.basic_information?.components?.sort?.hidden
+  const [orderingTheme] = useOrderingTheme()
+  const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
 
   return (
     <>

package/src/themes/six/src/components/BusinessProductsListing/index.js

@@ -22,15 +22,14 @@ import {
 import { NotFoundSource } from '../../../../../components/NotFoundSource'
 import { PageNotFound } from '../../../../../components/PageNotFound'
 import { Cart } from '../../../../../components/Cart'
-import { Select } from '../../../../../styles/Select'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { ProductForm } from '../ProductForm'
-import { SearchBar } from '../SearchBar'
 import { CartFullPage } from '../CartFullPage'
 import { FlotingStatusBar } from '../FlotingStatusBar'
+import { SearchProducts } from './SearchProducts'
 const PIXELS_TO_SCROLL = 300
 const BusinessProductsListingUI = (props) => {
   const {
@@ -174,18 +173,13 @@ const BusinessProductsListingUI = (props) => {
                   </>}
                 {(categoryState.products.length !== 0 || searchValue) && !errorQuantityProducts && (
                   <WrapperSearch>
-                    <SearchBar
-                      onSearch={handleChangeSearch}
-                      search={searchValue}
-                      placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
-                      lazyLoad={businessState?.business?.lazy_load_products_recommended}
-                    />
-                    <Select
-                      notAsync
-                      notReload
-                      options={sortByOptions}
-                      defaultValue={sortByValue}
+                    <SearchProducts
+                      handleChangeSearch={handleChangeSearch}
+                      searchValue={searchValue}
+                      sortByOptions={sortByOptions}
+                      sortByValue={sortByValue}
                       onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+                      businessState={businessState}
                     />
                   </WrapperSearch>
                 )}

package/src/themes/six/src/components/DriverTips/index.js

@@ -9,7 +9,7 @@ import {
   DriverTipLabel,
   WrapperTips
 } from './styles'
-import { Input } from '../../styles/inputs'
+import { Input } from '../../styles/Inputs'
 import { Button } from '../../../../../styles/Buttons'
 const DriverTipsUI = (props) => {
   const {

package/src/themes/six/src/components/ForgotPasswordForm/index.js

@@ -50,7 +50,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/six/src/components/LoginForm/index.js

@@ -29,7 +29,7 @@ import { FacebookLoginButton } from '../../../../../components/FacebookLogin'
 import { AppleLogin } from '../../../../../components/AppleLogin'
 import { SmsLoginButton } from '../../../../../components/SmsLogin'
 import { GoogleLoginButton } from '../../../../../components/GoogleLogin'
-import { Input } from '../../styles/inputs'
+import { Input } from '../../styles/Inputs'
 import { Button } from '../../../../../styles/Buttons'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
 import { formatSeconds } from '../../../../../utils'
@@ -135,7 +135,9 @@ const LoginFormUI = (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, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
   const handleChangePhoneNumber = (number, isValid) => {
     setValidPhoneField(isValid)
@@ -258,14 +260,14 @@ const LoginFormUI = (props) => {
               isPopup={isPopup}
             >
               {
-              props.beforeMidElements?.map((BeforeMidElements, i) => (
-                <React.Fragment key={i}>
-                  {BeforeMidElements}
-                </React.Fragment>))
+                props.beforeMidElements?.map((BeforeMidElements, i) => (
+                  <React.Fragment key={i}>
+                    {BeforeMidElements}
+                  </React.Fragment>))
               }
               {
-              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-                <BeforeMidComponents key={i} {...props} />))
+                props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                  <BeforeMidComponents key={i} {...props} />))
               }
               {useLoginByEmail && loginTab === 'email' && (
                 <Input
@@ -282,7 +284,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
               {(!verifyPhoneState?.loading && willVerifyOtpState && !checkPhoneCodeState?.loading) && (
@@ -331,14 +333,14 @@ const LoginFormUI = (props) => {
                 </WrapperPassword>
               )}
               {
-              props.afterMidElements?.map((MidElement, i) => (
-                <React.Fragment key={i}>
-                  {MidElement}
-                </React.Fragment>))
+                props.afterMidElements?.map((MidElement, i) => (
+                  <React.Fragment key={i}>
+                    {MidElement}
+                  </React.Fragment>))
               }
               {
-              props.afterMidComponents?.map((MidComponent, i) => (
-                <MidComponent key={i} {...props} />))
+                props.afterMidComponents?.map((MidComponent, i) => (
+                  <MidComponent key={i} {...props} />))
               }
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>
@@ -388,21 +390,21 @@ const LoginFormUI = (props) => {
             Object.keys(configs).length > 0 ? (
               <SocialButtons isPopup={isPopup}>
                 {(configs?.facebook_login?.value === 'true' ||
-                configs?.facebook_login?.value === '1') &&
-                configs?.facebook_id?.value &&
-              (
-                <FacebookLoginButton
-                  appId={configs?.facebook_id?.value}
-                  handleSuccessFacebookLogin={handleSuccessFacebook}
-                />
-              )}
+                  configs?.facebook_login?.value === '1') &&
+                  configs?.facebook_id?.value &&
+                  (
+                    <FacebookLoginButton
+                      appId={configs?.facebook_id?.value}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
                 {configs?.apple_login_client_id?.value &&
-              (
-                <AppleLogin
-                  onSuccess={handleSuccessApple}
-                  onFailure={(data) => console.log('onFailure', data)}
-                />
-              )}
+                  (
+                    <AppleLogin
+                      onSuccess={handleSuccessApple}
+                      onFailure={(data) => console.log('onFailure', data)}
+                    />
+                  )}
                 {configs?.google_login_client_id?.value && (
                   <GoogleLoginButton
                     initParams={initParams}
@@ -411,8 +413,8 @@ const LoginFormUI = (props) => {
                   />
                 )}
                 {useLoginByCellphone && loginTab === 'cellphone' &&
-                configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                  configs?.twilio_service_enabled?.value === '1') &&
+                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                    configs?.twilio_service_enabled?.value === '1') &&
                   (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
               </SocialButtons>
             ) : (

package/src/themes/six/src/components/PaymentOptionCash/index.js

@@ -8,7 +8,7 @@ import {
   ErrorText
 } from './styles'
 
-import { Input } from '../../styles/inputs'
+import { Input } from '../../styles/Inputs'
 
 export const PaymentOptionCash = (props) => {
   const {

package/src/themes/six/src/components/ProductForm/index.js

@@ -15,7 +15,7 @@ import { ProductIngredient } from '../../../../../components/ProductIngredient'
 import { ForgotPasswordForm } from '../../../../../components/ForgotPasswordForm'
 import { AddressList } from '../../../../../components/AddressList'
 import { Button } from '../../../../../styles/Buttons'
-import { TextArea } from '../../../../../styles/inputs'
+import { TextArea } from '../../../../../styles/Inputs'
 import { NotFoundSource } from '../../../../../components/NotFoundSource'
 import { Modal } from '../Modal'
 import { ProductOption } from '../ProductOption'

package/src/themes/six/src/components/SearchBar/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { Input } from '../../styles/inputs'
+import { Input } from '../../styles/Inputs'
 import { useTheme } from '../../../../../contexts/ThemeContext'
 import { useLanguage } from 'ordering-components-external'
 import {

package/src/themes/six/src/components/SignUpForm/index.js

@@ -26,7 +26,7 @@ import {
   TermsConditionWrapper
 } from './styles'
 
-import { Input } from '../../styles/inputs'
+import { Input } from '../../styles/Inputs'
 import { Button } from '../../../../../styles/Buttons'
 import { Checkbox } from '../../../../../styles/Checkbox'
 
@@ -173,7 +173,9 @@ const SignUpFormUI = (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, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

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

@@ -6,7 +6,7 @@ import parsePhoneNumber from 'libphonenumber-js'
 
 import { FormInput, ActionsForm, SkeletonForm } from './styles'
 
-import { Input } from '../../styles/inputs'
+import { Input } from '../../styles/Inputs'
 import { Button } from '../../../../../styles/Buttons'
 import { InputPhoneNumber } from '../../../../../components/InputPhoneNumber'
 import { Alert } from '../../../../../components/Confirm'
@@ -150,7 +150,9 @@ 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, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {
@@ -220,14 +222,14 @@ export const UserFormDetailsUI = (props) => {
         {!validationFields?.loading ? (
           <>
             {
-            props.beforeMidElements?.map((BeforeMidElements, i) => (
-              <React.Fragment key={i}>
-                {BeforeMidElements}
-              </React.Fragment>))
+              props.beforeMidElements?.map((BeforeMidElements, i) => (
+                <React.Fragment key={i}>
+                  {BeforeMidElements}
+                </React.Fragment>))
             }
             {
-            props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-              <BeforeMidComponents key={i} {...props} />))
+              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                <BeforeMidComponents key={i} {...props} />))
             }
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
               showField && showField(field.code) && (
@@ -241,9 +243,9 @@ export const UserFormDetailsUI = (props) => {
                       disabled={!isEdit}
                       placeholder={t(field.code.toUpperCase(), field?.name)}
                       defaultValue={
-                      formState?.result?.result
-                        ? formState?.result?.result[field.code]
-                        : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                        formState?.result?.result
+                          ? formState?.result?.result[field.code]
+                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                       }
                       onChange={handleChangeInputEmail}
                       ref={(e) => {
@@ -260,9 +262,9 @@ export const UserFormDetailsUI = (props) => {
                       disabled={!isEdit}
                       placeholder={t(field.code.toUpperCase(), field?.name)}
                       defaultValue={
-                      formState?.result?.result
-                        ? formState?.result?.result[field.code]
-                        : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                        formState?.result?.result
+                          ? formState?.result?.result[field.code]
+                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                       }
                       onChange={handleChangeInput}
                       ref={formMethods.register({
@@ -306,14 +308,14 @@ export const UserFormDetailsUI = (props) => {
               />
             )}
             {
-            props.afterMidElements?.map((MidElement, i) => (
-              <React.Fragment key={i}>
-                {MidElement}
-              </React.Fragment>))
+              props.afterMidElements?.map((MidElement, i) => (
+                <React.Fragment key={i}>
+                  {MidElement}
+                </React.Fragment>))
             }
             {
-             props.afterMidComponents?.map((MidComponent, i) => (
-               <MidComponent key={i} {...props} />))
+              props.afterMidComponents?.map((MidComponent, i) => (
+                <MidComponent key={i} {...props} />))
             }
             <ActionsForm>
               {onCancel && (

package/src/themes/three/src/components/ForgotPasswordForm/index.js

@@ -48,7 +48,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {