ordering-ui-admin-external 1.13.3 → 1.14.0

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

@@ -0,0 +1,85 @@
+"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.BusinessSalesGoogle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _styles = require("../../../styles");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _styledComponents = require("styled-components");
+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); }
+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 _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 BusinessSalesGoogle = function BusinessSalesGoogle(props) {
+  var onClose = props.onClose,
+    socialItem = props.socialItem,
+    businessSlug = props.businessSlug;
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var theme = (0, _styledComponents.useTheme)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var actionSidebar = function actionSidebar(value) {
+    if (!value) {
+      onClose && onClose();
+    }
+    setIsMenuOpen(value);
+    document.getElementById('businessSocial').style.width = value ? width > 1000 ? '500px' : '100%' : '0';
+  };
+  (0, _react.useEffect)(function () {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('businessSocial').style.width = '100%';
+      } else {
+        document.getElementById('businessSocial').style.width = '500px';
+      }
+    }
+  }, [width]);
+  (0, _react.useEffect)(function () {
+    if (!open) return;
+    actionSidebar(true);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
+    id: "businessSocial"
+  }, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.LeftHeader, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: socialItem.icon,
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("h2", null, socialItem.name)), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    onClick: onClose,
+    color: "black"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null))), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_GOOGLE_DESC', 'Lorem ipsum dolor sit amet consectetur. Vitae odio aliquam adipiscing vitae. Nulla sed integer congue gravida lobortis tristique condimentum fusce tincidunt.')), /*#__PURE__*/_react.default.createElement(_styles2.LinkText, null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://www.google.com/intl/es/business/sign-up",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "https://www.google.com/intl/es/business/sign-up")), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 1"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_GOOGLE_STEP1_DESC', 'On Google My Business, access your Locations page.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.googleStep1,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 2"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_GOOGLE_STEP2_DESC', 'Then click on info section on the sidebar inside your location.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.googleStep2,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 3"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_GOOGLE_STEP3_DESC', 'Scroll down and find Order ahead links and Menu link fields. Paste the link below.')), /*#__PURE__*/_react.default.createElement(_styles2.CopyInputWrapper, {
+    isBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    defaultValue: "https://yourbusinessname.com/store/storename",
+    disabled: true
+  })), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.googleStep3,
+    alt: ""
+  })));
+};
+exports.BusinessSalesGoogle = BusinessSalesGoogle;

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

@@ -0,0 +1,44 @@
+"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.Step = exports.LinkText = exports.LeftHeader = exports.Header = exports.CopyInputWrapper = exports.Container = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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); }
+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 Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  overflow: auto;\n  transition: 0.3s;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  > p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    color: ", ";\n    margin-bottom: 15px;\n    margin-top: 0;\n  }\n\n  @media (min-width: 1000px) {\n    width: 0;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-right: 1px solid ", ";\n    "])), function (props) {
+    return props.theme.colors.borderColor;
+  }) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-left: 1px solid ", ";\n    "])), function (props) {
+    return props.theme.colors.borderColor;
+  });
+});
+exports.Container = Container;
+var LinkText = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: 23px;\n  a {\n    color: ", ";\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+});
+exports.LinkText = LinkText;
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 25px;\n"])));
+exports.Header = Header;
+var LeftHeader = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  img {\n    width: 32px;\n    height: 32px;\n    object-fit: cover;\n    margin-right: 18px;\n    ", "\n  }\n\n  h2 {\n    font-weight: 700;\n    font-size: 20px;\n    line-height: 30px;\n    margin: 0;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 18px;\n      margin-right: 0;\n    "])));
+});
+exports.LeftHeader = LeftHeader;
+var Step = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-bottom: 27px;\n  h3 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 12px;\n  }\n  p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 20px;\n    color: ", ";\n  }\n  img {\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    img {\n      display: block;\n      width: 90%;\n      margin-left: auto;\n      margin-right: auto;\n      margin-bottom: 24px;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.Step = Step;
+var CopyInputWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  input {\n    flex: 1;\n    height: 44px;\n  }\n  button {\n    margin-left: 15px;\n    ", "\n  }\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 15px;\n    "])));
+}, function (_ref) {
+  var isBottom = _ref.isBottom;
+  return isBottom && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    margin-bottom: 24px;\n  "])));
+});
+exports.CopyInputWrapper = CopyInputWrapper;

