ordering-ui-admin-external 1.21.2 → 1.22.0

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

@@ -0,0 +1,48 @@
+"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.PublishingOptionContainer = exports.PublishingOption = exports.PublishingName = exports.PublishingListWrapper = exports.PublishingContainer = exports.MainContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+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 MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+exports.MainContainer = MainContainer;
+var PublishingContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-x: hidden;\n  flex: 1;\n  h1 {\n    color: ", ";\n    font-size: 20px;\n    font-weight: 700;\n  }\n  @media (min-width: 576px) {\n    padding: 20px;\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+});
+exports.PublishingContainer = PublishingContainer;
+var PublishingListWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin: 20px 0;\n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+exports.PublishingListWrapper = PublishingListWrapper;
+var PublishingOptionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding: 12px 18px;\n  ", "\n"])), function (props) {
+  return props.theme.colors.borderColor;
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    border-top: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n    background-color: ", ";\n  "])), function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.backgroundInfo;
+  });
+});
+exports.PublishingOptionContainer = PublishingOptionContainer;
+var PublishingOption = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  cursor: pointer;\n  color: ", ";\n  \n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.primary;
+});
+exports.PublishingOption = PublishingOption;
+var PublishingName = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  ", "\n"])), function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "])));
+});
+exports.PublishingName = PublishingName;

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

@@ -91,7 +91,7 @@ var BusinessSummary = function BusinessSummary(props) {
     var _businessState$busine2;
     window.open("https://".concat(ordering.project, ".tryordering.com/store/").concat(businessState === null || businessState === void 0 ? void 0 : (_businessState$busine2 = businessState.business) === null || _businessState$busine2 === void 0 ? void 0 : _businessState$busine2.slug), '_blank');
   };
