ordering-ui-external 1.5.4 → 1.6.0

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

@@ -8,6 +8,7 @@ exports.ServiceForm = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("swiper/react");
 var _orderingComponentsExternal = require("ordering-components-external");
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _Confirm = require("../Confirm");
 var _Modal = require("../Modal");
 var _LoginForm = require("../LoginForm");
@@ -38,14 +39,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 _swiper.default.use([_swiper.Navigation]);
 var ServiceFormUI = function ServiceFormUI(props) {
-  var _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6;
-  var product = props.product,
+  var _professionalListStat3, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6;
+  var productObject = props.productObject,
     professionalSelected = props.professionalSelected,
     handleSave = props.handleSave,
     isSoldOut = props.isSoldOut,
     maxProductQuantity = props.maxProductQuantity,
     productCart = props.productCart,
-    professionalList = props.professionalList;
+    isCartProduct = props.isCartProduct,
+    professionalListState = props.professionalListState;
+  var product = productObject.product,
+    loading = productObject.loading,
+    error = productObject.error;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -179,10 +184,31 @@ var ServiceFormUI = function ServiceFormUI(props) {
     };
   }, [isDropDown]);
   (0, _react.useEffect)(function () {
-    if (!professionalSelected) return;
+    if (!(professionalSelected !== null && professionalSelected !== void 0 && professionalSelected.schedule)) return;
     setCurrentProfessional(professionalSelected);
   }, [professionalSelected]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.ImageWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.SwiperWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.ArrowButtonWrapper, {
+  (0, _react.useEffect)(function () {
+    var _professionalListStat;
+    if (isCartProduct && (professionalListState === null || professionalListState === void 0 ? void 0 : (_professionalListStat = professionalListState.professionals) === null || _professionalListStat === void 0 ? void 0 : _professionalListStat.length) > 0) {
+      var _professionalListStat2;
+      var professional = professionalListState === null || professionalListState === void 0 ? void 0 : (_professionalListStat2 = professionalListState.professionals) === null || _professionalListStat2 === void 0 ? void 0 : _professionalListStat2.find(function (item) {
+        return item.id === (professionalSelected === null || professionalSelected === void 0 ? void 0 : professionalSelected.id);
+      });
+      setCurrentProfessional(professional);
+    }
+  }, [isCartProduct, professionalListState === null || professionalListState === void 0 ? void 0 : professionalListState.professionals]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, loading && !error && /*#__PURE__*/_react.default.createElement(_styles.SkeletonBlock, {
+    width: 90
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    variant: "rect",
+    height: 50
+  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    variant: "rect",
+    height: 50
+  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    variant: "rect",
+    height: 200
+  })), product && !loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ImageWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.SwiperWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.ArrowButtonWrapper, {
     className: "button-prev"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronLeft, null)), /*#__PURE__*/_react.default.createElement(_react2.Swiper, {
     spaceBetween: 0,
@@ -221,7 +247,7 @@ var ServiceFormUI = function ServiceFormUI(props) {
     className: "status"
   }, t('BUSY_ON_SELECTED_TIME', 'Busy on selected time'))) : /*#__PURE__*/_react.default.createElement("span", {
     className: "status"
-  }, t('AVAILABLE', 'Available'))))) : /*#__PURE__*/_react.default.createElement("p", null, t('SELECT_PROFESSIONAL', 'Select professional')), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronDown, null)), isDropDown && /*#__PURE__*/_react.default.createElement(_styles.DropDownWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.DropDownTitle, null, t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')), professionalList === null || professionalList === void 0 ? void 0 : professionalList.map(function (professional) {
+  }, t('AVAILABLE', 'Available'))))) : /*#__PURE__*/_react.default.createElement("p", null, t('SELECT_PROFESSIONAL', 'Select professional')), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronDown, null)), isDropDown && /*#__PURE__*/_react.default.createElement(_styles.DropDownWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.DropDownTitle, null, t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')), professionalListState === null || professionalListState === void 0 ? void 0 : (_professionalListStat3 = professionalListState.professionals) === null || _professionalListStat3 === void 0 ? void 0 : _professionalListStat3.map(function (professional) {
     return /*#__PURE__*/_react.default.createElement(_styles.SelectedItem, {
       key: professional === null || professional === void 0 ? void 0 : professional.id,
       isDropDown: true,
@@ -260,7 +286,7 @@ var ServiceFormUI = function ServiceFormUI(props) {
     onClick: function onClick() {
       return setModalIsOpen(true);
     }
-  }, isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag = theme.defaultLanguages) === null || _theme$defaultLanguag === void 0 ? void 0 : _theme$defaultLanguag.SOLD_OUT) || 'Sold out') : t('LOGIN_SIGNUP', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag2 = theme.defaultLanguages) === null || _theme$defaultLanguag2 === void 0 ? void 0 : _theme$defaultLanguag2.LOGIN_SIGNUP) || 'Login / Sign Up'))), modalIsOpen && !auth && /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+  }, isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag = theme.defaultLanguages) === null || _theme$defaultLanguag === void 0 ? void 0 : _theme$defaultLanguag.SOLD_OUT) || 'Sold out') : t('LOGIN_SIGNUP', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag2 = theme.defaultLanguages) === null || _theme$defaultLanguag2 === void 0 ? void 0 : _theme$defaultLanguag2.LOGIN_SIGNUP) || 'Login / Sign Up')))), modalIsOpen && !auth && /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: modalIsOpen,
     onClose: function onClose() {
       return closeModal();

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

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SwiperWrapper = exports.StatusInfo = exports.SelectedItem = exports.SectionHeader = exports.ScheduleWrapper = exports.ProfessionalSelectWrapper = exports.ProfessionalPhoto = exports.ProfessionalInfoWrapper = exports.PriceAndDuration = exports.NameWrapper = exports.InfoWrapper = exports.ImageWrapper = exports.HeaderInfoWrapper = exports.EmptyProfessional = exports.DropDownWrapper = exports.DropDownTitle = exports.Divider = exports.Container = exports.ButtonWrapper = exports.ArrowButtonWrapper = void 0;
+exports.SwiperWrapper = exports.StatusInfo = exports.SkeletonBlock = exports.SelectedItem = exports.SectionHeader = exports.ScheduleWrapper = exports.ProfessionalSelectWrapper = exports.ProfessionalPhoto = exports.ProfessionalInfoWrapper = exports.PriceAndDuration = exports.NameWrapper = exports.InfoWrapper = exports.ImageWrapper = exports.HeaderInfoWrapper = exports.EmptyProfessional = exports.DropDownWrapper = exports.DropDownTitle = exports.Divider = exports.Container = 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;
+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;
 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; }
