ordering-ui-admin-external 1.10.0 → 1.11.1

package/src/components/SidebarMenu/index.js

@@ -59,6 +59,7 @@ const SidebarMenuUI = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const windowSize = useWindowSize()
   const isPoweredByOrderingModule = configs?.powered_by_ordering_module?.value
+  const isEnabledAppointmentsFeature = configs?.appointments?.value
 
   const [showMessage, setShowMessage] = useState(false)
 
@@ -209,6 +210,8 @@ const SidebarMenuUI = (props) => {
     // }
   ]
 
+  const buisnessOwnerUsersMenuIncluded = [3]
+
   const settingsSubMenus = [
     {
       id: 1,
@@ -326,12 +329,18 @@ const SidebarMenuUI = (props) => {
       title: t('PROMOTION_AUTOMATION', 'Promotions automation'),
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
-    }
+    },
     // {
     //   id: 2,
     //   title: t('CAMPAIGN', 'Campaign'),
     //   pageName: 'campaign',
     //   url: '/marketing/campaign'
+    // },
+    // {
+    //   id: 3,
+    //   title: t('AD_BANNERS', 'Ad banners'),
+    //   pageName: 'ad_banners',
+    //   url: '/marketing/ad-banners'
     // }
   ]
 
@@ -470,13 +479,25 @@ const SidebarMenuUI = (props) => {
                           {ordersSubMenus.map(item => (
                             !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
                             !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
-                              <SubMenu
-                                key={item.id}
-                                active={location.pathname.includes(item.url)}
-                                onClick={() => handleGoToPage({ page: item.pageName })}
-                              >
-                                {firstLetterCapital(item.title)}
-                              </SubMenu>
+                              item.pageName === 'appointments' ? (
+                                isEnabledAppointmentsFeature && (
+                                  <SubMenu
+                                    key={item.id}
+                                    active={location.pathname.includes(item.url)}
+                                    onClick={() => handleGoToPage({ page: item.pageName })}
+                                  >
+                                    {firstLetterCapital(item.title)}
+                                  </SubMenu>
+                                )
+                              ) : (
+                                <SubMenu
+                                  key={item.id}
+                                  active={location.pathname.includes(item.url)}
+                                  onClick={() => handleGoToPage({ page: item.pageName })}
+                                >
+                                  {firstLetterCapital(item.title)}
+                                </SubMenu>
+                              )
                             )
                           ))}
                         </MenuContent>
