ordering-ui-react-native 0.22.0 → 0.22.1-release

package/themes/business/src/components/OrderDetails/usePrinterCommands.tsx

@@ -0,0 +1,221 @@
+import { Platform } from 'react-native'
+import { useConfig, useUtils, useLanguage} from 'ordering-components/native'
+
+import { verifyDecimals, getProductPrice } from '../../utils';
+
+/**
+ * Hook to create commands for star micronics printer using PassPRNT library
+ * @returns array of strings
+ */
+
+export const usePrinterCommands = () => {
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig();
+  const [{ parsePrice, parseNumber, parseDate }] = useUtils();
+
+  const deliveryStatus: any = {
+    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 walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+
+  const percentTip = (order: any) =>
+    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+    verifyDecimals(order?.summary?.driver_tip, parseNumber);
+
+  const handlePaymethodsListString = (order: any) => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : paymethod?.paymethod?.gateway && paymethod?.paymethod?.gateway === 'cash' && order?.cash > 0
+          ? `${t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)} (${t('CASH_CHANGE_OF', 'Change of :amount:').replace(':amount:', parsePrice(order?.cash))})`
+          : paymethod?.paymethod?.gateway
+            ? t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+            : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
+  const paymethodsLength = (order: any) => order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
+
+  const customerName = (order: any) => `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+  const deliveryDate = (order: any) => {
+    const dateString = order?.delivery_datetime_utc ?? order?.delivery_datetime
+    const currentDate = new Date();
+    const receivedDate: any = new Date(order?.delivery_datetime);
+
+    const formattedDate = receivedDate <= currentDate
+      ? `${t('ASAP_ABBREVIATION', 'ASAP')}(${parseDate(dateString, { utc: !!order?.delivery_datetime_utc })})`
+      : parseDate(dateString, { utc: !!order?.delivery_datetime_utc })
+    return formattedDate
+  }
+
+  const generateProductsText = (order: any, { endLine }: any) => {
+    const list: any = []
+
+    if (order?.products.length) {
+      order?.products.map((product: any) => {
+        list.push(`${product?.quantity}  ${product?.name} \t ${parsePrice(product.total ?? getProductPrice(product))}${endLine}`)
+
+        if (product?.ingredients?.length) {
+          list.push({ text: `\t ${t('INGREDIENTS', 'Ingredients')}:${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 10 : 18 } })
+          product?.ingredients?.map((ingredient: any) => {
+            list.push({ text: `\t ${t('NO', 'No')} ${ingredient.name}${endLine}` , fontSize: Platform.OS === 'ios' ? 10 : 18 })
+          })
+        }
+
+        product.options?.map((option: any) => {
+          list.push({ text: `\t ${option.name}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 10 : 18 } })
+
+          option.suboptions?.map((suboption: any) => {
+            const { quantity, name, position, price } = suboption
+            const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : ''
+            const string = name !== 'No'
+              ? pos
+                ? `${quantity} x ${name} ${pos} +${parsePrice(price)}`
+                : `${quantity} x ${name} +${parsePrice(price)}`
+              : 'No'
+
+            list.push({ text: `\t\t ${string}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 10 : 18 } })
+          })
+        })
+
+        if (product.comment) {
+          list.push({ text: `\t ${t('COMMENT', 'Comment')}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 10 : 18 } })
+          list.push({ text: `\t\t ${product.comment}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 10 : 18 } })
+        }
+
+        list.push('_separator_')
+      })
+    }
+
+    return list
+  }
+
+  const paymethodsList = (order: any, { endLine }: any) => {
+    const list: any = []
+
+    if (order?.payment_events?.length > 0) {
+      order?.payment_events.map((event: any) => {
+        const payment = event?.wallet_event
+          ? walletName[event?.wallet_event?.wallet?.type]?.name
+          : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
+
+        const amount = (event?.paymethod?.gateway === 'cash' && order?.cash)
+          ? parsePrice(order?.cash, { currency: order?.currency })
+          : `-${parsePrice(event?.amount, { currency: order?.currency })}`
+
+        list.push(`${payment} \t ${amount}${endLine}`)
+      })
+    }
+
+    return list
+  }
+
+  const replaceChars = (string: string) => {
+    const accents: any = {
+      'á': 'a',
+      'é': 'e',
+      'í': 'i',
+      'ó': 'o',
+      'ú': 'u',
+      'Á': 'A',
+      'É': 'E',
+      'Í': 'I',
+      'Ó': 'O',
+      'Ú': 'U',
+      'ü': 'u',
+      'Ü': 'U',
+      'ñ': 'n',
+      'Ñ': 'N',
+      "'": '',
+      "’": '',
+      "`": '',
+    };
+    return string.replace(/[áéíóúÁÉÍÓÚüÜñÑ'’`]/g, (match: any) => accents[match])
+  }
+
+  const generateCommands = (order: any, printMode: string = 'append') => {
+    let commands: any = [];
+
+    const isAppendMode = printMode === 'append'
+    const jumpLine = isAppendMode ? '\n' : ' '
+    const endLine = isAppendMode ? '\n' : ''
+
+    const textProps = { fontSize: Platform.OS === 'ios' ? 12 : 22 }
+
+    const appends: any = [
+      { text: `${t('ORDER_NO', 'Order No.')} ${order.id}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 16 : 24 } },
+      jumpLine,
+      `${order.orderStatus}${endLine}`,
+      { text: `${t('ORDER_TYPE', 'Order Type')}: ${deliveryStatus[order?.delivery_type]}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 22 } },
+      { text: `${t(`PAYMENT_METHOD${paymethodsLength(order) > 1 ? 'S' : ''}`, `Payment method${paymethodsLength(order) > 1 ? 's' : ''}`)}: ${handlePaymethodsListString(order)}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 22 } },
+      `${!!order?.delivery_option ? { text: `${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: ${t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 22 } } : ''}`,
+      { text: `${t('DELIVERY_DATE', 'Delivery Date')}: ${deliveryDate(order)}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 22 } },
+      '_separator_',
+      { text: `${t('CUSTOMER_DETAILS', 'Customer details')}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 24 } },
+      `${t('FULL_NAME', 'Full Name')}: ${customerName(order)}${endLine}`,
+      `${t('EMAIL', 'Email')}: ${order?.customer?.email}${endLine}`,
+      `${!!order?.customer?.cellphone ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}${endLine}` : ''}`,
+      `${!!order?.customer?.phone ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone}${endLine}` : ''}`,
+      `${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address}${endLine}`,
+      `${!!order?.customer?.internal_number ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}${endLine}` : ''}`,
+      `${!!order?.customer?.zipcode ? `${t('ZIPCODE', 'Zipcode')}: ${order?.customer?.zipcode}${endLine}` : ''}`,
+      '_separator_',
+      { text: `${t('BUSINESS_DETAILS', 'Business details')}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 24 } },
+      `${order?.business?.name}${endLine}`,
+      `${order?.business?.email}${endLine}`,
+      `${!!order?.business?.cellphone ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}${endLine}` : ''}`,
+      `${!!order?.business?.phone ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone}${endLine}` : ''}`,
+      `${t('ADDRESS', 'Address')}: ${order?.business?.address}${endLine}`,
+      `${!!order?.business?.address_notes ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes}${endLine}` : ''}`,
+      '_separator_',
+      { text: `${t('ORDER_DETAILS', 'Order Details')}${endLine}`, props: { fontSize: Platform.OS === 'ios' ? 14 : 24 } },
+      `${!!order?.comment ? `${t('ORDER_COMMENT', 'Order Comment')}: ${order?.comment}${endLine}` : ''}`,
+      ...generateProductsText(order, { endLine }),
+      `${t('SUBTOTAL', 'Subtotal')} \t\t ${parsePrice(order.tax_type === 1 ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0 : order?.summary?.subtotal ?? 0)}${endLine}`,
+      `${order?.summary?.discount > 0 ? `${order?.offer_type === 1 ? `${t('DISCOUNT', 'Discount')} (${verifyDecimals(order?.offer_rate, parsePrice)}%)${endLine}` : t('DISCOUNT', 'Discount')} \t\t ${parsePrice(order?.summary?.discount)}${endLine}` : ''}`,
+      `${order?.tax_type !== 1 ? `${t('TAX', 'Tax')} (${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%) \t\t ${parsePrice(order?.summary?.tax ?? 0)}${endLine}` : ''}`,
+      `${order?.summary?.delivery_price > 0 && order.delivery_type !== 2 ? `${t('DELIVERY_FEE', 'Delivery Fee')} \t\t ${parsePrice(order?.summary?.delivery_price ?? 0)}${endLine}` : ''}`,
+      `${(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && order.delivery_type !== 2 ? `${t('DRIVER_TIP', 'Driver tip')} ${percentTip(order) ? `(${percentTip(order)}%)` : ''} \t\t ${parsePrice(order?.summary?.driver_tip ?? 0)}${endLine}` : ''}`,
+      `${order?.summary?.service_fee > 0 ? `${t('SERVICE_FEE', 'Service Fee')} (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%) \t\t ${parsePrice(order?.summary?.service_fee ?? 0)}${endLine}` : ''}`,
+      '_separator_',
+      `${t('TOTAL', 'Total')} \t\t ${parsePrice(order?.summary?.total ?? 0)}${endLine}`,
+      jumpLine,
+      `${order?.payment_events?.length > 0 ? `${t('PAYMENTS', 'Payments')}${endLine}` : ''}`,
+      ...paymethodsList(order, { endLine }),
+      jumpLine,
+      jumpLine,
+    ]
+
+    commands = [
+      ...commands,
+      ...appends.map((append: any) => {
+        return append === '_separator_'
+          ? { [printMode]: `-------------------------------------${endLine}` }
+          : {
+            [printMode]: replaceChars(append?.text ?? append),
+            ...textProps,
+            ...append?.props
+          }
+      })
+    ]
+
+    return commands
+  }
+
+  return { generateCommands }
+}

package/themes/business/src/components/OrderDetailsLogistic/index.tsx

@@ -44,6 +44,7 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     }>({ open: false, content: [], key: null });
 
     const logisticOrderStatus = [4, 6, 7]
+    const deliveryTypes = [1, 7]
     const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
 
     const showFloatButtonsAcceptOrReject: any = {
@@ -99,7 +100,7 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
                 <View
                     style={{
                         height:
-                            order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+                            order?.status === 8 && deliveryTypes?.includes(order?.delivery_type) ? 50 : 35,
                     }}
                 />
 
@@ -170,7 +171,7 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
                                         secondButton={true}
                                         firstColorCustom={theme.colors.red}
                                         secondColorCustom={theme.colors.green}
-                                        widthButton={isHideRejectButtons ? '100%': '45%'}
+                                        widthButton={isHideRejectButtons ? '100%' : '45%'}
                                         isHideRejectButtons={isHideRejectButtons}
                                     />
                                 )}

package/themes/business/src/components/OrderSummary/index.tsx

@@ -75,6 +75,40 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     return array.join('')
   }
 
+  const getIngredients = (ingredients: any) => {
+    const _ingredients: any = (ingredients.length > 0 && ingredients.filter((i: any) => !i.selected)) || []
+    const texts: any = []
+
+    _ingredients.map((ingredient: any) => {
+      texts.push(`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${t('NO', 'No')} ${ingredient.name} <br/>`)
+    })
+
+    if (_ingredients.length) {
+      return `
+        <div style="font-size: 26px;width:100%">
+          <div style=width:90%;display:flex;justifyContent:center;margin:auto;">
+            <div>
+              ${t('INGREDIENTS', 'Ingredients')}:
+            </div>
+          </div>
+          ${texts.join('')}
+        </div>
+      `
+    }
+    return ''
+  }
+
+  const deliveryDate = (order: any) => {
+    const dateString = order?.delivery_datetime_utc ?? order?.delivery_datetime
+    const currentDate = new Date();
+    const receivedDate: any = new Date(order?.delivery_datetime);
+
+    const formattedDate = receivedDate <= currentDate
+      ? `${t('ASAP_ABBREVIATION', 'ASAP')}(${parseDate(dateString, { utc: !!order?.delivery_datetime_utc })})`
+      : parseDate(dateString, { utc: !!order?.delivery_datetime_utc })
+    return formattedDate
+  }
+
   const theme = useTheme();
   const percentTip =
     parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
@@ -97,7 +131,11 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
       return paymethod?.wallet_event
         ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
-        : t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+        : paymethod?.paymethod?.gateway && paymethod?.paymethod?.gateway === 'cash' && order?.cash > 0
+          ? `${t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)} (${t('CASH_CHANGE_OF', 'Change of :amount:').replace(':amount:', parsePrice(order?.cash))})`
+          : paymethod?.paymethod?.gateway
+            ? t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+            : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
     })
     return paymethodsList.join(', ')
   }
@@ -110,15 +148,18 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
 
           ${orderStatus} </br>
 
-          ${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
-      }
+          ${t('ORDER_TYPE', 'Order 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 })
-      }
+
+          ${!!order?.delivery_option
+            ? `${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: ${t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)
+            } </br>`
+            : ''
+          }
+
+          ${t('DELIVERY_DATE', 'Delivery Date')}: ${deliveryDate(order)}
           </br>
-          ${t(paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD', paymethodsLength > 1 ? 'Payment methods' : 'Payment method')}: ${handlePaymethodsListString()}
+          ${t(paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD', paymethodsLength > 1 ? 'Payment methods' : 'Payment method')}: ${order?.payment_events?.length > 0 ? handlePaymethodsListString() : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
@@ -126,8 +167,11 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         </br>
         ${t('EMAIL', 'Email')}: ${order?.customer?.email}
         </br>
-        ${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}
-         </br>
+         ${!!order?.customer?.cellphone
+          ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
+          } </br>`
+          : ''}
+
          ${!!order?.customer?.phone
         ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
         } </br>`
@@ -146,20 +190,23 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
          </p>
 
         <h1>${t('BUSINESS_DETAILS', 'Business details')}</h1>
-        <p style="font-size: 27px"> 
-        ${order?.business?.name} 
-        </br> 
+        <p style="font-size: 27px">
+        ${order?.business?.name}
+        </br>
         ${order?.business?.email}
-        </br> 
-        ${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}
-        </br> 
+        </br>
+        ${!!order?.business?.cellphone
+          ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone
+          } </br>`
+          : ''
+        }
         ${!!order?.business?.phone
         ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
         } </br>`
         : ''
-      } 
+      }
 
-        ${t('ADDRESS', 'Address')}: ${order?.business?.address} 
+        ${t('ADDRESS', 'Address')}: ${order?.business?.address}
         </br>
         ${!!order?.business?.address_notes
         ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
@@ -169,6 +216,8 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         </p>
         <h1> ${t('ORDER_DETAILS', 'Order Details')}</h1>
 
+        ${order?.comment ? ('</br>'+ t('ORDER_COMMENT', 'Order Comment') + ':' + order?.comment) : ''}
+
         ${order?.products.length &&
       order?.products.map(
         (product: any, i: number) =>
@@ -183,6 +232,8 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
                   </div>
                 </div>
 
+                ${getIngredients(product?.ingredients)}
+
                 <div style="font-size: 26px;width:100%">
                   <div style="width:90%;display:flex;justifyContent:center;margin:auto;">
                     ${getOptions(product.options, product.comment)}
@@ -243,9 +294,9 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         : ''
       }
 
-      ${order?.summary?.delivery_price > 0 ?
+      ${order?.summary?.delivery_price > 0 && order.delivery_type !== 2 ?
         ` <div style="display: flex">
