ordering-ui-admin-external 1.27.1 → 1.28.1

package/src/components/Delivery/DriversGroupsList/styles.js

@@ -27,18 +27,19 @@ export const GroupsTable = styled.table`
 
   tbody {
     border-bottom: 1px solid ${props => props.theme.colors.borderColor};
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${props => props.theme.colors.lightPrimary};
-    }
-    &.active {
-      background-color: ${props => props.theme.colors.lightPrimary};
-      td {
-        border-top: 1px solid ${props => props.theme.colors.primary};
-        border-bottom: 1px solid ${props => props.theme.colors.primary};
+    ${({ disabled }) => !disabled && css`
+      cursor: pointer;
+      &:hover {
+        background-color: ${props => props.theme.colors.lightPrimary};
       }
-    }
+      &.active {
+        background-color: ${props => props.theme.colors.lightPrimary};
+        td {
+          border-top: 1px solid ${props => props.theme.colors.primary};
+          border-bottom: 1px solid ${props => props.theme.colors.primary};
+        }
+      }
+    `}
   }
 `
 

package/src/components/Delivery/UserAddForm/index.js

@@ -340,20 +340,39 @@ const UserAddFormUI = (props) => {
                   )
                 )}
                 {isDriversPage && (
-                  <InputWrapper>
-                    <DefaultSelect
-                      placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
-                      defaultValue={formState?.changes?.timezone}
-                      options={timezonesOptions}
-                      onChange={val => handleChangeSwtich('timezone', val)}
-                      optionInnerMaxHeight='300px'
-                      isShowSearchBar
-                      searchBarIsCustomLayout
-                      searchBarIsNotLazyLoad
-                      searchValue={timezoneSearchValue}
-                      handleChangeSearch={setTimezoneSearchValue}
+                  <>
+                    <Input
+                      name='external_id'
+                      className='form'
+                      placeholder={t('EXTERNAL_ID', 'External Id')}
+                      defaultValue={
+                        formState?.result?.result
+                          ? formState?.result?.result?.external_id
+                          : formState?.changes?.external_id ?? ''
+                      }
+                      onChange={handleChangeInput}
+                      autoComplete='off'
+                      onKeyPress={(e) => {
+                        if (!/^[0-9]$/.test(e.key)) {
+                          e.preventDefault()
+                        }
+                      }}
                     />
-                  </InputWrapper>
+                    <InputWrapper>
+                      <DefaultSelect
+                        placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
+                        defaultValue={formState?.changes?.timezone}
+                        options={timezonesOptions}
+                        onChange={val => handleChangeSwtich('timezone', val)}
+                        optionInnerMaxHeight='300px'
+                        isShowSearchBar
+                        searchBarIsCustomLayout
+                        searchBarIsNotLazyLoad
+                        searchValue={timezoneSearchValue}
+                        handleChangeSearch={setTimezoneSearchValue}
+                      />
+                    </InputWrapper>
+                  </>
                 )}
                 {!!showInputPhoneNumber && (
                   <InputPhoneNumber

package/src/components/Delivery/UserFormDetails/index.js

@@ -274,20 +274,37 @@ export const UserFormDetailsUI = (props) => {
               )
             )}
             {isDriversPage && (
-              <InputWrapper isTimezone>
-                <DefaultSelect
-                  placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
-                  defaultValue={formState?.changes?.timezone ?? user?.timezone ?? ''}
-                  options={timezonesOptions}
-                  onChange={val => handleChangeSwtich('timezone', val)}
-                  optionInnerMaxHeight='300px'
-                  isShowSearchBar
-                  searchBarIsCustomLayout
-                  searchBarIsNotLazyLoad
-                  searchValue={timezoneSearchValue}
-                  handleChangeSearch={setTimezoneSearchValue}
+              <>
+                <Input
+                  name='external_id'
+                  className='form'
+                  placeholder={t('EXTERNAL_ID', 'External Id')}
+                  defaultValue={
+                    formState?.changes?.external_id ?? (user && user?.external_id) ?? ''
+                  }
+                  onChange={handleChangeInput}
+                  autoComplete='off'
+                  onKeyPress={(e) => {
+                    if (!/^[0-9]$/.test(e.key)) {
+                      e.preventDefault()
+                    }
+                  }}
                 />
-              </InputWrapper>
+                <InputWrapper isTimezone>
+                  <DefaultSelect
+                    placeholder={t('SELECT_TIMEZONE', 'Select a timezone')}
+                    defaultValue={formState?.changes?.timezone ?? user?.timezone ?? ''}
+                    options={timezonesOptions}
+                    onChange={val => handleChangeSwtich('timezone', val)}
+                    optionInnerMaxHeight='300px'
+                    isShowSearchBar
+                    searchBarIsCustomLayout
+                    searchBarIsNotLazyLoad
+                    searchValue={timezoneSearchValue}
+                    handleChangeSearch={setTimezoneSearchValue}
+                  />
+                </InputWrapper>
+              </>
             )}
             {!!showInputPhoneNumber && (
               <InputPhoneNumber

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -151,7 +151,9 @@ export const AdvancedSettings = (props) => {
   ]
 
   const buttonList = [
-    { name: t('BORDER_RADIUS', 'Border Radius'), type: 'input', path: 'general.components.buttons.borderRadius' }
+    { name: t('BUTTON_COLOR', 'Button color'), type: 'input', path: 'general.components.buttons.color' },
+    { name: t('BORDER_RADIUS', 'Border radius'), type: 'input', path: 'general.components.buttons.borderRadius' },
+    { name: t('BUTTON_TEXT_COLOR', 'Button text color'), type: 'input', path: 'general.components.buttons.buttonTextColor' }
   ]
 
   const homeImageFullScreen = [

package/src/components/MyProducts/OrderingWebsite/index.js

@@ -188,6 +188,11 @@ const OrderingWebsiteUI = (props) => {
     orderingTheme.themes[0]?.values && setAdvancedValues(JSON.parse(JSON.stringify(orderingTheme.themes[0]?.values)))
   }
 
+  const handleChangeTab = (key) => {
+    setSelectedSetting(key)
+    setSelectedSubSetting('')
+  }
+
   return (
     <>
       <Container>
@@ -240,7 +245,7 @@ const OrderingWebsiteUI = (props) => {
                 <Tab
                   key={setting.key}
                   active={selectedSetting === setting.key}
-                  onClick={() => !orderingTheme?.loading && setSelectedSetting(setting.key)}
+                  onClick={() => !orderingTheme?.loading && handleChangeTab(setting.key)}
                 >
                   {setting.name}
                 </Tab>
@@ -340,14 +345,14 @@ const OrderingWebsiteUI = (props) => {
                   {orderingTheme?.loading ? (
                     <Skeleton height={40} style={{ width: '100%' }} />
                   ) : (
-                    <Button
-                      color='primary'
-                      outline
-                      borderRadius='8px'
+                        <Button
+                          color='primary'
+                          outline
+                          borderRadius='8px'
                       onClick={() => window.open('https://www.ordering.co/custom-domain-change', '_blank')}
-                    >
+                        >
                       {t('REQUEST_CUSTOM_DOMAIN', 'Request custom domain')}
-                    </Button>
+                        </Button>
                     // <>
                     //   {site?.domain && site?.ssl_status !== 'error' && (
                     //     <TemporalDomail isDisabled={site?.ssl_process_status === 'pending'} marginBottom={site?.ssl_process_status === 'ended'}>
@@ -628,49 +633,51 @@ const OrderingWebsiteUI = (props) => {
           </FormWrapper>
         )}
         {selectedSetting === 'advanced' && (
-          <InputFormWrapper>
-            <TitleWrapper isMargin>
-              <h4>{t('SETTINGS', 'Settings')}</h4>
-              <CustomDomainInfo>
-                <IconButton
-                  color='primary'
-                >
-                  <InfoCircleFill />
-                </IconButton>
-                <CustomDomainInfoContent>
-                  <span>{t('ADVANCED_SETTING_HELP', 'For now you can\'t use layouts and advanced setting together, if you change between layouts and advance settings the settings will be reset to default')}</span>
-                </CustomDomainInfoContent>
-              </CustomDomainInfo>
-            </TitleWrapper>
-            <RadioItem
-              onClick={() => handleChangeSubSetting('advanced')}
-            >
-              {selectedSubSetting === 'advanced' ? <RecordCircleFill className='active' /> : <Circle />}
-              <span>{t('ADVANCED_SETTINGS', 'Advanced Settings')}</span>
-            </RadioItem>
-            <RadioItem
-              onClick={() => handleChangeSubSetting('advanced_layouts')}
-            >
-              {selectedSubSetting === 'advanced_layouts' ? <RecordCircleFill className='active' /> : <Circle />}
-              <span>{t('ADVANCED_LAYOUTS', 'Advanced Layouts')}</span>
-            </RadioItem>
-          </InputFormWrapper>
-        )}
-        {selectedSubSetting === 'advanced' && !orderingTheme?.loading && (
-          <AdvancedSettings
-            themesList={themesList}
-            advancedValues={advancedValues}
-            setAdvancedValues={setAdvancedValues}
-            handleUpdateSiteTheme={handleUpdateSiteTheme}
-          />
-        )}
-        {selectedSubSetting === 'advanced_layouts' && !orderingTheme?.loading && (
-          <AdvancedLayouts
-            themesList={themesList}
-            advancedValues={advancedValues}
-            setAdvancedValues={setAdvancedValues}
-            handleUpdateSiteTheme={handleUpdateSiteTheme}
-          />
+          <>
+            <InputFormWrapper>
+              <TitleWrapper isMargin>
+                <h4>{t('SETTINGS', 'Settings')}</h4>
+                <CustomDomainInfo>
+                  <IconButton
+                    color='primary'
+                  >
+                    <InfoCircleFill />
+                  </IconButton>
+                  <CustomDomainInfoContent>
+                    <span>{t('ADVANCED_SETTING_HELP', 'For now you can\'t use layouts and advanced setting together, if you change between layouts and advance settings the settings will be reset to default')}</span>
+                  </CustomDomainInfoContent>
+                </CustomDomainInfo>
+              </TitleWrapper>
+              <RadioItem
+                onClick={() => handleChangeSubSetting('advanced')}
+              >
+                {selectedSubSetting === 'advanced' ? <RecordCircleFill className='active' /> : <Circle />}
+                <span>{t('ADVANCED_SETTINGS', 'Advanced Settings')}</span>
+              </RadioItem>
+              <RadioItem
+                onClick={() => handleChangeSubSetting('advanced_layouts')}
+              >
+                {selectedSubSetting === 'advanced_layouts' ? <RecordCircleFill className='active' /> : <Circle />}
+                <span>{t('ADVANCED_LAYOUTS', 'Advanced Layouts')}</span>
+              </RadioItem>
+            </InputFormWrapper>
+            {selectedSubSetting === 'advanced' && !orderingTheme?.loading && (
+              <AdvancedSettings
+                themesList={themesList}
+                advancedValues={advancedValues}
+                setAdvancedValues={setAdvancedValues}
+                handleUpdateSiteTheme={handleUpdateSiteTheme}
+              />
+            )}
+            {selectedSubSetting === 'advanced_layouts' && !orderingTheme?.loading && (
+              <AdvancedLayouts
+                themesList={themesList}
+                advancedValues={advancedValues}
+                setAdvancedValues={setAdvancedValues}
+                handleUpdateSiteTheme={handleUpdateSiteTheme}
+              />
+            )}
+          </>
         )}
       </Container>
       <Alert

package/src/components/OrderingProducts/SiteTheme/index.js

@@ -144,7 +144,8 @@ const SiteThemeUI = (props) => {
                       </PageHiddenCheckWrapper>
                     )}
                     <PageBlockTitle>{t('PAGE_BLOCKS', 'Page blocks')}</PageBlockTitle>
-                    {Object.keys(themeStructure[selectedPage]?.components).map(block => {
+                    {!!themeStructure[selectedPage]?.components && (
+                    Object.keys(themeStructure[selectedPage]?.components)?.map(block => {
                       const components = themeStructure[selectedPage].components
                       return (
                         <BlockContainer key={block}>
@@ -203,7 +204,8 @@ const SiteThemeUI = (props) => {
                           )}
                         </BlockContainer>
                       )
-                    })}
+                    })
+                  )}
                   </>
                 )}
               </ThemeStructureContainer>

package/src/components/Orders/DeliveriesManager/index.js

@@ -30,7 +30,9 @@ const DeliveriesManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     onOrderRedirect,
     numberOfOrdersByStatus,
-    numberOfOrdersBySubstatus
+    numberOfOrdersBySubstatus,
+    timeStatus,
+    setTimeStatus
   } = props
 
   const [, t] = useLanguage()
@@ -39,7 +41,6 @@ const DeliveriesManagerUI = (props) => {
   const [orderDetailId, setOrderDetailId] = useState(null)
   const [detailsOrder, setDetailsOrder] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
-  const [timeStatus, setTimeStatus] = useState(null)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
 
   const [configState] = useConfig()

package/src/components/Orders/OrdersManager/index.js

@@ -47,7 +47,9 @@ const OrdersManagerUI = (props) => {
     setSelectedOrderIds,
     numberOfOrdersByStatus,
     allowColumns,
-    setAllowColumns
+    setAllowColumns,
+    timeStatus,
+    setTimeStatus
   } = props
 
   const [, t] = useLanguage()
@@ -63,7 +65,6 @@ const OrdersManagerUI = (props) => {
   const [currentTourStep, setCurrentTourStep] = useState(0)
   const [isTourFlag, setIsTourFlag] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [timeStatus, setTimeStatus] = useState(null)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
 
   const [totalSelectedOrder, setTotalSelectedOrder] = useState(0)

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

@@ -2,13 +2,13 @@ import React, { useState, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useLanguage, DriversGroupsList as DriversGroupsListController } from 'ordering-components-admin-external'
 import { getStorageItem, removeStorageItem } from '../../../utils'
-import { Alert, Confirm, SearchBar } from '../../Shared'
+import { Alert, Confirm } from '../../Shared'
 import { WizardDelivery } from '../../Delivery/WizardDelivery'
 import { DriversGroupsList } from '../../Delivery/DriversGroupsList'
 
 import {
   DriversGroupsListingContainer,
-  SearchContainer
+  Description
 } from './styles'
 
 const DriversGroupsListingDetailsUI = (props) => {
@@ -18,12 +18,11 @@ const DriversGroupsListingDetailsUI = (props) => {
     handleSelectGroup,
     handleAllSelectGroup,
     actionState,
-    handleUpdateDriversGroup,
+    handleUpdateDriversGroup
   } = props
 
   const history = useHistory()
   const [, t] = useLanguage()
-  const [searchValue, setSearchValue] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
@@ -39,7 +38,6 @@ const DriversGroupsListingDetailsUI = (props) => {
   }, [actionState?.error])
 
   const handleOpenTour = () => {
-    setOpenDetails(false)
     setCurrentTourStep(4)
     setIsTourOpen(true)
   }
@@ -63,21 +61,11 @@ const DriversGroupsListingDetailsUI = (props) => {
 
   return (
     <>
-      <SearchContainer>
-        <SearchBar
-          lazyLoad
-          isCustomLayout
-          onSearch={val => setSearchValue(val)}
-          search={searchValue}
-          placeholder={t('SEARCH', 'Search')}
-          customClass='searchBar'
-        />
-      </SearchContainer>
+      <Description>{t('BUSINESS_IN_FOLLOWING_DRIVER_GROUPS', 'This business is in the following driver groups')}</Description>
       <DriversGroupsListingContainer>
         <DriversGroupsList
           isFromStore
           driversGroupsState={driversGroupsState}
-          searchValue={searchValue}
           handleUpdateDriversGroup={handleUpdateDriversGroup}
           selectedGroupList={selectedGroupList}
           handleSelectGroup={handleSelectGroup}

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

@@ -1,16 +1,12 @@
 import styled from 'styled-components'
 
 export const DriversGroupsListingContainer = styled.div`
-  flex: 1;
-  padding: 20px;
-  box-sizing: border-box;
-  transition: all 0.5s;
-  max-height: 100vh;
-  overflow: auto;
+  > div {
+    padding: 0;
+    margin-bottom: 30px;
+  }
 `
 
-export const SearchContainer = styled.div`
-  input {
-    width: 100%
-  }
+export const Description = styled.p`
+  font-size: 14px;
 `

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

@@ -109,6 +109,14 @@ const BusinessProductsListingUI = (props) => {
     {
       value: 'cost_price',
       content: t('PRODUCT_COST', 'Product cost')
+    },
+    {
+      value: 'inventoried',
+      content: t('INVENTORY', 'Inventory')
+    },
+    {
+      value: 'quantity',
+      content: t('QUANTITY', 'Quantity')
     }
   ]
   const handleChangeAllowSpreadColumns = (type) => {

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

@@ -89,6 +89,7 @@ const ProductExtraOptionDetailsUI = (props) => {
   const { handleSubmit, register, errors, control, setValue } = useForm()
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
   const [externalId, setExternalId] = useState()
+  const [timer, setTimer] = useState(null)
 
   const handleClickSubOptionImage = (id) => {
     document.getElementById(id).click()
@@ -151,6 +152,17 @@ const ProductExtraOptionDetailsUI = (props) => {
     }
   }
 
+  const onChangeAddModifierName = (e) => {
+    e.persist()
+    clearTimeout(timer)
+    const _timer = setTimeout(function () {
+      if (e.target.value) {
+        handleSubmit(handleAddOption)()
+      }
+    }, 750)
+    setTimer(_timer)
+  }
+
   const handleUpdateExternalId = () => {
     handleUpdateOption({ external_id: externalId })
     setOpenModal({ ...openModal, externalId: false })
@@ -325,6 +337,8 @@ const ProductExtraOptionDetailsUI = (props) => {
                   ref={register({
                     required: t('NAME_REQUIRED', 'The name is required.')
                   })}
+                  onChange={(e) => onChangeAddModifierName(e)}
+                  readOnly={optionState?.loading}
                 />
               </InputWrapper>
             </LeftSubOptionContent>
@@ -334,7 +348,7 @@ const ProductExtraOptionDetailsUI = (props) => {
                   name='price'
                   placeholder={t('PRICE', 'Price')}
                   defaultValue={
-                    ((editSubOptionId === null) && changesState?.changes?.price) || ''
+                    ((editSubOptionId === null) && changesState?.changes?.price) || 0
                   }
                   ref={register()}
                   onKeyPress={(e) => {

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

@@ -136,8 +136,19 @@ const ProductExtraOptionsUI = (props) => {
     setIsMenuOpen(value)
   }
 
-  const onSubmit = () => {
-    handleAddOption()
+  const onSubmit = (formValues) => {
+    handleAddOption(formValues)
+  }
+
+  const onChangeAddExtraOptionName = (e) => {
+    e.persist()
+    clearTimeout(timer)
+    const _timer = setTimeout(function () {
+      if (e.target.value) {
+        handleSubmit(onSubmit)()
+      }
+    }, 750)
+    setTimer(_timer)
   }
 
   useEffect(() => {
@@ -313,9 +324,10 @@ const ProductExtraOptionsUI = (props) => {
                   value={value}
                   onChange={(e) => {
                     onChange(e)
-                    handleChangeAddOption(e)
+                    onChangeAddExtraOptionName(e)
                   }}
                   autoComplete='off'
+                  readOnly={extraState?.loading}
                 />
               )}
               rules={{
@@ -371,6 +383,7 @@ const ProductExtraOptionsUI = (props) => {
           />
           <IconButton
             type='submit'
+            style={{ visibility: 'hidden' }}
           >
             <PlusCircle />
           </IconButton>

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

@@ -80,6 +80,10 @@ export const OptionNameContainer = styled.div`
     &:focus {
       border: 1px dashed ${props => props.theme.colors.lightGray};
     }
+    &:read-only {
+      background-color: #F8F9FA;
+      cursor: not-allowed;
+    }
     ${props => props.theme?.rtl ? css`
       margin-right: 5px;
     ` : css`
@@ -214,13 +218,6 @@ export const AddOptionForm = styled.form`
       border: 1px dashed ${props => props.theme.colors.lightGray};
     }
   }
-  > button {
-    ${props => props.theme?.rtl ? css`
-      margin-right: 10px;
-    ` : css`
-      margin-left: 10px;
-    `}
-  }
 
   @media (min-width: 450px) {
     > input {

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

@@ -25,12 +25,10 @@ const ProductExtrasUI = (props) => {
   const {
     productState,
     extrasState,
-    changesState,
     isAddMode,
     handleOpenAddForm,
     handleChangeExtraInput,
     handleAddExtra,
-    handleChangeAddExtraInput,
     setIsExtendExtraOpen,
     business,
     handleUpdateBusinessState,
@@ -56,6 +54,7 @@ const ProductExtrasUI = (props) => {
   const [currentExtra, setCurrentExtra] = useState(null)
   const [extraIds, setExtraIds] = useState([])
   const [isCheckboxClicked, setIsCheckboxClicked] = useState(false)
+  const [timer, setTimer] = useState(null)
 
   const handleOpenExtraDetails = (e, extra, isInitialRender) => {
     if (e?.target?.closest('.extra-checkbox') || e?.target?.closest('.draggable-dots')) return
@@ -80,13 +79,6 @@ const ProductExtrasUI = (props) => {
     history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}`)
   }
 
-  const addExtraListener = (e) => {
-    const outsideDropdown = !conatinerRef.current?.contains(e.target)
-    if (outsideDropdown) {
-      handleAddExtra()
-    }
-  }
-
   const handleExtraState = (id, checked) => {
     if (checked) {
       setExtraIds(prevState => ([...prevState, id]))
@@ -96,6 +88,17 @@ const ProductExtrasUI = (props) => {
     setIsCheckboxClicked(true)
   }
 
+  const onChangeAddExtraInput = (e) => {
+    e.persist()
+    clearTimeout(timer)
+    const _timer = setTimeout(function () {
+      if (e.target.value) {
+        handleAddExtra({ name: e.target.value })
+      }
+    }, 750)
+    setTimer(_timer)
+  }
+
   useEffect(() => {
     let _extraIds = []
     if (productState.product?.extras) {
@@ -110,12 +113,6 @@ const ProductExtrasUI = (props) => {
     handleProductExtraState(extraIds)
   }, [isCheckboxClicked, extraIds])
 
-  useEffect(() => {
-    if (!isAddMode) return
-    document.addEventListener('click', addExtraListener)
-    return () => document.removeEventListener('click', addExtraListener)
-  }, [isAddMode, changesState])
-
   useEffect(() => {
     if (productState?.product?.error || extrasState?.extras?.error) {
       setAlertState({
@@ -196,8 +193,9 @@ const ProductExtrasUI = (props) => {
             <input
               name='name'
               placeholder={t('WRITE_A_NAME', 'Write a name')}
-              onChange={(e) => handleChangeAddExtraInput(e)}
+              onChange={(e) => onChangeAddExtraInput(e)}
               autoComplete='off'
+              readOnly={extrasState?.loading}
             />
           </ExtraAddForm>
         )}

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

@@ -123,6 +123,10 @@ export const ExtraAddForm = styled.form`
     &:-ms-input-placeholder {
       color: #B1BCCC;
     }
+    &:read-only {
+      background-color: #F8F9FA;
+      cursor: not-allowed;
+    }
   }
 `
 export const DragImageWrapper = styled.div`