ordering-ui-admin-external 1.43.72 → 1.43.74

package/_modules/components/Stores/BusinessSummary/index.js

@@ -15,6 +15,7 @@ var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
 var _BusinessPreview = require("../BusinessPreview");
+var _SnoozeComponent = require("../SnoozeComponent");
 var _useWindowSize2 = require("../../../hooks/useWindowSize");
 var _styles2 = require("./styles");
 var _utils = require("../../../utils");
@@ -43,11 +44,14 @@ var BusinessSummary = exports.BusinessSummary = function BusinessSummary(props)
     handleDuplicateBusiness = props.handleDuplicateBusiness,
     handleDeleteBusiness = props.handleDeleteBusiness,
     handleSyncEvent = props.handleSyncEvent,
+    handleUpdateBusinessClick = props.handleUpdateBusinessClick,
     extraOpen = props.extraOpen,
     spoonityConfig = props.spoonityConfig,
     siteState = props.siteState,
     isExpand = props.isExpand,
-    setIsExpand = props.setIsExpand;
+    setIsExpand = props.setIsExpand,
+    formState = props.formState,
+    setFormState = props.setFormState;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -70,21 +74,25 @@ var BusinessSummary = exports.BusinessSummary = function BusinessSummary(props)
     _useState2 = _slicedToArray(_useState, 2),
     isBusinessPreview = _useState2[0],
     setIsBusinessPreview = _useState2[1];
-  var _useState3 = (0, _react.useState)('desktop'),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectedView = _useState4[0],
-    setSelectedView = _useState4[1];
+    isBusinessSnooze = _useState4[0],
+    setIsBusinessSnooze = _useState4[1];
+  var _useState5 = (0, _react.useState)('desktop'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedView = _useState6[0],
+    setSelectedView = _useState6[1];
   var _useSession = (0, _orderingComponentsAdminExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     sessionState = _useSession2[0];
-  var _useState5 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       open: false,
       content: null,
       handleOnAccept: null
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    confirm = _useState6[0],
-    setConfirm = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    confirm = _useState8[0],
+    setConfirm = _useState8[1];
   var isEnabledWhiteLabelModule = configs === null || configs === void 0 || (_configs$white_label_ = configs.white_label_module) === null || _configs$white_label_ === void 0 ? void 0 : _configs$white_label_.value;
   var isAllowRegisteredBusiness = (sessionState === null || sessionState === void 0 || (_sessionState$user = sessionState.user) === null || _sessionState$user === void 0 ? void 0 : _sessionState$user.level) === 0 || (sessionState === null || sessionState === void 0 || (_sessionState$user2 = sessionState.user) === null || _sessionState$user2 === void 0 ? void 0 : _sessionState$user2.level) === 2 && (configs === null || configs === void 0 || (_configs$allow_busine = configs.allow_business_owner_register_business) === null || _configs$allow_busine === void 0 ? void 0 : _configs$allow_busine.value) === '1';
   var projectsForEnableSync = ['dominosordering'];
@@ -247,7 +255,7 @@ var BusinessSummary = exports.BusinessSummary = function BusinessSummary(props)
     bgimage: optimizeImage(businessState === null || businessState === void 0 || (_businessState$busine7 = businessState.business) === null || _businessState$busine7 === void 0 ? void 0 : _businessState$busine7.header, 'h_200,c_limit')
   }, /*#__PURE__*/_react.default.createElement(_styles2.BusinessLogo, {
     bgimage: optimizeImage((businessState === null || businessState === void 0 || (_businessState$busine8 = businessState.business) === null || _businessState$busine8 === void 0 ? void 0 : _businessState$busine8.logo) || ((_theme$images = theme.images) === null || _theme$images === void 0 || (_theme$images = _theme$images.dummies) === null || _theme$images === void 0 ? void 0 : _theme$images.businessLogo), 'h_100,c_limit')
-  })), /*#__PURE__*/_react.default.createElement(_styles2.BusinessDetailsContent, null, /*#__PURE__*/_react.default.createElement(_styles2.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_styles2.BusinessDetailsContent, null, /*#__PURE__*/_react.default.createElement(_styles2.ButtonsContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "lightPrimary",
     borderRadius: "8px",
     onClick: handleOpenCategory,
@@ -258,11 +266,18 @@ var BusinessSummary = exports.BusinessSummary = function BusinessSummary(props)
     borderRadius: "8px",
     onClick: handleOpenSite,
     disabled: businessState === null || businessState === void 0 ? void 0 : businessState.loading
-  }, t('STORE_WEBSITE', 'Store website'))), /*#__PURE__*/_react.default.createElement(_styles2.BusinessDescription, null, businessState !== null && businessState !== void 0 && businessState.loading ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+  }, t('STORE_WEBSITE', 'Store website'))), /*#__PURE__*/_react.default.createElement(_styles2.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "lightGreen",
+    borderRadius: "8px",
+    onClick: function onClick() {
+      return setIsBusinessSnooze(true);
+    },
+    disabled: businessState === null || businessState === void 0 ? void 0 : businessState.loading
+  }, t('SNOOZE', 'Snooze')))), /*#__PURE__*/_react.default.createElement(_styles2.BusinessDescription, null, businessState !== null && businessState !== void 0 && businessState.loading ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 300
   }) : businessState === null || businessState === void 0 || (_businessState$busine9 = businessState.business) === null || _businessState$busine9 === void 0 ? void 0 : _businessState$busine9.description), /*#__PURE__*/_react.default.createElement(_styles2.BusinessConfigsContainer, {
     isLoading: businessState === null || businessState === void 0 ? void 0 : businessState.loading
-  }, (isAdmin ? !!spoonityConfig ? businessConfigs : businessConfigs.filter(function (configs) {
+  }, (isAdmin ? spoonityConfig ? businessConfigs : businessConfigs.filter(function (configs) {
     return configs.key !== 'spoonity_key';
   }) : businessConfigs.filter(function (c) {
     return !itemsExcluded.includes(c.key);
@@ -314,5 +329,21 @@ var BusinessSummary = exports.BusinessSummary = function BusinessSummary(props)
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Phone, null)))), /*#__PURE__*/_react.default.createElement(_BusinessPreview.BusinessPreview, {
     isMobileView: selectedView === 'mobile',
     business: businessState === null || businessState === void 0 ? void 0 : businessState.business
+  })), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    width: "85%",
+    maxWidth: "1000px",
+    open: isBusinessSnooze,
+    onClose: function onClose() {
+      return setIsBusinessSnooze(false);
+    },
+    closeOnBackdrop: false
+  }, /*#__PURE__*/_react.default.createElement(_SnoozeComponent.SnoozeComponent, {
+    dataState: businessState === null || businessState === void 0 ? void 0 : businessState.business,
+    handleUpdate: handleUpdateBusinessClick,
+    setFormState: setFormState,
+    formState: formState,
+    onClose: function onClose() {
+      return setIsBusinessSnooze(false);
+    }
   })));
 };

