ordering-ui-admin-external 1.9.0 → 1.11.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;
+    `}
+  }
+`

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

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { BusinessDeliveryDetails } from '../BusinessDeliveryDetails'
 import { BusinessPickupDetails } from '../BusinessPickupDetails'
+import { BusinessEta } from '../BusinessEta'
+import { DragScroll } from '../../Shared'
 
 import {
   Container,
@@ -21,7 +23,8 @@ export const BusinessDeliveryPickupMore = (props) => {
   const tabs = [
     { key: 'delivery', content: t('DELIVERY', 'Delivery') },
     { key: 'pickup', content: t('PICKUP', 'Pickup') },
-    { key: 'driver_delivery_group', content: t('DRIVER_DELIVERY_GROUP', 'Driver Delivery Group') }
+    { key: 'driver_delivery_group', content: t('DRIVER_DELIVERY_GROUP', 'Driver Delivery Group') },
+    { key: 'advanced_eta', content: t('ADVANCED_ETA', 'Advanced ETA') }
   ]
 
   useEffect(() => {
@@ -32,15 +35,17 @@ export const BusinessDeliveryPickupMore = (props) => {
     <Container>
       <h1>{t('DELIVERY_PICKUP_MORE', 'Delivery, pickup & more')}</h1>
       <TabsContainer>
-        {tabs.map(tab => (
-          <Tab
-            key={tab.key}
-            active={tab.key === selectedTab}
-            onClick={() => setSelectedTab(tab.key)}
-          >
-            {tab.content}
-          </Tab>
-        ))}
+        <DragScroll>
+          {tabs.map(tab => (
+            <Tab
+              key={tab.key}
+              active={tab.key === selectedTab}
+              onClick={() => setSelectedTab(tab.key)}
+            >
+              {tab.content}
+            </Tab>
+          ))}
+        </DragScroll>
       </TabsContainer>
       {selectedTab === 'delivery' && (
         <BusinessDeliveryDetails {...props} />
@@ -51,6 +56,9 @@ export const BusinessDeliveryPickupMore = (props) => {
       {selectedTab === 'driver_delivery_group' && (
         <DriversGroupsListingDetails {...props} />
       )}
+      {selectedTab === 'advanced_eta' && (
+        <BusinessEta {...props} />
+      )}
     </Container>
   )
 }

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

@@ -14,8 +14,6 @@ export const Container = styled.div`
   }
 `
 export const TabsContainer = styled.div`
-  width: 100%;
-  display: flex;
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};
   margin-bottom: 24px;
   margin-top: 15px;

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

@@ -0,0 +1,82 @@
+import React from 'react'
+import { useLanguage, useUtils, BusinessEta as BusinessEtaController } from 'ordering-components-admin-external'
+import { Button, Input } from '../../../styles'
+import { Select } from '../../../styles/Select/FirstSelect'
+
+import {
+  Container,
+  SectionTitle,
+  SelectWrapper,
+  TimeItemContainer,
+  TimeWrapper,
+  TimesContainer
+} from './styles'
+
+const BusinessEtaUI = (props) => {
+  const {
+    selectedOption,
+    setSelectedOption,
+    formState,
+    handleChangeInput,
+    hanldeUpdateBusinessEtaTimes
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ getOrderState }] = useUtils()
+
+  const statusTimeOptions = [
+    { value: 'status', content: t('ESTIMATED_TIMES_BY_STATUS', 'Estimated times by status') },
+    { value: 'status_penalty', content: t('ESTIMATED_PENALTY_TIMES_BY_STATUS', 'Estimated penalty times by status') }
+  ]
+
+  return (
+    <Container>
+      <SectionTitle>{t('STATUS_TIME', 'Status time')}</SectionTitle>
+      <SelectWrapper>
+        <Select
+          placeholder={t('SELECT_TIME', 'Select time')}
+          defaultValue={selectedOption}
+          options={statusTimeOptions}
+          onChange={val => setSelectedOption(val)}
+        />
+      </SelectWrapper>
+      <TimesContainer>
+        {[...Array(24).keys()].map(index => (
+          <TimeItemContainer key={`${selectedOption}:${index}`}>
+            <span>{getOrderState(index)}</span>
+            <TimeWrapper>
+              <Input
+                type='number'
+                name={`${selectedOption}:${index}`}
+                defaultValue={formState.changes?.[`${selectedOption}:${index}`] || 0}
+                onChange={handleChangeInput}
+                onKeyPress={(e) => {
+                  if (!/^[0-9]$/.test(e.key)) {
+                    e.preventDefault()
+                  }
+                }}
+              />
+              <span>{t('MINUTES', 'Minutes')}</span>
+            </TimeWrapper>
+          </TimeItemContainer>
+        ))}
+      </TimesContainer>
+      <Button
+        borderRadius='8px'
+        color='primary'
+        disabled={formState.loading}
+        onClick={hanldeUpdateBusinessEtaTimes}
+      >
+        {t('SAVE', 'Save')}
+      </Button>
+    </Container>
+  )
+}
+
+export const BusinessEta = (props) => {
+  const businessEtaProps = {
+    ...props,
+    UIComponent: BusinessEtaUI
+  }
+  return <BusinessEtaController {...businessEtaProps} />
+}

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

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  height: calc(100% - 130px);
+  > button {
+    position: sticky;
+    top: 100%;
+    margin-top: 30px;
+    height: 44px;
+  }
+`
+export const TimesContainer = styled.div`
+  height: calc(100% - 150px);
+  overflow: auto;
+  margin-top: 10px;
+  padding: 0 2px;
+`
+export const SectionTitle = styled.h2`
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  margin-top: 0;
+`
+export const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  .select {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 2px;
+    ` : css`
+      margin-right: 2px;
+    `}
+    font-size: 14px;
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+    > div:first-child {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    .list {
+      > div {
+        white-space: nowrap;
+      }
+    }
+  }
+`
+export const TimeItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  font-size: 14px;
+`
+export const TimeWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 10px 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};
+  `}
+  input {
+    margin: 0 15px;
+    padding: 10px 0;
+    width: 50px;
+    text-align: center;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    -moz-appearance: textfield;
+  }
+`

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

@@ -174,6 +174,7 @@ const BusinessMenuUI = (props) => {
               width='80%'
               open={showOption === 'option'}
               onClose={() => handleCloseOption()}
+              padding='20px 0 0 0'
             >
               <BusinessMenuOptions
                 open={showOption === 'option'}

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'
 export const BusinessMenuBasicContainer = styled.div`
   max-height: calc(100vh - 200px);
   overflow: auto;
-  padding: 0 5px;
+  padding: 0;
   input:not([type='checkbox']),
   textarea {
     width: 100%;
@@ -12,6 +12,9 @@ export const BusinessMenuBasicContainer = styled.div`
     height: 40px;
     margin-top: 50px;
   }
+  @media (min-width: 450px) {
+    padding: 0 5px;
+  }
 `
 
 export const FieldName = styled.p`

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

@@ -28,7 +28,7 @@ export const DesktopBackground = styled.div`
   `}
   display: flex;
   justify-content: center;
-  max-height: calc(90vh - 150px);
+  max-height: calc(90vh - 50px);
   overflow: auto;
 `
 export const ProductInfoModalPreview = styled.div`
@@ -42,13 +42,18 @@ export const ProductInfoModalPreview = styled.div`
   `}
 
   ${({ isMobileView }) => isMobileView && css`
-    width: 325px;
-    height: 650px;
+    width: 270px;
+    height: 540px;
     background-image: url(${({ src }) => src});
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
-    padding: 12px;
+    padding: 29px;
+    @media (min-width: 576px) {
+      width: 325px;
+      height: 650px;
+      padding: 12px;
+    }
   `}
 `
 export const MobileContentMask = styled.div`
@@ -59,12 +64,15 @@ export const MobileContentMask = styled.div`
     mask-repeat: no-repeat;
     -webkit-mask-position: center;
     mask-position: center;
-    height: 630px;
+    height: 495px;
     overflow: auto;
     ::-webkit-scrollbar {
       width: 0px;
     }
     background: ${props => props.theme.colors.backgroundPage};
+    @media (min-width: 576px) {
+      height: 630px;
+    }
   `}
 `