ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,219 @@
+import styled, { css } from 'styled-components'
+
+export const OrdersListContainer = styled.div`
+  height: calc(100% - 200px);
+  padding: 0 12px 15px 12px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+
+  @media (min-width: 1024px) and (max-width: 1300px) {
+    height: calc(100% - 230px);
+  }
+`
+export const OrderNunberContainer = styled.div`
+
+`
+export const OrderCard = styled.div`
+  position: relative;
+  cursor: pointer;
+  border-radius: 8px;
+  border: 1px solid ${props => props.theme.colors?.secundary};
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  padding-left: 25px;
+
+  ${props => props.theme?.rtl && css`
+    padding-left: 0px;
+    padding-right: 25px;
+ `}
+ 
+
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.lightPrimary};
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  p,
+  h2 {
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+  }
+  
+  h2 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+`
+
+export const CardHeading = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 94%;
+`
+
+export const OrderHeader = styled.div`
+  > div {
+    display: flex;
+    margin: 5px 0 10px;
+    > p {
+      font-size: 12px;
+    }
+  }
+
+  > p {
+    font-size: 14px;
+    margin-top: 5px;
+    color: ${props => props.theme.colors.colorPage};
+  }
+`
+export const Timer = styled.div`
+  align-items: right;
+  p {
+    font-size: 10px;
+    line-height: 15px;
+  }
+
+  .bold {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .in_time{
+    color: #00D27A;
+  }
+
+  .at_risk {
+    color: #FFC700;
+  }
+  
+  .delayed {
+    color: #E63757;
+  }
+`
+
+export const ViewDetails = styled.a`
+  cursor: pointer;
+  color: ${props => props.theme.colors.primary};
+  font-size: 12px;
+  text-decoration: underline;
+  margin: 0 10px;
+`
+
+export const InfoItemContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  margin: 5px 0;
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 125px;
+
+  }
+  display: flex;
+  align-items: center;
+
+  div.info {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+    p {
+      margin: 0px;
+      color: ${props => props.theme.colors?.headingColor};
+      font-size: 12px;
+    }
+    p.bold {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+  @media (min-width: 1300px) {
+    width: 50%;
+    margin: 0;
+  }
+`
+
+export const WrapperImage = styled.div`
+  max-width: 45px;
+  max-height: 45px;
+  height: 45px;
+  width: 45px;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    border: 1px solid #E3E3E3;
+    border-radius: 10px;
+  `}
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 7.6px;
+    object-fit: cover;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`
+
+export const CardContent = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1300px) {
+    flex-direction: row;
+  }
+`
+export const WrapperPagination = styled.div`
+  margin: 10px 15px 0 15px;
+`
+
+export const UnreadMessageCounter = styled.div`
+  position: absolute;
+  top: 12px;
+  ${props => props.theme?.rtl ? css`
+    left: 20px;
+  ` : css`
+    right: 20px;
+  `}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.theme.colors.lightPrimary};
+  border-radius: 8px;
+  font-size: 12px;
+  height: 24px;
+  color: ${props => props.theme.colors.primary};
+  padding: 0 10px;
+`
+export const Timestatus = styled.div`
+  position: absolute;
+  width: 4px;
+  height: 130px;
+  border-radius: 20px;
+  left: 10px;
+  top: 17px;
+  ${props => props.theme?.rtl && css`
+    left: unset;
+    right: 10px;
+ `}
+ ${({ 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/OrdersContentHeader/index.js

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useConfig } from 'ordering-components-external'
+import { SearchBar } from '../../Shared'
+import { OrdersFilterGroup } from '../OrdersFilterGroup'
+import { Funnel, List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
+import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
+import { OrdersDashboardSLAControls } from '../OrdersDashboardSLAControls'
+import { OrderDashboardSLASetting } from '../OrderDashboardSLASetting'
+import { IconButton } from '../../../styles'
+import { useInfoShare } from '../../../../../../contexts/InfoShareContext'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
+
+import {
+  OrderContentHeaderContainer,
+  HeaderSection,
+  HeaderTitle,
+  TopRightSection,
+  SLAControlsWrapper,
+  WrapperSearchAndFilter
+} from './styles'
+
+export const OrdersContentHeader = (props) => {
+  const {
+    isDisableTitle,
+    isDisableControl,
+    title,
+    handleChangeSearch,
+    searchValue,
+    driverGroupList,
+    driversList,
+    citiesList,
+    paymethodsList,
+    businessesList,
+    filterValues,
+    selectedOrderIds,
+    handleChangeFilterValues,
+    handleOpenTour,
+    filterModalOpen,
+    setFilterModalOpen,
+    setTimeStatus,
+    setSlaSettingTime,
+    isShowMapsKeySettingButton
+  } = props
+
+  const { width } = useWindowSize()
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const [filterApplied, setFilterApplied] = useState(false)
+  const [configState] = useConfig()
+
+  useEffect(() => {
+    let _filterApplied = false
+    if (Object.keys(filterValues).length === 0) {
+      _filterApplied = false
+    } else {
+      _filterApplied = filterValues?.groupTypes?.length || filterValues.businessIds.length > 0 || filterValues.cityIds.length > 0 ||
+        filterValues.deliveryEndDatetime !== null || filterValues.deliveryFromDatetime !== null || filterValues.deliveryTypes.length > 0 ||
+        filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0
+    }
+    setFilterApplied(_filterApplied)
+  }, [filterValues])
+
+  return (
+    <>
+      <OrderContentHeaderContainer
+        isDisableControl={isDisableControl}
+      >
+        {!isDisableTitle && (
+          <HeaderSection>
+            {isCollapse && (
+              <IconButton
+                color='black'
+                onClick={() => handleMenuCollapse(false)}
+              >
+                <MenuIcon />
+              </IconButton>
+            )}
+            <HeaderTitle>
+              {title}
+            </HeaderTitle>
+            {selectedOrderIds && width > 768 && (
+              <OverlayTrigger
+                placement='bottom'
+                overlay={
+                  <Tooltip>
+                    {t('START_TUTORIAL', 'Start tutorial')}
+                  </Tooltip>
+                }
+              >
+                <IconButton
+                  color='dark'
+                  className='tour_btn'
+                  onClick={() => handleOpenTour()}
+                >
+                  <LifePreserver />
+                </IconButton>
+              </OverlayTrigger>
+            )}
+
+          </HeaderSection>
+        )}
+        <TopRightSection>
+          {isShowMapsKeySettingButton && (
+            <GoogleMapsApiKeySettingButton />
+          )}
+          {(configState?.configs?.order_deadlines_enabled?.value === '1') && (
+            <SLAControlsWrapper>
+              <OrderDashboardSLASetting
+                setSlaSettingTime={setSlaSettingTime}
+              />
+              <OrdersDashboardSLAControls
+                setTimeStatus={setTimeStatus}
+              />
+            </SLAControlsWrapper>
+          )}
+          <WrapperSearchAndFilter
+            fullWidth={isDisableTitle && isDisableControl}
+          >
+            <SearchBar
+              isCustomLayout
+              lazyLoad
+              onSearch={handleChangeSearch}
+              search={searchValue}
+              placeholder={t('SEARCH', 'Search')}
+            />
+            <IconButton
+              color='black'
+              onClick={() => setFilterModalOpen && setFilterModalOpen(true)}
+              name='filter-btn'
+            >
+              {filterApplied ? <Funnel /> : <MdcFilterOff />}
+            </IconButton>
+          </WrapperSearchAndFilter>
+        </TopRightSection>
+      </OrderContentHeaderContainer>
+
+      <OrdersFilterGroup
+        open={filterModalOpen}
+        handleCloseFilterModal={() => setFilterModalOpen && setFilterModalOpen(false)}
+        driverGroupList={driverGroupList}
+        driversList={driversList}
+        paymethodsList={paymethodsList}
+        businessesList={businessesList}
+        citiesList={citiesList}
+        handleChangeFilterValues={handleChangeFilterValues}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,124 @@
+import styled, { css } from 'styled-components'
+
+export const OrderContentHeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  min-width: 300px;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+
+  @media (max-width: 1200px) {
+    ${({ isDisableControl }) => !isDisableControl && css`
+      flex-direction: column;
+    `}
+  }
+`
+export const HeaderSection = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: fit-content;
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+
+    &.tour_btn {
+      ${props => props.theme?.rtl ? css`
+        margin-left: -8px;
+        margin-right: 8px;
+      ` : css`
+        margin-right: -8px;
+        margin-left: 8px;
+      `}
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+`
+export const HeaderTitle = styled.p`
+  color: ${(props) => props.theme.colors.headingColor};
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0px;
+  text-transform: capitalize;
+  white-space: nowrap;
+
+  @media (max-width: 560px) {
+    width: calc(100% - 50px);
+  }
+`
+export const TopRightSection = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+`
+
+export const SLAControlsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+
+  @media (min-width: 768px) {
+    margin-top: 0px;
+  }
+`
+
+export const WrapperSearchAndFilter = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+
+  ${({ fullWidth }) => fullWidth && css`
+    width: 100%;
+    > div {
+      width: 100%;
+
+      input {
+        width: 100%;
+      }
+    }
+  `}
+
+  input {
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 8px;
+    ` : css`
+      margin-left: 8px;
+    `}
+  }
+
+  @media (min-width: 760px) {
+    margin: 20px 0 10px 0;
+  }
+
+  @media (min-width: 992px) {
+    margin: 0px;
+  }
+`

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { OrdersDashboardList } from '../OrdersDashboardList'
+import {
+  OrdersManageContainer
+} from './styles'
+
+export const OrdersDashboard = (props) => {
+  return (
+    <OrdersManageContainer>
+      <OrdersDashboardList
+        {...props}
+        orderListView='table'
+      />
+    </OrdersManageContainer>
+  )
+}

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

@@ -0,0 +1,4 @@
+import styled from 'styled-components'
+
+export const OrdersManageContainer = styled.div`
+`

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useSession } from 'ordering-components-external'
+import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
+import { OrdersExportCSV } from '../OrdersExportCSV'
+import { OrderDelete } from '../OrderDelete'
+import {
+  OrderDashboardControlsContainer,
+  InnerContnet,
+  WrapOrderStatusTypeSelector
+} from './styles'
+
+export const OrdersDashboardControls = (props) => {
+  const {
+    selectedOrderNumber,
+    filterValues,
+    handleDeleteMultiOrders,
+    handleChangeMultiOrdersStatus
+  } = props
+
+  const [{ user }] = useSession()
+
+  return (
+    <>
+      <OrderDashboardControlsContainer>
+        <InnerContnet>
+          <OrdersExportCSV filterValues={filterValues} />
+          {selectedOrderNumber > 0 && (
+            <>
+              {user?.level !== 5 && (
+                <OrderDelete
+                  handleDeleteMultiOrders={handleDeleteMultiOrders}
+                />
+              )}
+              <WrapOrderStatusTypeSelector>
+                <OrderStatusTypeSelector
+                  orderControl
+                  isFirstSelect
+                  noPadding
+                  mutiOrdersChange
+                  noSelected
+                  defaultValue='default'
+                  type='primary'
+                  handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
+                />
+              </WrapOrderStatusTypeSelector>
+            </>
+          )}
+        </InnerContnet>
+      </OrderDashboardControlsContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components'
+
+export const OrderDashboardControlsContainer = styled.div`
+  display: flex;
+  margin-top: 10px;
+
+  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 InnerContnet = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const WrapOrderStatusTypeSelector = styled.div`
+  margin: 0 7px;
+  > div {
+    > div:first-child {
+      border-color: ${props => props.theme.colors?.secundary};
+      border-radius: 8px;
+      background-color: ${props => props.theme.colors?.secundary};
+      > div:first-child {
+        padding-top: 4px;
+        padding-bottom: 4px;
+        > div:first-child {
+          > div {
+            border: none !important;
+            p {
+              color: ${props => props.theme.colors.secundaryContrast} !important;
+              padding: 0 !important;
+            }
+          }
+        }
+      }
+    }
+
+    .list-wrapper {
+      > div {
+        padding: 0 10px;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { DashboardOrdersList as OrdersListController } from 'ordering-components-external'
+import { OrdersListing } from '../OrdersListing'
+
+export const OrdersDashboardList = (props) => {
+  const {
+    selectedSubOrderStatus,
+    isMessagesView,
+    orderByOption
+  } = props
+
+  const OrdersCommonControlProps = {
+    ...props,
+    UIComponent: OrdersListing,
+    useDefualtSessionManager: true,
+    orderBy: isMessagesView ? orderByOption : 'id',
+    orderDirection: isMessagesView
+      ? orderByOption === 'id' ? 'desc' : 'asc'
+      : 'desc',
+    asDashboard: true,
+    isSearchByOrderId: true,
+    isSearchByCustomerEmail: true,
+    isSearchByCustomerPhone: true,
+    isSearchByBusinessName: true,
+    driverId: props.driverId
+  }
+
+  return (
+    <>
+      {isMessagesView ? (
+        <OrdersListController
+          isMessagesView
+          {...OrdersCommonControlProps}
+          orderStatus={selectedSubOrderStatus?.all}
+        />
+      ) : (
+        <>
+          <OrdersListController
+            groupStatus='pending'
+            {...OrdersCommonControlProps}
+            orderStatus={selectedSubOrderStatus?.pending}
+          />
+
+          <OrdersListController
+            groupStatus='inProgress'
+            {...OrdersCommonControlProps}
+            orderStatus={selectedSubOrderStatus?.inProgress}
+          />
+
+          <OrdersListController
+            groupStatus='completed'
+            {...OrdersCommonControlProps}
+            orderStatus={selectedSubOrderStatus?.completed}
+          />
+
+          <OrdersListController
+            groupStatus='cancelled'
+            {...OrdersCommonControlProps}
+            orderStatus={selectedSubOrderStatus?.cancelled}
+          />
+        </>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const WrapperOrderlist = styled.div``