ordering-ui-external 1.0.1 → 1.1.2

package/src/components/UserProfileForm/ProfileOptions/index.js

@@ -3,12 +3,16 @@ import { FlexTabs } from './styles'
 import { Tabs, Tab } from '../../../styles/Tabs'
 import BsPerson from '@meronex/icons/bs/BsPerson'
 import AiOutlineUnorderedList from '@meronex/icons/ai/AiOutlineUnorderedList'
-import { useEvent, useLanguage } from 'ordering-components-external'
+import FaAddressBook from '@meronex/icons/fa/FaAddressBook';
+import { useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
 
 export const ProfileOptions = ({ value }) => {
   const [tabValue] = useState(value)
   const [, t] = useLanguage()
   const [events] = useEvent()
+  const [orderingTheme] = useOrderingTheme()
+
+  const showAddressListTab = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
 
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)
@@ -22,6 +26,13 @@ export const ProfileOptions = ({ value }) => {
             <BsPerson /> {t('MY_ACCOUNT', 'My Account')}
           </a>
         </Tab>
+        {showAddressListTab && (
+          <Tab active={tabValue === 'addresses'}>
+            <a onClick={() => handleGoToPage({ page: 'addresses' })}>
+              <FaAddressBook /> {t('MY_ADDRESSES', 'My Addresses')}
+            </a>
+          </Tab>
+        )}
         <Tab active={tabValue === 'orders'}>
           <a onClick={() => handleGoToPage({ page: 'orders' })}>
             <AiOutlineUnorderedList /> {t('MY_ORDERS', 'My orders')}

package/src/components/UserProfileForm/index.js

@@ -5,10 +5,12 @@ import {
   useLanguage,
   useSession,
   DragAndDrop,
-  ExamineClick
+  ExamineClick,
+  useOrderingTheme
 } from 'ordering-components-external'
 
 import { UserFormDetailsUI } from '../UserFormDetails'
+import { UserFormDetailsUI as UserFormDetailsFiveUI } from '../../themes/five/src/components/UserFormDetails'
 import { AddressList } from '../AddressList'
 import { Alert } from '../Confirm'
 
@@ -50,6 +52,16 @@ const UserProfileFormUI = (props) => {
   const [edit, setEdit] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const inputRef = useRef(null)
+  const [orderingTheme] = useOrderingTheme()
+
+  const showCustomerPicture = !orderingTheme?.theme?.profile?.components?.picture?.hidden
+  const showCustomerName = !orderingTheme?.theme?.profile?.components?.name?.hidden
+  const showCustomerLastName = !orderingTheme?.theme?.profile?.components?.last_name?.hidden
+  const showCustomerEmail = !orderingTheme?.theme?.profile?.components?.email?.hidden
+  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
+  const showAddressList = !orderingTheme?.theme?.profile?.components?.address_list?.hidden
+  const userFormLayoutColumn = orderingTheme?.theme?.profile?.components?.layout?.position === 'column'
+  const showEditButton = showCustomerName || showCustomerLastName || showCustomerEmail || showCustomerCellphone
 
   const handleFiles = (files) => {
     if (files.length === 1) {
@@ -112,29 +124,31 @@ const UserProfileFormUI = (props) => {
       )}
       <Container>
         <UserProfileContainer mbottom={isHiddenAddress && 25}>
-          <UserImage className='user-image'>
-            <Image onClick={() => handleClickImage()} isImage={user?.photo || (formState?.changes?.photo && !formState.result.error)}>
-              <ExamineClick onFiles={handleFiles} childRef={(e) => { inputRef.current = e }} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
-                <DragAndDrop onDrop={dataTransfer => handleFiles(dataTransfer.files)} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
-                  {formState.changes?.photo && formState.loading
-                    ? (<SkeletonWrapper><Skeleton /></SkeletonWrapper>)
-                    : ((!formState.changes?.photo || formState.result?.result === 'Network Error' || formState.result.error)
-                      ? user?.photo
-                        ? (<img src={user?.photo} alt='user image' width='200px' height='200px' loading='lazy' />)
-                        : (
-                          <UploadImageIcon>
-                            <BiImage />
-                            <span>{t('DRAG_DROP_IMAGE_HERE', 'Put your image here')}</span>
-                          </UploadImageIcon>
-                        )
-                      : formState?.changes?.photo && formState.result.error &&
+          {showCustomerPicture && (
+            <UserImage className='user-image'>
+              <Image onClick={() => handleClickImage()} isImage={user?.photo || (formState?.changes?.photo && !formState.result.error)}>
+                <ExamineClick onFiles={handleFiles} childRef={(e) => { inputRef.current = e }} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
+                  <DragAndDrop onDrop={dataTransfer => handleFiles(dataTransfer.files)} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
+                    {formState.changes?.photo && formState.loading
+                      ? (<SkeletonWrapper><Skeleton /></SkeletonWrapper>)
+                      : ((!formState.changes?.photo || formState.result?.result === 'Network Error' || formState.result.error)
+                        ? user?.photo
+                          ? (<img src={user?.photo} alt='user image' width='200px' height='200px' loading='lazy' />)
+                          : (
+                            <UploadImageIcon>
+                              <BiImage />
+                              <span>{t('DRAG_DROP_IMAGE_HERE', 'Put your image here')}</span>
+                            </UploadImageIcon>
+                          )
+                        : formState?.changes?.photo && formState.result.error &&
                         <img src={formState?.changes?.photo} alt='user image' loading='lazy' />
-                    )}
-                </DragAndDrop>
-              </ExamineClick>
-            </Image>
-            <Camera><FiCamera /></Camera>
-          </UserImage>
+                      )}
+                  </DragAndDrop>
+                </ExamineClick>
+              </Image>
+              <Camera><FiCamera /></Camera>
+            </UserImage>
+          )}
           <SideForm className='user-form'>
             {!edit ? (
               formState.loading ? (
@@ -146,34 +160,49 @@ const UserProfileFormUI = (props) => {
                 </UserData>
               ) : (
                 <UserData>
-                  <h1>{userData?.name || user?.name} {userData?.lastname || user?.lastname}</h1>
-                  <p>{userData?.email || user.email}</p>
-                  {(userData?.cellphone || user?.cellphone) && (
-                    <p style={{direction: 'ltr'}}>{(userData?.country_phone_code || user?.country_phone_code) && `+${(userData?.country_phone_code || user?.country_phone_code)} `}{(userData?.cellphone || user?.cellphone)}</p>
+                  <h1>
+                    {showCustomerName && (userData?.name || user?.name)}
+                    {showCustomerLastName && (userData?.lastname || user?.lastname)}
+                  </h1>
+                  <p>{(showCustomerEmail && (userData?.email || user.email))}</p>
+                  {(showCustomerCellphone && (userData?.cellphone || user?.cellphone)) && (
+                    <p style={{ direction: 'ltr' }}>{(userData?.country_phone_code || user?.country_phone_code) && `+${(userData?.country_phone_code || user?.country_phone_code)} `}{(userData?.cellphone || user?.cellphone)}</p>
+                  )}
+                  {showEditButton && (
+                    <Button
+                      color='primary'
+                      outline
+                      onClick={() => toggleEditState(true)}
+                    >
+                      {t('EDIT', 'Edit')}
+                    </Button>
                   )}
-                  <Button
-                    color='primary'
-                    outline
-                    onClick={() => toggleEditState(true)}
-                  >
-                    {t('EDIT', 'Edit')}
-                  </Button>
                 </UserData>
               )
             ) : (
               <WrapperForm>
-                <UserFormDetailsUI
-                  {...props}
-                  onCancel={toggleEditState}
-                  onCloseProfile={() => setEdit(false)}
-                  isHiddenAddress={isHiddenAddress}
-                />
+                {userFormLayoutColumn ? (
+                  <UserFormDetailsFiveUI
+                    {...props}
+                    onCancel={toggleEditState}
+                    onCloseProfile={() => setEdit(false)}
+                    isHiddenAddress={isHiddenAddress}
+                    isOldLayout
+                  />
+                ) : (
+                  <UserFormDetailsUI
+                    {...props}
+                    onCancel={toggleEditState}
+                    onCloseProfile={() => setEdit(false)}
+                    isHiddenAddress={isHiddenAddress}
+                  />
+                )}
               </WrapperForm>
             )}
 
           </SideForm>
         </UserProfileContainer>
-        {(userData?.addresses || user?.addresses) && !isHiddenAddress && (
+        {(userData?.addresses || user?.addresses) && !isHiddenAddress && showAddressList && (
           <SavedPlaces>
             <h1>{t('SAVED_PLACES', 'Saved places')}</h1>
             <AddressList isModal addressList={user?.addresses} />

package/src/components/UserProfileForm/styles.js

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components'
 
-export const Container = styled.div``
+export const Container = styled.div`
+  margin-bottom: 20px;
+`
 
 export const UserProfileContainer = styled.div`
   display: flex;

package/src/hooks/useCountdownTimer.js

@@ -1,26 +1,26 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from 'react'
 
 /**
  * Hook for countdown seconds
  * @param {int} initialCount
  * @param {boolean} start
  */
-export function useCountdownTimer(initialCount, start) {
-  const [count, setCount] = useState(initialCount);
+export function useCountdownTimer (initialCount, start) {
+  const [count, setCount] = useState(initialCount)
 
   useEffect(() => {
     if (start) {
       const secondsLeft = setInterval(() => {
-        setCount(c => c - (c == 0 ? 0 : 1));
-      }, 1000);
-      return () => clearInterval(secondsLeft);
+        setCount(c => c - (c === 0 ? 0 : 1))
+      }, 1000)
+      return () => clearInterval(secondsLeft)
     }
-  }, [start]);
+  }, [start])
 
   return [
     count,
     setCount,
     /** reset */
-    () => {setCount(initialCount)}
-  ];
+    () => { setCount(initialCount) }
+  ]
 }

package/src/index.js

@@ -112,7 +112,20 @@ import {
   scrollTo,
   bytesConverter,
   formatSeconds,
-  verifyDecimals
+  verifyDecimals,
+  getDistance,
+  checkSiteUrl,
+  convertToRadian,
+  fieldsToSort,
+  flatArray,
+  formatUrlVideo,
+  getGoogleMapImage,
+  getHourMin,
+  getIconCard,
+  getTraduction,
+  priceList,
+  reviewCommentList,
+  shape
 } from './utils'
 
 export {
@@ -244,5 +257,18 @@ export {
   scrollTo,
   bytesConverter,
   formatSeconds,
-  verifyDecimals
+  verifyDecimals,
+  getDistance,
+  checkSiteUrl,
+  convertToRadian,
+  fieldsToSort,
+  flatArray,
+  formatUrlVideo,
+  getGoogleMapImage,
+  getHourMin,
+  getIconCard,
+  getTraduction,
+  priceList,
+  reviewCommentList,
+  shape
 }

package/src/themes/callcenterOriginal/src/components/BusinessProductsList/layouts/groceries/styles.js

@@ -27,6 +27,7 @@ export const WrapAllCategories = styled.div`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     img {
       border-radius: 7.6px;
       min-width: 41px;

package/src/themes/callcenterOriginal/src/components/BusinessProductsList/styles.js

@@ -30,6 +30,7 @@ export const WrapAllCategories = styled.div`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     img {
       border-radius: 7.6px;
       min-width: 41px;
@@ -42,6 +43,7 @@ export const WrapAllCategories = styled.div`
         margin-right: 0;
       `}
     }
+
     @media (min-width: 993px) {
       margin: 0px;
     }
@@ -62,6 +64,7 @@ export const WrapAllCategories = styled.div`
       cursor: pointer;
     }
   }
+
   h3 {
     font-weight: 600;
     font-size: 24px;
@@ -70,6 +73,7 @@ export const WrapAllCategories = styled.div`
     ${props => props.theme?.rtl && css`
       margin: 0px 10px 0px 0px;
     `}
+
     @media (min-width: 993px) {
       margin: 0px;
     }

package/src/themes/callcenterOriginal/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(() => {

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

@@ -140,7 +140,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) => {

package/src/themes/callcenterOriginal/src/components/SignUpBusiness/index.js

@@ -139,7 +139,9 @@ const SignUpBusinessUI = (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/callcenterOriginal/src/components/SignUpForm/index.js

@@ -145,7 +145,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/callcenterOriginal/src/components/UserFormDetails/index.js

@@ -157,7 +157,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(() => {
@@ -228,14 +230,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} />))
             }
             <Divider />
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
@@ -253,9 +255,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) => {
@@ -276,9 +278,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({
@@ -331,14 +333,14 @@ export const UserFormDetailsUI = (props) => {
             )}
             <Divider />
             {
-            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>
               {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && (

package/src/themes/eight/src/components/BusinessProductsList/index.js

@@ -52,7 +52,7 @@ const BusinessProductsListUI = (props) => {
                   businessId={businessId}
                   onProductClick={onProductClick}
                   isCartOnProductsList={isCartOnProductsList}
-                  productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                 />
               ))
             }
@@ -75,7 +75,7 @@ const BusinessProductsListUI = (props) => {
                           businessId={businessId}
                           onProductClick={onProductClick}
                           isCartOnProductsList={isCartOnProductsList}
-                          productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                          productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
                     </ProductsListing>
@@ -105,7 +105,7 @@ const BusinessProductsListUI = (props) => {
                               product={product}
                               onProductClick={onProductClick}
                               isCartOnProductsList={isCartOnProductsList}
-                              productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                              productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                             />
                           ))
                         }

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

@@ -151,7 +151,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) => {
@@ -269,26 +271,26 @@ const LoginFormUI = (props) => {
                 {(configs?.facebook_login?.value === 'true' ||
                   configs?.facebook_login?.value === '1') &&
                   configs?.facebook_id?.value &&
-                (
-                  <FacebookLoginButton
-                    appId={configs?.facebook_id?.value}
-                    handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
-                )}
+                  (
+                    <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)}
+                    />
+                  )}
                 {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) }}
-                  />
-                )}
+                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                    configs?.twilio_service_enabled?.value === '1') && (
+                    <SmsLoginButton
+                      handleSmsLogin={() => { setLoginWithOtpState(true) }}
+                    />
+                  )}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>
@@ -331,14 +333,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' && (
                 <CustomInputContainer
@@ -360,7 +362,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -416,14 +418,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}>

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

@@ -67,7 +67,7 @@ const SignUpFormUI = (props) => {
   const [, { login }] = useSession()
   const emailInput = useRef(null)
   const isFacebookLogin = configs?.facebook_login?.value === 'true'
-  
+
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [passwordSee, setPasswordSee] = useState(false)
@@ -175,7 +175,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/eight/src/components/SingleProductCard/index.js

@@ -22,7 +22,7 @@ export const SingleProductCard = (props) => {
     isSkeleton,
     onProductClick,
     isCartOnProductsList,
-    productAddedToCart
+    productAddedToCartLength
   } = props
 
   const [, t] = useLanguage()
@@ -61,9 +61,9 @@ export const SingleProductCard = (props) => {
       >
         {!isSkeleton ? (
           <WrapLogo>
-            {!isSkeleton && productAddedToCart && productAddedToCart?.quantity > 0 && (
+            {!isSkeleton && productAddedToCartLength > 0 && (
               <QuantityContainer>
-                <span>{productAddedToCart?.quantity}</span>
+                <span>{productAddedToCartLength}</span>
               </QuantityContainer>
             )}
             <CardLogo