ordering-ui-external 10.2.2 → 10.3.0

package/_modules/themes/five/src/components/GiftCard/PurchaseGiftCard/index.js

@@ -8,6 +8,7 @@ exports.PurchaseGiftCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _orderingComponentsExternal = require("ordering-components-external");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _styledComponents = require("styled-components");
 var _Buttons = require("../../../styles/Buttons");
 var _RiRadioButtonFill = _interopRequireDefault(require("@meronex/icons/ri/RiRadioButtonFill"));
 var _MdRadioButtonUnchecked = _interopRequireDefault(require("@meronex/icons/md/MdRadioButtonUnchecked"));
@@ -34,16 +35,27 @@ var PurchaseGiftCardUI = function PurchaseGiftCardUI(props) {
     selectedProduct = props.selectedProduct,
     setSelectedProduct = props.setSelectedProduct,
     handleAccept = props.handleAccept;
+  var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
+    _useUtils2 = _slicedToArray(_useUtils, 1),
+    optimizeImage = _useUtils2[0].optimizeImage;
   return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("h2", null, t('PURCHASE_GIFT_CARD', 'Purchase gift card')), /*#__PURE__*/_react.default.createElement(_styles.GiftCardsListContainer, null, /*#__PURE__*/_react.default.createElement("p", null, t('SELECT_ONE_OPTION', 'Select one option')), /*#__PURE__*/_react.default.createElement(_styles.GiftCardsWrapper, null, productsListState.loading && _toConsumableArray(Array(5).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles.GiftCardItem, {
       key: i
-    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: 150
+    }, /*#__PURE__*/_react.default.createElement(_styles.IconControl, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 16,
+      height: 16
+    })), /*#__PURE__*/_react.default.createElement(_styles.CardImageStyled, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 38,
+      height: 38
+    })), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 100
     }));
   }), productsListState.products.map(function (product) {
+    var _theme$images, _theme$images$dummies;
     return /*#__PURE__*/_react.default.createElement(_styles.GiftCardItem, {
       key: product.id,
       onClick: function onClick() {
@@ -51,7 +63,9 @@ var PurchaseGiftCardUI = function PurchaseGiftCardUI(props) {
       }
     }, /*#__PURE__*/_react.default.createElement(_styles.IconControl, null, (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id) === product.id ? /*#__PURE__*/_react.default.createElement(_RiRadioButtonFill.default, null) : /*#__PURE__*/_react.default.createElement(_MdRadioButtonUnchecked.default, {
       disabled: true
-    })), /*#__PURE__*/_react.default.createElement("span", null, product.name));
+    })), /*#__PURE__*/_react.default.createElement(_styles.CardImage, {
+      bgimage: optimizeImage((product === null || product === void 0 ? void 0 : product.image) || (theme === null || theme === void 0 ? void 0 : (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$dummies = _theme$images.dummies) === null || _theme$images$dummies === void 0 ? void 0 : _theme$images$dummies.product), 'h_86,c_limit')
+    }), /*#__PURE__*/_react.default.createElement("span", null, product.name));
   }), !productsListState.loading && productsListState.products.length === 0 && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, null))), /*#__PURE__*/_react.default.createElement(_styles.ActionButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     type: "button",
     color: "primary",

package/_modules/themes/five/src/components/GiftCard/PurchaseGiftCard/styles.js

@@ -1,14 +1,14 @@
 "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
 });
