ordering-ui-external 2.0.4 → 2.1.1

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

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { useUtils } from 'ordering-components-external'
+import moment from 'moment'
+
+export const OrderEta = (props) => {
+  const {
+    order,
+    outputFormat
+  } = props
+
+  const [{ parseDate }] = useUtils()
+  const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
+
+  const getEstimatedDeliveryTime = () => {
+    let _estimatedTime
+    let totalEta = 0
+    const _delivery = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc)
+      : parseDate(order?.delivery_datetime)
+    if (order?.eta_current_status_time) {
+      const currentStatueEta = order?.eta_current_status_time
+      totalEta += currentStatueEta
+      let nextStatusTimes = 0
+      if (order?.eta_next_status_times) {
+        Object.keys(order.eta_next_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            nextStatusTimes += order.eta_next_status_times[key]
+          }
+        })
+      }
+
+      totalEta += nextStatusTimes
+
+      const diffTimeAsSeconds = moment.utc(order?.reporting_data?.at[`status:${order.status}`]).add(order?.eta_current_status_time, 'minutes').diff(moment().utc(), 'seconds')
+      const diffTimeAsMinutes = Math.ceil(diffTimeAsSeconds / 60)
+      if (diffTimeAsMinutes <= 0) {
+        totalEta += (Math.floor(Math.abs(diffTimeAsMinutes / order?.eta_current_status_time) + 1) * order?.eta_current_status_penalty_time)
+      }
+      _estimatedTime = parseDate(moment(_delivery).add(totalEta, 'minutes'))
+    } else {
+      _estimatedTime = parseDate(moment(_delivery).add(order?.eta_time, 'minutes'))
+    }
+    setEstimatedDeliveryTime(_estimatedTime)
+  }
+
+  useEffect(() => {
+    getEstimatedDeliveryTime()
+    const interval = setInterval(() => {
+      getEstimatedDeliveryTime()
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [order])
+
+  return (
+    <>
+      {!outputFormat ? estimatedDeliveryTime : moment(estimatedDeliveryTime).format(outputFormat)}
+    </>
+  )
+}

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

@@ -28,7 +28,9 @@ import { OrderBillSection } from './OrderBillSection'
 import { ActionsSection } from './ActionsSection'
 import { OrderPreferencesSection } from './OrderPreferencesSections'
 import { PlaceSpot } from '../PlaceSpot'
+import { SendGiftCard } from '../GiftCard/SendGiftCard'
 import { Confirm } from '../Confirm'
+import { OrderEta } from './OrderEta'
 
 import {
   Container,
@@ -111,6 +113,7 @@ const OrderDetailsUI = (props) => {
   const [isProductReviewed, setIsProductReviewed] = useState(false)
   const [isDriverReviewed, setIsDriverReviewed] = useState(false)
   const [isProReviewed, setIsProReviewed] = useState(false)
+  const [isGiftCardSent, setIsGiftCardSent] = useState(false)
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const [isReviewOpen, setIsReviewOpen] = useState(false)
   const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false, professional: false })
@@ -124,29 +127,31 @@ const OrderDetailsUI = (props) => {
   const acceptedStatus = [1, 2, 5, 6, 10, 11, 12]
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
-  const showOrderActions = order?.delivery_type !== 1
+  const hideOrderActions = order?.delivery_type === 1
+  const isGiftCardOrder = !order?.business_id
 
   const isOriginalLayout = orderingTheme?.theme?.confirmation?.components?.layout?.type === 'original'
-  const showDeliveryType = !orderingTheme?.theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
-  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
-  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
-  const showBusinessPhone = !orderingTheme?.theme?.confirmation?.components?.business?.components?.phone?.hidden
-  const showBusinessMessages = !orderingTheme?.theme?.confirmation?.components?.business?.components?.messages?.hidden
-  const showBusinessEmail = !orderingTheme?.theme?.confirmation?.components?.business?.components?.email?.hidden
-  const showBusinessAddress = !orderingTheme?.theme?.confirmation?.components?.business?.components?.address?.hidden
-  const showBusinessMap = !orderingTheme?.theme?.confirmation?.components?.business?.components?.map?.hidden
-  const showDriverName = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.name?.hidden
-  const showDriverPhone = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.phone?.hidden
-  const showDriverMessages = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.messages?.hidden
-  const showDriverEmail = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.email?.hidden
-  const showDriverPhoto = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.photo?.hidden
-  const showCustomerPhone = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.phone?.hidden
-  const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
-  const showCustomerEmail = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.email?.hidden
-  const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
+  const hideDeliveryType = theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
+  const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
+  const hideDeliveryProgress = theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const hideBusinessPhone = theme?.confirmation?.components?.business?.components?.phone?.hidden
+  const hideBusinessMessages = theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const hideBusinessEmail = theme?.confirmation?.components?.business?.components?.email?.hidden
+  const hideBusinessAddress = theme?.confirmation?.components?.business?.components?.address?.hidden
+  const hideBusinessMap = theme?.confirmation?.components?.business?.components?.map?.hidden
+  const hideDriverName = theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const hideDriverPhone = theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const hideDriverEmail = theme?.confirmation?.components?.driver?.components?.email?.hidden
+  const hideDriverPhoto = theme?.confirmation?.components?.driver?.components?.photo?.hidden
+  const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
+  const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const hideCustomerEmail = theme?.confirmation?.components?.customer?.components?.email?.hidden
+  const hideCustomerPhoto = theme?.confirmation?.components?.customer?.components?.photo?.hidden
 
   const validTrackingStatus = [9, 19, 23]
   const mapConfigs = { zoom: 15 }
@@ -407,25 +412,25 @@ const OrderDetailsUI = (props) => {
                 {order?.status !== 0 && order?.integration_id && (
                   <h1>{t('TICKET', 'Ticket')}: {order?.integration_id}</h1>
                 )}
-                {showDeliveryType && (
+                {!hideDeliveryType && (
                   <p className='types'>
                     {isService
                       ? t('SERVICE_AT_HOME', 'Service at home')
                       : orderTypes?.find(type => order?.delivery_type === type?.value)?.text}
                   </p>
                 )}
-                {showDeliveryDate && (
+                {!hideDeliveryDate && (
                   <p className='date'>
-                    {
-                      order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc)
-                        : parseDate(order?.delivery_datetime, { utc: false })
-                    }
+                    {activeStatus.includes(order?.status) ? (
+                      <OrderEta order={order} />
+                    ) : (
+                      parseDate(order?.reporting_data?.at[`status:${order.status}`])
+                    )}
                   </p>
                 )}
                 {(acceptedStatus.includes(parseInt(order?.status, 10)) ||
                   !isOriginalLayout
-                ) &&
+                ) && !isGiftCardOrder &&
                   (
                     <ReOrder>
                       <Button
@@ -451,7 +456,7 @@ const OrderDetailsUI = (props) => {
                     </ReOrder>
                   )}
               </TitleContainer>
-              {showDeliveryProgress && (
+              {!hideDeliveryProgress && !isGiftCardOrder && (
                 <>
                   <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
                   <OrderStatusAndLinkContainer>
@@ -478,120 +483,116 @@ const OrderDetailsUI = (props) => {
                 </>
               )}
             </OrderInfo>
-            <OrderBusiness>
-              <BusinessExternalWrapper>
-                <BusinessWrapper
-                  w='calc(100% - 20px)'
-                // borderBottom={showOrderActions}
-                >
-                  {isShowBusinessLogo && <img src={order?.business?.logo} />}
-                  <BusinessInfo>
-                    <h2>{order?.business?.name}</h2>
-                    <ActionsSection
-                      {...ActionsSectionProps}
-                      actionType='business'
-                      showPhone={showBusinessPhone}
-                      showMessages={showBusinessMessages}
-                    />
-                    {showBusinessEmail && (
-                      <p>{order?.business?.email}</p>
-                    )}
-                    {showBusinessPhone && (
-                      <p>{order?.business?.cellphone}</p>
-                    )}
-                    {showBusinessAddress && (
-                      <p>{order?.business?.address}</p>
-                    )}
-                    {order?.place?.name && (
-                      <PlaceSpotSection>
-                        <p>
-                          {yourSpotString}: {order?.place?.name}
-                        </p>
-                      </PlaceSpotSection>
-                    )}
-                    {showOrderActions && (
-                      <DirectionButtonWrapper>
-                        <Button
-                          color='primary'
-                          onClick={() => window.open(`http://maps.google.com/?q=${order?.business?.address}`)}
-                        >
-                          {t('GET_DIRECTIONS', 'Get Directions')}
-                        </Button>
-                      </DirectionButtonWrapper>
-                    )}
-                  </BusinessInfo>
-                </BusinessWrapper>
-
-                {showDeliveryType && placeSpotTypes.includes(order?.delivery_type) && (
-                  <PlaceSpotWrapper>
-                    <PlaceSpot
-                      isInputMode
-                      cart={order}
-                      spotNumberDefault={order?.spot_number}
-                      vehicleDefault={order?.vehicle}
-                    />
-                  </PlaceSpotWrapper>
-                )}
-
-                {showOrderActions && (
+            {!isGiftCardOrder && (
+              <OrderBusiness>
+                <BusinessExternalWrapper>
                   <BusinessWrapper
                     w='calc(100% - 20px)'
-                    borderTop
+                    borderTop={!hideDeliveryType && placeSpotTypes.includes(order?.delivery_type)}
                   >
-                    <BtsOrderStatus>
-                      <div>
-                        <Button
-                          style={{ fontSize: 14 }}
-                          color={order?.status === 20 ? 'secundary' : 'primary'}
-                          onClick={() => handleChangeOrderStatus(20)}
-                          disabled={disableLeftButton.includes(order?.status)}
-                        >
-                          {getOrderStatus(20)?.value}
-                        </Button>
-                      </div>
-                      <div>
-                        <Button
-                          style={{ fontSize: 14 }}
-                          color={order?.status === 20 ? 'primary' : 'secundary'}
-                          disabled={disableRightButton.includes(order?.status)}
-                          onClick={() => handleChangeOrderStatus(21)}
-                        >
-                          {getOrderStatus(21)?.value}
-                        </Button>
-                      </div>
-                    </BtsOrderStatus>
+                    {isShowBusinessLogo && <img src={order?.business?.logo} />}
+                    <BusinessInfo>
+                      <h2>{order?.business?.name}</h2>
+                      <ActionsSection
+                        {...ActionsSectionProps}
+                        actionType='business'
+                        showPhone={!hideBusinessPhone}
+                        showMessages={!hideBusinessMessages}
+                      />
+                      {!hideBusinessEmail && (
+                        <p>{order?.business?.email}</p>
+                      )}
+                      {!hideBusinessPhone && (
+                        <p>{order?.business?.cellphone}</p>
+                      )}
+                      {!hideBusinessAddress && (
+                        <p>{order?.business?.address}</p>
+                      )}
+                      {order?.place?.name && (
+                        <PlaceSpotSection>
+                          <p>
+                            {yourSpotString}: {order?.place?.name}
+                          </p>
+                        </PlaceSpotSection>
+                      )}
+                      {hideOrderActions && (
+                        <DirectionButtonWrapper>
+                          <Button
+                            color='primary'
+                            onClick={() => window.open(`http://maps.google.com/?q=${order?.business?.address}`)}
+                          >
+                            {t('GET_DIRECTIONS', 'Get Directions')}
+                          </Button>
+                        </DirectionButtonWrapper>
+                      )}
+                    </BusinessInfo>
+                    {!hideOrderActions && (
+                      <BtsOrderStatus>
+                        <div>
+                          <Button
+                            style={{ fontSize: 14 }}
+                            color={order?.status === 20 ? 'secundary' : 'primary'}
+                            onClick={() => handleChangeOrderStatus(20)}
+                            disabled={disableLeftButton.includes(order?.status)}
+                          >
+                            {getOrderStatus(20)?.value}
+                          </Button>
+                        </div>
+                        <div>
+                          <Button
+                            style={{ fontSize: 14 }}
+                            color={order?.status === 20 ? 'primary' : 'secundary'}
+                            disabled={disableRightButton.includes(order?.status)}
+                            onClick={() => handleChangeOrderStatus(21)}
+                          >
+                            {getOrderStatus(21)?.value}
+                          </Button>
+                        </div>
+                      </BtsOrderStatus>
+                    )}
                   </BusinessWrapper>
+
+                  {!hideDeliveryType && placeSpotTypes.includes(order?.delivery_type) && (
+                    <PlaceSpotWrapper>
+                      <PlaceSpot
+                        isInputMode
+                        cart={order}
+                        spotNumberDefault={order?.spot_number}
+                        vehicleDefault={order?.vehicle}
+                      />
+                    </PlaceSpotWrapper>
+                  )}
+                </BusinessExternalWrapper>
+                {googleMapsApiKey && !hideBusinessMap && (
+                  <MapWrapper>
+                    <Map style={{ width: '100%' }}>
+                      <img
+                        src={getGoogleMapImage(order?.business?.location, googleMapsApiKey, mapConfigs)}
+                        id='google-maps-image'
+                        alt='google-maps-location'
+                        width='100%'
+                        height='100%'
+                        loading='lazy'
+                      />
+                    </Map>
+                  </MapWrapper>
                 )}
-              </BusinessExternalWrapper>
-              {googleMapsApiKey && showBusinessMap && (
-                <MapWrapper>
-                  <Map style={{ width: '100%' }}>
-                    <img
-                      src={getGoogleMapImage(order?.business?.location, googleMapsApiKey, mapConfigs)}
-                      id='google-maps-image'
-                      alt='google-maps-location'
-                      width='100%'
-                      height='100%'
-                      loading='lazy'
-                    />
-                  </Map>
-                </MapWrapper>
-              )}
-            </OrderBusiness>
+              </OrderBusiness>
+            )}
             <OrderCustomer>
               <BusinessWrapper>
-                {showCustomerPhoto && order?.customer?.photo && (
+                {!hideCustomerPhoto && order?.customer?.photo && (
                   <img src={order?.customer?.photo} />
                 )}
                 <BusinessInfo>
                   <p>{order?.customer?.name} {order?.customer?.lastname}</p>
-                  {showCustomerEmail && (
+                  {!hideCustomerEmail && (
                     <p>{order?.customer?.email}</p>
                   )}
-                  {showCustomerPhone && (
+                  {!hideCustomerPhone && (
                     <p>{order?.customer?.cellphone || order?.customer?.phone}</p>
                   )}
-                  {showCustomerAddress && (
+                  {!hideCustomerAddress && (
                     <p>{order?.customer?.address}</p>
                   )}
                 </BusinessInfo>
@@ -605,12 +606,12 @@ const OrderDetailsUI = (props) => {
                     <ActionsSection
                       {...ActionsSectionProps}
                       actionType='driver'
-                      showPhone={showDriverPhone}
-                      showMessages={showDriverMessages}
+                      showPhone={!hideDriverPhone}
+                      showMessages={!hideDriverMessages}
                     />
                   </SectionTitleContainer>
                   <WrapperDriver>
-                    {showDriverPhoto && (
+                    {!hideDriverPhoto && (
                       <div className='photo'>
                         {order?.driver?.photo ? (
                           <PhotoBlock src={order?.driver?.photo} />
@@ -620,13 +621,13 @@ const OrderDetailsUI = (props) => {
                       </div>
                     )}
                     <div>
-                      {showDriverName && (
+                      {!hideDriverName && (
                         <h2>{order?.driver?.name} {order?.driver?.lastname}</h2>
                       )}
-                      {showDriverEmail && (
+                      {!hideDriverEmail && (
                         <p>{order?.driver?.email}</p>
                       )}
-                      {showDriverPhone && (
+                      {!hideDriverPhone && (
                         <p>{order?.driver?.cellphone || order?.driver?.phone}</p>
                       )}
                     </div>
@@ -652,7 +653,7 @@ const OrderDetailsUI = (props) => {
                 }
               </>
             )}
-            {(order?.delivery_type === 1 || order?.comment) && (
+            {(order?.delivery_type === 1 || order?.comment) && !isGiftCardOrder && (
               <OrderPreferences>
                 <OrderPreferencesSection
                   order={order}
@@ -678,6 +679,13 @@ const OrderDetailsUI = (props) => {
               />
             </OrderProducts>
           </WrapperRightContainer>
+
+          {isGiftCardOrder && order?.products[0]?.gift_card?.status === 'pending' && !isGiftCardSent && (
+            <SendGiftCard
+              giftCardId={order?.products[0]?.gift_card?.id}
+              setIsGiftCardSent={setIsGiftCardSent}
+            />
+          )}
         </WrapperContainer>
       )}
 

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

@@ -90,7 +90,6 @@ export const BusinessWrapper = styled.div`
     }
   }
   @media (min-width: 400px) {
-    flex-direction: row;
     width: ${props => props.w ?? '100%'};
   }
 `

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

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  padding-top: 30px;
-  margin-right: 30px;
+  padding-top: 5px;
+  margin: 0px;
   ${props => props.theme.rtl && css`
     margin-left: 30px;
     margin-right: 0px;
@@ -12,11 +12,13 @@ export const Container = styled.div`
     margin-right: 0px;
     margin-left: 0px;
   `}
+  @media (min-width: 993px) {
+    margin-right: 30px;
+  }
 `
 
 export const ContentHeader = styled.div`
-  margin-bottom: 27px;
-
+  margin-bottom: 15px;
   > h2 {
     font-weight: 600;
     font-size: 24px;
@@ -53,11 +55,9 @@ export const ProductList = styled.div`
   flex-direction: row;
   box-sizing: border-box;
   align-items: center;
-
   button {
     padding: 0px;
   }
-
   #orderItAgain > div {
     width: 350px;
     ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`

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

@@ -6,10 +6,10 @@ import {
   OrderList as OrderListController
 } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
-import moment from 'moment'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { OrderEta } from '../OrderDetails/OrderEta'
 import {
   OrderProgressContainer,
   OrderInfoWrapper,
@@ -31,20 +31,11 @@ const OrderProgressUI = (props) => {
     isCustomerMode
   } = props
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime }] = useUtils()
   const theme = useTheme()
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
 
-  const convertDiffToHours = (time) => {
-    if (!time) return
-    const deliveryTime = lastOrder?.delivery_datetime_utc
-      ? parseDate(lastOrder?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
-      : parseDate(lastOrder?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
-    const returnedDate = moment(new Date(deliveryTime.replace(/-/g, '/'))).add(time, 'minutes').format('hh:mm A')
-    return returnedDate
-  }
-
   const handleGoToPage = (index) => {
     events.emit('go_to_page', { page: index, params: { orderId: lastOrder?.uuid } })
   }
@@ -102,7 +93,7 @@ const OrderProgressUI = (props) => {
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                        - 
-                    {convertDiffToHours(lastOrder.eta_time)}
+                    <OrderEta order={lastOrder} outputFormat='hh:mm A' />
                   </span>
                 </TimeWrapper>
               </ProgressTextWrapper>

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

@@ -1,5 +1,9 @@
 import React from 'react'
-import { PageBanner as PageBannerController } from 'ordering-components-external'
+import {
+  useSite,
+  useEvent,
+  PageBanner as PageBannerController
+} from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import SwiperCore, {
@@ -7,6 +11,7 @@ import SwiperCore, {
 } from 'swiper'
 import 'swiper/swiper-bundle.min.css'
 import 'swiper/swiper.min.css'
+import { checkSiteUrl } from '../../../../../utils'
 
 import {
   BannerContainer,
@@ -20,6 +25,89 @@ const PageBannerUI = (props) => {
     pageBannerState
   } = props
 
+  const [{ site }] = useSite()
+  const [events] = useEvent()
+
+  const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
+  const productUrlTemplate = checkSiteUrl(site?.product_url_template, '/store/:business_slug?category=:category_id&product=:product_id')
+
+  const onProductRedirect = ({ slug, category, product }) => {
+    if (!category && !product) {
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        return events.emit('go_to_page', { page: 'business', params: { business_slug: slug }, replace: true })
+      } else {
+        return events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}`, replace: true })
+      }
+    }
+    events.emit('product_banner_clicked')
+    if (productUrlTemplate === '/store/:business_slug/:category_slug/:product_slug' || productUrlTemplate === '/:business_slug/:category_slug/:product_slug') {
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          business_slug: slug,
+          category_slug: category,
+          product_slug: product
+        },
+        replace: true
+      })
+    }
+    if (productUrlTemplate.includes('/store/:category_slug/:product_slug')) {
+      const businessParameter = businessUrlTemplate.replace('/store?', '').replace('=:business_slug', '')
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          category_slug: category,
+          product_slug: product
+        },
+        search: `?${businessParameter}=${slug}`,
+        replace: true
+      })
+    }
+    if (productUrlTemplate.includes('/store/:business_slug') && productUrlTemplate.includes('category_id')) {
+      const ids = productUrlTemplate.split('?')[1].split('&')
+      const categoryParameter = ids[0].replace('=:category_id', '')
+      const productParameter = ids[1].replace('=:product_id', '')
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          business_slug: slug
+        },
+        search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
+        replace: true
+      })
+    }
+    if (productUrlTemplate.includes('/:business_slug') && !productUrlTemplate.includes('store')) {
+      const ids = productUrlTemplate.split('?')[1].split('&')
+      const categoryParameter = ids[0].replace('=:category_id', '')
+      const productParameter = ids[1].replace('=:product_id', '')
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          business_slug: slug
+        },
+        search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
+        replace: true
+      })
+    }
+  }
+
+  const handleGoToPage = (action) => {
+    if (!action?.url) return
+    let slug
+    if (action.type === 'business') {
+      slug = action.url.split('store/')[1]
+      onProductRedirect({ slug })
+    }
+    if (action.type === 'product') {
+      slug = action.url.split('store/')[1]?.split('?')[0]
+      const paramString = action.url.split('?')[1]
+      const urlParams = new URLSearchParams(paramString)
+      const product = urlParams.get('product')
+      const category = urlParams.get('category')
+      onProductRedirect({ slug, category, product })
+    }
+  }
+
   return (
     <>
       {pageBannerState.loading ? (
@@ -27,7 +115,7 @@ const PageBannerUI = (props) => {
           <Skeleton height={250} />
         </BannerContainer>
       ) : (
-        pageBannerState.banner?.items && (
+        pageBannerState.banner?.items?.length > 0 && (
           <BannerContainer>
             <Swiper
               navigation
@@ -35,8 +123,12 @@ const PageBannerUI = (props) => {
               loop={pageBannerState.banner?.items.length > 1}
             >
               {pageBannerState.banner?.items.map((img, i) => (
-                <SwiperSlide key={i}>
-                  <ImageWrapper>
+                <SwiperSlide
+                  key={i}
+                >
+                  <ImageWrapper
+                    onClick={() => handleGoToPage(img?.action)}
+                  >
                     <img src={img.url} className='banner-img' alt='' />
                   </ImageWrapper>
                 </SwiperSlide>