package/_modules/components/Stores/BusinessSalesInstagram/AdvancedInstagram.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdvancedInstagram = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _styledComponents = require("styled-components");
+var _styles = require("../../../styles");
+var _styles2 = require("./styles");
+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 AdvancedInstagram = function AdvancedInstagram(props) {
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var theme = (0, _styledComponents.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_styles2.InstagramAdvancedContainer, null, /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_INSTAGRAM_ADVANCED_DESC', 'This setting is if your Instagram account has 10K followers or you are already an Instagram partner.')), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 1"), /*#__PURE__*/_react.default.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('BUSINESS_INSTAGRAM_GENERAL_STEP2_DESC', 'Open your Instagram profile and tap on <strong>Edit Profile.</strong>')
+    }
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramGeneralStep2,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 2"), /*#__PURE__*/_react.default.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('BUSINESS_INSTAGRAM_ADVANCED_STEP3_DESC', 'Click on <strong>Action buttons</strong> and then select the button you need.')
+    }
+  }), /*#__PURE__*/_react.default.createElement(_styles2.ImageWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramAdvancedStep31,
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramAdvancedStep32,
+    alt: ""
+  }))), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 3"), /*#__PURE__*/_react.default.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('BUSINESS_INSTAGRAM_ADVANCED_STEP4_DESC', 'Now, select <strong>Your business</strong>, and paste the following link. Then, tap on <strong>Done</strong>')
+    }
+  }), /*#__PURE__*/_react.default.createElement(_styles2.CopyInputWrapper, {
+    isBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    defaultValue: "https://yourbusinessname.com/store/storename",
+    disabled: true
+  })), /*#__PURE__*/_react.default.createElement(_styles2.ImageWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramAdvancedStep41,
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramAdvancedStep42,
+    alt: ""
+  }))));
+};
+exports.AdvancedInstagram = AdvancedInstagram;

package/_modules/components/Stores/BusinessSalesInstagram/GeneralInstagram.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeneralInstagram = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _styledComponents = require("styled-components");
+var _styles = require("../../../styles");
+var _styles2 = require("./styles");
+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 GeneralInstagram = function GeneralInstagram(_ref) {
+  var businessSlug = _ref.businessSlug;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var theme = (0, _styledComponents.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_styles2.InstagramGeneralContainer, null, /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_INSTAGRAM_GENERAL_DESC', 'Lorem ipsum dolor sit amet consectetur. Vitae odio aliquam adipiscing vitae. Nulla sed integer congue gravida lobortis tristique condimentum fusce tincidunt.')), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 1"), /*#__PURE__*/_react.default.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('BUSINESS_INSTAGRAM_GENERAL_STEP2_DESC', 'Open your Instagram profile and tap on <strong>Edit Profile.<strong>')
+    }
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramGeneralStep2,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 2"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_INSTAGRAM_GENERAL_STEP3_DESC', 'On the Edit Profile screen, click on the Links option.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramGeneralStep3,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 3"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_INSTAGRAM_GENERAL_STEP4_DESC', 'Add your business link, or if you already have a link, you can edit it; click on that option.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramGeneralStep4,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 4"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_INSTAGRAM_GENERAL_STEP5_DESC', 'Just add this link to the website field:')), /*#__PURE__*/_react.default.createElement(_styles2.CopyInputWrapper, {
+    isBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    defaultValue: "https://yourbusinessname.com/store/storename",
+    disabled: true
+  })), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramGeneralStep5,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 5"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_INSTAGRAM_GENERAL_STEP6_DESC', 'Done; it will appear this way on your Instagram account.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.instagramGeneralStep6,
+    alt: ""
+  })));
+};
+exports.GeneralInstagram = GeneralInstagram;

