ordering-ui-admin-external 1.10.0 → 1.11.0

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;
+    }
   `}
 `
 

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

@@ -8,6 +8,7 @@ import { Select } from '../../../styles/Select/FirstSelect'
 
 import {
   useLanguage,
+  useConfig,
   DragAndDrop,
   ExamineClick,
   BusinessProductCreator as BusinessProductCreatorController
@@ -41,8 +42,11 @@ const BusinessProductAddFormUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
 
   const productImageInputRef = useRef(null)
+  const isEnabledAppointmentsFeature = configs?.appointments?.value
+
   const [hours, setHours] = useState([])
   const [minutes, setMinutes] = useState([])
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -202,7 +206,7 @@ const BusinessProductAddFormUI = (props) => {
             </DragAndDrop>
           </ExamineClick>
         </ProductImage>
-        {typeList?.length > 1 && (
+        {isEnabledAppointmentsFeature && typeList?.length > 1 && (
           <SelectWrapper notAllow>
             <label>{t('TYPE', 'Type')}</label>
             <Select

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

@@ -27,7 +27,7 @@ export const ProductListContainer = styled.div`
   }
 
   @media (min-width: 993px) {
-    max-height: calc(100vh - 320px);
+    max-height: calc(100vh - 360px);
   }
 `
 

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

@@ -70,7 +70,9 @@ const BusinessProductsListingUI = (props) => {
     setTaxes,
     fees,
     setFees,
-    getBusiness
+    getBusiness,
+    businessTypes,
+    setBusinessTypes
   } = props
 
   const [, t] = useLanguage()
@@ -461,6 +463,8 @@ const BusinessProductsListingUI = (props) => {
           handleSucessRemoveBusiness={() => handleStoresRedirect()}
           // handleSucessUpdateBusiness={handleSucessUpdateBusiness}
           onClose={() => setOpenSidebar(null)}
+          businessTypes={businessTypes}
+          setBusinessTypes={setBusinessTypes}
         />
       )}
       {openSidebar === 'add_business' && (
@@ -485,7 +489,7 @@ const BusinessProductsListingUI = (props) => {
         />
       </Modal>
       <Modal
-        width={width > 1440 ? '40%' : '60%'}
+        width='769px'
         padding='25px'
         open={showPopup}
         onClose={() => setShowPopup(false)}

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

@@ -5,7 +5,7 @@ export const BusinessListContainer = styled.div`
   overflow: auto;
 
   @media (min-width: 768px) {
-    max-height: calc(100vh - 300px);
+    max-height: calc(100vh - 320px);
   }
 `
 

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

@@ -4,7 +4,7 @@ import { useLanguage, useEvent, DashboardBusinessList as BusinessListController
 import BsGrid from '@meronex/icons/bs/BsGrid'
 import BsViewList from '@meronex/icons/bs/BsViewList'
 import { getStorageItem, setStorageItem } from '../../../utils'
-import { SideBar } from '../../Shared'
+import { Modal, SideBar } from '../../Shared'
 import { useTheme } from 'styled-components'
 
 import { BusinessesList } from '../BusinessesList'
@@ -12,7 +12,6 @@ import { BusinessesListingHeader } from '../BusinessesListingHeader'
 import { BusinessActiveStateFilter } from '../BusinessActiveStateFilter'
 import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessDetails } from '../BusinessDetails'
-// import { AddBusinessForm } from '../AddBusinessForm'
 import { WizardBusiness } from '../WizardBusiness'
 
 import {
@@ -26,6 +25,7 @@ import {
 import { BusinessSync } from '../BusinessSync'
 import { BusinessDelete } from '../BusinessDelete'
 import { Button } from '../../../styles'
+import { BusinessAddStore } from '../BusinessAddStore'
 
 const BusinessesListingUI = (props) => {
   const {
@@ -47,7 +47,8 @@ const BusinessesListingUI = (props) => {
     handleChangeBusinessIds,
     handleEnableAllBusiness,
     handleDeleteMultiBusinesses,
-    setBusinessIds
+    setBusinessIds,
+    countriesState
   } = props
 
   const query = new URLSearchParams(useLocation().search)
@@ -66,13 +67,15 @@ const BusinessesListingUI = (props) => {
   const [businessTypes, setBusinessTypes] = useState([])
   const [openSync, setOpenSync] = useState(false)
   const [moveDistance, setMoveDistance] = useState(0)
+  const [isAdd, setIsAdd] = useState(false)
 
   const noBusinesses = useMemo(() => {
     return !businessList?.loading && businessList?.businesses?.length === 0 && pagination?.currentPage === 1 && !searchValue
   }, [businessList?.loading, businessList?.businesses, pagination, searchValue])
 
   const handleGotToAdd = () => {
-    events.emit('go_to_page', { page: 'business_add' })
+    if (countriesState?.enabled) setIsAdd(true)
+    else events.emit('go_to_page', { page: 'business_add' })
   }
 
   const handleBackRedirect = () => {
@@ -291,6 +294,14 @@ const BusinessesListingUI = (props) => {
         business={detailsBusiness}
         handleSucessUpdateBusiness={handleSucessUpdateBusiness}
       />
+      <Modal
+        width='769px'
+        padding='30px'
+        open={isAdd}
+        onClose={() => setIsAdd(false)}
+      >
+        <BusinessAddStore />
+      </Modal>
     </>
   )
 }

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

@@ -40,22 +40,32 @@ export const PaymentOption = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [paymentTabs, setPaymentTabs] = useState(sitesState?.sites?.length > 0 ? 0 : 1)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
-  const [localState, setLocalState] = useState({allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites})
+  const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!!!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
-    const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
-
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
-
-    data[values.key] = array.length > 0 ? array : []
 
+    let data = {}
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
+
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!!!data?.sites?.length)
+      }
+    }
     handleChangeBusinessPaymentState(data)
   }
 
@@ -105,10 +115,10 @@ export const PaymentOption = (props) => {
 
   useEffect(() => {
     if (changesState?.allowed_order_types) {
-      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
     }
     if (changesState?.sites) {
-      setLocalState({sites: changesState?.sites})
+      setLocalState({ sites: changesState?.sites })
     }
   }, [changesState?.allowed_order_types, changesState?.sites])
 
@@ -156,21 +166,33 @@ export const PaymentOption = (props) => {
             {t('ORDER_TYPE', 'Order type')}
           </Tab>
         </TabsContainer>
-
         {paymentTabs === 0 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key={'all'}
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 1 && (

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

@@ -153,18 +153,27 @@ export const WrapperRow = styled.div`
 
 export const FieldRow = styled.div`
   display: flex;
-  margin-left: -10px;
-  margin-right: -10px;
+  justify-content: space-between;
+  flex-direction: column;
   label:first-child{
     margin-top: 30px;
   }
+  > div {
+    width: 100%;
+    padding: 0px;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div {
+      width: 48%;
+    }
+  }
 `
 
 export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
-  flex-basis: 0;
-  flex-grow: 1;
   max-width: 100%;
   padding: 0 10px;
 

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

@@ -202,6 +202,8 @@ export const Dvider = styled.div`
 `
 
 export const ModifierOptionsContainer = styled.div`
+  overflow: auto;
+  width: 100%;
   margin-bottom: 20px;
   h2 {
     font-size: 18px;

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

@@ -124,7 +124,7 @@ export const ProductExtraOptionForm = (props) => {
       />
       <OptionInfoContainer>
         <OptionContent>
-          <InputWrapper primary>
+          <InputWrapper primary noMargin>
             <label>{t('OPTION_NAME', 'Option name')}</label>
             <Controller
               name='name'

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

@@ -2,7 +2,12 @@ import styled, { css } from 'styled-components'
 
 export const OptionContainer = styled.form`
   display: flex;
+  flex-direction: column;
   width: 100%;
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
 
 export const OptionImage = styled.div`
@@ -14,6 +19,7 @@ export const OptionImage = styled.div`
   cursor: -webkit-grab;
   cursor: grab;
   filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+  margin: 0px auto 15px auto;
 
   img,
   div {
@@ -53,11 +59,13 @@ export const UploadImageIcon = styled.div`
 
 export const OptionInfoContainer = styled.div`
   flex: 1;
-  ${props => props.theme?.rtl ? css`
-    margin-right: 20px;
-  ` : css`
-    margin-left: 20px;
-  `}
+  @media (min-width: 576px) {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 20px;
+    ` : css`
+      margin-left: 20px;
+    `}
+  }
 `
 
 export const OptionContent = styled.div`
@@ -72,9 +80,13 @@ export const OptionContent = styled.div`
 export const RightOptionContent = styled.div`
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-top: 10px;
   > div:not(:last-child) {
-    width: 100px;
+    width: 85px;
+  }
+  @media (min-width: 450px) {
+    justify-content: flex-start;
   }
   @media (min-width: 1200px) {
     margin-top: 0px;
@@ -132,16 +144,20 @@ export const InputWrapper = styled.div`
       color: ${props => props.theme.colors.primary};
     }
   }
+
+  @media (max-width: 1200px) {
+    ${({ noMargin }) => noMargin && css`
+      margin: 0;
+    `}
+  }
 `
 
 export const ActionsContainer = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
   margin-top: 27px;
   padding-top: 6px;
   padding-bottom: 6px;
-  width: 150px;
   
   ${({ primary }) => !primary && css`
     margin-top: 0px;