ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+
+import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
+
+import {
+  OrdersDashboardSLAControlsContainer,
+  OrderTimeStatusSelectWrapper,
+  Option,
+  Timestatus
+} from './styles'
+
+export const OrdersDashboardSLAControls = (props) => {
+  const { setTimeStatus } = props
+  const [defaultOptionValue, setDefaultOptionValue] = useState('default')
+  const [filteredTimeStatus, setFilteredTimeStatus] = useState([])
+  const [, t] = useLanguage()
+
+  const timeStatus = [
+    {
+      value: 'default',
+      name: t('SLA_S', 'SLA’s'),
+      content: (
+        <Option noPadding>
+          <Timestatus timeState='' />
+          <p>{t('SLA_S', 'SLA’s')}</p>
+        </Option>
+      )
+    },
+    {
+      value: 'in_time',
+      name: t('OK', 'Ok'),
+      content: (
+        <Option noPadding>
+          <Timestatus timeState='in_time' />
+          <p>{t('OK', 'Ok')}</p>
+        </Option>
+      )
+    },
+    {
+      value: 'at_risk',
+      name: t('AT_RISK', 'At Risk'),
+      content: (
+        <Option noPadding>
+          <Timestatus timeState='at_risk' />
+          <p>{t('AT_RISK', 'At Risk')}</p>
+        </Option>
+      )
+    },
+    {
+      value: 'delayed',
+      name: t('DELAYED', 'Delayed'),
+      content: (
+        <Option noPadding>
+          <Timestatus timeState='delayed' />
+          <p>{t('DELAYED', 'Delayed')}</p>
+        </Option>
+      )
+    }
+  ]
+
+  const changeOrderTimeStatus = (val) => {
+    setDefaultOptionValue(val)
+    if (val === 'default') {
+      setTimeStatus(null)
+      return
+    }
+    setTimeStatus(val)
+  }
+
+  const handleChangeSearch = (searchValue) => {
+    const _filteredTimeStatus = [...timeStatus?.filter(orderStatuse => orderStatuse?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))]
+    setFilteredTimeStatus(_filteredTimeStatus)
+  }
+
+  useEffect(() => {
+    setFilteredTimeStatus(timeStatus)
+  }, [])
+
+  return (
+    <OrdersDashboardSLAControlsContainer>
+      <OrderTimeStatusSelectWrapper>
+        <FirstSelect
+          searchBarIsCustomLayout
+          placeholder={<Option noPadding><p>{t('SLA_S', 'SLA’s')}</p></Option>}
+          options={filteredTimeStatus}
+          defaultValue={defaultOptionValue}
+          onChange={(timeState) => changeOrderTimeStatus(timeState)}
+          className='timeStatusSelect'
+          isShowSearchBar
+          searchBarPlaceholder={t('SEARCH', 'Search')}
+          handleChangeSearch={handleChangeSearch}
+        />
+      </OrderTimeStatusSelectWrapper>
+    </OrdersDashboardSLAControlsContainer>
+  )
+}

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

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components'
+
+export const OrdersDashboardSLAControlsContainer = styled.div`
+  display: flex;
+
+  button {
+    height: 42px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 14px;
+    ` : css`
+      margin-right: 14px;
+    `}
+
+    svg {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 5px;
+      ` : css`
+        margin-left: 5px;
+      `}
+    }
+  }
+
+  @media (min-width: 992px) {
+    margin: 0px;
+  }
+`
+
+export const OrderTimeStatusSelectWrapper = styled.div`
+  .timeStatusSelect {
+    width: 168px;
+    height: 43px;
+    line-height: 43px;
+    border: none;
+    background: #F8F9FA;
+    margin: 0 10px;
+    >div:first-child {
+      height: 100%;
+    }
+  }
+
+  .list-wrapper {
+    min-width: 168px;
+  }
+
+  .search-bar-container {
+    padding: 7px 11px;
+    width: 100%;
+    input {
+      border-radius: 7.6px;
+      width: 100%;
+    }
+  }
+
+  .search-bar-container {
+    svg {
+      top: 13px;
+    }
+    input {
+      height: 40px;
+    }
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  column-gap: 5px;
+
+  p {
+    margin: 0px;
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 26px;
+    color: ${props => props.theme.colors.secundaryContrast};
+  }
+
+  ${({ noPadding }) => noPadding && css`
+    padding: 0px;
+  `}
+`
+export const Timestatus = styled.div`
+  width: 4px;
+  height: 22px;
+  border-radius: 20px 20px 20px 20px;
+  margin-right: 5px;
+  ${props => props.theme?.rtl && css`
+    margin-left: 5px;
+    margin-right: 0;
+ `}
+  ${({ timeState }) => timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+  ${({ timeState }) => timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+  ${({ timeState }) => timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`

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

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, ExportCSV as ExportCSVController } from 'ordering-components-external'
+import { Modal, SpinnerLoader } from '../../Shared'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { Button } from '../../../styles'
+import { Download } from 'react-bootstrap-icons'
+import {
+  ExportContainer,
+  PopoverContainer,
+  Item,
+  ExportCSVResult,
+  ErrorMessage
+} from './styles'
+const ExportCSVUI = (props) => {
+  const {
+    actionStatus,
+    getCSV
+  } = props
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const [popoverOpen, setPopoverOpen] = useState(false)
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const handleExportAll = () => {
+    setPopoverOpen(false)
+    getCSV(false)
+  }
+
+  const handleExportFiltered = () => {
+    setPopoverOpen(false)
+    getCSV(true)
+  }
+
+  const closePopover = () => {
+    setPopoverOpen(false)
+  }
+
+  useEffect(() => {
+    if (!popoverOpen) return
+    document.addEventListener('click', closePopover)
+    return () => document.removeEventListener('click', closePopover)
+  }, [popoverOpen])
+
+  useEffect(() => {
+    if (!actionStatus?.result || actionStatus?.error) return
+    setModalOpen(true)
+  }, [actionStatus])
+
+  return (
+    <>
+      <ExportContainer>
+        <Button
+          borderRadius='7.6px'
+          color='secundary'
+          disabled={actionStatus.loading}
+          onClick={() => setPopoverOpen(!popoverOpen)}
+        >
+          {width > 600 && t('CSV', 'CSV')}
+          <Download />
+        </Button>
+        {popoverOpen && (
+          <PopoverContainer>
+            <Item onClick={() => handleExportAll()}>
+              {t('EXPORT_ALL', 'Export all')}
+            </Item>
+            <Item onClick={() => handleExportFiltered()}>
+              {t('EXPORT_FILTERED', 'Export filtered')}
+            </Item>
+          </PopoverContainer>
+        )}
+
+        {actionStatus.loading && (
+          <SpinnerLoader primary />
+        )}
+      </ExportContainer>
+      <Modal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+      >
+        <ExportCSVResult>
+          <h1 className='align-center'>{t('WEB_APPNAME', 'Ordering')}</h1>
+          {actionStatus?.result?.length > 0 && (
+            actionStatus?.result.map((e, i) => (
+              <ErrorMessage key={i}>{e?.message || e}</ErrorMessage>
+            )))}
+          <Button
+            rectangle
+            color='primary'
+            onClick={() => setModalOpen(false)}
+          >
+            {t('OK', 'OK')}
+          </Button>
+        </ExportCSVResult>
+      </Modal>
+    </>
+  )
+}
+
+export const OrdersExportCSV = (props) => {
+  const ExportCSVControlProps = {
+    ...props,
+    UIComponent: ExportCSVUI,
+    filterValues: props.filterValues
+  }
+  return <ExportCSVController {...ExportCSVControlProps} />
+}

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

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components'
+
+export const ExportContainer = styled.div`
+  position: relative;
+`
+
+export const PopoverContainer = styled.div`
+  position: absolute;
+  margin-top: 5px;
+  padding: 5px 0;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  z-index: 110;
+
+  ${props => props.theme?.rtl ? css`
+    left: 14px;
+  ` : css`
+    right: 14px;
+  `}
+`
+
+export const Item = styled.div`
+  padding: 3px 20px;
+  white-space: nowrap;
+  cursor: pointer;
+  &:hover {
+    background-color: #F2F2F2;
+  }
+`
+
+export const ExportCSVResult = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h1 {
+    font-size: 24px;
+    color: ${props => props.theme.colors?.headingColor};
+  }
+
+  button {
+    width: 100%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-top: 20px;
+  }
+`
+
+export const ErrorMessage = styled.p`
+  text-align: center;
+  margin: 5px 0;
+  color: ${props => props.theme.colors?.headingColor};
+`

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

@@ -0,0 +1,172 @@
+import React from 'react'
+import { useLanguage, OrdersFilter as OrdersFilterController } from 'ordering-components-external'
+import { BusinessesSelector } from '../BusinessesSelector'
+import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
+import { DateTypeSelector } from '../DateTypeSelector'
+import { DriverSelector } from '../DriverSelector'
+import { CitySelector, Modal } from '../../Shared'
+import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
+import { DeliveryTypeSelector } from '../DeliveryTypeSelector'
+import { PaymethodTypeSelector } from '../PaymethodTypeSelector'
+import { CountryFilter } from '../CountryFilter'
+import { Button, Input } from '../../../styles'
+import { CurrencyFilter } from '../CurrencyFilter'
+
+import {
+  FilterGroupListContainer,
+  WrapperRow,
+  MultiSelectContainer,
+  ButtonGroup
+} from './styles'
+
+const OrdersFilterGroupUI = (props) => {
+  const {
+    open,
+    handleCloseFilterModal,
+    filterValues,
+    driverGroupList,
+    driversList,
+    paymethodsList,
+    businessesList,
+    citiesList,
+    handleChangeGroup,
+    handleChangeDateType,
+    handleChangeFromDate,
+    handleChangeEndDate,
+    handleChangeBusinesses,
+    handleChangeDriver,
+    handleChangeCity,
+    handleChangeOrderStatus,
+    handleChangeDeliveryType,
+    handleChangePaymethodType,
+    handleResetFilterValues,
+    handleChangeFilterValues,
+    handleChangeOrderId,
+    handleChangeCountryCode,
+    handleChangeCurrency
+  } = props
+
+  const [, t] = useLanguage()
+
+  const handleAcceptFilter = () => {
+    handleChangeFilterValues(filterValues)
+    handleCloseFilterModal()
+  }
+
+  const handleClearFilter = () => {
+    handleResetFilterValues()
+    handleChangeFilterValues({})
+  }
+
+  return (
+    <Modal
+      width='80%'
+      padding='0px'
+      open={open}
+      onClose={() => handleCloseFilterModal()}
+    >
+      <FilterGroupListContainer className='filter-modal'>
+        <h1>{t('FILTER', 'Filter')}</h1>
+        <WrapperRow>
+          <Input
+            type='text'
+            placeholder='ID'
+            autoComplete='off'
+            value={filterValues?.orderId || ''}
+            onChange={(e) => handleChangeOrderId(e)}
+          />
+        </WrapperRow>
+        <WrapperRow>
+          <DriversGroupTypeSelector
+            driverGroupList={driverGroupList}
+            handleChangeGroup={handleChangeGroup}
+            filterValues={filterValues}
+          />
+          <DateTypeSelector
+            filterValues={filterValues}
+            handleChangeDateType={handleChangeDateType}
+            handleChangeFromDate={handleChangeFromDate}
+            handleChangeEndDate={handleChangeEndDate}
+          />
+        </WrapperRow>
+        <WrapperRow>
+          <BusinessesSelector
+            filterValues={filterValues}
+            businessesList={businessesList}
+            handleChangeBusinesses={handleChangeBusinesses}
+          />
+          <DriverSelector
+            isFilterView
+            drivers={driversList.drivers}
+            filterValues={filterValues}
+            handleChangeDriver={handleChangeDriver}
+          />
+        </WrapperRow>
+        <WrapperRow>
+          <CitySelector
+            cities={citiesList}
+            filterValues={filterValues}
+            handleChangeCity={handleChangeCity}
+          />
+          <MultiSelectContainer>
+            <OrderStatusTypeSelector
+              isFilterView
+              filterValues={filterValues}
+              handleChangeOrderStatus={handleChangeOrderStatus}
+            />
+          </MultiSelectContainer>
+        </WrapperRow>
+        <WrapperRow>
+          <DeliveryTypeSelector
+            filterValues={filterValues}
+            handleChangeDeliveryType={handleChangeDeliveryType}
+          />
+          <PaymethodTypeSelector
+            paymethodsList={paymethodsList}
+            filterValues={filterValues}
+            handleChangePaymethodType={handleChangePaymethodType}
+          />
+        </WrapperRow>
+        <WrapperRow>
+          <CountryFilter
+            filterValues={filterValues}
+            handleChangeCountryCode={handleChangeCountryCode}
+          />
+          <CurrencyFilter
+            filterValues={filterValues}
+            handleChangeCurrency={handleChangeCurrency}
+          />
+        </WrapperRow>
+        <ButtonGroup>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => handleAcceptFilter()}
+          >
+            {t('ACCEPT', 'Accept')}
+          </Button>
+          <Button
+            color='secundaryDark'
+            borderRadius='8px'
+            onClick={() => handleClearFilter()}
+          >
+            {t('CLEAR', 'Clear')}
+          </Button>
+        </ButtonGroup>
+      </FilterGroupListContainer>
+    </Modal>
+  )
+}
+
+export const OrdersFilterGroup = (props) => {
+  const FilterControlProps = {
+    ...props,
+    UIComponent: OrdersFilterGroupUI,
+    driverGroupList: props.driverGroupList
+  }
+  return (
+    <>
+      <OrdersFilterController {...FilterControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components'
+
+export const FilterGroupListContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 15px 20px;
+  > h1 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-top: 10px;
+    margin-bottom: 30px;
+  }
+
+  & > div {
+    width: 48%;
+  }
+
+  @media (max-width: 576px) {
+    flex-direction: column;
+    & > div {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 768px) {
+    padding: 30px;
+  }
+`
+export const WrapperRow = styled.div`
+  display: flex;
+  width: 100% !important;
+  flex-direction: column;
+  justify-content: space-between;
+
+  & > div {
+    width: 100%;
+    height: 57px;
+    margin-bottom: 20px;
+    background-color: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+    border-radius: 8px;
+  }
+
+  .order-status-multi-select {
+    p {
+      padding: 0;
+      color: ${props => props.theme.colors.headingColor} !important;
+    }
+  }
+
+  .date-filter-container {
+    z-index: 100;
+  }
+
+  > input {
+    width: 100%;
+    height: 57px;
+    margin-bottom: 20px;
+    padding: 10px 25px;
+    box-sizing: border-box;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    -moz-appearance: textfield;
+  }
+
+  @media (min-width: 992px) {
+    flex-direction: row;
+    & > div {
+      width: 48%;
+    }
+
+    > input {
+      width: 48%;
+    }
+  }
+`
+
+export const MultiSelectContainer = styled.div`
+  > div {
+    width: 100%;
+    border: none;
+
+    > div:first-child {
+      height: 54px;
+      > div:first-child {
+        padding: 5px;
+        border: none;
+      }
+    }
+
+    > div:not(:first-child) {
+      > div {
+        > div {
+          > div {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+`
+
+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;
+      `}
+    }
+  }
+`