ordering-ui-admin-external 1.8.4 → 1.9.0

package/src/components/Stores/BusinessAdd/Images/styles.js

@@ -0,0 +1,94 @@
+import styled, { css } from 'styled-components'
+
+export const ImagesContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+  }
+`
+
+export const ImageFormGroup = styled.div`
+  margin-top: 30px;
+`
+
+export const LogoImage = styled.div`
+  height: 160px;
+  width: 160px;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: contain;
+  }
+`
+
+export const BackgroundImage = styled(LogoImage)`
+  height: 190px;
+  width: 100%;
+`
+
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: ${props => props.theme.colors.secundaryDarkContrast};
+  ${({ bgimage }) => bgimage && css`
+    background: transparent;
+    svg, span {
+      color: ${props => props.theme.colors.white};
+    }
+    border: 1px dashed ${props => props.theme.colors.secundaryDarkContrast};
+  `}
+  ${({ small }) => small ? css`
+    padding: 4px;
+  ` : css`
+    padding: 8px;
+  `}
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: ${props => props.theme.colors.disabled};
+  span {
+    margin-top: 14px;
+    font-size: 14px;
+  }
+
+  svg {   
+    width: 52px;
+    height: 45px;
+  }
+`
+
+export const ImgInfoWrapper = styled.div`
+  margin-top: 15px;
+  h4 {
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 400;
+    margin: 0px;
+  }
+  p {
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: 2px;
+    margin-bottom: 0px;
+    color: ${props => props.theme.colors.secundaryContrast};
+  }
+`

package/src/components/Stores/BusinessAdd/OrderTypePriceLevel/index.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
+import {
+  Container,
+  PriceLevelContainer,
+  PriceLevelList,
+  PriceLevelItem
+} from './styles'
+
+export const OrderTypePriceLevel = (props) => {
+  const { formState, changeFormState } = props
+
+  const [, t] = useLanguage()
+
+  const priceList = [
+    { key: '1', value: '$' },
+    { key: '2', value: '$$' },
+    { key: '3', value: '$$$' },
+    { key: '4', value: '$$$$' },
+    { key: '5', value: '$$$$$' }
+  ]
+
+  return (
+    <Container>
+      <PriceLevelContainer>
+        <h2>{t('PRICE_LEVEL', 'Price level')}</h2>
+        <PriceLevelList>
+          {priceList.map((item, i) => (
+            <PriceLevelItem
+              key={i}
+              onClick={() => changeFormState({ price_level: item.key })}
+              active={formState?.changes?.price_level === item.key}
+            >
+              {(formState?.changes?.price_level === item.key) ? <RecordCircleFill /> : <Circle />}
+              <span>{item.value}</span>
+            </PriceLevelItem>
+          ))}
+        </PriceLevelList>
+      </PriceLevelContainer>
+    </Container>
+  )
+}