@@ -100,4 +100,9 @@ var StatusInfo = _styledComponents.default.div(_templateObject22 || (_templateOb
 });
 exports.StatusInfo = StatusInfo;
 var EmptyProfessional = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  min-height: 100px;\n  margin-bottom: 100px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-exports.EmptyProfessional = EmptyProfessional;
+exports.EmptyProfessional = EmptyProfessional;
+var SkeletonBlock = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  width: ", ";\n  border-radius: 16px;\n  margin: 50px auto 20px auto;\n\n  span {\n    margin-bottom: 10px;\n  }\n"])), function (_ref4) {
+  var width = _ref4.width;
+  return width && "".concat(width, "%");
+});
+exports.SkeletonBlock = SkeletonBlock;

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

@@ -28,9 +28,9 @@ var SignUpApproval = function SignUpApproval(props) {
     dashboardLoginUrl = _props$content.dashboardLoginUrl,
     approvalType = _props$content.approvalType,
     businessType = _props$content.businessType,
+    contactEmail = _props$content.contactEmail,
     onAccept = props.onAccept,
     onCancel = props.onCancel;
-  var contactEmail = 'support@ordering.co';
   var showDomain = false;
   var logoImgUrl = businessType === 2 ? approvalType === 'automatic' ? (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$general = _theme$images.general) === null || _theme$images$general === void 0 ? void 0 : _theme$images$general.CongratulationApproval : (_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$genera = _theme$images2.general) === null || _theme$images2$genera === void 0 ? void 0 : _theme$images2$genera.CongratulationNoApproval : approvalType === 'automatic' ? (_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$genera = _theme$images3.general) === null || _theme$images3$genera === void 0 ? void 0 : _theme$images3$genera.driverCongratulationApproval : (_theme$images4 = theme.images) === null || _theme$images4 === void 0 ? void 0 : (_theme$images4$genera = _theme$images4.general) === null || _theme$images4$genera === void 0 ? void 0 : _theme$images4$genera.driverCongratulationNoApproval;
   var userType = businessType === 2 ? 'business' : 'driver';
@@ -55,20 +55,20 @@ var SignUpApproval = function SignUpApproval(props) {
     className: "td-text-left"
   }, /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
-    href: dashboardLoginUrl,
+    href: t('SIGNUP_DASHBOARD_LOGIN_URL', dashboardLoginUrl),
     target: "_blank",
     rel: "noopener noreferrer"
-  }, dashboardUrl)))))) : /*#__PURE__*/_react.default.createElement(_styles.BodySection, null, userType === 'business' ? /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
+  }, t('SIGNUP_DASHBOARD_URL', dashboardUrl))))))) : /*#__PURE__*/_react.default.createElement(_styles.BodySection, null, userType === 'business' ? /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "bigger"
   }, t('YOUR_STORE_UNDER_APPROVAL', 'Your store is under approval'))), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('FEEL_FREE_CONTACT_US', 'feel free to contact us at '), " ", /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
     href: "mailto:".concat(t('SIGNUP_DRIVER_EMAIL', contactEmail))
-  }, contactEmail))) : /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
+  }, t('SIGNUP_DRIVER_EMAIL', contactEmail)))) : /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "bigger"
   }, t('REQUEST_TO_START_UNDER_APPROVAL', 'Your request to start as a driver is under approval.'))), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('FEEL_FREE_CONTACT_US', 'feel free to contact us at '), " ", /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
     href: "mailto:".concat(t('SIGNUP_DRIVER_EMAIL', contactEmail))
-  }, contactEmail)))), /*#__PURE__*/_react.default.createElement(_styles.FooterSection, null, /*#__PURE__*/_react.default.createElement(_styles.ActionGroup, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, t('SIGNUP_DRIVER_EMAIL', contactEmail))))), /*#__PURE__*/_react.default.createElement(_styles.FooterSection, null, /*#__PURE__*/_react.default.createElement(_styles.ActionGroup, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     outline: true,
     color: "primary",
     type: "button",
@@ -84,6 +84,6 @@ var SignUpApproval = function SignUpApproval(props) {
   }, t('ACCEPT', 'Accept'))), approvalType === 'automatic' && userType === 'business' && /*#__PURE__*/_react.default.createElement(_styles.ContactSection, null, t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at '), " ", /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
     href: "mailto:".concat(t('SIGNUP_DRIVER_EMAIL', contactEmail))
-  }, contactEmail))));
+  }, t('SIGNUP_DRIVER_EMAIL', contactEmail)))));
 };
 exports.SignUpApproval = SignUpApproval;

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

