ordering-ui-admin-external 1.40.5 → 1.40.7

package/_modules/components/Orders/OrderBill/index.js

@@ -63,6 +63,7 @@ var OrderBill = exports.OrderBill = function OrderBill(props) {
     4: t('SPOT_NUMBER_CURBSIDE', 'Spot number'),
     5: t('SPOT_NUMBER_DRIVE_THRU', 'Drive thru lane')
   };
+  var isPickupOrder = (order === null || order === void 0 ? void 0 : order.delivery_type) === 2;
   var walletName = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet')
@@ -169,7 +170,7 @@ var OrderBill = exports.OrderBill = function OrderBill(props) {
     }, /*#__PURE__*/_react.default.createElement("td", null, t(offer === null || offer === void 0 || (_offer$name2 = offer.name) === null || _offer$name2 === void 0 || (_offer$name2 = _offer$name2.toUpperCase()) === null || _offer$name2 === void 0 ? void 0 : _offer$name2.replaceAll(' ', '_'), offer.name), offer.rate_type === 1 && /*#__PURE__*/_react.default.createElement("span", null, "(".concat((0, _utils.verifyDecimals)(offer === null || offer === void 0 ? void 0 : offer.rate, parsePrice), "%)"))), /*#__PURE__*/_react.default.createElement("td", null, "- ", parsePrice(offer === null || offer === void 0 || (_offer$summary2 = offer.summary) === null || _offer$summary2 === void 0 ? void 0 : _offer$summary2.discount, {
       currency: (0, _utils.getCurrenySymbol)(order === null || order === void 0 ? void 0 : order.currency)
     })));
-  })), typeof (order === null || order === void 0 || (_order$summary12 = order.summary) === null || _order$summary12 === void 0 ? void 0 : _order$summary12.delivery_price) === 'number' && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('DELIVERY_FEE', 'Delivery Fee')), /*#__PURE__*/_react.default.createElement("td", null, parsePrice((order === null || order === void 0 || (_order$summary13 = order.summary) === null || _order$summary13 === void 0 ? void 0 : _order$summary13.delivery_price) + getIncludedTaxes(true), {
+  })), typeof (order === null || order === void 0 || (_order$summary12 = order.summary) === null || _order$summary12 === void 0 ? void 0 : _order$summary12.delivery_price) === 'number' && !isPickupOrder && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('DELIVERY_FEE', 'Delivery Fee')), /*#__PURE__*/_react.default.createElement("td", null, parsePrice((order === null || order === void 0 || (_order$summary13 = order.summary) === null || _order$summary13 === void 0 ? void 0 : _order$summary13.delivery_price) + getIncludedTaxes(true), {
     currency: (0, _utils.getCurrenySymbol)(order === null || order === void 0 ? void 0 : order.currency)
   }))), (order === null || order === void 0 || (_order$taxes6 = order.taxes) === null || _order$taxes6 === void 0 ? void 0 : _order$taxes6.length) > 0 && (order === null || order === void 0 || (_order$taxes7 = order.taxes) === null || _order$taxes7 === void 0 ? void 0 : _order$taxes7.filter(function (tax) {
     return (tax === null || tax === void 0 ? void 0 : tax.type) === 2 && (tax === null || tax === void 0 ? void 0 : tax.rate) !== 0 && (tax === null || tax === void 0 ? void 0 : tax.target) === 'delivery_fee';

package/_modules/components/Orders/ProductItemAccordion/index.js

@@ -133,8 +133,9 @@ var ProductItemAccordion = exports.ProductItemAccordion = function ProductItemAc
               _step2;
             try {
               for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                var _suboption$half_price;
                 var suboption = _step2.value;
-                subOptionPrice += suboption.quantity * suboption.price;
+                subOptionPrice += suboption.quantity * (['left', 'right'].includes(suboption.position) ? (_suboption$half_price = suboption.half_price) !== null && _suboption$half_price !== void 0 ? _suboption$half_price : suboption.price : suboption.price);
               }
             } catch (err) {
               _iterator2.e(err);
@@ -254,13 +255,14 @@ var ProductItemAccordion = exports.ProductItemAccordion = function ProductItemAc
     }, /*#__PURE__*/_react.default.createElement("p", null, option.name), /*#__PURE__*/_react.default.createElement(_styles.ProductOptionsList, {
       className: "suboption"
     }, option.suboptions.map(function (suboption) {
+      var _suboption$half_price2;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
         key: suboption.id
       }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, getFormattedSubOptionName({
         quantity: suboption.quantity,
         name: suboption.name,
-        position: suboption.position !== 'whole' ? t(suboption.position.toUpperCase(), suboption.position) : '',
-        price: suboption.price
+        position: (suboption === null || suboption === void 0 ? void 0 : suboption.position) !== 'whole' ? t(suboption.position.toUpperCase(), suboption.position) : '',
+        price: ['left', 'right'].includes(suboption.position) ? (_suboption$half_price2 = suboption.half_price) !== null && _suboption$half_price2 !== void 0 ? _suboption$half_price2 : suboption.price : suboption.price
       }))));
     })));
   })), product.comment && /*#__PURE__*/_react.default.createElement(_styles.ProductComment, null, /*#__PURE__*/_react.default.createElement("p", null, t('COMMENT', 'Comment')), /*#__PURE__*/_react.default.createElement("h3", null, product.comment))));

