ordering-ui-admin-external 1.9.0 → 1.11.0

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,16 +206,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>
+        {isEnabledAppointmentsFeature && 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/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/index.js

@@ -228,6 +228,7 @@ export const BusinessesList = (props) => {
                     totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
                     handleChangePage={handleChangePage}
                     handleChangePageSize={handleChangePageSize}
+                    defaultPageSize={pagination?.pageSize}
                   />
                 )}
               </WrapperPagination>

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;

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

@@ -71,6 +71,7 @@ export const OptionNameContainer = styled.div`
   > input {
     flex: 1;
     height: 32px;
+    width: 32px;
     padding: 5px;
     border: none;
     outline: none;
@@ -103,8 +104,9 @@ export const OptionNameContainer = styled.div`
 `
 
 export const OptionImage = styled.div`
-  width: 38px;
-  height: 38px;
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
@@ -132,6 +134,11 @@ export const OptionImage = styled.div`
   ` : css`
     margin-right: 15px;
   `}
+
+  @media (min-width: 450px) {
+    width: 38px;
+    height: 38px;
+  }
 `
 
 export const ActionSelectorWrapper = styled.div`
@@ -195,7 +202,7 @@ export const AddOptionForm = styled.form`
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};
 
   > input {
-    width: 80px;
+    width: 75px;
     height: 32px;
     padding: 5px;
     border: none;
@@ -214,6 +221,12 @@ export const AddOptionForm = styled.form`
       margin-left: 10px;
     `}
   }
+
+  @media (min-width: 450px) {
+    > input {
+      width: 80px;
+    }
+  }
 `
 export const OptionsList = styled.div`
 `
@@ -244,22 +257,28 @@ export const OptionItem = styled.div`
   `}
 `
 export const MinimumPurchase = styled.div`
-  min-width: 80px;
+  min-width: 75px;
   ${({ isHeader }) => isHeader ? css`
     font-size: 12px;
     font-weight: 700;
   ` : css`
     font-size: 14px;
   `}
+  @media (min-width: 450px) {
+    min-width: 80px;
+  }
 `
 export const MaxPurchase = styled.div`
-  min-width: 80px;
+  min-width: 75px;
   ${({ isHeader }) => isHeader ? css`
     font-size: 12px;
     font-weight: 700;
   ` : css`
     font-size: 14px;
   `}
+  @media (min-width: 450px) {
+    min-width: 80px;
+  }
 `
 export const ArrowWrpper = styled.div`
   width: 30px;
@@ -275,12 +294,19 @@ export const ArrowWrpper = styled.div`
 export const DragImageWrapper = styled.div`
   img {
     ${props => props.theme?.rtl ? css`
-      margin-left: 20px;
+      margin-left: 10px;
     ` : css`
-      margin-right: 20px;
+      margin-right: 10px;
     `}
     &:hover {
       cursor: grab;
     }
+    @media (min-width: 450px) {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 20px;
+      ` : css`
+        margin-right: 20px;
+      `}
+    }
   }
 `

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

@@ -205,6 +205,7 @@ const ProductExtrasUI = (props) => {
               width='80%'
               open={openExtraDetails}
               onClose={() => handleCloseExtraDetails()}
+              padding='20px 0 0 0'
             >
               <ProductExtraOptions
                 open={openExtraDetails}

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

@@ -82,6 +82,7 @@ export const ProductIngredient = (props) => {
           width='80%'
           open={openDetails}
           onClose={() => handleCloseDetails()}
+          hideCloseDefault
         >
           <ProductIngredientDetails
             {...props}

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

@@ -43,16 +43,6 @@ export const Header = styled.div`
   > div {
     display: flex;
     align-items: center;
-    > button {
-      display: none;
-    }
-  }
-  @media (min-width: 1000px) {
-    > div {
-      > button {
-        display: block;
-      }
-    }
   }
 `
 

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { FileMedical, ColumnsGap } from 'react-bootstrap-icons'
+import { FileMedical, ColumnsGap, FileEarmarkArrowUp, TabletLandscape } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import {
   Container,
@@ -10,17 +10,33 @@ import {
 } from './styles'
 
 export const ProductStartGuide = (props) => {
-  const { onClose, setStep, countriesState } = props
+  const { onClose, setStep, setOption, countriesState } = props
   const [, t] = useLanguage()
 
   const guideList = [
     { id: 1, title: t('START_WITH_AN_EMPTY_MENU', 'Start with an empty Menu'), description: t('START_WITH_AN_EMPTY_MENU_DESC', 'Start with an empty Menu and enter your menu items'), icon: <FileMedical />, enabled: true },
-    { id: 2, title: t('IMPORT_MENU_ONLY_USA_CANADA', 'Import Menu (Only if USA and Canada)'), description: t('IMPORT_MENU_ONLY_USA_CANADA_DESC', 'Import your menu from the Ordering Network that includes over 1M restaurants and stores from the US and Canada.'), icon: <ColumnsGap />, enabled: countriesState?.enabled }
+    { id: 2, title: t('IMPORT_MENU_ONLY_USA_CANADA', 'Import Menu (Only if USA and Canada)'), description: t('IMPORT_MENU_ONLY_USA_CANADA_DESC', 'Import your menu from the Ordering Network that includes over 1M restaurants and stores from the US and Canada.'), icon: <ColumnsGap />, enabled: countriesState?.enabled },
+    { id: 3, title: t('UPLOAD_YOUR_MENU', 'Upload your Menu'), description: t('UPLOAD_YOUR_MENU_DESC', 'Click to upload your menu (PDF or image file) or share your menu link (For website or another online ordering system)'), icon: <FileEarmarkArrowUp />, enabled: true },
+    { id: 4, title: t('INTEGRATE_MY_POS_TO_EXTRACT_MENU', 'Integrate my POS to extract the menu'), icon: <TabletLandscape />, enabled: true }
   ]
 
   const handleChangeStep = (id) => {
-    if (id === 1) onClose()
-    else if (id === 2) setStep(2)
+    switch (id) {
+      case 2:
+        setStep(2)
+        setOption(2)
+        break
+      case 3:
+        setStep(2)
+        setOption(3)
+        break
+      case 4:
+        setStep(2)
+        setOption(4)
+        break
+      default:
+        onClose()
+    }
   }
 
   return (
@@ -51,7 +67,7 @@ export const ProductStartGuide = (props) => {
           </IconWrapper>
           <InfoWrapper>
             <h3>{guide.title}</h3>
-            <p>{guide.description}</p>
+            {guide.description && <p>{guide.description}</p>}
           </InfoWrapper>
         </GuideItemContainer>
       ))}

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

@@ -47,7 +47,7 @@ export const InfoWrapper = styled.div`
     font-weight: 600;
     font-size: 14px;
     line-height: 21px;
-    margin: 0%;
+    margin: 0;
   }
   p {
     margin: 0;