ordering-ui-admin-external 1.9.0 → 1.11.0

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useLanguage, useEvent, ProductStep as ProductStepController } from 'ordering-components-admin-external'
 import { ProductStartGuide } from '../ProductStartGuide'
 import { RestaurantSelectGuide } from '../RestaurantSelectGuide'
+import { UploadMenuGuide } from '../UploadMenuGuide'
 import { useTheme } from 'styled-components'
 import { Button } from '../../../styles'
 import {
@@ -10,6 +11,7 @@ import {
   ImageContent,
   ButtonWrapper
 } from './styles'
+import { SelectPosGuide } from '../SelectPosGuide'
 
 const ProductStepUI = (props) => {
   const {
@@ -30,6 +32,7 @@ const ProductStepUI = (props) => {
   const [events] = useEvent()
 
   const [step, setStep] = useState(1)
+  const [option, setOption] = useState('')
 
   const handleCheckMenu = () => {
     events.emit('go_to_page', { page: 'store', params: { store: business?._id } })
@@ -38,8 +41,8 @@ const ProductStepUI = (props) => {
 
   return (
     <Container>
-      {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} countriesState={countriesState} />}
-      {step === 2 && (
+      {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} setOption={setOption} countriesState={countriesState} />}
+      {step === 2 && option === 2 && (
         <RestaurantSelectGuide
           setBusiness={setBusiness}
           setStep={setStep}
@@ -52,7 +55,7 @@ const ProductStepUI = (props) => {
           isLoading={isLoading}
         />
       )}
-      {step === 3 && actionState?.loading && (
+      {step === 3 && option === 2 && actionState?.loading && (
         <ImportMenuContainer>
           <h2>{t('WE_ARE_IMPORTING_YOUR_MENU', 'We are importing your menu.')}</h2>
           <ImageContent>
@@ -60,7 +63,7 @@ const ProductStepUI = (props) => {
           </ImageContent>
         </ImportMenuContainer>
       )}
-      {step === 3 && !actionState?.loading && (
+      {step === 3 && option === 2 && !actionState?.loading && (
         <ImportMenuContainer>
           <h2>{t('YOUR_MENU_HAS_BEEN_IMPORTED', 'Your menu has been imported')}</h2>
           <ImageContent>
@@ -71,6 +74,31 @@ const ProductStepUI = (props) => {
           </ButtonWrapper>
         </ImportMenuContainer>
       )}
+      {step === 2 && option === 3 && (
+        <UploadMenuGuide
+          handleBack={() => setStep(1)}
+          onClose={onClose}
+          handleSuccess={() => setStep(3)}
+        />
+      )}
+      {step === 3 && option === 3 && (
+        <ImportMenuContainer>
+          <h2>{t('ORDERING', 'Ordering')}</h2>
+          <p>{t('WE_ARE_IMPORTING_YOUR_PRODUCTS', 'we are importing your products')}</p>
+        </ImportMenuContainer>
+      )}
+      {step === 2 && option === 4 && (
+        <SelectPosGuide
+          setStep={setStep}
+          handleSuccess={() => setStep(3)}
+        />
+      )}
+      {step === 3 && option === 4 && (
+        <ImportMenuContainer>
+          <h2>{t('ORDERING', 'Ordering')}</h2>
+          <p>{t('WE_WILL_CONTACT_YOU_ASAP', 'we will contact you As soon as possible')}</p>
+        </ImportMenuContainer>
+      )}
     </Container>
   )
 }

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

@@ -10,6 +10,11 @@ export const ImportMenuContainer = styled.div`
     text-align: center;
     margin: 0;
   }
+  p {
+    font-size: 20px;
+    text-align: center;
+    margin: 25px 0;
+  }
 `
 
 export const ButtonWrapper = styled.div`

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

@@ -12,7 +12,7 @@ export const Container = styled.div`
 `
 
 export const SelectWrapper = styled.div`
-  margin-top: 30px;
+  margin-top: 35px;
 
   label {
     font-weight: 400;
@@ -48,7 +48,7 @@ export const SelectWrapper = styled.div`
       }
 
       .list-wrapper {
-        max-height: 200px;
+        max-height: 109px;
         > div {
           padding: 6px 10px;
           &:hover {
@@ -82,6 +82,7 @@ export const Option = styled.div`
 
 export const ButtonWrapper = styled.div`
   margin-top: 60px;
+  margin-bottom: 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -106,6 +107,7 @@ export const ButtonWrapper = styled.div`
 `
 
 export const SearchWrapper = styled.div`
+  margin-top: 30px;
   label {
     font-weight: 400;
     font-size: 14px;

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

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, SelectPOS } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { Button } from '../../../styles'
+import { ArrowRight } from 'react-bootstrap-icons'
+import { Alert } from '../../Shared'
+import { useTheme } from 'styled-components'
+import {
+  Container,
+  SelectPosWrapper,
+  Option,
+  ButtonWrapper,
+  CheckMateAndDeliverectList,
+  PosItem
+} from './styles'
+
+const SelectPosGuideUI = (props) => {
+  const { handleSendMessage, changeFormState, formState } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const [typeOptions, setTypeOptions] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [search, setSearch] = useState('')
+  const [hasOther, setHasOther] = useState(false)
+
+  const typeList = [
+    { value: 'square', content: <Option><img src={theme.images.pos.square} alt='' /><span>{t('SQUARE', 'Square')}</span></Option> },
+    { value: 'toast', content: <Option><img src={theme.images.pos.toast} alt='' /><span>{t('TOAST', 'Toast')}</span></Option> },
+    { value: 'vectron', content: <Option><img src={theme.images.pos.vectron} alt='' /><span>{t('VECTRON', 'Vectron')}</span></Option> },
+    { value: 'clover', content: <Option><img src={theme.images.pos.clover} alt='' /><span>{t('CLOVER', 'Clover')}</span></Option> },
+    { value: 'other', content: <Option><span>{t('OTHER', 'Other')}</span></Option> }
+  ]
+
+  const checkMateAndDeliverectList = [
+    { key: 'par', title: 'PAR Tech - Pixel Point', description: 'POS systems for restaurants', icon: theme.images.pos.par },
+    { key: 'el_cheff', title: 'El Cheff', description: 'POS systems for restaurants', icon: theme.images.pos.elCheff },
+    { key: 'givex', title: 'Givex', description: 'POS systems for restaurants', icon: theme.images.pos.givex },
+    { key: 'ncr_aloha', title: 'NCR Aloha', description: 'POS systems for restaurants', icon: theme.images.pos.ncrAloha },
+    { key: 'national_soft', title: 'National Soft', description: 'POS systems for restaurants', icon: theme.images.pos.nationalSoft },
+    { key: 'posist', title: 'Posist', description: 'POS systems for restaurants', icon: theme.images.pos.posist },
+    { key: 'solution_delivery', title: 'Solutions 4 Delivery', description: 'POS systems for restaurants', icon: theme.images.pos.solutionDelivery },
+    { key: 'xetux', title: 'Telnet', description: 'POS systems for restaurants', icon: theme.images.pos.xetux },
+    { key: 'vista_entertainment', title: 'Vista Entertainment Solutions', description: 'POS systems for restaurants', icon: theme.images.pos.vistaEntertainment },
+    { key: 'soft_restaurant', title: 'SoftRestaurant', description: 'POS systems for restaurants', icon: theme.images.pos.softRestaurant },
+    { key: 'telnet', title: 'Telnet', description: 'POS systems for restaurants', icon: theme.images.pos.telnet },
+    { key: 'rest_pro', title: 'Rest Pro', description: 'POS systems for restaurants', icon: theme.images.pos.restPro },
+    { key: 'infocaja', title: 'Infocaja', description: 'POS systems for restaurants', icon: theme.images.pos.infocaja },
+    { key: 'eposNow', title: 'Epos Now', description: 'POS systems for restaurants', icon: theme.images.pos.eposNow },
+    { key: 'hippos', title: 'Hippos', description: 'POS systems for restaurants', icon: theme.images.pos.hippos },
+    { key: 'light_speed', title: 'Lightspeed', description: 'POS systems for restaurants', icon: theme.images.pos.lightSpeed },
+    { key: 'micros_res_3700', title: 'Micros RES 3700', description: 'POS systems for restaurants', icon: theme.images.pos.microsRes },
+    { key: 'micros_simphony', title: 'Micros Simphony', description: 'POS systems for restaurants', icon: theme.images.pos.microsSimphony },
+    { key: 'prologic_first', title: 'Prologic First', description: 'POS systems for restaurants', icon: theme.images.pos.prologicFirst },
+    { key: 'touch_bistro', title: 'TouchBistro', description: 'POS systems for restaurants', icon: theme.images.pos.touchBistro },
+    { key: 'revel', title: 'Revel', description: 'POS systems for restaurants', icon: theme.images.pos.revel },
+    { key: 'spot_on', title: 'SpotOn', description: 'POS systems for restaurants', icon: theme.images.pos.spotOn },
+    { key: 'heart_land', title: 'Heartland', description: 'POS systems for restaurants', icon: theme.images.pos.heartLand },
+    { key: 'focus', title: 'Focus', description: 'POS systems for restaurants', icon: theme.images.pos.focus },
+    { key: 'speed_line', title: 'SpeedLine', description: 'POS systems for restaurants', icon: theme.images.pos.speedLine },
+    { key: 'maitre', title: 'Maitre’D', description: 'POS systems for restaurants', icon: theme.images.pos.maitre },
+    { key: 'ncr_silver', title: 'NCR Silver', description: 'POS systems for restaurants', icon: theme.images.pos.ncrSilver },
+    { key: 'qu_beyond_pos', title: 'QU Beyond POS', description: 'POS systems for restaurants', icon: theme.images.pos.quBeyondPos },
+    { key: 'upserve', title: 'Upserve', description: 'POS systems for restaurants', icon: theme.images.pos.upserve },
+    { key: 'diner_ware', title: 'DinerWare', description: 'POS systems for restaurants', icon: theme.images.pos.dinerWare },
+    { key: 'digital_dining', title: 'Digital Dining', description: 'POS systems for restaurants', icon: theme.images.pos.digitalDining },
+    { key: 'food_tec', title: 'FoodTec', description: 'POS systems for restaurants', icon: theme.images.pos.foodTec },
+    { key: 'salido', title: 'Salido', description: 'POS systems for restaurants', icon: theme.images.pos.salido },
+    { key: 'cake', title: 'Cake', description: 'POS systems for restaurants', icon: theme.images.pos.cake },
+    { key: 'hunger_rush', title: 'HungerRush', description: 'POS systems for restaurants', icon: theme.images.pos.hungerRush },
+    { key: 'pixel_point', title: 'PixelPoint', description: 'POS systems for restaurants', icon: theme.images.pos.pixelPoint },
+    { key: 'auphan', title: 'Auphan', description: 'POS systems for restaurants', icon: theme.images.pos.auphan },
+    { key: 'linga', title: 'Linga', description: 'POS systems for restaurants', icon: theme.images.pos.linga },
+    { key: 'one_pos', title: 'OnePOS', description: 'POS systems for restaurants', icon: theme.images.pos.onePos },
+    { key: 'edge_serv', title: 'EdgeServ', description: 'POS systems for restaurants', icon: theme.images.pos.edgeServ },
+    { key: 'talech', title: 'Talech', description: 'POS systems for restaurants', icon: theme.images.pos.talech },
+    { key: 'rezku', title: 'Rezku', description: 'POS systems for restaurants', icon: theme.images.pos.rezku },
+    { key: 'north_star', title: 'NorthStar', description: 'POS systems for restaurants', icon: theme.images.pos.northStar },
+    { key: 'order_counter', title: 'Order Counter', description: 'POS systems for restaurants', icon: theme.images.pos.orderCounter },
+    { key: 'foodics', title: 'Foodics', description: 'POS systems for restaurants', icon: theme.images.pos.foodics },
+    { key: 'i_tab_pos', title: 'iTabPOS', description: 'POS systems for restaurants', icon: theme.images.pos.iTabPos },
+    { key: 'pos_ist', title: 'POSist', description: 'POS systems for restaurants', icon: theme.images.pos.posIst },
+    { key: 'sunami_pos', title: 'Sunami POS', description: 'POS systems for restaurants', icon: theme.images.pos.sunamiPos },
+    { key: 'union', title: 'Union', description: 'POS systems for restaurants', icon: theme.images.pos.union },
+    { key: 'snappy', title: 'Snappy', description: 'POS systems for restaurants', icon: theme.images.pos.snappy },
+    { key: 'four_soft', title: '4Soft', description: 'POS systems for restaurants', icon: theme.images.pos.fourSoft },
+    { key: 'super_menu', title: 'Supermenu', description: 'POS systems for restaurants', icon: theme.images.pos.superMenu },
+    { key: 'emagine_pos', title: 'EmaginePOS', description: 'POS systems for restaurants', icon: theme.images.pos.emaginePos },
+    { key: 'paradise_pos', title: 'ParadisePOS', description: 'POS systems for restaurants', icon: theme.images.pos.paradisePos },
+    { key: 'xenial', title: 'Xenial', description: 'POS systems for restaurants', icon: theme.images.pos.xenial },
+    { key: 'tids', title: 'Tid3', description: 'POS systems for restaurants', icon: theme.images.pos.tidThree },
+    { key: 'ovvi', title: 'Ovvi', description: 'POS systems for restaurants', icon: theme.images.pos.ovvi },
+    { key: 'brink_certified', title: 'Brink Certified', description: 'POS systems for restaurants', icon: theme.images.pos.brinkCertified },
+    { key: 'rbbt_tech', title: 'Rbbt.Tech', description: 'POS systems for restaurants', icon: theme.images.pos.rbbtTech }
+  ]
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleContinue = () => {
+    if (!formState?.changes?.pos || (formState?.changes?.pos === 'other' && hasOther)) {
+      setAlertState({
+        open: true,
+        content: t('POS_REQUIRED', 'POS is required')
+      })
+      return
+    }
+    if (formState?.changes?.pos === 'other') {
+      setHasOther(true)
+      return
+    }
+    handleSendMessage()
+  }
+
+  useEffect(() => {
+    const options = typeList.filter(option => option?.value.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+    setTypeOptions(options)
+  }, [search])
+
+  useEffect(() => {
+    if (!formState?.loading && formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState?.error
+      })
+    }
+  }, [formState?.error])
+
+  return (
+    <>
+      <Container>
+        {!hasOther ? (
+          <>
+            <h2>{t('SELECT_YOUR_POS', 'Select your POS')}</h2>
+            <SelectPosWrapper>
+              <Select
+                options={typeOptions}
+                className='select'
+                defaultValue={formState?.changes?.pos || ''}
+                placeholder={t('SELECT_YOUR_POS', 'Select your POS')}
+                onChange={(value) => changeFormState({ pos: value })}
+                isShowSearchBar
+                searchBarIsCustomLayout
+                searchBarIsNotLazyLoad
+                searchValue={search}
+                handleChangeSearch={(val) => setSearch(val)}
+              />
+            </SelectPosWrapper>
+          </>
+        ) : (
+          <>
+            <h2 className='other'>{t('OTHER', 'Other')}</h2>
+            <CheckMateAndDeliverectList>
+              {checkMateAndDeliverectList.map((item, idx) => (
+                <PosItem
+                  key={idx}
+                  active={formState?.changes?.pos === item.key}
+                  onClick={() => changeFormState({ pos: item.key })}
+                >
+                  <img src={item.icon} alt='' />
+                  <div>
+                    <h3>{item.title}</h3>
+                    <p>{item.description}</p>
+                  </div>
+                </PosItem>
+              ))}
+            </CheckMateAndDeliverectList>
+          </>
+        )}
+        <ButtonWrapper hasOther={hasOther}>
+          <Button color='primary' onClick={handleContinue}>
+            {hasOther ? t('SEND_REQUEST', 'Send Request') : t('CONTINUE', 'Continue')}
+            {!hasOther && <ArrowRight />}
+          </Button>
+        </ButtonWrapper>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const SelectPosGuide = (props) => {
+  const selectPosGuideProps = {
+    ...props,
+    UIComponent: SelectPosGuideUI
+  }
+  return <SelectPOS {...selectPosGuideProps} />
+}

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

@@ -0,0 +1,146 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 35px;
+    &.other {
+      text-align: left;
+    }
+  }
+`
+
+export const SelectPosWrapper = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+
+  > div {
+    width: 100%;
+    border: none;
+
+    > div:first-child {
+      background-color: ${props => props.theme.colors.secundary};
+      height: 43px;
+      border: none;
+      border-radius: 7.6px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      color: ${props => props.theme.colors.secundaryContrast};
+    }
+    .list {
+      background-color: ${props => props.theme.colors.secundary};
+      border: none;
+      
+      .search-bar-container {
+        padding: 10px;
+        input {
+          background-color: transparent;
+          height: 44px;
+        }
+      }
+
+      .list-wrapper {
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.secundaryContrast};
+  }
+  img {
+    margin-right: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 15px;
+      margin-right: 0;
+    `}
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  margin-top: 80px;
+  button {
+    width: 100%;
+    border-radius: 8px;
+    height: 44px;
+    position: relative;
+    svg {
+      position: absolute;
+      right: 15px;
+      top: 10px;
+      font-size: 21px;
+    }
+  }
+
+  ${({ hasOther }) => hasOther && css`
+    margin-top: 15px;
+  `}
+`
+
+export const CheckMateAndDeliverectList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -12px;
+  width: calc(100% + 24px);
+  max-height: 68vh;
+  overflow: auto;
+  > div {
+    margin: 6px 12px;
+    width: calc(33.33% - 24px);
+  }
+`
+
+export const PosItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  min-height: 78px;
+  cursor: pointer;
+  ${({ active }) => active && css`
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+  img {
+    margin-right: 5px;
+    ${props => props.theme.rtl && css`
+      margin-left: 5px;
+      margin-right: 0;
+    `}
+  }
+  > div {
+    h3 {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 21px;
+      margin: 0;
+    }
+    p {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      margin: 0;
+    }
+  }
+`

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

@@ -126,6 +126,7 @@ export const ActionButtons = styled.div`
   top: 100%;
   display: flex;
   align-items: center;
+  margin-top: 50px;
 
   > button {
     height: 42px;

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

@@ -0,0 +1,152 @@
+import React, { useState, useRef } from 'react'
+import { useLanguage, ExamineClick, DragAndDrop, UploadMenu } from 'ordering-components-admin-external'
+import { CloudUploadFill, FileEarmarkPdfFill } from 'react-bootstrap-icons'
+import { Button, Input } from '../../../styles'
+import { bytesConverter } from '../../../utils'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  FileUploadBox,
+  UploadIconBox,
+  Or,
+  FormControl,
+  ButtonGroup,
+  PdfIconBox
+} from './styles'
+
+const UploadMenuGuideUI = (props) => {
+  const { handleBack, formState, changeFormState, handleUploadMenu } = props
+
+  const [, t] = useLanguage()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const fileRef = useRef(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type
+      if (type?.split('/')[0] !== 'image' && type !== 'application/pdf') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES_OR_PDF', 'Only images or pdf can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('FILE_MAXIMUM_SIZE', 'The maximum file size is 2 megabytes')]
+        })
+        return
+      }
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        changeFormState({ file: reader.result, type: type === 'application/pdf' ? 'pdf' : 'image' })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  const handleSendRequest = () => {
+    if (formState?.changes?.file || formState?.changes?.url) {
+      handleUploadMenu()
+      return
+    }
+    if (!formState?.changes?.file) {
+      setAlertState({
+        open: true,
+        content: t('IMAGE_OR_PDF_IS_REQUIRED', 'Image or pdf file is required!')
+      })
+      return
+    }
+    if (!formState?.changes?.url) {
+      setAlertState({
+        open: true,
+        content: t('URL_IS_REQUIRED', 'URL is required')
+      })
+    }
+  }
+
+  return (
+    <>
+      <Container>
+        <h2>{t('UPLOAD_YOUR_MENU', 'Upload your menu')}</h2>
+        <p>{t('UPLOAD_YOUR_MENU_DESC', 'Click to upload your menu (PDF or image file) or share your menu link (For website or another online ordering system)')}</p>
+        <FileUploadBox onClick={() => fileRef.current.click()}>
+          <ExamineClick
+            onFiles={files => handleFiles(files)}
+            childRef={(e) => { fileRef.current = e }}
+            accept='image/png, image/jpeg, image/jpg, application/pdf'
+          >
+            <DragAndDrop
+              onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+              accept='image/png, image/jpeg, image/jpg, application/pdf'
+            >
+              {formState?.changes?.file && (
+                formState?.changes?.type === 'pdf'
+                  ? <PdfIconBox><FileEarmarkPdfFill /></PdfIconBox>
+                  : <img src={formState?.changes?.file} alt='file' loading='lazy' />
+              )}
+              <UploadIconBox>
+                <div>
+                  <CloudUploadFill />
+                  <p>{t('DRAG_AND_DROP', 'Drag and drop')}</p>
+                </div>
+              </UploadIconBox>
+            </DragAndDrop>
+          </ExamineClick>
+        </FileUploadBox>
+        <Or>{t('OR', 'Or')}</Or>
+        <FormControl>
+          <label>{t('SHARE_YOUR_MENU_LINK', 'Share your menu link (From your webiste or another online ordering system)')}</label>
+          <Input
+            placeholder={t('URL', 'URL')}
+            defaultValue={formState?.changes?.url}
+            onChange={(e) => changeFormState({ url: e.target.value })}
+          />
+        </FormControl>
+        <ButtonGroup>
+          <Button
+            color='primary'
+            outline
+            onClick={handleBack}
+          >
+            {t('BACK', 'Back')}
+          </Button>
+          <Button
+            color='primary'
+            onClick={() => handleSendRequest()}
+          >
+            {t('SEND_REQUEST', 'Send Request')}
+          </Button>
+        </ButtonGroup>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const UploadMenuGuide = (props) => {
+  const uploadMenuGuideProps = {
+    ...props,
+    UIComponent: UploadMenuGuideUI
+  }
+  return <UploadMenu {...uploadMenuGuideProps} />
+}