ordering-ui-external 1.8.8 → 1.8.10

package/src/themes/callcenterOriginal/src/components/Header/styles.js

@@ -9,12 +9,33 @@ export const Header = styled.div`
 
 export const InnerHeader = styled.div`
   display: flex;
-  width: 100%;
   color: #FFF;
   justify-content: space-between;
   width: 98%;
   margin: 15px auto;
   align-items: center;
+
+  #center-side {
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? 'calc(60% - 140px)' : 'calc(60% - 30px)'};
+  }
+
+  @media (min-width: 1024px) {
+    #center-side {
+      width: calc(60% - 100px);
+    }
+  }
+
+  @media (min-width: 1200px) {
+    #center-side {
+      width: calc(60% - 160px);
+    }
+  }
+
+  @media (min-width: 1500px) {
+    #center-side {
+      width: calc(60% - 200px);
+    }
+  }
 `
 
 export const LogoHeader = styled.div`
@@ -85,7 +106,6 @@ export const Menu = styled.div`
     box-sizing: border-box;
     border-radius: 50px;
     margin: 0 20px;
-    flex-grow: 1;
     padding: 0 10px;
     display: flex;
     align-items: center;
@@ -100,17 +120,20 @@ export const Menu = styled.div`
 
     @media (min-width: 1024px) {
       padding: 0 20px;
-      margin: 0 70px;
+      margin-left: 35px;
+      margin-right: 10px;
     }
     
     @media (min-width: 1200px) {
       padding: 0 30px;
-      margin: 0 100px;
+      margin-left: 50px;
+      margin-right: 15px;
     }
 
     @media (min-width: 1500px) {
       padding: 0 30px;
-      margin: 0 130px;
+      margin-left: 75px;
+      margin-right: 20px
     }
   }
 
@@ -346,3 +369,24 @@ export const Divider = styled.div`
   border: 1px solid #DEE2E6;
   height: 100%;
 `
+
+export const AdminSection = styled.div`
+  border: 1px solid ${({ theme }) => theme?.colors?.primary};
+  background: #fff;
+  height: 30px;
+  width: 120px;
+  color: ${({ theme }) => theme?.colors?.primary};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  cursor: pointer;
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+  svg{
+    width: 14px;
+    height: 14px;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/BusinessesSelector/index.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react'
+import {
+  useLanguage
+} from 'ordering-components-external'
+import { MultiSelect } from '../../../styles'
+import {
+  Option,
+  PlaceholderTitle,
+  OptionContent,
+  OptionName,
+  OptionCategory,
+  WrapperBusinessImage,
+  BusinessImage
+} from './styles'
+
+export const BusinessesSelector = (props) => {
+  const {
+    filterValues,
+    businessesList,
+    handleChangeBusinesses
+  } = props
+
+  const [, t] = useLanguage()
+  const [businessTypes, setBusinessTypes] = useState([])
+
+  const Placeholder = <PlaceholderTitle>{t('SELECT_BUSINESS', 'Select business')}</PlaceholderTitle>
+  const businessesLoading = [{ value: 'default', content: <Option>{t('BUSINESSES_LOADING', 'Businesses loading')}...</Option> }]
+
+  useEffect(() => {
+    const _businessesOptionList = []
+    if (!businessesList.loading) {
+      const _businessesOption = businessesList.businesses.map((business) => {
+        return {
+          value: business.id,
+          content: (
+            <Option>
+              <WrapperBusinessImage>
+                {business.logo && <BusinessImage bgimage={business.logo} />}
+              </WrapperBusinessImage>
+              <OptionContent>
+                <OptionName>
+                  {business.name}
+                </OptionName>
+                <OptionCategory>
+                  {business?.alcohol && t('ALCOHOL', 'Alcohol')}
+                  {business?.food && t('FOOD', 'Food')}
+                  {business?.groceries && t('GROCERIES', 'Groceries')}
+                  {business?.laundry && t('LAUNDRY', 'Laundry')}
+                </OptionCategory>
+              </OptionContent>
+            </Option>
+          )
+        }
+      })
+
+      for (const option of _businessesOption) {
+        _businessesOptionList.push(option)
+      }
+    }
+
+    setBusinessTypes(_businessesOptionList)
+  }, [businessesList])
+
+  return (
+    <>
+      {!businessesList.loading ? (
+        <MultiSelect
+          defaultValue={filterValues.businessIds}
+          placeholder={Placeholder}
+          options={businessTypes}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          optionBottomBorder
+          onChange={(business) => handleChangeBusinesses(business)}
+        />
+      ) : (
+        <MultiSelect
+          defaultValue='default'
+          options={businessesLoading}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          optionBottomBorder
+        />
+      )}
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/BusinessesSelector/styles.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  padding: 5px 10px;
+
+  img {
+    width: 45px;
+  }
+`
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+`
+
+export const OptionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const OptionName = styled.div`
+  color: #263238;
+  font-size: 16px;
+  line-height: 1.3;
+`
+export const OptionCategory = styled.div`
+  color: #263238;
+  font-size: 12px;
+  line-height: 1.3;
+`
+
+export const WrapperBusinessImage = styled.div`
+  width: 45px;
+  height: 45px;
+  border: 1px solid #E3E3E3;
+  border-radius: 10px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`
+
+const BusinessImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 10px;
+`
+export const BusinessImage = (props) => {
+  return (
+    <BusinessImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </BusinessImageStyled>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CountryFilter/index.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, CountryList as CountryListControler } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles/MultiSelect'
+import { PlaceholderTitle, Option, SkeletonWrapper } from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+const CountryFilterUI = (props) => {
+  const {
+    countriesState,
+    filterValues,
+    handleChangeCountryCode
+  } = props
+
+  const [, t] = useLanguage()
+
+  const placeholder = (
+    <PlaceholderTitle>
+      {t('SELECT_A_COUNTRY', 'Select a country')}
+    </PlaceholderTitle>
+  )
+
+  const [countryTypes, setCountryTypes] = useState([])
+
+  useEffect(() => {
+    const _countryList = []
+    if (!countriesState.loading) {
+      const _groupsOption = countriesState.countries.map((country) => {
+        return {
+          value: country.code,
+          content: (
+            <Option>{country.name}</Option>
+          )
+        }
+      })
+
+      for (const option of _groupsOption) {
+        _countryList.push(option)
+      }
+    }
+    setCountryTypes(_countryList)
+  }, [countriesState])
+
+  return (
+    <>
+      {!countriesState.loading ? (
+        <MultiSelect
+          placeholder={placeholder}
+          defaultValue={filterValues.countryCode}
+          options={countryTypes}
+          onChange={(code) => handleChangeCountryCode(code)}
+          optionInnerMaxHeight='200px'
+        />
+      ) : (
+        <SkeletonWrapper>
+          <Skeleton style={{ height: '57px' }} />
+        </SkeletonWrapper>
+      )}
+    </>
+  )
+}
+
+export const CountryFilter = (props) => {
+  const countryFilterProps = {
+    ...props,
+    UIComponent: CountryFilterUI
+  }
+  return <CountryListControler {...countryFilterProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CountryFilter/styles.js

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components'
+
+export const PlaceholderTitle = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  column-gap: 20px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  > span {
+    display: flex;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CurrencyFilter/index.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles/MultiSelect'
+import { PlaceholderTitle, Option } from './styles'
+import { currencyList } from '../../../../../../config/constants'
+
+export const CurrencyFilter = (props) => {
+  const {
+    filterValues,
+    handleChangeCurrency
+  } = props
+
+  const [, t] = useLanguage()
+
+  const placeholder = (
+    <PlaceholderTitle>
+      {t('SELECT_A_CURRENCY', 'Select a currency')}
+    </PlaceholderTitle>
+  )
+
+  const [countryTypes, setCountryTypes] = useState([])
+
+  useEffect(() => {
+    const _countryList = []
+    const _groupsOption = currencyList.map((country) => {
+      return {
+        value: country.value,
+        content: (
+          <Option>{country.text}</Option>
+        )
+      }
+    })
+
+    for (const option of _groupsOption) {
+      _countryList.push(option)
+    }
+    setCountryTypes(_countryList)
+  }, [currencyList])
+
+  return (
+    <MultiSelect
+      placeholder={placeholder}
+      defaultValue={filterValues.currency}
+      options={countryTypes}
+      onChange={(code) => handleChangeCurrency(code)}
+      optionInnerMaxHeight='200px'
+    />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CurrencyFilter/styles.js

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components'
+
+export const PlaceholderTitle = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  column-gap: 20px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  > span {
+    display: flex;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/DateTypeSelector/index.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import DatePicker from 'react-datepicker'
+import 'react-datepicker/dist/react-datepicker.css'
+import dayjs from 'dayjs'
+
+import { Select } from '../../../styles/Select/FirstSelect'
+import { Option, DateContainer, PlaceholderTitle } from './styles'
+
+export const DateTypeSelector = (props) => {
+  const {
+    filterValues,
+    handleChangeDateType,
+    handleChangeFromDate,
+    handleChangeEndDate
+  } = props
+
+  const [, t] = useLanguage()
+  const [startDate, setStartDate] = useState(null)
+  const [endDate, setEndDate] = useState(null)
+
+  const dateTypes = [
+    { value: 'default', content: <PlaceholderTitle>{t('SELECT_DATE', 'Select date')}</PlaceholderTitle> },
+    { value: 'today', content: <Option>{t('TODAY', 'Today')}</Option> },
+    { value: 'yesterday', content: <Option>{t('YESTERDAY', 'Yesterday')}</Option> },
+    { value: 'last7', content: <Option>{t('LAST_7_DAYS', 'Last 7 dyas')}</Option> },
+    { value: 'last30', content: <Option>{t('LAST_30_DAYS', 'Last 30 days')}</Option> },
+    {
+      value: 'term',
+      content: (
+        <Option isDateOption>
+          <DateContainer>
+            <span>{t('FROM', 'From')}</span>
+            <DatePicker
+              selected={startDate}
+              placeholderText='mm/dd/yyyy'
+              className='startDate'
+              isClearable
+              onChange={date => _handleChangeFromDate(date)}
+            />
+          </DateContainer>
+          <DateContainer>
+            <span>{t('TO', 'To')}</span>
+            <DatePicker
+              selected={endDate}
+              minDate={new Date(startDate)}
+              placeholderText='mm/dd/yyyy'
+              className='endDate'
+              onChange={date => _handleChangeEndDate(date)}
+            />
+          </DateContainer>
+        </Option>
+      )
+    }
+  ]
+
+  const changeDateType = (dateType) => {
+    handleChangeDateType(dateType)
+  }
+
+  const _handleChangeFromDate = (date) => {
+    setStartDate(date)
+    if (date !== null) {
+      handleChangeFromDate(dayjs(date).format('YYYY-MM-DD'))
+    } else {
+      handleChangeFromDate(null)
+    }
+  }
+
+  const _handleChangeEndDate = (date) => {
+    setEndDate(date)
+    if (date !== null) {
+      handleChangeEndDate(dayjs(date).format('YYYY-MM-DD'))
+    } else {
+      handleChangeEndDate(null)
+    }
+  }
+  useEffect(() => {
+    if (filterValues.dateType !== 'term') return
+
+    if (filterValues.deliveryFromDatetime !== null) {
+      setStartDate(new Date(filterValues.deliveryFromDatetime))
+    }
+    if (filterValues.deliveryEndDatetime !== null) {
+      setEndDate(new Date(filterValues.deliveryEndDatetime))
+    }
+  }, [filterValues])
+
+  return (
+    <Select
+      defaultValue={filterValues.dateType || 'default'}
+      options={dateTypes}
+      onChange={(dateType) => changeDateType(dateType)}
+      className='date-filter-container'
+    />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/DateTypeSelector/styles.js

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 15px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+
+  ${({ isDateOption }) => isDateOption && css`
+    max-width: calc(100vw - 60px);
+    overflow: auto;
+    ${props => props.theme?.rtl ? css`
+      > div:first-child {
+        margin-left: 10px;
+      }
+    ` : css`
+      > div:first-child {
+        margin-right: 10px;
+      }
+    `}
+  `}
+`
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+`
+
+export const DateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 3px 10px;
+    border: 1px solid #F2F2F2;
+  }
+
+  ${props => props.theme?.rtl ? css`
+    span {
+      margin-left: 10px;
+    }
+  ` : css`
+    span {
+      margin-right: 10px;
+    }
+  `}
+
+  @media (min-width: 768px) {
+    padding: 0;
+  }
+`