-exports.IconControl = exports.GiftCardsWrapper = exports.GiftCardsListContainer = exports.GiftCardItem = exports.Container = exports.ActionButtonContainer = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+exports.IconControl = exports.GiftCardsWrapper = exports.GiftCardsListContainer = exports.GiftCardItem = exports.Container = exports.CardImageStyled = exports.CardImage = exports.ActionButtonContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireDefault(require("react"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-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 _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 _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  display: flex;\n  flex-direction: column;\n  padding-top: 30px;\n\n  h2 {\n    font-size: 24px;\n    font-weight: 600;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 24px;\n  }\n  > p {\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0;\n  }\n"])));
 exports.Container = Container;
@@ -20,16 +20,28 @@ var GiftCardItem = _styledComponents.default.div(_templateObject4 || (_templateO
   return props.theme.colors.gray200;
 });
 exports.GiftCardItem = GiftCardItem;
-var IconControl = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  margin-right: 40px;\n  ", "\n  svg {\n    font-size: 24px;\n  }\n\n  svg[disabled] {\n    color: ", ";\n  }\n"])), function (props) {
+var IconControl = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  svg {\n    font-size: 24px;\n  }\n\n  svg[disabled] {\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.colors.primary;
-}, function (props) {
-  var _props$theme;
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    margin-left: 40px;\n    margin-right: 0px;\n  "])));
 }, function (props) {
   return props.theme.colors.lightGray;
 });
 exports.IconControl = IconControl;
-var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0px;\n  background-color: ", ";\n  padding: 15px 20px;\n  > button {\n    height: 44px;\n    width: 100%;\n  }\n"])), function (props) {
+var ActionButtonContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0px;\n  background-color: ", ";\n  padding: 15px 20px;\n  > button {\n    height: 44px;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.colors.backgroundPage;
 });
-exports.ActionButtonContainer = ActionButtonContainer;
+exports.ActionButtonContainer = ActionButtonContainer;
+var CardImageStyled = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  background-position: center;\n  object-fit: cover;\n  height: 38px;\n  width: 38px;\n  min-width: 38px;\n  min-height: 38px;\n  border-radius: 8px;\n  box-shadow: 0px 1px 4px rgba(0,0,0,0.1);\n  margin: 0 12px;\n"])));
+exports.CardImageStyled = CardImageStyled;
+var CardImage = function CardImage(props) {
+  var style = {};
+  if (props.bgimage) {
+    style.backgroundImage = "url(".concat(props.bgimage, ")");
+  }
+  if (props.soldOut) {
+    style.filter = 'brightness(70%)';
+  }
+  return /*#__PURE__*/_react.default.createElement(CardImageStyled, _extends({}, props, {
+    style: style
+  }), props.children);
+};
+exports.CardImage = CardImage;

package/_modules/themes/six/src/components/Header/index.js

@@ -28,6 +28,9 @@ var _LanguageSelector = require("../LanguageSelector");
 var _CartContent = require("../CartContent");
 var _SidebarMenu = require("../SidebarMenu");
 var _HeaderOption = require("../HeaderOption");
+var _LoginForm = require("../../../../../themes/five/src/components/LoginForm");
+var _SignUpForm = require("../../../../../themes/five/src/components/SignUpForm");
+var _ForgotPasswordForm = require("../../../../../themes/five/src/components/ForgotPasswordForm");
 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; }