package/_modules/components/Stores/BusinessSummary/styles.js

@@ -4,17 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RightHeader = exports.LeftHeader = exports.DetailsHeader = exports.ButtonWrapper = exports.BusinessPreviewHeader = exports.BusinessName = exports.BusinessLogo = exports.BusinessHeader = exports.BusinessDetailsContent = exports.BusinessDetailsContainer = exports.BusinessDescription = exports.BusinessConfigsContainer = exports.BusinessConfigItem = exports.ActionSelectorWrapper = void 0;
+exports.RightHeader = exports.LeftHeader = exports.DetailsHeader = exports.ButtonsContainer = exports.ButtonWrapper = exports.BusinessPreviewHeader = exports.BusinessName = exports.BusinessLogo = exports.BusinessHeader = exports.BusinessDetailsContent = exports.BusinessDetailsContainer = exports.BusinessDescription = exports.BusinessConfigsContainer = exports.BusinessConfigItem = exports.ActionSelectorWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _polished = require("polished");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 BusinessDetailsContainer = exports.BusinessDetailsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  padding: 20px;\n  position: relative;\n  overflow-x: hidden;\n  @media (min-width: 768px) {\n    min-width: 500px;\n  }\n"])));
+var BusinessDetailsContainer = exports.BusinessDetailsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  padding: 20px;\n  position: relative;\n  overflow-x: hidden;\n\n  @media (min-width: 768px) {\n    min-width: 500px;\n  }\n"])));
 var DetailsHeader = exports.DetailsHeader = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var BusinessName = exports.BusinessName = _styledComponents.default.h1(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 20px;\n  margin: 0px;\n  font-weight: 700;\n  flex: 1;\n\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
@@ -52,13 +52,13 @@ var BusinessDetailsContent = exports.BusinessDetailsContent = _styledComponents.
 var BusinessDescription = exports.BusinessDescription = _styledComponents.default.p(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 25px 0;\n"])), function (props) {
   return props.theme.colors.headingColor;
 });