package/_modules/components/{Loyalty/PointsWallet → Stores/BusinessSalesInstagram}/index.js

@@ -4,69 +4,87 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PointsWallet = void 0;
+exports.BusinessSalesInstagram = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
-var _PointsWalletBusinessDetail = require("../PointsWalletBusinessDetail");
-var _PointsWalletBusinessList = require("../PointsWalletBusinessList");
-var _styles = require("./styles");
+var _styles = require("../../../styles");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _GeneralInstagram = require("./GeneralInstagram");
+var _AdvancedInstagram = require("./AdvancedInstagram");
+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); }
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _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 PointsWallet = function PointsWallet(props) {
-  var handleParentSidebarMove = props.handleParentSidebarMove,
-    pointWallet = props.pointWallet,
-    handleUpdatePointsWallet = props.handleUpdatePointsWallet;
+var BusinessSalesInstagram = function BusinessSalesInstagram(props) {
+  var onClose = props.onClose,
+    socialItem = props.socialItem,
+    businessSlug = props.businessSlug;
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  var _useState = (0, _react.useState)('general'),
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedOption = _useState2[0],
-    setSelectedOption = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)('general'),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectedBusinessList = _useState4[0],
-    setSelectedBusinessList = _useState4[1];
-  var walletOptionList = [{
+    selectedTab = _useState4[0],
+    setSelectedTab = _useState4[1];
+  var tabList = [{
     key: 'general',
-    name: t('GENERAL', 'General')
+    title: t('GENERAL', 'General')
   }, {
-    key: 'business',
-    name: t('BUSINESSES', 'Businesses')
+    key: 'advanced',
+    title: t('ADVANCED', 'Advanced')
   }];
+  var actionSidebar = function actionSidebar(value) {
+    if (!value) {
+      onClose && onClose();
+    }
+    setIsMenuOpen(value);
+    document.getElementById('businessSocial').style.width = value ? width > 1000 ? '500px' : '100%' : '0';
+  };
   (0, _react.useEffect)(function () {
-    if (selectedOption !== 'business') handleParentSidebarMove(0);
-  }, [selectedOption]);
-  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('POINTS_WALLET', 'Points wallet')), /*#__PURE__*/_react.default.createElement(_styles.Tabs, null, walletOptionList.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(_styles.Tab, {
-      key: option.key,
-      active: selectedOption === option.key,
-      onClick: function onClick() {
-        return setSelectedOption(option.key);
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('businessSocial').style.width = '100%';
+      } else {
+        document.getElementById('businessSocial').style.width = '500px';
       }
-    }, option.name);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: selectedOption === 'general' ? 'block' : 'none'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_PointsWalletBusinessDetail.PointsWalletBusinessDetail, {
-    walletData: pointWallet,
-    handleUpdatePointsWallet: handleUpdatePointsWallet,
-    selectedBusinessList: selectedBusinessList
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: selectedOption === 'business' ? 'block' : 'none'
     }
-  }, /*#__PURE__*/_react.default.createElement(_PointsWalletBusinessList.PointsWalletBusinessList, _extends({}, props, {
-    setSelectedBusinessList: setSelectedBusinessList,
-    isCloseBusinessDetails: selectedOption !== 'business'
-  }))));
+  }, [width]);
+  (0, _react.useEffect)(function () {
+    if (!open) return;
+    actionSidebar(true);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
+    id: "businessSocial"
+  }, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.LeftHeader, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: socialItem.icon,
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("h2", null, socialItem.name)), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    onClick: onClose,
+    color: "black"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null))), /*#__PURE__*/_react.default.createElement(_styles2.Tabs, null, tabList.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
+      key: item.key,
+      onClick: function onClick() {
+        return setSelectedTab(item.key);
+      },
+      active: selectedTab === item.key
+    }, item.title);
+  })), selectedTab === 'general' && /*#__PURE__*/_react.default.createElement(_GeneralInstagram.GeneralInstagram, {
+    businessSlug: businessSlug
+  }), selectedTab === 'advanced' && /*#__PURE__*/_react.default.createElement(_AdvancedInstagram.AdvancedInstagram, {
+    businessSlug: businessSlug
+  }));
 };