-          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start"> 
+          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start">
             ${t('DELIVERY_FEE', 'Delivery Fee')}
           </div>
 
@@ -257,7 +308,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         </div>
         <div style="display: flex">
 
-          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start"> 
+          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start">
             ${t('DRIVER_TIP', 'Driver tip')}
             ${percentTip ? `(${percentTip}%)` : ''}
           </div>
@@ -268,22 +319,23 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
 
         </div>
 
-        <div style="display: flex">
+        ${order?.summary?.service_fee > 0 && `
+          <div style="display: flex">
+            <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start">
+              ${t('SERVICE_FEE', 'Service Fee')}
+            (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
+            </div>
 
-          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start"> 
-            ${t('SERVICE_FEE', 'Service Fee')}
-           (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
-          </div>
+            <div style="font-size: 26px; width: 30%; display: flex; justify-content: flex-end">
+              ${parsePrice(order?.summary?.service_fee ?? 0)}
+            </div>
 
-          <div style="font-size: 26px; width: 30%; display: flex; justify-content: flex-end">
-            ${parsePrice(order?.summary?.service_fee ?? 0)}
           </div>
-
-        </div>
+        `}
 
         <div style="display: flex">
 
-          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start; font-weight: bold"> 
+          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start; font-weight: bold">
             ${t('TOTAL', 'Total')}
           </div>
 
