ordering-ui-admin-external 1.8.5 → 1.9.0

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

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const BusinessDetailsContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+  }
+`
+
+export const ContentWrapper = styled.div`
+  margin-top: 23px;
+`
+
+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;
+  }
+  .input-autocomplete {
+    width: 100%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 10px 15px;
+    outline: none;
+    ::placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &:-ms-input-placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+
+  ${({ noBottom }) => noBottom && css`
+    margin-bottom: 0px;
+  `}
+`
+
+export const GoogleMapContainer = styled.div`
+  margin-bottom: 23px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-bottom: 9px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+    color: ${props => props.theme.colors.lightGray};
+  }
+`
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 150px;
+  margin-top: 30px;
+
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 768px) {
+    height: 200px;
+  }
+`
+
+export const FormGroup = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  > div {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div {
+      width: 48%;
+    }
+  }
+`

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

@@ -0,0 +1,250 @@
+import React, { useState, useEffect } from 'react'
+import { useConfig, useLanguage, useUtils, BusinessZoneGoogleMaps } from 'ordering-components-admin-external'
+import { Select } from '../../../../styles/Select/FirstSelect'
+import { Input } from '../../../../styles'
+import { Alert } from '../../../Shared'
+
+import {
+  DeliveryZoneContainer,
+  TypeSelectWrapper,
+  WrapperMap,
+  ErrorText,
+  FormControl,
+  Row
+} from './styles'
+
+export const DeliveryZone = (props) => {
+  const {
+    formState,
+    zoneState,
+    handleChangeZoneState,
+    // handleUploadKmlFiles,
+    kmlData
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parseNumber }] = useUtils()
+  const [configState] = useConfig()
+  const [clearState, setClearState] = useState(false)
+  const [infoContentString, setInfoContentString] = useState('')
+  const [zoneType, setZoneType] = useState(2)
+  const [zoneData, setZoneData] = useState()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isShowMap, setIsShowMap] = useState(false)
+  // const kmlRef = useRef(null)
+
+  const typeOptions = [
+    { value: 1, content: t('CIRCLE', 'Circle') },
+    { value: 2, content: t('POLYGON', 'Polygon') },
+    { value: 4, content: t('EVERYWHERE', 'Everywhere') },
+    { value: 5, content: t('DISTANCE_BASED', 'Distance based') }
+  ]
+
+  const googleMapsControls = {
+    defaultZoom: 8,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: false,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    },
+    isMarkerDraggable: false,
+    defaultPosition: { lat: 40.77473399999999, lng: -73.9653844 }
+  }
+
+  const fillStyle = {
+    fillColor: '#2C7BE5',
+    strokeColor: '#03459E',
+    fillOpacity: 0.2,
+    strokeWeight: 2,
+    editable: true
+  }
+
+  const greenFillStyle = {
+    fillColor: '#008000',
+    fillOpacity: 0.3,
+    strokeColor: '#008000',
+    strokeOpacity: 0.8,
+    strokeWeight: 2
+  }
+
+  const handleChangeType = (type) => {
+    handleChangeZoneState({ type: type }, true)
+    setClearState(true)
+    setZoneType(type)
+  }
+
+  const handleZoneData = (data) => {
+    setZoneData(data)
+    handleChangeZoneState({ data: data }, true)
+  }
+
+  // const onSubmit = () => {
+  //   if (zoneState.changes?.data || zoneType === 4) {
+  //     handleAddBusinessDeliveryZone()
+  //   } else {
+  //     setAlertState({
+  //       open: true,
+  //       content: t('REQUIRED_POLYGON_CIRCLE', 'Add a distance based or draw a polygon or circle.')
+  //     })
+  //   }
+  // }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (clearState) {
+      handleZoneData(null)
+    }
+  }, [clearState])
+
+  useEffect(() => {
+    if (zoneType === 2 || zoneType === 4) return
+    let content = '<div style="width: 90px; height: 30px">' + '<span>Radius: </span>'
+    content += parseNumber(zoneData?.radio || zoneData?.distance)
+    content += `<span>${zoneType === 5 ? configState?.configs?.distance_unit?.value : 'km'}</span>` + '</div>'
+    setInfoContentString(content)
+  }, [zoneData, zoneType])
+
+  useEffect(() => {
+    if (zoneType === 4) setIsShowMap(false)
+    else setIsShowMap(true)
+  }, [zoneType])
+
+  return (
+    <>
+      <DeliveryZoneContainer autoComplete='off'>
+        <h2>{t('LETS_CREATE_YOUR_FIRST_DELIVERY_ZONE', 'Let’s create your first Delivery Zone')}</h2>
+        <Row>
+          <FormControl>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              placeholder={t('NAME', 'Name')}
+              name='name'
+              value={zoneState?.name ?? ''}
+              onChange={(e) => handleChangeZoneState(e)}
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('TYPE', 'Type')}</label>
+            <TypeSelectWrapper>
+              <Select
+                defaultValue={parseInt(zoneState?.type || zoneType)}
+                options={typeOptions}
+                onChange={handleChangeType}
+              />
+            </TypeSelectWrapper>
+          </FormControl>
+        </Row>
+        <Row>
+          <FormControl>
+            <label>{t('MINIMUN_PURCHASED', 'Minimum purchase')}</label>
+            <Input
+              placeholder='$0.00'
+              name='minimum'
+              value={zoneState?.minimum ?? ''}
+              onChange={(e) => handleChangeZoneState(e)}
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('DELIVERY_FEE', 'Delivery fee')}</label>
+            <Input
+              placeholder='$0.00'
+              name='price'
+              value={zoneState?.price ?? ''}
+              onChange={(e) => handleChangeZoneState(e)}
+            />
+          </FormControl>
+        </Row>
+        {zoneType === 5 &&
+          <Row>
+            <FormControl>
+              <label>{t('DISTANCE_FROM_STORE', 'Distance from store')}</label>
+              <Input
+                placeholder={`1 - 99 ${configState?.configs?.distance_unit?.value}`}
+                name='distance'
+                maxLength={2}
+                value={zoneState?.data?.distance ?? ''}
+                onInput={(e) => {
+                  e.target.value = e.target.value.match('^[1-9]{1,2}$')
+                }}
+                onChange={e => handleChangeZoneState(e, false, configState?.configs?.distance_unit?.value)}
+              />
+            </FormControl>
+          </Row>}
+        <FormControl>
+          <label>{t('BUSINESS_ADDRESS', 'Business address')}</label>
+          <Input
+            name='address'
+            defaultValue={formState?.changes?.address}
+            disabled
+          />
+        </FormControl>
+        {zoneType !== 4 && isShowMap && (
+          configState?.configs?.google_maps_api_key?.value ? (
+            <WrapperMap>
+              {zoneType !== 5 &&
+                <button
+                  type='button'
+                  onClick={() => setClearState(true)}
+                >
+                  {t('CLEAR', 'Clear')}
+                </button>}
+              <BusinessZoneGoogleMaps
+                distance={zoneState?.data?.distance}
+                disabled
+                apiKey={configState?.configs?.google_maps_api_key?.value}
+                mapControls={googleMapsControls}
+                clearState={clearState}
+                setClearState={setClearState}
+                type={zoneType}
+                data={zoneState?.data || zoneData}
+                handleData={handleZoneData}
+                fillStyle={fillStyle}
+                infoContentString={infoContentString}
+                greenFillStyle={greenFillStyle}
+                kmlData={kmlData}
+              />
+            </WrapperMap>
+          ) : (
+            <ErrorText>{t('REQUIRED_GOOGLE_MAP_API_KEY', 'Google Maps api key is required')}</ErrorText>
+          )
+        )}
+        {/* {(zoneType !== 5) && (
+          <KmlButtonWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              type='button'
+              onClick={() => kmlRef.current.click()}
+            >
+              <ExamineClick
+                onFiles={files => handleUploadKmlFiles(files)}
+                childRef={e => { kmlRef.current = e }}
+                accept='.kml,.kmz'
+              >
+                <span>{t('UPLOAD_KML', 'Upload KML')}</span>
+              </ExamineClick>
+            </Button>
+          </KmlButtonWrapper>
+        )} */}
+      </DeliveryZoneContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,101 @@
+import styled, { css } from 'styled-components'
+
+export const DeliveryZoneContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100% - 130px);
+
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 23px;
+  }
+`
+
+export const TypeSelectWrapper = styled.div`
+  .select {
+    background: ${props => props.theme.colors.secundary};
+    width: 100%;
+    border: none;
+    font-size: 14px;
+    color: ${props => props.theme.colors.headingColor};
+    > div:first-child {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
+`
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 29px 0 20px 0;
+  position: relative;
+  > div {
+    position: relative !important; 
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+
+  > button {
+    position: absolute;
+    font-size: 14px;
+    padding: 0 5px;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    top: 10px;
+    z-index: 10;
+    border: none;
+    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px;
+    color: ${props => props.theme.colors.headingColor};
+    ${props => props.theme?.rtl ? css`
+      right: 10px;
+    ` : css`
+      left: 10px;
+    `}
+    &:hover {
+      background: #eee;
+    }
+  }
+`
+
+export const ErrorText = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+  text-align: center;
+  margin: 20px 0;
+`
+export const FormControl = styled.div`
+  display: flex;
+  flex-direction: column;
+  label {
+    font-size: 14px;
+    margin-bottom: 9px;
+  }
+  input {
+    width: 100%;
+  }
+`
+export const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  > div {
+    width: 100%;
+    margin-bottom: 29px;
+  }
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div {
+      width: 45%;
+    }
+  }
+`
+export const KmlButtonWrapper = styled.div`
+  margin: 20px 0px;
+`

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

@@ -0,0 +1,168 @@
+import React, { useRef, useState } from 'react'
+import { ExamineClick, useLanguage, DragAndDrop } from 'ordering-components-admin-external'
+import { bytesConverter } from '../../../../utils'
+import { Alert, Modal, ImageCrop } from '../../../Shared'
+import { Image as DumyPhoto } from 'react-bootstrap-icons'
+import {
+  ImagesContainer,
+  ImageFormGroup,
+  LogoImage,
+  BackgroundImage,
+  UploadImageIconContainer,
+  UploadImageIcon,
+  ImgInfoWrapper
+} from './styles'
+
+export const Images = (props) => {
+  const {
+    formState,
+    handleChangeSwtich
+  } = props
+
+  const [, t] = useLanguage()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+
+  const logoRef = useRef(null)
+  const backgroundRef = useRef(null)
+
+  const handleClickImage = (type) => {
+    if (type === 'logo') {
+      logoRef.current.click()
+    }
+
+    if (type === 'header') {
+      backgroundRef.current.click()
+    }
+  }
+
+  const handleFiles = (files, name) => {
+    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({ name: name, data: reader.result, open: true })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleChangePhoto = (croppedImg) => {
+    handleChangeSwtich(cropState?.name, croppedImg)
+    setCropState({ name: null, data: null, open: false })
+  }
+
+  return (
+    <>
+      <ImagesContainer>
+        <h2>{t('IMAGES', 'Images')}</h2>
+        <ImageFormGroup>
+          <LogoImage
+            onClick={() => handleClickImage('logo')}
+          >
+            <ExamineClick
+              onFiles={files => handleFiles(files, 'logo')}
+              childRef={(e) => { logoRef.current = e }}
+              accept='image/png, image/jpeg, image/jpg'
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files, 'logo')}
+                accept='image/png, image/jpeg, image/jpg'
+                disabled={formState.loading}
+              >
+                {formState?.changes?.logo && <img src={formState?.changes?.logo} alt='logo image' loading='lazy' />}
+                <UploadImageIconContainer bgimage={formState?.changes?.logo}>
+                  <UploadImageIcon>
+                    <DumyPhoto />
+                    <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>
+                  </UploadImageIcon>
+                </UploadImageIconContainer>
+              </DragAndDrop>
+            </ExamineClick>
+          </LogoImage>
+          <ImgInfoWrapper>
+            <h4>{t('BUSINESS_LOGO', 'Business Logo')}</h4>
+            <p>512 x 512 px</p>
+            <p>{t('FORMAT', 'Format')}: PNG, JPG</p>
+          </ImgInfoWrapper>
+        </ImageFormGroup>
+        <ImageFormGroup>
+          <BackgroundImage
+            onClick={() => handleClickImage('header')}
+          >
+            <ExamineClick
+              onFiles={files => handleFiles(files, 'header')}
+              childRef={(e) => { backgroundRef.current = e }}
+              accept='image/png, image/jpeg, image/jpg'
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files, 'header')}
+                accept='image/png, image/jpeg, image/jpg'
+                disabled={formState.loading}
+              >
+                {formState?.changes?.header && <img src={formState?.changes?.header} alt='backgrond image' loading='lazy' />}
+                <UploadImageIconContainer bgimage={!!formState?.changes?.header}>
+                  <UploadImageIcon>
+                    <DumyPhoto />
+                    <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>
+                  </UploadImageIcon>
+                </UploadImageIconContainer>
+              </DragAndDrop>
+            </ExamineClick>
+          </BackgroundImage>
+          <ImgInfoWrapper>
+            <h4>{t('HOMEPAGE_BACKGROUND', 'Business Header')}</h4>
+            <p>1350 x 400 px</p>
+            <p>{t('FORMAT', 'Format')}: PNG, JPG</p>
+          </ImgInfoWrapper>
+        </ImageFormGroup>
+      </ImagesContainer>
+      <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>
+    </>
+  )
+}