ordering-ui-external 1.5.5 → 1.6.0

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

@@ -306,6 +306,7 @@ export const FarAwayMessage = styled.div`
   border-radius: 7.6px;
   padding: 6px 15px;
   box-sizing: border-box;
+  z-index: 2000;
   margin: 10px 0px 0px 0px !important;
 
   left: 5px;

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

@@ -77,8 +77,8 @@ const AddressFormUI = (props) => {
       : formState.changes?.location ?? null
   )
 
-  const isHideMap = orderingTheme?.theme?.header?.components?.address_form?.components?.map?.hidden
-  const isHideIcons = orderingTheme?.theme?.header?.components?.address_form?.components?.icons?.hidden
+  const isHideMap = orderingTheme?.theme?.address?.components?.map?.hidden
+  const isHideIcons = orderingTheme?.theme?.address?.components?.icons?.hidden
 
   const maxLimitLocation = configState?.configs?.meters_to_change_address?.value
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value

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

@@ -91,7 +91,7 @@ const AddressListUI = (props) => {
   const showIcons = !orderingTheme?.theme?.profile?.components?.address_list?.components?.icons?.hidden
   const showZipcode = !orderingTheme?.theme?.profile?.components?.address_list?.components?.zipcode?.hidden
   const showInternalNumber = !orderingTheme?.theme?.profile?.components?.address_list?.components?.internal_number?.hidden
-
+  const notFoundImage = orderingTheme?.theme?.profile?.components?.address_list?.components?.image
   const openAddress = (address) => {
     setCurAddress(address)
     setAddressOpen(true)
@@ -326,6 +326,7 @@ const AddressListUI = (props) => {
         {!(addressList.loading || actionStatus.loading || orderState.loading) && addressList.error && (
           addressList.error.length > 0 && (
             <NotFoundSource
+              image={notFoundImage}
               content={addressList.error[0]?.message || addressList.error[0]}
             />
           )

package/src/themes/five/src/components/AddressList/styles.js

@@ -4,7 +4,10 @@ import { darken } from 'polished'
 export const AddressListContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0px 10px;
+  padding: 0;
+  @media (min-width: 768px) {
+        padding: 0px 10px;
+      }
   ${({ isProfile }) => !isProfile && css`
     width: 100%;
   `}

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

@@ -84,7 +84,8 @@ export const BusinessBasicInformation = (props) => {
   const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
   const isInfoShrunken = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
   const hideCity = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
-
+  const layoutsWithOldSearch = ['starbucks', 'old']
+  const hideSearch = layoutsWithOldSearch.includes(orderingTheme?.theme?.business_view?.components?.product_search?.components?.layout?.type)
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -349,7 +350,7 @@ export const BusinessBasicInformation = (props) => {
             </BusinessInfoItem>
           </BusinessInfo>
         </BusinessInfoContent>
-        {(categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !business?.professionals?.length && (
+        {!hideSearch && (categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !business?.professionals?.length && (
           <SearchComponent />
         )}
       </BusinessInfoContainer>

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

@@ -62,7 +62,8 @@ const BusinessControllerUI = (props) => {
     businessDeliveryTime,
     businessPickupTime,
     businessDistance,
-    handleFavoriteBusiness
+    handleFavoriteBusiness,
+    businessState
   } = props
   const [configState] = useConfig()
   const theme = useTheme()
@@ -78,6 +79,13 @@ const BusinessControllerUI = (props) => {
   const favoriteRef = useRef(null)
 
   const businessRows = orderingTheme?.theme?.business_listing_view?.components?.layout?.rows
+  const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
+  const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
+  const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden
+  const hideBusinessDistance = theme?.business_listing_view?.components?.business?.components?.distance?.hidden
+  const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
+  const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+  const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
 
   // const handleShowAlert = () => {
   //   setAlertState({ open: true, content: [t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The Business is closed at the moment')] })
@@ -92,7 +100,7 @@ const BusinessControllerUI = (props) => {
 
   const handleChangeFavorite = () => {
     if (auth) {
-      handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+      handleFavoriteBusiness && handleFavoriteBusiness(!businessState?.business?.favorite)
     } else {
       setModalPageToShow('login')
       setIsModalOpen(true)
@@ -157,13 +165,13 @@ const BusinessControllerUI = (props) => {
             {isSkeleton ? (
               <Skeleton height={isCustomerMode ? 100 : 140} />
             ) : (
-              <BusinessHeader bgimage={optimizeImage((businessHeader || business?.header || theme.images?.dummies?.businessLogo), 'h_400,c_limit')} isClosed={!isBusinessOpen}>
+              <BusinessHeader bgimage={optimizeImage((businessHeader || business?.header || theme.images?.dummies?.businessHeader), 'h_400,c_limit')} isClosed={!isBusinessOpen}>
                 <BusinessTags>
                   {(businessFeatured ?? business?.featured) &&
                     <span className='crown'>
                       <FaCrown />
                     </span>}
-                  {!isCustomLayout && (configState?.configs?.preorder_status_enabled?.value === '1') && (
+                  {!hideBusinessOffer && !isCustomLayout && (configState?.configs?.preorder_status_enabled?.value === '1') && (
                     <div>
                       {getBusinessOffer((businessOffers ?? business?.offers)) && <span>{getBusinessOffer((businessOffers ?? business?.offers)) || parsePrice(0)}</span>}
                       {!isBusinessOpen && <span>{t('PREORDER', 'PreOrder')}</span>}
@@ -179,33 +187,41 @@ const BusinessControllerUI = (props) => {
           </BusinessHero>
           <BusinessContent>
             <BusinessLogoWrapper>
-              <WrapperBusinessLogo isSkeleton={isSkeleton} isCustomerMode={isCustomerMode}>
-                {!isSkeleton && (businessLogo || business?.logo || theme.images?.dummies?.businessLogo) ? (
-                  <BusinessLogo bgimage={optimizeImage((businessLogo || business?.logo || theme.images?.dummies?.businessLogo), 'h_200,c_limit')} />
-                ) : (
-                  <Skeleton height={70} width={70} />
-                )}
-              </WrapperBusinessLogo>
-              <BusinessStarInfo>
-                {!isSkeleton ? (
-                  (businessReviews ?? business?.reviews?.total) > 0 && (
-                    <div className='reviews'>
-                      <BisStar />
-                      <span>{(businessReviews ?? business?.reviews?.total)}</span>
-                    </div>
-                  )
-                ) : (
-                  <Skeleton width={50} />
-                )}
-                <FavoriteWrapper ref={favoriteRef} onClick={handleChangeFavorite}>
-                  {!isSkeleton ? (
-                    <>
-                      {(business?.favorite) ? <Like /> : <DisLike />}
-                    </>
+              {!hideBusinessLogo && (
+                <WrapperBusinessLogo isSkeleton={isSkeleton} isCustomerMode={isCustomerMode}>
+                  {!isSkeleton && (businessLogo || business?.logo || theme.images?.dummies?.businessLogo) ? (
+                    <BusinessLogo bgimage={optimizeImage((businessLogo || business?.logo || theme.images?.dummies?.businessLogo), 'h_200,c_limit')} />
                   ) : (
-                    <Skeleton width={16} height={16} />
+                    <Skeleton height={70} width={70} />
                   )}
-                </FavoriteWrapper>
+                </WrapperBusinessLogo>
+              )}
+              <BusinessStarInfo>
+                {!hideBusinessReviews && (
+                  <>
+                    {!isSkeleton ? (
+                      (businessReviews ?? business?.reviews?.total) > 0 && (
+                        <div className='reviews'>
+                          <BisStar />
+                          <span>{(businessReviews ?? business?.reviews?.total)}</span>
+                        </div>
+                      )
+                    ) : (
+                      <Skeleton width={50} />
+                    )}
+                  </>
+                )}
+                {!hideBusinessFavorite && (
+                  <FavoriteWrapper ref={favoriteRef} onClick={handleChangeFavorite}>
+                    {!isSkeleton ? (
+                      <>
+                        {(businessState?.business?.favorite) ? <Like /> : <DisLike />}
+                      </>
+                    ) : (
+                      <Skeleton width={16} height={16} />
+                    )}
+                  </FavoriteWrapper>
+                )}
               </BusinessStarInfo>
             </BusinessLogoWrapper>
             <BusinessInfo className='info'>
@@ -218,7 +234,7 @@ const BusinessControllerUI = (props) => {
                   )}
                 </div>
                 <Medadata isCustomerMode={isCustomerMode} isSkeleton={isSkeleton}>
-                  {orderType === 1 && (
+                  {!hideBusinessFee && orderType === 1 && (
                     <>
                       {(businessDeliveryPrice ?? business?.delivery_price) >= 0 ? (
                         <p>
@@ -230,21 +246,29 @@ const BusinessControllerUI = (props) => {
                       )}
                     </>
                   )}
-                  {Object.keys(business).length > 0 ? (
-                    <p className='bullet'>
-                      <GoPrimitiveDot />
-                      {convertHoursToMinutes(orderState?.options?.type === 1 ? (businessDeliveryTime ?? business?.delivery_time) : (businessPickupTime ?? business?.pickup_time)) || <Skeleton width={100} />}
-                    </p>
-                  ) : (
-                    <Skeleton width={65} />
+                  {!hideBusinessTime && (
+                    <>
+                      {Object.keys(business).length > 0 ? (
+                        <p className='bullet'>
+                          <GoPrimitiveDot />
+                          {convertHoursToMinutes(orderState?.options?.type === 1 ? (businessDeliveryTime ?? business?.delivery_time) : (businessPickupTime ?? business?.pickup_time)) || <Skeleton width={100} />}
+                        </p>
+                      ) : (
+                        <Skeleton width={65} />
+                      )}
+                    </>
                   )}
-                  {(businessDistance ?? business?.distance) >= 0 ? (
-                    <p className='bullet'>
-                      <GoPrimitiveDot />
-                      {parseDistance((businessDistance ?? business?.distance))}
-                    </p>
-                  ) : (
-                    <Skeleton width={65} />
+                  {!hideBusinessDistance && (
+                    <>
+                      {(businessDistance ?? business?.distance) >= 0 ? (
+                        <p className='bullet'>
+                          <GoPrimitiveDot />
+                          {parseDistance((businessDistance ?? business?.distance))}
+                        </p>
+                      ) : (
+                        <Skeleton width={65} />
+                      )}
+                    </>
                   )}
                   {isCustomerMode && hasInformationLength && (
                     <CallCenterInformation>

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

@@ -39,10 +39,10 @@ export const BusinessReviewsUI = (props) => {
     if (raiting) handleClickOption(raiting)
   }
 
-  const showRanking = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.ranking?.hidden
-  const showReviewDate = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.review_date?.hidden
-  const showCustomerComments = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.customer_comments?.hidden
-  const showSearch = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.search?.hidden
+  const showRanking = !orderingTheme?.theme?.business_view?.components?.review?.components?.ranking?.hidden
+  const showReviewDate = !orderingTheme?.theme?.business_view?.components?.review?.components?.review_date?.hidden
+  const showCustomerComments = !orderingTheme?.theme?.business_view?.components?.review?.components?.customer_comments?.hidden
+  const showSearch = !orderingTheme?.theme?.business_view?.components?.review?.components?.search?.hidden
   const hideElement = !(!showReviewDate && !showCustomerComments)
 
   const reviewPoints = [1, 2, 3, 4, 5]

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -96,7 +96,9 @@ const BusinessesListingUI = (props) => {
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
   const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
-
+  const hideSearch = theme?.business_listing_view?.components?.search?.hidden
+  const hideFilter = theme?.business_listing_view?.components?.filter?.hidden
+  const hideSearchSection = hideCities && hideSearch && hideFilter
   const businessesIds = isCustomLayout &&
     businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
@@ -314,23 +316,25 @@ const BusinessesListingUI = (props) => {
         {isCustomerMode && (
           <OrdersSection titleContent={t('PREVIOUS_ORDERS', 'Previous orders')} />
         )}
-        {!isCustomerMode && (
+        {!isCustomerMode && !hideSearchSection && (
           <>
             <WrapperSearch isCustomLayout={isCustomLayout} isCustomerMode={isCustomerMode}>
-              <SearchBar
-                lazyLoad
-                search={searchValue}
-                isCustomLayout={isCustomLayout}
-                placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
-                onSearch={handleChangeSearch}
-                handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
-              />
+              {!hideSearch && (
+                <SearchBar
+                  lazyLoad
+                  search={searchValue}
+                  isCustomLayout={isCustomLayout}
+                  placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+                  onSearch={handleChangeSearch}
+                  handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
+                />
+              )}
               {!hideCities && citiesState?.cities?.length > 0 && (
                 <Button color='primary' onClick={handleOpenCities}>
                   {citiesState?.cities?.find(city => city?.id === orderState?.options?.city_id)?.name || t('SELECT_A_CITY', 'Select a city')}
                 </Button>
               )}
-              {configs?.advanced_business_search_enabled?.value === '1' && (
+              {!hideFilter && configs?.advanced_business_search_enabled?.value === '1' && (
                 <FiFilter onClick={() => onRedirectPage({ page: 'business_search' })} />
               )}
               {isCustomLayout && (

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

@@ -1,13 +1,15 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { OriginalHomeHero } from './layouts/OriginalHomeHero'
 import { RedHomeHero } from './layouts/RedHomeHero'
 import { StarbucksHomeHero } from './layouts/StarbucksHomeHero'
 
 export const HomeHero = (props) => {
+  const theme = useTheme()
   const HomeLayoutConfig = {
     homepage_settings: {
-      layout: 'original', // 'original', 'starbucks', 'red'
-      contentPosition: 'left' // 'left', 'right', top, 'bottom', 'center'
+      layout: theme?.homepage_view?.components?.layout?.type || 'original', // 'original', 'starbucks', 'red'
+      contentPosition: theme?.homepage_view?.components?.layout?.position || 'left' // 'left', 'right', top, 'bottom', 'center'
     }
   }
   const layout = HomeLayoutConfig?.homepage_settings?.layout !== undefined

package/src/themes/five/src/components/MultiOrdersDetails/styles.js

@@ -178,7 +178,11 @@ export const SingleOrderHeader = styled.div`
   > div {
     > div {
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      align-items: center; 
+      @media (min-width: 769px) {
+        flex-direction: row;
+      }
       p {
         line-height: 24px;
         font-size: 14px;

package/src/themes/five/src/components/OrderDetails/OrderActionsSection.js

@@ -0,0 +1,33 @@
+import { useLanguage } from 'ordering-components-external'
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+import { MyOrderActions } from './styles'
+
+export const OrderActionsSection = (props) => {
+  const {
+    userCustomerId,
+    isService,
+    handleGoToPage
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <>
+      {!userCustomerId && (
+        <MyOrderActions>
+          <Button
+            color='primary'
+            outline
+            onClick={() => handleGoToPage({ page: 'orders' })}
+          >
+            {isService
+              ? t('YOUR_APPOINTMENTS', 'Your appointments')
+              : t('YOUR_ORDERS', theme?.defaultLanguages?.YOUR_ORDERS || 'Your Orders')}
+          </Button>
+        </MyOrderActions>
+      )}
+    </>
+  )
+}

package/src/themes/five/src/components/OrderDetails/OrderHeaderInfoSection.js

@@ -0,0 +1,20 @@
+import { useLanguage } from 'ordering-components-external'
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { HeaderInfo } from './styles'
+
+export const OrderHeaderInfoSection = (props) => {
+  const {
+    isService
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <HeaderInfo>
+      <h1>{isService ? t('SERVICES', 'Services') : t('ORDER_MESSAGE_RECEIVED', theme?.defaultLanguages?.ORDER_MESSAGE_RECEIVED || 'Your order has been received')}</h1>
+      <p>{!isService && t('ORDER_MESSAGE_HEADER_TEXT', theme?.defaultLanguages?.ORDER_MESSAGE_HEADER_TEXT || 'Once business accepts your order, we will send you an email, thank you!')}</p>
+    </HeaderInfo>
+  )
+}