@@ -292,7 +344,36 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
           </div>
 
         </div>
-        
+
+        ${order?.payment_events.length && `
+          <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start; font-weight: bold">
+            ${t('PAYMENTS', 'Payments')}
+          </div>
+        `}
+
+        ${order?.payment_events.length &&
+          order?.payment_events.map(
+            (event: any, i: number) =>
+              `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
+                    <div style="display:flex;width:100%">
+                      <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
+                      ${event?.wallet_event
+                        ? walletName[event?.wallet_event?.wallet?.type]?.name
+                        : event?.paymethod?.gateway && event?.paymethod?.gateway === 'cash' && order?.cash > 0
+                          ? `${t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)} (${t('CASH_CHANGE_OF', 'Change of :amount:').replace(':amount:', parsePrice(order?.cash))})`
+                          : event?.paymethod?.gateway
+                            ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)
+                            : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}
+                      </div>
+
+                      <div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">
+                        ${(event?.paymethod?.gateway === 'cash' && order?.cash)
+                          ? parsePrice(order?.cash, { currency: order?.currency })
+                          : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
+                      </div>
+                    </div>
+                  </div>`
+        )}
     </div>`;
   };
 
@@ -392,18 +473,25 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
             </OText>
 
             <OText style={{ marginBottom: 5 }}>
-              {`${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
+              {`${t('ORDER_TYPE', 'Order Type')}: ${deliveryStatus[order?.delivery_type]
                 }`}
             </OText>
 
+            {order?.delivery_option && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
+              </OText>
+            )}
+
+            <OText style={{ marginBottom: 5 }}>
+              {`${t('DELIVERY_DATE', 'Delivery Date')}: ${deliveryDate(order)}`}
+            </OText>
+
             <OText style={{ marginBottom: 5 }}>
