ordering-ui-external 1.0.0 → 1.1.1

package/src/components/PaymentOptions/index.js

@@ -179,6 +179,7 @@ const PaymentOptionsUI = (props) => {
 
         {paymethodSelected?.gateway === 'cash' && (
           <PaymentOptionCash
+            data={paymethodSelected?.data}
             orderTotal={cart.total}
             defaultValue={paymethodSelected?.data?.cash}
             onChangeData={handlePaymethodDataChange}
@@ -309,6 +310,7 @@ const PaymentOptionsUI = (props) => {
           <PaymentOptionSquare
             businessId={props.businessId}
             cartTotal={cart?.total}
+            data={isOpenMethod?.paymethod?.credentials}
             body={{
               paymethod_id: isOpenMethod?.paymethod?.id,
               amount: cart.total,
@@ -316,6 +318,7 @@ const PaymentOptionsUI = (props) => {
               cartUuid: cart.uuid
             }}
             onPlaceOrderClick={onPlaceOrderClick}
+            setCreateOrder={setCreateOrder}
           />
         </Modal>
       </PaymentMethodsContainer>

package/src/components/ProductItemAccordion/index.js

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'
 import TiPencil from '@meronex/icons/ti/TiPencil'
 import IosArrowDown from '@meronex/icons/ios/IosArrowDown'
 import VscTrash from '@meronex/icons/vsc/VscTrash'
-import { useUtils, useLanguage, useOrder } from 'ordering-components-external'
+import { useUtils, useLanguage, useOrder, useOrderingTheme } from 'ordering-components-external'
 import { useWindowSize } from '../../hooks/useWindowSize'
 
 import {
@@ -41,7 +41,7 @@ export const ProductItemAccordion = (props) => {
   const [orderState] = useOrder()
   const [{ parsePrice }] = useUtils()
   const windowSize = useWindowSize()
-
+  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')
@@ -51,6 +51,8 @@ export const ProductItemAccordion = (props) => {
   const productActionsEdit = useRef(null)
   const productActionsDelete = useRef(null)
 
+  const showProductImage = !orderingTheme?.theme?.confirmation?.components?.cart?.components?.products?.components?.image?.hidden
+
   const productInfo = () => {
     if (isCartProduct) {
       const ingredients = JSON.parse(JSON.stringify(Object.values(product.ingredients ?? {})))
@@ -130,7 +132,7 @@ export const ProductItemAccordion = (props) => {
                 {product?.quantity}
               </ProductQuantity>
             )}
-            {product?.images && (
+            {product?.images && showProductImage && (
               <WrapperProductImage>
                 <ProductImage bgimage={product?.images} />
               </WrapperProductImage>

package/src/components/RenderProductsLayout/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/components/RenderProductsLayout/index.js

@@ -10,11 +10,9 @@ import { BusinessProductsCategories as CategoriesLayoutGroceries } from '../Busi
 import { BusinessProductsList as ProductListLayoutGroceries } from '../BusinessProductsList/layouts/groceries'
 import { Modal } from '../Modal'
 import { Cart } from '../Cart'
-import { SearchBar } from '../SearchBar'
 import { NotFoundSource } from '../NotFoundSource'
 import { Button } from '../../styles/Buttons'
-import { Select } from '../../styles/Select'
-
+import { SearchProducts } from './SearchProducts'
 import {
   Title,
   WrappLayout,
@@ -111,18 +109,13 @@ export const RenderProductsLayout = (props) => {
                   <>
                     {(categoryState.products.length !== 0 || searchValue) && (
                       <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>
                     )}
@@ -197,18 +190,13 @@ export const RenderProductsLayout = (props) => {
                         : 'hidden'
                     }}
                   >
-                    <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>
                   <BusinessContent>

package/src/components/SignUpForm/index.js

@@ -178,7 +178,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(() => {
@@ -425,7 +427,7 @@ const SignUpFormUI = (props) => {
             <>
               {Object.keys(configs).length > 0 ? (
                 <SocialButtons isPopup={isPopup}>
-                  { isFacebookLogin && configs?.facebook_id?.value && (
+                  {isFacebookLogin && configs?.facebook_id?.value && (
                     <FacebookLoginButton
                       appId={configs?.facebook_id?.value}
                       handleSuccessFacebookLogin={handleSuccessFacebook}

package/src/components/SingleProductCard/index.js

@@ -21,7 +21,7 @@ export const SingleProductCard = (props) => {
     isSkeleton,
     onProductClick,
     isCartOnProductsList,
-    productAddedToCart,
+    productAddedToCartLength,
     productToIdLoading,
     useCustomFunctionality,
     onCustomClick,
@@ -61,9 +61,9 @@ export const SingleProductCard = (props) => {
       >
         {!useCustomFunctionality && (
           <>
-            {!isSkeleton && productAddedToCart && productAddedToCart?.quantity > 0 && (
+            {!isSkeleton && productAddedToCartLength > 0 && (
               <QuantityContainer>
-                <span>{productAddedToCart?.quantity}</span>
+                <span>{productAddedToCartLength}</span>
               </QuantityContainer>
             )}
             <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0}>

package/src/components/TaxInformation/index.js

@@ -20,7 +20,7 @@ export const TaxInformation = (props) => {
         ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
         : type === 'fee'
           ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
-          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
+          : Object.keys(data?.discounts ?? {}).find(code => code.includes(product?.code))
     )
   }
 

package/src/components/UserFormDetails/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useSession, useLanguage, useCustomer } from 'ordering-components-external'
+import { useSession, useLanguage, useCustomer, useOrderingTheme } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
 
@@ -26,17 +26,18 @@ export const UserFormDetailsUI = (props) => {
     handleButtonUpdateClick,
     isCheckout,
     userData,
-    isCustomerMode
+    isCustomerMode,
+    isOriginalLayout
   } = props
 
   const formMethods = useForm()
   const [, t] = useLanguage()
-
   const [{ user: userSession }] = useSession()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { setUserCustomer }] = useCustomer()
+  const [orderingTheme] = useOrderingTheme()
   const emailInput = useRef(null)
 
   const user = userData || userSession
@@ -50,6 +51,8 @@ export const UserFormDetailsUI = (props) => {
   }
 
   const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
+  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
+  const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
 
   const setUserCellPhone = (isEdit = false) => {
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -150,7 +153,13 @@ 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, '')
+    }
+  }
+
+  const showFieldWithTheme = (name) => {
+    return !orderingTheme?.theme?.profile?.components?.[name]?.hidden
   }
 
   useEffect(() => {
@@ -220,17 +229,17 @@ 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) && (
+              showField && showField(field.code) && showFieldWithTheme(field.code) && (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
                     <Input
@@ -241,9 +250,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 +269,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({
@@ -277,7 +286,7 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
-            {!!showInputPhoneNumber && (
+            {!!showInputPhoneNumber && showCustomerCellphone && (
               <InputPhoneNumber
                 user={user}
                 value={userPhoneNumber}
@@ -286,7 +295,7 @@ export const UserFormDetailsUI = (props) => {
                 disabled={!isEdit}
               />
             )}
-            {!isCheckout && (
+            {!isCheckout && showCustomerPassword && (
               <Input
                 type='password'
                 name='password'
@@ -306,17 +315,17 @@ 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 && (
+              {onCancel && !isOriginalLayout && (
                 <Button
                   outline
                   type='button'

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;
     }