ordering-ui-admin-external 1.21.1 → 1.22.0

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;
+`

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
  */