package/_modules/components/Settings/AddressFieldsSetting/index.js

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddressFieldsSetting = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _reactRouterDom = require("react-router-dom");
 var _styles = require("../../../styles");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _Shared = require("../../Shared");
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _BsChevronRight = _interopRequireDefault(require("@meronex/icons/bs/BsChevronRight"));
+var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styles2 = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -27,12 +34,86 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var AddressFieldsSettingUI = function AddressFieldsSettingUI(props) {
-  var addressFieldsState = props.addressFieldsState,
-    handleChangeFieldSetting = props.handleChangeFieldSetting;
+  var validationFieldState = props.validationFieldState,
+    handleChangeFieldSetting = props.handleChangeFieldSetting,
+    sitesState = props.sitesState,
+    setMoveDistance = props.setMoveDistance,
+    selectedSiteId = props.selectedSiteId,
+    setSelectedSiteId = props.setSelectedSiteId,
+    actionState = props.actionState;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.AddressFieldsDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('ADDRESS_FIELDS', 'Address fields')), /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var history = (0, _reactRouterDom.useHistory)();
+  var _useState = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpand = _useState4[0],
+    setIsExpand = _useState4[1];
+  var orderValidationFields = ['address', 'address_note', 'internal_number', 'zipcode'];
+  var handleOpenSiteSettingDetails = function handleOpenSiteSettingDetails(siteId, isInitialRender) {
+    // handleGetSiteConfigs(siteId)
+    setSelectedSiteId(siteId);
+    setMoveDistance(500);
+    if (!isInitialRender) {
+      var category = query.get('category');
+      history.replace("".concat(location.pathname, "?category=").concat(category, "&site=").concat(siteId));
+    }
+  };
+  var expandSideBar = function expandSideBar() {
+    var element = document.getElementById('sideSlider');
+    if (isExpand) element.style.width = '500px';else element.style.width = '100vw';
+    setIsExpand(function (prev) {
+      return !prev;
+    });
+  };
+  var handleCloseDetails = function handleCloseDetails() {
+    setSelectedSiteId(null);
+    setMoveDistance(0);
+    var category = query.get('category');
+    history.replace("".concat(location.pathname, "?category=").concat(category));
+  };
+  (0, _react.useEffect)(function () {
+    if (!(actionState !== null && actionState !== void 0 && actionState.error)) return;
+    setAlertState({
+      open: true,
+      content: actionState === null || actionState === void 0 ? void 0 : actionState.error
+    });
+  }, [actionState === null || actionState === void 0 ? void 0 : actionState.error]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.SitesListContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('ADDRESS_FIELDS', 'Address fields')), width > 576 && !selectedSiteId && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "black",
+    onClick: expandSideBar
+  }, isExpand ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowsAngleContract, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowsAngleExpand, null))), sitesState.loading ? /*#__PURE__*/_react.default.createElement(_styles2.SitesWrapper, null, _toConsumableArray(Array(5).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement(_styles2.SiteItem, {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 100,
+      height: 14
+    }));
+  })) : /*#__PURE__*/_react.default.createElement(_styles2.SitesWrapper, null, sitesState.sites.map(function (site) {
+    return /*#__PURE__*/_react.default.createElement(_styles2.SiteItem, {
+      key: site.id,
+      active: site.id === selectedSiteId,
+      onClick: function onClick() {
+        return handleOpenSiteSettingDetails(site.id);
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", null, site.name), /*#__PURE__*/_react.default.createElement(_BsChevronRight.default, null));
+  }))), selectedSiteId && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    isBorderShow: true,
+    open: selectedSiteId,
+    onClose: function onClose() {
+      return handleCloseDetails();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles2.AddressFieldsDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('SETTINGS', 'Settings')), /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
     isHeader: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "name"
@@ -40,7 +121,7 @@ var AddressFieldsSettingUI = function AddressFieldsSettingUI(props) {
     className: "required"
   }, t('REQUIRED', 'Required')), /*#__PURE__*/_react.default.createElement("div", {
     className: "status"
-  }, t('STATE', 'Status'))), addressFieldsState !== null && addressFieldsState !== void 0 && addressFieldsState.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
+  }, t('STATE', 'Status'))), actionState !== null && actionState !== void 0 && actionState.loading && actionState !== null && actionState !== void 0 && actionState.isPost ? _toConsumableArray(Array(10).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
       key: i
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -62,18 +143,25 @@ var AddressFieldsSettingUI = function AddressFieldsSettingUI(props) {
         borderRadius: 20
       }
     })));
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, addressFieldsState.fields.map(function (field) {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationFieldState.fields.filter(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.site_id) === parseInt(selectedSiteId);
+  }).sort(function (a, b) {
+    var indexA = orderValidationFields.indexOf(a === null || a === void 0 ? void 0 : a.validation_field.code);
+    var indexB = orderValidationFields.indexOf(b === null || b === void 0 ? void 0 : b.validation_field.code);
+    return indexA - indexB;
+  }).map(function (field) {
+    var _field$validation_fie, _field$validation_fie2, _field$validation_fie3;
     return /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
       key: field.id
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "name"
-    }, t(field.code.toUpperCase())), /*#__PURE__*/_react.default.createElement("div", {
+    }, t(field === null || field === void 0 || (_field$validation_fie = field.validation_field) === null || _field$validation_fie === void 0 ? void 0 : _field$validation_fie.code.toUpperCase())), /*#__PURE__*/_react.default.createElement("div", {
       className: "required"
     }, /*#__PURE__*/_react.default.createElement(_styles.Switch, {
       defaultChecked: field.required,
-      disabled: field.code === 'email',
+      disabled: (field === null || field === void 0 || (_field$validation_fie2 = field.validation_field) === null || _field$validation_fie2 === void 0 ? void 0 : _field$validation_fie2.code) === 'email',
       onChange: function onChange(val) {
-        return handleChangeFieldSetting(field.id, {
+        return handleChangeFieldSetting(field.validation_field_id, selectedSiteId, {
           required: val
         });
       }
@@ -81,17 +169,36 @@ var AddressFieldsSettingUI = function AddressFieldsSettingUI(props) {
       className: "status"
     }, /*#__PURE__*/_react.default.createElement(_styles.Switch, {
       defaultChecked: field.enabled,
-      disabled: field.code === 'email',
+      disabled: (field === null || field === void 0 || (_field$validation_fie3 = field.validation_field) === null || _field$validation_fie3 === void 0 ? void 0 : _field$validation_fie3.code) === 'email',
       onChange: function onChange(val) {
-        return handleChangeFieldSetting(field.id, {
+        return handleChangeFieldSetting(field.validation_field_id, selectedSiteId, {
           enabled: val
         });
       }
     })));
-  }))));
+  })))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    onAccept: function onAccept() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    closeOnBackdrop: false
+  }));
 };
 var AddressFieldsSetting = exports.AddressFieldsSetting = function AddressFieldsSetting(props) {
   var addressFieldsProps = _objectSpread(_objectSpread({}, props), {}, {
+    code: 'address',
     UIComponent: AddressFieldsSettingUI
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.AddressFieldsSetting, addressFieldsProps);

package/_modules/components/Settings/AddressFieldsSetting/styles.js

@@ -4,16 +4,41 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldContainer = exports.AddressFieldsDetailsContainer = void 0;
+exports.SitesWrapper = exports.SitesListContainer = exports.SiteItem = exports.Header = exports.FieldContainer = exports.AddressFieldsDetailsContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var AddressFieldsDetailsContainer = exports.AddressFieldsDetailsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 26px 40px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin-bottom: 10px;\n  }\n"])));
-var FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  ", "\n\n  .name {\n    flex: 1;\n    font-size: 14px;\n  }\n\n  .required {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .status {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), function (_ref) {
-  var isHeader = _ref.isHeader;
-  return isHeader && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    margin-bottom: 15px;\n    > div {\n      font-weight: 700;\n      font-size: 14px;\n    }\n  "])), function (props) {
+var SitesListContainer = exports.SitesListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n"])));
+var Header = exports.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin: 0;\n  }\n  margin-right: 35px;\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-left: 35px;\n    margin-right: 0;\n  "])));
+});
+var SitesWrapper = exports.SitesWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: 35px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  overflow: hidden;\n  > div:first-child {\n    border-top: none !important;\n  }\n  > div:last-child {\n    border-bottom: none !important;\n  } \n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+var SiteItem = exports.SiteItem = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 12px 15px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  span {\n    font-size: 14px;\n  }\n  svg {\n    font-size: 20px;\n  }\n  ", "\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  return props.theme.colors.borderColor;
+}, function (props) {
+  return props.theme.colors.lightPrimary;
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n    border-top: 1px solid ", ";\n    border-bottom: 1px solid ", " !important;\n    background-color: ", ";\n  "])), function (props) {
+    return props.theme.colors.headingColor;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.lightPrimary;
+  });
+});
+var AddressFieldsDetailsContainer = exports.AddressFieldsDetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 26px 40px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin-bottom: 10px;\n  }\n"])));
+var FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  ", "\n\n  .name {\n    flex: 1;\n    font-size: 14px;\n  }\n\n  .required {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .status {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), function (_ref2) {
+  var isHeader = _ref2.isHeader;
+  return isHeader && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    margin-bottom: 15px;\n    > div {\n      font-weight: 700;\n      font-size: 14px;\n    }\n  "])), function (props) {
     return props.theme.colors.borderColor;
   });
 });

