ordering-ui-admin-external 1.1.1 → 1.3.0

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

@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _polished = require("polished");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+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); }
 
@@ -19,15 +19,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var ImportListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([" \n"])));
+var ImportListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var isDisabledFeature = _ref.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    opacity: 0.5;\n    > div {\n      pointer-events: none;\n    }\n  "])));
+});
 
 exports.ImportListContainer = ImportListContainer;
 
-var ImportersTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n"])));
+var ImportersTableWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
 
 exports.ImportersTableWrapper = ImportersTableWrapper;
 
-var ImpotersTable = _styledComponents.default.table(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: ", ";\n\n  td, th {\n    padding: 10px 0;\n    font-size: 14px;\n    &:first-child {\n      width: 50%;\n    }\n  }\n\n  thead {\n    border-bottom: solid 1px ", ";\n  }\n"])), function (props) {
+var ImpotersTable = _styledComponents.default.table(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: ", ";\n\n  td, th {\n    padding: 10px 0;\n    font-size: 14px;\n    &:first-child {\n      width: 50%;\n    }\n  }\n\n  thead {\n    border-bottom: solid 1px ", ";\n  }\n"])), function (props) {
   var _props$theme$colors;
 
   return (_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.headingColor;
@@ -37,15 +40,15 @@ var ImpotersTable = _styledComponents.default.table(_templateObject3 || (_templa
 
 exports.ImpotersTable = ImpotersTable;
 
-var ImoportTbody = _styledComponents.default.tbody(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  tr {\n    td {\n      padding-right: 10px;\n      .importer-name {\n        display: flex;\n        width: 100%;\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (props) {
+var ImoportTbody = _styledComponents.default.tbody(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  tr {\n    td {\n      padding-right: 10px;\n      .importer-name {\n        display: flex;\n        width: 100%;\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, 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)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    td {\n      border-top: 1px solid ", ";\n      border-bottom: 1px solid ", ";\n    }\n  "])), function (props) {
+}, function (_ref2) {
+  var active = _ref2.active;
+  return active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    td {\n      border-top: 1px solid ", ";\n      border-bottom: 1px solid ", ";\n    }\n  "])), function (props) {
     return props.theme.colors.lightPrimary;
   }, function (props) {
     return props.theme.colors.primary;
@@ -56,34 +59,34 @@ var ImoportTbody = _styledComponents.default.tbody(_templateObject4 || (_templat
 
 exports.ImoportTbody = ImoportTbody;
 
-var UserEnableWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  span {\n    font-size: 14px;\n\n    ", "\n  }\n"])), function (props) {
+var UserEnableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  span {\n    font-size: 14px;\n\n    ", "\n  }\n"])), function (props) {
   var _props$theme;
 
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      padding-right: 10px;\n    "])));
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      padding-right: 10px;\n    "])));
 });
 
 exports.UserEnableWrapper = UserEnableWrapper;
 
-var WrapperUserActionSelector = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n    }\n    &:after {\n      display: none;\n    }\n  }\n  .show {\n    button {\n      background: #F8F9FA !important;\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    >div {\n      border: 1px solid #E9ECEF;\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n  > div {\n    border-radius: 8px;\n    ", "\n    > div {\n      a:last-child {\n        color: #E63757;\n      }\n    }\n    .dropdown-item {\n      font-size: 14px;\n    }\n  }\n"])), function (props) {
+var WrapperUserActionSelector = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n    }\n    &:after {\n      display: none;\n    }\n  }\n  .show {\n    button {\n      background: #F8F9FA !important;\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    >div {\n      border: 1px solid #E9ECEF;\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n  > div {\n    border-radius: 8px;\n    ", "\n    > div {\n      a:last-child {\n        color: #E63757;\n      }\n    }\n    .dropdown-item {\n      font-size: 14px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   var _props$theme2;
 
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n    "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n    "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n    "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n    "])));
 });
 
 exports.WrapperUserActionSelector = WrapperUserActionSelector;
 
-var ImportersBottomContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n"])));
+var ImportersBottomContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n"])));
 
 exports.ImportersBottomContainer = ImportersBottomContainer;
 
-var AddNewImporterButton = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  width: fit-content;\n  cursor: pointer;\n  color: rgb(144, 155, 169);\n  font-size: 14px;\n  margin-top: 20px;\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
+var AddNewImporterButton = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  width: fit-content;\n  cursor: pointer;\n  color: rgb(144, 155, 169);\n  font-size: 14px;\n  margin-top: 20px;\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
   return (0, _polished.darken)(0.05, props.theme.colors.primary);
 });
 
 exports.AddNewImporterButton = AddNewImporterButton;
 
-var NotFoundWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  #not-found-source {\n    height: auto;\n    h1 {\n      font-size: 18px;\n      margin-top: 25px;\n    }\n  }\n"])));
+var NotFoundWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  #not-found-source {\n    height: auto;\n    h1 {\n      font-size: 18px;\n      margin-top: 25px;\n    }\n  }\n"])));
 
 exports.NotFoundWrapper = NotFoundWrapper;

package/_modules/components/Stores/ImportersListing/index.js

@@ -25,6 +25,8 @@ var _ImporterHelpContent = require("../ImporterHelpContent");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles2 = require("./styles");
 
 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); }
@@ -61,6 +63,16 @@ var ImportersListingUI = function ImportersListingUI(props) {
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
+  var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
+      _useConfig2 = _slicedToArray(_useConfig, 1),
+      configs = _useConfig2[0].configs;
+
+  var _useSession = (0, _orderingComponentsAdminExternal.useSession)(),
+      _useSession2 = _slicedToArray(_useSession, 1),
+      user = _useSession2[0].user;
+
+  var featureName = 'massive_importer';
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       openNewImporter = _useState2[0],
@@ -96,6 +108,11 @@ var ImportersListingUI = function ImportersListingUI(props) {
       openMappingDetails = _useState14[0],
       setOpenMappingDetails = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isDisabledFeature = _useState16[0],
+      setIsDisabledFeature = _useState16[1];
+
   var addNewImporter = function addNewImporter() {
     setSelectedImporter({});
     setOpenImportCsv(false);
@@ -120,17 +137,26 @@ var ImportersListingUI = function ImportersListingUI(props) {
   (0, _react.useEffect)(function () {
     setExtraOpen && setExtraOpen(openNewImporter);
   }, [openNewImporter]);
+  (0, _react.useEffect)(function () {
+    if (configs && Object.keys(configs).length > 0 && user) {
+      if (!Object.keys(configs).includes(featureName) && (user === null || user === void 0 ? void 0 : user.level) === 0) {
+        setIsDisabledFeature(true);
+      }
+    }
+  }, [configs]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.ImportersListingContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.Title, null, /*#__PURE__*/_react.default.createElement(_styles2.TitleContent, null, t('IMPORTERS', 'Importers')), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "primary",
     onClick: function onClick() {
       return setOpenImporterHelp(true);
-    }
+    },
+    disabled: isDisabledFeature
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null))), /*#__PURE__*/_react.default.createElement(_styles2.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "lightPrimary",
     borderRadius: "5px",
     onClick: function onClick() {
       return addNewImporter();
-    }
+    },
+    disabled: isDisabledFeature
   }, t('ADD_IMPORTER', 'Add importer')))), /*#__PURE__*/_react.default.createElement(_ImportersList.ImportersList, {
     importerList: importerList,
     paginationDetail: paginationDetail,
@@ -139,8 +165,9 @@ var ImportersListingUI = function ImportersListingUI(props) {
     handleDeleteImporter: handleDeleteImporter,
     selectedImporter: selectedImporter,
     setSelectedImporter: setSelectedImporter,
-    handleEditImporter: handleEditImporter
-  }), openNewImporter && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    handleEditImporter: handleEditImporter,
+    isDisabledFeature: isDisabledFeature
+  }), isDisabledFeature && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), openNewImporter && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
     isBorderShow: !openMappingDetails,
     open: openNewImporter,
     defaultSideBarWidth: openMappingDetails ? 1000 : 500,

