ordering-ui-react-native 0.23.83 → 0.23.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.23.83",
+  "version": "0.23.85",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/providers/AlertProvider.tsx

@@ -8,7 +8,8 @@ interface Props {
   title: string,
   content: Array<string>,
   onClose: () => void,
-  onAccept: () => void
+  onAccept: () => void,
+  onCancel: () => void
 }
 
 const Alert = (props: Props) => {
@@ -38,6 +39,7 @@ const Alert = (props: Props) => {
       confirmText={t('ACCEPT', 'Accept')}
       confirmButtonColor={theme.colors.primary}
       onCancelPressed={() => onClose()}
+      showCancelButton={!!props.onCancel}
       onConfirmPressed={() => onAccept()}
     />
   )

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

@@ -3,8 +3,7 @@ import {
   StyleSheet,
   View,
   TouchableOpacity,
-  ActivityIndicator,
-  Alert,
+  ActivityIndicator
 } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { StarPRNT } from 'react-native-star-prnt';
@@ -39,6 +38,7 @@ import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
 import { _retrieveStoreData } from '../../providers/StoreUtil'
 import { usePrinterCommands } from './usePrinterCommands'
+import Alert from '../../../../../src/providers/AlertProvider'
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -78,6 +78,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isDriverModalVisible, setIsDriverModalVisible] = useState(false);
   const [printerSettings, setPrinterSettings] = useState<any>('')
   const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
+  const [alertState, setAlertState] = useState<any>({ open: false, title: '', content: [] })
 
   const orderToComplete = [4, 20, 21]
   const orderToReady = [7, 14]
@@ -139,6 +140,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       if (order?.status === 7 && autoPrintEnabled && printerSettings) {
         handleViewSummaryOrder()
       }
+      return order
     }
   }
 
@@ -267,7 +269,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )}:\n${productsInString}\n`;
 
     const subtotal = `${t('SUBTOTAL', 'Subtotal')}: ${parsePrice(
-      order?.subtotal, 
+      order?.subtotal,
       { currency: getCurrenySymbol(order?.currency) }
     )}\n`;
 
@@ -315,10 +317,42 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setUnreadAlert({ ...unreadAlert, business: false });
   };
 
-  const handleViewActionOrder = (action: string) => {
+  const handleViewActionOrder = (action: string, options?: any) => {
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
+    if (options?.alert) {
+      let bodyToSend: any = {};
+      const orderStatus: any = {
+        acceptByBusiness: {
+          status: 7,
+        },
+      };
+
+      if (actions && action === 'accept') {
+        bodyToSend = orderStatus[actions.accept];
+      }
+      bodyToSend.id = order?.id;
+      setAlertState({
+        open: true,
+        content: options?.content,
+        title: t('ORDER_STATUS', 'Order status'),
+        onAccept: async () => {
+          setAlertState({
+            open: false,
+            content: []
+          })
+          const order = await handleChangeOrderStatus(bodyToSend?.status, bodyToSend)
+          if (order?.id) {
+            setActionOrder(action);
+            setOpenModalForAccept(true);
+          } else {
+            showToast(ToastType.Error, t('FAILED_TO_UPDATE_ORDER', 'Failed to update order'), 5000)
+          }
+        }
+      })
+      return
+    }
     setActionOrder(action);
     setOpenModalForAccept(true);
   };
@@ -366,6 +400,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     navigation?.canGoBack() && navigation.goBack();
   };
 
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      title: '',
+      content: []
+    })
+  }
+
   useEffect(() => {
     if (messagesReadList?.length) {
       openModalForBusiness
@@ -408,7 +450,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
 
   useEffect(() => {
-    if (openModalForAccept) {
+    if (openModalForAccept && !loading) {
       setOpenModalForAccept(false);
     }
 
@@ -656,7 +698,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <FloatingButton
                 btnText={t('REJECT', 'Reject')}
                 isSecondaryBtn={false}
-                secondButtonClick={() => handleViewActionOrder('accept')}
+                secondButtonClick={() => handleViewActionOrder('accept', { alert: true, content: t('DO_YOU_WANT_ACCEPT_ORDER', 'Do you want to accept the order?') })}
                 firstButtonClick={() => handleViewActionOrder('reject')}
                 secondBtnText={t('ACCEPT', 'Accept')}
                 secondButton={true}
@@ -698,6 +740,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           )}
         </View>
       )}
+      <Alert
+        open={alertState.open}
+        content={alertState.content}
+        title={alertState.title || ''}
+        onAccept={alertState.onAccept}
+        onClose={closeAlert}
+        onCancel={closeAlert}
+      />
     </>
   );
 };

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { OText, OIconButton } from '../shared';
-import { StyleSheet, View, Platform, Alert } from 'react-native';
+import { OText, OIcon } from '../shared';
+import { StyleSheet, View, Platform, Alert, TouchableOpacity } from 'react-native';
 import {
   Content,
   OrderCustomer,
@@ -15,7 +15,7 @@ import {
   ContentInfo,
 } from './styles';
 import { useUtils, useLanguage, useConfig } from 'ordering-components/native';
-import { verifyDecimals, getProductPrice } from '../../utils';
+import { verifyDecimals, getProductPrice, getCurrenySymbol } from '../../utils';
 import { FloatingButton } from '../FloatingButton';
 import RNHTMLtoPDF from 'react-native-html-to-pdf';
 import RNPrint from 'react-native-print';
@@ -152,10 +152,10 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
           </br>
 
           ${!!order?.delivery_option
-            ? `${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: ${t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)
-            } </br>`
-            : ''
-          }
+        ? `${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>
@@ -168,9 +168,9 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         ${t('EMAIL', 'Email')}: ${order?.customer?.email}
         </br>
          ${!!order?.customer?.cellphone
-          ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
-          } </br>`
-          : ''}
+        ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
+        } </br>`
+        : ''}
 
          ${!!order?.customer?.phone
         ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
@@ -196,10 +196,10 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         ${order?.business?.email}
         </br>
         ${!!order?.business?.cellphone
-          ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone
-          } </br>`
-          : ''
-        }
+        ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone
+        } </br>`
+        : ''
+      }
         ${!!order?.business?.phone
         ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
         } </br>`
@@ -216,7 +216,7 @@ 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?.comment ? ('</br>' + t('ORDER_COMMENT', 'Order Comment') + ':' + order?.comment) : ''}
 
         ${order?.products.length &&
       order?.products.map(
@@ -301,7 +301,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
           </div>
 
           <div style="font-size: 26px; width: 30%; display: flex; justify-content: flex-end">
-            ${parsePrice(order?.summary?.delivery_price ?? 0)}
+            ${parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true), { currency: getCurrenySymbol(order?.currency) })}
           </div>` :
         ''}
 
