ordering-ui-react-native 0.18.61 → 0.18.63

package/package.json

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

package/src/components/StripeMethodForm/index.tsx

@@ -25,9 +25,9 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const [{ configs }] = useConfig()
   const applePay = ['global_apple_pay', 'apple_pay']
   const googlePay = ['global_google_pay', 'google_pay']
+
   useEffect(() => {
     if (Platform.OS === 'ios') {
-      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
       setMethodPaySupported({
         enabled: false,
         loading: false
@@ -78,7 +78,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
         setPlaceByMethodPay(false)
       }
     }
-    if (googlePay.includes(paymethod)) {
+    if (googlePay.includes(paymethod) && !methodPaySupported?.enabled) {
       initialize();
     }
   }, [initGooglePay, paymethod]);
@@ -87,9 +87,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     if (applePay.includes(paymethod) && !paymethod) return
     if (Platform.OS === 'android') {
       setPlaceByMethodPay(false)
-      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
       setMethodPaySupported({
-        enabled: false,
+        ...methodPaySupported,
         loading: false
       })
       return
@@ -111,7 +110,6 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
         enabled: true,
         loading: false
       })
-      return;
     } else if (paymentMethod) {
       setMethodPaySupported({
         enabled: true,

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

@@ -123,7 +123,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		},
 		wrapperNavbar: Platform.OS === 'ios'
 			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
-			: { paddingVertical: 20, paddingLeft: 40, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -176,7 +176,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 
 	const getAddressFormatted = (address: any) => {
 		const data: any = { address: null, error: null };
-		Geocoder.init(googleMapsApiKey);
 		Geocoder.from(address)
 			.then((json) => {
 				if (json.results && json.results?.length > 0) {
@@ -491,6 +490,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		}
 	}, []);
 
+	useEffect(() => {
+		Geocoder.init(googleMapsApiKey);
+	}, [googleMapsApiKey]);
+
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener(
 			'keyboardDidShow',
@@ -535,7 +538,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: HEIGHT_SCREEN * .78, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -640,6 +643,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													}
 												}}
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+												isIntGeoCoder
 											/>
 										</View>
 									)}
@@ -661,6 +665,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 											saveLocation={saveMapLocation}
 											setSaveLocation={setSaveMapLocation}
 											handleToggleMap={handleToggleMap}
+											isIntGeoCoder
 										/>
 									</GoogleMapContainer>
 								</View>
@@ -871,6 +876,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									saveLocation={saveMapLocation}
 									setSaveLocation={setSaveMapLocation}
 									handleToggleMap={handleToggleMap}
+									isIntGeoCoder
 								/>
 							</GoogleMapContainer>
 						)}

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

@@ -14,7 +14,8 @@ import { OIcon, OText } from '../shared';
 import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, lightenDarkenColor, shape, vibrateApp } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	BusinessHero,
@@ -151,6 +152,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		return _types.join(', ');
 	};
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleBusinessClick = (selectedBusiness: any) => {
 		vibrateApp()
 		if (business?.open) handleClick && handleClick(selectedBusiness)

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

@@ -26,6 +26,7 @@ import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useIsFocused } from '@react-navigation/native';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
   TopHeader,
@@ -44,7 +45,6 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
-import { vibrateApp } from '../../utils';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -147,11 +147,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
   const isOpenFiltProducts = isOpenSearchBar && !!searchValue
   const filtProductsHeight = Platform.OS === 'ios' ? 165 : 100
-  const viewOrderButtonVisible = !loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 
+  const viewOrderButtonVisible = !loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0
 
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+  const vibrateApp = (impact?: string) => {
+    const options = {
+      enableVibrateFallback: true,
+      ignoreAndroidSystemSettings: false
+    };
+    ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+  }
   const onProductClick = async (product: any) => {
     if (product.ingredients?.length === 0 && product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
       const isProductAddedToCart = currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)
@@ -315,7 +322,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [isFocused])
 
