ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,250 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { lighten } from 'polished'
+
+export const Container = styled.div`
+  display: flex;
+  width: 0;
+  position: fixed;
+  box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
+
+  ${({ isSelectedOrders }) => isSelectedOrders && css`
+    box-shadow: none;
+
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  `}
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  height: calc(var(--vh, 1vh) * 100);
+  top: 0px;
+  z-index: 1001;
+  overflow-x: hidden;
+  ${({ noAnimation }) => !noAnimation && css`
+    transition: 0.3s;
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+    ` : css`
+    right: 0px;
+  `}
+  @media print {
+    box-shadow: none;
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  flex-direction: column;
+  > span {
+    width: 100%;
+  }
+`
+
+export const OrderDetailsContent = styled.div`
+  padding: 30px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+
+  ${({ noScroll }) => noScroll && css`
+    overflow: hidden;
+  `}
+`
+
+export const OrderDetailsExtraContent = styled.div`
+  max-width: 500px;
+  position: relative;
+  padding: 30px 20px;
+  box-sizing: border-box;
+  width: 100%;
+
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid #E9ECEF;
+  ` : css`
+    border-left: 1px solid #E9ECEF;
+  `}
+`
+
+export const ChatContainer = styled.div`
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  margin-top: 40px;
+  height: calc(100% - 40px);
+  overflow: hidden;
+`
+
+export const ButtonLink = styled.div`
+  cursor: pointer;
+  padding: 5px;
+  margin: 0 5px;
+
+  &:hover {
+    background-color: ${props => props.theme.colors?.secundary};
+    border-radius: 5px;
+  }
+
+  svg {
+    color: ${props => props.theme.colors?.secundaryContrast};
+    font-size: 24px;
+  }
+`
+
+export const OrderStatus = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 20px 0;
+
+  h2 {
+    color: ${props => props.theme.colors?.headingColor};
+    margin: 0px;
+    font-size: 16px;
+  }
+
+  p {
+    color: ${props => props.theme.colors?.headingColor};
+    font-size: 14px;
+    margin: 0px;
+  }
+
+
+  ${({ isDisabled }) => isDisabled && css`
+    pointer-events: none;
+  `}
+`
+export const OrderStatusSelectorWrapper = styled.div`
+  min-width: 50%;
+  > 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: 5px;
+        padding-bottom: 5px;
+        > div:first-child {
+          > div {
+            border: none !important;
+            p {
+              color: ${props => props.theme.colors.headingColor} !important;
+              padding: 0 !important;
+            }
+          }
+        }
+      }
+    }
+
+    .list-wrapper {
+      > div {
+        padding: 0 10px;
+      }
+    }
+  }
+`
+
+export const StatusBarContainer = styled.div`
+`
+
+const StatusBarStyled = styled.div`
+  height: 10px;
+  border-radius: 10px;
+  background: ${props => `linear-gradient(to right, ${props.theme.colors.primary} ${props.percentage}%, ${props.theme.colors.borderColor} ${props.percentage}%)`};
+`
+
+export const StatusBar = (props) => {
+  return (
+    <StatusBarStyled
+      {...props}
+    >
+      {props.children}
+    </StatusBarStyled>
+  )
+}
+
+export const AdvancedLogistic = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
+
+  > div {
+    p {
+      color: ${props => props.theme.colors?.headingColor};
+      margin: 0px;
+
+      &:first-child {
+        font-weight: 500;
+        font-size: 14px;
+      }
+      &:not(:first-child) {
+        font-size: 12px;
+        color: ${props => props.theme.colors.lightGray};
+      }
+    }
+  }
+`
+export const OrderProducts = styled.div`
+  padding: 10px 0 10px 0;
+  border-bottom: 1px solid #E9ECEF;
+  h2 {
+    color: ${props => props.theme.colors?.headingColor};
+    font-size: 18px;
+  }
+`
+
+export const CloseButtonWrapper = styled.div`
+  width: fit-content;
+  cursor: pointer;
+  z-index: 100;
+  position: absolute;
+  top: 30px;
+  ${props => props.theme?.rtl ? css`
+    left: 20px;
+  ` : css`
+    right: 20px;
+  `}
+`
+
+export const PlaceSpotContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+
+  p {
+    color: ${props => props.theme.colors?.headingColor};
+    font-size: 14px;
+    margin: 0px;
+  }
+`
+export const RejectReasonsContainer = styled.div`
+  > p {
+    font-size: 14px;
+    line-height: 21px;
+    font-weight: 500;
+    margin: 0;
+  }
+`
+export const RejectReasonsList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + 10px);
+  margin-left: -5px;
+  margin-top: 10px;
+`
+export const RejectReasonWrapper = styled.div`
+  padding: 4px 10px;
+  border-radius: 50px;
+  font-size: 12px;
+  line-height: 18px;
+  margin: 5px;
+  width: fit-content;
+  background-color: ${props => lighten(0.4, props.theme.colors.danger)};
+  color: ${props => props.theme.colors.danger};
+`

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

@@ -0,0 +1,178 @@
+import React from 'react'
+import { useLanguage, useSession } from 'ordering-components-external'
+import EnDotSingle from '@meronex/icons/en/EnDotSingle'
+import ReactToPrint from 'react-to-print'
+import {
+  // Wallet2,
+  Printer,
+  Diagram3,
+  ThreeDots,
+  XLg as CloseIcon,
+  Chat as ChatIcon,
+  Dot
+} from 'react-bootstrap-icons'
+import { IconButton as ButtonLink } from '../../../styles'
+import {
+  OrderDetailsHeaderContainer,
+  UreadMessageAlert,
+  ButtonGroup,
+  StripeLink
+} from './styles'
+
+export const OrderDetailsHeader = (props) => {
+  const {
+    order,
+    handleShowOption,
+    handleOpenMessages,
+    actionSidebar,
+    setIsTourOpen,
+    isTourOpen,
+    currentTourStep,
+    showOption,
+    openMessage,
+    printRef,
+    isServiceOrder
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+
+  const stripePaymethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+
+  const walletName = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+
+  const closeSideBar = () => {
+    actionSidebar(false)
+    if (isTourOpen && currentTourStep === 1) setIsTourOpen(false)
+  }
+
+  return (
+    <OrderDetailsHeaderContainer>
+      <div>
+        <h1>{isServiceOrder ? t('APPOINTMENT_NO', 'Appointment No.') : t('INVOICE_ORDER_NO', 'Order No')} {order?.id}</h1>
+        <ButtonGroup>
+          {user?.level !== 5 && (
+            <ButtonLink
+              color='black'
+              active={openMessage?.chat}
+              onClick={() => handleOpenMessages('chat')}
+              isDisabled={isTourOpen && currentTourStep === 1}
+            >
+              <ChatIcon />
+              {order?.unread_count > 0 && (
+                <UreadMessageAlert>
+                  <Dot />
+                </UreadMessageAlert>
+              )}
+            </ButtonLink>
+          )}
+          <ReactToPrint
+            trigger={() => (
+              <ButtonLink
+                color='black'
+                isDisabled={isTourOpen && currentTourStep === 1}
+              >
+                <Printer />
+              </ButtonLink>
+            )}
+            content={() => printRef.current}
+            removeAfterPrint
+          />
+          <ButtonLink
+            color='black'
+            active={openMessage?.history}
+            onClick={() => handleOpenMessages('history')}
+            isDisabled={isTourOpen && currentTourStep === 1}
+          >
+            <Diagram3 />
+          </ButtonLink>
+          <ButtonLink
+            color='black'
+            active={showOption === 'metafields'}
+            onClick={() => handleShowOption('metafields')}
+            isDisabled={isTourOpen && currentTourStep === 1}
+          >
+            <ThreeDots />
+          </ButtonLink>
+          <ButtonLink
+            color='black'
+            onClick={() => closeSideBar()}
+          >
+            <CloseIcon />
+          </ButtonLink>
+        </ButtonGroup>
+      </div>
+      <p>
+        {order?.payment_events?.length > 0 ? (
+          order?.payment_events?.map((event, i) => (
+            <React.Fragment key={i}>
+              <span>
+                {event?.wallet_event
+                  ? walletName[event?.wallet_event?.wallet?.type]?.name
+                  : event?.paymethod?.name}
+              </span>
+              {stripePaymethods.includes(event?.data?.gateway) && (
+                <>
+                  <span> (</span>
+                  <StripeLink href={`https://dashboard.stripe.com/payments/${event?.data?.result?.pay_data}`} target='_blank'>{event?.data?.result?.pay_data}</StripeLink>
+                  <span>) </span>
+                  <span> ({order?.refund_data ? t('REFUNDED', 'Refunded') : t('MOBILE_SUCCESS', 'Success')}) </span>
+                </>
+              )}
+              <EnDotSingle />
+            </React.Fragment>
+          ))
+        ) : (
+          <>
+            <span>{order?.paymethod?.name}</span>
+            {stripePaymethods.includes(order?.paymethod?.gateway) && (
+              <>
+                <span> (</span>
+                <StripeLink href={`https://dashboard.stripe.com/payments/${order?.pay_data}`} target='_blank'>{order?.pay_data}</StripeLink>
+                <span>) </span>
+                <span> ({order?.refund_data ? t('REFUNDED', 'Refunded') : t('MOBILE_SUCCESS', 'Success')}) </span>
+              </>
+            )}
+            <EnDotSingle />
+          </>
+        )}
+        {!isServiceOrder && (
+          <>
+            {order?.delivery_type === 1 && (
+              <span>
+                {t('DELIVERY', 'Delivery')}
+              </span>
+            )}
+            {order?.delivery_type === 2 && (
+              <span>
+                {t('PICKUP', 'Pickup')}
+              </span>
+            )}
+            {order?.delivery_type === 3 && (
+              <span>
+                {t('EAT_IN', 'Eat in')}
+              </span>
+            )}
+            {order?.delivery_type === 4 && (
+              <span>
+                {t('CURBSIDE', 'Curbside')}
+              </span>
+            )}
+            {order?.delivery_type === 5 && (
+              <span>
+                {t('DRIVE_THRU', 'Drive thru')}
+              </span>
+            )}
+          </>
+        )}
+      </p>
+    </OrderDetailsHeaderContainer>
+  )
+}

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

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components'
+
+export const OrderDetailsHeaderContainer = styled.div`
+  > div {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column-reverse;
+    h1 {
+      width: 100%;
+      font-size: 20px;
+      margin: 0px;
+      font-weight: 700;
+    }
+    > div {
+      display: flex;
+      width: 100%;
+      justify-content: flex-end;
+      margin-bottom: 20px;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0px;
+    padding: 5px 0;
+  }
+
+  @media (min-width: 768px) {
+    > div {
+      flex-direction: row;
+      align-items: center;
+    }
+    > div {
+      > div {
+        margin-bottom: 0px;
+      }
+    }
+  }
+`
+
+export const ButtonGroup = styled.div`
+  > button {
+    position: relative;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+    &:last-child {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 0px;
+      ` : css`
+        margin-right: 0px;
+      `}
+    }
+  }
+`
+
+export const UreadMessageAlert = styled.span`
+  position: absolute;
+  top: -9px;
+
+  ${props => props.theme?.rtl ? css`
+    left: -13px;
+  ` : css`
+    right: -13px;
+  `}
+  svg {
+    font-size: 40px;
+    color: ${props => props.theme.colors.primary};
+  }
+`
+export const StripeLink = styled.a`
+  color: ${props => props.theme.colors.primary};
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`

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

@@ -0,0 +1,163 @@
+import React from 'react'
+import { useLanguage, useUtils, LogisticInformation as LogisticInformationController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Button } from '../../../styles'
+import {
+  WraaperLogs,
+  SkeletonHitory,
+  BubbleConsole,
+  UppercaseText
+} from './styles'
+
+const LogisticInformationUI = (props) => {
+  const { logisticInformation, getLogistics } = props
+  const [, t] = useLanguage()
+
+  const [{ parseDate, parseDistance }] = useUtils()
+
+  const getOrderStatus = (status) => {
+    const orderStatus = [
+      { key: 0, value: t('PENDING', 'Pending') },
+      { key: 1, value: t('COMPLETED_BY_ADMIN', 'Completed by admin') },
+      { key: 2, value: t('REJECTED_BY_ADMIN', 'Rejected by admin') },
+      { key: 3, value: t('ORDER_STATUS_IN_BUSINESS', 'Driver arrived to business') },
+      { key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
+      { key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
+      { key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by driver') },
+      { key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
+      { key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
+      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
+      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
+      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
+      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
+      { key: 13, value: t('PREORDER', 'Preorder') },
+      { key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
+      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer') },
+      { 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') },
+      { 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') }
+    ]
+
+    const objectStatus = orderStatus.find((o) => o.key === status)
+    return objectStatus && objectStatus
+  }
+
+  return (
+    <>
+      {logisticInformation.loading ? (
+        <>
+          {[...Array(3)].map((item, i) => (
+            <SkeletonHitory key={i}>
+              <Skeleton width={400} height={40} />
+              <Skeleton width={300} height={40} />
+              <Skeleton width={380} height={40} />
+              <Skeleton width={200} height={40} />
+              <Skeleton width={450} height={40} />
+            </SkeletonHitory>
+          ))}
+        </>
+      ) : (
+        <>
+          {logisticInformation.error === null ? (
+            <WraaperLogs>
+              <Button
+                rectangle
+                color='primary'
+                onClick={() => getLogistics()}
+              >
+                {t('RELOAD', 'Reload')}
+              </Button>
+              <BubbleConsole>
+                <UppercaseText><strong>{t('DISTANCE_CUSTOMER_FROM_BUSINESS', 'DISTANCE FROM CUSTOMER TO BUSINESS')}</strong></UppercaseText>
+                : {parseDistance((logisticInformation?.data?.distance_customer_from_business / 1000))}
+              </BubbleConsole>
+              <>
+                <BubbleConsole>
+                  <UppercaseText title='title'>{t('QUEUES', 'Queues')}</UppercaseText>
+                </BubbleConsole>
+                {logisticInformation.data.queues.length > 0 ? (
+                  <>
+                    {logisticInformation.data.queues.map((queue, i) => (
+                      <React.Fragment key={queue.id}>
+                        {queue?.name && (
+                          <BubbleConsole>
+                            <span>{i + 1}. {queue.name}</span>
+                          </BubbleConsole>
+                        )}
+                        <BubbleConsole>
+                          <strong>{t('AVAILABLE_DRIVERS', 'Available drivers')}: </strong>
+                          <span>{queue.drivers.length}</span>
+                        </BubbleConsole>
+                        <BubbleConsole>
+                          <strong>{t('PRIORITY', 'Priority')}: </strong>
+                          <span>{queue.priority}</span>
+                        </BubbleConsole>
+                        <BubbleConsole>
+                          <strong>{t('START_IN', 'Start in')}: </strong>
+                          <span>{getOrderStatus(queue.orders_group_start_in_status)?.value}</span>
+                        </BubbleConsole>
+                        {queue.orders.length > 0 ? (
+                          <BubbleConsole>
+                            {queue.orders.map((order, i) => (
+                              <div key={order.id}>
+                                {i + 1}. {order.id} {order?.waiting_for_preorder && <span>({t('WAITING_FOR_PREORDER', 'waiting for preorder')})</span>}
+                              </div>
+                            ))}
+                          </BubbleConsole>
+                        ) : (
+                          <BubbleConsole>
+                            {t('WITHOUT_ORDERS', 'without orders')}
+                          </BubbleConsole>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </>
+                ) : (
+                  <BubbleConsole>
+                    <UppercaseText>{t('WITHOUT_QUEUES', 'Without Queues')}</UppercaseText>
+                  </BubbleConsole>
+                )}
+              </>
+              <>
+                <BubbleConsole>
+                  <UppercaseText title='title'>{t('HISTORY_ATTEMPTS', 'Attempts history')}</UppercaseText>
+                </BubbleConsole>
+                {logisticInformation.data.logistic_attempts.length > 0 ? (
+                  <>
+                    {logisticInformation.data.logistic_attempts.map(attempt => (
+                      <BubbleConsole key={attempt.id}>
+                        <strong>{t('DRIVER_GROUP', 'Driver group')}</strong>: <strong>{attempt?.driver_group_id}</strong> {t('AT', 'at')} {parseDate(attempt?.created_at, { utc: false })}
+                      </BubbleConsole>
+                    ))}
+                  </>
+                ) : (
+                  <BubbleConsole>
+                    <UppercaseText>{t('WITHOUT_HISTORY_ATTEMPTS', 'without history attempts')}</UppercaseText>
+                  </BubbleConsole>
+                )}
+              </>
+            </WraaperLogs>
+          ) : (
+            <>
+              {logisticInformation.error}
+            </>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export const OrderLogisticInformation = (props) => {
+  const logisticsProps = {
+    ...props,
+    orderId: props.orderId,
+    UIComponent: LogisticInformationUI
+  }
+  return <LogisticInformationController {...logisticsProps} />
+}