ordering-ui-admin-external 1.8.5 → 1.10.0

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

@@ -0,0 +1,184 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { BusinessDetails } from './BusinessDetails'
+import { useLanguage, useOrder, useEvent, BusinessAdd as BusinessAddController } from 'ordering-components-admin-external'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { Images } from './Images'
+import { Schedule } from './Schedule'
+import { Photos } from './Photos'
+import { OrderTypePriceLevel } from './OrderTypePriceLevel'
+import { PaymentMethods } from './PaymentMethods'
+import { ReceiveOrders } from './ReceiveOrders'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { Button, IconButton } from '../../../styles'
+import { DeliveryZone } from './DeliveryZone'
+import { useHistory } from 'react-router-dom'
+import { Alert } from '../../Shared'
+import {
+  AddNewBusinessContainer,
+  BoxLayout,
+  ButtonWrapper,
+  HeaderTitleContainer
+} from './styles'
+
+const BusinessAddUI = (props) => {
+  const {
+    formState,
+    handleChangeAddress,
+    handleChangeInput,
+    handleChangeCenter,
+    handleChangeSwtich,
+    handleChangeGallery,
+    changeFormState,
+    paymethodsList,
+    handleAddBusiness,
+    kmlData,
+    handleUploadKmlFiles,
+    zoneState,
+    handleChangeZoneState,
+    gallery,
+    handleChangePaymethodIds,
+    paymethodIds,
+    handleChangeSchedule
+  } = props
+
+  const [, t] = useLanguage()
+  const [orderStatus] = useOrder()
+  const [events] = useEvent()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const handleSubmit = () => {
+    handleAddBusiness()
+  }
+
+  const handleGoToBusinessList = () => {
+    events.emit('go_to_page', { page: 'businesses' })
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (!formState?.loading && formState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: formState?.result?.result
+      })
+    }
+  }, [formState?.result])
+
+  const changeSchedule = useCallback((e) => handleChangeSchedule(e), [])
+
+  return (
+    <>
+      <AddNewBusinessContainer>
+        <HeaderTitleContainer>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <h1>{t('NEW_BUSINESS', 'New business')}</h1>
+        </HeaderTitleContainer>
+        <BoxLayout>
+          <BusinessDetails
+            formState={formState}
+            handleChangeAddress={handleChangeAddress}
+            handleChangeInput={handleChangeInput}
+            handleChangeCenter={handleChangeCenter}
+          />
+        </BoxLayout>
+        <BoxLayout>
+          <Images
+            formState={formState}
+            handleChangeSwtich={handleChangeSwtich}
+          />
+        </BoxLayout>
+        <BoxLayout>
+          <Schedule
+            handleChangeSchedule={changeSchedule}
+          />
+        </BoxLayout>
+        <BoxLayout>
+          <Photos
+            gallery={gallery}
+            handleChangeGallery={handleChangeGallery}
+          />
+        </BoxLayout>
+        <BoxLayout>
+          <OrderTypePriceLevel
+            formState={formState}
+            changeFormState={changeFormState}
+          />
+        </BoxLayout>
+        {orderStatus?.options?.type === 1 && (
+          <BoxLayout>
+            <DeliveryZone
+              kmlData={kmlData}
+              zoneState={zoneState}
+              formState={formState}
+              handleChangeZoneState={handleChangeZoneState}
+              handleUploadKmlFiles={handleUploadKmlFiles}
+            />
+          </BoxLayout>
+        )}
+        <BoxLayout>
+          <PaymentMethods
+            handleChangePaymethodIds={handleChangePaymethodIds}
+            paymethodIds={paymethodIds}
+            paymethodsList={paymethodsList}
+          />
+        </BoxLayout>
+        <BoxLayout>
+          <ReceiveOrders
+            formState={formState}
+            handleChangeInput={handleChangeInput}
+            changeFormState={changeFormState}
+          />
+        </BoxLayout>
+        <ButtonWrapper>
+          <Button
+            color='primary'
+            outline
+            onClick={handleGoToBusinessList}
+          >
+            {t('Cancel', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            onClick={handleSubmit}
+            disabled={formState?.loading}
+          >
+            {t('CONFIRM', 'Confirm')}
+          </Button>
+        </ButtonWrapper>
+      </AddNewBusinessContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const BusinessAdd = (props) => {
+  const history = useHistory()
+  const addNewBusinessProps = {
+    ...props,
+    UIComponent: BusinessAddUI,
+    handleOpenCategory: (slug) => history.push(`/stores/products/${slug}`)
+  }
+  return <BusinessAddController {...addNewBusinessProps} />
+}

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

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components'
+
+export const AddNewBusinessContainer = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+
+  @media print {
+    display: none;
+  }
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+  margin-bottom: 25px;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+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;
+  margin-bottom: 35px;
+  > div {
+    width: 100%;
+    max-width: 558px;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  padding-bottom: 30px;
+  button {
+    height: 44px;
+    border-radius: 8px;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 30px;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    button {
+      width: 200px;
+      &:first-child {
+        margin-right: 30px;
+        ${props => props.theme.rtl && css`
+          margin-right: 0;
+          margin-left: 30px;
+        `}
+      }
+    }
+  }
+`

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

@@ -37,6 +37,7 @@ export const TimeBlock = styled.div`
     border: none;
     outline: none;
     color: ${props => props.theme.colors.secundaryLight};
+    background: transparent;
 
     -moz-appearance: none;
     -webkit-appearance: none;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { BusinessDeliveryDetails } from '../BusinessDeliveryDetails'
 import { BusinessPickupDetails } from '../BusinessPickupDetails'
@@ -11,6 +11,10 @@ import {
 import { DriversGroupsListingDetails } from '../BusinessDeliveryGroupsDetails'
 
 export const BusinessDeliveryPickupMore = (props) => {
+  const {
+    setIsExtendExtraOpen
+  } = props
+
   const [, t] = useLanguage()
   const [selectedTab, setSelectedTab] = useState('delivery')
 
@@ -20,6 +24,10 @@ export const BusinessDeliveryPickupMore = (props) => {
     { key: 'driver_delivery_group', content: t('DRIVER_DELIVERY_GROUP', 'Driver Delivery Group') }
   ]
 
+  useEffect(() => {
+    setIsExtendExtraOpen(false)
+  }, [selectedTab])
+
   return (
     <Container>
       <h1>{t('DELIVERY_PICKUP_MORE', 'Delivery, pickup & more')}</h1>

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

@@ -217,7 +217,7 @@ export const BusinessDeliveryZoneInformation = (props) => {
                 maxLength={2}
                 value={formState.changes?.data?.distance ?? zone?.data?.distance ?? ''}
                 onInput={(e) => {
-                  e.target.value = e.target.value.match("^[1-9]{1,2}$")
+                  e.target.value = e.target.value.match('^[1-9]{1,2}$')
                 }}
                 onChange={e => handleChangeInput(e, configState?.configs?.distance_unit?.value)}
                 ref={register({
@@ -225,8 +225,7 @@ export const BusinessDeliveryZoneInformation = (props) => {
                 })}
               />
             </FormControl>
-          </Row>
-        }
+          </Row>}
         <FormControl>
           <label>{t('BUSINESS_ADDRESS', 'Business address')}</label>
           <Input
@@ -240,13 +239,12 @@ export const BusinessDeliveryZoneInformation = (props) => {
             <WrapperMap>
               {zoneType !== 5 &&
                 isMyZone &&
-                <button
-                  type='button'
-                  onClick={() => setClearState(true)}
-                >
-                  {t('CLEAR', 'Clear')}
-                </button>
-              }
+                  <button
+                    type='button'
+                    onClick={() => setClearState(true)}
+                  >
+                    {t('CLEAR', 'Clear')}
+                  </button>}
               <BusinessZoneGoogleMaps
                 distance={formState.changes?.data?.distance}
                 disabled={isMyZone}

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

@@ -39,6 +39,7 @@ export const TimeBlock = styled.div`
     border: none;
     outline: none;
     color: ${props => props.theme.colors.secundaryLight};
+    background: transparent;
 
     -moz-appearance: none;
     -webkit-appearance: none;

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

@@ -52,7 +52,7 @@ const BusinessProductAddFormUI = (props) => {
 
   const typeList = [
     { value: 'item', content: <Option>{t('ITEM', 'Item')}</Option> },
-    { value: 'service', content: <Option>{t('SERVICE', 'Service')}</Option> }
+    // { value: 'service', content: <Option>{t('SERVICE', 'Service')}</Option> }
   ]
 
   const durationList = [
@@ -202,16 +202,18 @@ const BusinessProductAddFormUI = (props) => {
             </DragAndDrop>
           </ExamineClick>
         </ProductImage>
-        <SelectWrapper notAllow>
-          <label>{t('TYPE', 'Type')}</label>
-          <Select
-            options={typeList}
-            className='select'
-            defaultValue={formState?.changes?.type ?? 'item'}
-            placeholder={t('SELECT_OPTION', 'Select an option')}
-            onChange={(value) => handleChangeItem({ type: value })}
-          />
-        </SelectWrapper>
+        {typeList?.length > 1 && (
+          <SelectWrapper notAllow>
+            <label>{t('TYPE', 'Type')}</label>
+            <Select
+              options={typeList}
+              className='select'
+              defaultValue={formState?.changes?.type ?? 'item'}
+              placeholder={t('SELECT_OPTION', 'Select an option')}
+              onChange={(value) => handleChangeItem({ type: value })}
+            />
+          </SelectWrapper>
+        )}
         {(formState?.changes?.type === 'service') && (
           <FieldRow>
             <SelectWrapper>

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

@@ -236,9 +236,9 @@ export const BusinessProductsCategoyInfo = (props) => {
               ? (<SkeletonImgWrapper><Skeleton /></SkeletonImgWrapper>)
               : ((!formState.changes?.header || formState.result?.result === 'Network Error' || formState.result.error)
                 ? category?.header &&
-                  (<img src={category?.header} alt='header image' loading='lazy' />)
+                (<img src={category?.header} alt='header image' loading='lazy' />)
                 : formState?.changes?.header &&
-                  <img src={formState?.changes?.header} alt='header image' loading='lazy' />
+                <img src={formState?.changes?.header} alt='header image' loading='lazy' />
               )}
             <UploadImageIconContainer>
               <UploadImageIcon>
@@ -267,9 +267,9 @@ export const BusinessProductsCategoyInfo = (props) => {
               ? (<SkeletonImgWrapper><Skeleton /></SkeletonImgWrapper>)
               : ((!formState.changes?.image || formState.result?.result === 'Network Error' || formState.result.error)
                 ? category?.image &&
-                  (<img src={category?.image} alt='logo image' loading='lazy' />)
+                (<img src={category?.image} alt='logo image' loading='lazy' />)
                 : formState?.changes?.image &&
-                  <img src={formState?.changes?.image} alt='logo image' loading='lazy' />
+                <img src={formState?.changes?.image} alt='logo image' loading='lazy' />
               )}
             <UploadImageIconContainer small>
               <UploadImageIcon small>
@@ -315,9 +315,6 @@ export const BusinessProductsCategoyInfo = (props) => {
           value={formState?.changes?.description || ''}
           onChange={handleChangeInput}
           autoComplete='off'
-          onKeyPress={e => {
-            if (e.which === 32) { e.preventDefault() }
-          }}
         />
       </CategoryNameWrapper>
       {!isAddMode && (

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

@@ -25,6 +25,7 @@ import { BusinessDetails } from '../BusinessDetails'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { ImportersButton } from '../ImportersButton'
 import { AddBusinessForm } from '../AddBusinessForm'
+import { ProductStep } from '../ProductStep'
 
 import {
   CategoryProductsContainer,
@@ -85,6 +86,7 @@ const BusinessProductsListingUI = (props) => {
   const categoryListRef = useRef()
   const [batchImageFormOpen, setBatchImageFormOpen] = useState(false)
   const [openSidebar, setOpenSidebar] = useState(null)
+  const [showPopup, setShowPopup] = useState(false)
 
   const [allowSpreadColumns, setAllowSpreadColumns] = useState({
     id: true,
@@ -221,6 +223,12 @@ const BusinessProductsListingUI = (props) => {
     }
   }, [slug])
 
+  useEffect(() => {
+    if (businessState?.business && businessState?.business?.categories?.length === 0) {
+      setShowPopup(true)
+    }
+  }, [businessState?.business])
+
   return (
     <>
       <CategoryProductsContainer>
@@ -476,6 +484,18 @@ const BusinessProductsListingUI = (props) => {
           onClose={() => setBatchImageFormOpen(false)}
         />
       </Modal>
+      <Modal
+        width={width > 1440 ? '40%' : '60%'}
+        padding='25px'
+        open={showPopup}
+        onClose={() => setShowPopup(false)}
+      >
+        <ProductStep
+          onClose={() => setShowPopup(false)}
+          orderingBusiness={businessState?.business}
+          getBusiness={getBusiness}
+        />
+      </Modal>
     </>
   )
 }

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

@@ -38,7 +38,8 @@ export const BusinessesList = (props) => {
     handleChangeBusinessIds,
     handleEnableAllBusiness,
     selectedBusinessActiveState,
-    setBusinessIds
+    setBusinessIds,
+    handleGotToAdd
   } = props
 
   const theme = useTheme()
@@ -215,7 +216,7 @@ export const BusinessesList = (props) => {
 
           <BusinessListBottomContainer>
             <AddNewButtonLink
-              onClick={() => handleOpenAddBusiness()}
+              onClick={() => handleGotToAdd()}
             >
               {t('ADD_NEW_STORE', 'Add new store')}
             </AddNewButtonLink>
@@ -227,6 +228,7 @@ export const BusinessesList = (props) => {
                     totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
                     handleChangePage={handleChangePage}
                     handleChangePageSize={handleChangePageSize}
+                    defaultPageSize={pagination?.pageSize}
                   />
                 )}
               </WrapperPagination>