ordering-ui-external 2.1.4 → 2.2.1

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

@@ -171,19 +171,23 @@ var ServiceFormUI = function ServiceFormUI(props) {
     };
     handleSave(values);
   };
+  var getMomentTime = function getMomentTime(time) {
+    var _moment = (0, _moment2.default)("".concat((0, _moment2.default)(selectDate).format('YYYY-MM-DD'), " ").concat(time), 'YYYY-MM-DD HH:mm').toDate();
+    return _moment;
+  };
   var handleChangeTime = function handleChangeTime(time) {
     if (!time || time === timeSelected) return;
-    var _moment = (0, _moment2.default)("".concat((0, _moment2.default)(selectDate).format('YYYY-MM-DD'), " ").concat(time), 'YYYY-MM-DD HH:mm').toDate();
+    var _moment = getMomentTime(time);
     setTimeSelected(time);
     setDateSelected(_moment);
   };
-  var isBusyTime = function isBusyTime(professional) {
+  var isBusyTime = function isBusyTime(professional, selectedMoment) {
     var _professional$schedul, _professional$schedul2, _product$duration, _professional$schedul3, _professional$schedul4, _professional$busy_ti;
-    if (!dateSelected) return false;
-    var startDay = (0, _moment2.default)(dateSelected).utc().format('d');
+    if (!selectedMoment) return false;
+    var startDay = (0, _moment2.default)(selectedMoment).utc().format('d');
     var isStartScheduleEnabled = professional === null || professional === void 0 ? void 0 : (_professional$schedul = professional.schedule) === null || _professional$schedul === void 0 ? void 0 : (_professional$schedul2 = _professional$schedul[startDay]) === null || _professional$schedul2 === void 0 ? void 0 : _professional$schedul2.enabled;
     var duration = (_product$duration = product === null || product === void 0 ? void 0 : product.duration) !== null && _product$duration !== void 0 ? _product$duration : 0;
-    var endDay = (0, _moment2.default)(dateSelected).add(duration - 1, 'minutes').utc().format('d');
+    var endDay = (0, _moment2.default)(selectedMoment).add(duration - 1, 'minutes').utc().format('d');
     var isEndScheduleEnabled = professional === null || professional === void 0 ? void 0 : (_professional$schedul3 = professional.schedule) === null || _professional$schedul3 === void 0 ? void 0 : (_professional$schedul4 = _professional$schedul3[endDay]) === null || _professional$schedul4 === void 0 ? void 0 : _professional$schedul4.enabled;
     if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true;
     if ((professional === null || professional === void 0 ? void 0 : (_professional$busy_ti = professional.busy_times) === null || _professional$busy_ti === void 0 ? void 0 : _professional$busy_ti.length) === 0) return false;
@@ -192,7 +196,7 @@ var ServiceFormUI = function ServiceFormUI(props) {
       return !(item.start === (productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar = productCart.calendar_event) === null || _productCart$calendar === void 0 ? void 0 : _productCart$calendar.start) && item.end === (productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar2 = productCart.calendar_event) === null || _productCart$calendar2 === void 0 ? void 0 : _productCart$calendar2.end));
     }) : _toConsumableArray(professional === null || professional === void 0 ? void 0 : professional.busy_times);
     var valid = busyTimes.some(function (item) {
-      return _moment2.default.utc(item === null || item === void 0 ? void 0 : item.start).local().valueOf() <= (0, _moment2.default)(dateSelected).valueOf() && (0, _moment2.default)(dateSelected).valueOf() < _moment2.default.utc(item === null || item === void 0 ? void 0 : item.end).local().valueOf() || _moment2.default.utc(item === null || item === void 0 ? void 0 : item.start).local().valueOf() <= (0, _moment2.default)(dateSelected).add(duration, 'minutes').valueOf() && (0, _moment2.default)(dateSelected).add(duration, 'minutes').valueOf() < _moment2.default.utc(item === null || item === void 0 ? void 0 : item.end).local().valueOf();
+      return _moment2.default.utc(item === null || item === void 0 ? void 0 : item.start).local().valueOf() <= (0, _moment2.default)(selectedMoment).valueOf() && (0, _moment2.default)(selectedMoment).valueOf() < _moment2.default.utc(item === null || item === void 0 ? void 0 : item.end).local().valueOf() || _moment2.default.utc(item === null || item === void 0 ? void 0 : item.start).local().valueOf() < (0, _moment2.default)(selectedMoment).add(duration, 'minutes').valueOf() && (0, _moment2.default)(selectedMoment).add(duration, 'minutes').valueOf() < _moment2.default.utc(item === null || item === void 0 ? void 0 : item.end).local().valueOf();
     });
     return valid;
   };