@@ -36,7 +36,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var SingleProductCardUI = function SingleProductCardUI(props) {
-  var _theme$business_view$, _theme$business_view, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _product$ribbon, _product$ribbon2, _product$ribbon3, _product$ribbon4, _product$ribbon5, _product$ribbon6, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
+  var _theme$business_view$, _theme$business_view, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _theme$images, _theme$images$dummies, _theme$images2, _theme$images2$dummie, _product$ribbon, _product$ribbon2, _product$ribbon3, _product$ribbon4, _product$ribbon5, _theme$images3, _theme$images3$dummie, _product$ribbon6, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
   var product = props.product,
     isSoldOut = props.isSoldOut,
     isSkeleton = props.isSkeleton,
@@ -173,7 +173,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
     // productsRows={productsRows}
   }, isObservedValidation ? /*#__PURE__*/_react.default.createElement("div", null, !useCustomFunctionality && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isSkeleton && productAddedToCartLength > 0 && /*#__PURE__*/_react.default.createElement(_styles.QuantityContainer, null, /*#__PURE__*/_react.default.createElement("span", null, productAddedToCartLength)), /*#__PURE__*/_react.default.createElement(_styles.CardInfo, {
     soldOut: isSoldOut || maxProductQuantity <= 0,
-    isBgimage: optimizeImage(product === null || product === void 0 ? void 0 : product.images, 'h_86,c_limit'),
+    isBgimage: optimizeImage((product === null || product === void 0 ? void 0 : product.images) || (theme === null || theme === void 0 ? void 0 : (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$dummies = _theme$images.dummies) === null || _theme$images$dummies === void 0 ? void 0 : _theme$images$dummies.product), 'h_86,c_limit'),
     oneLine: isPreviously
   }, /*#__PURE__*/_react.default.createElement(_styles.TitleWrapper, null, !isSkeleton ? /*#__PURE__*/_react.default.createElement("h1", null, product === null || product === void 0 ? void 0 : product.name) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 100
@@ -196,7 +196,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
   })) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 80
   }))), !isSkeleton ? /*#__PURE__*/_react.default.createElement(_styles.WrapLogo, {
-    isBgimage: optimizeImage(product === null || product === void 0 ? void 0 : product.images, 'h_86,c_limit')
+    isBgimage: optimizeImage((product === null || product === void 0 ? void 0 : product.images) || (theme === null || theme === void 0 ? void 0 : (_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$dummie = _theme$images2.dummies) === null || _theme$images2$dummie === void 0 ? void 0 : _theme$images2$dummie.product), 'h_86,c_limit')
   }, (product === null || product === void 0 ? void 0 : (_product$ribbon = product.ribbon) === null || _product$ribbon === void 0 ? void 0 : _product$ribbon.enabled) && /*#__PURE__*/_react.default.createElement(_styles.RibbonBox, {
     bgColor: product === null || product === void 0 ? void 0 : (_product$ribbon2 = product.ribbon) === null || _product$ribbon2 === void 0 ? void 0 : _product$ribbon2.color,
     isRoundRect: (product === null || product === void 0 ? void 0 : (_product$ribbon3 = product.ribbon) === null || _product$ribbon3 === void 0 ? void 0 : _product$ribbon3.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.rectangleRound),
@@ -204,7 +204,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
   }, product === null || product === void 0 ? void 0 : (_product$ribbon5 = product.ribbon) === null || _product$ribbon5 === void 0 ? void 0 : _product$ribbon5.text), /*#__PURE__*/_react.default.createElement(_styles.CardLogo, {
     className: "image",
     soldOut: isSoldOut || maxProductQuantity <= 0,
-    bgimage: optimizeImage(product === null || product === void 0 ? void 0 : product.images, 'h_86,c_limit')
+    bgimage: optimizeImage((product === null || product === void 0 ? void 0 : product.images) || (theme === null || theme === void 0 ? void 0 : (_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$dummie = _theme$images3.dummies) === null || _theme$images3$dummie === void 0 ? void 0 : _theme$images3$dummie.product), 'h_86,c_limit')
   })) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     height: 75,
     width: 75

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

@@ -12,6 +12,7 @@ var _reactHookForm = require("react-hook-form");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
 var _styledComponents = require("styled-components");
 var _styles = require("./styles");
+var _Switch = require("../../../../../styles/Switch");
 var _Inputs = require("../../styles/Inputs");
 var _Buttons = require("../../styles/Buttons");
 var _InputPhoneNumber = require("../../../../../components/InputPhoneNumber");
