ordering-ui-admin-external 1.8.4 → 1.9.0

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

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YoutubeVideoWrapper = exports.YoutubeVideoInner = exports.Tab = exports.SettingListConatiner = exports.ItsaCheckmateContainer = exports.HeaderIcons = exports.Header = exports.GetStarted = exports.DropdownButtonWrapper = exports.DescriptionHeader = exports.Description = exports.Container = exports.CategoryExtraContent = exports.ApiKeysListTable = exports.AllSetting = exports.AddNewButton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var ItsaCheckmateContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 26px 20px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n  position: relative;\n\n  @media (min-width: 768px) {\n    padding: 26px 40px;\n  }\n"])));
+exports.ItsaCheckmateContainer = ItsaCheckmateContainer;
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 30px;\n\n  ", "\n\n  h1 {\n    font-size: 20px;\n    font-weight: 700;\n    margin: 0px;\n    text-transform: capitalize;\n  }\n\n  button {\n    line-height: 12px;\n    height: 16px;\n    font-size: 10px;\n    margin-left: 15px;\n    padding: 2px 8px;\n    border-radius: 50px;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-left: 35px;\n  "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-right: 35px;\n  "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n      margin-left: 0px;\n    "])));
+});
+exports.Header = Header;
+var ApiKeysListTable = _styledComponents.default.table(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 25px;\n\n  thead {\n    border-bottom: 1px solid ", ";\n    th {\n      padding: 10px 0;\n      &:last-child {\n        padding-left: 20px;\n        padding-right: 20px;\n      }\n    }\n  }\n  tr {\n    width: 100%;\n    th,\n    td {\n      font-size: 12px;\n      word-break: break-all;\n\n      &:last-child {\n        width: 100px;\n        > div {\n          padding-left: 20px;\n          padding-right: 20px;\n        }\n      }\n    }\n  }\n\n  tbody {\n    border-bottom: 1px solid ", ";\n    td {\n      padding-top: 9px;\n      padding-bottom: 9px;\n\n      &:last-child {\n        > div {\n          display: flex;\n          justify-content: flex-end;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.secundaryLight;
+}, function (props) {
+  return props.theme.colors.borderColor;
+});
+exports.ApiKeysListTable = ApiKeysListTable;
+var DropdownButtonWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  padding: 5px 20px;\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\n    &:after {\n      display: none;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n      border-color: unset !important;\n      box-shadow: none !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      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
+  var _props$theme2;
+  return props !== null && props !== void 0 && (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border-right: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.borderColor;
+  }) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    border-left: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.borderColor;
+  });
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.secundary;
+}, function (props) {
+  return props.theme.colors.borderColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+});
+exports.DropdownButtonWrapper = DropdownButtonWrapper;
+var AddNewButton = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  font-size: 12px;\n  color: ", ";\n  margin: 20px 0;\n  width: fit-content;\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  return props.theme.colors.primary;
+});
+exports.AddNewButton = AddNewButton;
+var AllSetting = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  user-select: none;\n  cursor: pointer;\n  margin-top: 36px;\n  cursor: pointer;\n  span {\n    font-weight: 600;\n    font-size: 14px;\n    color: ", ";\n  }\n  svg {\n    color: ", ";\n    margin-left: 5px;\n    transition: 0.2s linear;\n    ", "\n  }\n  &:hover {\n    svg {\n      transform: translateX(3px);\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n      margin-left: 0px;\n    "])));
+});
+exports.AllSetting = AllSetting;
+var Description = _styledComponents.default.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: 40px;\n  font-size: 14px;\n  margin-bottom: 0px;\n  text-align: justify;\n\n  div.sub-header {\n    font-size: 14px;\n    margin-bottom: 10px;\n  }\n  div.menu-item {\n    display: flex;\n    align-items: center;\n    svg {\n      ", "\n    }\n    > p {\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 24px;\n      margin: 0px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    text-align: initial;\n  }\n"])), function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        margin-left: 8px;\n      "]))) : (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        margin-right: 8px;\n      "])));
+});
+exports.Description = Description;
+var CategoryExtraContent = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 26px 26px 60px 26px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow: auto;\n\n  ", "\n\n  > button {\n    z-index: 100;\n    position: absolute;\n    top: 25px;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme4;
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    border-right: 1px solid #E9ECEF;\n  "]))) : (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    border-left: 1px solid #E9ECEF;\n  "])));
+}, function (props) {
+  var _props$theme5;
+  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      left: 20px;\n    "]))) : (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      right: 20px;\n    "])));
+});
+exports.CategoryExtraContent = CategoryExtraContent;
+var Container = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 0;\n  position: fixed;\n  box-shadow: -4px 0px 7px #ccc;\n\n  ", "\n  background: ", ";\n  height: calc(var(--vh, 1vh) * 100);\n  top: 0px;\n  z-index: 1001;\n  overflow-x: hidden;\n  transition: 0.3s;\n\n  ", "\n  @media print {\n    box-shadow: none;\n  }\n"])), function (_ref) {
+  var isDriverOrders = _ref.isDriverOrders;
+  return isDriverOrders && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    position: absolute;\n    box-shadow: none;\n\n    ", "\n  "])), function (props) {
+    var _props$theme6;
+    return (_props$theme6 = props.theme) !== null && _props$theme6 !== void 0 && _props$theme6.rtl ? (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      border-right: 1px solid #CCC;\n    "]))) : (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      border-left: 1px solid #CCC;\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.backgroundPage) || '#FFF';
+}, function (props) {
+  var _props$theme7;
+  return (_props$theme7 = props.theme) !== null && _props$theme7 !== void 0 && _props$theme7.rtl ? (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    left: 0px;\n    "]))) : (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    right: 0px;\n  "])));
+});
+exports.Container = Container;
+var DescriptionHeader = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n"])));
+exports.DescriptionHeader = DescriptionHeader;
+var HeaderIcons = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 25px;\n  right: 20px;\n\n  > button:first-child {\n    ", "\n  }\n"])), function (props) {
+  var _props$theme8;
+  return (_props$theme8 = props.theme) !== null && _props$theme8 !== void 0 && _props$theme8.rtl ? (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n      margin-left: 8px;\n    "]))) : (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n      margin-right: 8px;\n    "])));
+});
+exports.HeaderIcons = HeaderIcons;
+var SettingListConatiner = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 20px 0;\n  border-bottom: 1px solid #E9ECEF;\n"])));
+exports.SettingListConatiner = SettingListConatiner;
+var Tab = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  user-select: none;\n  padding: 10px 0px;\n  cursor: pointer;\n  color: ", ";\n  font-size: 14px;\n  white-space: nowrap;\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+  var _props$theme$colors2;
+  return (_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.headingColor;
+}, function (props) {
+  var _props$theme9;
+  return (_props$theme9 = props.theme) !== null && _props$theme9 !== void 0 && _props$theme9.rtl ? (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n    margin-left: 30px;\n  "]))) : (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n    margin-right: 30px;\n  "])));
+}, function (_ref2) {
+  var active = _ref2.active;
+  return active && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    border-bottom: 2px solid;\n    font-weight: 500;\n  "])));
+}, function (_ref3) {
+  var active = _ref3.active;
+  return !active && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    color: #909BA9;\n  "])));
+});
+exports.Tab = Tab;
+var GetStarted = _styledComponents.default.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  h2 {\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 10px;\n  }\n  p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 8px;\n    color: ", ";\n  }\n  button {\n    border-radius: 8px;\n    height: 44px;\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.GetStarted = GetStarted;
+var YoutubeVideoWrapper = _styledComponents.default.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n  margin-top: 50px;\n  padding-bottom: 30px;\n"])));
+exports.YoutubeVideoWrapper = YoutubeVideoWrapper;
+var YoutubeVideoInner = _styledComponents.default.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  padding-bottom: 56.25%;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 7.6px;\n  background-color: ", ";\n\n  iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n"])), function (props) {
+  return props.theme.colors.secundaryDarkContrast;
+});
+exports.YoutubeVideoInner = YoutubeVideoInner;

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