@@ -329,8 +333,8 @@ var ServiceFormUI = function ServiceFormUI(props) {
   }, currentProfessional ? /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, currentProfessional !== null && currentProfessional !== void 0 && currentProfessional.photo ? /*#__PURE__*/_react.default.createElement(_styles.ProfessionalPhoto, {
     bgimage: currentProfessional === null || currentProfessional === void 0 ? void 0 : currentProfessional.photo
   }) : /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null), /*#__PURE__*/_react.default.createElement(_styles.NameWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, currentProfessional === null || currentProfessional === void 0 ? void 0 : currentProfessional.name, " ", currentProfessional === null || currentProfessional === void 0 ? void 0 : currentProfessional.lastname), /*#__PURE__*/_react.default.createElement(_styles.StatusInfo, {
-    available: !isBusyTime(currentProfessional)
-  }, isBusyTime(currentProfessional) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    available: !isBusyTime(currentProfessional, dateSelected)
+  }, isBusyTime(currentProfessional, dateSelected) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "status"
   }, t('BUSY_ON_SELECTED_TIME', 'Busy on selected time'))) : /*#__PURE__*/_react.default.createElement("span", {
     className: "status"
@@ -345,8 +349,8 @@ var ServiceFormUI = function ServiceFormUI(props) {
     }, /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, professional !== null && professional !== void 0 && professional.photo ? /*#__PURE__*/_react.default.createElement(_styles.ProfessionalPhoto, {
       bgimage: professional === null || professional === void 0 ? void 0 : professional.photo
     }) : /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null), /*#__PURE__*/_react.default.createElement(_styles.NameWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, professional === null || professional === void 0 ? void 0 : professional.name, " ", professional === null || professional === void 0 ? void 0 : professional.lastname), /*#__PURE__*/_react.default.createElement(_styles.StatusInfo, {
-      available: !isBusyTime(professional)
-    }, isBusyTime(professional) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      available: !isBusyTime(professional, dateSelected)
+    }, isBusyTime(professional, dateSelected) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
       className: "status"
     }, t('BUSY_ON_SELECTED_TIME', 'Busy on selected time'))) : /*#__PURE__*/_react.default.createElement("span", {
       className: "status"
@@ -395,6 +399,7 @@ var ServiceFormUI = function ServiceFormUI(props) {
     return /*#__PURE__*/_react.default.createElement(_styles.TimeItem, {
       key: i,
       active: timeSelected === time.value,
+      disabled: isBusyTime(currentProfessional, getMomentTime(time.value)),
       onClick: function onClick() {
         return handleChangeTime(time.value);
       }
@@ -406,7 +411,7 @@ var ServiceFormUI = function ServiceFormUI(props) {
       return handleAddProduct();
     },
     color: "primary",
-    disabled: isBusyTime(currentProfessional)
+    disabled: isBusyTime(currentProfessional, dateSelected)
   }, t('BOOK', 'Book')), (!auth || isSoldOut || maxProductQuantity <= 0) && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     className: "add ".concat(!(productCart && !isSoldOut && maxProductQuantity > 0) ? 'soldout' : ''),
     color: "primary",

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TimeListWrapper = exports.TimeItem = exports.SwiperWrapper = exports.StatusInfo = exports.SkeletonBlock = exports.SelectedItem = exports.SectionHeader = exports.ScheduleWrapper = exports.ProfessionalSelectWrapper = exports.ProfessionalPhoto = exports.ProfessionalInfoWrapper = exports.PriceAndDuration = exports.OrderTimeWrapper = exports.NameWrapper = exports.MonthYearLayer = exports.InfoWrapper = exports.ImageWrapper = exports.HeaderInfoWrapper = exports.EmptyProfessional = exports.DropDownWrapper = exports.Divider = exports.DaysSwiper = exports.DayNumber = exports.DayName = exports.Day = exports.DateWrapper = exports.Container = exports.ClosedBusinessMsg = exports.ButtonWrapper = exports.ArrowButtonWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = _interopRequireDefault(require("react"));
-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, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
+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, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
 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; }
@@ -133,16 +133,27 @@ var DayNumber = _styledComponents.default.div(_templateObject32 || (_templateObj
 exports.DayNumber = DayNumber;
 var TimeListWrapper = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: -12px;\n  width: calc(100% + 24px);\n  margin-top: 30px;\n  max-height: 250px;\n  overflow: auto;\n"])));
 exports.TimeListWrapper = TimeListWrapper;
-var TimeItem = _styledComponents.default.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  border-radius: 7.6px;\n  padding: 5px 15px;\n  margin: 12px;\n  width: calc(50% - 24px);\n  min-width: calc(50% - 24px);\n  box-sizing: border-box;\n  user-select: none;\n\n  ", "\n\n  span {\n    font-size: 14px;\n    white-space: nowrap;\n  }\n\n  @media (min-width: 400px) {\n    width: calc(33.33% - 24px);\n    min-width: calc(33.33% - 24px);\n  }\n\n  @media (min-width: 576px) {\n    width: calc(25% - 24px);\n    min-width: calc(25% - 24px);\n  }\n\n  @media (min-width: 769px) {\n    width: calc(16.66% - 24px);\n    min-width: calc(16.66% - 24px);\n  }\n"])), function (props) {
-  return props.theme.colors.gray200;
+var TimeItem = _styledComponents.default.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  border: 1px solid transparent;\n  color: ", ";\n  border-radius: 7.6px;\n  padding: 5px 15px;\n  margin: 12px;\n  width: calc(50% - 24px);\n  min-width: calc(50% - 24px);\n  box-sizing: border-box;\n  user-select: none;\n\n  ", "\n\n  ", "\n\n  span {\n    font-size: 14px;\n    white-space: nowrap;\n  }\n\n  @media (min-width: 400px) {\n    width: calc(33.33% - 24px);\n    min-width: calc(33.33% - 24px);\n  }\n\n  @media (min-width: 576px) {\n    width: calc(25% - 24px);\n    min-width: calc(25% - 24px);\n  }\n\n  @media (min-width: 769px) {\n    width: calc(16.66% - 24px);\n    min-width: calc(16.66% - 24px);\n  }\n"])), function (props) {
+  return props.theme.colors.primaryContrast;
+}, function (props) {
+  return props.theme.colors.primary;
 }, function (_ref6) {
   var active = _ref6.active;
-  return active && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n  "])), function (props) {
+  return active && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
     return props.theme.colors.primaryContrast;
   }, function (props) {
     return props.theme.colors.primary;
   });
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n  "])), function (props) {
+    return props.theme.colors.gray200;
+  }, function (props) {
+    return props.theme.colors.lightGray;
+  });
 });
 exports.TimeItem = TimeItem;
