ordering-ui-admin-external 1.40.6 → 1.40.7

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

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckoutFieldsSetting = 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 _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _BsChevronRight = _interopRequireDefault(require("@meronex/icons/bs/BsChevronRight"));
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _Shared = require("../../Shared");
 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; }
@@ -28,11 +35,85 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var CheckoutFieldsSettingUI = function CheckoutFieldsSettingUI(props) {
   var checkoutFieldsState = props.checkoutFieldsState,
-    handleChangeCheckoutFieldSetting = props.handleChangeCheckoutFieldSetting;
+    handleChangeCheckoutFieldSetting = props.handleChangeCheckoutFieldSetting,
+    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.CheckoutFieldsDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('CHECKOUT_CUSTOMER_FIELDS', 'Checkout and Customer 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 = ['name', 'middle_name', 'lastname', 'second_lastname', 'email', 'mobile_phone', 'city_dropdown_option', 'address', 'zipcode', 'address_notes', 'coupon', 'driver_tip', 'comments', 'birthdate'];
+  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('CHECKOUT_CUSTOMER_FIELDS', 'Checkout and Customer 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.CheckoutFieldsDetailsContainer, 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 CheckoutFieldsSettingUI = function CheckoutFieldsSettingUI(props) {
     className: "required"
   }, t('REQUIRED', 'Required')), /*#__PURE__*/_react.default.createElement("div", {
     className: "status"
-  }, t('STATE', 'Status'))), checkoutFieldsState !== null && checkoutFieldsState !== void 0 && checkoutFieldsState.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 CheckoutFieldsSettingUI = function CheckoutFieldsSettingUI(props) {
         borderRadius: 20
       }
     })));
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, checkoutFieldsState.fields.map(function (field) {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, checkoutFieldsState.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 handleChangeCheckoutFieldSetting(field.id, {
+        return handleChangeCheckoutFieldSetting(field.validation_field_id, selectedSiteId, {
           required: val
         });
       }
@@ -81,14 +169,32 @@ var CheckoutFieldsSettingUI = function CheckoutFieldsSettingUI(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 handleChangeCheckoutFieldSetting(field.id, {
+        return handleChangeCheckoutFieldSetting(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 CheckoutFieldsSetting = exports.CheckoutFieldsSetting = function CheckoutFieldsSetting(props) {
   var checkoutFieldsProps = _objectSpread(_objectSpread({}, props), {}, {

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

@@ -4,19 +4,44 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldContainer = exports.CheckoutFieldsDetailsContainer = void 0;
+exports.SitesWrapper = exports.SitesListContainer = exports.SiteItem = exports.Header = exports.FieldContainer = exports.CheckoutFieldsDetailsContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 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 CheckoutFieldsDetailsContainer = exports.CheckoutFieldsDetailsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 26px 15px;\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  }\n\n  @media (min-width: 768px) {\n    padding: 26px 40px;\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\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin: 0;\n  }\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\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\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 CheckoutFieldsDetailsContainer = exports.CheckoutFieldsDetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 26px 15px;\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  }\n\n  @media (min-width: 768px) {\n    padding: 26px 40px;\n  }\n"])), function (props) {
   var _props$theme;
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: 40px;\n    "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-right: 40px;\n    "])));
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-left: 40px;\n    "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-right: 40px;\n    "])));
 });
-var FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _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)(_templateObject5 || (_templateObject5 = _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 FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _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)(_templateObject11 || (_templateObject11 = _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/GuestCheckoutFieldsSetting/index.js

@@ -72,7 +72,9 @@ var GuestCheckoutFieldsSettingUI = function GuestCheckoutFieldsSettingUI(props)
     className: "required"
   }, t('REQUIRED', 'Required')), /*#__PURE__*/_react.default.createElement("div", {
     className: "status"
-  }, t('STATE', 'Status'))), checkoutFieldsState !== null && checkoutFieldsState !== void 0 && checkoutFieldsState.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
+  }, t('STATE', 'Status')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "guest"
+  }, t('REQUIRED_WITH_GUEST', 'Required with guest'))), checkoutFieldsState !== null && checkoutFieldsState !== void 0 && checkoutFieldsState.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles2.FieldContainer, {
       key: i
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -93,6 +95,13 @@ var GuestCheckoutFieldsSettingUI = function GuestCheckoutFieldsSettingUI(props)
       style: {
         borderRadius: 20
       }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "guest"
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 30,
+      style: {
+        borderRadius: 20
+      }
     })));
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, checkoutFieldsState.fields.filter(function (item) {
     return (item === null || item === void 0 ? void 0 : item.order_type_id) === parseInt(orderType);
@@ -123,6 +132,15 @@ var GuestCheckoutFieldsSettingUI = function GuestCheckoutFieldsSettingUI(props)
           enabled: val
         });
       }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "guest"