@@ -0,0 +1,178 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerExpress = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _styles = require("../../../styles");
+var _Shared = require("../../Shared");
+var _BsArrowRight = _interopRequireDefault(require("@meronex/icons/bs/BsArrowRight"));
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _styles2 = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { 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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var PickerExpressUI = function PickerExpressUI(props) {
+  var actionState = props.actionState,
+    onClose = props.onClose;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var _useState = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      open: false,
+      content: null,
+      handleOnAccept: null
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirm = _useState4[0],
+    setConfirm = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    settingsOpen = _useState6[0],
+    setSettingsOpen = _useState6[1];
+  var toggleMainContent = function toggleMainContent() {
+    if (width <= 500) {
+      document.getElementById('catDescription').style.width = '100vw';
+    } else {
+      if (settingsOpen && width >= 1000) {
+        document.getElementById('catDescription').style.width = '1000px';
+      } else {
+        document.getElementById('catDescription').style.width = '500px';
+      }
+    }
+  };
+  var handleGoToLink = function handleGoToLink(link) {
+    window.open(link, '_blank');
+  };
+  (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]);
+  (0, _react.useEffect)(function () {
+    if (width < 1000) return;
+    if (settingsOpen) {
+      document.getElementById('catDescription').style.width = '1000px';
+    } else {
+      toggleMainContent();
+    }
+  }, [settingsOpen]);
+  (0, _react.useEffect)(function () {
+    toggleMainContent();
+  }, [width]);
+  var LalaMoveConnectDescription = function LalaMoveConnectDescription() {
+    return /*#__PURE__*/_react.default.createElement(_styles2.CategoryExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+      color: "black",
+      onClick: function onClick() {
+        return setSettingsOpen(false);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MORE_INFO', 'More Info'))), /*#__PURE__*/_react.default.createElement(_styles2.SettingListConatiner, null, /*#__PURE__*/_react.default.createElement(_Shared.DragScroll, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
+      active: true
+    }, t('GENERAL', 'General')))), /*#__PURE__*/_react.default.createElement(_styles2.Paragraph, null, /*#__PURE__*/_react.default.createElement("h2", null, t('REQUIREMENTS', 'Requirements')), /*#__PURE__*/_react.default.createElement("p", null, t('PICKER_EXPRESS_CONNECT_REQUIREMENTS', 'For this integration to work you need: \n' + '1.- Picker Express account. \n' + '2.- The advanced logistics module must be active. \n' + '3.- Package of Ordering.'))), /*#__PURE__*/_react.default.createElement(_styles2.Paragraph, null, /*#__PURE__*/_react.default.createElement("h2", null, t('ARTICLE', 'Article')), /*#__PURE__*/_react.default.createElement("p", null, t('PICKER_EXPRESS_CONNECT_ARTICLE', 'To connect with Picker Express, you’ll have to use plugins, put in your Picker Express credentials, connect your Picker Express account, and create a driver company inside this dashboard; follow the next article step by step and get this connected in less than 5 minutes.')), /*#__PURE__*/_react.default.createElement("a", {
+      onClick: function onClick() {
+        return handleGoToLink(t('PICKER_EXPRESS_CONNECT_ARTICLE_LINK', 'https://support.ordering.co/hc/en-us/articles/10673894748941'));
+      }
+    }, t('VIEW_ARTICLE', 'View Article'))), /*#__PURE__*/_react.default.createElement(_styles2.Paragraph, null, /*#__PURE__*/_react.default.createElement("h2", null, t('SUPPORT', 'Support')), /*#__PURE__*/_react.default.createElement("p", null, t('PICKER_EXPRESS_CONNECT_SUPPORT', 'Are you having trouble connecting this?')), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("a", {
+      onClick: function onClick() {
+        return handleGoToLink(t('PICKER_EXPRESS_CONNECT_SUPPORT_LINK', 'https://www.ordering.co/contact-ordering'));
+      }
+    }, t('CONTACT_US', 'Contact us')), "; ", /*#__PURE__*/_react.default.createElement("span", null, t('WE_ARE_HAPPY_TO_HELP', 'we are happy to help.')))), /*#__PURE__*/_react.default.createElement(_styles2.Paragraph, null, /*#__PURE__*/_react.default.createElement("h2", null, t('PRICE_INSTALATION', 'Price and installation time.')), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "bold"
+    }, t('PICKER_EXPRESS_CONNECT_PRICE', '$99 monthly')), " | ", t('PICKER_EXPRESS_CONNECT_INSTALLATION', 'less than 24 hrs to get it installed in your project.'))), /*#__PURE__*/_react.default.createElement(_styles2.PurchaseWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+      outline: true,
+      color: "primary",
+      onClick: function onClick() {
+        return handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/ordering-sales'));
+      }
+    }, t('PURCHASE_INTEGRATION', 'Purchase Integration')))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
+    id: "catDescription"
+  }, /*#__PURE__*/_react.default.createElement(_styles2.PickerExpressContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.DescriptionHeader, null, /*#__PURE__*/_react.default.createElement(_styles2.HeaderIcons, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "black",
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)))), /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('CONNECT_WITH_PICKER_EXPRESS', 'Connect with Picker Express')), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "lightPrimary"
+  }, t('NEW', 'New'))), /*#__PURE__*/_react.default.createElement(_styles2.Description, null, t('CONNECT_WITH_PICKER_EXPRESS_DESCRIPTION', 'If you have already worked with Pickerexpress or are running your business with Pickerexpress and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')), /*#__PURE__*/_react.default.createElement(_styles2.AllSetting, {
+    onClick: function onClick() {
+      return setSettingsOpen(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('SETTINGS', 'All settings')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), settingsOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(LalaMoveConnectDescription, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    width: "70%",
+    height: "90vh",
+    open: true,
+    padding: "0px",
+    onClose: function onClose() {
+      return setSettingsOpen(false);
+    },
+    hideCloseDefault: true
+  }, /*#__PURE__*/_react.default.createElement(LalaMoveConnectDescription, null)))), /*#__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
+  }), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: confirm.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: confirm.open,
+    onClose: function onClose() {
+      return setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {
+        open: false
+      }));
+    },
+    onCancel: function onCancel() {
+      return setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {
+        open: false
+      }));
+    },
+    onAccept: confirm.handleOnAccept,
+    closeOnBackdrop: false
+  }));
+};
+var PickerExpress = function PickerExpress(props) {
+  var apiKeysProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: PickerExpressUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.ApiKeysList, apiKeysProps);
+};
+exports.PickerExpress = PickerExpress;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = exports.SettingListConatiner = exports.PurchaseWrapper = exports.PickerExpressContainer = exports.Paragraph = exports.HeaderIcons = exports.Header = exports.DropdownButtonWrapper = exports.DescriptionHeader = exports.Description = exports.Container = exports.CategoryExtraContent = exports.ApiKeysListTable = exports.AllSetting = exports.AddNewButton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var PickerExpressContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 26px 20px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n  position: relative;\n\n  @media (min-width: 768px) {\n    padding: 26px 40px;\n  }\n"])));
+exports.PickerExpressContainer = PickerExpressContainer;
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 30px;\n\n  ", "\n\n  h1 {\n    font-size: 20px;\n    font-weight: 700;\n    margin: 0px;\n    text-transform: capitalize;\n  }\n\n  button {\n    line-height: 12px;\n    height: 16px;\n    font-size: 10px;\n    margin-left: 15px;\n    padding: 2px 8px;\n    border-radius: 50px;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-left: 35px;\n  "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-right: 35px;\n  "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n      margin-left: 0px;\n    "])));
+});
+exports.Header = Header;
+var ApiKeysListTable = _styledComponents.default.table(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 25px;\n\n  thead {\n    border-bottom: 1px solid ", ";\n    th {\n      padding: 10px 0;\n      &:last-child {\n        padding-left: 20px;\n        padding-right: 20px;\n      }\n    }\n  }\n  tr {\n    width: 100%;\n    th,\n    td {\n      font-size: 12px;\n      word-break: break-all;\n\n      &:last-child {\n        width: 100px;\n        > div {\n          padding-left: 20px;\n          padding-right: 20px;\n        }\n      }\n    }\n  }\n\n  tbody {\n    border-bottom: 1px solid ", ";\n    td {\n      padding-top: 9px;\n      padding-bottom: 9px;\n\n      &:last-child {\n        > div {\n          display: flex;\n          justify-content: flex-end;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.secundaryLight;
+}, function (props) {
+  return props.theme.colors.borderColor;
+});
+exports.ApiKeysListTable = ApiKeysListTable;
+var DropdownButtonWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  padding: 5px 20px;\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\n    &:after {\n      display: none;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n      border-color: unset !important;\n      box-shadow: none !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      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
+  var _props$theme2;
+  return props !== null && props !== void 0 && (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border-right: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.borderColor;
+  }) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    border-left: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.borderColor;
+  });
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.secundary;
+}, function (props) {
+  return props.theme.colors.borderColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+});
+exports.DropdownButtonWrapper = DropdownButtonWrapper;
+var AddNewButton = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  font-size: 12px;\n  color: ", ";\n  margin: 20px 0;\n  width: fit-content;\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  return props.theme.colors.primary;
+});
+exports.AddNewButton = AddNewButton;
+var AllSetting = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  user-select: none;\n  cursor: pointer;\n  margin-top: 36px;\n  cursor: pointer;\n  span {\n    font-weight: 600;\n    font-size: 14px;\n    color: ", ";\n  }\n  svg {\n    color: ", ";\n    margin-left: 5px;\n    transition: 0.2s linear;\n    ", "\n  }\n  &:hover {\n    svg {\n      transform: translateX(3px);\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n      margin-left: 0px;\n    "])));
+});
+exports.AllSetting = AllSetting;
+var Description = _styledComponents.default.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: 40px;\n  font-size: 14px;\n  margin-bottom: 0px;\n  text-align: justify;\n\n  @media (min-width: 768px) {\n    text-align: initial;\n  }\n"])));
+exports.Description = Description;
+var CategoryExtraContent = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 26px 26px 60px 26px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow: auto;\n\n  ", "\n\n  > button {\n    z-index: 100;\n    position: absolute;\n    top: 25px;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    border-right: 1px solid #E9ECEF;\n  "]))) : (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    border-left: 1px solid #E9ECEF;\n  "])));
+}, function (props) {
+  var _props$theme4;
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      left: 20px;\n    "]))) : (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      right: 20px;\n    "])));
+});
+exports.CategoryExtraContent = CategoryExtraContent;
+var Container = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 0;\n  position: fixed;\n  box-shadow: -4px 0px 7px #ccc;\n\n  ", "\n  background: ", ";\n  height: calc(var(--vh, 1vh) * 100);\n  top: 0px;\n  z-index: 1001;\n  overflow-x: hidden;\n  transition: 0.3s;\n\n  ", "\n  @media print {\n    box-shadow: none;\n  }\n"])), function (_ref) {
+  var isDriverOrders = _ref.isDriverOrders;
+  return isDriverOrders && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    position: absolute;\n    box-shadow: none;\n\n    ", "\n  "])), function (props) {
+    var _props$theme5;
+    return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      border-right: 1px solid #CCC;\n    "]))) : (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      border-left: 1px solid #CCC;\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.backgroundPage) || '#FFF';
+}, function (props) {
+  var _props$theme6;
+  return (_props$theme6 = props.theme) !== null && _props$theme6 !== void 0 && _props$theme6.rtl ? (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    left: 0px;\n    "]))) : (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    right: 0px;\n  "])));
+});
+exports.Container = Container;
+var DescriptionHeader = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n"])));
+exports.DescriptionHeader = DescriptionHeader;
+var HeaderIcons = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 25px;\n  right: 20px;\n\n  > button:first-child {\n    ", "\n  }\n"])), function (props) {
+  var _props$theme7;
+  return (_props$theme7 = props.theme) !== null && _props$theme7 !== void 0 && _props$theme7.rtl ? (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n      margin-left: 8px;\n    "]))) : (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n      margin-right: 8px;\n    "])));
+});
+exports.HeaderIcons = HeaderIcons;
+var SettingListConatiner = _styledComponents.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 20px 0;\n  border-bottom: 1px solid #E9ECEF;\n"])));
+exports.SettingListConatiner = SettingListConatiner;
+var Tab = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  user-select: none;\n  padding: 10px 0px;\n  cursor: pointer;\n  color: ", ";\n  font-size: 14px;\n  white-space: nowrap;\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+  var _props$theme$colors2;
+  return (_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.headingColor;
+}, function (props) {
+  var _props$theme8;
+  return (_props$theme8 = props.theme) !== null && _props$theme8 !== void 0 && _props$theme8.rtl ? (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    margin-left: 30px;\n  "]))) : (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    margin-right: 30px;\n  "])));
+}, function (_ref2) {
+  var active = _ref2.active;
+  return active && (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n    border-bottom: 2px solid;\n    font-weight: 500;\n  "])));
+}, function (_ref3) {
+  var active = _ref3.active;
+  return !active && (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n    color: #909BA9;\n  "])));
+});
+exports.Tab = Tab;
+var Paragraph = _styledComponents.default.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  margin-top: 20px;\n  h2{\n    font-size: 16px;\n  }\n  p{\n    white-space: pre-line;\n    font-size: 12px;\n    margin: 0;\n  }\n  span {\n    font-size: 12px;\n  }\n  a {\n    text-decoration: underline !important;\n    cursor: pointer;\n    font-size: 12px;\n    color: ", " !important;\n  }\n  .bold {\n    font-weight: 600;\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+});
+exports.Paragraph = Paragraph;
+var PurchaseWrapper = _styledComponents.default.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  button {\n    border-radius: 5px;\n  }\n  margin-top: 15px;\n"])));
+exports.PurchaseWrapper = PurchaseWrapper;

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

@@ -251,12 +251,7 @@ var PlaceListingUI = function PlaceListingUI(props) {
     onClick: function onClick() {
       return setShowOption('cities');
     }
-  }, t('CITIES', 'Cities')), /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
-    active: showOption === 'zones',
-    onClick: function onClick() {
-      return setShowOption('zones');
-    }
-  }, t('DROPDOWN_OPTIONS', 'Zones dropdown options'))), showOption === 'countries' && /*#__PURE__*/_react.default.createElement(_CountriesList.CountriesList, {
+  }, t('CITIES', 'Cities'))), showOption === 'countries' && /*#__PURE__*/_react.default.createElement(_CountriesList.CountriesList, {
     actionState: actionState,
     countriesState: countriesState,
     handleUpdateCountry: handleUpdateCountry,

package/_modules/components/Stores/BusinessAdd/BusinessDetails/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BusinessDetails = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _styles = require("./styles");
+var _styles2 = require("../../../../styles");
+var _utils = require("../../../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var BusinessDetails = function BusinessDetails(props) {
+  var _configs$google_maps_, _formState$changes$na, _formState$changes, _formState$changes$ad, _formState$changes2, _configs$country_auto, _formState$changes$zi, _formState$changes3, _configs$google_maps_2, _formState$changes$lo, _formState$changes4, _formState$changes$ce, _formState$changes5;
+  var formState = props.formState,
+    handleChangeAddress = props.handleChangeAddress,
+    handleChangeInput = props.handleChangeInput,
+    handleChangeCenter = props.handleChangeCenter;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var googleMapsApiKey = configs === null || configs === void 0 ? void 0 : (_configs$google_maps_ = configs.google_maps_api_key) === null || _configs$google_maps_ === void 0 ? void 0 : _configs$google_maps_.value;
+  var googleMapsControls = {
+    defaultZoom: 15,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap',
+    // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: false,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    }
+  };
+  var defaultPosition = {
+    lat: 40.77473399999999,
+    lng: -73.9653844
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.BusinessDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('BUSINESS_DETAILS', 'Business details')), /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('BUSINESS_NAME', 'Business Name')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
+    name: "name",
+    placeholder: t('NAME', 'Name'),
+    defaultValue: (_formState$changes$na = formState === null || formState === void 0 ? void 0 : (_formState$changes = formState.changes) === null || _formState$changes === void 0 ? void 0 : _formState$changes.name) !== null && _formState$changes$na !== void 0 ? _formState$changes$na : '',
+    onChange: function onChange(e) {
+      handleChangeInput([{
+        name: 'name',
+        value: e.target.value
+      }, {
+        name: 'slug',
+        value: (0, _utils.stringToSlug)(e.target.value)
+      }], true);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('ADDRESS', 'Address')), /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.GoogleAutocompleteInput, {
+    name: "address",
+    className: "input-autocomplete",
+    apiKey: googleMapsApiKey,
+    placeholder: t('ADDRESS', 'Address'),
+    onChangeAddress: function onChangeAddress(e) {
+      handleChangeAddress(e);
+    },
+    onChange: function onChange(e) {
+      handleChangeInput(e);
+    },
+    defaultValue: (_formState$changes$ad = formState === null || formState === void 0 ? void 0 : (_formState$changes2 = formState.changes) === null || _formState$changes2 === void 0 ? void 0 : _formState$changes2.address) !== null && _formState$changes$ad !== void 0 ? _formState$changes$ad : '',
+    autoComplete: "new-password",
+    countryCode: (configs === null || configs === void 0 ? void 0 : (_configs$country_auto = configs.country_autocomplete) === null || _configs$country_auto === void 0 ? void 0 : _configs$country_auto.value) || '*'
+  })), /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('ZIPCODE', 'Zipcode')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
+    name: "zipcode",
+    placeholder: t('ZIPCODE', 'Zipcode'),
+    defaultValue: (_formState$changes$zi = formState === null || formState === void 0 ? void 0 : (_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : _formState$changes3.zipcode) !== null && _formState$changes$zi !== void 0 ? _formState$changes$zi : '',
+    onChange: handleChangeInput
+  })), /*#__PURE__*/_react.default.createElement(_styles.GoogleMapContainer, null, /*#__PURE__*/_react.default.createElement("label", null, t('GOOGLE_PLACE_ID', 'Google place ID')), /*#__PURE__*/_react.default.createElement("p", null, googleMapsApiKey), /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.GoogleMapsMap, {
+    apiKey: configs === null || configs === void 0 ? void 0 : (_configs$google_maps_2 = configs.google_maps_api_key) === null || _configs$google_maps_2 === void 0 ? void 0 : _configs$google_maps_2.value,
+    location: (_formState$changes$lo = formState === null || formState === void 0 ? void 0 : (_formState$changes4 = formState.changes) === null || _formState$changes4 === void 0 ? void 0 : _formState$changes4.location) !== null && _formState$changes$lo !== void 0 ? _formState$changes$lo : defaultPosition,
+    mapControls: googleMapsControls,
+    handleChangeCenter: handleChangeCenter,
+    isFitCenter: true
+  }))), /*#__PURE__*/_react.default.createElement(_styles.FormControl, {
+    noBottom: true
+  }, /*#__PURE__*/_react.default.createElement("label", null, t('INT_NUMBER', 'Int. number')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
+    name: "cellphone",
+    placeholder: t('INT_NUMBER', 'Int. number'),
+    defaultValue: (_formState$changes$ce = formState === null || formState === void 0 ? void 0 : (_formState$changes5 = formState.changes) === null || _formState$changes5 === void 0 ? void 0 : _formState$changes5.cellphone) !== null && _formState$changes$ce !== void 0 ? _formState$changes$ce : '',
+    onChange: handleChangeInput
+  }))));
+};
+exports.BusinessDetails = BusinessDetails;

