ordering-ui-admin-external 1.43.73 → 1.43.74

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')))));
+};

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

@@ -0,0 +1,141 @@
+"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.SnoozeWrapper = exports.SnoozeTitle = exports.SnoozeContainer = exports.InfoContainer = exports.IconContainer = exports.DateContainer = exports.ButtonWrapper = exports.ButtonOptions = exports.Button = void 0;
+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;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var SnoozeContainer = exports.SnoozeContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  transition: all 3s ease-in;\n\n  ", "\n"])), function (_ref) {
+  var openCalendar = _ref.openCalendar;
+  return openCalendar && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 362px;\n  "])));
+});
+var SnoozeTitle = exports.SnoozeTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  font-size: 16;\n  font-weight: 700;\n  margin-bottom: 30px;\n"])));
+var SnoozeWrapper = exports.SnoozeWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 30px;\n\n  > div {\n    margin: auto 0;\n    > p {\n      margin: 0;\n    }\n  }\n\n  @media (min-width: 862px) {\n    flex-direction: row;\n  }\n"])));
+var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n\n  > button {\n    margin-right: 20px;\n  }\n"])));
+var Button = exports.Button = _styledComponents.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 44px;\n  background: ", ";\n  color: ", ";\n  border-color: ", ";\n  border: 1px solid #CCC;\n  border-radius: 8px;\n  line-height: 30px;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-size: 14px;\n  cursor: pointer;\n  outline: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all .2s ease-in;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n"])), function (props) {
+  var _props$theme$colors;
+  return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (_ref2) {
+  var active = _ref2.active;
+  return active && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background: ", " !important;\n    color: #FFF !important;\n  "])), function (props) {
+    return (0, _polished.darken)(0.07, props.theme.colors.primary);
+  });
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color === 'primary' && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primaryContrast;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return (0, _polished.darken)(0.04, props.theme.colors.primary);
+  }, function (props) {
+    return (0, _polished.darken)(0.1, props.theme.colors.primary);
+  }, function (_ref4) {
+    var outline = _ref4.outline;
+    return outline && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {
+      var _props$theme$colors2;
+      return ((_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.backgroundPage) || '#FFF';
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return props.theme.colors.primaryContrast;
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return (0, _polished.darken)(0.07, props.theme.colors.primary);
+    });
+  }, function (_ref5) {
+    var circle = _ref5.circle;
+    return circle && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return props.theme.colors.primaryContrast;
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return (0, _polished.darken)(0.07, props.theme.colors.primary);
+    }, function (props) {
+      return (0, _polished.darken)(0.07, props.theme.colors.primary);
+    });
+  }, function (_ref6) {
+    var circle = _ref6.circle,
+      outline = _ref6.outline;
+    return circle && outline && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
+      var _props$theme$colors3;
+      return ((_props$theme$colors3 = props.theme.colors) === null || _props$theme$colors3 === void 0 ? void 0 : _props$theme$colors3.backgroundPage) || '#FFF';
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return props.theme.colors.primary;
+    }, function (props) {
+      return props.theme.colors.primary;
+    });
+  });
+});
+var ButtonOptions = exports.ButtonOptions = _styledComponents.default.button(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  min-width: 65px;\n  height: 44px;\n  background: ", ";\n  color: ", ";\n  border-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  line-height: 30px;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-size: 14px;\n  cursor: pointer;\n  outline: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all .2s ease-in;\n\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  &:hover {\n    color: ", " !important;\n    border-color: ", ";\n  }\n  ", "\n"])), function (props) {
+  var _props$theme$colors4;
+  return ((_props$theme$colors4 = props.theme.colors) === null || _props$theme$colors4 === void 0 ? void 0 : _props$theme$colors4.backgroundPage) || '#FFF';
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return (0, _polished.darken)(0.07, props.theme.colors.primary);
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (_ref7) {
+  var active = _ref7.active;
+  return active && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    color: ", " !important;\n    border-color: ", ";\n    border-width: 2px;\n  "])), function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  });
+});
+var DateContainer = exports.DateContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 44px;\n  background: ", ";\n  color: ", ";\n  border-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  line-height: 30px;\n\n  ", "\n\n  input {\n    width: auto;\n    min-width: 220px;\n    border: 0px;\n    padding-left: 15px;\n    padding-right: 15px;\n    font-size: 14px;\n    cursor: pointer;\n    outline: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transition: all .2s ease-in;\n  }\n\n  ", "\n\n  .react-datepicker-popper {\n    @media (min-width: 820px) {\n      transform: translate3d(-20px, 114px, 0px) !important;\n      right: 0px;\n      left: unset !important;\n    }\n  }\n  .react-datepicker__triangle {\n    display: none;\n  }\n"])), function (props) {
+  var _props$theme$colors5;
+  return ((_props$theme$colors5 = props.theme.colors) === null || _props$theme$colors5 === void 0 ? void 0 : _props$theme$colors5.backgroundPage) || '#FFF';
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (_ref8) {
+  var active = _ref8.active;
+  return active && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    color: ", " !important;\n    border-color: ", " !important;\n    border-width: 2px;\n\n    input {\n      color: ", " !important;\n    }\n  "])), function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  });
+}, function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    span {\n      margin-left: 10px;\n    }\n  "]))) : (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    span {\n      margin-right: 10px;\n    }\n  "])));
+});
+var IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: none;\n  border-radius: 6px;\n  margin-left: 10px;\n  padding: 0 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .2s ease-in;\n"])));
+var InfoContainer = exports.InfoContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: end;\n  justify-content: ", ";\n\n  ", "\n"])), function (_ref9) {
+  var hasSnooze = _ref9.hasSnooze;
+  return hasSnooze ? 'space-between' : 'flex-start';
+}, function (_ref10) {
+  var hideButtons = _ref10.hideButtons;
+  return hideButtons && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    justify-content: flex-end;\n  "])));
+});