-var BusinessConfigsContainer = exports.BusinessConfigsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 50px;\n  overflow: hidden;\n  ", "\n\n  > div:first-child {\n    border-top: none !important;\n  }\n\n  > div:last-child {\n    border-bottom: none !important;\n  }  \n"])), function (props) {
+var BusinessConfigsContainer = exports.BusinessConfigsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 50px;\n  overflow: hidden;\n  ", "\n\n  > div:first-child {\n    border-top: none !important;\n  }\n\n  > div:last-child {\n    border-bottom: none !important;\n  }\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (_ref2) {
   var isLoading = _ref2.isLoading;
   return isLoading && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    pointer-events: none;\n  "])));
 });
-var BusinessConfigItem = exports.BusinessConfigItem = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 10px 15px;\n  display: flex;\n  justify-content: space-between;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  span {\n    font-size: 14px;\n  }\n\n  ", "\n  \n  svg {\n    font-size: 20px;\n  }\n"])), function (props) {
+var BusinessConfigItem = exports.BusinessConfigItem = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 10px 15px;\n  display: flex;\n  justify-content: space-between;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  span {\n    font-size: 14px;\n  }\n\n  ", "\n\n  svg {\n    font-size: 20px;\n  }\n"])), function (props) {
   return props.theme.colors.lightGray;
 }, function (props) {
   return props.theme.colors.borderColor;
@@ -97,4 +97,5 @@ var BusinessPreviewHeader = exports.BusinessPreviewHeader = _styledComponents.de
   var _props$theme3;
   return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    margin-left: 40px;\n  "]))) : (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-right: 40px;\n  "])));
 });
-var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  > button:first-child {\n    margin-right: 15px;\n  }\n"])));
+var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  > button {\n    margin-right: 15px;\n  }\n"])));
+var ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));

package/_modules/components/Stores/ProductDetails/index.js

@@ -155,7 +155,10 @@ var ProductDetailsUI = function ProductDetailsUI(props) {
     handleShowOption: handleShowOption,
     extraOpen: extraOpen,
     isExpand: isExpand,
-    setIsExpand: setIsExpand
+    setIsExpand: setIsExpand,
+    formState: formState,
+    handleChangeFormState: handleChangeFormState,
+    handleUpdateClick: handleUpdateClick
   })), extraOpen && /*#__PURE__*/_react.default.createElement(_Shared.MoreSidebarLayout, {
     isExtendExtraOpen: isExtendExtraOpen,
     onClose: handleCloseExtraOpen

package/_modules/components/Stores/ProductExtraSuboption/index.js

@@ -17,6 +17,7 @@ var _styledComponents = require("styled-components");
 var _reactHookForm = require("react-hook-form");
 var _styles2 = require("./styles");
 var _ProductOptionExternalId = require("../ProductOptionExternalId");
+var _SnoozeComponent = require("../SnoozeComponent");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -99,6 +100,10 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
     _useState14 = _slicedToArray(_useState13, 2),
     externalId = _useState14[0],
     setExternalId = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isProductExtraSuboptionSnooze = _useState16[0],
+    setProductExtraSuboptionSnooze = _useState16[1];
   var handleClickSubOptionImage = function handleClickSubOptionImage(id) {
     document.getElementById(id).click();
   };
@@ -376,6 +381,10 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
     title: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ThreeDots, null),
     id: theme !== null && theme !== void 0 && theme.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    onClick: function onClick() {
+      return setProductExtraSuboptionSnooze(true);
+    }
+  }, t('SNOOZE', 'Snooze')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     onClick: function onClick() {
       setSelectedSubOptionId(subOption === null || subOption === void 0 ? void 0 : subOption.id);
       setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
@@ -455,5 +464,28 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
     value: externalId,
     handleChange: setExternalId,
     handleUpdate: handleUpdateExternalId
+  })), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    width: "85%",
+    maxWidth: "1000px",
+    open: isProductExtraSuboptionSnooze,
+    onClose: function onClose() {
+      return setProductExtraSuboptionSnooze(false);
+    },
+    closeOnBackdrop: false
+  }, /*#__PURE__*/_react.default.createElement(_SnoozeComponent.SnoozeComponent, {
+    hideButtons: true,
+    dataState: subOption,
+    handleChangeFormState: function handleChangeFormState(data) {
+      return handleChangeInput({
+        target: {
+          name: 'snooze_until',
+          value: data.snooze_until
+        }
+      });
+    },
+    formState: formState,
+    onClose: function onClose() {
+      return setProductExtraSuboptionSnooze(false);
+    }
   })));
 };