@@ -352,28 +352,28 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         `}
 
         ${order?.payment_events.length &&
-          order?.payment_events.map(
-            (event: any, i: number) =>
-              `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
+      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)}
+            ? 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 })}`}
+            ? parsePrice(order?.cash, { currency: order?.currency })
+            : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
                       </div>
                     </div>
                   </div>`
-        )}
+      )}
     </div>`;
   };
 
@@ -418,8 +418,16 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
 
   const styles = StyleSheet.create({
     btnBackArrow: {
-      maxWidth: 40,
-      height: 25,
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
     },
     textBold: {
       fontWeight: '600',
@@ -445,18 +453,27 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     }
   };
 
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
+    if (!order?.taxes) return 0
+    if (order?.taxes?.length === 0) {
+      return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
+    } else {
+      return order?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
   return (
     <>
       <Content>
         <OrderContent>
           <OrderHeader>
-            <OIconButton
-              icon={theme.images.general.arrow_left}
-              iconStyle={{ width: 20, height: 20 }}
-              borderColor={theme.colors.clear}
-              style={{ maxWidth: 40, justifyContent: 'flex-end' }}
-              onClick={() => handleArrowBack()}
-            />
+            <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+            </TouchableOpacity>
             <OText
               style={{ marginBottom: 5 }}
               size={15}
@@ -489,7 +506,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
             </OText>
 
             <OText style={{ marginBottom: 5 }}>
-              {`${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)}`}
+              {`${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>
 
           </OrderHeader>
@@ -744,7 +761,9 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
                   {t('DELIVERY_FEE', 'Delivery Fee')}
                 </OText>
 
-                <OText>{parsePrice(order?.summary?.delivery_price)}</OText>
+                <OText>
+                  {parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true), { currency: getCurrenySymbol(order?.currency) })}
+                </OText>
               </Table>
             )}