ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,81 @@
+import styled, { css } from 'styled-components'
+
+export const ModalContainer = styled.div`
+  padding: 10px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: fadeIn 200ms;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0px;
+  }
+
+  p {
+    text-align: center;
+    font-size: 16px;
+    margin-top: 0px;
+    margin-bottom: 22px;
+
+    span {
+      color: ${props => props.theme.colors.primary};
+      font-weight: 600;
+    }
+  }
+  img {
+    width: 250px;
+    height: 250px;
+    object-fit: contain;
+    margin: 40px 0;
+  }
+
+  @keyframes fadeIn {
+    from {
+      transform: scale(2);
+    }
+  
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @media (min-width: 768px) {
+    img {
+      width: 290px;
+      height: 290px;
+    }
+  }
+`
+export const ToastWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  img {
+    height: 39px;
+  }
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    color: #344050;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 15px;
+    ` : css`
+      margin-left: 15px;
+    `}
+    span {
+      &:first-child {
+        font-size: 14px;
+        line-height: 21px;
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+      &:last-child {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,91 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { DragScroll } from '../../Shared'
+import CgSpinnerTwoAlt from '@meronex/icons/cg/CgSpinnerTwoAlt'
+
+import {
+  OrderStatusFilterContainer,
+  Tab
+} from './styles'
+
+export const OrderStatusFilterBar = (props) => {
+  const {
+    selectedOrderStatus,
+    changeOrderStatus,
+    numberOfOrdersByStatus
+  } = props
+
+  const changeSelectedOrderStatus = (orderStatus) => {
+    window.scrollTo(0, 0)
+    changeOrderStatus(orderStatus)
+  }
+
+  const [, t] = useLanguage()
+  return (
+    <>
+      <OrderStatusFilterContainer className='order_status_filter'>
+        <DragScroll>
+          <Tab
+            active={selectedOrderStatus === 'pending'}
+            onClick={() => changeSelectedOrderStatus('pending')}
+          >
+            {t('PENDING', 'pending')}
+            <span>(
+              {numberOfOrdersByStatus?.result ? (
+                numberOfOrdersByStatus?.result?.pending ?? 0
+              ) : (
+                <CgSpinnerTwoAlt />
+              )}
+              )
+            </span>
+          </Tab>
+
+          <Tab
+            active={selectedOrderStatus === 'inProgress'}
+            onClick={() => changeSelectedOrderStatus('inProgress')}
+          >
+            {t('IN_PROGRESS', 'in progress')}
+            <span>(
+              {numberOfOrdersByStatus?.result ? (
+                numberOfOrdersByStatus?.result?.inProgress ?? 0
+              ) : (
+                <CgSpinnerTwoAlt />
+              )}
+            )
+            </span>
+          </Tab>
+
+          <Tab
+            active={selectedOrderStatus === 'completed'}
+            onClick={() => changeSelectedOrderStatus('completed')}
+          >
+            {t('COMPLETED', 'completed')}
+            <span>(
+              {numberOfOrdersByStatus?.result ? (
+                numberOfOrdersByStatus?.result?.completed ?? 0
+              ) : (
+                <CgSpinnerTwoAlt />
+              )}
+            )
+            </span>
+          </Tab>
+
+          <Tab
+            active={selectedOrderStatus === 'cancelled'}
+            onClick={() => changeSelectedOrderStatus('cancelled')}
+          >
+            {t('CANCELLED', 'cancelled')}
+            <span>(
+              {numberOfOrdersByStatus?.result ? (
+                numberOfOrdersByStatus?.result?.cancelled ?? 0
+              ) : (
+                <CgSpinnerTwoAlt />
+              )}
+              )
+            </span>
+          </Tab>
+        </DragScroll>
+      </OrderStatusFilterContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components'
+
+export const OrderStatusFilterContainer = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  padding: 10px 0;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+
+  ${({ active }) => active && css`
+    border-bottom: 3px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+
+  @keyframes spinner-content {
+    0% { transform: rotate(0) }
+    100% { transform: rotate(360deg) }
+  }
+
+  svg {
+    animation: spinner-content 1.85s linear infinite;
+    color: ${props => props.theme.colors.headingColor};
+  }
+`

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

@@ -0,0 +1,128 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Button } from '../../../styles'
+import MdClose from '@meronex/icons/ios/MdClose'
+import { DragScroll } from '../../Shared'
+import {
+  SubFilterContainer
+} from './styles'
+
+export const OrderStatusSubFilter = (props) => {
+  const {
+    selectedSubOrderStatus,
+    ordersStatusGroup,
+    handleSelectedSubOrderStatus
+  } = props
+
+  const [, t] = useLanguage()
+
+  const statues = {
+    pending: [
+      { key: 0, value: t('PENDING', 'Pending') },
+      { key: 13, value: t('PREORDER', 'Preorder') }
+    ],
+    inProgress: [
+      { key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
+      { key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
+      { key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
+      { key: 3, value: t('ORDER_STATUS_IN_BUSINESS', 'Driver arrived to business') },
+      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
+      { key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
+      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', 'Driver almost arrived to business') },
+      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', 'Driver almost arrived to customer') },
+      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+    ],
+    completed: [
+      { key: 1, value: t('COMPLETED_BY_ADMIN', 'Completed by admin') },
+      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
+      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer') }
+    ],
+    cancelled: [
+      { key: 2, value: t('REJECTED_BY_ADMIN', 'Rejected by admin') },
+      { key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
+      { key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by driver') },
+      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
+      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
+      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
+      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Not picked by customer') }
+    ]
+  }
+
+  const handleChange = (status) => {
+    let pendingStatuses = [...selectedSubOrderStatus?.pending]
+    let inProgressStatuses = [...selectedSubOrderStatus?.inProgress]
+    let completedStatuses = [...selectedSubOrderStatus?.completed]
+    let cancelledStatuses = [...selectedSubOrderStatus?.cancelled]
+    switch (ordersStatusGroup) {
+      case 'pending':
+        if (pendingStatuses.includes(status)) {
+          pendingStatuses = pendingStatuses.filter(_status => _status !== status)
+        } else {
+          pendingStatuses.push(status)
+        }
+        handleSelectedSubOrderStatus({
+          ...selectedSubOrderStatus,
+          pending: pendingStatuses
+        })
+        break
+      case 'inProgress':
+        if (inProgressStatuses.includes(status)) {
+          inProgressStatuses = inProgressStatuses.filter(_status => _status !== status)
+        } else {
+          inProgressStatuses.push(status)
+        }
+        handleSelectedSubOrderStatus({
+          ...selectedSubOrderStatus,
+          inProgress: inProgressStatuses
+        })
+        break
+      case 'completed':
+        if (completedStatuses.includes(status)) {
+          completedStatuses = completedStatuses.filter(_status => _status !== status)
+        } else {
+          completedStatuses.push(status)
+        }
+        handleSelectedSubOrderStatus({
+          ...selectedSubOrderStatus,
+          completed: completedStatuses
+        })
+        break
+      case 'cancelled':
+        if (cancelledStatuses.includes(status)) {
+          cancelledStatuses = cancelledStatuses.filter(_status => _status !== status)
+        } else {
+          cancelledStatuses.push(status)
+        }
+        handleSelectedSubOrderStatus({
+          ...selectedSubOrderStatus,
+          cancelled: cancelledStatuses
+        })
+        break
+    }
+  }
+  return (
+    <SubFilterContainer>
+      <DragScroll>
+        {statues[ordersStatusGroup].map(status => (
+          <Button
+            key={status.key}
+            color={(selectedSubOrderStatus?.pending.includes(status.key) ||
+              selectedSubOrderStatus?.inProgress.includes(status.key) ||
+              selectedSubOrderStatus?.completed.includes(status.key) ||
+              selectedSubOrderStatus?.cancelled.includes(status.key)) ? 'primary' : 'secundaryDark'}
+            onClick={() => handleChange(status.key)}
+          >
+            {status.value}
+            {(selectedSubOrderStatus?.pending.includes(status.key) ||
+              selectedSubOrderStatus?.inProgress.includes(status.key) ||
+              selectedSubOrderStatus?.completed.includes(status.key) ||
+              selectedSubOrderStatus?.cancelled.includes(status.key)) && <MdClose />}
+          </Button>
+        ))}
+      </DragScroll>
+    </SubFilterContainer>
+  )
+}

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

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components'
+
+export const SubFilterContainer = styled.div`
+  padding: 20px 0;
+
+  button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
+    font-size: 14px;
+    white-space: nowrap;
+
+    svg {
+      font-size: 20px;
+
+      ${props => props.theme?.rtl ? css`
+        margin-right: 5px;
+      ` : css`
+        margin-left: 5px;
+      `}
+    }
+  }
+`