ordering-ui-admin-external 1.17.0 → 1.18.0

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} />
+}

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

@@ -0,0 +1,248 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  
+  > button {
+    height: 42px;
+    width: 100%;
+    margin-top: 20px;
+  }
+  
+  @media (min-width: 1000px) {
+    max-width: 500px;
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  }
+`
+
+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;
+`
+
+export const OptionList = styled.div`
+  margin-top: 35px;
+`
+
+export const AddBtn = styled.span`
+  font-weight: 400;
+  font-size: 14px;
+  display: block;
+  margin: 10px 0px;
+  cursor: pointer;
+  user-select: none;
+  color: ${props => props.theme.colors.lightGray};
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const CheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  .check-box {
+    cursor: pointer !important;
+  }
+
+  span {
+    svg {
+      cursor: pointer !important;
+      font-size: 16px;
+      color: ${props => props.theme.colors.secundaryLight};
+
+      &.active {
+        color: ${props => props.theme.colors.primary};
+      }
+    }
+  }
+
+  > label {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-left: 20px;
+    ${props => props.theme.rtl && css`
+      margin-right: 20px;
+      margin-left: 0px;
+    `}
+  }
+`
+
+export const PlaceItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  border-top: 1px solid transparent;
+  justify-content: space-between;
+  transition: all 0.3s linear;
+  cursor: pointer;
+
+  &:hover {
+    background: ${props => props.theme.colors.secundary};
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme.colors.backgroundInfo};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  ${({ notAllow }) => notAllow && css`
+    cursor: not-allowed;
+    * {
+      cursor: not-allowed;
+    }
+  `}
+
+  > svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+`
+
+export const TableHead = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+
+  label {
+    font-weight: 700;
+  }
+`

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

@@ -120,7 +120,7 @@ export const BusinessPreorderDetails = (props) => {
           {t('SAVE', 'Save')}
         </Button>
       </PreorderTimeWrapper>
-      {/* <Divider />
+      <Divider />
       <BusinessCateringDelivery
         minutes={minutes}
         type='catering_delivery'
@@ -135,7 +135,7 @@ export const BusinessPreorderDetails = (props) => {
         changePreorderConfigs={changePreorderConfigs}
         disabled={actionStatus?.loading}
       />
-      <Margin /> */}
+      <Margin />
     </BusinessPreorderContainer>
   )
 }

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

@@ -195,7 +195,7 @@ export const BusinessProductList = (props) => {
           </ProductListContainer>
           <ProductListBottom>
             {
-              !businessState.loading && businessState?.business?.categories?.length > 0 && (
+              !businessState.loading && businessState?.business?.categories?.length > 0 && categorySelected && (
                 <AddProductBtn
                   onClick={() => handleParentProductAdd(true)}
                 >
@@ -224,6 +224,14 @@ export const BusinessProductList = (props) => {
               </WrapperNotFound>
             )
           }
+
+          {
+            !businessState.loading && businessState?.business?.categories?.length > 0 && !categorySelected && (
+              <WrapperNotFound>
+                {t('SELECT_CATEGORY_BEFORE_PRODUCT', 'Please select a category before adding your products.')}
+              </WrapperNotFound>
+            )
+          }
         </>
       )}
 

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

@@ -534,6 +534,7 @@ const BusinessProductsListingUI = (props) => {
           onClose={() => setShowPopup(false)}
           orderingBusiness={businessState?.business}
           getBusiness={getBusiness}
+          handleOpenCategoryDetails={handleOpenCategoryDetails}
         />
       </Modal>
       <Modal

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

@@ -37,7 +37,8 @@ export const BusinessSummary = (props) => {
     handleSelectedItem,
     handleDuplicateBusiness,
     handleDeleteBusiness,
-    extraOpen
+    extraOpen,
+    spoonityConfig
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -58,7 +59,7 @@ export const BusinessSummary = (props) => {
     window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
   }
 
-  const itemsExcluded = ['publishing']
+  const itemsExcluded = !!spoonityConfig ? ['publishing'] : ['publishing', 'spoonity_key']
 
   const businessConfigs = [
     {
@@ -124,6 +125,13 @@ export const BusinessSummary = (props) => {
     {
       key: 'webhooks',
       value: t('WEBHOOKS', 'Webhooks')
+    },
+    {
+      key: 'places',
+      value: t('PLACES', 'Places')
+    }, {
+      key: 'spoonity_key',
+      value: t('SPOONITY_KEY', 'Sponity key')
     }
   ]
 
@@ -177,7 +185,7 @@ export const BusinessSummary = (props) => {
           <RightHeader>
             <IconButton
               disabled
-              // onClick={() => handleSelectedItem('support')}
+            // onClick={() => handleSelectedItem('support')}
             >
               <LifePreserver />
             </IconButton>
@@ -271,7 +279,9 @@ export const BusinessSummary = (props) => {
           </BusinessDescription>
           <BusinessConfigsContainer isLoading={businessState?.loading}>
             {(isAdmin
-              ? businessConfigs
+              ? !!spoonityConfig
+                ? businessConfigs
+                : businessConfigs.filter(configs => configs.key !== 'spoonity_key')
               : businessConfigs.filter(c => !itemsExcluded.includes(c.key))
             ).map(config => (
               <BusinessConfigItem
@@ -282,7 +292,8 @@ export const BusinessSummary = (props) => {
                 <span>{config.value}</span>
                 <BsChevronRight />
               </BusinessConfigItem>
-            ))}
+            )
+            )}
           </BusinessConfigsContainer>
         </BusinessDetailsContent>
       </BusinessDetailsContainer>

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

@@ -24,7 +24,8 @@ const ProductStepUI = (props) => {
     business,
     isLoading,
     orderingBusiness,
-    countriesState
+    countriesState,
+    handleOpenCategoryDetails
   } = props
 
   const theme = useTheme()
@@ -39,6 +40,11 @@ const ProductStepUI = (props) => {
     onClose()
   }
 
+  const handleAddManuallyProduct = () => {
+    onClose()
+    handleOpenCategoryDetails()
+  }
+
   return (
     <Container>
       {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} setOption={setOption} countriesState={countriesState} />}
@@ -63,7 +69,7 @@ const ProductStepUI = (props) => {
           </ImageContent>
         </ImportMenuContainer>
       )}
-      {step === 3 && option === 2 && !actionState?.loading && (
+      {step === 3 && option === 2 && !actionState?.loading && actionState?.content?.products > 0 && (
         <ImportMenuContainer>
           <h2>{t('YOUR_MENU_HAS_BEEN_IMPORTED', 'Your menu has been imported')}</h2>
           <ImageContent>
@@ -74,6 +80,17 @@ const ProductStepUI = (props) => {
           </ButtonWrapper>
         </ImportMenuContainer>
       )}
+      {step === 3 && option === 2 && !actionState?.loading && actionState?.content?.products === 0 && (
+        <ImportMenuContainer>
+          <h2>{t('YOUR_MENU_COULDNT__BE_IMPORTED', 'Your menu couldn\'t be imported')}</h2>
+          <ImageContent>
+            <img src={theme.images.general.importMenu} alt='' />
+          </ImageContent>
+          <ButtonWrapper>
+            <Button color='primary' onClick={handleAddManuallyProduct}>{t('ADD_PRODUCTS_MANUALLY', 'Add products manually')}</Button>
+          </ButtonWrapper>
+        </ImportMenuContainer>
+      )}
       {step === 2 && option === 3 && (
         <UploadMenuGuide
           handleBack={() => setStep(1)}