-              {`${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })
-                }`}
+              {`${t(`${paymethodsLength > 1? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}`, `${paymethodsLength > 1 ? 'Payment methods' : 'Payment method'}`)}: ${order?.payment_events?.length > 0 ? handlePaymethodsListString() : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}`}
             </OText>
 
-            <OText style={{ marginBottom: 5 }}>{`${t(`${paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}`, `${paymethodsLength > 1 ? 'Payment methods' : 'Payment method'}`)}: ${handlePaymethodsListString()}`}</OText>
           </OrderHeader>
 
           <OrderCustomer>
@@ -435,16 +523,18 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
               {`${t('EMAIL', 'Email')}: ${order?.customer?.email}`}
             </OText>
 
-            <OText
-              style={{ marginBottom: 5 }}
-              size={14}
-              numberOfLines={2}
-              adjustsFontSizeToFit
-              ellipsizeMode="tail"
-              color={theme.colors.textGray}>
-              {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
-                }`}
-            </OText>
+            {!!order?.customer?.cellphone && (
+              <OText
+                style={{ marginBottom: 5 }}
+                size={14}
+                numberOfLines={2}
+                adjustsFontSizeToFit
+                ellipsizeMode="tail"
+                color={theme.colors.textGray}>
+                {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
+                  }`}
+              </OText>
+            )}
 
             {!!order?.customer?.phone && (
               <OText
@@ -476,7 +566,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
               </OText>
             )}
 
