ordering-ui-react-native 0.16.52 → 0.16.53-release

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

@@ -14,6 +14,8 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
+const SOUND_LOOP = 3
+
 const NewOrderNotificationUI = (props: any) => {
   const { isBusinessApp } = props
   const [events] = useEvent()
@@ -22,8 +24,7 @@ const NewOrderNotificationUI = (props: any) => {
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
   const { getCurrentLocation } = useLocation();
-  const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  let [currentEvent, setCurrentEvent] = useState<any>(null)
+  const [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
     1: {
@@ -43,29 +44,27 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
+  const notificationSound = new Sound(theme.sounds.notification);
 
-  const handlePlayNotificationSound = () => {
-    if (currentEvent) return
-    let times = 0
-    const _timeout = setInterval(function () {
-      notificationSound.play(success => {
-        if (success) {
-          times = times + 1
-        }
-      })
-      setSoundTimeout(_timeout)
-      if (times === 3) {
-        clearInterval(_timeout)
-        clearInterval(soundTimeout)
-      }
-    }, 2500)
+  let _timeout: any = null
+
+  const handleCloseEvents = () => {
+    notificationSound.stop()
+    setCurrentEvent(null)
+    clearInterval(_timeout)
   }
 
-  const handleCloseModal = () => {
-    clearInterval(soundTimeout)
-    currentEvent = null
-    setCurrentEvent({ evt: null })
+  const handlePlayNotificationSound = (eventObj: any = null) => {
+    setCurrentEvent(eventObj)
+    let times = 1
+    if (times < SOUND_LOOP) {
+      _timeout = setInterval(() => {
+        notificationSound.setVolume(1).play(success => success && (times = times + 1))
+        if (times === SOUND_LOOP) {
+          clearInterval(_timeout)
+        }
+      }, 2500)
+    }
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -79,26 +78,15 @@ const NewOrderNotificationUI = (props: any) => {
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch (error) {
-          console.log(error)
-      }
+      } catch {}
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp) {
-        handlePlayNotificationSound()
-        clearInterval(soundTimeout)
-        currentEvent = { evt: 2, orderId: value?.id }
-        setCurrentEvent({ evt: 2, orderId: value?.id })
+        handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
     if (evtType === 3 || value.author_id === user.id) return
-    handlePlayNotificationSound()
-    clearInterval(soundTimeout)
-    currentEvent = {
-      evt: evtType,
-      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
-    }
-    setCurrentEvent({
+    handlePlayNotificationSound({
       evt: evtType,
       orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
     })
@@ -116,10 +104,7 @@ const NewOrderNotificationUI = (props: any) => {
   }, [])
 
   useEffect(() => {
-    notificationSound.setVolume(1);
-    return () => {
-      notificationSound.release();
-    }
+    return () => handleCloseEvents()
   }, [])
 
   return (
@@ -133,7 +118,7 @@ const NewOrderNotificationUI = (props: any) => {
           <View style={styles.modalView}>
             <TouchableOpacity
               style={styles.wrapperIcon}
-              onPress={() => handleCloseModal()}
+              onPress={() => handleCloseEvents()}
             >
               <Icon name="x" size={30} />
             </TouchableOpacity>

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

@@ -91,6 +91,10 @@ export const OrderContentComponent = (props: OrderContent) => {
     return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
+  const containsOnlyNumbers = (str: string) => {
+    return /^\d+$/.test(str);
+  }
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -148,7 +152,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${order?.business?.cellphone}`}
+                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
                   shorcut={`${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
@@ -159,7 +163,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${order?.business?.phone}`}
+                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
                   shorcut={order?.business?.phone}
                   TextStyle={styles.textLink}
                 />
@@ -274,7 +278,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.cellphone) ? order?.customer?.cellphone : 'invalid'}`}
               shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
@@ -285,7 +289,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.phone}`}
+              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
               shorcut={order?.customer?.phone}
               TextStyle={styles.textLink}
             />
@@ -333,13 +337,18 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {!!order?.comment && (
-              <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 5 }}>
-                {order?.comment}
-              </OText>
+              <>
+                <OText weight='500' style={{ marginBottom: 5 }}>
+                  {t('ORDER_COMMENT', 'Order Comment')}
+                </OText>
+                <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 20 }}>
+                  {order?.comment}
+                </OText>
+              </>
             )}
           </View>
         )}
@@ -364,6 +373,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <ProductItemAccordion
               key={product?.id || i}
               product={product}
+              currency={order?.currency}
             />
           ))}
       </OrderProducts>
@@ -372,7 +382,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -385,7 +395,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</OText>
           </Table>
         )}
         {
@@ -393,13 +403,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -407,9 +417,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <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 + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency })}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</OText>
             )}
           </Table>
         )}
@@ -419,7 +429,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0)}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}
             </OText>
           </Table>
         )}
@@ -430,7 +440,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</OText>
             </Table>
           )
         }
@@ -439,11 +449,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={tax.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), 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>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -452,11 +462,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={fee.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency })} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -465,13 +475,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -483,7 +493,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price)}
+                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}
               </OText>
             </Table>
           )
@@ -493,13 +503,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -514,7 +524,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>
           </Table>
         )}
 
@@ -528,7 +538,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total)}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency })}
             </OText>
           </Table>
         </Total>
@@ -562,7 +572,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     <OText>
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
-                        : event?.paymethod?.name}
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                     </OText>
                     {event?.data?.charge_id && (
                       <OText>
@@ -571,7 +581,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount)}
+                    -{parsePrice(event.amount, { currency: order?.currency })}
                   </OText>
                 </View>
               ))}

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

@@ -271,7 +271,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             {order?.delivery_option && (
               <OText size={13}>
                 <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {order?.payment_events?.length > 0 && (
@@ -286,8 +286,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
                         : walletName[event?.wallet_event?.wallet?.type]?.name
                       : idx < order?.payment_events?.length - 1
-                        ? `${event?.paymethod?.name} - `
-                        : event?.paymethod?.name
+                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
               </View>

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

@@ -6,7 +6,7 @@ import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import SelectDropdown from 'react-native-select-dropdown'
 import { useTheme } from 'styled-components/native';
-
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import {
   FiltersTab,
   TabsContainer,
@@ -611,7 +611,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
         </LeftSide>
 
         <RightSide style={{ paddingBottom: 110, paddingHorizontal: 20 }}>
-          {currentOrderSelected &&  (
+          {currentOrderSelected && (
             <OrderDetailsBusiness {...props.orderDetailsProps} order={currentOrderSelected} isCustomView />
           )}
         </RightSide>
@@ -756,6 +756,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
 
 export const OrdersListManager = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersListManagerUI,
@@ -870,5 +871,11 @@ export const OrdersListManager = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };