ordering-ui-admin-external 1.13.3 → 1.14.0

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

@@ -7,7 +7,7 @@ import {
 } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, Modal, ImageCrop, ColorPicker } from '../../Shared'
-import { bytesConverter, shape, ribbonValues } from '../../../utils'
+import { bytesConverter, shape, ribbonValues, stringToSlug } from '../../../utils'
 import FiCamera from '@meronex/icons/fi/FiCamera'
 import BsCardImage from '@meronex/icons/bs/BsCardImage'
 import { Button, Switch } from '../../../styles'
@@ -34,7 +34,6 @@ const BusinessBrandGENDetailUI = (props) => {
   const {
     brandFormState,
     brand,
-    // handlechangeImage,
     handleChangeInput,
     handleUpdateClick,
     handleChangeItem,
@@ -181,25 +180,27 @@ const BusinessBrandGENDetailUI = (props) => {
             name='name'
             placeholder={t('WRITE_A_NAME', 'Write a name')}
             value={brandFormState?.changes?.name ?? brand?.name ?? ''}
-            onChange={handleChangeInput}
+            onChange={(e) => handleChangeItem({ name: e.target.value, slug: stringToSlug(e.target.value) })}
             disabled={brandFormState.loading}
             autoComplete='off'
           />
         </FormControl>
-        <FormControl>
-          <Label>{t('SLUG', 'Slug')}</Label>
-          <input
-            name='slug'
-            placeholder={t('WRITE_A_SLUG', 'Write a slug')}
-            value={brandFormState?.changes?.slug ?? brand?.slug ?? ''}
-            onChange={handleChangeInput}
-            disabled={brandFormState.loading}
-            autoComplete='off'
-            onKeyPress={e => {
-              if (e.which === 32) { e.preventDefault() }
-            }}
-          />
-        </FormControl>
+        {brand && (
+          <FormControl>
+            <Label>{t('SLUG', 'Slug')}</Label>
+            <input
+              name='slug'
+              placeholder={t('WRITE_A_SLUG', 'Write a slug')}
+              value={brandFormState?.changes?.slug ?? brand?.slug ?? ''}
+              onChange={handleChangeInput}
+              disabled={brandFormState.loading}
+              autoComplete='off'
+              onKeyPress={e => {
+                if (e.which === 32) { e.preventDefault() }
+              }}
+            />
+          </FormControl>
+        )}
         <SwitchWrapper>
           <span>{t('RIBBON', 'Ribbon')}</span>
           <Switch
@@ -283,7 +284,7 @@ const BusinessBrandGENDetailUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -6,7 +6,7 @@ import {
 } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { ThreeDots, List as MenuIcon } from 'react-bootstrap-icons'
+import { ThreeDots, List as MenuIcon, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Button, IconButton, Switch, DefaultSelect } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert, SearchBar, SideBar } from '../../Shared'
@@ -31,7 +31,8 @@ import {
   BrandDetailContainer,
   DetailHeder,
   TabContainer,
-  Tab
+  Tab,
+  RightHeader
 } from './styles'
 
 const BusinessBrandListingUI = (props) => {
@@ -54,6 +55,7 @@ const BusinessBrandListingUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [selectedType, setSelectedType] = useState('general')
   const [selectedBrand, setSelectedBrand] = useState(null)
+  const [isExpand, setIsExpand] = useState(false)
 
   const moreOptions = [
     { value: 0, content: t('DELETE', 'Delete') }
@@ -88,6 +90,14 @@ const BusinessBrandListingUI = (props) => {
     handleOpenSideBar(brandId)
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('brand-details')
+    if (!element) return
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (brandListState?.brands?.length > 0) {
       let brands = []
@@ -242,15 +252,23 @@ const BusinessBrandListingUI = (props) => {
                     />
                   )}
                 </div>
-                {selectedBrand && (
-                  <ActionSelectorWrapper>
-                    <DefaultSelect
-                      placeholder={<ThreeDots />}
-                      options={moreOptions}
-                      onChange={() => handleDeleteBrand(selectedBrand.id)}
-                    />
-                  </ActionSelectorWrapper>
-                )}
+                <RightHeader>
+                  <IconButton
+                    color='black'
+                    onClick={expandSideBar}
+                  >
+                    {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+                  </IconButton>
+                  {selectedBrand && (
+                    <ActionSelectorWrapper>
+                      <DefaultSelect
+                        placeholder={<ThreeDots />}
+                        options={moreOptions}
+                        onChange={() => handleDeleteBrand(selectedBrand.id)}
+                      />
+                    </ActionSelectorWrapper>
+                  )}
+                </RightHeader>
               </DetailHeder>
               <TabContainer>
                 <Tab

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

@@ -32,6 +32,11 @@ export const HeaderContainer = styled.div`
   }
 `
 
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`
+
 export const HeaderTitleContainer = styled.div`
   flex: 1;
   display: flex;
@@ -239,8 +244,8 @@ export const BrandListBottomContainer = styled.div`
   span {
     cursor: pointer;
     user-select: none;
-    font-size: 12px;
-    color: ${props => props.theme.colors?.lightGray};
+    font-size: 14px;
+    color: ${props => props.theme.colors?.primary};
   }
 `
 
@@ -253,7 +258,6 @@ export const DetailHeder = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 3px;
   margin-bottom: 25px;
   ${props => props.theme?.rtl ? css`
     margin-left: 40px;

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

@@ -268,7 +268,7 @@ export const BusinessDeliveryZoneInformation = (props) => {
             <ErrorText>{t('REQUIRED_GOOGLE_MAP_API_KEY', 'Google Maps api key is required')}</ErrorText>
           )
         )}
-        {(!zone && zoneType !== 5) && (
+        {(!zone && zoneType !== 5 && zoneType !== 4) && (
           <KmlButtonWrapper>
             <Button
               color='primary'

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

@@ -23,6 +23,7 @@ import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
 import {
   BarContainer
 } from './styles'
+import { BusinessSalesChannel } from '../BusinessSalesChannel'
 
 export const BusinessDetailsUI = (props) => {
   const {
@@ -151,6 +152,7 @@ export const BusinessDetailsUI = (props) => {
           handleSucessUpdateBusiness={handleSucessUpdateBusiness}
           handleDuplicateBusiness={handleDuplicateBusiness}
           handleDeleteBusiness={handleDeleteBusiness}
+          extraOpen={extraOpen}
         />
       )}
       {extraOpen && (
@@ -272,6 +274,12 @@ export const BusinessDetailsUI = (props) => {
               setIsExtendExtraOpen={setIsExtendExtraOpen}
             />
           )} */}
+          {selectedItem === 'sales_channels' && (
+            <BusinessSalesChannel
+              business={businessState?.business}
+              setIsExtendExtraOpen={setIsExtendExtraOpen}
+            />
+          )}
           {selectedItem === 'layout' && (
             <BusinessFrontLayout
               business={businessState?.business}

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

@@ -0,0 +1,168 @@
+import React from 'react'
+import { useLanguage, BusinessFilter } from 'ordering-components-admin-external'
+import { Input, DefaultSelect, Button } from '../../../styles'
+import { CitySelector, Modal } from '../../Shared'
+import {
+  Container,
+  FormControl,
+  FormGroup,
+  // RangeSelectWrapper,
+  Option,
+  ButtonGroup
+} from './styles'
+
+const BusinessFilterGroupUI = (props) => {
+  const {
+    filterValues,
+    handleChangeValue,
+    handleChangeCity,
+    handleChangeFilterValues,
+    handleResetFilterValues,
+    isFilterModal,
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+
+  // const conditions = [
+  //   { value: '>', content: <Option>{'>'}</Option> },
+  //   { value: '=', content: <Option>=</Option> },
+  //   { value: '<', content: <Option>{'<'}</Option> },
+  //   { value: '>=', content: <Option>{'>='}</Option> },
+  //   { value: '<=', content: <Option>{'<='}</Option> }
+  // ]
+
+  const enableOptions = [
+    { value: true, content: <Option>{t('YES', 'Yes')}</Option> },
+    { value: false, content: <Option>{t('NO', 'No')}</Option> }
+  ]
+
+  const handleAcceptFilter = () => {
+    handleChangeFilterValues({ ...filterValues })
+    onClose()
+  }
+
+  const handleClearFilter = () => {
+    handleResetFilterValues()
+    handleChangeFilterValues({})
+  }
+
+  return (
+    <Modal
+      title={t('FILTER', 'Filter')}
+      width='80%'
+      padding='30px'
+      open={isFilterModal}
+      onClose={onClose}
+    >
+      <Container>
+        <FormGroup>
+          <FormControl>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              type='text'
+              placeholder={t('NAME', 'Name')}
+              autoComplete='off'
+              value={filterValues?.name || ''}
+              onChange={(e) => handleChangeValue({ name: e.target.value })}
+            />
+          </FormControl>
+        </FormGroup>
+        <FormGroup>
+          <FormControl>
+            <label>{t('FEATURED', 'FEATURED')}</label>
+            <DefaultSelect
+              placeholder={t('SELECT_OPTION', 'Select a option')}
+              defaultValue={filterValues?.featured}
+              options={enableOptions}
+              onChange={val => handleChangeValue({ featured: val })}
+              optionInnerMaxHeight='300px'
+              className='full-select'
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('CITY', 'City')}</label>
+            <CitySelector
+              filterValues={filterValues}
+              handleChangeCity={handleChangeCity}
+            />
+          </FormControl>
+        </FormGroup>
+        {/* <FormGroup>
+          <FormControl>
+            <label>{t('AVAILABLE_MENUS', 'Available menus')}</label>
+            <RangeSelectWrapper className='range'>
+              <DefaultSelect
+                placeholder={t('SELECT_CONDITION', 'Select a condition')}
+                defaultValue={filterValues?.availableMenus?.condition}
+                options={conditions}
+                onChange={condition => handleChangeValue({ availableMenus: { ...filterValues?.availableMenus, condition } })}
+                optionInnerMaxHeight='300px'
+              />
+              <Input
+                type='text'
+                placeholder={t('NUMBER', 'Number')}
+                autoComplete='off'
+                onKeyPress={(e) => {
+                  if (!/^[0-9]$/.test(e.key)) {
+                    e.preventDefault()
+                  }
+                }}
+                value={filterValues?.availableMenus?.value || ''}
+                onChange={(e) => handleChangeValue({ availableMenus: { ...filterValues?.availableMenus, value: e.target.value } })}
+              />
+            </RangeSelectWrapper>
+          </FormControl>
+          <FormControl>
+            <label>{t('TOTAL_MENUS', 'Total menus')}</label>
+            <RangeSelectWrapper className='range'>
+              <DefaultSelect
+                placeholder={t('SELECT_CONDITION', 'Select a condition')}
+                defaultValue={filterValues?.menus?.condition}
+                options={conditions}
+                onChange={condition => handleChangeValue({ menus: { ...filterValues?.menus, condition } })}
+                optionInnerMaxHeight='300px'
+              />
+              <Input
+                type='text'
+                placeholder={t('NUMBER', 'Number')}
+                autoComplete='off'
+                onKeyPress={(e) => {
+                  if (!/^[0-9]$/.test(e.key)) {
+                    e.preventDefault()
+                  }
+                }}
+                value={filterValues?.menus?.value || ''}
+                onChange={(e) => handleChangeValue({ menus: { ...filterValues?.menus, value: e.target.value } })}
+              />
+            </RangeSelectWrapper>
+          </FormControl>
+        </FormGroup> */}
+        <ButtonGroup>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => handleAcceptFilter()}
+          >
+            {t('ACCEPT', 'Accept')}
+          </Button>
+          <Button
+            color='secundaryDark'
+            borderRadius='8px'
+            onClick={() => handleClearFilter()}
+          >
+            {t('CLEAR', 'Clear')}
+          </Button>
+        </ButtonGroup>
+      </Container>
+    </Modal>
+  )
+}
+
+export const BusinessFilterGroup = (props) => {
+  const businessFilterGroupProps = {
+    ...props,
+    UIComponent: BusinessFilterGroupUI
+  }
+  return <BusinessFilter {...businessFilterGroupProps} />
+}

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

@@ -0,0 +1,116 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div``
+
+export const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  > div {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div {
+      width: 48%;
+    }
+  }
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 15px;
+  > label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  > input {
+    width: 100%;
+    height: 54px;
+  }
+
+  & > div:not(.range) {
+    width: 100%;
+    height: 54px;
+    background-color: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+    border-radius: 8px;
+  }
+
+  .full-select {
+    > div:first-child {
+      height: 100%;
+      border-radius: 8px;
+    }
+    .list {
+      left: 0px;
+      right: auto;
+    }
+  }
+`
+
+export const RangeSelectWrapper = styled.div`
+  display: flex;
+  height: 54px;
+  .select {
+    height: 100%;
+    > div:first-child {
+      width: 75px;
+      height: 100%;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      background-color: ${props => props.theme.colors.secundary};
+      font-size: 14px;
+      border-radius: 8px;
+    }
+    .list {
+      left: 0px;
+      right: auto;
+    }
+  }
+  input {
+    width: calc(100% - 65px);
+    margin-left: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0;
+      margin-right: 15px;
+    `}
+  }
+`
+
+export const Option = styled.div`
+  color: ${props => props.theme.colors.secundaryContrast};
+  font-size: 14px;
+  white-space: nowrap;
+`
+
+export const SwitchWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  label {
+    margin-bottom: 0px;
+    font-size: 14px;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+
+  button {
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    &:last-child {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 20px;
+      ` : css`
+        margin-left: 20px;
+      `}
+    }
+  }
+`

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

@@ -515,7 +515,7 @@ const BusinessInformationUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -92,8 +92,10 @@ export const BusinessOrderingChannels = (props) => {
                 value={slug}
                 placeholder={t('SLUG', 'Slug')}
                 onChange={(e) => setSlug(e.target.value)}
-                onKeyPress={e => {
-                  if (e.which === 32) { e.preventDefault() }
+                onKeyPress={(e) => {
+                  if (!/^[0-9a-zA-Z]$/.test(e.key)) {
+                    e.preventDefault()
+                  }
                 }}
               />
             </FormControl>

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

@@ -147,12 +147,12 @@ const BusinessProductAddFormUI = (props) => {
   }
 
   const handleChangeSelect = (value) => {
+    setCurPreorderTime({ hour: '0', minute: '0' })
     if (value === 'custom') {
       setIsCustom(true)
       handleChangeItem({ duration: null })
       return
     }
-    setCurPreorderTime({ hour: '0', minute: '0' })
     setIsCustom(false)
     handleChangeItem({ duration: value })
   }
@@ -340,7 +340,7 @@ const BusinessProductAddFormUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -275,6 +275,7 @@ export const BusinessProductList = (props) => {
               setIsAddProduct(false)
               handleParentProductAdd && handleParentProductAdd(false)
             }}
+            showExpandIcon
           >
             <BusinessProductAddForm
               {...props}

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

@@ -113,14 +113,11 @@ export const WrapperNotFound = styled.div`
 export const AddProductBtn = styled.div`
   user-select: none;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   margin-top: 12px;
   cursor: pointer;
   margin-bottom: 15px;
   display: inline-block;
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 
 export const ProductListBottom = styled.div`

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

@@ -36,13 +36,9 @@ export const AddCategory = styled.div`
   display: inline;
   user-select: none;
   font-size: 14px;
-  color: ${props => props.theme.colors?.lightGray};
+  color: ${props => props.theme.colors?.primary};
   cursor: pointer;
   margin: 15px 10px;
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 
 export const CategoryTab = styled.div`

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, BusinessProductsCategoyDetails as BusinessProductsCategoyDetailsController } from 'ordering-components-admin-external'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { DropdownButton, Dropdown } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { Alert, Confirm } from '../../Shared'
-import { Switch } from '../../../styles'
+import { IconButton, Switch } from '../../../styles'
 import { SeoOptions } from '../SeoOptions'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import { BusinessCategoryInfoSettingList } from '../BusinessCategoryInfoSettingList'
 import { BusinessProductsCategoyInfo } from '../BusinessProductsCategoyInfo'
@@ -44,10 +45,12 @@ const BusinessProductsCategoyDetailsUI = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [selectedInfoItem, setSelctedInfoItem] = useState('information')
+  const [isExpand, setIsExpand] = useState(false)
 
   const closeAlert = () => {
     setAlertState({
@@ -67,6 +70,15 @@ const BusinessProductsCategoyDetailsUI = (props) => {
     })
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('editCategory')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (formState?.result?.error) {
       setAlertState({
@@ -78,7 +90,7 @@ const BusinessProductsCategoyDetailsUI = (props) => {
 
   return (
     <>
-      <Container id='editCategory'>
+      <Container>
         <EditCategoryContent>
           {
             businessState.loading ? (
@@ -122,6 +134,14 @@ const BusinessProductsCategoyDetailsUI = (props) => {
                     )}
                   </BusinessEnableWrapper>
                   <RightHeader>
+                    {width > 576 && (
+                      <IconButton
+                        color='black'
+                        onClick={() => expandSideBar()}
+                      >
+                        {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+                      </IconButton>
+                    )}
                     {!isAddMode && (
                       <ActionSelectorWrapper>
                         <DropdownButton

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

@@ -127,9 +127,9 @@ export const RightHeader = styled.div`
   align-items: center;
 
   ${props => props.theme?.rtl ? css`
-    margin-left: 40px;
+    margin-left: 28px;
   ` : css`
-    margin-right: 40px;
+    margin-right: 28px;
   `}
 `