@@ -27,6 +28,9 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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); }
@@ -34,7 +38,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var UserFormDetailsUI = function UserFormDetailsUI(props) {
-  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _validationFields$fie, _validationFields$fie2, _validationFields$fie3, _validationFields$fie4, _configs$verification3, _props$beforeElements, _props$beforeComponen, _props$beforeMidEleme, _props$beforeMidCompo, _validationFields$fie11, _formState$result7, _formState$result8, _formState$result8$re, _formState$result8$re2, _formState$result8$re3, _formState$changes$se2, _formState$changes9, _formState$changes9$s, _formState$changes9$s2, _user$settings2, _user$settings2$notif, _props$afterMidElemen, _props$afterMidCompon, _props$afterComponent, _props$afterElements;
+  var _formState$result, _formState$result2, _formState$result2$re, _formState$result2$re2, _formState$result2$re3, _formState$changes$se, _formState$changes, _formState$changes$se2, _formState$changes$se3, _user$settings, _user$settings$email, _formState$result3, _formState$result4, _formState$result4$re, _formState$result4$re2, _formState$result4$re3, _formState$changes$se4, _formState$changes2, _formState$changes2$s, _formState$changes2$s2, _user$settings2, _user$settings2$sms, _formState$result5, _formState$result6, _formState$result6$re, _formState$result6$re2, _formState$result6$re3, _formState$changes$se5, _formState$changes3, _formState$changes3$s, _formState$changes3$s2, _user$settings3, _user$settings3$notif, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17, _validationFields$fie, _validationFields$fie2, _validationFields$fie3, _validationFields$fie4, _configs$verification3, _props$beforeElements, _props$beforeComponen, _props$beforeMidEleme, _props$beforeMidCompo, _validationFields$fie11, _props$afterMidElemen, _props$afterMidCompon, _props$afterComponent, _props$afterElements;
   var isEdit = props.isEdit,
     formState = props.formState,
     onCancel = props.onCancel,
@@ -51,7 +55,8 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     setWillVerifyOtpState = props.setWillVerifyOtpState,
     handleChangePromotions = props.handleChangePromotions,
     isOldLayout = props.isOldLayout,
-    requiredFields = props.requiredFields;
+    requiredFields = props.requiredFields,
+    handleChangeNotifications = props.handleChangeNotifications;
   var formMethods = (0, _reactHookForm.useForm)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -90,10 +95,19 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     setIsChanged = _useState8[1];
   var emailInput = (0, _react.useRef)(null);
   var user = userData || userSession;
+  var _useState9 = (0, _react.useState)({
+      email: formState !== null && formState !== void 0 && (_formState$result = formState.result) !== null && _formState$result !== void 0 && _formState$result.result ? !!(formState !== null && formState !== void 0 && (_formState$result2 = formState.result) !== null && _formState$result2 !== void 0 && (_formState$result2$re = _formState$result2.result) !== null && _formState$result2$re !== void 0 && (_formState$result2$re2 = _formState$result2$re.settings) !== null && _formState$result2$re2 !== void 0 && (_formState$result2$re3 = _formState$result2$re2.email) !== null && _formState$result2$re3 !== void 0 && _formState$result2$re3.newsletter) : !!((_formState$changes$se = formState === null || formState === void 0 ? void 0 : (_formState$changes = formState.changes) === null || _formState$changes === void 0 ? void 0 : (_formState$changes$se2 = _formState$changes.settings) === null || _formState$changes$se2 === void 0 ? void 0 : (_formState$changes$se3 = _formState$changes$se2.email) === null || _formState$changes$se3 === void 0 ? void 0 : _formState$changes$se3.newsletter) !== null && _formState$changes$se !== void 0 ? _formState$changes$se : user && (user === null || user === void 0 ? void 0 : (_user$settings = user.settings) === null || _user$settings === void 0 ? void 0 : (_user$settings$email = _user$settings.email) === null || _user$settings$email === void 0 ? void 0 : _user$settings$email.newsletter)),
+      sms: formState !== null && formState !== void 0 && (_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.result ? !!(formState !== null && formState !== void 0 && (_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && (_formState$result4$re = _formState$result4.result) !== null && _formState$result4$re !== void 0 && (_formState$result4$re2 = _formState$result4$re.settings) !== null && _formState$result4$re2 !== void 0 && (_formState$result4$re3 = _formState$result4$re2.sms) !== null && _formState$result4$re3 !== void 0 && _formState$result4$re3.newsletter) : !!((_formState$changes$se4 = formState === null || formState === void 0 ? void 0 : (_formState$changes2 = formState.changes) === null || _formState$changes2 === void 0 ? void 0 : (_formState$changes2$s = _formState$changes2.settings) === null || _formState$changes2$s === void 0 ? void 0 : (_formState$changes2$s2 = _formState$changes2$s.sms) === null || _formState$changes2$s2 === void 0 ? void 0 : _formState$changes2$s2.newsletter) !== null && _formState$changes$se4 !== void 0 ? _formState$changes$se4 : user && (user === null || user === void 0 ? void 0 : (_user$settings2 = user.settings) === null || _user$settings2 === void 0 ? void 0 : (_user$settings2$sms = _user$settings2.sms) === null || _user$settings2$sms === void 0 ? void 0 : _user$settings2$sms.newsletter)),
+      notification: formState !== null && formState !== void 0 && (_formState$result5 = formState.result) !== null && _formState$result5 !== void 0 && _formState$result5.result ? !!(formState !== null && formState !== void 0 && (_formState$result6 = formState.result) !== null && _formState$result6 !== void 0 && (_formState$result6$re = _formState$result6.result) !== null && _formState$result6$re !== void 0 && (_formState$result6$re2 = _formState$result6$re.settings) !== null && _formState$result6$re2 !== void 0 && (_formState$result6$re3 = _formState$result6$re2.notification) !== null && _formState$result6$re3 !== void 0 && _formState$result6$re3.newsletter) : !!((_formState$changes$se5 = formState === null || formState === void 0 ? void 0 : (_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : (_formState$changes3$s = _formState$changes3.settings) === null || _formState$changes3$s === void 0 ? void 0 : (_formState$changes3$s2 = _formState$changes3$s.notification) === null || _formState$changes3$s2 === void 0 ? void 0 : _formState$changes3$s2.newsletter) !== null && _formState$changes$se5 !== void 0 ? _formState$changes$se5 : user && (user === null || user === void 0 ? void 0 : (_user$settings3 = user.settings) === null || _user$settings3 === void 0 ? void 0 : (_user$settings3$notif = _user$settings3.notification) === null || _user$settings3$notif === void 0 ? void 0 : _user$settings3$notif.newsletter))
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    notificationList = _useState10[0],
+    setNotificationList = _useState10[1];
   var showCustomerCellphone = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme = orderingTheme.theme) !== null && _orderingTheme$theme !== void 0 && (_orderingTheme$theme$ = _orderingTheme$theme.profile) !== null && _orderingTheme$theme$ !== void 0 && (_orderingTheme$theme$2 = _orderingTheme$theme$.components) !== null && _orderingTheme$theme$2 !== void 0 && (_orderingTheme$theme$3 = _orderingTheme$theme$2.cellphone) !== null && _orderingTheme$theme$3 !== void 0 && _orderingTheme$theme$3.hidden);
   var showCustomerPassword = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme2 = orderingTheme.theme) !== null && _orderingTheme$theme2 !== void 0 && (_orderingTheme$theme3 = _orderingTheme$theme2.profile) !== null && _orderingTheme$theme3 !== void 0 && (_orderingTheme$theme4 = _orderingTheme$theme3.components) !== null && _orderingTheme$theme4 !== void 0 && (_orderingTheme$theme5 = _orderingTheme$theme4.password) !== null && _orderingTheme$theme5 !== void 0 && _orderingTheme$theme5.hidden);
   var showCustomerPromotions = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme6 = orderingTheme.theme) !== null && _orderingTheme$theme6 !== void 0 && (_orderingTheme$theme7 = _orderingTheme$theme6.profile) !== null && _orderingTheme$theme7 !== void 0 && (_orderingTheme$theme8 = _orderingTheme$theme7.components) !== null && _orderingTheme$theme8 !== void 0 && (_orderingTheme$theme9 = _orderingTheme$theme8.promotions) !== null && _orderingTheme$theme9 !== void 0 && _orderingTheme$theme9.hidden);
   var showLangauges = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme10 = orderingTheme.theme) !== null && _orderingTheme$theme10 !== void 0 && (_orderingTheme$theme11 = _orderingTheme$theme10.profile) !== null && _orderingTheme$theme11 !== void 0 && (_orderingTheme$theme12 = _orderingTheme$theme11.components) !== null && _orderingTheme$theme12 !== void 0 && (_orderingTheme$theme13 = _orderingTheme$theme12.languages) !== null && _orderingTheme$theme13 !== void 0 && _orderingTheme$theme13.hidden);