package/_modules/components/Stores/PaymentOption/index.js

@@ -29,6 +29,8 @@ var _reactBootstrap = require("react-bootstrap");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles3 = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,7 +78,8 @@ var PaymentOption = function PaymentOption(props) {
       actionState = props.actionState,
       handleSaveClick = props.handleSaveClick,
       businessPaymethod = props.businessPaymethod,
-      handleDeletePaymethod = props.handleDeletePaymethod;
+      handleDeletePaymethod = props.handleDeletePaymethod,
+      isDisabledFeature = props.isDisabledFeature;
   var theme = (0, _styledComponents.useTheme)();
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -197,11 +200,12 @@ var PaymentOption = function PaymentOption(props) {
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: site.id,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'sites',
           value: site.id
         });
-      }
+      },
+      isDisabledFeature: isDisabledFeature
     }, (_ref2 = (_changesState$sites = changesState === null || changesState === void 0 ? void 0 : changesState.sites) !== null && _changesState$sites !== void 0 ? _changesState$sites : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$si = businessPaymethod.sites) === null || _businessPaymethod$si === void 0 ? void 0 : _businessPaymethod$si.map(function (s) {
       return s.id;
     })) !== null && _ref2 !== void 0 && _ref2.includes(site.id) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
@@ -213,22 +217,23 @@ var PaymentOption = function PaymentOption(props) {
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: type.value,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'allowed_order_types',
           value: type.value
         });
