ordering-ui-react-native 0.18.28 → 0.18.30

package/package.json

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

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

@@ -45,7 +45,7 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification, '', () => {});
+  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
 
   let _timeout: any = null
 
@@ -75,11 +75,11 @@ const NewOrderNotificationUI = (props: any) => {
         await fetch(`${ordering.root}/users/${user.id}/locations`, {
           method: 'POST',
           body: JSON.stringify({
-            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+            location: JSON.stringify({ location: `{lat: ${location.latitude}, lng: ${location.longitude}}` })
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch {}
+      } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp) {
@@ -89,7 +89,7 @@ const NewOrderNotificationUI = (props: any) => {
     if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound({
       evt: evtType,
-      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+      orderId: value?.order_id
     })
   }
 

package/themes/original/src/components/AddressForm/index.tsx

@@ -16,6 +16,8 @@ import {
 	useToast,
 	ToastType
 } from 'ordering-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
 import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
@@ -38,6 +40,8 @@ import {
 import { GPSButton } from '../GPSButton';
 import { ScrollView } from 'react-native-gesture-handler';
 
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const inputNames = [
 	{ name: 'address', code: 'Address' },
 	{ name: 'internal_number', code: 'Internal number' },
@@ -66,6 +70,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 	} = props;
 
 	const theme = useTheme();
+	const [orientationState] = useDeviceOrientation();
+
 	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
@@ -75,6 +81,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		{ icon: theme.images.general.tag_plus, value: 'other' },
 	];
 
+	const HEIGHT_SCREEN = orientationState?.dimensions?.height
+
 	const styles = StyleSheet.create({
 		iconContainer: {
 			display: 'flex',
@@ -524,7 +532,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ height: HEIGHT_SCREEN * .78, overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>

package/themes/original/src/components/AnalyticsSegment/index.tsx

@@ -216,6 +216,25 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleProductAddedToWishlist = (product: any) => {
+    segmentClient.track('Product Added to Wishlist', product)
+  }
+
+  const handleProductRemovedFromWishlist = (product: any) => {
+    segmentClient.track('Product Removed from Wishlist', product)
+  }
+
+  const handleWishlistProductAddedToCart = (product: any, result: any) => {
+    segmentClient.track('Wishlist Product Added to Cart', {
+      cart_id: result.uuid,
+      product_id: product.id,
+      name: product.name,
+      category: product.categoryId,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
   useEffect(() => {
     if (segmentClient?.config?.writeKey) {
       events.on('products_searched', handleProductsSearched)
@@ -237,6 +256,9 @@ export const AnalyticsSegment = (props: any) => {
       events.on('userLogin', handleLogin)
       events.on('order_placed', handleOrderPlaced)
       events.on('order_added', handleAddOrder)
+      events.on('product_added_to_wishlist', handleProductAddedToWishlist)
+      events.on('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+      events.on('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
     }
     return () => {
       if (segmentClient?.config?.writeKey) {
@@ -259,6 +281,9 @@ export const AnalyticsSegment = (props: any) => {
         events.off('userLogin', handleLogin)
         events.off('order_placed', handleOrderPlaced)
         events.off('order_added', handleAddOrder)
+        events.off('product_added_to_wishlist', handleProductAddedToWishlist)
+        events.off('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+        events.off('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
       }
     }
   }, [segmentClient])
@@ -278,6 +303,5 @@ export const AnalyticsSegment = (props: any) => {
         {children}
       </AnalyticsProvider>
     </>
-
   )
 }

package/themes/original/src/components/BusinessProductsListing/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration, BackHandler } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -343,6 +343,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
 
+  useEffect(() => {
+    const handleArrowBack: any = () => {
+      navigation.goBack()
+      return true
+    }
+    BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+    }
+  }, [])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>

package/themes/original/src/components/BusinessReviews/index.tsx

@@ -3,6 +3,7 @@ import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
 	useOrder,
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
@@ -30,6 +31,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const theme = useTheme();
 	const [searchReview, setSearchReview] = useState('')
 	const [orderState] = useOrder();
+	const [{ parseDate }] = useUtils()
 
 	const styles = StyleSheet.create({
 		starIcon: {
@@ -94,7 +96,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
 			<OText size={12} color={theme.colors.textSecondary}>
-				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
+				{parseDate(created_at, { outputFormat: 'MMMM D, YYYY • hh:mm A' })}
 			</OText>
 			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -3,7 +3,7 @@ import {
   useLanguage,
   PurchaseGiftCard as PurchaseGiftCardController
 } from 'ordering-components/native'
-import { StyleSheet, View, TouchableOpacity } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OIcon } from '../../shared';
@@ -44,7 +44,11 @@ const PurchaseGiftCardUI = (props: any) => {
     <Container>
       <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
       <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
-      <View>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1
+        }}
+      >
         {productsListState.loading && (
           [...Array(5).keys()].map(i => (
             <View key={i} style={style.itemStyle}>
@@ -72,7 +76,7 @@ const PurchaseGiftCardUI = (props: any) => {
             <OText color={theme.colors.textNormal} size={14}>{product.name}</OText>
           </TouchableOpacity>
         ))}
-      </View>
+      </ScrollView>
       <OButton
         onClick={() => handleAccept()}
         text={t('ACCEPT', 'Accept')}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx

@@ -3,4 +3,6 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   width: 100%;
   padding-horizontal: 40px;
+  flex: 1;
+  padding-bottom: 30px;
 `

package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx

@@ -25,6 +25,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
     businessIds,
     paymethodsAndWallets,
     walletsState,
+    walletsPaymethod,
     paymethodSelected,
     handleSelectPaymethod,
     handleSelectWallet,
@@ -52,6 +53,8 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
     }
   }
 
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+
   const getPayIcon = (method: string) => {
     switch (method) {
       case 'cash':
@@ -169,13 +172,16 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </>
       ) : (
         <>
-          {walletsState?.result?.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+          {walletsState?.result?.filter((wallet: any) =>
+            paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type))
+              .map((wallet: any, idx: any) => walletName[wallet.type]?.isActive &&
+          (
             <WalletItem
               key={wallet.type}
               isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
-              onPress={() => handleSelectWallet(paymethodSelected.wallet_id === wallet.id ? false : true, wallet)}
+              onPress={() => handleSelectWallet(!!!walletsPaymethod?.find((walletPay: any) => walletPay.wallet_id === wallet.id)?.id, wallet)}
             >
-              {paymethodSelected.wallet_id === wallet.id ? (
+              {!!walletsPaymethod?.find((walletPay: any) => walletPay.wallet_id === wallet.id)?.id ? (
                 <MaterialCommunityIcons
                   name="checkbox-marked"
                   size={25}
@@ -189,7 +195,23 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
                 />
               )}
               <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
-              <OText size={12}>{parsePrice(wallet.balance)}</OText>
+              {wallet.type === 'cash' && (
+                <OText>
+                  {parsePrice(wallet?.balance, { isTruncable: true })}
+                </OText>
+              )}
+              {wallet.type === 'credit_point' && (
+                <OText>
+                  <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                  </OText>
+                  <OText>
+                    {wallet?.balance > 0
+                      ? creditBalance(wallet)
+                      : null}
+                  </OText>
+                </OText>
+              )}
             </WalletItem>
           ))}
         </>

package/themes/original/src/components/MultiCheckout/index.tsx

@@ -63,6 +63,7 @@ const MultiCheckoutUI = (props: any) => {
     loyaltyPlansState,
     totalCartsFee,
     cartGroup,
+    walletState,
     onNavigationRedirectReplace
   } = props
 
@@ -86,8 +87,11 @@ const MultiCheckoutUI = (props: any) => {
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
-  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data)
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
+  const isDisablePlaceOrderButton = cartGroup?.loading || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
+    (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data) ||
+    walletCarts.length > 0
+
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -171,6 +175,12 @@ const MultiCheckoutUI = (props: any) => {
     }
   }, [openCarts])
 
+  useEffect(() => {
+    if (walletState.error) {
+      showToast(ToastType.Error, t(walletState.error, walletState.error?.[0]?.replace(/_/g, ' ')))
+    }
+  }, [walletState.error])
+
   return (
     <>
       <Container noPadding>
@@ -248,6 +258,7 @@ const MultiCheckoutUI = (props: any) => {
             <MultiCartsPaymethodsAndWallets
               openCarts={openCarts}
               paymethodSelected={paymethodSelected}
+              walletsPaymethod={cartGroup?.result?.wallets}
               handleSelectPaymethod={handleSelectPaymethod}
               handleSelectWallet={handleSelectWallet}
               handlePaymethodDataChange={handlePaymethodDataChange}
@@ -346,12 +357,14 @@ const MultiCheckoutUI = (props: any) => {
               )}
               {openCarts.length > 1 && (
                 <ChCartsTotal>
-                  {totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
+                  {!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
                     <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                       <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
                         {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
                       </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>{parsePrice(totalCartsFee)}</OText>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {parsePrice(totalCartsFee)}
+                      </OText>
                     </View>
                   )}
                   {openCarts.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&

package/themes/original/src/components/PageBanner/index.tsx

@@ -44,7 +44,7 @@ const PageBannerUI = (props: any) => {
   })
 
   const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
+		navigation.push(route, params)
 	}
 
   const handleGoToPage = (item: any) => {

package/themes/original/src/components/Promotions/index.tsx

@@ -212,7 +212,7 @@ const PromotionsUI = (props: PromotionParams) => {
             </OText>
             <ScrollView
               showsVerticalScrollIndicator={false}
-              style={{ height: '75%' }}
+              style={{ height: '68%' }}
             >
               {offerSelected?.businesses?.map((business: any) => {
                 return (