ordering-ui-external 2.1.4 → 2.2.0

package/_modules/themes/five/src/components/Wallets/styles.js

@@ -4,37 +4,58 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapContent = exports.TransactionsWrapper = exports.Transactions = exports.SectionWrapper = exports.LoyaltyWrapp = exports.LoyaltyContent = exports.Container = exports.BalanceElement = void 0;
+exports.WrapContent = exports.TransactionsWrapper = exports.Transactions = exports.Title = exports.TabsContainer = exports.Tab = exports.SectionWrapper = exports.LoyaltyWrapp = exports.LoyaltyContent = exports.Container = exports.BalanceElement = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n\n  .tabs{\n    justify-content: space-between;\n  }\n  .tab_title {\n    padding: 10px 2px;\n  }\n\n  @media (min-width: 576px) {\n    .tabs{\n      justify-content: flex-start;\n    }\n    .tab_title {\n      padding: 10px 15px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    padding: 20px 60px;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  padding: 30px 15px 15px 15px;\n  box-sizing: border-box;\n  min-height: calc(100vh - 280px);\n\n  @media (min-width: 768px) {\n    width: 70%;\n  }\n"])));
 exports.Container = Container;
-var SectionWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 30px;\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  @media (min-width: 768px) {\n    ", ";\n  }\n"])), function (props) {
-  return !props.isLoading && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-items: center;\n  "])));
+var Title = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 32px;\n  margin-bottom: 30px;\n  margin-top: 0;\n"])));
+exports.Title = Title;
+var TabsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), function (props) {
+  return props.theme.colors.gray200;
+});
+exports.TabsContainer = TabsContainer;
+var Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 10px 0px;\n  margin-right: 30px;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin-right: 0px;\n    margin-left: 30px;\n  "])));
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n  "])), function (_ref2) {
+    var borderBottom = _ref2.borderBottom;
+    return borderBottom && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border-bottom: 1px solid;\n    "])));
+  });
+}, function (_ref3) {
+  var active = _ref3.active;
+  return !active && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
+    return props.theme.colors.darkGray;
+  });
+});
+exports.Tab = Tab;
+var SectionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding-top: 30px;\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  @media (min-width: 768px) {\n    ", ";\n  }\n"])), function (props) {
+  return !props.isLoading && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    align-items: center;\n  "])));
 }, function (props) {
-  return !props.isLoading && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      align-items: flex-start;\n    "])));
+  return !props.isLoading && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      align-items: flex-start;\n    "])));
 });
 exports.SectionWrapper = SectionWrapper;
-var TransactionsWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-left: 2px solid ", ";\n"])), function (props) {
+var TransactionsWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-left: 2px solid ", ";\n"])), function (props) {
   return props.theme.colors.gray200;
 });
 exports.TransactionsWrapper = TransactionsWrapper;
-var BalanceElement = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 250px;\n  padding: 10px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n\n  h1 {\n    font-size: 20px;\n    font-weight: bold;\n    margin: 0;\n    padding: 0;\n  }\n\n  span {\n    font-size: 10px;\n    margin-left: 5px;\n  }\n"])), function (props) {
+var BalanceElement = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 250px;\n  padding: 10px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n\n  h1 {\n    font-size: 20px;\n    font-weight: bold;\n    margin: 0;\n    padding: 0;\n  }\n\n  span {\n    font-size: 10px;\n    margin-left: 5px;\n  }\n"])), function (props) {
   return props.theme.colors.grayDividerColor;
 });
 exports.BalanceElement = BalanceElement;
-var WrapContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n\n  @media (min-width: 768px) {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n  }\n"])));
+var WrapContent = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n\n  @media (min-width: 768px) {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n  }\n"])));
 exports.WrapContent = WrapContent;
-var Transactions = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .transactions_list {\n    margin-top: 20px;\n\n    h2 {\n      text-align: center;\n    }\n  }\n\n  @media (min-width: 768px) {\n    width: 60%;\n    margin: ", ";\n\n    .transactions_list h2 {\n      text-align: left;\n    }\n  }\n"])), function (props) {
+var Transactions = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  .transactions_list {\n    margin-top: 20px;\n\n    h2 {\n      text-align: center;\n    }\n  }\n\n  @media (min-width: 768px) {\n    width: 60%;\n    margin: ", ";\n\n    .transactions_list h2 {\n      text-align: left;\n    }\n  }\n"])), function (props) {
   return props.isLoyaltyLevel ? 0 : '0 auto';
 });
 exports.Transactions = Transactions;
-var LoyaltyContent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 20px;\n\n  @media (min-width: 768px) {\n    width: 38%;\n  }\n"])));
+var LoyaltyContent = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 20px;\n\n  @media (min-width: 768px) {\n    width: 38%;\n  }\n"])));
 exports.LoyaltyContent = LoyaltyContent;
-var LoyaltyWrapp = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  img {\n    width: 100%;\n  }\n\n  span.loyalty_title {\n    font-size: 20px;\n  }\n\n  span.loyalty_name {\n    font-size: 25px;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", "\n  }\n"])), function (props) {
+var LoyaltyWrapp = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  img {\n    width: 100%;\n  }\n\n  span.loyalty_title {\n    font-size: 20px;\n  }\n\n  span.loyalty_name {\n    font-size: 25px;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", "\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 });
 exports.LoyaltyWrapp = LoyaltyWrapp;

package/_modules/themes/five/src/styles/Buttons/index.js

@@ -15,7 +15,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
   return (0, _polished.darken)(0.07, '#CCC');
 }, function (_ref) {
   var bgtransparent = _ref.bgtransparent;
-  return bgtransparent && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: transparent !important;\n  "])));
+  return bgtransparent && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: transparent !important;\n      &:hover {\n        background: ", ";\n        color: ", " !important;\n      }\n  "])), (0, _polished.darken)(0.15, '#CCC'), function (props) {
+    return (0, _polished.darken)(0.15, props.theme.colors.primary);
+  });
 }, function (_ref2) {
   var initialIcon = _ref2.initialIcon;
   return initialIcon && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    text-align: left;\n    ", "\n    img{\n      vertical-align: middle;\n    }\n    span {\n      padding-left: 15%\n      ", "\n    }\n  "])), function (props) {

package/_modules/themes/pwa/src/components/MomentControl/index.js

@@ -20,6 +20,7 @@ var _styles = require("./styles");
 var _CgRadioCheck = _interopRequireDefault(require("@meronex/icons/cg/CgRadioCheck"));
 var _CgRadioChecked = _interopRequireDefault(require("@meronex/icons/cg/CgRadioChecked"));
 var _BiTimeFive = _interopRequireDefault(require("@meronex/icons/bi/BiTimeFive"));
+var _utils = require("../../../../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -36,7 +37,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 MomentControlUI = function MomentControlUI(props) {
-  var _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _props$beforeElements, _props$beforeComponen, _moment$format, _props$afterComponent, _props$afterElements;
   var isAsap = props.isAsap,
     datesList = props.datesList,
     hoursList = props.hoursList,
@@ -97,11 +98,8 @@ var MomentControlUI = function MomentControlUI(props) {
     !orderState.loading && handleAsap();
     setIsASP(true);
   };
-  var _formatMonthYear = function formatMonthYear(date) {
-    return (0, _moment.default)(date).format('MMMM');
-  };
-  var _formatShortWeekday = function formatShortWeekday(date) {
-    return (0, _moment.default)(date).format('dd');
+  var formatWeekMonth = function formatWeekMonth(obj, date) {
+    return obj === 'month' ? t(_utils.calendarLanguages.months[(0, _moment.default)(date).format('MMMM')], (0, _moment.default)(date).format('MMMM')) : t(_utils.calendarLanguages.week[(0, _moment.default)(date).format('dd')], (0, _moment.default)(date).format('dd'));
   };
   var _formatDay = function formatDay(date) {
     var minMon = (0, _moment.default)(minDate).format('MM');
@@ -160,7 +158,7 @@ var MomentControlUI = function MomentControlUI(props) {
       return handleCheckBoxChange(true);
     },
     isLoading: orderState === null || orderState === void 0 ? void 0 : orderState.loading
-  }, isASP ? /*#__PURE__*/_react.default.createElement(_CgRadioChecked.default, null) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('CHECKOUT_ASAP', 'ASAP'), " (", (0, _moment.default)(new Date()).format('LLLL'), " - ", t('DELIVERY_TIME', 'delivery time'), ")")), /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
+  }, isASP ? /*#__PURE__*/_react.default.createElement(_CgRadioChecked.default, null) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('CHECKOUT_ASAP', 'ASAP') + " (".concat(t((_moment$format = (0, _moment.default)().format('dddd')) === null || _moment$format === void 0 ? void 0 : _moment$format.toLocaleUpperCase(), (0, _moment.default)().format('dddd')), ", ").concat(t(_utils.calendarLanguages.months[(0, _moment.default)().format('MMMM')], (0, _moment.default)().format('MMMM'))).concat((0, _moment.default)().format(' D, yyyy h:mm A'), " - ").concat(t('DELIVERY_TIME', 'delivery time'), ")"))), /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
     highlight: !isASP,
     onClick: function onClick() {
       return handleCheckBoxChange(null);
@@ -187,10 +185,10 @@ var MomentControlUI = function MomentControlUI(props) {
     minDate: minDate,
     maxDate: maxDate,
     formatMonthYear: function formatMonthYear(locale, date) {
-      return _formatMonthYear(date);
+      return formatWeekMonth('month', date);
     },
     formatShortWeekday: function formatShortWeekday(locale, date) {
-      return _formatShortWeekday(date);
+      return formatWeekMonth('week', date);
     },
     formatDay: function formatDay(locale, date) {
       return _formatDay(date);

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getTimes = exports.getStarWidth = exports.getOrderStatus = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = void 0;
+exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getTimes = exports.getStarWidth = exports.getOrderStatus = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.calendarLanguages = exports.bytesConverter = void 0;
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styledComponents = require("styled-components");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -1019,4 +1019,30 @@ var getOrderStatus = function getOrderStatus(s) {
   });
   return objectStatus && objectStatus;
 };
-exports.getOrderStatus = getOrderStatus;
+exports.getOrderStatus = getOrderStatus;
+var calendarLanguages = {
+  months: {
+    January: 'MONTH1',
+    February: 'MONTH2',
+    March: 'MONTH3',
+    April: 'MONTH4',
+    May: 'MONTH5',
+    June: 'MONTH6',
+    July: 'MONTH7',
+    August: 'MONTH8',
+    September: 'MONTH9',
+    October: 'MONTH10',
+    November: 'MONTH11',
+    December: 'MONTH12'
+  },
+  week: {
+    Mo: 'DAYMIN1',
+    Tu: 'DAYMIN2',
+    We: 'DAYMIN3',
+    Th: 'DAYMIN4',
+    Fr: 'DAYMIN5',
+    Sa: 'DAYMIN6',
+    Su: 'DAYMIN7'
+  }
+};
+exports.calendarLanguages = calendarLanguages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -86,7 +86,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "2.0.4",
+    "ordering-components-external": "2.1.0",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/hooks/useIntersectionObserver.js

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from 'react'
  * Hook for Intersection Observer API (observe changes in the intersection of a target elemen based on viewport)
  */
 
-export function useIntersectionObserver () {
+export function useIntersectionObserver() {
   const [isObserved, setIsObserved] = useState(false)
 
   const $element = useRef(null)
@@ -20,11 +20,12 @@ export function useIntersectionObserver () {
     if (!window.IntersectionObserver) loadPollyFill()
 
     const observer = new window.IntersectionObserver(entries => {
-      const { isIntersecting } = entries[0]
-      if (isIntersecting) {
-        setIsObserved(true)
-        observer.disconnect()
-      }
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setIsObserved(true)
+          observer.disconnect()
+        }
+      })
     })
     if ($element?.current) {
       observer.observe($element.current)

package/src/styles/Toast/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { useToast, ToastType } from 'ordering-components-external'
 
 const ToastBar = styled.div`
@@ -54,6 +54,8 @@ export const Toast = () => {
   const [toastConfig, { hideToast }] = useToast()
   const toastRef = useRef()
 
+  const theme = useTheme()
+
   useEffect(() => {
     if (!toastConfig && !toastRef.current) {
       return
@@ -78,7 +80,7 @@ export const Toast = () => {
 
   switch (type) {
     case ToastType.Info:
-      backgroundColor = '#6ba4ff'
+      backgroundColor = theme.colors.primary ?? backgroundColor
       break
     case ToastType.Error:
       backgroundColor = '#D83520'

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

@@ -47,7 +47,7 @@ const AddressDetailsUI = (props) => {
           <Text>
             <h1>{addressToShow || orderState?.options?.address?.address}</h1>
             {orderState?.options?.type === 1 && !isCartPending &&
-              <span onClick={() => setOpenModal(true)}>{t('CHANGE', 'Change')}</span>}
+              <span onClick={() => setOpenModal(true)}>{t('CHANGE_ADDRESS', 'Change address')}</span>}
           </Text>
         </Header>
         {apiKey && (

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

@@ -47,13 +47,16 @@ export const Text = styled.div`
 
   span {
     font-size: 13px!important;
-    text-decoration: underline;
     cursor: pointer;
     user-select: none;
     color: ${props => props.theme.colors.primary};
     margin-left: 10px;
     font-weight: normal;
 
+    &:hover {
+        text-decoration: underline;
+      }
+
     ${props => props.theme?.rtl && css`
       margin-right: 10px;
       margin-left: initial;

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

@@ -139,7 +139,6 @@ export const BusinessInfoItem = styled.div`
       cursor: pointer;
       font-size: 14px;
       color: ${props => props.theme?.colors.primary};
-      text-decoration: underline;
       &:not(:last-child) {
         margin-right: 5px;
         ${props => props.theme?.rtl && css`
@@ -147,6 +146,9 @@ export const BusinessInfoItem = styled.div`
           margin-right: 0;
         `}
       }
+      &:hover {
+        text-decoration: underline;
+      }
 
       &.dot {
         font-size: 12px;

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

@@ -54,18 +54,19 @@ export const ContentInfo = styled.div`
 
     .go-store {
       user-select: none;
-      text-decoration: underline;
       color: ${props => props.theme.colors.primary};
       margin-right: 5px;
       ${props => props.theme?.rtl && css`
         margin-left: 5px;
         margin-right: 0;
       `}
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     .clear-cart {
       user-select: none;
-      text-decoration: underline;
       color: #d81212;
       margin-left: 5px;
       ${props => props.theme?.rtl && css`
@@ -75,6 +76,9 @@ export const ContentInfo = styled.div`
       &:first-letter {
         text-transform: uppercase;
       }
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     ${({ isStore }) => isStore && css`
@@ -85,12 +89,14 @@ export const ContentInfo = styled.div`
   }
   .change-store {
     cursor: pointer;
-    text-decoration: underline;
     color: ${props => props.theme.colors.primary};
     font-size: 12px;
     &:first-letter {
       text-transform: uppercase;
     }
+    &:hover {
+        text-decoration: underline;
+      }
   }
   ${props => props.theme?.rtl && css`
     margin-right: 10px;

package/src/themes/five/src/components/BusinessListingSearch/Accordion/index.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react"
+import { Title } from "../styles"
+import BisUpArrow from "@meronex/icons/bi/BisUpArrow"
+
+export const FilterAccordion = ({ title, children }) => {
+  const [open, setOpen] = useState(false)
+  const [setRotate, setRotateState] = useState("accordion__icon")
+
+  const activeAccordion = (value) => {
+    setRotateState(value ? 'accordion__icon rotate' : 'accordion__icon')
+    setOpen(value)
+  }
+
+  return (
+    <>
+      <Title onClick={() => activeAccordion(!open)}>
+        <h3>{title}</h3>
+        <BisUpArrow className={`${setRotate}`} />
+      </Title>
+      {open && children}
+    </>
+  )
+}

package/src/themes/five/src/components/BusinessListingSearch/MaxSectionItem/index.js

@@ -1,6 +1,8 @@
-import { useLanguage, useUtils } from 'ordering-components-external'
+import { useConfig, useLanguage, useUtils } from 'ordering-components-external'
 import React from 'react'
 import { MaxFilterContainer, MaxItem, MaxItemContainer, ProgressBar, ProgressContentWrapper } from '../styles'
+import { capitalize } from '../../../../../../utils'
+import { FilterAccordion } from '../Accordion'
 
 export const MaxSectionItem = (props) => {
   const {
@@ -13,10 +15,18 @@ export const MaxSectionItem = (props) => {
 
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const distanceUnit = configs?.distance_unit?.value
+
+  const units = {
+    mi: 1609,
+    km: 1000
+  }
 
   const parseValue = (option) => {
     return filter === 'max_distance'
-      ? `${option / 1000} ${t('KM', 'Km')}`
+      ? `${(option / units[distanceUnit]).toFixed(0)} ${t(`${distanceUnit?.toUpperCase()}`, capitalize(distanceUnit))}`
       : filter === 'max_eta'
         ? `${option} ${t('MIN', 'min')}`
         : parsePrice(option)
@@ -24,21 +34,22 @@ export const MaxSectionItem = (props) => {
 
   return (
     <MaxFilterContainer>
-      <h3>{title}</h3>
-      <ProgressContentWrapper>
-        <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
-      </ProgressContentWrapper>
-      <MaxItemContainer>
-        {options.map((option, i) => (
-          <MaxItem
-            key={option}
-            active={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter]))}
-            onClick={() => handleChangeFilters(filter, option)}
-          >
-            {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
-          </MaxItem>
-        ))}
-      </MaxItemContainer>
+      <FilterAccordion title={title}>
+        <ProgressContentWrapper>
+          <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+        </ProgressContentWrapper>
+        <MaxItemContainer>
+          {options.map((option, i) => (
+            <MaxItem
+              key={option}
+              active={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter]))}
+              onClick={() => handleChangeFilters(filter, option)}
+            >
+              {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+            </MaxItem>
+          ))}
+        </MaxItemContainer>
+      </FilterAccordion>
     </MaxFilterContainer>
   )
 }

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

@@ -37,7 +37,7 @@ import {
 import Skeleton from 'react-loading-skeleton'
 import { Check2, XLg as Close } from 'react-bootstrap-icons'
 import { SearchBar } from '../SearchBar'
-import { useLanguage, useOrder, useUtils, useSession, BusinessSearchList } from 'ordering-components-external'
+import { useLanguage, useOrder, useUtils, useSession, BusinessSearchList, useConfig } from 'ordering-components-external'
 import { BusinessController } from '../BusinessController'
 import { AutoScroll } from '../AutoScroll'
 import { BusinessTypeFilter } from '../BusinessTypeFilter'
@@ -54,6 +54,7 @@ import BisUpArrow from '@meronex/icons/bi/BisUpArrow'
 import { Modal } from '../Modal'
 import { ProductForm } from '../ProductForm'
 import { MaxSectionItem } from './MaxSectionItem'
+import { FilterAccordion } from './Accordion'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -81,9 +82,11 @@ export const BusinessListingSearchUI = (props) => {
   const [{ parsePrice, optimizeImage, parseDistance }] = useUtils()
   const [{ auth }] = useSession()
   const { width } = useWindowSize()
+  const [{ configs }] = useConfig()
   const maxDeliveryFeeOptions = [15, 25, 35, 'default']
   // const maxProductPriceOptions = [5, 10, 15, 'default']
-  const maxDistanceOptions = [1000, 2000, 5000, 'default']
+  const currency = configs.format_number_currency?.value
+  const maxDistanceOptions = configs?.distance_unit?.value === 'km' ? [1000, 2000, 5000, 'default'] : [1609, 3218, 8046, 'default']
   const maxTimeOptions = [5, 15, 30, 'default']
   const sortItems = [
     { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'distance' },
@@ -92,11 +95,11 @@ export const BusinessListingSearchUI = (props) => {
   ]
 
   const priceList = [
-    { level: '1', content: '$' },
-    { level: '2', content: '$$' },
-    { level: '3', content: '$$$' },
-    { level: '4', content: '$$$$' },
-    { level: '5', content: '$$$$$' }
+    { level: '1', content: `${currency}` },
+    { level: '2', content: `${Array(2).fill(currency).join('')}` },
+    { level: '3', content: `${Array(3).fill(currency).join('')}` },
+    { level: '4', content: `${Array(4).fill(currency).join('')}` },
+    { level: '5', content: `${Array(5).fill(currency).join('')}` }
   ]
 
   const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
@@ -157,58 +160,58 @@ export const BusinessListingSearchUI = (props) => {
       <FiltersContainer>
         <Filters>
           <SortContainer>
-            <h3>{t('SORT', 'Sort')}</h3>
-            {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
-              <SortItem
-                key={item?.value}
-                onClick={() => handleChangeFilters('orderBy', item?.value)}
-                active={filters?.orderBy?.includes(item?.value)}
-              >
-                {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <BisUpArrow /> : <BisDownArrow />}</>}
-              </SortItem>
-            ))}
-            {/* <SortItem onClick={() => handleChangeFilters('orderBy', 'default')}>{t('MOST_POPULAR', 'Most popular')}</SortItem>
-            <SortItem onClick={() => handleChangeFilters('orderBy', 'default')}>{t('RATING', 'Rating')}</SortItem> */}
-
+            <FilterAccordion title={t('SORT', 'Sort')}>
+              {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
+                <SortItem
+                  key={item?.value}
+                  onClick={() => handleChangeFilters('orderBy', item?.value)}
+                  active={filters?.orderBy?.includes(item?.value)}
+                >
+                  {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <BisUpArrow /> : <BisDownArrow />}</>}
+                </SortItem>
+              ))}
+            </FilterAccordion>
           </SortContainer>
           <BrandContainer>
-            <h3>{t('BRANDS', 'Brands')}</h3>
-            <BrandListWrapper>
-              {brandList?.loading && (
-                <>
-                  {[...Array(5).keys()].map(index => (
-                    <BrandItem key={index}>
-                      <Skeleton width={120} height={15} />
-                      <Skeleton width={16} height={16} />
-                    </BrandItem>
-                  ))}
-                </>
-              )}
-              {!brandList?.loading && brandList?.brands.map((brand, i) => brand?.enabled && (
-                <BrandItem key={i} onClick={() => handleChangeBrandFilter(brand?.id)}>
-                  <span>{brand?.name}</span>
-                  {filters?.franchise_ids?.includes(brand?.id) && <Check2 />}
-                </BrandItem>
-              ))}
-              {!brandList?.loading && ((brandList?.brands?.filter(brand => brand?.enabled))?.length === 0) && (
-                <NoResult>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</NoResult>
-              )}
-            </BrandListWrapper>
+            <FilterAccordion title={t('BRANDS', 'Brands')}>
+              <BrandListWrapper>
+                {brandList?.loading && (
+                  <>
+                    {[...Array(5).keys()].map(index => (
+                      <BrandItem key={index}>
+                        <Skeleton width={120} height={15} />
+                        <Skeleton width={16} height={16} />
+                      </BrandItem>
+                    ))}
+                  </>
+                )}
+                {!brandList?.loading && brandList?.brands.map((brand, i) => brand?.enabled && (
+                  <BrandItem key={i} onClick={() => handleChangeBrandFilter(brand?.id)}>
+                    <span>{brand?.name}</span>
+                    {filters?.franchise_ids?.includes(brand?.id) && <Check2 />}
+                  </BrandItem>
+                ))}
+                {!brandList?.loading && ((brandList?.brands?.filter(brand => brand?.enabled))?.length === 0) && (
+                  <NoResult>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</NoResult>
+                )}
+              </BrandListWrapper>
+            </FilterAccordion>
           </BrandContainer>
           <PriceFilterWrapper>
-            <h3>{t('PRICE_RANGE', 'Price range')}</h3>
-            <PriceFilterListWrapper>
-              {priceList.map((price, i) => (
-                <Button
-                  key={i}
-                  color={(filters?.price_level === price?.level) ? 'primary' : 'lightGray'}
-                  onClick={() => handleChangePriceRange(price?.level)}
-                >
-                  {price.content}
-                  {(filters?.price_level === price?.level) && <Close />}
-                </Button>
-              ))}
-            </PriceFilterListWrapper>
+            <FilterAccordion title={t('PRICE_RANGE', 'Price range')}>
+              <PriceFilterListWrapper>
+                {priceList.map((price, i) => (
+                  <Button
+                    key={i}
+                    color={(filters?.price_level === price?.level) ? 'primary' : 'lightGray'}
+                    onClick={() => handleChangePriceRange(price?.level)}
+                  >
+                    {price.content}
+                    {(filters?.price_level === price?.level) && <Close />}
+                  </Button>
+                ))}
+              </PriceFilterListWrapper>
+            </FilterAccordion>
           </PriceFilterWrapper>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
@@ -235,18 +238,14 @@ export const BusinessListingSearchUI = (props) => {
             filters={filters}
             handleChangeFilters={handleChangeFilters}
           />
-          {/* <MaxSectionItem
-              title={t('MAX_PRODUCT_PRICE', 'Max product price')}
-              options={maxProductPriceOptions}
-              filter='max_product_price'
-            /> */}
           <TagsContainer>
-            <h3>{t('BUSINESS_CATEGORIES', 'Business categories')}</h3>
-            <BusinessTypeFilter
-              isSearchMode
-              filters={filters}
-              handleChangeFilters={handleChangeFilters}
-            />
+            <FilterAccordion title={t('BUSINESS_CATEGORIES', 'Business categories')}>
+              <BusinessTypeFilter
+                isSearchMode
+                filters={filters}
+                handleChangeFilters={handleChangeFilters}
+              />
+            </FilterAccordion>
           </TagsContainer>
         </Filters>
         <FiltersResultContainer>