-      }
+      },
+      isDisabledFeature: isDisabledFeature
     }, (_ref3 = (_changesState$allowed = changesState === null || changesState === void 0 ? void 0 : changesState.allowed_order_types) !== null && _changesState$allowed !== void 0 ? _changesState$allowed : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.allowed_order_types) !== null && _ref3 !== void 0 && _ref3.includes(type.value) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
       className: "fill"
     }) : /*#__PURE__*/_react.default.createElement(_RiCheckboxBlankLine.default, null), /*#__PURE__*/_react.default.createElement(_styles3.TabOptionName, null, type.text));
   }), /*#__PURE__*/_react.default.createElement(_styles.Button, {
     borderRadius: "5px",
     color: "primary",
-    disabled: actionState.loading || Object.keys(changesState).length === 0,
+    disabled: isDisabledFeature || actionState.loading || Object.keys(changesState).length === 0,
     onClick: function onClick() {
       return handleSaveClick(businessPaymethod.id);
     }
-  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), isDisabledFeature && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
     width: "700px",
     title: t('WEB_APPNAME', 'Ordering'),
     content: confirm.content,

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

@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _polished = require("polished");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 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); }
 
@@ -55,20 +55,25 @@ var CloseButton = _styledComponents.default.div(_templateObject6 || (_templateOb
 
 exports.CloseButton = CloseButton;
 
-var TabOption = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var TabOption = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return props.theme.colors.primary;
+}, function (_ref) {
+  var isDisabledFeature = _ref.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n      opacity: 0.4;\n      &:hover {\n        background-color: ", ";\n      }\n  "])), function (props) {
+    return props.theme.colors.white;
+  });
 });
 
 exports.TabOption = TabOption;
 
-var TabOptionName = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
+var TabOptionName = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   var _props$theme2;
 
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
 });
 
 exports.TabOptionName = TabOptionName;

package/_modules/components/Stores/PaymentOptionMethods/index.js

@@ -27,6 +27,8 @@ var _reactBootstrap = require("react-bootstrap");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles2 = require("./styles");
 
 var _styles3 = require("../BusinessMenu/styles");
@@ -80,7 +82,8 @@ var PaymentOptionMethods = function PaymentOptionMethods(props) {
       businessPaymethod = props.businessPaymethod,
       handleDeletePaymethod = props.handleDeletePaymethod,
       id = props.id,
-      title = props.title;
+      title = props.title,
+      isDisabledFeature = props.isDisabledFeature;
   var theme = (0, _styledComponents.useTheme)();
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -244,8 +247,9 @@ var PaymentOptionMethods = function PaymentOptionMethods(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
       key: site.id,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'sites',
           value: site.id
         });
@@ -260,8 +264,9 @@ var PaymentOptionMethods = function PaymentOptionMethods(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
       key: type.value,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'allowed_order_types',
           value: type.value
         });
@@ -276,7 +281,7 @@ var PaymentOptionMethods = function PaymentOptionMethods(props) {
     onClick: function onClick() {
       return handleSaveClick(businessPaymethod.id);
     }
-  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2) && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
     width: "700px",
     title: t('WEB_APPNAME', 'Ordering'),
     content: confirm.content,

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

@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _polished = require("polished");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+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); }
 
@@ -57,25 +57,30 @@ var CloseButton = _styledComponents.default.div(_templateObject9 || (_templateOb
 
 exports.CloseButton = CloseButton;
 
-var TabOption = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var TabOption = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n  \n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return props.theme.colors.primary;
+}, function (_ref) {
+  var isDisabledFeature = _ref.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n      opacity: 0.4;\n      &:hover {\n        background-color: ", ";\n      }\n  "])), function (props) {
+    return props.theme.colors.white;
+  });
 });
 
 exports.TabOption = TabOption;
 
