ordering-ui-external 2.1.0 → 2.1.1

package/_modules/themes/five/src/components/HorizontalOrdersLayout/index.js

@@ -5,34 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HorizontalOrdersLayout = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _orderingComponentsExternal = require("ordering-components-external");
 var _styles = require("./styles");
 var _styles2 = require("../OrdersOption/styles");
-var _Buttons = require("../../styles/Buttons");
 var _SingleOrderCard = require("../SingleOrderCard");
 var _Pagination = require("../Pagination");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var HorizontalOrdersLayout = function HorizontalOrdersLayout(props) {
   var pagination = props.pagination,
-    loadMoreOrders = props.loadMoreOrders,
     isBusinessesPage = props.isBusinessesPage,
     customArray = props.customArray,
     businessesIds = props.businessesIds,
     isCustomerMode = props.isCustomerMode,
-    isProducts = props.isProducts,
-    isBusiness = props.isBusiness,
     handleChangePage = props.handleChangePage;
   var orders = customArray || props.orders;
-  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
-    _useLanguage2 = _slicedToArray(_useLanguage, 2),
-    t = _useLanguage2[1];
   var ordersToShow = businessesIds && isCustomerMode ? orders.filter(function (order) {
     return businessesIds === null || businessesIds === void 0 ? void 0 : businessesIds.includes(order === null || order === void 0 ? void 0 : order.business_id);
   }) : businessesIds ? orders.filter(function (order) {
@@ -45,57 +31,21 @@ var HorizontalOrdersLayout = function HorizontalOrdersLayout(props) {
       return a - b;
     }));
   }) : orders;
-  var notOrders = isProducts || isBusiness;
-  var Orders = function Orders() {
-    var _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-        key: i
-      }, BeforeElement);
-    }), (_props$beforeComponen = props.beforeComponents) === null || _props$beforeComponen === void 0 ? void 0 : _props$beforeComponen.map(function (BeforeComponent, i) {
-      return /*#__PURE__*/_react.default.createElement(BeforeComponent, _extends({
-        key: i
-      }, props));
-    }), orders.length > 0 && !notOrders && ordersToShow.map(function (order) {
-      return /*#__PURE__*/_react.default.createElement(_SingleOrderCard.SingleOrderCard, _extends({}, props, {
-        key: order.id,
-        order: order
-      }));
-    }), (pagination === null || pagination === void 0 ? void 0 : pagination.totalPages) && !notOrders && (pagination === null || pagination === void 0 ? void 0 : pagination.currentPage) < (pagination === null || pagination === void 0 ? void 0 : pagination.totalPages) && !notOrders && /*#__PURE__*/_react.default.createElement(_styles.Card, {
-      flex: true,
-      nobg: true,
-      isBusinessesPage: isBusinessesPage,
-      isCustomerMode: isCustomerMode
-    }, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
-      className: "load-orders",
-      color: "primary",
-      outline: true,
-      onClick: loadMoreOrders
-    }, t('LOAD_MORE_ORDERS', 'Load more orders'))), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
-      return /*#__PURE__*/_react.default.createElement(AfterComponent, _extends({
-        key: i
-      }, props));
-    }), (_props$afterElements = props.afterElements) === null || _props$afterElements === void 0 ? void 0 : _props$afterElements.map(function (AfterElement, i) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-        key: i
-      }, AfterElement);
-    }));
-  };
-  return /*#__PURE__*/_react.default.createElement(_styles2.OrdersContainer, {
+  return orders.length > 0 && ordersToShow.length > 0 ? /*#__PURE__*/_react.default.createElement(_styles2.OrdersContainer, {
     id: "orders-container",
     activeOrders: true,
     ordersLength: (orders === null || orders === void 0 ? void 0 : orders.length) <= 1,
     isBusinessesPage: isBusinessesPage
-  }, /*#__PURE__*/_react.default.createElement(_styles.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.CardsContainer, null, orders.length > 0 && ordersToShow.map(function (order) {
+  }, /*#__PURE__*/_react.default.createElement(_styles.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.CardsContainer, null, orders.length > 0 && ordersToShow.map(function (order, i) {
     var _order$id;
     return /*#__PURE__*/_react.default.createElement(_SingleOrderCard.SingleOrderCard, _extends({}, props, {
-      key: order.id || ((_order$id = order.id) === null || _order$id === void 0 ? void 0 : _order$id[0]),
+      key: order.id || ((_order$id = order.id) === null || _order$id === void 0 ? void 0 : _order$id[0]) || i,
       order: order
     }));
-  })), /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
+  })), orders.length > 0 && ordersToShow.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
     currentPage: pagination.currentPage,
     totalPages: Math.ceil(pagination === null || pagination === void 0 ? void 0 : pagination.totalPages),
     handleChangePage: handleChangePage
-  })));
+  }))) : null;
 };
 exports.HorizontalOrdersLayout = HorizontalOrdersLayout;

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

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,30 +12,143 @@ var _react2 = require("swiper/react");
 var _swiper = _interopRequireWildcard(require("swiper"));
 require("swiper/swiper-bundle.min.css");
 require("swiper/swiper.min.css");