-exports.PointsWallet = PointsWallet;
+exports.BusinessSalesInstagram = BusinessSalesInstagram;

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

@@ -0,0 +1,63 @@
+"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.Tabs = exports.Tab = exports.Step = exports.LeftHeader = exports.InstagramGeneralContainer = exports.InstagramAdvancedContainer = exports.ImageWrapper = exports.Header = exports.CopyInputWrapper = exports.Container = 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;
+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 Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  overflow: auto;\n  transition: 0.3s;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1000px) {\n    width: 0;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-right: 1px solid ", ";\n    "])), function (props) {
+    return props.theme.colors.borderColor;
+  }) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-left: 1px solid ", ";\n    "])), function (props) {
+    return props.theme.colors.borderColor;
+  });
+});
+exports.Container = Container;
+var Header = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 25px;\n"])));
+exports.Header = Header;
+var LeftHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  img {\n    width: 32px;\n    height: 32px;\n    object-fit: cover;\n    margin-right: 18px;\n    ", "\n  }\n\n  h2 {\n    font-weight: 700;\n    font-size: 20px;\n    line-height: 30px;\n    margin: 0;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-left: 18px;\n      margin-right: 0;\n    "])));
+});
+exports.LeftHeader = LeftHeader;
+var Tabs = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 24px;\n  border-bottom: 1px solid ", ";\n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+exports.Tabs = Tabs;
+var Tab = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-bottom: 13px;\n  margin-right: 30px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 21px;\n  color: ", ";\n  cursor: pointer;\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-left: 30px;\n    margin-right: 0;\n  "])));
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-weight: 600;\n    color: ", ";\n    border-bottom: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.headingColor;
+  }, function (props) {
+    return props.theme.colors.headingColor;
+  });
+});
+exports.Tab = Tab;
+var InstagramGeneralContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  > p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    color: ", ";\n    margin-bottom: 23px;\n    margin-top: 0;\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.InstagramGeneralContainer = InstagramGeneralContainer;
+var Step = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-bottom: 27px;\n  h3 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 12px;\n  }\n  p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 20px;\n    color: ", ";\n  }\n  > img {\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    > img {\n      display: block;\n      width: 90%;\n      margin-left: auto;\n      margin-right: auto;\n      margin-bottom: 24px;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.Step = Step;
+var CopyInputWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  input {\n    flex: 1;\n    height: 44px;\n  }\n  button {\n    margin-left: 15px;\n    ", "\n  }\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 15px;\n    "])));
+}, function (_ref2) {
+  var isBottom = _ref2.isBottom;
+  return isBottom && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-bottom: 24px;\n  "])));
+});
+exports.CopyInputWrapper = CopyInputWrapper;
+var InstagramAdvancedContainer = (0, _styledComponents.default)(InstagramGeneralContainer)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([""])));
+exports.InstagramAdvancedContainer = InstagramAdvancedContainer;
+var ImageWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-direction: column;\n  img {\n    width: 100%;\n    margin-bottom: 15px;\n  }\n\n  @media (min-width: 576px) {\n    flex-direction: row;\n    img {\n      width: 48%;\n      margin-bottom: 0px;\n    }\n  }\n"])));
+exports.ImageWrapper = ImageWrapper;

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

