ordering-ui-external 10.0.0 → 10.1.0

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { useLanguage, useSession } from 'ordering-components-external'
 import EnDotSingle from '@meronex/icons/en/EnDotSingle'
 import ReactToPrint from 'react-to-print'
@@ -9,21 +9,25 @@ import {
   ThreeDots,
   XLg as CloseIcon,
   Chat as ChatIcon,
-  Dot
+  Dot,
+  ArrowsAngleExpand,
+  ArrowsAngleContract
 } from 'react-bootstrap-icons'
 import { IconButton as ButtonLink } from '../../../styles'
 import {
   OrderDetailsHeaderContainer,
   UreadMessageAlert,
   ButtonGroup,
-  StripeLink
+  StripeLink,
+  PrinterSelectContainer,
+  PrinterSelect
 } from './styles'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
 
 export const OrderDetailsHeader = (props) => {
   const {
     order,
     handleShowOption,
-    handleOpenMessages,
     actionSidebar,
     setIsTourOpen,
     isTourOpen,
@@ -31,11 +35,18 @@ export const OrderDetailsHeader = (props) => {
     showOption,
     openMessage,
     printRef,
-    isServiceOrder
+    isServiceOrder,
+    extraOpen,
+    printTicketRef,
+    isExpand,
+    setIsExpand
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
+  const { width } = useWindowSize()
+  const [showPrinterOptions, setShowPrinterOptions] = useState(false)
+  const dropdownReference = useRef()
 
   const stripePaymethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
 
@@ -53,6 +64,32 @@ export const OrderDetailsHeader = (props) => {
     if (isTourOpen && currentTourStep === 1) setIsTourOpen(false)
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('orderDetails')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  const closeSelect = (e) => {
+    if (showPrinterOptions) {
+      const outsideDropdown = !dropdownReference.current?.contains(e.target)
+      if (outsideDropdown) {
+        setShowPrinterOptions(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!showPrinterOptions) {
+      return
+    }
+    document.addEventListener('click', closeSelect)
+    return () => document.removeEventListener('click', closeSelect)
+  }, [showPrinterOptions])
+
   return (
     <OrderDetailsHeaderContainer>
       <div>
@@ -62,7 +99,7 @@ export const OrderDetailsHeader = (props) => {
             <ButtonLink
               color='black'
               active={openMessage?.chat}
-              onClick={() => handleOpenMessages('chat')}
+              onClick={() => handleShowOption('chat')}
               isDisabled={isTourOpen && currentTourStep === 1}
             >
               <ChatIcon />
@@ -73,22 +110,49 @@ export const OrderDetailsHeader = (props) => {
               )}
             </ButtonLink>
           )}
-          <ReactToPrint
-            trigger={() => (
-              <ButtonLink
-                color='black'
-                isDisabled={isTourOpen && currentTourStep === 1}
-              >
-                <Printer />
-              </ButtonLink>
+          <PrinterSelectContainer>
+            <ButtonLink
+              color='black'
+              isDisabled={isTourOpen && currentTourStep === 1}
+              onClick={() => setShowPrinterOptions(!showPrinterOptions)}
+            >
+              <Printer />
+            </ButtonLink>
+            {showPrinterOptions && (
+              <PrinterSelect ref={dropdownReference}>
+                <ReactToPrint
+                  trigger={() => (
+                    <ButtonLink
+                      color='black'
+                      isDisabled={isTourOpen && currentTourStep === 1}
+                      onClick={() => setShowPrinterOptions(false)}
+                    >
+                      {t('NORMAL', 'Normal')}
+                    </ButtonLink>
+                  )}
+                  content={() => printRef.current}
+                  removeAfterPrint
+                />
+                <ReactToPrint
+                  trigger={() => (
+                    <ButtonLink
+                      color='black'
+                      isDisabled={isTourOpen && currentTourStep === 1}
+                      onClick={() => setShowPrinterOptions(false)}
+                    >
+                      {t('TICKET', 'Ticket')}
+                    </ButtonLink>
+                  )}
+                  content={() => printTicketRef.current}
+                  removeAfterPrint
+                />
+              </PrinterSelect>
             )}
-            content={() => printRef.current}
-            removeAfterPrint
-          />
+          </PrinterSelectContainer>
           <ButtonLink
             color='black'
             active={openMessage?.history}
-            onClick={() => handleOpenMessages('history')}
+            onClick={() => handleShowOption('history')}
             isDisabled={isTourOpen && currentTourStep === 1}
           >
             <Diagram3 />
@@ -101,6 +165,14 @@ export const OrderDetailsHeader = (props) => {
           >
             <ThreeDots />
           </ButtonLink>
+          {width > 576 && !extraOpen && (
+            <ButtonLink
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </ButtonLink>
+          )}
           <ButtonLink
             color='black'
             onClick={() => closeSideBar()}
@@ -109,19 +181,26 @@ export const OrderDetailsHeader = (props) => {
           </ButtonLink>
         </ButtonGroup>
       </div>
+      {order?.external_id && (
+        <div>
+          <h2>
+            {t('EXTERNAL_ID', 'External ID :')} {order?.external_id}
+          </h2>
+        </div>
+      )}
       <p>
         {order?.payment_events?.length > 0 ? (
-          order?.payment_events?.map((event, i) => (
+          order?.payment_events?.filter(item => item.event === 'payment').map((event, i) => (
             <React.Fragment key={i}>
               <span>
                 {event?.wallet_event
                   ? walletName[event?.wallet_event?.wallet?.type]?.name
-                  : event?.paymethod?.name}
+                  : t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)}
               </span>
-              {stripePaymethods.includes(event?.data?.gateway) && (
+              {stripePaymethods.includes(event?.data?.gateway || event?.paymethod?.gateway) && (
                 <>
                   <span> (</span>
-                  <StripeLink href={`https://dashboard.stripe.com/payments/${event?.data?.result?.pay_data}`} target='_blank'>{event?.data?.result?.pay_data}</StripeLink>
+                  <StripeLink href={`https://dashboard.stripe.com/payments/${event?.data?.result?.pay_data || event?.data?.extra?.pay_data}`} target='_blank'>{event?.data?.result?.pay_data || event?.data?.extra?.pay_data}</StripeLink>
                   <span>) </span>
                   <span> ({order?.refund_data ? t('REFUNDED', 'Refunded') : t('MOBILE_SUCCESS', 'Success')}) </span>
                 </>

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

@@ -11,6 +11,12 @@ export const OrderDetailsHeaderContainer = styled.div`
       margin: 0px;
       font-weight: 700;
     }
+    h2 {
+      width: 100%;
+      font-size: 18px;
+      margin: 0px;
+      font-weight: 700;
+    }
     > div {
       display: flex;
       width: 100%;
@@ -76,3 +82,24 @@ export const StripeLink = styled.a`
     color: ${props => props.theme.colors.primary};
   }
 `
+export const PrinterSelectContainer = styled.div`
+  position: relative;
+  margin-right: 8px;
+`
+
+export const PrinterSelect = styled.div`
+  position: absolute;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  border: 1px solid ${props => props.theme.colors.textGray};
+
+  button {
+    padding: 10px 20px;
+    color: ${props => props.theme.colors.textGray};
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+`

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

@@ -5,7 +5,7 @@ import {
   useEvent,
   OrderNotification as OrderNotificationController
 } from 'ordering-components-external'
-import { Modal } from '../../Shared'
+import { Alert, Modal } from '../../Shared'
 import 'react-toastify/dist/ReactToastify.css'
 import { toast } from 'react-toastify'
 import { useTheme } from 'styled-components'
@@ -18,7 +18,10 @@ import {
 toast.configure()
 
 const OrderNotificationUI = (props) => {
-  const { isOnlyDelivery } = props
+  const {
+    isOnlyDelivery,
+    customerId
+  } = props
 
   const [configState] = useConfig()
   const [, t] = useLanguage()
@@ -27,8 +30,11 @@ const OrderNotificationUI = (props) => {
 
   const [notificationModalOpen, setNotificationModalOpen] = useState(false)
   const [registerOrderIds, setRegisterOrderIds] = useState([])
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleNotification = (order) => {
+    if (order?.products?.[0]?.type === 'gift_card') return
+    if (customerId && order?.customer_id !== customerId) return
     if (isOnlyDelivery && order?.delivery_type !== 1) return
     const _registerOrderIds = [...registerOrderIds]
     if (!_registerOrderIds.includes(order.id)) {
@@ -101,7 +107,14 @@ const OrderNotificationUI = (props) => {
     return () => {
       events.off('order_added', handleNotification)
     }
-  }, [configState, registerOrderIds])
+  }, [configState, registerOrderIds, customerId])
+
+  useEffect(() => {
+    setAlertState({
+      open: true,
+      content: t('SOUND_WILL_BE_PLAYED', 'The sound will be played on this page whenever a new order is received.')
+    })
+  }, [])
 
   return (
     <>
@@ -120,10 +133,20 @@ const OrderNotificationUI = (props) => {
           )}
         </ModalContainer>
       </Modal>
-      {/* <audio id='notification-sound' muted>
+      <audio id='notification-sound' muted>
         <source src={theme.sounds.notificationOgg} type='audio/ogg' />
         <source src={theme.sounds.notificationMp3} type='audio/mpeg' />
-      </audio> */}
+      </audio>
+      <Alert
+        width='700px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const SubFilterContainer = styled.div`
-  padding: 20px 0;
+  padding: 15px 0;
 
   button {
     ${props => props.theme?.rtl ? css`

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

@@ -4,6 +4,7 @@ import EnDotSingle from '@meronex/icons/en/EnDotSingle'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import BisBusiness from '@meronex/icons/bi/BisBusiness'
 import { OrderBill } from '../OrderBill'
+import { getCurrenySymbol } from '../../../../../../utils'
 
 import {
   OrderStatus,
@@ -81,7 +82,7 @@ export const OrderToPrint = forwardRef((props, ref) => {
   const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
     if (name !== 'No') {
       const pos = position ? `(${position})` : ''
-      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currencyPosition: 'left' })}` : `${name} ${pos}`
+      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currency: getCurrenySymbol(order?.currency) })}` : `${name} ${pos}`
     } else {
       return 'No'
     }
@@ -97,14 +98,14 @@ export const OrderToPrint = forwardRef((props, ref) => {
               <span>
                 {event?.wallet_event
                   ? walletName[event?.wallet_event?.wallet?.type]?.name
-                  : event?.paymethod?.name}
+                  : t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)}
               </span>
               <EnDotSingle />
             </React.Fragment>
           ))
         ) : (
           <>
-            <span>{order?.paymethod?.name}</span>
+            <span>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</span>
             <EnDotSingle />
           </>
         )}

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

@@ -0,0 +1,251 @@
+import React, { forwardRef } from 'react'
+import { verifyDecimals } from '../../../../../../utils'
+import { useUtils, useLanguage, useConfig } from 'ordering-components-external'
+import { PrintContainer, PrintTextContainer, ProductComments, ProdcutCommentsContainer, Products, InfoContainer, InsideInfo2, InsideInfo, PrintProductsContainer, PrintProducts } from './styles'
+
+export const OrderToPrintTicket = forwardRef((props, ref) => {
+  const {
+    order,
+    getOrderStatus
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parseDate, parsePrice, parseNumber }] = useUtils()
+
+  const deliveryStatus = {
+    1: t('DELIVERY', 'Delivery'),
+    2: t('PICK_UP', 'Pick up'),
+    3: t('EAT_IN', 'Eat In'),
+    4: t('CURBSIDE', 'Curbside'),
+    5: t('DRIVER_THRU', 'Driver thru')
+  }
+
+  const getProductPrice = (product) => {
+    let subOptionPrice = 0
+    if (Array.isArray(product.options)) {
+      if (product.options?.length > 0) {
+        for (const option of product.options) {
+          for (const suboption of option.suboptions) {
+            subOptionPrice += suboption.quantity * suboption.price
+          }
+        }
+      }
+    }
+
+    const price = product.quantity * (product.price + subOptionPrice)
+    return parseFloat(price.toFixed(2))
+  }
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
+    if (name !== 'No') {
+      const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : ''
+      return pos
+        ? `${quantity} x ${name} ${pos} + ${parsePrice(price)}`
+        : `${quantity} x ${name} + ${parsePrice(price)}`
+    } else {
+      return 'No'
+    }
+  }
+
+  const getSuboptions = (suboptions) => {
+    const array = []
+    suboptions?.length > 0 &&
+      suboptions?.map((suboption) => {
+        const string = `${getFormattedSubOptionName(suboption)}`
+        array.push(string)
+      })
+
+    return array.join('')
+  }
+
+  const getOptions = (options, productComment = '') => {
+    const array = []
+
+    options?.length &&
+    options?.map((option) => {
+      const string =
+        `${option.name} ${getSuboptions(option.suboptions)}`
+      array.push(string)
+    })
+
+    if (productComment) {
+      array.push(`${t('COMMENT', 'Comment')}${productComment}`)
+    }
+
+    return array
+  }
+
+  const percentTip =
+  parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+  !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+  verifyDecimals(order?.summary?.driver_tip, parseNumber)
+
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+  return (
+    <PrintContainer ref={ref}>
+      <h1>{t('ORDER_NO', 'Order No.')} {order.id}</h1>
+      <PrintTextContainer>
+        {getOrderStatus(order?.status)?.value}
+        <br />
+        {t('DELIVERY_TYPE', 'Delivery Type')}: {deliveryStatus[order?.delivery_type]}
+        <br />
+        {t('DELIVERY_DATE', 'Delivery Date')}: {order?.delivery_datetime_utc
+          ? parseDate(order?.delivery_datetime_utc)
+          : parseDate(order?.delivery_datetime, { utc: false })}
+        <br />
+        {t('PAYMENT_METHOD')}: {order?.paymethod?.name}
+      </PrintTextContainer>
+
+      <h1>{t('CUSTOMER_DETAILS', 'Customer details')}</h1>
+      <PrintTextContainer>
+        {t('FULL_NAME', 'Full Name')}: {customerName}
+        <br />
+        {t('EMAIL', 'Email')}: {order?.customer?.email}
+        <br />
+        {t('MOBILE_PHONE', 'Mobile Phone')}: {order?.customer?.cellphone}
+        <br />
+        {!!order?.customer?.phone && (
+          `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone}`)}
+        {t('FULL_ADDRESS', 'Full Addres')}: {order?.customer?.address}
+        {!!order?.customer?.internal_number && (
+          `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}`)}
+        <br />
+        {!!order?.customer?.zipcode && (
+        `${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}`
+        )}
+      </PrintTextContainer>
+
+      <h1>{t('BUSINESS_DETAILS', 'Business details')}</h1>
+      <PrintTextContainer>
+        {order?.business?.name}
+        <br />
+        {order?.business?.email}
+        <br />
+        {!!order?.business?.cellphone && (
+          <>
+            {`${t('BUSINESS_PHONE', 'Business cellphone')}: ${order?.business?.cellphone}`}
+            <br />
+          </>
+        )}
+        {!!order?.business?.phone && (
+          <>
+            {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone}`}
+            <br />
+          </>
+        )}
+        {t('ADDRESS', 'Address')}: {order?.business?.address}
+        <br />
+        {!!order?.business?.address_notes && (
+          <>
+            {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes}`}
+            <br />
+          </>
+        )}
+      </PrintTextContainer>
+      <h1>{t('ORDER_DETAILS', 'Order Details')}</h1>
+      <br />
+      <PrintProductsContainer>
+        {order?.products?.length &&
+          order?.products?.map((product, i) =>
+            <PrintProducts key={i}>
+              <Products>
+                <InsideInfo>
+                  {`${product?.quantity}x ${product?.name}`}
+                </InsideInfo>
+                <InsideInfo2>
+                  {parsePrice(product?.total ?? getProductPrice(product))}
+                </InsideInfo2>
+              </Products>
+              <ProdcutCommentsContainer>
+                {getOptions(product?.options, product?.comment)?.map((option, i) => (
+                  <ProductComments key={i}>
+                    {option}
+                  </ProductComments>
+                ))}
+              </ProdcutCommentsContainer>
+            </PrintProducts>
+          )}
+      </PrintProductsContainer>
+      <br />
+      <InfoContainer>
+        <InsideInfo>
+          {t('SUBTOTAL', 'Subtotal')}
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(
+          order?.tax_type === 1
+            ? order?.summary?.subtotal + order?.summary?.tax ?? 0
+            : order?.summary?.subtotal ?? 0
+          )}
+        </InsideInfo2>
+      </InfoContainer>
+      <InfoContainer>
+        {order?.summary?.discount > 0
+          ? order?.offer_type === 1
+            ? <InsideInfo>{t('DISCOUNT', 'Discount')} ({verifyDecimals(order?.offer_rate, parsePrice)}%)</InsideInfo>
+            : <InsideInfo> {t('DISCOUNT', 'Discount')}</InsideInfo>
+          : ''}
+        {order?.summary?.discount > 0
+          ? <InsideInfo2>- {parsePrice(order?.summary?.discount)}</InsideInfo2>
+          : ''}
+      </InfoContainer>
+
+      {order?.tax_type !== 1 && (
+        <>
+          <InfoContainer>
+            <InsideInfo>
+              {t('TAX', 'Tax')}
+              {' '}
+              {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
+            </InsideInfo>
+            <InsideInfo2>
+              {parsePrice(order?.summary?.tax ?? 0)}
+            </InsideInfo2>
+          </InfoContainer>
+        </>
+      )}
+
+      {order?.summary?.delivery_price > 0 && (
+        <InfoContainer>
+          <InsideInfo>
+            {t('DELIVERY_FEE', 'Delivery Fee')}
+          </InsideInfo>
+          <InsideInfo2>
+            {parsePrice(order?.summary?.delivery_price)}
+          </InsideInfo2>
+        </InfoContainer>
+      )}
+
+      <InfoContainer>
+        <InsideInfo>
+          {t('DRIVER_TIP', 'Driver tip')}
+          {percentTip ? `(${percentTip}%)` : ''}
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(order?.summary?.driver_tip ?? 0)}
+        </InsideInfo2>
+      </InfoContainer>
+
+      <InfoContainer>
+        <InsideInfo>
+          {t('SERVICE_FEE', 'Service Fee')}
+          ({verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(order?.summary?.service_fee ?? 0)}
+        </InsideInfo2>
+      </InfoContainer>
+
+      <InfoContainer>
+        <InsideInfo>
+          {t('TOTAL', 'Total')}
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(order?.summary?.total ?? 0)}
+        </InsideInfo2>
+      </InfoContainer>
+    </PrintContainer>
+  )
+})

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

@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+
+export const PrintContainer = styled.div`
+  display: none;
+  font-family: arial !important;
+  color: #000 !important;
+  padding: 80px 50px;
+  max-width: 420px;
+
+  > h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  @media print {
+    display: block;
+
+    @page { size: portrait; }
+  }
+`
+
+export const PrintTextContainer = styled.p`
+  font-size: 16px
+`
+export const PrintProductsContainer = styled.div`
+  display: flex;
+  flex-direction:column;
+`
+
+export const PrintProducts = styled.div`
+  display: flex;
+  flexDirection:row;
+  flex-wrap:wrap;
+`
+
+export const Products = styled.div`
+  display:flex;
+  width:100%;
+`
+
+export const ProdcutCommentsContainer = styled.div`
+  font-size: 16px;
+  width:100%;
+`
+
+export const ProductComments = styled.div`
+  margin-left: 10px;
+`
+
+export const InfoContainer = styled.div`
+  display: flex;
+`
+
+export const InsideInfo = styled.div`
+  display:flex;
+  justify-content: flex-start;
+  font-size: 16px;
+  width: 70%
+  font-weight: bold
+`
+
+export const InsideInfo2 = styled.div`
+  display:flex;
+  justify-content: flex-end;
+  font-size: 16px;
+  width: 30%
+`