@@ -44,12 +47,14 @@ 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 Header = function Header(props) {
-  var _configState$configs, _configState$configs$, _customerState$user, _props$beforeElements, _props$beforeComponen, _theme$images, _theme$images$logos, _theme$images2, _theme$images2$logos, _orderState$options2, _configState$configs2, _configState$configs3, _configState$configs4, _configState$configs5, _orderState$options3, _orderState$options3$, _orderState$options3$2, _orderState$options3$3, _theme$defaultLanguag2, _theme$defaultLanguag3, _orderState$options4, _customerState$user2, _customerState$user3, _theme$defaultLanguag4, _theme$defaultLanguag5, _props$afterComponent, _props$afterElements;
+  var _configState$configs, _configState$configs$, _customerState$user, _props$beforeElements, _props$beforeComponen, _theme$images, _theme$images$logos, _theme$images2, _theme$images2$logos, _orderState$options2, _configState$configs2, _configState$configs3, _configState$configs4, _configState$configs5, _orderState$options3, _orderState$options3$, _orderState$options3$2, _orderState$options3$3, _theme$defaultLanguag2, _theme$defaultLanguag3, _orderState$options4, _customerState$user2, _customerState$user3, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6, _theme$defaultLanguag7, _theme$defaultLanguag8, _theme$defaultLanguag9, _props$afterComponent, _props$afterElements;
   var isHome = props.isHome,
     location = props.location,
     isShowOrderOptions = props.isShowOrderOptions,
     isHideSignup = props.isHideSignup,
-    isCustomerMode = props.isCustomerMode;
+    isCustomerMode = props.isCustomerMode,
+    notificationState = props.notificationState,
+    useModalMode = props.useModalMode;
   var _useLocation = (0, _reactRouterDom.useLocation)(),
     pathname = _useLocation.pathname;
   var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
@@ -59,8 +64,9 @@ var Header = function Header(props) {
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
-    _useSession2 = _slicedToArray(_useSession, 1),
-    auth = _useSession2[0].auth;
+    _useSession2 = _slicedToArray(_useSession, 2),
+    auth = _useSession2[0].auth,
+    login = _useSession2[1].login;
   var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
     _useOrder2 = _slicedToArray(_useOrder, 2),
     orderState = _useOrder2[0],
@@ -98,6 +104,14 @@ var Header = function Header(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     confirm = _useState10[0],
     setConfirm = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    authModalOpen = _useState12[0],
+    setAuthModalOpen = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    modalPageToShow = _useState14[0],
+    setModalPageToShow = _useState14[1];
   var cartsWithProducts = (orderState === null || orderState === void 0 ? void 0 : orderState.carts) && Object.values(orderState === null || orderState === void 0 ? void 0 : orderState.carts).filter(function (cart) {
     var _cart$products;
     return cart.products && ((_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.length) > 0;
@@ -148,6 +162,37 @@ var Header = function Header(props) {
       refreshOrderOptions();
     }
   };
+  var handleCustomModalClick = function handleCustomModalClick(e, _ref) {
+    var page = _ref.page;
+    e.preventDefault();
+    setModalPageToShow(page);
+  };
+  var closeAuthModal = function closeAuthModal() {
+    setAuthModalOpen(false);
+    setModalPageToShow(null);
+  };
+  var handleSuccessSignup = function handleSuccessSignup(user) {
+    var _user$session;
+    login({
+      user: user,
+      token: user === null || user === void 0 ? void 0 : (_user$session = user.session) === null || _user$session === void 0 ? void 0 : _user$session.access_token
+    });
+  };
+  var handleSuccessLogin = function handleSuccessLogin(user) {
+    if (user) {
+      closeAuthModal();
+    }
+  };
+  var handleOpenLoginSignUp = function handleOpenLoginSignUp(index) {
+    if (isCustomerMode) {
+      events.emit('go_to_page', {
+        page: 'home'
+      });
+    } else {
+      setModalPageToShow(index);
+      setAuthModalOpen(true);
+    }
+  };
   (0, _react.useEffect)(function () {
     if (isCustomerMode) {
       setCustomerModalOpen(false);
@@ -209,14 +254,14 @@ var Header = function Header(props) {
     }
   })), !auth && windowSize.width > 768 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MenuLink, {
     onClick: function onClick() {
-      return handleGoToPage({
+      return useModalMode ? handleOpenLoginSignUp('login') : handleGoToPage({
         page: 'signin'
       });
     },
     name: "signin"
   }, t((theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag2 = theme.defaultLanguages) === null || _theme$defaultLanguag2 === void 0 ? void 0 : _theme$defaultLanguag2.SIGN_IN) || 'Sign in')), !isHideSignup && /*#__PURE__*/_react.default.createElement(_styles.MenuLink, {
     onClick: function onClick() {
-      return handleGoToPage({
+      return useModalMode ? handleOpenLoginSignUp('signup') : handleGoToPage({
         page: 'signup'
       });
     },
@@ -305,10 +350,69 @@ var Header = function Header(props) {
     changeOrderAddressWithDefault: true,
     userCustomerSetup: customerState.user,
     setCustomerModalOpen: setCustomerModalOpen
-  })))), /*#__PURE__*/_react.default.createElement(_Confirm.Confirm, {
-    title: t('CUSTOMER', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag4 = theme.defaultLanguages) === null || _theme$defaultLanguag4 === void 0 ? void 0 : _theme$defaultLanguag4.CUSTOMER) || 'Customer'),
+  })))), authModalOpen && !auth && /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    open: authModalOpen,
+    onRemove: function onRemove() {
+      return closeAuthModal();
+    },
+    onClose: function onClose() {
+      return closeAuthModal();
+    },
+    width: "50%",
+    authModal: true,
+    closeOnBackdrop: true
+  }, modalPageToShow === 'login' && /*#__PURE__*/_react.default.createElement(_LoginForm.LoginForm, {
+    notificationState: notificationState,
+    handleSuccessLogin: handleSuccessLogin,
+    elementLinkToSignup: /*#__PURE__*/_react.default.createElement("a", {
+      onClick: function onClick(e) {
+        return handleCustomModalClick(e, {
+          page: 'signup'
+        });
+      },
+      href: "#"
+    }, t('CREATE_ACCOUNT', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag4 = theme.defaultLanguages) === null || _theme$defaultLanguag4 === void 0 ? void 0 : _theme$defaultLanguag4.CREATE_ACCOUNT) || 'Create account')),
+    elementLinkToForgotPassword: /*#__PURE__*/_react.default.createElement("a", {
+      onClick: function onClick(e) {
+        return handleCustomModalClick(e, {
+          page: 'forgotpassword'
+        });
+      },
+      href: "#"
+    }, t('RESET_PASSWORD', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag5 = theme.defaultLanguages) === null || _theme$defaultLanguag5 === void 0 ? void 0 : _theme$defaultLanguag5.RESET_PASSWORD) || 'Reset password')),
+    useLoginByCellphone: true,
+    isPopup: true
+  }), modalPageToShow === 'signup' && /*#__PURE__*/_react.default.createElement(_SignUpForm.SignUpForm, {
+    notificationState: notificationState,
+    elementLinkToLogin: /*#__PURE__*/_react.default.createElement("a", {
+      onClick: function onClick(e) {
+        return handleCustomModalClick(e, {
+          page: 'login'
+        });
+      },
+      href: "#"
+    }, t('LOGIN', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag6 = theme.defaultLanguages) === null || _theme$defaultLanguag6 === void 0 ? void 0 : _theme$defaultLanguag6.LOGIN) || 'Login')),
+    useLoginByCellphone: true,
+    useChekoutFileds: true,
+    handleSuccessSignup: handleSuccessSignup,
+    isPopup: true,
+    closeModal: function closeModal() {
+      return closeAuthModal();
+    }
+  }), modalPageToShow === 'forgotpassword' && /*#__PURE__*/_react.default.createElement(_ForgotPasswordForm.ForgotPasswordForm, {
+    elementLinkToLogin: /*#__PURE__*/_react.default.createElement("a", {
+      onClick: function onClick(e) {
+        return handleCustomModalClick(e, {
+          page: 'login'
+        });
+      },
+      href: "#"
+    }, t('LOGIN', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag7 = theme.defaultLanguages) === null || _theme$defaultLanguag7 === void 0 ? void 0 : _theme$defaultLanguag7.LOGIN) || 'Login')),
+    isPopup: true
+  })), /*#__PURE__*/_react.default.createElement(_Confirm.Confirm, {
+    title: t('CUSTOMER', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag8 = theme.defaultLanguages) === null || _theme$defaultLanguag8 === void 0 ? void 0 : _theme$defaultLanguag8.CUSTOMER) || 'Customer'),
     content: confirm.content,