package/_modules/components/Stores/ProductExtras/index.js

@@ -15,6 +15,7 @@ var _ProductExtraOptions = require("../ProductExtraOptions");
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styledComponents = require("styled-components");
 var _utils = require("../../../utils");
+var _SnoozeComponent = require("../SnoozeComponent");
 var _styles2 = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -107,6 +108,10 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     _useState18 = _slicedToArray(_useState17, 2),
     extraSelected = _useState18[0],
     setExtraSelected = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isProductExtraSnooze = _useState20[0],
+    setProductExtraSnooze = _useState20[1];
   var extraInputRef = (0, _react.useRef)();
   var handleOpenExtraDetails = function handleOpenExtraDetails(e, extra, isInitialRender) {
     var _e$target, _e$target2;
@@ -337,7 +342,16 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     placeholder: t('NAME', 'Name'),
     defaultValue: extraSelected === null || extraSelected === void 0 ? void 0 : extraSelected.name,
     ref: extraInputRef
-  })), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttons-container"
+  }, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    className: "snooze",
+    color: "lightGreen",
+    borderRadius: "8px",
+    onClick: function onClick() {
+      return setProductExtraSnooze(true);
+    }
+  }, t('SNOOZE', 'Snooze')), /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "primary",
     onClick: function onClick() {
       var _extraInputRef$curren2;
@@ -345,7 +359,28 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
         name: extraInputRef === null || extraInputRef === void 0 || (_extraInputRef$curren2 = extraInputRef.current) === null || _extraInputRef$curren2 === void 0 ? void 0 : _extraInputRef$curren2.value
       });
     }