package/src/components/Stores/BusinessAdd/OrderTypePriceLevel/styles.js

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  h2 {  
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 25px;
+  }
+`
+
+export const PriceLevelContainer = styled.div`
+  h2 {
+    margin-bottom: 15px;
+  }
+`
+
+export const PriceLevelList = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + 20px);
+  margin-left: -10px;
+
+  ${props => props.theme.rtl && css`
+    margin-right: -10px;
+    margin-left: 0px;
+  `}
+
+  > div {
+    width: calc(33.33% - 20px);
+    margin: 10px;
+  }
+
+  @media (min-width: 576px) {
+    > div {
+      width: calc(20% - 20px);
+    }
+  }
+`
+
+export const PriceLevelItem = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    transition: all 0.3s linear;
+    min-width: 16px;
+  }
+
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    margin-left: 8px;
+    ${props => props.theme.rtl && css`
+      margin-right: 8px;
+      margin-left: 0px;
+    `}
+  }
+
+  ${({ active }) => active && css`
+    svg {
+      color: ${props => props.theme.colors.primary};
+    }
+  `}
+`

package/src/components/Stores/BusinessAdd/OtherDetails/index.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import {
+  OrderDetailsContainer,
+  ContentWrapper,
+  FormControl,
+  SwitchControl
+} from './styles'
+import { Input, Switch, TextArea } from '../../../../styles'
+
+export const OtherDetails = (props) => {
+  const { formState, handleChangeInput } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <OrderDetailsContainer>
+      <h2>{t('OTHER_DETAILS', 'Other Details')}</h2>
+      <ContentWrapper>
+        <FormControl>
+          <label>{t('GOOGLE_MAPS_URL', 'Google Maps URL')}</label>
+          <Input
+            placeholder={t('URL', 'URL')}
+          />
+        </FormControl>
+        <SwitchControl>
+          <label>{t('RESERVATION_WITH_OPEN_TABLE', 'Reservation with open table')}</label>
+          <Switch
+            defaultChecked
+            onChange={val => console.log(val)}
+          />
+        </SwitchControl>
+        <FormControl>
+          <label>{t('WEBSITE_ORIGINAL', 'Website')}</label>
+          <Input
+            placeholder='www.yourbusiness.com'
+          />
+        </FormControl>
+        <FormControl noBottom>
+          <label>{t('DESCRIPTION', 'Description')}</label>
+          <TextArea
+            name='description'
+            placeholder={t('WRITE_DESCRIPTION', 'Write description')}
+            defaultValue={formState?.changes?.description ?? ''}
+            onChange={handleChangeInput}
+          />
+        </FormControl>
+      </ContentWrapper>
+    </OrderDetailsContainer>
+  )
+}

package/src/components/Stores/BusinessAdd/OtherDetails/styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components'
+
+export const OrderDetailsContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 25px;
+  }
+`
+
+export const ContentWrapper = styled.div``
+
+export const FormControl = styled.div`
+  margin-bottom: 23px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
+  textarea {
+    width: 100%;
+    height: 100px;
+  }
+
+  ${({ noBottom }) => noBottom && css`
+    margin-bottom: 0px;
+  `}
+`
+
+export const SwitchControl = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 23px;
+  label {
+    margin-bottom: 0px;
+    margin-right: 16px;
+    ${props => props.theme.rtl && css`
+      margin-left: 16px;
+      margin-right: 0px;
+    `}
+  }
+`

package/src/components/Stores/BusinessAdd/PaymentMethods/index.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { CheckSquareFill, Square } from 'react-bootstrap-icons'
+import {
+  Container,
+  ContentWrapper,
+  PaymethodItem
+} from './styles'
+
+export const PaymentMethods = (props) => {
+  const {
+    paymethodsList,
+    handleChangePaymethodIds,
+    paymethodIds
+  } = props
+
+  const [, t] = useLanguage()
+
+  const handleChangeIds = (id) => {
+    let updateIds = []
+    if (paymethodIds.includes(id)) updateIds = paymethodIds.filter(paymethodId => paymethodId !== id)
+    else updateIds = [...paymethodIds, id]
+    handleChangePaymethodIds(updateIds)
+  }
+
+  return (
+    <Container>
+      <h2>{t('PAYMENT_METHODS', 'Payment methods')}</h2>
+      <ContentWrapper>
+        {!paymethodsList?.loading && paymethodsList?.paymethods.map((paymethod, idx) => (
+          <PaymethodItem key={paymethod?.id} isBorderTop={idx === 0} onClick={() => handleChangeIds(paymethod.id)}>
+            {paymethodIds.includes(paymethod?.id) ? <CheckSquareFill className='enabled' /> : <Square />}
+            <span>{paymethod?.name}</span>
+          </PaymethodItem>
+        ))}
+      </ContentWrapper>
+    </Container>
+  )
+}

package/src/components/Stores/BusinessAdd/PaymentMethods/styles.js

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 25px;
+  }
+`
+
+export const ContentWrapper = styled.div`
+  overflow: auto;
+  max-height: 500px;
+`
+
+export const PaymethodItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px 0px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  cursor: pointer;
+  ${({ isBorderTop }) => isBorderTop && css`
+    border-top: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+
+    &.enabled {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-left: 20px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 20px;
+    `}
+  }
+`

package/src/components/Stores/BusinessAdd/Photos/index.js

@@ -0,0 +1,156 @@
+import React, { useRef, useState } from 'react'
+import { useLanguage, ExamineClick, DragAndDrop, useUtils } from 'ordering-components-admin-external'
+import { Image as DumyPhoto, X as CloseIcon } from 'react-bootstrap-icons'
+import { Alert, Modal, ImageCrop, DragScroll } from '../../../Shared'
+import { bytesConverter } from '../../../../utils'
+import {
+  PhotosContainer,
+  ContentWrapper,
+  UploadImageContainer,
+  UploadImageIconContainer,
+  UploadImageIcon,
+  GalleryList,
+  Tab,
+  DeleteButton
+} from './styles'
+
+export const Photos = (props) => {
+  const { gallery, handleChangeGallery } = props
+
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [cropState, setCropState] = useState({ data: null, open: false })
+
+  const imageRef = useRef()
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleClickImage = () => {
+    imageRef.current.click()
+  }
+
+  const handleChangePhoto = (croppedImg) => {
+    const uniqueId = getUniqueId()
+    const updatedGallery = JSON.parse(JSON.stringify([...gallery, { file: croppedImg, type: 1, temp_id: uniqueId }]))
+    handleChangeGallery(updatedGallery)
+    setCropState({ data: null, open: false })
+  }
+
+  const handleDeleteGalleryImage = (id) => {
+    const updatedGallery = gallery.filter(item => item.temp_id !== id)
+    handleChangeGallery(updatedGallery)
+  }
+
+  const getUniqueId = () => {
+    const dateString = Date.now().toString(36)
+    const randomness = Math.random().toString(36).substr(2)
+    return dateString + randomness
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type.split('/')[0]
+      if (type !== 'image') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES', 'Only images can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('IMAGE_MAXIMUM_SIZE', 'The maximum image size is 2 megabytes')]
+        })
+        return
+      }
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        setCropState({ data: reader.result, open: true })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  return (
+    <>
+      <PhotosContainer>
+        <h2>{t('PHOTOS', 'Photos')}</h2>
+        <ContentWrapper>
+          <UploadImageContainer
+            onClick={() => handleClickImage()}
+          >
+            <ExamineClick
+              onFiles={files => handleFiles(files, 'header')}
+              childRef={(e) => { imageRef.current = e }}
+              accept='image/png, image/jpeg, image/jpg'
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files, 'header')}
+                accept='image/png, image/jpeg, image/jpg'
+              >
+                <UploadImageIconContainer>
+                  <UploadImageIcon>
+                    <DumyPhoto />
+                    <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>
+                  </UploadImageIcon>
+                </UploadImageIconContainer>
+              </DragAndDrop>
+            </ExamineClick>
+          </UploadImageContainer>
+          {gallery?.length > 0 && (
+            <GalleryList>
+              <DragScroll>
+                {gallery.map(photo => (
+                  <Tab
+                    key={photo.temp_id}
+                  >
+                    <img
+                      src={optimizeImage(photo.file, 'h_200,c_limit')}
+                    />
+                    <DeleteButton
+                      onClick={() => handleDeleteGalleryImage(photo.temp_id)}
+                    >
+                      <CloseIcon />
+                    </DeleteButton>
+                  </Tab>
+                ))}
+              </DragScroll>
+            </GalleryList>
+          )}
+        </ContentWrapper>
+      </PhotosContainer>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        title={t('IMAGE_CROP', 'Image crop')}
+        open={cropState?.open}
+        onClose={() => setCropState({ ...cropState, open: false })}
+      >
+        <ImageCrop
+          photo={cropState?.data}
+          handleChangePhoto={handleChangePhoto}
+        />
+      </Modal>
+    </>
+  )
+}

package/src/components/Stores/BusinessAdd/Photos/styles.js

@@ -0,0 +1,108 @@
+import styled, { css } from 'styled-components'
+
+export const PhotosContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 25px;
+  }
+`
+
+export const ContentWrapper = styled.div``
+
+export const UploadImageContainer = styled.div`
+  height: 160px;
+  max-width: 415px;
+  width: 100%;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: contain;
+  }
+`
+
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: ${props => props.theme.colors.secundaryDarkContrast};
+  ${({ bgimage }) => bgimage && css`
+    background: transparent;
+    svg, span {
+      color: ${props => props.theme.colors.white};
+    }
+    border: 1px dashed ${props => props.theme.colors.secundaryDarkContrast};
+  `}
+  ${({ small }) => small ? css`
+    padding: 4px;
+  ` : css`
+    padding: 8px;
+  `}
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: ${props => props.theme.colors.disabled};
+  span {
+    margin-top: 14px;
+    font-size: 14px;
+  }
+
+  svg {   
+    width: 52px;
+    height: 45px;
+  }
+`
+
+export const GalleryList = styled.div`
+  width: 100%;
+  margin-top: 25px;
+`
+
+export const Tab = styled.div`
+  position: relative;
+  width: 300px;
+  height: 160px;
+  img {
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+  }
+`
+
+export const DeleteButton = styled.span`
+  cursor: pointer;
+  background: ${props => props.theme.colors.danger};
+  border-radius: 100%;
+  padding: 3px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    font-size: 24px;
+    color: ${props => props.theme.colors.white};
+  }
+`

package/src/components/Stores/BusinessAdd/ReceiveOrders/index.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { Input } from '../../../../styles'
+import {
+  ReceiveOrdersContainer,
+  FormControl,
+  ContentWrapper,
+  DownloadWrapper,
+  DownloadIconWrapper
+} from './styles'
+
+export const ReceiveOrders = (props) => {
+  const { formState, handleChangeInput } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <ReceiveOrdersContainer>
+      <h2>{t('RECEIVE_ORDERS', 'Receive orders')}</h2>
+      <ContentWrapper>
+        <FormControl>
+          <label>{t('BY_EMAIL', 'By Email')}</label>
+          <Input
+            name='email'
+            defaultValue={formState?.changes?.email ?? ''}
+            onChange={handleChangeInput}
+            placeholder={t('ADD_EMAIL', 'Add email')}
+          />
+        </FormControl>
+        <DownloadWrapper>
+          <label>{t('DOWNLOADS_APPS', 'Downloads apps')}</label>
+          <DownloadIconWrapper>
+            <a href='https://apps.apple.com/us/app/customer-app-2-0/id1607414555' target='_blank' rel='noopener noreferrer'>
+              <img src={theme.images.general.appStore} alt='' />
+            </a>
+            <a href='https://play.google.com/store/apps/details?id=com.ordering.onlineorderingappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
+              <img src={theme.images.general.googlePlay} alt='' />
+            </a>
+          </DownloadIconWrapper>
+        </DownloadWrapper>
+      </ContentWrapper>
+    </ReceiveOrdersContainer>
+  )
+}