-    acceptText: t('ACCEPT', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag5 = theme.defaultLanguages) === null || _theme$defaultLanguag5 === void 0 ? void 0 : _theme$defaultLanguag5.ACCEPT) || 'Accept'),
+    acceptText: t('ACCEPT', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag9 = theme.defaultLanguages) === null || _theme$defaultLanguag9 === void 0 ? void 0 : _theme$defaultLanguag9.ACCEPT) || 'Accept'),
     open: isCustomerMode && confirm.open,
     onClose: function onClose() {
       return setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {

package/_modules/utils/index.js

@@ -1133,14 +1133,24 @@ var calendarLanguages = {
 };
 exports.calendarLanguages = calendarLanguages;
 var getCateringValues = function getCateringValues(cateringTypeString, configs) {
-  var splitCateringValue = function splitCateringValue(configName) {
-    var _Object$values, _Object$values$find, _Object$values$find$v, _Object$values$find$v2, _Object$values$find$v3;
-    return (_Object$values = Object.values(configs || {})) === null || _Object$values === void 0 ? void 0 : (_Object$values$find = _Object$values.find(function (config) {
-      return (config === null || config === void 0 ? void 0 : config.key) === configName;
-    })) === null || _Object$values$find === void 0 ? void 0 : (_Object$values$find$v = _Object$values$find.value) === null || _Object$values$find$v === void 0 ? void 0 : (_Object$values$find$v2 = _Object$values$find$v.split('|')) === null || _Object$values$find$v2 === void 0 ? void 0 : (_Object$values$find$v3 = _Object$values$find$v2.find(function (val) {
-      return val.includes(cateringTypeString);
-    })) === null || _Object$values$find$v3 === void 0 ? void 0 : _Object$values$find$v3.split(',')[1];
-  };
+  var splitCateringValue;
+  if (configs !== null && configs !== void 0 && configs.preorder_slot_interval) {
+    splitCateringValue = function splitCateringValue(configName) {
+      var _configs$configName, _configs$configName$v, _configs$configName$v2, _configs$configName$v3;
+      return (_configs$configName = configs[configName]) === null || _configs$configName === void 0 ? void 0 : (_configs$configName$v = _configs$configName.value) === null || _configs$configName$v === void 0 ? void 0 : (_configs$configName$v2 = _configs$configName$v.split('|')) === null || _configs$configName$v2 === void 0 ? void 0 : (_configs$configName$v3 = _configs$configName$v2.find(function (val) {
+        return val.includes(cateringTypeString);
+      })) === null || _configs$configName$v3 === void 0 ? void 0 : _configs$configName$v3.split(',')[1];
+    };
+  } else {
+    splitCateringValue = function splitCateringValue(configName) {
+      var _Object$values, _Object$values$find, _Object$values$find$v, _Object$values$find$v2, _Object$values$find$v3;
+      return (_Object$values = Object.values(configs || {})) === null || _Object$values === void 0 ? void 0 : (_Object$values$find = _Object$values.find(function (config) {
+        return (config === null || config === void 0 ? void 0 : config.key) === configName;
+      })) === null || _Object$values$find === void 0 ? void 0 : (_Object$values$find$v = _Object$values$find.value) === null || _Object$values$find$v === void 0 ? void 0 : (_Object$values$find$v2 = _Object$values$find$v.split('|')) === null || _Object$values$find$v2 === void 0 ? void 0 : (_Object$values$find$v3 = _Object$values$find$v2.find(function (val) {
+        return val.includes(cateringTypeString);
+      })) === null || _Object$values$find$v3 === void 0 ? void 0 : _Object$values$find$v3.split(',')[1];
+    };
+  }
   var preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'));
   var preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'));
   var preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "10.2.2",
+  "version": "10.3.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -88,7 +88,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "9.2.1",
+    "ordering-components-external": "9.3.0",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/themes/five/src/components/GiftCard/PurchaseGiftCard/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import { useLanguage, PurchaseGiftCard as PurchaseGiftCardController } from 'ordering-components-external'
+import { useLanguage, useUtils, PurchaseGiftCard as PurchaseGiftCardController } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
 import { Button } from '../../../styles/Buttons'
 import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
 import MdRadioButtonUnchecked from '@meronex/icons/md/MdRadioButtonUnchecked'
@@ -12,7 +13,9 @@ import {
   GiftCardsWrapper,
   GiftCardItem,
   IconControl,
-  ActionButtonContainer
+  ActionButtonContainer,
+  CardImage,
+  CardImageStyled
 } from './styles'
 
 const PurchaseGiftCardUI = (props) => {
@@ -22,7 +25,10 @@ const PurchaseGiftCardUI = (props) => {
     setSelectedProduct,
     handleAccept
   } = props
+
+  const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
 
   return (
     <Container>
@@ -33,7 +39,13 @@ const PurchaseGiftCardUI = (props) => {
           {productsListState.loading && (
             [...Array(5).keys()].map(i => (
               <GiftCardItem key={i}>
-                <Skeleton width={150} />
+                <IconControl>
+                  <Skeleton width={16} height={16} />
+                </IconControl>
+                <CardImageStyled>
+                  <Skeleton width={38} height={38} />
+                </CardImageStyled>
+                <Skeleton width={100} />
               </GiftCardItem>
             ))
           )}
@@ -49,6 +61,9 @@ const PurchaseGiftCardUI = (props) => {
                   <MdRadioButtonUnchecked disabled />
                 )}
               </IconControl>
+              <CardImage
+                bgimage={optimizeImage(product?.image || theme?.images?.dummies?.product, 'h_86,c_limit')}
+              />
               <span>{product.name}</span>
             </GiftCardItem>
           ))}

package/src/themes/five/src/components/GiftCard/PurchaseGiftCard/styles.js

@@ -1,4 +1,5 @@
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
+import React from 'react'
 
 export const Container = styled.div`
   display: flex;
@@ -38,11 +39,6 @@ export const GiftCardItem = styled.div`
 export const IconControl = styled.div`
   display: flex;
   color: ${props => props.theme.colors.primary};
-  margin-right: 40px;
-  ${props => props.theme?.rtl && css`
-    margin-left: 40px;
-    margin-right: 0px;
-  `}
   svg {
     font-size: 24px;
   }
@@ -61,3 +57,33 @@ export const ActionButtonContainer = styled.div`
     width: 100%;
   }
 `
+
+export const CardImageStyled = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  background-position: center;
+  object-fit: cover;
+  height: 38px;
+  width: 38px;
+  min-width: 38px;
+  min-height: 38px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
+  margin: 0 12px;
+`
+export const CardImage = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+  if (props.soldOut) {
+    style.filter = 'brightness(70%)'
+  }
+  return (
+    <CardImageStyled {...props} style={style}>
+      {props.children}
+    </CardImageStyled>
+  )
+}

