ordering-ui-admin-external 1.14.3 → 1.15.0

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

@@ -10,8 +10,11 @@ import {
   WrapperMap,
   ErrorText,
   FormControl,
-  Row
+  Row,
+  Header,
+  DeliveryZoneInnerContainer
 } from './styles'
+import { CaretDownFill } from 'react-bootstrap-icons'
 
 export const DeliveryZone = (props) => {
   const {
@@ -31,6 +34,7 @@ export const DeliveryZone = (props) => {
   const [zoneData, setZoneData] = useState()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isShowMap, setIsShowMap] = useState(false)
+  const [hasContent, setHasContent] = useState(false)
   // const kmlRef = useRef(null)
 
   const typeOptions = [
@@ -120,121 +124,128 @@ export const DeliveryZone = (props) => {
 
   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>
+      <DeliveryZoneContainer>
+        <Header onClick={() => setHasContent(prev => !prev)}>
+          <h2>{t('LETS_CREATE_YOUR_FIRST_DELIVERY_ZONE', 'Let’s create your first Delivery Zone')}</h2>
+          <CaretDownFill />
+        </Header>
+        {hasContent && (
+          <DeliveryZoneInnerContainer>
+            <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('DISTANCE_FROM_STORE', 'Distance from store')}</label>
+              <label>{t('BUSINESS_ADDRESS', 'Business address')}</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)}
+                name='address'
+                defaultValue={formState?.changes?.address}
+                disabled
               />
             </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
+            {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={() => setClearState(true)}
+                  onClick={() => kmlRef.current.click()}
                 >
-                  {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>
-          )
+                  <ExamineClick
+                    onFiles={files => handleUploadKmlFiles(files)}
+                    childRef={e => { kmlRef.current = e }}
+                    accept='.kml,.kmz'
+                  >
+                    <span>{t('UPLOAD_KML', 'Upload KML')}</span>
+                  </ExamineClick>
+                </Button>
+              </KmlButtonWrapper>
+            )} */}
+          </DeliveryZoneInnerContainer>
         )}