package/_modules/components/Stores/BusinessAdd/BusinessDetails/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperMap = exports.GoogleMapContainer = exports.FormGroup = exports.FormControl = exports.ContentWrapper = exports.BusinessDetailsContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _polished = require("polished");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var BusinessDetailsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h2 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin: 0;\n  }\n"])));
+exports.BusinessDetailsContainer = BusinessDetailsContainer;
+var ContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 23px;\n"])));
+exports.ContentWrapper = ContentWrapper;
+var FormControl = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: 23px;\n  label {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-bottom: 12px;\n  }\n  input {\n    width: 100%;\n    height: 44px;\n  }\n  .input-autocomplete {\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: 8px;\n    font-size: 14px;\n    padding: 10px 15px;\n    outline: none;\n    ::placeholder {\n      color: ", ";\n    }\n\n    &:-ms-input-placeholder {\n      color: ", ";\n    }\n\n    &::-ms-input-placeholder { /* Microsoft Edge */\n      color: ", ";\n    }\n    &:focus {\n      border-color: ", ";\n    }\n  }\n\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.backgroundPage) || '#FFF';
+}, function (props) {
+  return props.theme.colors.borderColor;
+}, function (props) {
+  return props.theme.colors.secundaryLight;
+}, function (props) {
+  return props.theme.colors.secundaryLight;
+}, function (props) {
+  return props.theme.colors.secundaryLight;
+}, function () {
+  return (0, _polished.darken)(0.07, '#CCC');
+}, function (_ref) {
+  var noBottom = _ref.noBottom;
+  return noBottom && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-bottom: 0px;\n  "])));
+});
+exports.FormControl = FormControl;
+var GoogleMapContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 23px;\n  label {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-bottom: 12px;\n    margin-bottom: 9px;\n  }\n  p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0;\n    color: ", ";\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.GoogleMapContainer = GoogleMapContainer;
+var WrapperMap = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 150px;\n  margin-top: 30px;\n\n  > div {\n    position: relative !important;\n    width: 100% !important;\n    height: 100% !important;\n    border-radius: 8px;\n  }\n\n  @media (min-width: 768px) {\n    height: 200px;\n  }\n"])));
+exports.WrapperMap = WrapperMap;
+var FormGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  > div {\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    flex-direction: row;\n    > div {\n      width: 48%;\n    }\n  }\n"])));
+exports.FormGroup = FormGroup;