+  var showNotifications = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme14 = orderingTheme.theme) !== null && _orderingTheme$theme14 !== void 0 && (_orderingTheme$theme15 = _orderingTheme$theme14.profile) !== null && _orderingTheme$theme15 !== void 0 && (_orderingTheme$theme16 = _orderingTheme$theme15.components) !== null && _orderingTheme$theme16 !== void 0 && (_orderingTheme$theme17 = _orderingTheme$theme16.notification_settings) !== null && _orderingTheme$theme17 !== void 0 && _orderingTheme$theme17.hidden);
   var closeAlert = function closeAlert() {
     setAlertState({
       open: false,
@@ -113,11 +127,11 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
       return;
     }
     if (user !== null && user !== void 0 && user.cellphone) {
-      var _formState$changes, _formState$changes2;
+      var _formState$changes4, _formState$changes5;
       var phone = null;
-      if (formState.result.error && (_formState$changes = formState.changes) !== null && _formState$changes !== void 0 && _formState$changes.cellphone && (_formState$changes2 = formState.changes) !== null && _formState$changes2 !== void 0 && _formState$changes2.country_phone_code) {
-        var _formState$changes3, _formState$changes4;
-        phone = "+".concat((_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : _formState$changes3.country_phone_code, " ").concat((_formState$changes4 = formState.changes) === null || _formState$changes4 === void 0 ? void 0 : _formState$changes4.cellphone);
+      if (formState.result.error && (_formState$changes4 = formState.changes) !== null && _formState$changes4 !== void 0 && _formState$changes4.cellphone && (_formState$changes5 = formState.changes) !== null && _formState$changes5 !== void 0 && _formState$changes5.country_phone_code) {
+        var _formState$changes6, _formState$changes7;
+        phone = "+".concat((_formState$changes6 = formState.changes) === null || _formState$changes6 === void 0 ? void 0 : _formState$changes6.country_phone_code, " ").concat((_formState$changes7 = formState.changes) === null || _formState$changes7 === void 0 ? void 0 : _formState$changes7.cellphone);
         setUserPhoneNumber(phone);
         return;
       }
@@ -213,8 +227,8 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     }
   };
   var showFieldWithTheme = function showFieldWithTheme(name) {
-    var _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17;
-    return !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme14 = orderingTheme.theme) !== null && _orderingTheme$theme14 !== void 0 && (_orderingTheme$theme15 = _orderingTheme$theme14.profile) !== null && _orderingTheme$theme15 !== void 0 && (_orderingTheme$theme16 = _orderingTheme$theme15.components) !== null && _orderingTheme$theme16 !== void 0 && (_orderingTheme$theme17 = _orderingTheme$theme16[name]) !== null && _orderingTheme$theme17 !== void 0 && _orderingTheme$theme17.hidden);
+    var _orderingTheme$theme18, _orderingTheme$theme19, _orderingTheme$theme20, _orderingTheme$theme21;
+    return !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme18 = orderingTheme.theme) !== null && _orderingTheme$theme18 !== void 0 && (_orderingTheme$theme19 = _orderingTheme$theme18.profile) !== null && _orderingTheme$theme19 !== void 0 && (_orderingTheme$theme20 = _orderingTheme$theme19.components) !== null && _orderingTheme$theme20 !== void 0 && (_orderingTheme$theme21 = _orderingTheme$theme20[name]) !== null && _orderingTheme$theme21 !== void 0 && _orderingTheme$theme21.hidden);
   };
   (0, _react.useEffect)(function () {
     if (Object.keys(formMethods.errors).length > 0) {
@@ -231,12 +245,12 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     }
   }, [formMethods.errors]);
   (0, _react.useEffect)(function () {
-    var _formState$result;
-    if (!(formState !== null && formState !== void 0 && formState.loading) && formState !== null && formState !== void 0 && (_formState$result = formState.result) !== null && _formState$result !== void 0 && _formState$result.error) {
-      var _formState$result2;
+    var _formState$result7;
+    if (!(formState !== null && formState !== void 0 && formState.loading) && formState !== null && formState !== void 0 && (_formState$result7 = formState.result) !== null && _formState$result7 !== void 0 && _formState$result7.error) {
+      var _formState$result8;
       setAlertState({
         open: true,
-        content: ((_formState$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : _formState$result2.result) || [t('ERROR', 'Error')]
+        content: ((_formState$result8 = formState.result) === null || _formState$result8 === void 0 ? void 0 : _formState$result8.result) || [t('ERROR', 'Error')]
       });
     }
   }, [formState === null || formState === void 0 ? void 0 : formState.loading]);
@@ -256,8 +270,8 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
   }, [user, isEdit]);
   (0, _react.useEffect)(function () {
     if (!validationFields.loading && emailInput.current) {
-      var _formState$result3, _formState$result4, _formState$result4$re, _ref, _formState$changes$em, _formState$changes5;
-      formMethods.setValue('email', formState !== null && formState !== void 0 && (_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.result ? formState === null || formState === void 0 ? void 0 : (_formState$result4 = formState.result) === null || _formState$result4 === void 0 ? void 0 : (_formState$result4$re = _formState$result4.result) === null || _formState$result4$re === void 0 ? void 0 : _formState$result4$re.email : (_ref = (_formState$changes$em = formState === null || formState === void 0 ? void 0 : (_formState$changes5 = formState.changes) === null || _formState$changes5 === void 0 ? void 0 : _formState$changes5.email) !== null && _formState$changes$em !== void 0 ? _formState$changes$em : user && (user === null || user === void 0 ? void 0 : user.email)) !== null && _ref !== void 0 ? _ref : '');
+      var _formState$result9, _formState$result10, _formState$result10$r, _ref, _formState$changes$em, _formState$changes8;
+      formMethods.setValue('email', formState !== null && formState !== void 0 && (_formState$result9 = formState.result) !== null && _formState$result9 !== void 0 && _formState$result9.result ? formState === null || formState === void 0 ? void 0 : (_formState$result10 = formState.result) === null || _formState$result10 === void 0 ? void 0 : (_formState$result10$r = _formState$result10.result) === null || _formState$result10$r === void 0 ? void 0 : _formState$result10$r.email : (_ref = (_formState$changes$em = formState === null || formState === void 0 ? void 0 : (_formState$changes8 = formState.changes) === null || _formState$changes8 === void 0 ? void 0 : _formState$changes8.email) !== null && _formState$changes$em !== void 0 ? _formState$changes$em : user && (user === null || user === void 0 ? void 0 : user.email)) !== null && _ref !== void 0 ? _ref : '');
     }
   }, [validationFields, emailInput.current]);
   (0, _react.useEffect)(function () {
@@ -271,14 +285,20 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     });
   }, [formMethods]);
   (0, _react.useEffect)(function () {
-    var _formState$changes6, _formState$changes7, _configs$verification2;
-    if (isChanged && userPhoneNumber && isValidPhoneNumber && formState !== null && formState !== void 0 && (_formState$changes6 = formState.changes) !== null && _formState$changes6 !== void 0 && _formState$changes6.country_phone_code && formState !== null && formState !== void 0 && (_formState$changes7 = formState.changes) !== null && _formState$changes7 !== void 0 && _formState$changes7.cellphone && (configs === null || configs === void 0 ? void 0 : (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1') {
+    var _formState$changes9, _formState$changes10, _configs$verification2;
+    if (isChanged && userPhoneNumber && isValidPhoneNumber && formState !== null && formState !== void 0 && (_formState$changes9 = formState.changes) !== null && _formState$changes9 !== void 0 && _formState$changes9.country_phone_code && formState !== null && formState !== void 0 && (_formState$changes10 = formState.changes) !== null && _formState$changes10 !== void 0 && _formState$changes10.cellphone && (configs === null || configs === void 0 ? void 0 : (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1') {
       setWillVerifyOtpState(true);
     }
   }, [isValidPhoneNumber, userPhoneNumber, configs === null || configs === void 0 ? void 0 : (_configs$verification3 = configs.verification_phone_required) === null || _configs$verification3 === void 0 ? void 0 : _configs$verification3.value, isChanged]);
   (0, _react.useEffect)(function () {
     if (requiredFields && !requiredFields.includes('cellphone')) setIsValidPhoneNumber(true);
   }, [requiredFields]);
+  var handleEditNotifications = function handleEditNotifications(key, value) {
+    setNotificationList(_objectSpread(_objectSpread({}, notificationList), {}, _defineProperty({}, key, value)));
+  };
+  (0, _react.useEffect)(function () {
+    isEdit && handleChangeNotifications(notificationList);
+  }, [notificationList]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -354,17 +374,22 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
         message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
       }
     })
-  })), !isCheckout && showCustomerPromotions && /*#__PURE__*/_react.default.createElement(_styles.PromotionsWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
-    name: "promotions",
-    id: "promotions",
-    onChange: function onChange() {
-      var _formState$result5, _formState$result6, _formState$result6$re, _formState$result6$re2, _formState$result6$re3, _formState$changes$se, _formState$changes8, _formState$changes8$s, _formState$changes8$s2, _user$settings, _user$settings$notifi;
-      return handleChangePromotions(!(formState !== null && formState !== void 0 && (_formState$result5 = formState.result) !== null && _formState$result5 !== void 0 && _formState$result5.result ? !!(formState !== null && formState !== void 0 && (_formState$result6 = formState.result) !== null && _formState$result6 !== void 0 && (_formState$result6$re = _formState$result6.result) !== null && _formState$result6$re !== void 0 && (_formState$result6$re2 = _formState$result6$re.settings) !== null && _formState$result6$re2 !== void 0 && (_formState$result6$re3 = _formState$result6$re2.notification) !== null && _formState$result6$re3 !== void 0 && _formState$result6$re3.newsletter) : (_formState$changes$se = formState === null || formState === void 0 ? void 0 : (_formState$changes8 = formState.changes) === null || _formState$changes8 === void 0 ? void 0 : (_formState$changes8$s = _formState$changes8.settings) === null || _formState$changes8$s === void 0 ? void 0 : (_formState$changes8$s2 = _formState$changes8$s.notification) === null || _formState$changes8$s2 === void 0 ? void 0 : _formState$changes8$s2.newsletter) !== null && _formState$changes$se !== void 0 ? _formState$changes$se : user && (user === null || user === void 0 ? void 0 : (_user$settings = user.settings) === null || _user$settings === void 0 ? void 0 : (_user$settings$notifi = _user$settings.notification) === null || _user$settings$notifi === void 0 ? void 0 : _user$settings$notifi.newsletter)));
+  })), showNotifications && showCustomerPromotions && !requiredFields && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.NotificationsGroupSwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')), /*#__PURE__*/_react.default.createElement(_styles.SwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('EMAILS', 'Emails')), /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+    onChange: function onChange(value) {
+      return handleEditNotifications('email', value);
+    },
+    defaultChecked: notificationList === null || notificationList === void 0 ? void 0 : notificationList.email
+  })), /*#__PURE__*/_react.default.createElement(_styles.SwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('SMS', 'Sms')), /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+    onChange: function onChange(value) {
+      return handleEditNotifications('sms', value);
+    },
+    defaultChecked: notificationList === null || notificationList === void 0 ? void 0 : notificationList.sms
+  })), /*#__PURE__*/_react.default.createElement(_styles.SwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('PUSH_NOTIFICATIONS', 'Push Notifications')), /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+    onChange: function onChange(value) {
+      return handleEditNotifications('notification', value);
     },
