ordering-ui-admin-external 1.17.0 → 1.19.0

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

@@ -18,6 +18,8 @@ import { BusinessNotifications } from '../BusinessNotifications'
 import { BusinessOrderingChannels } from '../BusinessOrderingChannels'
 import { BusinessFrontLayout } from '../BusinessFrontLayout'
 // import { BusinessPublishing } from '../BusinessPublishing'
+import { BusinessPlaceGroupList } from '../BusinessPlaceGroupList'
+import { SpoonityApiKey } from '../SpoonityApiKey'
 
 import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
 
@@ -46,7 +48,9 @@ export const BusinessDetailsUI = (props) => {
     handleDuplicateBusiness,
     handleDeleteBusiness,
     actionStatus,
-    handleUpdatePreorderConfigs
+    handleUpdatePreorderConfigs,
+    handleUpdateSpoonityKey,
+    spoonityKeyState
   } = props
 
   const history = useHistory()
@@ -58,6 +62,7 @@ export const BusinessDetailsUI = (props) => {
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const spoonityConfig = businessState?.business?.configs?.find(config => config.key === 'spoonity_integration_api_key')
 
   const isAdmin = user?.level === 0
 
@@ -178,6 +183,7 @@ export const BusinessDetailsUI = (props) => {
           handleDuplicateBusiness={handleDuplicateBusiness}
           handleDeleteBusiness={handleDeleteBusiness}
           extraOpen={extraOpen}
+          spoonityConfig={spoonityConfig}
         />
       )}
       {extraOpen && (
@@ -320,6 +326,23 @@ export const BusinessDetailsUI = (props) => {
               handleSuccessUpdate={handleUpdateBusinessState}
             />
           )}
+          {selectedItem === 'places' && (
+            <BusinessPlaceGroupList
+              business={businessState?.business}
+              handleSuccessUpdate={handleUpdateBusinessState}
+              setIsExtendExtraOpen={setIsExtendExtraOpen}
+            />
+          )}
+          {selectedItem === 'spoonity_key' && (
+            <SpoonityApiKey
+              business={businessState?.business}
+              handleSuccessUpdate={handleUpdateBusinessState}
+              handleUpdateBusinessClick={handleUpdateBusinessClick}
+              spoonityConfig={spoonityConfig}
+              handleUpdateSpoonityKey={handleUpdateSpoonityKey}
+              spoonityKeyState={spoonityKeyState}
+            />
+          )}
         </MoreSidebarLayout>
       )}
 

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