-var ClosedBusinessMsg = _styledComponents.default.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  text-align: center;\n  font-size: 16px;\n  width: 100%;\n"])));
+var ClosedBusinessMsg = _styledComponents.default.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  text-align: center;\n  font-size: 16px;\n  width: 100%;\n"])));
 exports.ClosedBusinessMsg = ClosedBusinessMsg;

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

@@ -174,7 +174,7 @@ var UserDetailsUI = function UserDetailsUI(props) {
     onClick: function onClick() {
       return toggleIsEdit();
     }
-  }, t('CHANGE', 'Change')) : /*#__PURE__*/_react.default.createElement(_FcCancel.default, {
+  }, t('CHANGE_USER_DETAILS', 'Change customer details')) : /*#__PURE__*/_react.default.createElement(_FcCancel.default, {
     className: "cancel",
     onClick: function onClick() {
       return toggleEditState();

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

@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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([""])));
 exports.Container = Container;
-var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 5px;\n\n  h1 {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", "; \n    margin: 0px 10px 0px 0px;\n    ", "\n  }\n\n  svg {\n    font-size: 24px;\n  }\n\n  svg.cancel {\n    color: #D81212;\n    cursor: pointer;\n  }\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n    user-select: none;\n  }\n"])), function (props) {
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 5px;\n\n  h1 {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", "; \n    margin: 0px 10px 0px 0px;\n    ", "\n  }\n\n  svg {\n    font-size: 24px;\n  }\n\n  svg.cancel {\n    color: #D81212;\n    cursor: pointer;\n  }\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n    user-select: none;\n    &:hover {\n        text-decoration: underline;\n      }\n  }\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 }, function (props) {
   var _props$theme;

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

@@ -320,7 +320,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     return /*#__PURE__*/_react.default.createElement(BeforeMidComponents, _extends({
       key: i
     }, props));
-  }), !requiredFields && /*#__PURE__*/_react.default.createElement(_styles.Divider, null), (0, _utils.sortInputFields)({
+  }), (0, _utils.sortInputFields)({
     values: validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie11 = validationFields.fields) === null || _validationFields$fie11 === void 0 ? void 0 : _validationFields$fie11.checkout
   }).map(function (field) {
     var _ref2, _formState$changes$fi, _ref3, _formState$changes$fi2;

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

@@ -249,6 +249,9 @@ var LogoutActionUI = function LogoutActionUI(props) {
   var _useLanguage3 = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage4 = _slicedToArray(_useLanguage3, 2),
     t = _useLanguage4[1];
+  var _useEvent3 = (0, _orderingComponentsExternal.useEvent)(),
+    _useEvent4 = _slicedToArray(_useEvent3, 1),
+    events = _useEvent4[0];
   var _useCustomer = (0, _orderingComponentsExternal.useCustomer)(),
     _useCustomer2 = _slicedToArray(_useCustomer, 2),
     deleteUserCustomer = _useCustomer2[1].deleteUserCustomer;
@@ -266,6 +269,9 @@ var LogoutActionUI = function LogoutActionUI(props) {
     deleteUserCustomer(true);
     props.handleLogoutClick();
     props.onClose && props.onClose();
+    events.emit('go_to_page', {
+      page: 'home'
+    });
   };
   return /*#__PURE__*/_react.default.createElement(_styles.PopoverListItem, {
     onClick: handleClick

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

@@ -266,8 +266,6 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     return /*#__PURE__*/_react.default.createElement(BeforeComponent, _extends({
       key: i
     }, props));
-  }), !isHiddenAddress && !props.hideOptions && /*#__PURE__*/_react.default.createElement(_ProfileOptions.ProfileOptions, {
-    value: "account"
   }), /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.UserProfileContainer, {
     mbottom: isHiddenAddress && 25
   }, showCustomerPicture && /*#__PURE__*/_react.default.createElement(_styles.UserImage, {

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

@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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([""])));
 exports.Container = Container;
-var UserProfileContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 90%;\n  margin: 25px auto ", ";\n\n  @media (min-width: 768px) {\n    align-items: flex-start;\n    flex-direction: row;\n  }\n"])), function (props) {
+var UserProfileContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 90%;\n  margin: 25px auto ", ";\n"])), function (props) {
   return props.mbottom ? "".concat(props.mbottom, "px") : 'auto';
 });
 exports.UserProfileContainer = UserProfileContainer;

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

@@ -16,7 +16,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var WalletTransactionItem = function WalletTransactionItem(props) {
-  var _item$event, _item$event$author$na, _item$event2, _item$event2$author, _item$event$order_id, _item$event3;
+  var _item$event, _item$description, _itemDescription$pop, _item$event$author$na, _item$event2, _item$event2$author, _item$event$order_id, _item$event3, _itemDescription$join;
   var item = props.item,
     idx = props.idx,
     type = props.type;
@@ -31,6 +31,8 @@ var WalletTransactionItem = function WalletTransactionItem(props) {
     t = _useLanguage2[1];
   var LANG_EVENT_KEY = "WALLET_".concat(type.toUpperCase(), "_").concat(item === null || item === void 0 ? void 0 : item.event.toUpperCase(), "_").concat(item === null || item === void 0 ? void 0 : item.event_type.toUpperCase(), "_").concat((item === null || item === void 0 ? void 0 : item.amount) >= 0 ? 'POSITIVE' : 'NEGATIVE');
   var lang_event_text = !!(item !== null && item !== void 0 && (_item$event = item.event) !== null && _item$event !== void 0 && _item$event.order_id) ? ":author ".concat((item === null || item === void 0 ? void 0 : item.amount) >= 0 ? 'Add' : 'Reduce', " money in Order No. :order_id") : ":author ".concat((item === null || item === void 0 ? void 0 : item.amount) >= 0 ? 'Add' : 'Reduce', " money");
+  var itemDescription = item === null || item === void 0 ? void 0 : (_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.split(' ');
+  var order_id = (_itemDescription$pop = itemDescription === null || itemDescription === void 0 ? void 0 : itemDescription.pop()) !== null && _itemDescription$pop !== void 0 ? _itemDescription$pop : '';
   return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.Dot, {
     isTop: idx === 0
   }), /*#__PURE__*/_react.default.createElement(_styles.DateBlock, null, /*#__PURE__*/_react.default.createElement("span", null, parseDate(item === null || item === void 0 ? void 0 : item.created_at)), /*#__PURE__*/_react.default.createElement("span", {
@@ -38,6 +40,6 @@ var WalletTransactionItem = function WalletTransactionItem(props) {
       color: (item === null || item === void 0 ? void 0 : item.amount) > 0 && theme.colors.primary,
       fontWeight: 'bold'
     }
-  }, (item === null || item === void 0 ? void 0 : item.amount) > 0 && '+ ', type !== 'credit_point' ? parsePrice(item === null || item === void 0 ? void 0 : item.amount) : item === null || item === void 0 ? void 0 : item.amount)), /*#__PURE__*/_react.default.createElement(_styles.MessageBlock, null, /*#__PURE__*/_react.default.createElement("span", null, t(LANG_EVENT_KEY, lang_event_text).replace(':author', (_item$event$author$na = item === null || item === void 0 ? void 0 : (_item$event2 = item.event) === null || _item$event2 === void 0 ? void 0 : (_item$event2$author = _item$event2.author) === null || _item$event2$author === void 0 ? void 0 : _item$event2$author.name) !== null && _item$event$author$na !== void 0 ? _item$event$author$na : '').replace(':order_id', (_item$event$order_id = item === null || item === void 0 ? void 0 : (_item$event3 = item.event) === null || _item$event3 === void 0 ? void 0 : _item$event3.order_id) !== null && _item$event$order_id !== void 0 ? _item$event$order_id : ''))), !!(item !== null && item !== void 0 && item.description) && /*#__PURE__*/_react.default.createElement(_styles.DescriptionBlock, null, /*#__PURE__*/_react.default.createElement("span", null, item === null || item === void 0 ? void 0 : item.description)), !!(item !== null && item !== void 0 && item.code) && /*#__PURE__*/_react.default.createElement(_styles.DescriptionBlock, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("strong", null, t('CODE', 'Code'), ":"), " ", item === null || item === void 0 ? void 0 : item.code)));
+  }, (item === null || item === void 0 ? void 0 : item.amount) > 0 && '+ ', type !== 'credit_point' ? parsePrice(item === null || item === void 0 ? void 0 : item.amount) : item === null || item === void 0 ? void 0 : item.amount)), /*#__PURE__*/_react.default.createElement(_styles.MessageBlock, null, /*#__PURE__*/_react.default.createElement("span", null, t(LANG_EVENT_KEY, lang_event_text).replace(':author', (_item$event$author$na = item === null || item === void 0 ? void 0 : (_item$event2 = item.event) === null || _item$event2 === void 0 ? void 0 : (_item$event2$author = _item$event2.author) === null || _item$event2$author === void 0 ? void 0 : _item$event2$author.name) !== null && _item$event$author$na !== void 0 ? _item$event$author$na : '').replace(':order_id', (_item$event$order_id = item === null || item === void 0 ? void 0 : (_item$event3 = item.event) === null || _item$event3 === void 0 ? void 0 : _item$event3.order_id) !== null && _item$event$order_id !== void 0 ? _item$event$order_id : ''))), !!(item !== null && item !== void 0 && item.description) && /*#__PURE__*/_react.default.createElement(_styles.DescriptionBlock, null, /*#__PURE__*/_react.default.createElement("span", null, "".concat(t('ACCUMULATION_CREDIT_POINT_BY_ORDER', (_itemDescription$join = itemDescription === null || itemDescription === void 0 ? void 0 : itemDescription.join(' ')) !== null && _itemDescription$join !== void 0 ? _itemDescription$join : 'Accumulation credit point by order'), " ").concat(order_id))), !!(item !== null && item !== void 0 && item.code) && /*#__PURE__*/_react.default.createElement(_styles.DescriptionBlock, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("strong", null, t('CODE', 'Code'), ":"), " ", item === null || item === void 0 ? void 0 : item.code)));
 };
 exports.WalletTransactionItem = WalletTransactionItem;

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