-    defaultChecked: formState !== null && formState !== void 0 && (_formState$result7 = formState.result) !== null && _formState$result7 !== void 0 && _formState$result7.result ? !!(formState !== null && formState !== void 0 && (_formState$result8 = formState.result) !== null && _formState$result8 !== void 0 && (_formState$result8$re = _formState$result8.result) !== null && _formState$result8$re !== void 0 && (_formState$result8$re2 = _formState$result8$re.settings) !== null && _formState$result8$re2 !== void 0 && (_formState$result8$re3 = _formState$result8$re2.notification) !== null && _formState$result8$re3 !== void 0 && _formState$result8$re3.newsletter) : !!((_formState$changes$se2 = formState === null || formState === void 0 ? void 0 : (_formState$changes9 = formState.changes) === null || _formState$changes9 === void 0 ? void 0 : (_formState$changes9$s = _formState$changes9.settings) === null || _formState$changes9$s === void 0 ? void 0 : (_formState$changes9$s2 = _formState$changes9$s.notification) === null || _formState$changes9$s2 === void 0 ? void 0 : _formState$changes9$s2.newsletter) !== null && _formState$changes$se2 !== void 0 ? _formState$changes$se2 : user && (user === null || user === void 0 ? void 0 : (_user$settings2 = user.settings) === null || _user$settings2 === void 0 ? void 0 : (_user$settings2$notif = _user$settings2.notification) === null || _user$settings2$notif === void 0 ? void 0 : _user$settings2$notif.newsletter))
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "promotions"
-  }, /*#__PURE__*/_react.default.createElement("span", null, t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')))), showLangauges && !requiredFields && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement(_styles.LanguageSelectorWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('LANGUAGE', 'Language')), /*#__PURE__*/_react.default.createElement(_LanguageSelector.LanguageSelector, null))), (_props$afterMidElemen = props.afterMidElements) === null || _props$afterMidElemen === void 0 ? void 0 : _props$afterMidElemen.map(function (MidElement, i) {
+    defaultChecked: notificationList === null || notificationList === void 0 ? void 0 : notificationList.notification
+  })))), showLangauges && !requiredFields && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.LanguageSelectorWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('LANGUAGE', 'Language')), /*#__PURE__*/_react.default.createElement(_LanguageSelector.LanguageSelector, null))), (_props$afterMidElemen = props.afterMidElements) === null || _props$afterMidElemen === void 0 ? void 0 : _props$afterMidElemen.map(function (MidElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
     }, MidElement);

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

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SkeletonForm = exports.PromotionsWrapper = exports.LanguageSelectorWrapper = exports.InputPhoneNumberWrapper = exports.InputGroup = exports.FormInput = exports.Divider = exports.ActionsForm = void 0;
+exports.SwitchWrapper = exports.SkeletonForm = exports.PromotionsWrapper = exports.NotificationsGroupSwitchWrapper = exports.LanguageSelectorWrapper = exports.InputPhoneNumberWrapper = exports.InputGroup = exports.FormInput = exports.Divider = exports.ActionsForm = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 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) } })); }
@@ -38,4 +38,10 @@ var PromotionsWrapper = _styledComponents.default.div(_templateObject9 || (_temp
 }, function (props) {
   return props.theme.colors.primary;
 });
