ordering-ui-react-native 0.15.55 → 0.15.58

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -514,7 +514,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Table>
               )}
               {
-                order?.taxes?.length === 0 && order?.tax_type === 2 && (
+                order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
                   <Table>
                     <OText>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
@@ -524,7 +524,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )
               }
               {
-                order?.fees?.length === 0 && (
+                order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
                   <Table>
                     <OText>
                       {t('SERVICE_FEE', 'Service fee')}

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

@@ -1,50 +1,55 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
-import { OText, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
+import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native'
+import { useEvent, useLanguage, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
+
+import { OText, OIcon } from '../shared'
 import { NotificationContainer } from './styles'
-import Sound from 'react-native-sound'
-import moment from 'moment'
 import { useLocation } from '../../hooks/useLocation'
-import { useFocusEffect } from '@react-navigation/core'
+
 Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
-const NewOrderNotificationUI = (props: any) => {
+const NewOrderNotificationUI = () => {
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
-  const [{ getTimeAgo }] = useUtils()
   const { getCurrentLocation } = useLocation();
-  const [modalOpen, setModalOpen] = useState(false)
-  const [newOrderId, setNewOrderId] = useState(null)
-  const [messageOrderId, setMessageOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  const [isFocused, setIsFocused] = useState(false)
-  const [currentChange, setCurrentChange] = useState(1)
+  const [currentEvent, setCurrentEvent] = useState<any>(null)
+
+  const evtList: any = {
+    1: {
+      event: 'messages',
+      message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
+      message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
+    },
+    2: {
+      event: 'order_added',
+      message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
+      message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
+    },
+    3: {
+      event: 'order_updated',
+      message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
+      message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
+    },
+  }
 
-  const notificationSound = new Sound(theme.sounds.notification, error => {
-    if (error) {
-      console.log('failed to load the sound', error);
-      return
-    }
-    console.log('loaded successfully');
-  });
+  const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
 
   const handlePlayNotificationSound = () => {
     let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
         if (success) {
-          console.log('successfully finished playing');
           times = times + 1
-        } else {
-          console.log('playback failed due to audio decoding errors');
         }
       })
       setSoundTimeout(_timeout)
@@ -57,39 +62,11 @@ const NewOrderNotificationUI = (props: any) => {
 
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
-    setModalOpen(false)
-    setNewOrderId(null)
-    setMessageOrderId(null)
-  }
-
-  const handleNotification = (order: any) => {
-    setModalOpen(true)
-    clearInterval(soundTimeout)
-    setCurrentChange(1)
-    handlePlayNotificationSound()
-    setNewOrderId(order.id)
-  }
-
-  const handleMessageNotification = (message: any) => {
-    const { order_id: orderId } = message;
-    if (!modalOpen) setModalOpen(true)
-    clearInterval(soundTimeout)
-    setCurrentChange(2)
-    handlePlayNotificationSound()
-    setMessageOrderId(orderId)
+    setCurrentEvent({ evt: null })
   }
 
-  useEffect(() => {
-    events.on('order_added_noification', handleNotification)
-    events.on('message_added_noification', handleMessageNotification)
-    return () => {
-      events.off('order_added_noification', handleNotification)
-      events.off('message_added_noification', handleMessageNotification)
-    }
-  }, [])
-
-  const handleUpdateOrder = useCallback(async (order: any) => {
-    if (order?.driver) {
+  const handleEventNotification = async (evtType: number, value: any) => {
+    if (value?.driver) {
       const location = await getCurrentLocation()
       await fetch(`${ordering.root}/users/${user.id}/locations`, {
         method: 'POST',
@@ -98,25 +75,32 @@ const NewOrderNotificationUI = (props: any) => {
         }),
         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
       })
-      const assignedTimeDiff = moment.utc(order?.driver?.last_order_assigned_at).local().fromNow()
+      const assignedTimeDiff = moment.utc(value?.driver?.last_order_assigned_at).local().fromNow()
       if (assignedTimeDiff === 'a few seconds ago') {
-        clearInterval(soundTimeout)
         handlePlayNotificationSound()
-        setNewOrderId(order.id)
-        if(isFocused){
-          setModalOpen(true)
-        }
+        clearInterval(soundTimeout)
+        setCurrentEvent({ evt: 2, orderId: value?.id })
       }
+      return
     }
-  }, [newOrderId, notificationSound, soundTimeout])
+    handlePlayNotificationSound()
+    clearInterval(soundTimeout)
+    setCurrentEvent({
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    })
+  }
 
   useEffect(() => {
-    if (user?.level !== 4) return
-    events.on('order_updated_noification', handleUpdateOrder)
+    events.on('message_added_notification', (o: any) => handleEventNotification(1, o))
+    events.on('order_added_notification', (o: any) => handleEventNotification(2, o))
+    events.on('order_updated_notification', (o: any) => handleEventNotification(3, o))
     return () => {
-      events.off('order_updated_noification', handleUpdateOrder)
+      events.off('message_added_notification', (o: any) => handleEventNotification(1, o))
+      events.off('order_added_notification', (o: any) => handleEventNotification(2, o))
+      events.off('order_updated_notification', (o: any) => handleEventNotification(3, o))
     }
-  }, [handleUpdateOrder, user])
+  }, [])
 
   useEffect(() => {
     notificationSound.setVolume(1);
@@ -125,21 +109,12 @@ const NewOrderNotificationUI = (props: any) => {
     }
   }, [])
 
-  useFocusEffect(
-    useCallback(() => {
-      setIsFocused(true)
-      return () => {
-        setIsFocused(false)
-      }
-    }, [])
-  )
-
   return (
     <>
       <Modal
         animationType='slide'
         transparent={true}
-        visible={modalOpen}
+        visible={!!currentEvent?.orderId}
       >
         <NotificationContainer>
           <View style={styles.modalView}>
@@ -147,40 +122,26 @@ const NewOrderNotificationUI = (props: any) => {
               style={styles.wrapperIcon}
               onPress={() => handleCloseModal()}
             >
-              <Icon
-                name="x"
-                size={30}
-              />
+              <Icon name="x" size={30} />
             </TouchableOpacity>
             <OText
               size={18}
               color={theme.colors.textGray}
               weight={600}
             >
-              {currentChange === 1 ? t('NEW_ORDRES_RECEIVED', 'New orders have been received!') : t('NEW_MESSAGES_RECEIVED', 'New messages have been received!')}
+              {evtList[currentEvent?.evt]?.message}
             </OText>
             <OIcon
               src={theme.images.general.newOrder}
               width={250}
               height={200}
             />
-            {newOrderId !== null && (
-              <OText
-                color={theme.colors.textGray}
-                mBottom={15}
-              >
-                {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
-              </OText>
-            )}
-
-            {messageOrderId  !== null && (
-              <OText
-                color={theme.colors.textGray}
-                mBottom={15}
-              >
-                {t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', messageOrderId)}
-              </OText>
-            )}
+            <OText
+              color={theme.colors.textGray}
+              mBottom={15}
+            >
+              {evtList[currentEvent?.evt]?.message2}
+            </OText>
           </View>
         </NotificationContainer>
       </Modal>

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

@@ -11,6 +11,7 @@ import {
   Table,
   OrderBill,
   Total,
+  OSRow,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -75,6 +76,20 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
 
+  const getIncludedTaxes = () => {
+    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 + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const getIncludedTaxesDiscounts = () => {
+    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -281,14 +296,14 @@ export const OrderContentComponent = (props: OrderContent) => {
           </OText>
         )}
         {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
-          <View style={{marginTop: 10}}>
+          <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
                 {order?.delivery_option?.name}
               </OText>
             )}
             {!!order?.comment && (
-              <OText style={{fontStyle: 'italic', opacity: 0.6, marginBottom: 5}}>
+              <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 5 }}>
                 {order?.comment}
               </OText>
             )}
@@ -323,84 +338,109 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(
-              order.tax_type === 1
-                ? order?.summary?.subtotal + order?.summary?.tax ?? 0
-                : order?.summary?.subtotal ?? 0,
-            )}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
           </OText>
         </Table>
-
-        {order?.tax_type !== 1 && (
+        {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
+          <Table>
+            {order?.offer_type === 1 ? (
+              <OText mBottom={4}>
+                {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
+                <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
+              </OText>
+            ) : (
+              <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
+            )}
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
+          </Table>
+        )}
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText numberOfLines={1} mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
+        {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
+          <Table>
+            <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+            {order?.tax_type === 1 ? (
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+            ) : (
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+            )}
+          </Table>
+        )}
+        {order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
           <Table>
             <OText mBottom={4}>
-              {t('TAX', 'Tax')}
-              {`(${verifyDecimals(
-                order?.summary?.tax_rate,
-                parseNumber,
-              )}%)`}
+              {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
-
             <OText mBottom={4}>
               {parsePrice(order?.summary?.tax ?? 0)}
             </OText>
-          </Table >
+          </Table>
         )}
-
         {
-          order?.summary?.discount > 0 && (
+          order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
             <Table>
-              {order?.offer_type === 1 ? (
-                <OText mBottom={4}>
-                  <OText>{t('DISCOUNT', 'Discount')}</OText>
-
-                  <OText>
-                    {`(${verifyDecimals(
-                      order?.offer_rate,
-                      parsePrice,
-                    )}%)`}
-                  </OText>
-                </OText>
-              ) : (
-                <OText mBottom={4}>{t('DISCOUNT', 'Discount')}</OText>
-              )}
-
               <OText mBottom={4}>
-                - {parsePrice(order?.summary?.discount)}
+                {t('SERVICE_FEE', 'Service fee')}
+                {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
             </Table>
           )
         }
-
         {
-          order?.summary?.subtotal_with_discount > 0 &&
-          order?.summary?.discount > 0 &&
-          order?.summary?.total >= 0 && (
-            <Table>
-              <OText mBottom={4}>
-                {t(
-                  'SUBTOTAL_WITH_DISCOUNT',
-                  'Subtotal with discount',
-                )}
-              </OText>
-              {order?.tax_type === 1 ? (
-                <OText mBottom={4}>
-                  {parsePrice(
-                    order?.summary?.subtotal_with_discount +
-                    order?.summary?.tax ?? 0,
-                  )}
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+            <Table key={tax.id}>
+              <OSRow>
+                <OText numberOfLines={1} mBottom={4}>
+                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+            <Table key={fee.id}>
+              <OSRow>
+                <OText numberOfLines={1} mBottom={4}>
+                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
                 </OText>
-              ) : (
-                <OText mBottom={4}>
-                  {parsePrice(
-                    order?.summary?.subtotal_with_discount ?? 0,
+              </OSRow>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText numberOfLines={1} mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
-              )}
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
             </Table>
-          )
+          ))
         }
-
         {
           order?.summary?.delivery_price > 0 && (
             <Table>
@@ -414,41 +454,35 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           )
         }
-
-        <Table>
-          <OText mBottom={4}>
-            {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 mBottom={4}>
-            {parsePrice(order?.summary?.driver_tip ?? 0)}
-          </OText>
-        </Table>
-
         {
-          order?.summary?.service_fee > 0 && (
-            <Table>
-              <OText mBottom={4}>
-                {t('SERVICE_FEE', 'Service Fee')}{' '}
-                {`(${verifyDecimals(
-                  order?.summary?.service_fee,
-                  parseNumber,
-                )}%)`}
-              </OText>
-
-              <OText mBottom={4}>
-                {parsePrice(order?.summary?.service_fee)}
-              </OText>
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText numberOfLines={1} mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
             </Table>
-          )
+          ))
         }
+        {order?.summary?.driver_tip > 0 && (
+          <Table>
+            <OText mBottom={4}>
+              {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 mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+          </Table>
+        )}
 
         <Total style={{ paddingBottom: 10 }}>
           <Table>
@@ -460,7 +494,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? 0)}
+              {parsePrice(order?.summary?.total ?? order?.total)}
             </OText>
           </Table>
         </Total>

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

@@ -91,3 +91,10 @@ export const AssignDriver = styled.View`
   padding-vertical: 10px;
   margin-bottom: 10px;
 `;
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 70%;
+  flex-wrap: wrap;
+`