-            {order?.customer?.address_notes && (
+            {!!order?.customer?.address_notes && (
               <OText style={{ marginBottom: 5 }}>
                 {`${t('NOTES', 'Notes')}: ${order?.customer?.address_notes}`}
               </OText>
@@ -575,6 +665,12 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
               {t('ORDER_DETAILS', 'Order Details')}
             </OText>
 
+            {!!order?.comment && (
+              <OText style={{ marginBottom: 5 }}>
+                {`${t('ORDER_COMMENT', 'Order Comment')}: ${order?.comment}`}
+              </OText>
+            )}
+
             {order?.products.length &&
               order?.products.map((product: any, i: number) => (
                 <View key={i}>
@@ -642,7 +738,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
               </Table>
             )}
 
-            {order?.summary?.delivery_price > 0 && (
+            {order?.summary?.delivery_price > 0 && order.delivery_type !== 2 && (
               <Table>
                 <OText style={{ marginBottom: 5 }}>
                   {t('DELIVERY_FEE', 'Delivery Fee')}
@@ -652,22 +748,24 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
               </Table>
             )}
 
-            <Table>
-              <OText style={{ marginBottom: 5 }}>
-                {t('DRIVER_TIP', 'Driver tip')}
-                {order?.summary?.driver_tip > 0 &&
-                  parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                  !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                  `(${verifyDecimals(
-                    order?.summary?.driver_tip,
-                    parseNumber,
-                  )}%)`}
-              </OText>
+            {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && order.delivery_type !== 2 && (
+              <Table>
+                <OText style={{ marginBottom: 5 }}>
+                  {t('DRIVER_TIP', 'Driver tip')}
+                  {order?.summary?.driver_tip > 0 &&
+                    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+                    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                    `(${verifyDecimals(
+                      order?.summary?.driver_tip,
+                      parseNumber,
+                    )}%)`}
+                </OText>
 
-              <OText style={{ marginBottom: 5 }}>
-                {parsePrice(order?.summary?.driver_tip ?? 0)}
-              </OText>
-            </Table>
+                <OText style={{ marginBottom: 5 }}>
+                  {parsePrice(order?.summary?.driver_tip ?? 0)}
+                </OText>
+              </Table>
+            )}
 
             {order?.summary?.service_fee > 0 && (
               <Table>
@@ -693,6 +791,53 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
                 </OText>
               </Table>
             </Total>
+
+            {order?.payment_events?.length > 0 && (
+              <View>
+                <OText size={14} color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
+                <View
+                  style={{
+                    width: '100%',
+                    marginTop: 5
+                  }}
+                >
+                  {order?.payment_events?.map((event: any) => (
+                    <View
+                      key={event.id}
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: 10
+                      }}
+                    >
+                      <View
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                        }}
+                      >
+                        <OText>
+                          {event?.wallet_event
+                            ? walletName[event?.wallet_event?.wallet?.type]?.name
+                            : event?.paymethod?.gateway
+                              ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)
+                              : order?.paymethod?.id === event?.paymethod_id
+                                ? t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+                                : ''}
+                        </OText>
+                      </View>
+                      <OText>
+                        {(event?.paymethod?.gateway === 'cash' && order?.cash)
+                          ? parsePrice(order?.cash, { currency: order?.currency })
+                          : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
+                      </OText>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            )}
           </OrderBill>
         </OrderContent>
         <View style={{ height: 40 }} />