-  }, t('SAVE', 'Save')))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+  }, t('SAVE', 'Save'))))), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    width: "85%",
+    maxWidth: "1000px",
+    open: isProductExtraSnooze,
+    onClose: function onClose() {
+      return setProductExtraSnooze(false);
+    },
+    closeOnBackdrop: false
+  }, /*#__PURE__*/_react.default.createElement(_SnoozeComponent.SnoozeComponent, {
+    isAutomaticUpdate: true,
+    dataState: extraSelected,
+    handleUpdate: function handleUpdate(data) {
+      return handleChangeExtra(extraSelected === null || extraSelected === void 0 ? void 0 : extraSelected.id, {
+        snooze_until: data.snooze_until
+      });
+    },
+    setFormState: setExtrasState,
+    formState: extrasState,
+    onClose: function onClose() {
+      return setProductExtraSnooze(false);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
     title: t('WEB_APPNAME', 'Ordering'),
     content: alertState.content,
     acceptText: t('ACCEPT', 'Accept'),

package/_modules/components/Stores/ProductExtras/styles.js

@@ -49,7 +49,7 @@ var MoreContainer = exports.MoreContainer = _styledComponents.default.div(_templ
   return props.theme.colors.headingColor;
 });
 var OptionNameWrapper = exports.OptionNameWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  > span.name {\n    font-size: 14px;\n    padding: 0 10px;\n  }\n  button {\n    width: 24px;\n    min-width: 24px;\n    height: 24px;\n    svg {\n      font-size: 14px;\n    }\n  }\n"])));
-var ExtraOptionEditContainer = exports.ExtraOptionEditContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 20px;\n\n  > h2 {\n    font-size: 20px;\n    font-weight: 700;\n    margin-bottom: 30px;\n  }\n  button {\n    display: block;\n    margin-top: 30px;\n    height: 44px;\n    border-radius: 8px;\n    margin-left: auto;\n  }\n"])));
+var ExtraOptionEditContainer = exports.ExtraOptionEditContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n\n  > h2 {\n    font-size: 20px;\n    font-weight: 700;\n    margin-bottom: 30px;\n  }\n  button {\n    display: block;\n    margin-top: 30px;\n    height: 44px;\n    border-radius: 8px;\n    margin-left: 30px;\n  }\n\n  .buttons-container {\n    display: flex;\n    justify-content: flex-end;\n  }\n"])));
 var FormControl = exports.FormControl = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  label {\n    font-size: 14px;\n    margin-bottom: 10px;\n  }\n  input {\n    width: 100%;\n    height: 44px;\n  }\n"])));
 var Details = exports.Details = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  color: ", ";\n\n  svg {\n    margin: 0 5px;\n    font-size: 13px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.colors.primary;

package/_modules/components/Stores/SnoozeComponent/index.js

@@ -0,0 +1,222 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SnoozeComponent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+require("react-date-range/dist/styles.css");
+require("react-date-range/dist/theme/default.css");
+var _moment = _interopRequireDefault(require("moment"));
+var locales = _interopRequireWildcard(require("react-date-range/dist/locale"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _utils = require("../../../utils");
+var _styles2 = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var SnoozeComponent = exports.SnoozeComponent = function SnoozeComponent(props) {
+  var isAutomaticUpdate = props.isAutomaticUpdate,
+    hideButtons = props.hideButtons,
+    dataState = props.dataState,
+    handleUpdate = props.handleUpdate,
+    onClose = props.onClose,
+    setFormState = props.setFormState,
+    handleChangeFormState = props.handleChangeFormState,
+    formState = props.formState;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    state = _useLanguage2[0],
+    t = _useLanguage2[1];
+  var _useState = (0, _react.useState)(function () {
+      var today = new Date();
+      today.setDate(today.getDate() + 1);
+      return today;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDate = _useState2[0],
+    setSelectedDate = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openCalendar = _useState4[0],
+    setOpenCalendar = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedOption = _useState6[0],
+    setSelectedOption = _useState6[1];
+  var handleRemoveSnooze = function handleRemoveSnooze() {
+    handleChangeFormState && handleChangeFormState({
+      snooze_until: null
+    });
+    setFormState && setFormState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        changes: _objectSpread(_objectSpread({}, prevState === null || prevState === void 0 ? void 0 : prevState.changes), {}, {
+          snooze_until: null
+        })
+      });
+    });
+  };
+  var handleChangeOption = function handleChangeOption(value) {
+    setSelectedOption(value);
+    if (value === 'until_date') return;
+    var currentDate = new Date();
+    var newDate = null;
+    if (value === 'off') {
+      handleRemoveSnooze();
+      return;
+    }
+    if (value === '1') {
+      newDate = new Date(currentDate.getTime() + 60 * 60 * 1000);
+    } else if (value === '2') {
+      newDate = new Date(currentDate.getTime() + 2 * 60 * 60 * 1000);
+    } else if (value === '4') {
+      newDate = new Date(currentDate.getTime() + 4 * 60 * 60 * 1000);
+    } else if (value === '6') {
+      newDate = new Date(currentDate.getTime() + 6 * 60 * 60 * 1000);
+    } else if (value === '12') {
+      newDate = new Date(currentDate.getTime() + 12 * 60 * 60 * 1000);
+    } else if (value === 'indefinitely') {
+      newDate = new Date(currentDate.setFullYear(currentDate.getFullYear() + 2));
+    }
+    if (newDate) {
+      handleChangeFormState && handleChangeFormState({
+        snooze_until: (0, _moment.default)(newDate).utc().format('YYYY-MM-DD HH:mm:ss')
+      });
+      setFormState && setFormState(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          changes: _objectSpread(_objectSpread({}, prevState === null || prevState === void 0 ? void 0 : prevState.changes), {}, {
+            snooze_until: (0, _moment.default)(newDate).utc().format('YYYY-MM-DD HH:mm:ss')
+          })
+        });
+      });
+    }
+  };
+  var handleSelectDate = function handleSelectDate(date) {
+    var currentDate = new Date();
+    var diffInHours = Math.abs((date - currentDate) / 36e5);
+    var tolerance = 0.15; // 10 minutes tolerance
+
+    var matchedOption = '';
+    if (Math.abs(diffInHours - 1) <= tolerance) {
+      matchedOption = '1';
+    } else if (Math.abs(diffInHours - 2) <= tolerance) {
+      matchedOption = '2';
+    } else if (Math.abs(diffInHours - 4) <= tolerance) {
+      matchedOption = '4';
+    } else if (Math.abs(diffInHours - 6) <= tolerance) {
+      matchedOption = '6';
+    } else if (Math.abs(diffInHours - 12) <= tolerance) {
+      matchedOption = '12';
+    }
+    setSelectedDate(date);
+    if (matchedOption) {
+      setSelectedOption(matchedOption);
+    }
+    handleChangeFormState && handleChangeFormState({
+      snooze_until: (0, _moment.default)(date).utc().format('YYYY-MM-DD HH:mm:ss')
+    });
+    setFormState && setFormState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        changes: _objectSpread(_objectSpread({}, prevState === null || prevState === void 0 ? void 0 : prevState.changes), {}, {
+          snooze_until: (0, _moment.default)(date).utc().format('YYYY-MM-DD HH:mm:ss')
+        })
+      });
+    });
+  };
+  var handleUpdateClick = function handleUpdateClick() {
+    var _Object$keys;
+    onClose && onClose();
+    if (isAutomaticUpdate) {
+      handleUpdate && handleUpdate(formState === null || formState === void 0 ? void 0 : formState.changes);
+      return;
+    }
+    if ((_Object$keys = Object.keys(formState === null || formState === void 0 ? void 0 : formState.changes)) !== null && _Object$keys !== void 0 && _Object$keys.length) {
+      handleUpdate && handleUpdate();
+    }
+  };
+  var dateOptions = ['or', 'until_date'];
+  var snoozeOptions = [{
+    value: 'off',
+    content: t('SNOOZE_OFF', 'Off')
+  }, {
+    value: '1',
+    content: t('SNOOZE_ONE_HOUR', '1H')
+  }, {
+    value: '2',
+    content: t('SNOOZE_TWO_HOUR', '2H')
+  }, {
+    value: '4',
+    content: t('SNOOZE_FOUR_HOUR', '4H')
+  }, {
+    value: '6',
+    content: t('SNOOZE_SIX_HOUR', '6H')
+  }, {
+    value: '12',
+    content: t('SNOOZE_TWELVE_HOUR', '12H')
+  }, {
+    value: 'indefinitely',
+    content: t('SNOOZE_INDEFINITELY', 'Indefinitely')
+  }, {
+    value: 'or',
+    content: t('SNOOZE_OR', 'or')
+  }, {
+    value: 'until_date'
+  }];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.SnoozeContainer, {
+    openCalendar: openCalendar
+  }, /*#__PURE__*/_react.default.createElement(_styles2.SnoozeTitle, null, t('SNOOZE_TITLE', 'Disable for:')), /*#__PURE__*/_react.default.createElement(_styles2.SnoozeWrapper, null, snoozeOptions === null || snoozeOptions === void 0 ? void 0 : snoozeOptions.map(function (option, i) {
+    var _state$language;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, option.value === 'until_date' && /*#__PURE__*/_react.default.createElement(_styles2.DateContainer, {
+      active: option.value === selectedOption || openCalendar
+    }, /*#__PURE__*/_react.default.createElement(_styles2.IconContainer, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Calendar4, null)), /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
+      locale: (0, _utils.getLocale)(state === null || state === void 0 || (_state$language = state.language) === null || _state$language === void 0 ? void 0 : _state$language.code, locales),
+      selected: selectedDate,
+      minDate: new Date(),
+      onChange: handleSelectDate,
+      onCalendarOpen: function onCalendarOpen() {
+        setSelectedOption('until_date');
+        setOpenCalendar(true);
+      },
+      onCalendarClose: function onCalendarClose() {
+        return setOpenCalendar(false);
+      },
+      showTimeSelect: true,
+      timeFormat: "HH:mm",
+      timeIntervals: 15,
+      timeCaption: "Time",
+      dateFormat: "MMMM d, yyyy HH:mm"
+    })), option.value === 'or' && /*#__PURE__*/_react.default.createElement("p", null, option.content), !dateOptions.includes(option.value) && /*#__PURE__*/_react.default.createElement(_styles2.ButtonOptions, {
+      onClick: function onClick() {
+        return handleChangeOption(option.value);
+      },
+      active: option.value === selectedOption
+    }, option.content));
+  })), /*#__PURE__*/_react.default.createElement(_styles2.InfoContainer, {
+    hasSnooze: dataState === null || dataState === void 0 ? void 0 : dataState.snooze_until
+  }, !hideButtons && /*#__PURE__*/_react.default.createElement(_styles2.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.Button, {
+    color: "primarys",
+    onClick: function onClick() {
+      return handleUpdateClick();
+    }
+  }, selectedOption === 'off' ? t('DISABLE_SNOOZE', 'Disable Snooze') : t('SNOOZE_SAVE', 'Snooze')), /*#__PURE__*/_react.default.createElement(_styles2.Button, {
+    onClick: function onClick() {
+      return onClose();
+    }
+  }, t('CANCEL', 'Cancel'))), (dataState === null || dataState === void 0 ? void 0 : dataState.snooze_until) && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("strong", null, t('SNOOZED_UNTIL', 'Snoozed until:')), " ", _moment.default.utc(dataState === null || dataState === void 0 ? void 0 : dataState.snooze_until).local().format('YYYY-MM-DD HH:mm')))));
+};