-exports.PromotionsWrapper = PromotionsWrapper;
+exports.PromotionsWrapper = PromotionsWrapper;
+var NotificationsGroupSwitchWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  padding: 15px 0;\n  margin-bottom: 20px;\n  border-bottom: 1px solid #E9ECEF;\n  \n  > p {\n    margin: 0;\n    font-weight: 500;\n    font-size: 20px;\n    color: ", ";\n    width: 100%;\n    text-align: left;\n  }\n"])), function (props) {
+  return props.theme.colors.darkTextColor;
+});
+exports.NotificationsGroupSwitchWrapper = NotificationsGroupSwitchWrapper;
+var SwitchWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+exports.SwitchWrapper = SwitchWrapper;

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

@@ -92,7 +92,6 @@ var UserVerificationUI = function UserVerificationUI(props) {
   var _useCountdownTimer = (0, _useCountdownTimer3.useCountdownTimer)(600, isEmailVerifyRequired ? verificationState.email : verificationState.phone),
     _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
     otpLeftTime = _useCountdownTimer2[0],
-    _ = _useCountdownTimer2[1],
     resetOtpLeftTime = _useCountdownTimer2[2];
   var numOtpInputs = isEmailVerifyRequired ? 6 : 4;
   var handleSendOtp = function handleSendOtp(opt) {
@@ -139,7 +138,6 @@ var UserVerificationUI = function UserVerificationUI(props) {
           country_phone_code: +(phoneState === null || phoneState === void 0 ? void 0 : phoneState.country_phone_code),
           code: otpState
         });
-        return;
       }
     }
   }, [otpState]);