package/_modules/components/Settings/CardFieldsSetting/index.js

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardFieldsSetting = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _reactRouterDom = require("react-router-dom");
 var _styles = require("../../../styles");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _Shared = require("../../Shared");
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _BsChevronRight = _interopRequireDefault(require("@meronex/icons/bs/BsChevronRight"));
+var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styles2 = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -27,12 +34,86 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var CardFieldsSettingUI = function CardFieldsSettingUI(props) {
-  var cardFieldsState = props.cardFieldsState,
-    handleChangeFieldSetting = props.handleChangeFieldSetting;
+  var validationFieldState = props.validationFieldState,
+    handleChangeFieldSetting = props.handleChangeFieldSetting,
+    sitesState = props.sitesState,
+    setMoveDistance = props.setMoveDistance,
+    selectedSiteId = props.selectedSiteId,
+    setSelectedSiteId = props.setSelectedSiteId,
+    actionState = props.actionState;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.CardFieldsDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('CARD_FIELDS', 'Card fields')), /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var history = (0, _reactRouterDom.useHistory)();
+  var _useState = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpand = _useState4[0],
+    setIsExpand = _useState4[1];
+  var orderValidationFields = ['address', 'address_note', 'internal_number', 'zipcode'];
+  var handleOpenSiteSettingDetails = function handleOpenSiteSettingDetails(siteId, isInitialRender) {
+    // handleGetSiteConfigs(siteId)
+    setSelectedSiteId(siteId);
+    setMoveDistance(500);
+    if (!isInitialRender) {
+      var category = query.get('category');
+      history.replace("".concat(location.pathname, "?category=").concat(category, "&site=").concat(siteId));
+    }
+  };
+  var expandSideBar = function expandSideBar() {
+    var element = document.getElementById('sideSlider');
+    if (isExpand) element.style.width = '500px';else element.style.width = '100vw';
+    setIsExpand(function (prev) {
+      return !prev;
+    });
+  };
+  var handleCloseDetails = function handleCloseDetails() {
+    setSelectedSiteId(null);
+    setMoveDistance(0);
+    var category = query.get('category');
+    history.replace("".concat(location.pathname, "?category=").concat(category));
+  };
+  (0, _react.useEffect)(function () {
+    if (!(actionState !== null && actionState !== void 0 && actionState.error)) return;
+    setAlertState({
+      open: true,
+      content: actionState === null || actionState === void 0 ? void 0 : actionState.error
+    });
+  }, [actionState === null || actionState === void 0 ? void 0 : actionState.error]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.SitesListContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('CARD_FIELDS', 'Card fields')), width > 576 && !selectedSiteId && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "black",
+    onClick: expandSideBar
+  }, isExpand ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowsAngleContract, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowsAngleExpand, null))), sitesState.loading ? /*#__PURE__*/_react.default.createElement(_styles2.SitesWrapper, null, _toConsumableArray(Array(5).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement(_styles2.SiteItem, {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 100,
+      height: 14
+    }));
+  })) : /*#__PURE__*/_react.default.createElement(_styles2.SitesWrapper, null, sitesState.sites.map(function (site) {
+    return /*#__PURE__*/_react.default.createElement(_styles2.SiteItem, {
+      key: site.id,
+      active: site.id === selectedSiteId,
+      onClick: function onClick() {
+        return handleOpenSiteSettingDetails(site.id);
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", null, site.name), /*#__PURE__*/_react.default.createElement(_BsChevronRight.default, null));
+  }))), selectedSiteId && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    isBorderShow: true,
+    open: selectedSiteId,
+    onClose: function onClose() {
+      return handleCloseDetails();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles2.CardFieldsDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('SETTINGS', 'Settings')), /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
     isHeader: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "name"
@@ -40,7 +121,7 @@ var CardFieldsSettingUI = function CardFieldsSettingUI(props) {
     className: "required"
   }, t('REQUIRED', 'Required')), /*#__PURE__*/_react.default.createElement("div", {
     className: "status"
-  }, t('STATE', 'Status'))), cardFieldsState !== null && cardFieldsState !== void 0 && cardFieldsState.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
+  }, t('STATE', 'Status'))), actionState !== null && actionState !== void 0 && actionState.loading && actionState !== null && actionState !== void 0 && actionState.isPost ? _toConsumableArray(Array(10).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
       key: i
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -62,17 +143,25 @@ var CardFieldsSettingUI = function CardFieldsSettingUI(props) {
         borderRadius: 20
       }
     })));
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cardFieldsState.fields.map(function (field) {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationFieldState.fields.filter(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.site_id) === parseInt(selectedSiteId);
+  }).sort(function (a, b) {
+    var indexA = orderValidationFields.indexOf(a === null || a === void 0 ? void 0 : a.validation_field.code);
+    var indexB = orderValidationFields.indexOf(b === null || b === void 0 ? void 0 : b.validation_field.code);
+    return indexA - indexB;
+  }).map(function (field) {
+    var _field$validation_fie, _field$validation_fie2, _field$validation_fie3;
     return /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
       key: field.id
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "name"
-    }, t(field.code.toUpperCase())), /*#__PURE__*/_react.default.createElement("div", {
+    }, t(field === null || field === void 0 || (_field$validation_fie = field.validation_field) === null || _field$validation_fie === void 0 ? void 0 : _field$validation_fie.code.toUpperCase())), /*#__PURE__*/_react.default.createElement("div", {
       className: "required"
     }, /*#__PURE__*/_react.default.createElement(_styles.Switch, {
       defaultChecked: field.required,
+      disabled: (field === null || field === void 0 || (_field$validation_fie2 = field.validation_field) === null || _field$validation_fie2 === void 0 ? void 0 : _field$validation_fie2.code) === 'email',
       onChange: function onChange(val) {
-        return handleChangeFieldSetting(field.id, {
+        return handleChangeFieldSetting(field.validation_field_id, selectedSiteId, {
           required: val
         });
       }
@@ -80,18 +169,37 @@ var CardFieldsSettingUI = function CardFieldsSettingUI(props) {
       className: "status"
     }, /*#__PURE__*/_react.default.createElement(_styles.Switch, {
       defaultChecked: field.enabled,
-      disabled: field.code === 'email',
+      disabled: (field === null || field === void 0 || (_field$validation_fie3 = field.validation_field) === null || _field$validation_fie3 === void 0 ? void 0 : _field$validation_fie3.code) === 'email',
       onChange: function onChange(val) {
-        return handleChangeFieldSetting(field.id, {
+        return handleChangeFieldSetting(field.validation_field_id, selectedSiteId, {
           enabled: val
         });
       }
     })));
-  }))));
+  })))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    onAccept: function onAccept() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    closeOnBackdrop: false
+  }));
 };
 var CardFieldsSetting = exports.CardFieldsSetting = function CardFieldsSetting(props) {
   var cardFieldsProps = _objectSpread(_objectSpread({}, props), {}, {
+    code: 'card',
     UIComponent: CardFieldsSettingUI
   });
-  return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.CardFieldsSetting, cardFieldsProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.AddressFieldsSetting, cardFieldsProps);
 };

package/_modules/components/Settings/CardFieldsSetting/styles.js

@@ -4,16 +4,41 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldContainer = exports.CardFieldsDetailsContainer = void 0;
+exports.SitesWrapper = exports.SitesListContainer = exports.SiteItem = exports.Header = exports.FieldContainer = exports.CardFieldsDetailsContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var CardFieldsDetailsContainer = exports.CardFieldsDetailsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 26px 40px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin-bottom: 10px;\n  }\n"])));
-var FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  ", "\n\n  .name {\n    flex: 1;\n    font-size: 14px;\n  }\n\n  .required {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .status {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), function (_ref) {
-  var isHeader = _ref.isHeader;
-  return isHeader && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    margin-bottom: 15px;\n    > div {\n      font-weight: 700;\n      font-size: 14px;\n    }\n  "])), function (props) {
+var SitesListContainer = exports.SitesListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n"])));
+var Header = exports.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin: 0;\n  }\n  margin-right: 35px;\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-left: 35px;\n    margin-right: 0;\n  "])));
+});
+var SitesWrapper = exports.SitesWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: 35px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  overflow: hidden;\n  > div:first-child {\n    border-top: none !important;\n  }\n  > div:last-child {\n    border-bottom: none !important;\n  } \n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+var SiteItem = exports.SiteItem = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 12px 15px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  span {\n    font-size: 14px;\n  }\n  svg {\n    font-size: 20px;\n  }\n  ", "\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  return props.theme.colors.borderColor;
+}, function (props) {
+  return props.theme.colors.lightPrimary;
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n    border-top: 1px solid ", ";\n    border-bottom: 1px solid ", " !important;\n    background-color: ", ";\n  "])), function (props) {
+    return props.theme.colors.headingColor;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.lightPrimary;
+  });
+});
+var CardFieldsDetailsContainer = exports.CardFieldsDetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 26px 40px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin-bottom: 10px;\n  }\n"])));
+var FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  ", "\n\n  .name {\n    flex: 1;\n    font-size: 14px;\n  }\n\n  .required {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .status {\n    width: 80px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), function (_ref2) {
+  var isHeader = _ref2.isHeader;
+  return isHeader && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    margin-bottom: 15px;\n    > div {\n      font-weight: 700;\n      font-size: 14px;\n    }\n  "])), function (props) {
     return props.theme.colors.borderColor;
   });
 });