-        {/* {(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')}

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

@@ -1,15 +1,36 @@
 import styled, { css } from 'styled-components'
 
 export const DeliveryZoneContainer = styled.div`
+  background: ${props => props.theme.colors.white};
+  border-radius: 7.6px;
+  padding: 25px 0px;
+  margin-bottom: 35px;
+
+  @media (min-width: 450px) {
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    padding: 25px 35px;
+  }
+`
+
+export const DeliveryZoneInnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   min-height: calc(100% - 130px);
+  width: 100%;
+  max-width: 558px;
+  margin-top: 23px;
+`
 
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
   h2 {
     font-weight: 600;
     font-size: 16px;
     line-height: 24px;
-    margin-bottom: 23px;
+    margin: 0;
   }
 `
 

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { CheckSquareFill, Square } from 'react-bootstrap-icons'
 import {
@@ -23,9 +23,15 @@ export const PaymentMethods = (props) => {
     handleChangePaymethodIds(updateIds)
   }
 
+  useEffect(() => {
+    if (!paymethodsList?.loading && paymethodsList?.paymethods?.length > 0) {
+      handleChangeIds(paymethodsList?.paymethods[0].id)
+    }
+  }, [paymethodsList])
+
   return (
     <Container>
-      <h2>{t('PAYMENT_METHODS', 'Payment methods')}</h2>
+      <h2>{t('PAYMENT_METHODS', 'Payment methods')}<sup>*</sup></h2>
       <ContentWrapper>
         {!paymethodsList?.loading && paymethodsList?.paymethods.map((paymethod, idx) => (
           <PaymethodItem key={paymethod?.id} isBorderTop={idx === 0} onClick={() => handleChangeIds(paymethod.id)}>

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

@@ -7,6 +7,10 @@ export const Container = styled.div`
     line-height: 24px;
     margin-top: 0;
     margin-bottom: 25px;
+    sup {
+      color: ${props => props.theme.colors.danger};
+      font-size: 13px;
+    }
   }
 `
 

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import React, { useEffect } from 'react'
+import { useLanguage, useSession } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { Input } from '../../../../styles'
 import {
@@ -11,17 +11,22 @@ import {
 } from './styles'
 
 export const ReceiveOrders = (props) => {
-  const { formState, handleChangeInput } = props
+  const { formState, handleChangeInput, changeFormState } = props
+  const [{ user }] = useSession()
 
   const [, t] = useLanguage()
   const theme = useTheme()
 
+  useEffect(() => {
+    if (user?.email) changeFormState({ email: user?.email })
+  }, [user])
+
   return (
     <ReceiveOrdersContainer>
       <h2>{t('RECEIVE_ORDERS', 'Receive orders')}</h2>
       <ContentWrapper>
         <FormControl>
-          <label>{t('BY_EMAIL', 'By Email')}</label>
+          <label>{t('BY_EMAIL', 'By Email')}<sup>*</sup></label>
           <Input
             name='email'
             defaultValue={formState?.changes?.email ?? ''}
@@ -32,10 +37,10 @@ export const ReceiveOrders = (props) => {
         <DownloadWrapper>
           <label>{t('DOWNLOADS_APPS', 'Downloads apps')}</label>
           <DownloadIconWrapper>
-            <a href='https://apps.apple.com/us/app/customer-app-2-0/id1607414555' target='_blank' rel='noopener noreferrer'>
+            <a href='https://apps.apple.com/us/app/store-app-2-0/id1608192050' target='_blank' rel='noopener noreferrer'>
               <img src={theme.images.general.appStore} alt='' />
             </a>
-            <a href='https://play.google.com/store/apps/details?id=com.ordering.onlineorderingappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
+            <a href='https://play.google.com/store/apps/details?id=com.ordering.storeappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
               <img src={theme.images.general.googlePlay} alt='' />
             </a>
           </DownloadIconWrapper>

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

@@ -20,6 +20,10 @@ export const FormControl = styled.div`
     font-size: 14px;
     line-height: 24px;
     margin-bottom: 12px;
+    sup {
+      color: ${props => props.theme.colors.danger};
+      font-size: 13px;
+    }
   }
   input {
     width: 100%;

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

@@ -9,16 +9,18 @@ import { OrderTypePriceLevel } from './OrderTypePriceLevel'
 import { PaymentMethods } from './PaymentMethods'
 import { ReceiveOrders } from './ReceiveOrders'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { Button, IconButton } from '../../../styles'
+import { Button, IconButton, Input } from '../../../styles'
 import { DeliveryZone } from './DeliveryZone'
 import { useHistory } from 'react-router-dom'
-import { Alert } from '../../Shared'
+import { Alert, Modal } from '../../Shared'
 import {
   AddNewBusinessContainer,
   BoxLayout,
   ButtonWrapper,
   HeaderTitleContainer,
-  MapWrapper
+  MapWrapper,
+  SlugEditWrapper,
+  SlugFormControl
 } from './styles'
 
 const BusinessAddUI = (props) => {
@@ -50,6 +52,7 @@ const BusinessAddUI = (props) => {
   const [{ configs }] = useConfig()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isSlugEdit, setIsSlugEdit] = useState(false)
 
   const handleSubmit = () => {
     if (paymethodIds?.length === 0) {
@@ -59,6 +62,17 @@ const BusinessAddUI = (props) => {
       })
       return
     }
+    if (!formState?.changes?.slug) {
+      setAlertState({
+        open: true,
+        content: t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Slug is required'
+        ).replace('_attribute_', t('SLUG', 'Slug'))
+      })
+      return
+    }
+    isSlugEdit && setIsSlugEdit(false)
     handleAddBusiness()
   }
 
@@ -75,10 +89,8 @@ const BusinessAddUI = (props) => {
 
   useEffect(() => {
     if (!formState?.loading && formState?.result?.error) {
-      setAlertState({
-        open: true,
-        content: formState?.result?.result
-      })
+      if (formState?.result?.result?.length === 0 && formState?.result?.result[0].toLowerCase().includes(t('SLUG', 'Slug').toLowerCase())) setIsSlugEdit(true)
+      else setAlertState({ open: true, content: formState?.result?.result })
     }
   }, [formState?.result])
 
@@ -146,15 +158,13 @@ const BusinessAddUI = (props) => {
           />
         </BoxLayout>
         {orderStatus?.options?.type === 1 && (
-          <BoxLayout>
-            <DeliveryZone
-              kmlData={kmlData}
-              zoneState={zoneState}
-              formState={formState}
-              handleChangeZoneState={handleChangeZoneState}
-              handleUploadKmlFiles={handleUploadKmlFiles}
-            />
-          </BoxLayout>
+          <DeliveryZone
+            kmlData={kmlData}
+            zoneState={zoneState}
+            formState={formState}
+            handleChangeZoneState={handleChangeZoneState}
+            handleUploadKmlFiles={handleUploadKmlFiles}
+          />
         )}
         <BoxLayout>
           <PaymentMethods
@@ -208,6 +218,27 @@ const BusinessAddUI = (props) => {
         onAccept={() => closeAlert()}
         closeOnBackdrop={false}
       />
+      <Modal
+        width='769px'
+        padding='30px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        open={isSlugEdit}
+        onClose={() => setIsSlugEdit(false)}
+      >
+        <SlugEditWrapper>
+          <p>{formState?.result?.result}</p>
+          <SlugFormControl>
+            <label>{t('SLUG', 'Slug')}</label>
+            <Input
+              name='slug'
+              placeholder={t('SLUG', 'Slug')}
+              value={formState?.changes?.slug}
+              onChange={handleChangeInput}
+            />
+          </SlugFormControl>
+          <Button color='primary' borderRadius='8px' onClick={handleSubmit}>{t('ACCEPT', 'Accept')}</Button>
+        </SlugEditWrapper>
+      </Modal>
     </>
   )
 }

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

@@ -61,7 +61,7 @@ export const BoxLayout = styled.div`
 
 export const ButtonWrapper = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   flex-direction: column;
   padding-bottom: 30px;
   button {
@@ -93,3 +93,29 @@ export const MapWrapper = styled.div`
   overflow: hidden;
   display: none;
 `
+
+export const SlugEditWrapper = styled.div`
+  p {
+    font-size: 16px;
+    margin-bottom: 20px;
+  }
+  button {
+    width: 100%;
+    height: 44px;
+    margin-top: 25px;
+    margin-left: auto;
+  }
+`
+
+export const SlugFormControl = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  }
+  input {
+    height: 44px;
+    width: 100%;
+  }
+`

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

@@ -74,7 +74,7 @@ export const BusinessAddStore = () => {
               handleChangeAddress(e)
             }}
             autoComplete='new-password'
-            types={['restaurant']}
+            types={['restaurant', 'bar', 'cafe', 'bakery', 'meal_delivery']}
           />
           <p>{t('START_TYPING_THEN_SELECT_AN_ADDRESS_FROM_THE_LIST', 'Start typing  then select an address from the list')}</p>
         </FormControl>

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   useUtils,
@@ -47,6 +48,8 @@ const BusinessBrandListingUI = (props) => {
     setOpenDetail
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ optimizeImage }] = useUtils()
@@ -64,6 +67,7 @@ const BusinessBrandListingUI = (props) => {
   const handleCloseSidebar = () => {
     setOpenDetail(false)
     setSelectedBrand(null)
+    history.replace(`${location.pathname}`)
   }
 
   const handleOpenSideBar = (id) => {
@@ -84,10 +88,13 @@ const BusinessBrandListingUI = (props) => {
     })
   }
 
-  const handleClickBrand = (e, brandId) => {
-    const isInvalid = e.target.closest('.brand_enable_control')
+  const handleClickBrand = (e, brandId, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.brand_enable_control')
     if (isInvalid) return
     handleOpenSideBar(brandId)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?id=${brandId}`)
+    }
   }
 
   const expandSideBar = () => {
@@ -126,6 +133,32 @@ const BusinessBrandListingUI = (props) => {
     }
   }, [brandFormState?.result])
 
+  useEffect(() => {
+    if (!brandListState?.brands?.length) return
+    const id = query.get('id')
+    if (id) {
+      handleClickBrand(null, Number(id), true)
+    }
+  }, [brandListState?.brands?.length])
+
+  const handleTabClick = (tab, isInitialRender) => {
+    setSelectedType(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    if (!selectedBrand) return
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(selectedType)
+    }
+  }, [selectedBrand])
+
   return (
     <>
       <BrandListingContainer>
@@ -273,14 +306,14 @@ const BusinessBrandListingUI = (props) => {
               <TabContainer>
                 <Tab
                   active={selectedType === 'general'}
-                  onClick={() => setSelectedType('general')}
+                  onClick={() => handleTabClick('general')}
                 >
                   {t('GENERAL', 'General')}
                 </Tab>
                 {selectedBrand && (
                   <Tab
                     active={selectedType === 'businesses'}
-                    onClick={() => setSelectedType('businesses')}
+                    onClick={() => handleTabClick('businesses')}
                   >
                     {t('BUSINESSES', 'Businesses')}
                   </Tab>