@@ -162,15 +160,22 @@ var UserVerificationUI = function UserVerificationUI(props) {
   (0, _react.useEffect)(function () {
     if (!(verifyEmailState !== null && verifyEmailState !== void 0 && verifyEmailState.loadingSendCode) && isEmailVerifyRequired) {
       setVerificationState(_objectSpread(_objectSpread({}, verificationState), {}, {
+        phone: false,
         email: !!(verifyEmailState !== null && verifyEmailState !== void 0 && verifyEmailState.resultSendCode)
       }));
     }
     if (!(verifyPhoneState !== null && verifyPhoneState !== void 0 && verifyPhoneState.loadingSendCode) && isPhoneVerifyRequired && !isEmailVerifyRequired) {
       setVerificationState(_objectSpread(_objectSpread({}, verificationState), {}, {
+        email: false,
         phone: !!(verifyPhoneState !== null && verifyPhoneState !== void 0 && verifyPhoneState.resultSendCode)
       }));
     }
   }, [verifyEmailState, verifyPhoneState]);
+  (0, _react.useEffect)(function () {
+    if (otpState) {
+      setOtpState('');
+    }
+  }, [verificationState]);
   (0, _react.useEffect)(function () {
     setupUserPhoneNumber();
   }, [user]);

package/index-template.js

@@ -8,7 +8,6 @@ import { Integrations } from '@sentry/tracing'
 import { ThemeProvider } from './src/contexts/ThemeContext'
 import { Toast } from './src/styles/Toast'
 import theme from './template/theme.json'
-import settings from './template/config.json'
 import smoothscroll from 'smoothscroll-polyfill'
 
 /**
@@ -80,6 +79,7 @@ import curbside from './template/assets/images/delivery-types/curbside.jpg'
 import driveThru from './template/assets/images/delivery-types/drive_thru.jpg'
 import eatIn from './template/assets/images/delivery-types/eat_in.jpg'
 import pickUp from './template/assets/images/delivery-types/pickup.jpg'
+import { SubdomainComponent } from './template/components/SubdomainComponent'
 
 Sentry.init({
   environment: process.env.NODE_ENV,
@@ -187,9 +187,11 @@ smoothscroll.polyfill()
 const wrapper = document.getElementById('app')
 ReactDOM.render(
   <ThemeProvider theme={theme}>
-    <OrderingProvider Alert={Alert} settings={settings}>
-      <Router />
-      <Toast />
-    </OrderingProvider>
+    <SubdomainComponent>
+      <OrderingProvider Alert={Alert}>
+        <Router />
+        <Toast />
+      </OrderingProvider>
+    </SubdomainComponent>
   </ThemeProvider>
   , wrapper)

package/package.json

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

package/src/components/BusinessTypeFilter/index.js

@@ -19,7 +19,7 @@ const BusinessTypeFilterUI = (props) => {
   const theme = useTheme()
   const [load, setLoad] = useState(false)
 
-  const defaultImage = theme.images?.categories?.all
+  const defaultImage = (name) => theme.images?.categories?.[name.toLowerCase()]
 
   const handleChangeCategory = (category) => {
     handleChangeBusinessType && handleChangeBusinessType(category)
@@ -59,7 +59,7 @@ const BusinessTypeFilterUI = (props) => {
                     load={load}
                   >
                     <img
-                      src={type.image || defaultImage}
+                      src={type.image || defaultImage(type.name)}
                       alt={type.name.toLowerCase()}
                       onLoad={() => setLoad(true)}
                       onClick={() => handleChangeCategory(type.id)}

package/src/components/CancellationComponent/index.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { Hero, BgImg, HeroText, LogoImg, Content, Segment, InputWrapper, BusinessSearch } from './styles'
+
+export const CancellationComponent = props => {
+  const {
+    bgUrl,
+    logoUrl,
+    ButtonComponent,
+    InputComponent
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <>
+      <Hero>
+        {(bgUrl || theme.images?.general?.businessHero) && (
+          <BgImg src={bgUrl || theme.images?.general?.businessHero} alt="bg"/>
+        )}
+        <HeroText>
+        {(logoUrl || theme.images?.logos?.logotype) && (
+          <LogoImg src={logoUrl || theme.images?.logos?.logotype} alt="logo"/>
+        )}
+          <h1 className="title">{t('CANCELLATION_TITLE', 'SITE OUT OF SERVICE')}</h1>
+          <h4 className="sub-title" dangerouslySetInnerHTML={{
+            __html:t('CANCELLATION_SUBTITLE', 'This website has been archived or suspended in accordance with our :Terms of Service').replace(':Terms of Service', `<b><i>${t('CANCELLATION_TERMS', 'Terms of Service')}</i></b>`)
+          }}/>
+        </HeroText>
+      </Hero>
+      <Content>
+        <p dangerouslySetInnerHTML={{
+            __html:t('CANCELLATION_OWNER_TEXT', 'If you are the :owner of this website contact us to reactivate your website.').replace(':owner', `<b>${t('CANCELLATION_OWNER', 'owner')}</b>`)
+          }}/>
+          {ButtonComponent &&(
+            <ButtonComponent color='primary'>{t('CANCELLATION_CONTACT_US', 'Contact us')}</ButtonComponent>
+          )}
+      </Content>
+      <Segment>
+          <p dangerouslySetInnerHTML={{
+            __html:t('CANCELLATION_OWNER_TEXT', 'If you are a :customer let the owner know you midd this website, just write your email below.').replace(':customer', `<b>${t('CANCELLATION_CUSTOMER', 'customer')}</b>`)
+          }}/>
+          <InputWrapper>
+          <BusinessSearch>
+          {InputComponent &&(
+              <InputComponent
+              name='Email'
+              placeholder={t('CANCELLATION_INPUT_PLACEHOLDER', 'Email')}
+            />
+          )}
+          </BusinessSearch>
+          {ButtonComponent &&(
+              <ButtonComponent color='primary'>
+                {t('CANCELLATION_SEND_BUTTON', 'Send')}
+              </ButtonComponent>
+          )}
+            </InputWrapper>
+      </Segment>
+    </>
+  )
+}