-var TabOptionName = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
+var TabOptionName = _styledComponents.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   var _props$theme3;
 
-  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
 });
 
 exports.TabOptionName = TabOptionName;
 
-var ActionSelectorWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px 5px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n      font-size: 20px;\n    }\n\n    &:after {\n      display: none;\n    }\n\n    &:hover {\n      background: ", " !important;\n    }\n    &:active {\n      background: ", " !important;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n    }\n    >div {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n\n  > div {\n    > div {\n      border-radius: 8px;\n      .dropdown-item {\n        font-size: 12px;\n        color: ", ";\n        &:active {\n          background: ", " !important;\n        }\n      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
+var ActionSelectorWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px 5px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n      font-size: 20px;\n    }\n\n    &:after {\n      display: none;\n    }\n\n    &:hover {\n      background: ", " !important;\n    }\n    &:active {\n      background: ", " !important;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n    }\n    >div {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n\n  > div {\n    > div {\n      border-radius: 8px;\n      .dropdown-item {\n        font-size: 12px;\n        color: ", ";\n        &:active {\n          background: ", " !important;\n        }\n      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return (0, _polished.darken)(0.04, props.theme.colors.secundary);

package/_modules/components/Stores/PaymentOptionPaypal/index.js

@@ -27,6 +27,8 @@ var _reactBootstrap = require("react-bootstrap");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles2 = require("./styles");
 
 var _styles3 = require("../BusinessMenu/styles");
@@ -80,7 +82,8 @@ var PaymentOptionPaypal = function PaymentOptionPaypal(props) {
       handleSaveClick = props.handleSaveClick,
       businessPaymethod = props.businessPaymethod,
       handleChangeBusinessPaymentState = props.handleChangeBusinessPaymentState,
-      handleDeletePaymethod = props.handleDeletePaymethod;
+      handleDeletePaymethod = props.handleDeletePaymethod,
+      isDisabledFeature = props.isDisabledFeature;
   var theme = (0, _styledComponents.useTheme)();
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -244,8 +247,9 @@ var PaymentOptionPaypal = function PaymentOptionPaypal(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles4.TabOption, {
       key: site.id,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'sites',
           value: site.id
         });
@@ -260,8 +264,9 @@ var PaymentOptionPaypal = function PaymentOptionPaypal(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles4.TabOption, {
       key: type.value,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'allowed_order_types',
           value: type.value
         });
@@ -276,7 +281,7 @@ var PaymentOptionPaypal = function PaymentOptionPaypal(props) {
     onClick: function onClick() {
       return handleSaveClick(businessPaymethod.id);
     }
-  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2) && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
     width: "700px",
     title: t('WEB_APPNAME', 'Ordering'),
     content: confirm.content,

package/_modules/components/Stores/PaymentOptionSquare/index.js

@@ -33,6 +33,8 @@ var _RiCheckboxFill = _interopRequireDefault(require("@meronex/icons/ri/RiCheckb
 
 var _SiSquare = _interopRequireDefault(require("@meronex/icons/si/SiSquare"));
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles4 = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -84,7 +86,8 @@ var PaymentOptionSquareUI = function PaymentOptionSquareUI(props) {
       handleSavePaymethod = props.handleSavePaymethod,
       handleChangeDataInput = props.handleChangeDataInput,
       handleChangeSanboxDataInput = props.handleChangeSanboxDataInput,
-      handleChangeSandbox = props.handleChangeSandbox;
+      handleChangeSandbox = props.handleChangeSandbox,
+      isDisabledFeature = props.isDisabledFeature;
   var theme = (0, _styledComponents.useTheme)();
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -178,7 +181,7 @@ var PaymentOptionSquareUI = function PaymentOptionSquareUI(props) {
       content: actionState === null || actionState === void 0 ? void 0 : actionState.error
     });
   }, [actionState === null || actionState === void 0 ? void 0 : actionState.error]);
-  return /*#__PURE__*/_react.default.createElement(_styles4.Container, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles4.Container, {
     id: "payment_method_square"
   }, /*#__PURE__*/_react.default.createElement(_styles4.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$pa2 = businessPaymethod.paymethod) === null || _businessPaymethod$pa2 === void 0 ? void 0 : _businessPaymethod$pa2.name), /*#__PURE__*/_react.default.createElement(_styles4.ActionSelectorWrapper, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
     menuAlign: theme !== null && theme !== void 0 && theme.rtl ? 'left' : 'right',
@@ -258,8 +261,9 @@ var PaymentOptionSquareUI = function PaymentOptionSquareUI(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: site.id,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'sites',
           value: site.id
         });
@@ -274,8 +278,9 @@ var PaymentOptionSquareUI = function PaymentOptionSquareUI(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: type.value,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'allowed_order_types',
           value: type.value
         });
@@ -319,7 +324,7 @@ var PaymentOptionSquareUI = function PaymentOptionSquareUI(props) {
       });
     },
     closeOnBackdrop: false
-  }));
+  })), isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2) && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null));
 };
 
 var PaymentOptionSquare = function PaymentOptionSquare(props) {

package/_modules/components/Stores/PaymentOptionStripeDirect/index.js

@@ -27,6 +27,8 @@ var _reactBootstrap = require("react-bootstrap");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles2 = require("./styles");
 
 var _styles3 = require("../BusinessMenu/styles");
@@ -78,7 +80,8 @@ var PaymentOptionStripeDirect = function PaymentOptionStripeDirect(props) {
       handleChangeInput = props.handleChangeInput,
       handleSaveClick = props.handleSaveClick,
       businessPaymethod = props.businessPaymethod,
-      handleDeletePaymethod = props.handleDeletePaymethod;
+      handleDeletePaymethod = props.handleDeletePaymethod,
+      isDisabledFeature = props.isDisabledFeature;
   var theme = (0, _styledComponents.useTheme)();
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -243,11 +246,12 @@ var PaymentOptionStripeDirect = function PaymentOptionStripeDirect(props) {
     return /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
       key: site.id,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'sites',
           value: site.id
         });
-      }
+      },
+      isDisabledFeature: isDisabledFeature
     }, (_ref2 = (_changesState$sites = changesState === null || changesState === void 0 ? void 0 : changesState.sites) !== null && _changesState$sites !== void 0 ? _changesState$sites : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$si = businessPaymethod.sites) === null || _businessPaymethod$si === void 0 ? void 0 : _businessPaymethod$si.map(function (s) {
       return s.id;
     })) !== null && _ref2 !== void 0 && _ref2.includes(site.id) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