+var _utils = require("../../../../../utils");
 var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 _swiper.default.use([_swiper.Navigation]);
 var PageBannerUI = function PageBannerUI(props) {
-  var _pageBannerState$bann, _pageBannerState$bann2, _pageBannerState$bann3;
+  var _pageBannerState$bann, _pageBannerState$bann2, _pageBannerState$bann3, _pageBannerState$bann4;
   var pageBannerState = props.pageBannerState;
+  var _useSite = (0, _orderingComponentsExternal.useSite)(),
+    _useSite2 = _slicedToArray(_useSite, 1),
+    site = _useSite2[0].site;
+  var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
+    _useEvent2 = _slicedToArray(_useEvent, 1),
+    events = _useEvent2[0];
+  var businessUrlTemplate = (0, _utils.checkSiteUrl)(site === null || site === void 0 ? void 0 : site.business_url_template, '/store/:business_slug');
+  var productUrlTemplate = (0, _utils.checkSiteUrl)(site === null || site === void 0 ? void 0 : site.product_url_template, '/store/:business_slug?category=:category_id&product=:product_id');
+  var onProductRedirect = function onProductRedirect(_ref) {
+    var slug = _ref.slug,
+      category = _ref.category,
+      product = _ref.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: "?".concat(businessUrlTemplate.split('?')[1].replace(':business_slug', '')).concat(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')) {
+      var businessParameter = businessUrlTemplate.replace('/store?', '').replace('=:business_slug', '');
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          category_slug: category,
+          product_slug: product
+        },
+        search: "?".concat(businessParameter, "=").concat(slug),
+        replace: true
+      });
+    }
+    if (productUrlTemplate.includes('/store/:business_slug') && productUrlTemplate.includes('category_id')) {
+      var ids = productUrlTemplate.split('?')[1].split('&');
+      var categoryParameter = ids[0].replace('=:category_id', '');
+      var productParameter = ids[1].replace('=:product_id', '');
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          business_slug: slug
+        },
+        search: "?".concat(categoryParameter, "=").concat(category, "&").concat(productParameter, "=").concat(product),
+        replace: true
+      });
+    }
+    if (productUrlTemplate.includes('/:business_slug') && !productUrlTemplate.includes('store')) {
+      var _ids = productUrlTemplate.split('?')[1].split('&');
+      var _categoryParameter = _ids[0].replace('=:category_id', '');
+      var _productParameter = _ids[1].replace('=:product_id', '');
+      return events.emit('go_to_page', {
+        page: 'product',
+        params: {
+          business_slug: slug
+        },
+        search: "?".concat(_categoryParameter, "=").concat(category, "&").concat(_productParameter, "=").concat(product),
+        replace: true
+      });
+    }
+  };
+  var handleGoToPage = function handleGoToPage(action) {
+    if (!(action !== null && action !== void 0 && action.url)) return;
+    var slug;
+    if (action.type === 'business') {
+      slug = action.url.split('store/')[1];
+      onProductRedirect({
+        slug: slug
+      });
+    }
+    if (action.type === 'product') {
+      var _action$url$split$;
+      slug = (_action$url$split$ = action.url.split('store/')[1]) === null || _action$url$split$ === void 0 ? void 0 : _action$url$split$.split('?')[0];
+      var paramString = action.url.split('?')[1];
+      var urlParams = new URLSearchParams(paramString);
+      var product = urlParams.get('product');
+      var category = urlParams.get('category');
+      onProductRedirect({
+        slug: slug,
+        category: category,
+        product: product
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageBannerState.loading ? /*#__PURE__*/_react.default.createElement(_styles.BannerContainer, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     height: 250
-  })) : ((_pageBannerState$bann = pageBannerState.banner) === null || _pageBannerState$bann === void 0 ? void 0 : _pageBannerState$bann.items) && /*#__PURE__*/_react.default.createElement(_styles.BannerContainer, null, /*#__PURE__*/_react.default.createElement(_react2.Swiper, {
+  })) : ((_pageBannerState$bann = pageBannerState.banner) === null || _pageBannerState$bann === void 0 ? void 0 : (_pageBannerState$bann2 = _pageBannerState$bann.items) === null || _pageBannerState$bann2 === void 0 ? void 0 : _pageBannerState$bann2.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.BannerContainer, null, /*#__PURE__*/_react.default.createElement(_react2.Swiper, {
     navigation: true,
     spaceBetween: 0,
-    loop: ((_pageBannerState$bann2 = pageBannerState.banner) === null || _pageBannerState$bann2 === void 0 ? void 0 : _pageBannerState$bann2.items.length) > 1
-  }, (_pageBannerState$bann3 = pageBannerState.banner) === null || _pageBannerState$bann3 === void 0 ? void 0 : _pageBannerState$bann3.items.map(function (img, i) {
+    loop: ((_pageBannerState$bann3 = pageBannerState.banner) === null || _pageBannerState$bann3 === void 0 ? void 0 : _pageBannerState$bann3.items.length) > 1
+  }, (_pageBannerState$bann4 = pageBannerState.banner) === null || _pageBannerState$bann4 === void 0 ? void 0 : _pageBannerState$bann4.items.map(function (img, i) {
     return /*#__PURE__*/_react.default.createElement(_react2.SwiperSlide, {
       key: i
-    }, /*#__PURE__*/_react.default.createElement(_styles.ImageWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    }, /*#__PURE__*/_react.default.createElement(_styles.ImageWrapper, {
+      onClick: function onClick() {
+        return handleGoToPage(img === null || img === void 0 ? void 0 : img.action);
+      }
+    }, /*#__PURE__*/_react.default.createElement("img", {
       src: img.url,
       className: "banner-img",
       alt: ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {

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

@@ -1,33 +1,25 @@
 import React from 'react'
-import { useLanguage } from 'ordering-components-external'
 import {
-  Card,
   CardWrapper,
   CardsContainer
 } from './styles'
 import { OrdersContainer } from '../OrdersOption/styles'
 
-import { Button } from '../../styles/Buttons'
 import { SingleOrderCard } from '../SingleOrderCard'
 import { Pagination } from '../Pagination'
 
 export const HorizontalOrdersLayout = (props) => {
   const {
     pagination,
-    loadMoreOrders,
     isBusinessesPage,
     customArray,
     businessesIds,
     isCustomerMode,
-    isProducts,
-    isBusiness,
     handleChangePage
   } = props
 
   const orders = customArray || props.orders
 
-  const [, t] = useLanguage()
-
   const ordersToShow = businessesIds && isCustomerMode
     ? orders.filter(order =>
       businessesIds?.includes(order?.business_id))
@@ -37,74 +29,33 @@ export const HorizontalOrdersLayout = (props) => {
         JSON.stringify(businessesIds.sort((a, b) => a - b)) === JSON.stringify(order?.business?.map(business => business?.id).sort((a, b) => a - b)))
       : orders
 
-  const notOrders = isProducts || isBusiness
-
-  const Orders = () => {
-    return (
-      <>
-        {props.beforeElements?.map((BeforeElement, i) => (
-          <React.Fragment key={i}>
-            {BeforeElement}
-          </React.Fragment>))}
-        {props.beforeComponents?.map((BeforeComponent, i) => (
-          <BeforeComponent key={i} {...props} />))}
-        {orders.length > 0 && !notOrders && ordersToShow.map(order => (
-          <SingleOrderCard
-            {...props}
-            key={order.id}
-            order={order}
-          />
-        ))}
-        {pagination?.totalPages && !notOrders && pagination?.currentPage < pagination?.totalPages && !notOrders && (
-          <Card
-            flex
-            nobg
-            isBusinessesPage={isBusinessesPage}
-            isCustomerMode={isCustomerMode}
-          >
-            <Button
-              className='load-orders'
-              color='primary'
-              outline
-              onClick={loadMoreOrders}
-            >
-              {t('LOAD_MORE_ORDERS', 'Load more orders')}
-            </Button>
-          </Card>
-        )}
-        {props.afterComponents?.map((AfterComponent, i) => (
-          <AfterComponent key={i} {...props} />))}
-        {props.afterElements?.map((AfterElement, i) => (
-          <React.Fragment key={i}>
-            {AfterElement}
-          </React.Fragment>))}
-      </>
-    )
-  }
-
   return (
-    <OrdersContainer
-      id='orders-container'
-      activeOrders
-      ordersLength={orders?.length <= 1}
-      isBusinessesPage={isBusinessesPage}
-    >
-      <CardWrapper>
-        <CardsContainer>
-          {orders.length > 0 && ordersToShow.map(order => (
-            <SingleOrderCard
-              {...props}
-              key={order.id || order.id?.[0]}
-              order={order}
+    orders.length > 0 && ordersToShow.length > 0 ? (
+      <OrdersContainer
+        id='orders-container'
+        activeOrders
+        ordersLength={orders?.length <= 1}
+        isBusinessesPage={isBusinessesPage}
+      >
+        <CardWrapper>
+          <CardsContainer>
+            {orders.length > 0 && ordersToShow.map((order, i) => (
+              <SingleOrderCard
+                {...props}
+                key={order.id || order.id?.[0] || i}
+                order={order}
+              />
+            ))}
+          </CardsContainer>
+          {orders.length > 0 && ordersToShow.length > 0 && (
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={Math.ceil(pagination?.totalPages)}
+              handleChangePage={handleChangePage}
             />
-          ))}
-        </CardsContainer>
-        <Pagination
-          currentPage={pagination.currentPage}
-          totalPages={Math.ceil(pagination?.totalPages)}
-          handleChangePage={handleChangePage}
-        />
-      </CardWrapper>
-    </OrdersContainer>
+          )}
+        </CardWrapper>
+      </OrdersContainer>
+    ) : null
   )
 }

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>