ordering-ui-admin-external 1.21.2 → 1.22.1

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

@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+import { useTheme } from 'styled-components'
+import { useLanguage, BusinessQRCodeOptions as BusinessQRCodeOptionsController } from 'ordering-components-admin-external'
+import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
+import { Modal } from '../../Shared'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { BusinessQRCodeOption } from '../BusinessQRCodeOption'
+
+import {
+  MainContainer,
+  PublishingContainer,
+  PublishingListWrapper,
+  PublishingOptionContainer,
+  PublishingOption,
+  PublishingName
+} from './styles'
+
+const BusinessQRCodeOptionsUI = (props) => {
+  const {
+    setIsExtendExtraOpen,
+    siteState
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const { width } = useWindowSize()
+  const [isOpen, setIsOpen] = useState(false)
+  const [itemSelected, setItemSelected] = useState(null)
+
+  const publishingItems = [
+    {
+      key: 'pick_up',
+      value: 2,
+      title: t('QR_CODE_FOR_PICKUP', 'QR Code for Pickup')
+    },
+    {
+      key: 'eat_in',
+      value: 3,
+      title: t('QR_CODE_FOR_EATIN', 'QR Code for Eat in')
+    },
+    {
+      key: 'curbside',
+      value: 4,
+      title: t('QR_CODE_FOR_CURBSIDE', 'QR Code for Curbside')
+    },
+    {
+      key: 'driver_thru',
+      value: 5,
+      title: t('QR_CODE_FOR_DRIVE_THRU', 'QR Code for Drive Thru')
+    }
+  ]
+
+  const handleAction = (value, item = null) => {
+    setItemSelected(item)
+    setIsExtendExtraOpen(value)
+    setIsOpen(value)
+  }
+
+  return (
+    <MainContainer>
+      <PublishingContainer>
+        <h1>{t('PUBLISHING', 'Publishing')}</h1>
+
+        <PublishingListWrapper>
+          {publishingItems.map((item, i) => (
+            <PublishingOptionContainer key={i} onClick={() => handleAction(true, item)} active={item.key === itemSelected?.key}>
+              <PublishingOption>
+                <PublishingName>{item?.title}</PublishingName>
+              </PublishingOption>
+              <BsChevronRight style={{ color: theme.colors.lightGray }} />
+            </PublishingOptionContainer>
+          ))}
+        </PublishingListWrapper>
+      </PublishingContainer>
+
+      {width >= 1000 ? (
+        isOpen && (
+          <BusinessQRCodeOption
+            business={props.business}
+            open={isOpen}
+            item={itemSelected}
+            onClose={() => handleAction(false)}
+          />
+        )
+      ) : (
+        isOpen && (
+          <Modal
+            width='80%'
+            open={isOpen}
+            onClose={() => handleAction(false)}
+          >
+            <BusinessQRCodeOption
+              business={props.business}
+              siteState={siteState}
+              open={isOpen}
+              item={itemSelected}
+              onClose={() => handleAction(false)}
+            />
+          </Modal>
+        )
+      )}
+    </MainContainer>
+  )
+}
+
+export const BusinessQRCodeOptions = (props) => {
+  const businessQRcodeOptionsProps = {
+    ...props,
+    UIComponent: BusinessQRCodeOptionsUI
+  }
+  return <BusinessQRCodeOptionsController {...businessQRcodeOptionsProps} />
+}

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

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components'
+
+export const MainContainer = styled.div`
+  display: flex;
+  height: 100%;
+`
+
+export const PublishingContainer = styled.div`
+  height: 100%;
+  overflow-x: hidden;
+  flex: 1;
+  h1 {
+    color: ${props => props.theme.colors.headingColor};
+    font-size: 20px;
+    font-weight: 700;
+  }
+  @media (min-width: 576px) {
+    padding: 20px;
+  }
+`
+
+export const PublishingListWrapper = styled.div`
+  border-top: 1px solid ${props => props.theme.colors.borderColor};
+  margin: 20px 0;
+`
+
+export const PublishingOptionContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  padding: 12px 18px;
+  ${({ active }) => active && css`
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+    background-color: ${props => props.theme.colors.backgroundInfo};
+  `}
+`
+
+export const PublishingOption = styled.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  cursor: pointer;
+  color: ${props => props.theme.colors.headingColor};
+  
+  > svg {
+    font-size: 20px;
+    &.fill {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+`
+
+export const PublishingName = styled.span`
+  color: ${props => props.theme.colors.headingColor};
+  font-size: 14px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`

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

@@ -59,7 +59,7 @@ export const BusinessSummary = (props) => {
     window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
   }
 
-  const itemsExcluded = !!spoonityConfig ? ['publishing'] : ['publishing', 'spoonity_key']
+  const itemsExcluded = !!spoonityConfig ? ['publishing', 'personalization'] : ['publishing', 'spoonity_key', 'personalization']
 
   const businessConfigs = [
     {

package/src/components/Stores/index.js

@@ -33,6 +33,8 @@ import { BusinessTypes } from './BusinessTypes'
 import { BusinessVideos } from './BusinessVideos'
 import { BusinessWebhooks } from './BusinessWebhooks'
 import { BusinessWidgets } from './BusinessWidgets'
+import { BusinessQRCodeOption } from './BusinessQRCodeOption'
+import { BusinessQRCodeOptions } from './BusinessQRCodeOptions'
 import { SeoOptions } from './SeoOptions'
 import { AddBusinessForm } from './AddBusinessForm'
 import { WizardBusiness } from './WizardBusiness'
@@ -143,6 +145,8 @@ export {
   BusinessVideos,
   BusinessWebhooks,
   BusinessWidgets,
+  BusinessQRCodeOption,
+  BusinessQRCodeOptions,
   SeoOptions,
   AddBusinessForm,
   WizardBusiness,

package/src/utils/index.js

@@ -261,6 +261,22 @@ export const checkPreSiteUrl = (url, fallback) => {
   return url[0] === '/' ? url : `/${url}`
 }
 
+/**
+ * Function to validate URL
+ * @param {string} url URL of page
+ */
+export const checkValidUrlFormat = (url) => {
+  if (!url) return
+  const 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
  */