-  
+
   useEffect(() => {
     function onKeyboardDidShow(e: KeyboardEvent) {
       setKeyboardHeight(e?.endCoordinates?.height);
@@ -395,7 +402,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               <>
                 {!(businessSingleId && auth) && (
                   <TopActions onPress={() => handleBackNavigation()}>
-                    <AntDesignIcon 
+                    <AntDesignIcon
                       name='arrowleft'
                       size={26}
                     />

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

@@ -3,6 +3,7 @@ import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView }
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -52,7 +53,7 @@ import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
-import { getTypesText, vibrateApp } from '../../utils';
+import { getTypesText } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
 
@@ -211,6 +212,14 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleSuccessSignup = (user: any) => {
 		login({
 			user,

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

@@ -12,7 +12,8 @@ export const GPSButton = (props: any) => {
     handleGPS,
 		apiKey,
     IconButton,
-    IconLoadingButton
+    IconLoadingButton,
+    isIntGeoCoder
   } = props
 
 	const [isLoading, setLoading] = useState(false);
@@ -31,7 +32,7 @@ export const GPSButton = (props: any) => {
             break
           }
         }
-        let data = null
+        let data : any
         const details = {
           geometry: { location: { lat: pos.latitude, lng: pos.longitude } }
         }
@@ -68,12 +69,13 @@ export const GPSButton = (props: any) => {
         setLoading(false);
         console.log(`ERROR(${err.code}): ${err.message}`)
       }, {
-        enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+        enableHighAccuracy: false, timeout: 30000, maximumAge: 1000
       })
     }
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(apiKey);
   }, [])
 

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

@@ -18,7 +18,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     saveLocation,
     setSaveLocation,
     handleToggleMap,
-    locations
+    locations,
+    isIntGeoCoder
   } = props
 
   const [, t] = useLanguage()
@@ -161,8 +162,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(googleMapsApiKey)
-  }, [])
+  }, [isIntGeoCoder])
 
   useEffect(() => {
     mapRef.current.animateToRegion({

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

@@ -6,6 +6,7 @@ import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Recaptcha from 'react-native-recaptcha-that-works'
 import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	LoginForm as LoginFormController,
@@ -45,7 +46,6 @@ import { AppleLogin } from '../AppleLogin';
 import { Otp } from './Otp'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Alert from '../../../../../src/providers/AlertProvider'
-import { vibrateApp } from '../../utils';
 
 const LoginFormUI = (props: LoginParams) => {
 	const {
@@ -162,6 +162,14 @@ const LoginFormUI = (props: LoginParams) => {
 		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
 	};
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const onSubmit = (values?: any) => {
 		Keyboard.dismiss();
 		if (loginTab === 'otp') {
@@ -170,7 +178,7 @@ const LoginFormUI = (props: LoginParams) => {
 				vibrateApp()
 				return
 			}
-			if(!values?.cellphone && otpType === 'cellphone'){
+			if (!values?.cellphone && otpType === 'cellphone') {
 				showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
 				return
 			}
@@ -259,7 +267,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleLoginOtp = async (code: string) => {
 		if (!code) return
 		const logged = await handleButtonLoginClick({ code })
-		if (logged){
+		if (logged) {
 			setWillVerifyOtpState(false)
 		} else {
 			setAlertState({

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

@@ -13,6 +13,7 @@ import { getIconCard, flatArray } from '../../utils'
 import { StripeElementsForm } from '../StripeElementsForm'
 import { StripeCardsList } from '../StripeCardsList'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useApplePay } from '@stripe/stripe-react-native';
 
 import {
   PMContainer,
@@ -44,6 +45,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
+	const { confirmApplePayPayment } = useApplePay()
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
 
@@ -92,7 +94,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
 		if (methodsPay.includes(paymethodSelected?.gateway)) {
       if (typeof paymethodSelected?.paymethod_data === 'string'){
         const sourceId =  JSON.parse(paymethodSelected?.paymethod_data)?.source_id
-        sourceId && handlePlaceOrder()
+        sourceId && handlePlaceOrder(confirmApplePayPayment)
       }
 		}
 	}, [JSON.stringify(paymethodSelected)])
@@ -100,7 +102,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const renderPaymethods = ({ item }: any) => {
     return (
       <>
-        {item?.gateway === 'apple_pay' ? (
+        {item?.gateway === 'global_apple_pay' ? (
           <TouchableOpacity
             onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
           >
@@ -123,7 +125,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
                 src={getPayIcon(item?.gateway ?? item.paymethod?.gateway)}
                 width={20}
                 height={20}
-                color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+                color={item?.gateway === 'global_apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
               />
               <OText
                 size={10}

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

@@ -177,9 +177,9 @@ const MultiCheckoutUI = (props: any) => {
     setPhoneUpdate(val)
   }
 
-  const handlePlaceOrder = () => {
+  const handlePlaceOrder = (confirmPayment ?: any) => {
     if (!userErrors.length) {
-      handleGroupPlaceOrder && handleGroupPlaceOrder()
+      handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
       return
     }
     let stringError = ''

package/themes/original/src/components/OrderDetails/OrderEta.tsx

@@ -12,14 +12,31 @@ export const OrderEta = (props: any) => {
   const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
 
   const getEstimatedDeliveryTime = () => {
-    let _estimatedTime = null
+    let estimatedUtcTime = null
     let totalEta = 0
+    if (order?.delivered_in) totalEta += order?.delivered_in
+    if (order?.prepared_in) totalEta += order?.prepared_in
+    if (order?.delivery_type === 1 && order?.eta_drive_time) {
+      totalEta += order?.eta_drive_time
+    }
+
     const _delivery = order?.delivery_datetime_utc
       ? order?.delivery_datetime_utc
       : order?.delivery_datetime
+
     if (order?.eta_current_status_time) {
       const currentStatueEta = order?.eta_current_status_time
       totalEta += currentStatueEta
+      let previousStatusTimes = 0
+      if (order?.eta_previous_status_times) {
+        Object.keys(order.eta_previous_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            previousStatusTimes += order.eta_previous_status_times[key]
+          }
+        })
+      }
+      totalEta += previousStatusTimes
+
       let nextStatusTimes = 0
       if (order?.eta_next_status_times) {
         Object.keys(order.eta_next_status_times).map(key => {
@@ -28,7 +45,6 @@ export const OrderEta = (props: any) => {
           }
         })
       }
-
       totalEta += nextStatusTimes
 
       const diffTimeAsSeconds = moment.utc(order?.reporting_data?.at[`status:${order.status}`]).add(order?.eta_current_status_time, 'minutes').diff(moment().utc(), 'seconds')
@@ -36,15 +52,11 @@ export const OrderEta = (props: any) => {
       if (diffTimeAsMinutes <= 0) {
         totalEta += (Math.floor(Math.abs(diffTimeAsMinutes / order?.eta_current_status_time) + 1) * order?.eta_current_status_penalty_time)
       }
-      _estimatedTime = moment.utc(_delivery).add(totalEta, 'minutes')
     } else {
-      let timesToAdd = 0
-      if (order?.delivered_in) timesToAdd += order?.delivered_in
-      if (order?.prepared_in) timesToAdd += order?.prepared_in
-      const _etaTime = order?.eta_time + timesToAdd
-      _estimatedTime = moment.utc(_delivery).add(_etaTime, 'minutes')
+      totalEta = order?.eta_time + totalEta
     }
-    _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { utc: false })
+    estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
+    const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
     setEstimatedDeliveryTime(_estimatedTime)
   }
 

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

@@ -30,6 +30,7 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import YoutubePlayer from "react-native-youtube-iframe"
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	WrapHeader,
@@ -54,7 +55,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
-import { orderTypeList, vibrateApp } from '../../utils';
+import { orderTypeList } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -208,7 +209,15 @@ export const ProductOptionsUI = (props: any) => {
 	const [showTitle, setShowTitle] = useState(false)
 
 	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
-  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+	const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;

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

@@ -8,6 +8,7 @@ import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
 import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	SignupForm as SignUpController,
@@ -37,7 +38,7 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
 import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
-import { sortInputFields, vibrateApp } from '../../utils';
+import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
 import { AppleLogin } from '../AppleLogin';
 
@@ -164,6 +165,14 @@ const SignupFormUI = (props: SignupParams) => {
 		})
 	}
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
 			case 'name': {

package/themes/original/src/types/index.tsx

@@ -629,7 +629,8 @@ export interface GoogleMapsParams {
 	isSetInputs?: boolean,
 	locations?: Array<any>,
 	setSaveLocation?: (val: boolean) => void,
-	handleToggleMap?: () => void
+	handleToggleMap?: () => void,
+	isIntGeoCoder: boolean
 }
 
 export interface HelpParams {

package/themes/original/src/utils/index.tsx

@@ -4,7 +4,6 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native'
 import { ORDER_TYPES } from '../config/constants';
 import { useTheme } from 'styled-components/native';
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 const [languageState, t] = useLanguage();
 const theme = useTheme()
@@ -613,13 +612,3 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
-
-export const vibrateApp = (impact?: string) => {
-  const options = {
-    enableVibrateFallback: true,
-    ignoreAndroidSystemSettings: false
-  };
-
-  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
-
-}