+    }, /*#__PURE__*/_react.default.createElement(_styles.Switch, {
+      defaultChecked: field === null || field === void 0 ? void 0 : field.required_with_guest,
+      onChange: function onChange(val) {
+        return handleChangeCheckoutFieldSetting(field === null || field === void 0 ? void 0 : field.validation_field_id, field === null || field === void 0 ? void 0 : field.order_type_id, {
+          required_with_guest: val
+        });
+      }
     })));
   }))));
 };

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

@@ -21,7 +21,7 @@ var SelectWrapper = exports.SelectWrapper = _styledComponents.default.div(_templ
 var Option = exports.Option = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n  color: ", ";\n  text-transform: lowercase;\n  &::first-letter {\n    text-transform: uppercase;\n  }\n"])), function (props) {
   return props.theme.colors.secundaryContrast;
 });
-var FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _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 FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _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\n  .guest {\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)(_templateObject5 || (_templateObject5 = _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/Settings/index.js

@@ -80,10 +80,22 @@ var SettingsUI = function SettingsUI(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     openMultiCountrySettings = _useState10[0],
     setOpenMultiCountrySettings = _useState10[1];
-  var _useState11 = (0, _react.useState)(0),
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    moveDistance = _useState12[0],
-    setMoveDistance = _useState12[1];
+    openCheckoutSettings = _useState12[0],
+    setOpenCheckoutSettings = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    openAddressSettings = _useState14[0],
+    setOpenAddressSettings = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    openCardSettings = _useState16[0],
+    setOpenCardSettings = _useState16[1];
+  var _useState17 = (0, _react.useState)(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    moveDistance = _useState18[0],
+    setMoveDistance = _useState18[1];
   var _useEvent = (0, _orderingComponentsAdminExternal.useEvent)(),
     _useEvent2 = _slicedToArray(_useEvent, 1),
     events = _useEvent2[0];
@@ -112,6 +124,9 @@ var SettingsUI = function SettingsUI(props) {
     setIsOpenSettingDetails(null);
     setOpenSitesAuthSettings(false);
     setOpenMultiCountrySettings(false);
+    setOpenCheckoutSettings(false);
+    setOpenAddressSettings(false);
+    setOpenCardSettings(false);
     setIsOpenDescription(true);
     setSelectedCategory(category);
     handChangeConfig && handChangeConfig(false);
@@ -122,7 +137,10 @@ var SettingsUI = function SettingsUI(props) {
   var handleOpenSettingDetails = function handleOpenSettingDetails(item, isInitialRender) {
     setIsOpenDescription(false);
     setOpenSitesAuthSettings(false);
+    setOpenCheckoutSettings(false);
     setOpenMultiCountrySettings(false);
+    setOpenCardSettings(false);
+    setOpenAddressSettings(false);
     setSelectedCategory(null);
     setIsOpenSettingDetails(item);
     if (!isInitialRender) {
@@ -145,13 +163,49 @@ var SettingsUI = function SettingsUI(props) {
       history.replace("".concat(location.pathname, "?category=multi_country"));
     }
   };
+  var handleOpenCheckout = function handleOpenCheckout(isInitialRender) {
+    setIsOpenDescription(false);
+    setIsOpenSettingDetails(null);
+    setOpenSitesAuthSettings(false);
+    setOpenAddressSettings(false);
+    setOpenCardSettings(false);
+    setOpenCheckoutSettings(true);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=checkout"));
+    }
+  };
+  var handleOpenAddress = function handleOpenAddress(isInitialRender) {
+    setIsOpenDescription(false);
+    setIsOpenSettingDetails(null);
+    setOpenSitesAuthSettings(false);
+    setOpenCheckoutSettings(false);
+    setOpenCardSettings(false);
+    setOpenAddressSettings(true);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=address"));
+    }
+  };
+  var handleOpenCard = function handleOpenCard(isInitialRender) {
+    setIsOpenDescription(false);
+    setIsOpenSettingDetails(null);
+    setOpenSitesAuthSettings(false);
+    setOpenCheckoutSettings(false);
+    setOpenAddressSettings(false);
+    setOpenCardSettings(true);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=card"));
+    }
+  };
   var handleBackRedirect = function handleBackRedirect() {
     setIsOpenDescription(false);
     setSelectedCategory(null);
     setIsOpenSettingDetails(null);
     setMoveDistance(0);
     setOpenMultiCountrySettings(false);
+    setOpenCheckoutSettings(false);
     setOpenSitesAuthSettings(false);
+    setOpenAddressSettings(false);
+    setOpenCardSettings(false);
     history.replace("".concat(location.pathname));
   };
   (0, _react.useEffect)(function () {
@@ -163,6 +217,12 @@ var SettingsUI = function SettingsUI(props) {
           handleOpenSites(true);
         } else if (categoryId === 'multi_country') {
           handleOpenMultiCountry(true);
+        } else if (categoryId === 'checkout') {
+          setOpenCheckoutSettings(true);
+        } else if (categoryId === 'address') {
+          setOpenAddressSettings(true);
+        } else if (categoryId === 'card') {
+          setOpenCardSettings(true);
         } else {
           handleOpenSettingDetails(categoryId, true);
         }
@@ -205,13 +265,13 @@ var SettingsUI = function SettingsUI(props) {
   })), /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
     className: "col-md-4 col-sm-6",
     onClick: function onClick() {
-      return handleOpenSettingDetails('checkout');
+      return handleOpenCheckout();
     }
   }, /*#__PURE__*/_react.default.createElement(_SettingItemUI.SettingItemUI, {
     title: t('CHECKOUT_FIELDS', 'Checkout fields'),
     description: t('CHECKOUT_FIELDS_DESC'),
     icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CheckCircleFill, null),
-    active: isOpenSettingDetails === 'checkout'
+    active: openCheckoutSettings
   })), /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
     className: "col-md-4 col-sm-6",
     onClick: function onClick() {
@@ -225,23 +285,23 @@ var SettingsUI = function SettingsUI(props) {
   })), /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
     className: "col-md-4 col-sm-6",
     onClick: function onClick() {
-      return handleOpenSettingDetails('address');
+      return handleOpenAddress();
     }
   }, /*#__PURE__*/_react.default.createElement(_SettingItemUI.SettingItemUI, {
     title: t('ADDRESS_FIELDS', 'Address fields'),
     description: t('ADDRESS_FIELDS_DESC'),
     icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.GeoAltFill, null),
-    active: isOpenSettingDetails === 'address'
+    active: openAddressSettings
   })), /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
     className: "col-md-4 col-sm-6",
     onClick: function onClick() {
-      return handleOpenSettingDetails('card');
+      return handleOpenCard();
     }
   }, /*#__PURE__*/_react.default.createElement(_SettingItemUI.SettingItemUI, {
     title: t('CARD_FIELDS', 'Card fields'),
     description: t('CARD_FIELDS_DESC', 'Manage your card fields'),
     icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CreditCard, null),
-    active: isOpenSettingDetails === 'card'
+    active: openCardSettings
   })), /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
     className: "col-md-4 col-sm-6",
     onClick: function onClick() {
@@ -311,6 +371,33 @@ var SettingsUI = function SettingsUI(props) {
     }
   }, /*#__PURE__*/_react.default.createElement(_MultiCountrySettings.MultiCountrySettings, {
     setMoveDistance: setMoveDistance
+  })), openCheckoutSettings && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    defaultSideBarWidth: 500 + moveDistance,
+    moveDistance: moveDistance,
+    open: openCheckoutSettings,
+    onClose: function onClose() {
+      return handleBackRedirect();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CheckoutFieldsSetting.CheckoutFieldsSetting, {
+    setMoveDistance: setMoveDistance
+  })), openAddressSettings && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    defaultSideBarWidth: 500 + moveDistance,
+    moveDistance: moveDistance,
+    open: openAddressSettings,
+    onClose: function onClose() {
+      return handleBackRedirect();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AddressFieldsSetting.AddressFieldsSetting, {
+    setMoveDistance: setMoveDistance
+  })), openCardSettings && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    defaultSideBarWidth: 500 + moveDistance,
+    moveDistance: moveDistance,
+    open: openCardSettings,
+    onClose: function onClose() {
+      return handleBackRedirect();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CardFieldsSetting.CardFieldsSetting, {
+    setMoveDistance: setMoveDistance
   })), isOpenSettingDetails && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
     sidebarId: "setting-details",
     defaultSideBarWidth: 550,