package/src/themes/six/src/components/Header/index.js

@@ -32,18 +32,25 @@ import { LanguageSelector } from '../LanguageSelector'
 import { CartContent } from '../CartContent'
 import { SidebarMenu } from '../SidebarMenu'
 import { HeaderOption } from '../HeaderOption'
+import { LoginForm } from '../../../../../themes/five/src/components/LoginForm'
+import { SignUpForm } from '../../../../../themes/five/src/components/SignUpForm'
+import { ForgotPasswordForm } from '../../../../../themes/five/src/components/ForgotPasswordForm'
+
+
 export const Header = (props) => {
   const {
     isHome,
     location,
     isShowOrderOptions,
     isHideSignup,
-    isCustomerMode
+    isCustomerMode,
+    notificationState,
+    useModalMode
   } = props
   const { pathname } = useLocation()
   const [events] = useEvent()
   const [, t] = useLanguage()
-  const [{ auth }] = useSession()
+  const [{ auth }, { login }] = useSession()
   const [orderState, { refreshOrderOptions }] = useOrder()
   const [openPopover, setOpenPopover] = useState({})
   const theme = useTheme()
@@ -54,6 +61,9 @@ export const Header = (props) => {
   const [customerModalOpen, setCustomerModalOpen] = useState(false)
   const [modalSelected, setModalSelected] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [authModalOpen, setAuthModalOpen] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
+
   const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
   const windowSize = useWindowSize()
   const onlineStatus = useOnlineStatus()
@@ -99,6 +109,39 @@ export const Header = (props) => {
       refreshOrderOptions()
     }
   }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const closeAuthModal = () => {
+    setAuthModalOpen(false)
+    setModalPageToShow(null)
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleOpenLoginSignUp = (index) => {
+    if (isCustomerMode) {
+      events.emit('go_to_page', { page: 'home' })
+    } else {
+      setModalPageToShow(index)
+      setAuthModalOpen(true)
+    }
+  }
+
   useEffect(() => {
     if (isCustomerMode) {
       setCustomerModalOpen(false)
@@ -171,9 +214,9 @@ export const Header = (props) => {
                 {
                   !auth && windowSize.width > 768 && (
                     <>
-                      <MenuLink onClick={() => handleGoToPage({ page: 'signin' })} name='signin'>{t(theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
+                      <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('login') : handleGoToPage({ page: 'signin' })} name='signin'>{t(theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
                       {!isHideSignup && (
-                        <MenuLink onClick={() => handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t(theme?.defaultLanguages?.SIGN_UP || 'Join now')}</MenuLink>
+                        <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('signup') : handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t(theme?.defaultLanguages?.SIGN_UP || 'Join now')}</MenuLink>
                       )}
                     </>
                   )
@@ -288,6 +331,72 @@ export const Header = (props) => {
             </UserEdit>
           </Modal>
         )}
+        {authModalOpen && !auth && (
+          <Modal
+            open={authModalOpen}
+            onRemove={() => closeAuthModal()}
+            onClose={() => closeAuthModal()}
+            width='50%'
+            authModal
+            closeOnBackdrop
+          >
+            {modalPageToShow === 'login' && (
+              <LoginForm
+                notificationState={notificationState}
+                handleSuccessLogin={handleSuccessLogin}
+                elementLinkToSignup={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'signup' })
+                    } href='#'
+                  >{t('CREATE_ACCOUNT', theme?.defaultLanguages?.CREATE_ACCOUNT || 'Create account')}
+                  </a>
+                }
+                elementLinkToForgotPassword={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'forgotpassword' })
+                    } href='#'
+                  >{t('RESET_PASSWORD', theme?.defaultLanguages?.RESET_PASSWORD || 'Reset password')}
+                  </a>
+                }
+                useLoginByCellphone
+                isPopup
+              />
+            )}
+            {modalPageToShow === 'signup' && (
+              <SignUpForm
+                notificationState={notificationState}
+                elementLinkToLogin={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'login' })
+                    } href='#'
+                  >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                  </a>
+                }
+                useLoginByCellphone
+                useChekoutFileds
+                handleSuccessSignup={handleSuccessSignup}
+                isPopup
+                closeModal={() => closeAuthModal()}
+              />
+            )}
+            {modalPageToShow === 'forgotpassword' && (
+              <ForgotPasswordForm
+                elementLinkToLogin={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'login' })
+                    } href='#'
+                  >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                  </a>
+                }
+                isPopup
+              />
+            )}
+          </Modal>
+        )}
         <Confirm
           title={t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
           content={confirm.content}

package/src/utils/index.js

@@ -707,10 +707,17 @@ export const calendarLanguages = {
 }
 
 export const getCateringValues = (cateringTypeString, configs) => {
-  const splitCateringValue = (configName) => Object.values(configs || {})
-    ?.find(config => config?.key === configName)
-    ?.value?.split('|')
-    ?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  let splitCateringValue
+  if (configs?.preorder_slot_interval) {
+    splitCateringValue = (configName) => configs[configName]
+      ?.value?.split('|')
+      ?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  } else {
+    splitCateringValue = (configName) => Object.values(configs || {})
+      ?.find(config => config?.key === configName)
+      ?.value?.split('|')
+      ?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  }
   const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
   const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
   const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))