@@ -527,7 +548,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level === 0 && (
+                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 2) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='4'
@@ -543,15 +564,32 @@ const SidebarMenuUI = (props) => {
                       </ContextAwareToggle>
                       <Accordion.Collapse eventKey='4'>
                         <MenuContent>
-                          {usersSubMenus.map(item => (
-                            <SubMenu
-                              key={item.id}
-                              active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
-                              onClick={() => handleGoToPage({ page: item.pageName })}
-                            >
-                              {item.title}
-                            </SubMenu>
-                          ))}
+                          {
+                            (sessionState?.user?.level === 2
+                              ? usersSubMenus.filter(menu => buisnessOwnerUsersMenuIncluded.includes(menu.id))
+                              : usersSubMenus
+                            ).map(item => (
+                              item.pageName === 'professionals' ? (
+                                isEnabledAppointmentsFeature && (
+                                  <SubMenu
+                                    key={item.id}
+                                    active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
+                                    onClick={() => handleGoToPage({ page: item.pageName })}
+                                  >
+                                    {item.title}
+                                  </SubMenu>
+                                )
+                              ) : (
+                                <SubMenu
+                                  key={item.id}
+                                  active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
+                                  onClick={() => handleGoToPage({ page: item.pageName })}
+                                >
+                                  {item.title}
+                                </SubMenu>
+                              )
+                            ))
+                          }
                         </MenuContent>
                       </Accordion.Collapse>
                     </MenuContainer>

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

@@ -15,7 +15,8 @@ export const BusinessDetails = (props) => {
     formState,
     handleChangeAddress,
     handleChangeInput,
-    handleChangeCenter
+    handleChangeCenter,
+    placeId
   } = props
 
   const [, t] = useLanguage()
@@ -45,7 +46,7 @@ export const BusinessDetails = (props) => {
           <Input
             name='name'
             placeholder={t('NAME', 'Name')}
-            defaultValue={formState?.changes?.name ?? ''}
+            value={formState?.changes?.name ?? ''}
             onChange={e => {
               handleChangeInput([{ name: 'name', value: e.target.value }, { name: 'slug', value: stringToSlug(e.target.value) }], true)
             }}
@@ -53,21 +54,23 @@ export const BusinessDetails = (props) => {
         </FormControl>
         <FormControl>
           <label>{t('ADDRESS', 'Address')}</label>
-          <GoogleAutocompleteInput
-            name='address'
-            className='input-autocomplete'
-            apiKey={googleMapsApiKey}
-            placeholder={t('ADDRESS', 'Address')}
-            onChangeAddress={(e) => {
-              handleChangeAddress(e)
-            }}
-            onChange={(e) => {
-              handleChangeInput(e)
-            }}
-            defaultValue={formState?.changes?.address ?? ''}
-            autoComplete='new-password'
-            countryCode={configs?.country_autocomplete?.value || '*'}
-          />
+          {googleMapsApiKey && (
+            <GoogleAutocompleteInput
+              name='address'
+              className='input-autocomplete'
+              apiKey={googleMapsApiKey}
+              placeholder={t('ADDRESS', 'Address')}
+              onChangeAddress={(e) => {
+                handleChangeAddress(e)
+              }}
+              onChange={(e) => {
+                handleChangeInput(e)
+              }}
+              defaultValue={formState?.changes?.address ?? ''}
+              autoComplete='new-password'
+              countryCode={configs?.country_autocomplete?.value || '*'}
+            />
+          )}
         </FormControl>
         <FormControl>
           <label>{t('ZIPCODE', 'Zipcode')}</label>
@@ -80,23 +83,25 @@ export const BusinessDetails = (props) => {
         </FormControl>
         <GoogleMapContainer>
           <label>{t('GOOGLE_PLACE_ID', 'Google place ID')}</label>
-          <p>{googleMapsApiKey}</p>
-          <WrapperMap>
-            <GoogleMapsMap
-              apiKey={configs?.google_maps_api_key?.value}
-              location={formState?.changes?.location ?? defaultPosition}
-              mapControls={googleMapsControls}
-              handleChangeCenter={handleChangeCenter}
-              isFitCenter
-            />
-          </WrapperMap>
+          <p>{placeId ?? googleMapsApiKey}</p>
+          {configs?.google_maps_api_key?.value && (
+            <WrapperMap>
+              <GoogleMapsMap
+                apiKey={configs?.google_maps_api_key?.value}
+                location={formState?.changes?.location ?? defaultPosition}
+                mapControls={googleMapsControls}
+                handleChangeCenter={handleChangeCenter}
+                isFitCenter
+              />
+            </WrapperMap>
+          )}
         </GoogleMapContainer>
         <FormControl noBottom>
-          <label>{t('INT_NUMBER', 'Int. number')}</label>
+          <label>{t('PHONE_NUMBER', 'Phone number')}</label>
           <Input
             name='cellphone'
-            placeholder={t('INT_NUMBER', 'Int. number')}
-            defaultValue={formState?.changes?.cellphone ?? ''}
+            placeholder={t('PHONE_NUMBER', 'Phone number')}
+            value={formState?.changes?.cellphone ?? ''}
             onChange={handleChangeInput}
           />
         </FormControl>

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

@@ -70,6 +70,7 @@ export const GoogleMapContainer = styled.div`
     line-height: 24px;
     margin: 0;
     color: ${props => props.theme.colors.lightGray};
+    word-break: break-all;
   }
 `
 

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

@@ -2,7 +2,7 @@ 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 { bytesConverter, getUniqueId } from '../../../../utils'
 import {
   PhotosContainer,
   ContentWrapper,
@@ -48,12 +48,6 @@ export const Photos = (props) => {
     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]

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

@@ -7,7 +7,8 @@ import {
 
 export const Schedule = memo((props) => {
   const {
-    handleChangeSchedule
+    handleChangeSchedule,
+    schedule
   } = props
 
   const [, t] = useLanguage()
@@ -16,6 +17,7 @@ export const Schedule = memo((props) => {
     <ScheduleContainer>
       <h2>{t('SCHEDULE', 'Schedule')}</h2>
       <ScheduleController
+        scheduleList={schedule}
         handleChangeScheduleState={val => handleChangeSchedule(val)}
       />
     </ScheduleContainer>

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { BusinessDetails } from './BusinessDetails'
-import { useLanguage, useOrder, useEvent, BusinessAdd as BusinessAddController } from 'ordering-components-admin-external'
+import { useLanguage, useOrder, useEvent, useConfig, GoogleMapsMap, BusinessAdd as BusinessAddController } from 'ordering-components-admin-external'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import { Images } from './Images'
 import { Schedule } from './Schedule'
@@ -17,7 +17,8 @@ import {
   AddNewBusinessContainer,
   BoxLayout,
   ButtonWrapper,
-  HeaderTitleContainer
+  HeaderTitleContainer,
+  MapWrapper
 } from './styles'
 
 const BusinessAddUI = (props) => {
@@ -38,16 +39,26 @@ const BusinessAddUI = (props) => {
     gallery,
     handleChangePaymethodIds,
     paymethodIds,
-    handleChangeSchedule
+    handleChangeSchedule,
+    placeId,
+    setDetails
   } = props
 
   const [, t] = useLanguage()
   const [orderStatus] = useOrder()
   const [events] = useEvent()
+  const [{ configs }] = useConfig()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleSubmit = () => {
+    if (paymethodIds?.length === 0) {
+      setAlertState({
+        open: true,
+        content: t('AT_LEAST_A_PAYMENT_METHOD_REQUIRED', 'At least a payment method is required')
+      })
+      return
+    }
     handleAddBusiness()
   }
 
@@ -73,6 +84,20 @@ const BusinessAddUI = (props) => {
 
   const changeSchedule = useCallback((e) => handleChangeSchedule(e), [])
 
+  const googleMapsControls = {
+    defaultZoom: 15,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: false,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    }
+  }
+
+  const defaultPosition = { lat: 40.77473399999999, lng: -73.9653844 }
+
   return (
     <>
       <AddNewBusinessContainer>
@@ -93,6 +118,7 @@ const BusinessAddUI = (props) => {
             handleChangeAddress={handleChangeAddress}
             handleChangeInput={handleChangeInput}
             handleChangeCenter={handleChangeCenter}
+            placeId={placeId}
           />
         </BoxLayout>
         <BoxLayout>
@@ -104,6 +130,7 @@ const BusinessAddUI = (props) => {
         <BoxLayout>
           <Schedule
             handleChangeSchedule={changeSchedule}
+            schedule={formState?.changes?.schedule}
           />
         </BoxLayout>
         <BoxLayout>
@@ -159,6 +186,18 @@ const BusinessAddUI = (props) => {
             {t('CONFIRM', 'Confirm')}
           </Button>
         </ButtonWrapper>
+        <MapWrapper>
+          {placeId && configs?.google_maps_api_key?.value && (
+            <GoogleMapsMap
+              apiKey={configs?.google_maps_api_key?.value}
+              location={defaultPosition}
+              mapControls={googleMapsControls}
+              isFitCenter
+              setDetails={setDetails}
+              placeId={placeId}
+            />
+          )}
+        </MapWrapper>
       </AddNewBusinessContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -45,14 +45,18 @@ export const HeaderTitleContainer = styled.div`
 
 export const BoxLayout = styled.div`
   background: ${props => props.theme.colors.white};
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
   border-radius: 7.6px;
-  padding: 25px 35px;
+  padding: 25px 0px;
   margin-bottom: 35px;
   > div {
     width: 100%;
     max-width: 558px;
   }
+
+  @media (min-width: 450px) {
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    padding: 25px 35px;
+  }
 `
 
 export const ButtonWrapper = styled.div`
@@ -83,3 +87,9 @@ export const ButtonWrapper = styled.div`
     }
   }
 `
+
+export const MapWrapper = styled.div`
+  max-height: 0px;
+  overflow: hidden;
+  display: none;
+`

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

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { useLanguage, useEvent, useConfig, GoogleAutocompleteInput } from 'ordering-components-admin-external'
+import { ArrowRight, InfoCircleFill } from 'react-bootstrap-icons'
+import { Button, IconButton } from '../../../styles'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  FormControl,
+  Label,
+  ButtonGroup,
+  InfoWrapper,
+  InfoContent
+} from './styles'
+
+export const BusinessAddStore = () => {
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const [{ configs }] = useConfig()
+  const [address, setAddress] = useState()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const googleMapsApiKey = configs?.google_maps_api_key?.value
+
+  const handleContinue = () => {
+    if (!address?.map_data?.place_id) {
+      setAlertState({
+        open: true,
+        content: t('ADDRESS_REQUIRED', 'Address required')
+      })
+      return
+    }
+    events.emit('go_to_page', { page: 'business_add', search: `?placeId=${address?.map_data?.place_id}` })
+  }
+
+  const handleSkip = () => {
+    events.emit('go_to_page', { page: 'business_add' })
+  }
+
+  const handleChangeAddress = (e) => {
+    setAddress(e)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  return (
+    <>
+      <Container>
+        <h2>{t('ADD_NEW_STORE', 'Add new store')}</h2>
+        <FormControl>
+          <Label>
+            <p>{t('RESTAURANT_OR_STORE_NAME', 'Restaurant or store name')}</p>
+            <InfoWrapper>
+              <IconButton
+                color='primary'
+              >
+                <InfoCircleFill />
+              </IconButton>
+              <InfoContent>
+                {t('ADD_NEW_STORE_INFO', 'If you can’t find your restaurant in the results, try adding your city at the end of your restaurant name (For example: “Pizza Place New York City”)')}
+              </InfoContent>
+            </InfoWrapper>
+          </Label>
+          <GoogleAutocompleteInput
+            name='address'
+            className='input-autocomplete'
+            apiKey={googleMapsApiKey}
+            placeholder={t('ENTER_YOUR_RESTAURANT_OR_STORE_NAME', 'Enter your Restaurant or Store name')}
+            onChangeAddress={(e) => {
+              handleChangeAddress(e)
+            }}
+            autoComplete='new-password'
+            countryCode={configs?.country_autocomplete?.value || '*'}
+            types={['restaurant']}
+          />
+          <p>{t('START_TYPING_THEN_SELECT_AN_ADDRESS_FROM_THE_LIST', 'Start typing  then select an address from the list')}</p>
+        </FormControl>
+        <ButtonGroup>
+          <span onClick={handleSkip}>{t('SKIP_AND_ADD_MANUALLY', 'Skip and  Add manually')}</span>
+          <Button color='primary' onClick={handleContinue}>
+            <span>{t('CONTINUE', 'Continue')}</span>
+            <ArrowRight />
+          </Button>
+        </ButtonGroup>
+      </Container>
+      <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/BusinessAddStore/styles.js

@@ -0,0 +1,147 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  > h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    margin: 0;
+  }
+`
+
+export const FormControl = styled.div`
+  margin-top: 50px;
+  input {
+    width: 100%;
+    height: 44px;
+  }
+  > p {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: 10px;
+    margin-bottom: 0;
+  }
+  .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')};
+    }
+  }
+`
+
+export const Label = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-top: 55px;
+  > span {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  button {
+    border-radius: 8px;
+    height: 44px;
+    position: relative;
+    width: 100%;
+    margin-top: 15px;
+    svg {
+      position: absolute;
+      right: 15px;
+      top: 10px;
+      font-size: 21px;
+    }
+  }
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > button {
+      width: 50%;
+      margin-top: 0px;
+    }
+  }
+`
+
+export const InfoWrapper = styled.div`
+  position: relative;
+
+  > button {
+    height: 21px;
+    svg {
+      width: 13px;
+      height: 13px;
+      color: ${props => props.theme.colors.headingColor};
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  color: ${props => props.theme.colors.primary};
+  background: ${props => props.theme.colors.backgroundInfo};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 10px 16px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+`