-  var itemsExcluded = !!spoonityConfig ? ['publishing'] : ['publishing', 'spoonity_key'];
+  var itemsExcluded = !!spoonityConfig ? ['publishing', 'personalization'] : ['publishing', 'spoonity_key', 'personalization'];
   var businessConfigs = [{
     key: 'store_details',
     value: t('STORE_DETAILS', 'Store details')

package/_modules/components/Stores/index.js

@@ -273,6 +273,18 @@ Object.defineProperty(exports, "BusinessPublishing", {
     return _BusinessPublishing.BusinessPublishing;
   }
 });
+Object.defineProperty(exports, "BusinessQRCodeOption", {
+  enumerable: true,
+  get: function get() {
+    return _BusinessQRCodeOption.BusinessQRCodeOption;
+  }
+});
+Object.defineProperty(exports, "BusinessQRCodeOptions", {
+  enumerable: true,
+  get: function get() {
+    return _BusinessQRCodeOptions.BusinessQRCodeOptions;
+  }
+});
 Object.defineProperty(exports, "BusinessSalesChannel", {
   enumerable: true,
   get: function get() {
@@ -686,6 +698,8 @@ var _BusinessTypes = require("./BusinessTypes");
 var _BusinessVideos = require("./BusinessVideos");
 var _BusinessWebhooks = require("./BusinessWebhooks");
 var _BusinessWidgets = require("./BusinessWidgets");
+var _BusinessQRCodeOption = require("./BusinessQRCodeOption");
+var _BusinessQRCodeOptions = require("./BusinessQRCodeOptions");
 var _SeoOptions = require("./SeoOptions");
 var _AddBusinessForm = require("./AddBusinessForm");
 var _WizardBusiness = require("./WizardBusiness");

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getMinutes = exports.getIconCard = exports.getHours = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.DriverTipsOptions = void 0;
+exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getMinutes = exports.getIconCard = exports.getHours = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.DriverTipsOptions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FaCcMastercard = _interopRequireDefault(require("@meronex/icons/fa/FaCcMastercard"));
 var _FaCcVisa = _interopRequireDefault(require("@meronex/icons/fa/FaCcVisa"));
@@ -358,9 +358,31 @@ var checkPreSiteUrl = function checkPreSiteUrl(url, fallback) {
 };
 
 /**
- * default value for bitton
+ * Function to validate URL
+ * @param {string} url URL of page
  */
 exports.checkPreSiteUrl = checkPreSiteUrl;
+var checkValidUrlFormat = function checkValidUrlFormat(url) {
+  if (!url) return;
+  var pattern = new RegExp('^(https?:\\/\\/)?' +
+  // protocol
+  '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+  // domain name
+  '((\\d{1,3}\\.){3}\\d{1,3}))' +
+  // OR ip (v4) address
+  '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+  // port and path
+  '(\\?[;&a-z\\d%_.~+=-]*)?' +
+  // query string
+  '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+
+  return pattern.test(url);
+};
+
+/**
+ * default value for bitton
+ */
+exports.checkValidUrlFormat = checkValidUrlFormat;
 var ribbonValues = {
   color: '#0083FE',
   text: 'ribbon',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.21.2",
+  "version": "1.22.0",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.21.1",
+    "ordering-components-admin-external": "1.22.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",
@@ -100,6 +100,7 @@
     "react-otp-input": "^2.4.0",
     "react-phone-number-input": "^3.1.23",
     "react-popper": "^2.3.0",
+    "react-qr-code": "^2.0.11",
     "react-summernote": "^2.0.2",
     "react-to-print": "^2.14.6",
     "react-toastify": "^6.1.0",

package/src/components/Delivery/DriversGroupLogs/index.js

@@ -14,7 +14,7 @@ import {
   DataListTable
 } from './styles'
 
-const DriversGroupLogsUI = (props) => {
+export const DriversGroupLogsUI = (props) => {
   const {
     logsList,
     paginationProps,
@@ -71,8 +71,6 @@ const DriversGroupLogsUI = (props) => {
     }
   }, [logsList.logs, paginationProps])
 
-  console.log(logsList)
-
   return (
     <>
       <DriversGroupLogsContainer
@@ -133,7 +131,7 @@ const DriversGroupLogsUI = (props) => {
                       </td>
                       <td>
                         <DataListTable>
-                          {(typeof log?.data === 'object' ? Object.values(log?.data) : log?.data).map((item, i) => (
+                          {log?.data && (typeof log?.data === 'object' ? Object.values(log?.data) : log?.data).map((item, i) => (
                             <tbody key={i}>
                               <tr>
                                 <td>{getAttributeName(item?.attribute)}</td>

package/src/components/Delivery/DriversLogs/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { DriversLogs as DriversLogsController } from 'ordering-components-admin-external'
+
+export const DriversLogs = (props) => {
+  return (
+    <DriversLogsController {...props} />
+  )
+}

package/src/components/Delivery/UserDetails/index.js

@@ -10,6 +10,8 @@ import { Personalization, Modal, Schedule } from '../../Shared'
 import { UserDetailsMenu } from '../UserDetailsMenu'
 import { UserProfileForm } from '../UserProfileForm'
 import { UserMetaFields } from '../../Users'
+import { DriversLogs } from '../DriversLogs'
+import { DriversGroupLogsUI } from '../DriversGroupLogs'
 import { DriverGroupSetting } from '../DriverGroupSetting'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { Switch, Button, IconButton } from '../../../styles'
@@ -195,6 +197,12 @@ export const UserDetailsUI = (props) => {
               </ActionsForm>
             </ScheduleSection>
           )}
+          {currentMenuSelected === 'logs' && (
+            <DriversLogs
+              userId={userState.user?.id}
+              UIComponent={DriversGroupLogsUI}
+            />
+          )}
           {currentMenuSelected === 'orders' && (
             <OrdersManager
               isSelectedOrders

package/src/components/Delivery/UserDetailsMenu/index.js

@@ -19,7 +19,8 @@ export const UserDetailsMenu = (props) => {
     { key: 'profile', content: t('PROFILE', 'Profile') },
     { key: 'driver_group', content: t('DRIVER_GROUP', 'Driver group') },
     { key: 'saved_places', content: t('SAVED_PLACES', 'Saved places') },
-    { key: 'schedule', content: t('SCHEDULE', 'Schedule') }
+    { key: 'schedule', content: t('SCHEDULE', 'Schedule') },
+    { key: 'logs', content: t('LOGS', 'Logs') }
     // { key: 'metafields', content: t('METAFIELDS', 'Metafields') },
     // { key: 'personalization', content: t('PERSONALIZATION', 'Personalization') }
   ] : [

package/src/components/MyProducts/AdvancedSettings/OrderType.js

@@ -28,9 +28,9 @@ export const OrderType = (props) => {
         />
       </FormControl>
       <FormControl>
-        <label>{t('CALL_TO_ACTION', 'Call to action')}</label>
+        <label>{t('EXPORT_CALL_TO_ACTION', 'Call to action')}</label>
         <Input
-          placeholder={t('CALL_TO_ACTION', 'Call to action')}
+          placeholder={t('EXPORT_CALL_TO_ACTION', 'Call to action')}
           defaultValue={typeValues?.call_to_action || ''}
           onChange={(e) => handleUpdateThemeValue(e.target.value, [path, 'call_to_action'].join('.'))}
         />

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -47,7 +47,7 @@ export const AdvancedSettings = (props) => {
     { name: '', type: 'hidden', path: 'business_listing_view.hidden' },
     { name: t('BUSINESS_LISTING_IMAGE', 'Business listing image'), type: 'image', path: 'business_listing_view.components.business_hero.components.image' },
     { name: t('PREVIOUS_ORDERS_BLOCK', 'Previous orders block'), type: 'hidden', path: 'business_listing_view.components.previous_orders_block.hidden' },
-    { name: t('Highest_rated_business_block', 'Highest rated business block'), type: 'hidden', path: 'business_listing_view.components.highest_rated_business_block.hidden' },
+    { name: t('HIGHEST_RATED_BUSINESS_BLOCK', 'Highest rated business block'), type: 'hidden', path: 'business_listing_view.components.highest_rated_business_block.hidden' },
     { name: t('CATEGORIES_BLOCK', 'Categories block'), type: 'hidden', path: 'business_listing_view.components.categories.hidden' },
     { name: t('AMOUNT_OF_BUSINESSES_TO_DISPLAY_PER_ROW', 'Amount of businesses to display per row:'), type: 'position', path: 'business_listing_view.components.layout.rows' },
     { name: t('SEARCH_BOX', 'Search box'), type: 'hidden', path: 'business_listing_view.components.search.hidden' },
@@ -123,39 +123,38 @@ export const AdvancedSettings = (props) => {
 
   const myAccountList = [
     { name: t('USER_IMAGE', 'User image'), type: 'hidden', path: 'profile.components.picture.hidden' },
-    { name: t('BIRTHDAY', 'Birthday'), type: 'hidden', path: 'profile.components.birthday.hidden' },
+    { name: t('EXPORT_BIRTHDAY', 'Birthday'), type: 'hidden', path: 'profile.components.birthday.hidden' },
     { name: t('LANGUAGES', 'Languages'), type: 'hidden', path: 'profile.components.languages.hidden' },
     { name: t('ADDRESS_LIST', 'Address list'), type: 'hidden', path: 'profile.components.address_list.hidden' }
   ]
 
   const activeOrderBlockList = [
-    { name: t('MAP', 'Map'), type: 'hidden', path: 'orders.components.map.hidden' },
     { name: t('BUSINESS_LOGO', 'Business logo'), type: 'hidden', path: 'orders.components.business_logo.hidden' },
-    { name: t('BUSINESS_NAME', 'Business name'), type: 'hidden', path: 'orders.components.business_name.hidden' },
+    { name: t('EXPORT_BUSINESS_NAME', 'Business name'), type: 'hidden', path: 'orders.components.business_name.hidden' },
     { name: t('ORDER_NUMBER', 'Order number'), type: 'hidden', path: 'orders.components.order_number.hidden' },
     { name: t('ORDER_DATE', 'Order date'), type: 'hidden', path: 'orders.components.date.hidden' },
-    { name: t('REVIEW_ORDER_BUTTON', 'Review order button'), type: 'hidden', path: 'orders.components.review_order_button.hidden' },
-    { name: t('REORDER_BUTTON', 'Reorder button'), type: 'hidden', path: 'orders.components.reorder_button.hidden' },
+    { name: t('EXPORT_REVIEW_ORDER_BUTTON', 'Review order button'), type: 'hidden', path: 'orders.components.review_order_button.hidden' },
+    { name: t('EXPORT_REORDER_BUTTON', 'Reorder button'), type: 'hidden', path: 'orders.components.reorder_button.hidden' },
     { name: t('FAVORITE_BUTTON', 'Favorite button'), type: 'hidden', path: 'orders.components.favorite.hidden' },
     { name: t('ORDER_STATUS', 'Order status'), type: 'hidden', path: 'orders.components.order_status.hidden' },
-    { name: t('PREVIOUS_ORDER_BLOCK', 'Previous order block'), type: 'hidden', path: 'orders.components.past_orders.hidden' },
-    { name: t('BUSINESS_TAB', 'Business tab'), type: 'hidden', path: 'orders.components.business_tab.hidden' },
-    { name: t('PRODUCTS_TAB', 'Products tab'), type: 'hidden', path: 'orders.components.products_tab.hidden' }
+    { name: t('EXPORT_PREVIOUS_ORDER_BLOCK', 'Previous order block'), type: 'hidden', path: 'orders.components.past_orders.hidden' },
+    { name: t('EXPORT_BUSINESS_TAB', 'Business tab'), type: 'hidden', path: 'orders.components.business_tab.hidden' },
+    { name: t('EXPORT_PRODUCTS_TAB', 'Products tab'), type: 'hidden', path: 'orders.components.products_tab.hidden' }
   ]
 
   const menuOptionList = [
-    { name: t('BROWSE_AND_SEARCH', 'Browse and search'), type: 'hidden', path: 'bar_menu.components.browse.hidden' },
-    { name: t('WALLET', 'Wallet'), type: 'hidden', path: 'bar_menu.components.wallet.hidden' },
+    { name: t('EXPORT_BROWSE_AND_SEARCH', 'Browse and search'), type: 'hidden', path: 'bar_menu.components.browse.hidden' },
+    { name: t('WALLETS', 'Wallets'), type: 'hidden', path: 'bar_menu.components.wallet.hidden' },
     { name: t('PROMOTIONS', 'Promotions'), type: 'hidden', path: 'bar_menu.components.promotions.hidden' },
     { name: t('MESSAGES', 'Messages'), type: 'hidden', path: 'bar_menu.components.messages.hidden' },
     { name: t('HELP', 'Help'), type: 'hidden', path: 'bar_menu.components.help.hidden' },
-    { name: t('SECURITY', 'Security'), type: 'hidden', path: 'bar_menu.components.sessions.hidden' },
-    { name: t('MY_FAVORITES', 'My favorites'), type: 'hidden', path: 'bar_menu.components.favorites.hidden' }
+    { name: t('EXPORT_SECURITY', 'Security'), type: 'hidden', path: 'bar_menu.components.sessions.hidden' },
+    { name: t('EXPORT_MY_FAVORITES', 'My favorites'), type: 'hidden', path: 'bar_menu.components.favorites.hidden' }
   ]
 
   const thirdPartyCodeList = [
-    { name: t('HEAD', 'Head'), type: 'input', path: 'third_party_code.head' },
-    { name: t('BODY', 'Body'), type: 'input', path: 'third_party_code.body' }
+    { name: t('EXPORT_HEAD', 'Head'), type: 'input', path: 'third_party_code.head' },
+    { name: t('EXPORT_BODY', 'Body'), type: 'input', path: 'third_party_code.body' }
   ]
 
   const buttonList = [

package/src/components/Stores/BusinessDeliveryZoneInformation/index.js

@@ -214,10 +214,11 @@ export const BusinessDeliveryZoneInformation = (props) => {
                 disabled={!isMyZone}
                 placeholder={`1 - 99 ${configState?.configs?.distance_unit?.value}`}
                 name='distance'
-                maxLength={2}
                 value={formState.changes?.data?.distance ?? zone?.data?.distance ?? ''}
                 onInput={(e) => {
-                  e.target.value = e.target.value.match(`^[${e.target.value === '0' ? '1' : '0'}-9]{1,2}$`)
+                  e.target.value = (Number(e.target.value) > 99 || e.target.value === '.' || (e.target.value.match(/\./g) || []).length > 1)
+                    ? e.target.value.slice(0, -1)
+                    : e.target.value.match(`^[${e.target.value === '0' ? '1' : '0'}-9/.]{1,9}$`)
                 }}
                 onChange={e => handleChangeInput(e, configState?.configs?.distance_unit?.value)}
                 ref={register({

package/src/components/Stores/BusinessDetails/index.js

@@ -27,6 +27,7 @@ import {
   BarContainer
 } from './styles'
 import { BusinessSalesChannel } from '../BusinessSalesChannel'
+import { BusinessQRCodeOptions } from '../BusinessQRCodeOptions'
 
 export const BusinessDetailsUI = (props) => {
   const {
@@ -305,6 +306,12 @@ export const BusinessDetailsUI = (props) => {
               setIsExtendExtraOpen={setIsExtendExtraOpen}
             />
           )} */}
+          {selectedItem === 'publishing' && isAdmin && (
+            <BusinessQRCodeOptions
+              business={businessState?.business}
+              setIsExtendExtraOpen={setIsExtendExtraOpen}
+            />
+          )}
           {selectedItem === 'sales_channels' && (
             <BusinessSalesChannel
               business={businessState?.business}

package/src/components/Stores/BusinessQRCodeOption/index.js

@@ -0,0 +1,178 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { Button, Input } from '../../../styles'
+import { X as Close } from 'react-bootstrap-icons'
+import QRCode from 'react-qr-code'
+import ReactToPrint from 'react-to-print'
+import { Alert } from '../../Shared'
+import { checkSiteUrl, checkValidUrlFormat } from '../../../utils'
+import {
+  Container,
+  ButtonGroup,
+  Header,
+  CloseButton,
+  FormControl,
+  QRCodeLayout
+} from './styles'
+
+export const BusinessQRCodeOption = (props) => {
+  const {
+    open,
+    item,
+    business,
+    onClose,
+    siteState
+  } = props
+
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [code, setCode] = useState(null)
+
+  const numberRef = useRef(null)
+  const printerRef = useRef()
+  const siteRef = useRef()
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const generateQRCode = () => {
+    const errors = []
+    if (!(siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended') && !siteRef?.current?.value) {
+      errors.push(t('VALIDATION_ERROR_REQUIRED', 'URL is required').replace('_attribute_', t('URL', 'Url')))
+    }
+    if (siteRef?.current?.value && !checkValidUrlFormat(siteRef?.current?.value)) {
+      errors.push(t('VALIDATION_ERROR_URL', 'The URL format is not valid').replace('_attribute_', 'URL'))
+    }
+    if (item?.key !== 'pick_up' && !numberRef?.current?.value) {
+      errors.push(
+        item?.key === 'eat_in'
+          ? t('VALIDATION_ERROR_REQUIRED', 'Table number is required').replace('_attribute_', t('TABLE_NUMBER', 'Table number'))
+          : t('VALIDATION_ERROR_REQUIRED', 'Spot number is required').replace('_attribute_', t('SPOT_NUMBER', 'Spot number'))
+      )
+    }
+    if (errors.length > 0) {
+      setAlertState({
+        open: true,
+        content: errors
+      })
+      return
+    }
+    const storeUrl = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
+      ? `https://${siteState?.site?.domain}/store/${business?.slug}`
+      : `${checkSiteUrl(siteRef?.current?.value)}store/${business?.slug}`
+    const tsNumber = item?.key !== 'pick_up'
+      ? (item?.key === 'eat_in'
+        ? `&table_numer=${numberRef?.current?.value}`
+        : `&spot_numer=${numberRef?.current?.value}`)
+      : ''
+    const compltedUrl = `${storeUrl}?order_type=${item.value}${tsNumber}`
+    console.log(compltedUrl)
+    setCode(compltedUrl)
+  }
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      onClose && onClose()
+    }
+    setIsMenuOpen(value)
+    document.getElementById('qrOption').style.width = value
+      ? width > 1000 ? '500px' : '100%'
+      : '0'
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('qrOption').style.width = '100%'
+      } else {
+        document.getElementById('qrOption').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  useEffect(() => {
+    setCode(null)
+    if (numberRef?.current) {
+      numberRef.current.value = ''
+    }
+  }, [item])
+
+  return (
+    <Container id='qrOption'>
+      <Header>
+        {item?.title && (<h1>{item?.title}</h1>)}
+        <CloseButton>
+          <Close onClick={() => onClose && onClose()} />
+        </CloseButton>
+      </Header>
+      {code && (
+        <QRCodeLayout ref={printerRef}>
+          <QRCode
+            size={256}
+            style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+            value={code}
+            viewBox='0 0 256 256'
+          />
+        </QRCodeLayout>
+      )}
+      {item?.key === 'pick_up' ? (
+        <p>{t('GENERATE_QR_CODE', 'Generate QR Code')}</p>
+      ) : (
+        <FormControl>
+          <label>{item?.key === 'eat_in' ? t('TABLE_NUMBER', 'Table number') : t('SPOT_NUMBER', 'Spot number')}</label>
+          <Input
+            placeholder='0'
+            ref={numberRef}
+          />
+        </FormControl>
+      )}
+      {!(siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended') && (
+        <FormControl isMargin>
+          <label>{t('ADD_YOUR_SITE_URL', 'Add your site url')}</label>
+          <Input
+            placeholder='https://yourdomain.com'
+            ref={siteRef}
+          />
+        </FormControl>
+      )}
+      <ButtonGroup>
+        <Button color='primary' outline onClick={generateQRCode}>
+          {t('GENERATE_CODE', 'Generate Code')}
+        </Button>
+        <ReactToPrint
+          trigger={() => (
+            <Button
+              color='primary'
+              disabled={!code}
+            >
+              {t('PRINT', 'Print')}
+            </Button>
+          )}
+          content={() => printerRef.current}
+          removeAfterPrint
+        />
+      </ButtonGroup>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}

package/src/components/Stores/BusinessQRCodeOption/styles.js

@@ -0,0 +1,113 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  > button {
+    margin-top: 20px;
+    position: sticky;
+    top: 100%;
+    width: fit-content;
+    height: 42px;
+    margin-bottom: 20px;
+  }
+
+  @media (min-width: 1000px) {
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #E9ECEF;
+    ` : css`
+      border-left: 1px solid #E9ECEF;
+    `}
+  }
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 27px;
+
+  button {
+    height: 44px;
+    border-radius: 8px;
+    width: 100%;
+    margin-bottom: 10px;
+    @media (min-width: 576px) {
+      margin-bottom: 0;
+      width: fit-content;
+      &:first-child {
+        margin-right: 15px;
+        ${props => props.theme.rtl && css`
+          margin-right: 0;
+          margin-left: 15px;
+        `}
+      }
+    }
+  }
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  h1 {
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    font-weight: 600;
+    margin: 0;
+  }
+`
+
+export const CloseButton = styled.div`
+  display: none;
+  @media (min-width: 1000px) {
+    display: flex;
+    align-items: center;
+    > svg {
+      cursor: pointer;
+      font-size: 24px;
+      color: ${props => props.theme.colors.headingColor};
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    }
+  }
+`
+
+export const FormControl = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 6px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
+
+  ${({ isMargin }) => isMargin && css`
+    margin-top: 10px;
+  `}
+`
+
+export const QRCodeLayout = styled.div`
+  margin-bottom: 20px;
+`