@@ -57,7 +57,8 @@ export const BusinessLocation = (props) => {
   const getTimeZone = async (address) => {
     const date = new Date()
     const timestamp = Math.floor(date.getTime() / 1000)
-    const url = `https://maps.googleapis.com/maps/api/timezone/json?location=${address?.location?.lat},${address?.location?.lng}&timestamp=${timestamp}&key=${googleMapsApiKey}`
+    const timezoneApiKey = googleMapsApiKey === 'AIzaSyBvsSkMYPSDSkdk7YFrSf5FoGonIzr6fJ0' ? 'AIzaSyCYPCOfiTo9jxuxLWnWTup6mmICPxfLegI' : googleMapsApiKey
+    const url = `https://maps.googleapis.com/maps/api/timezone/json?location=${address?.location?.lat},${address?.location?.lng}&timestamp=${timestamp}&key=${timezoneApiKey}`
     const response = await fetch(url, {
       method: 'GET'
     })

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

@@ -0,0 +1,137 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useLanguage, BusinessPlace as BusinessPlaceController } from 'ordering-components-admin-external'
+import { DropdownButton, Dropdown } from 'react-bootstrap'
+import { XLg, ThreeDots } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { Button, IconButton, Input } from '../../../styles'
+import { useForm } from 'react-hook-form'
+import { Alert } from '../../Shared'
+
+import {
+  Container,
+  Header,
+  ActionBlock,
+  ActionSelectorWrapper,
+  Content,
+  ButtonWrapper,
+  HideSubmitBtn
+} from './styles'
+
+export const BusinessPlaceUI = (props) => {
+  const {
+    onClose,
+    place,
+    formState,
+    handleChangeInput,
+    handleAddPlace,
+    handleUpdatePlace,
+    handleDeletePlace
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const formMethods = useForm()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const buttonRef = useRef(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onSubmit = () => {
+    if (place) handleUpdatePlace()
+    else handleAddPlace()
+  }
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  return (
+    <>
+      <Container>
+        <Header>
+          <h1>{place ? place?.name : t('NEW_OPTION', 'New option')}</h1>
+          <ActionBlock>
+            {place && (
+              <ActionSelectorWrapper>
+                <DropdownButton
+                  className='product_actions'
+                  menuAlign={theme?.rtl ? 'left' : 'right'}
+                  title={<ThreeDots />}
+                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                >
+                  <Dropdown.Item
+                    onClick={() => handleDeletePlace()}
+                  >
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                </DropdownButton>
+              </ActionSelectorWrapper>
+            )}
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </ActionBlock>
+        </Header>
+        <Content onSubmit={formMethods.handleSubmit(onSubmit)}>
+          <label>{t('NAME', 'Name')}</label>
+          <Input
+            placeholder={t('NAME', 'Name')}
+            name='name'
+            autoComplete='off'
+            onChange={handleChangeInput}
+            value={formState?.changes?.name ?? place?.name ?? ''}
+            ref={formMethods.register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('NAME', 'Name'))
+            })}
+          />
+          <HideSubmitBtn type='submit' ref={buttonRef} />
+        </Content>
+        <ButtonWrapper>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={Object.keys(formState?.changes).length === 0}
+            onClick={() => buttonRef.current.click()}
+          >
+            {place ? t('SAVE', 'Save') : t('ADD', 'Add')}
+          </Button>
+        </ButtonWrapper>
+      </Container>
+      <Alert
+        title={t('PLACES', 'Places')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const BusinessPlace = (props) => {
+  const businessPlaceProps = {
+    ...props,
+    UIComponent: BusinessPlaceUI
+  }
+  return <BusinessPlaceController {...businessPlaceProps} />
+}

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

@@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  transition: 0.3s;
+  height: 100%;
+  
+  > button {
+    height: 42px;
+    width: 100%;
+    margin-top: 20px;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 5px 0;
+    color: ${props => props.theme.colors.headingColor};
+    ${props => props.theme?.rtl ? css`
+      margin-left: 80px;
+    ` : css`
+      margin-right: 80px;
+    `}
+  }
+`
+
+export const ActionBlock = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  > button {
+    display: none;
+  }
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+  ` : css`
+    right: 0px;
+  `}
+  @media (min-width: 1000px) {
+    > button {
+      display: block;
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    }
+  }
+`
+
+export const ActionSelectorWrapper = styled.div`
+  button {
+    display: flex;
+    background: transparent !important;
+    border: none;
+    padding: 5px;
+    border-radius: 8px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+    &:after {
+      display: none;
+    }
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundaryDarkContrast)} !important;
+    }
+  }
+  .show {
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        padding: 7px 20px;
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: ${props => props.theme.colors.danger};
+      }
+    }
+  }
+`
+
+export const Content = styled.form`
+  margin-top: 30px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  input {
+    height: 44px;
+    width: 100%;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  position: sticky;
+  top: 100%;
+  button {
+    height: 44px;
+  }
+`
+
+export const HideSubmitBtn = styled.button`
+  display: none;
+`

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

@@ -0,0 +1,272 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useLanguage, BusinessPlaceGroup as BusinessPlaceGroupController } from 'ordering-components-admin-external'
+import { DropdownButton, Dropdown } from 'react-bootstrap'
+import { useTheme } from 'styled-components'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { Button, IconButton, Input } from '../../../styles'
+import { useForm } from 'react-hook-form'
+import { Alert, Modal } from '../../Shared'
+import Skeleton from 'react-loading-skeleton'
+import { BusinessPlace } from '../BusinessPlace'
+import { ChevronRight, CheckSquareFill, Square, XLg, ThreeDots } from 'react-bootstrap-icons'
+
+import {
+  Container,
+  Header,
+  ActionBlock,
+  ActionSelectorWrapper,
+  Content,
+  ButtonWrapper,
+  HideSubmitBtn,
+  OptionList,
+  AddBtn,
+  PlaceItemContainer,
+  CheckWrapper,
+  TableHead
+} from './styles'
+
+export const BusinessPlaceGroupUI = (props) => {
+  const {
+    open,
+    onClose,
+    placeGroup,
+    formState,
+    handleChangeInput,
+    handleAddPlaceGroup,
+    handleUpdatePlaceGroup,
+    handleDeletePlaceGroup,
+    placeList,
+    handleSuccessDeletePlace,
+    handleSuccessAddPlace,
+    handleSuccessUpdatePlace,
+    handleChangePlaceEnabled,
+    businessId,
+    handleMultiPlaceChangeEnabled,
+    getMultiPlaceCheckStatus
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const formMethods = useForm()
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [selectedPlace, setSelectedPlace] = useState(null)
+  const [openModal, setOpenModal] = useState(false)
+
+  const buttonRef = useRef(null)
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      props.onClose()
+    }
+    setIsMenuOpen(value)
+    document.getElementById('business_place').style.width = value
+      ? width > 1000 ? '500px' : '100%'
+      : '0'
+  }
+
+  const handleOpenModal = (place) => {
+    setSelectedPlace(place)
+    setOpenModal(true)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onSubmit = () => {
+    if (placeGroup) handleUpdatePlaceGroup()
+    else handleAddPlaceGroup()
+  }
+
+  const handleCloseModal = () => {
+    setOpenModal(false)
+    setSelectedPlace(null)
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('business_place').style.width = '100%'
+      } else {
+        document.getElementById('business_place').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  const handlePlaceClick = (e, place) => {
+    if (e.target.closest('.check-box')) return
+    handleOpenModal(place)
+  }
+
+  const handleCheckBoxChange = (place) => {
+    handleChangePlaceEnabled(place?.id, { enabled: !place?.enabled })
+  }
+
+  const handleUpdateSelectedPlace = (placeGroup) => {
+    setSelectedPlace(placeGroup)
+  }
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  return (
+    <>
+      <Container id='business_place'>
+        <Header>
+          <h1>{placeGroup ? placeGroup?.name : t('NEW_PLACE', 'New place')}</h1>
+          <ActionBlock>
+            {placeGroup && (
+              <ActionSelectorWrapper>
+                <DropdownButton
+                  className='product_actions'
+                  menuAlign={theme?.rtl ? 'left' : 'right'}
+                  title={<ThreeDots />}
+                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                >
+                  <Dropdown.Item
+                    onClick={() => handleDeletePlaceGroup()}
+                  >
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                </DropdownButton>
+              </ActionSelectorWrapper>
+            )}
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </ActionBlock>
+        </Header>
+        <Content onSubmit={formMethods.handleSubmit(onSubmit)}>
+          <label>{t('NAME', 'Name')}</label>
+          <Input
+            placeholder={t('NAME', 'Name')}
+            name='name'
+            autoComplete='off'
+            onChange={handleChangeInput}
+            value={formState?.changes?.name ?? placeGroup?.name ?? ''}
+            ref={formMethods.register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('NAME', 'Name'))
+            })}
+          />
+          <HideSubmitBtn type='submit' ref={buttonRef} />
+        </Content>
+        {placeGroup && placeList?.loading && (
+          <OptionList>
+            {
+              [...Array(5).keys()].map(i => (
+                <PlaceItemContainer key={i}>
+                  <CheckWrapper>
+                    <Skeleton width={16} height={16} />
+                    <label>
+                      <Skeleton width={100} />
+                    </label>
+                  </CheckWrapper>
+                  <Skeleton width={16} height={16} />
+                </PlaceItemContainer>
+              ))
+            }
+          </OptionList>
+        )}
+        {placeGroup && !placeList?.loading && (
+          <OptionList>
+            {placeList?.places?.length > 0 && (
+              <TableHead>
+                <CheckWrapper>
+                  <span className='check-box' onClick={() => handleMultiPlaceChangeEnabled()}>
+                    {getMultiPlaceCheckStatus() ? <CheckSquareFill className='active' /> : <Square />}
+                  </span>
+                  <label>{t('OPTIONS', 'Options')}</label>
+                </CheckWrapper>
+              </TableHead>
+            )}
+            {placeList?.places?.map((place, i) => (
+              <PlaceItemContainer
+                key={i}
+                active={selectedPlace?.id === place?.id}
+                onClick={(e) => handlePlaceClick(e, place)}
+              >
+                <CheckWrapper>
+                  <span className='check-box' onClick={() => handleCheckBoxChange(place)}>
+                    {place?.enabled ? <CheckSquareFill className='active' /> : <Square />}
+                  </span>
+                  <label>{place?.name}</label>
+                </CheckWrapper>
+                <ChevronRight />
+              </PlaceItemContainer>
+            ))}
+          </OptionList>
+        )}
+        {placeGroup && <AddBtn onClick={() => handleOpenModal(null)}>{t('ADD_OPTION', 'Add option')}</AddBtn>}
+        <ButtonWrapper>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={Object.keys(formState?.changes).length === 0}
+            onClick={() => buttonRef.current.click()}
+          >
+            {placeGroup ? t('SAVE', 'Save') : t('ADD', 'Add')}
+          </Button>
+        </ButtonWrapper>
+      </Container>
+      <Alert
+        title={t('PLACES', 'Places')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        open={openModal}
+        onClose={() => handleCloseModal()}
+        hideCloseDefault
+      >
+        <BusinessPlace
+          businessId={businessId}
+          place={selectedPlace}
+          placeGroup={placeGroup}
+          handleUpdateSelectedPlace={handleUpdateSelectedPlace}
+          handleSuccessUpdatePlace={handleSuccessUpdatePlace}
+          handleSuccessAddPlace={handleSuccessAddPlace}
+          handleSuccessDeletePlace={handleSuccessDeletePlace}
+          onClose={() => handleCloseModal()}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export const BusinessPlaceGroup = (props) => {
+  const businessPlaceProps = {
+    ...props,
+    UIComponent: BusinessPlaceGroupUI
+  }
+  return <BusinessPlaceGroupController {...businessPlaceProps} />
+}