@@ -11,9 +11,9 @@ var _styledComponents = require("styled-components");
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styles = require("./styles");
 var _WalletTransactionItem = require("../WalletTransactionItem");
-var _NotFoundSource = require("../../../../../components/NotFoundSource");
 var _Tabs = require("../../styles/Tabs");
 var _GiftCardUI = require("../GiftCard/GiftCardUI");
+var _NotFoundSource = require("../NotFoundSource");
 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; }
@@ -74,12 +74,12 @@ var WalletsUI = function WalletsUI(props) {
     setTabSelected(wallet.type);
     setWalletSelected(wallet.id);
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, !walletList.loading && !userLoyaltyLevel.loading && !walletList.error && ((_walletList$wallets3 = walletList.wallets) === null || _walletList$wallets3 === void 0 ? void 0 : _walletList$wallets3.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, !walletList.loading && !userLoyaltyLevel.loading && !walletList.error && ((_walletList$wallets3 = walletList.wallets) === null || _walletList$wallets3 === void 0 ? void 0 : _walletList$wallets3.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('WALLETS', 'Wallets')), /*#__PURE__*/_react.default.createElement(_styles.TabsContainer, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
     variant: "primary",
     className: "tabs"
   }, (_walletList$wallets4 = walletList.wallets) === null || _walletList$wallets4 === void 0 ? void 0 : _walletList$wallets4.map(function (wallet) {
     var _walletName$wallet$ty, _walletName$wallet$ty2;
-    return ((_walletName$wallet$ty = walletName[wallet.type]) === null || _walletName$wallet$ty === void 0 ? void 0 : _walletName$wallet$ty.isActive) && /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+    return ((_walletName$wallet$ty = walletName[wallet.type]) === null || _walletName$wallet$ty === void 0 ? void 0 : _walletName$wallet$ty.isActive) && /*#__PURE__*/_react.default.createElement(_styles.Tab, {
       key: wallet.id,
       active: tabSelected === wallet.type,
       onClick: function onClick() {
@@ -88,7 +88,7 @@ var WalletsUI = function WalletsUI(props) {
       borderBottom: true,
       className: "tab_title"
     }, (_walletName$wallet$ty2 = walletName[wallet.type]) === null || _walletName$wallet$ty2 === void 0 ? void 0 : _walletName$wallet$ty2.name);
-  })), /*#__PURE__*/_react.default.createElement(_styles.WrapContent, null, /*#__PURE__*/_react.default.createElement(_styles.Transactions, {
+  }))), /*#__PURE__*/_react.default.createElement(_styles.WrapContent, null, /*#__PURE__*/_react.default.createElement(_styles.Transactions, {
     isLoyaltyLevel: !!loyaltyLevel
   }, /*#__PURE__*/_react.default.createElement(_styles.SectionWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.BalanceElement, null, /*#__PURE__*/_react.default.createElement("h1", null, (currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.type) === 'cash' ? parsePrice(currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.balance) : currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.balance), /*#__PURE__*/_react.default.createElement("span", null, (currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.type) === 'cash' ? configs === null || configs === void 0 ? void 0 : (_configs$stripe_curre = configs.stripe_currency) === null || _configs$stripe_curre === void 0 ? void 0 : _configs$stripe_curre.value : t('POINTS', 'Points')))), /*#__PURE__*/_react.default.createElement(_GiftCardUI.GiftCardUI, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "transactions_list"

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

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

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

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

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

@@ -20,6 +20,7 @@ var _styles = require("./styles");
 var _CgRadioCheck = _interopRequireDefault(require("@meronex/icons/cg/CgRadioCheck"));
 var _CgRadioChecked = _interopRequireDefault(require("@meronex/icons/cg/CgRadioChecked"));
 var _BiTimeFive = _interopRequireDefault(require("@meronex/icons/bi/BiTimeFive"));
+var _utils = require("../../../../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,7 +37,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var MomentControlUI = function MomentControlUI(props) {
-  var _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _props$beforeElements, _props$beforeComponen, _moment$format, _props$afterComponent, _props$afterElements;
   var isAsap = props.isAsap,
     datesList = props.datesList,
     hoursList = props.hoursList,
@@ -97,11 +98,8 @@ var MomentControlUI = function MomentControlUI(props) {
     !orderState.loading && handleAsap();
     setIsASP(true);
   };
-  var _formatMonthYear = function formatMonthYear(date) {
-    return (0, _moment.default)(date).format('MMMM');
-  };
-  var _formatShortWeekday = function formatShortWeekday(date) {
-    return (0, _moment.default)(date).format('dd');
+  var formatWeekMonth = function formatWeekMonth(obj, date) {
+    return obj === 'month' ? t(_utils.calendarLanguages.months[(0, _moment.default)(date).format('MMMM')], (0, _moment.default)(date).format('MMMM')) : t(_utils.calendarLanguages.week[(0, _moment.default)(date).format('dd')], (0, _moment.default)(date).format('dd'));
   };
   var _formatDay = function formatDay(date) {
     var minMon = (0, _moment.default)(minDate).format('MM');
@@ -160,7 +158,7 @@ var MomentControlUI = function MomentControlUI(props) {
       return handleCheckBoxChange(true);
     },
     isLoading: orderState === null || orderState === void 0 ? void 0 : orderState.loading
-  }, isASP ? /*#__PURE__*/_react.default.createElement(_CgRadioChecked.default, null) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('CHECKOUT_ASAP', 'ASAP'), " (", (0, _moment.default)(new Date()).format('LLLL'), " - ", t('DELIVERY_TIME', 'delivery time'), ")")), /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
+  }, isASP ? /*#__PURE__*/_react.default.createElement(_CgRadioChecked.default, null) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('CHECKOUT_ASAP', 'ASAP') + " (".concat(t((_moment$format = (0, _moment.default)().format('dddd')) === null || _moment$format === void 0 ? void 0 : _moment$format.toLocaleUpperCase(), (0, _moment.default)().format('dddd')), ", ").concat(t(_utils.calendarLanguages.months[(0, _moment.default)().format('MMMM')], (0, _moment.default)().format('MMMM'))).concat((0, _moment.default)().format(' D, yyyy h:mm A'), " - ").concat(t('DELIVERY_TIME', 'delivery time'), ")"))), /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
     highlight: !isASP,
     onClick: function onClick() {
       return handleCheckBoxChange(null);
@@ -187,10 +185,10 @@ var MomentControlUI = function MomentControlUI(props) {
     minDate: minDate,
     maxDate: maxDate,
     formatMonthYear: function formatMonthYear(locale, date) {
-      return _formatMonthYear(date);
+      return formatWeekMonth('month', date);
     },
     formatShortWeekday: function formatShortWeekday(locale, date) {
-      return _formatShortWeekday(date);
+      return formatWeekMonth('week', date);
     },
     formatDay: function formatDay(locale, date) {
       return _formatDay(date);

package/_modules/utils/index.js

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

package/package.json

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

package/src/hooks/useIntersectionObserver.js

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

package/src/styles/Toast/index.js

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

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

@@ -213,10 +213,9 @@ export const Header = (props) => {
                   </span>
                 </CustomerInfo>
               )}
-              <Divider />
               {onlineStatus && windowSize.width > 820 && (
                 <>
-                  {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
+                  {(isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
                     <MomentMenu
                       onClick={configState?.configs?.max_days_preorder?.value === -1 || configState?.configs?.max_days_preorder?.value === 0
                         ? null

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

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

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

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