@@ -258,8 +262,9 @@ var PaymentOptionStripeDirect = function PaymentOptionStripeDirect(props) {
 
     return /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
       key: type.value,
+      isDisabledFeature: isDisabledFeature,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'allowed_order_types',
           value: type.value
         });
@@ -274,7 +279,7 @@ var PaymentOptionStripeDirect = function PaymentOptionStripeDirect(props) {
     onClick: function onClick() {
       return handleSaveClick(businessPaymethod.id);
     }
-  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2) && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
     width: "700px",
     title: t('WEB_APPNAME', 'Ordering'),
     content: confirm.content,

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

@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _polished = require("polished");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+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); }
 
@@ -57,25 +57,30 @@ var CloseButton = _styledComponents.default.div(_templateObject9 || (_templateOb
 
 exports.CloseButton = CloseButton;
 
-var TabOption = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var TabOption = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return props.theme.colors.primary;
+}, function (_ref) {
+  var isDisabledFeature = _ref.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n      opacity: 0.4;\n      &:hover {\n        background-color: ", ";\n      }\n  "])), function (props) {
+    return props.theme.colors.white;
+  });
 });
 
 exports.TabOption = TabOption;
 
-var TabOptionName = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
+var TabOptionName = _styledComponents.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   var _props$theme3;
 
-  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
 });
 
 exports.TabOptionName = TabOptionName;
 
-var ActionSelectorWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px 5px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n      font-size: 20px;\n    }\n\n    &:after {\n      display: none;\n    }\n\n    &:hover {\n      background: ", " !important;\n    }\n    &:active {\n      background: ", " !important;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n    }\n    >div {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n\n  > div {\n    > div {\n      border-radius: 8px;\n      .dropdown-item {\n        font-size: 12px;\n        color: ", ";\n        &:active {\n          background: ", " !important;\n        }\n      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
+var ActionSelectorWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px 5px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n      font-size: 20px;\n    }\n\n    &:after {\n      display: none;\n    }\n\n    &:hover {\n      background: ", " !important;\n    }\n    &:active {\n      background: ", " !important;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n    }\n    >div {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n\n  > div {\n    > div {\n      border-radius: 8px;\n      .dropdown-item {\n        font-size: 12px;\n        color: ", ";\n        &:active {\n          background: ", " !important;\n        }\n      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return (0, _polished.darken)(0.04, props.theme.colors.secundary);