ordering-ui-react-native 0.16.94-release → 0.16.95-release

package/package.json

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

package/src/utils/index.tsx

@@ -154,6 +154,11 @@ export const transformCountryCode = (countryCode : number) => {
   return code?.countryCode
 }
 
+export const verifyCountryCode = (countryCode : string) => {
+  const code = CODES.find((code : any) => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not

package/themes/kiosk/src/components/PhoneInputNumber/index.tsx

@@ -7,7 +7,7 @@ import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../../../../src/types';
 import { OText } from '../shared';
-import {transformCountryCode} from '../../../../../src/utils'
+import { transformCountryCode, verifyCountryCode } from '../../../../../src/utils'
 import {I18nManager} from 'react-native'
 import { useTheme } from 'styled-components/native';
 
@@ -89,7 +89,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
         containerStyle={{ width: '100%' }}
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
-        defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+        defaultCode={defaultCode ? transformCountryCode(defaultCode) : verifyCountryCode(configs?.default_country_code?.value)}
         onChangeFormattedText={(text : string) => handleChangeNumber(text)}
         withDarkTheme
         textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import {
 	AddressDetails as AddressDetailsController,
 	useOrder,
@@ -21,6 +22,14 @@ const AddressDetailsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const { width } = useWindowDimensions();
 
+	const styles = StyleSheet.create({
+		productStyle: {
+			width: width,
+			height: 151,
+			marginVertical: 10
+		}
+	})
+
 	return (
 		<ADContainer>
 			<ADHeader>
@@ -34,10 +43,17 @@ const AddressDetailsUI = (props: any) => {
 					</OText>
 				)}
 			</ADHeader>
-			{!!apiKey && (
+			{!!apiKey && googleMapsUrl && (
 				<ADMap
 					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
-					<OIcon url={googleMapsUrl} height={151} width={width} />
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: googleMapsUrl,
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
 				</ADMap>
 			)}
 			<ADAddress>

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

@@ -18,9 +18,9 @@ export const AnalyticsSegment = (props: any) => {
 
   const handleProductListViewed = (category: any) => {
     segmentClient.track('Product List Viewed', {
-      business_id: category.business_id,
-      category_id: category.id,
-      category: category.name,
+      business_id: category?.business_id,
+      category_id: category?.id,
+      category: category?.name,
       products: category?.products
     })
   }

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/BusinessesListing/Layout/Original/index.tsx

@@ -224,7 +224,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	useEffect(() => {
 		if (!businessesList?.loading) {
-			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
+			const fb = businessesList.businesses.filter((b) => b?.featured === true && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
 				ary.push(fb.splice(0, 2));

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

@@ -588,7 +588,7 @@ const CheckoutUI = (props: any) => {
 								) : (
 									<AddressDetails
 										navigation={navigation}
-										location={businessDetails?.business?.location}
+										location={options?.address?.location}
 										businessLogo={businessDetails?.business?.logo}
 										isCartPending={cart?.status === 2}
 										uuid={cartUuid}

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,18 @@ const MultiCheckoutUI = (props: any) => {
     }
   }, [openCarts])
 
+  useEffect(() => {
+    if (walletState.error) {
+      showToast(ToastType.Error, t(walletState.error, walletState.error?.[0]?.replace(/_/g, ' ')))
+    }
+  }, [walletState.error])
+
+  useEffect(() => {
+    if (!cartUuid) {
+      onNavigationRedirectReplace('BottomTab', { screen: 'Cart' })
+    }
+  }, [cartUuid])
+
   return (
     <>
       <Container noPadding>
@@ -248,6 +264,7 @@ const MultiCheckoutUI = (props: any) => {
             <MultiCartsPaymethodsAndWallets
               openCarts={openCarts}
               paymethodSelected={paymethodSelected}
+              walletsPaymethod={cartGroup?.result?.wallets}
               handleSelectPaymethod={handleSelectPaymethod}
               handleSelectWallet={handleSelectWallet}
               handlePaymethodDataChange={handlePaymethodDataChange}
@@ -346,12 +363,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 &&