@@ -319,7 +406,7 @@ var SettingsUI = function SettingsUI(props) {
       return handleBackRedirect();
     },
     showExpandIcon: true
-  }, isOpenSettingDetails === 'checkout' && /*#__PURE__*/_react.default.createElement(_CheckoutFieldsSetting.CheckoutFieldsSetting, null), isOpenSettingDetails === 'guest_checkout' && /*#__PURE__*/_react.default.createElement(_GuestCheckoutFieldsSetting.GuestCheckoutFieldsSetting, null), isOpenSettingDetails === 'address' && /*#__PURE__*/_react.default.createElement(_AddressFieldsSetting.AddressFieldsSetting, null), isOpenSettingDetails === 'card' && /*#__PURE__*/_react.default.createElement(_CardFieldsSetting.CardFieldsSetting, null), isOpenSettingDetails === 'language' && /*#__PURE__*/_react.default.createElement(_LanguageSetting.LanguageSetting, null)));
+  }, isOpenSettingDetails === 'guest_checkout' && /*#__PURE__*/_react.default.createElement(_GuestCheckoutFieldsSetting.GuestCheckoutFieldsSetting, null), isOpenSettingDetails === 'language' && /*#__PURE__*/_react.default.createElement(_LanguageSetting.LanguageSetting, null)));
 };
 var Settings = exports.Settings = function Settings(props) {
   var settingsProps = _objectSpread(_objectSpread({}, props), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.40.6",
+  "version": "1.40.7",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.40.3",
+    "ordering-components-admin-external": "1.40.4",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",