@@ -0,0 +1,100 @@
+"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.BusinessSalesTiktok = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _styles = require("../../../styles");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _styledComponents = require("styled-components");
+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); }
+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 _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 BusinessSalesTiktok = function BusinessSalesTiktok(props) {
+  var onClose = props.onClose,
+    socialItem = props.socialItem;
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var theme = (0, _styledComponents.useTheme)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var actionSidebar = function actionSidebar(value) {
+    if (!value) {
+      onClose && onClose();
+    }
+    setIsMenuOpen(value);
+    document.getElementById('businessSocial').style.width = value ? width > 1000 ? '500px' : '100%' : '0';
+  };
+  (0, _react.useEffect)(function () {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('businessSocial').style.width = '100%';
+      } else {
+        document.getElementById('businessSocial').style.width = '500px';
+      }
+    }
+  }, [width]);
+  (0, _react.useEffect)(function () {
+    if (!open) return;
+    actionSidebar(true);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
+    id: "businessSocial"
+  }, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.LeftHeader, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: socialItem.icon,
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("h2", null, socialItem.name)), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    onClick: onClose,
+    color: "black"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null))), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_DESC', 'On TikTok, we must create a catalog; for this, we will click on the button: Add Catalog. A pop-up will appear that we will fill in with the information you request.')), /*#__PURE__*/_react.default.createElement(_styles2.LinkText, null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://ads.tiktok.com/i18n/home",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "https://ads.tiktok.com/i18n/home")), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 1"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP1_DESC', 'Please put the name of the Catalog that we are creating.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep1,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 2"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP2_DESC', 'Then click on the Business Center account. If you already have one created, select the one you need; if not, click Create.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep2,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 3"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP3_DESC', 'Write the name of your Business Center, select the Time Zone, and click the Create button.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep3,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 4"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP4_DESC', 'Then click again on the Business Center field, and the one you just created will appear, select it.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep4,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 5"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP5_DESC', 'Click on the Industry field and select the option that appears, in this case, E-commerce.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep5,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 6"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP6_DESC', 'Select the Default location and Default Currency according to your need, and click the Create button.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep6,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 7"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP7_DESC', 'TikTok will show you a brief tour of your Dashboard so you can get to know it.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep7,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 8"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP8_DESC', 'After watching the tutorial, TikTok will enable your Dashboard to start uploading the things you need, and the first thing you\'ll do is add products. Just click on the Products option in the Sidebar and click on the Add Products button.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep8,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 9"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP9_DESC', 'Select the option you like the most to upload your products; when you choose it, click Next.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep9,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_styles2.Step, null, /*#__PURE__*/_react.default.createElement("h3", null, t('STEP', 'Step'), " 10"), /*#__PURE__*/_react.default.createElement("p", null, t('BUSINESS_TIKTOK_STEP10_DESC', 'Fill in the requested fields; click on the Import button when ready.')), /*#__PURE__*/_react.default.createElement("img", {
+    src: theme.images.salesChannels.tiktokStep10,
+    alt: ""
+  })));
+};
+exports.BusinessSalesTiktok = BusinessSalesTiktok;

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

@@ -0,0 +1,37 @@
+"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.Step = exports.LinkText = exports.LeftHeader = exports.Header = exports.Container = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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 Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  overflow: auto;\n  transition: 0.3s;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  > p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    color: ", ";\n    margin-bottom: 15px;\n    margin-top: 0;\n  }\n\n  @media (min-width: 1000px) {\n    width: 0;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-right: 1px solid ", ";\n    "])), function (props) {
+    return props.theme.colors.borderColor;
+  }) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-left: 1px solid ", ";\n    "])), function (props) {
+    return props.theme.colors.borderColor;
+  });
+});
+exports.Container = Container;
+var LinkText = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: 23px;\n  a {\n    color: ", ";\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+});
+exports.LinkText = LinkText;
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 25px;\n"])));
+exports.Header = Header;
+var LeftHeader = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  img {\n    width: 32px;\n    height: 32px;\n    object-fit: cover;\n    margin-right: 18px;\n    ", "\n  }\n\n  h2 {\n    font-weight: 700;\n    font-size: 20px;\n    line-height: 30px;\n    margin: 0;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 18px;\n      margin-right: 0;\n    "])));
+});
+exports.LeftHeader = LeftHeader;
+var Step = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-bottom: 27px;\n  h3 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 12px;\n  }\n  p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 20px;\n    color: ", ";\n  }\n  img {\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    img {\n      display: block;\n      width: 90%;\n      margin-left: auto;\n      margin-right: auto;\n      margin-bottom: 24px;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.Step = Step;