ordering-ui-react-native 0.17.23 → 0.17.24-test

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' },
@@ -62,9 +66,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
+		businessSlug
 	} = props;
 
 	const theme = useTheme();
+	const [orientationState] = useDeviceOrientation();
+
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
 		{ icon: theme.images.general.tag_home, value: 'home' },
@@ -73,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',
@@ -83,7 +93,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			backgroundColor: theme.colors.clear
 		},
 		inputsStyle: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 50,
@@ -92,7 +101,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			flex: 1,
 		},
 		textAreaStyles: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 104,
@@ -106,10 +114,16 @@ const AddressFormUI = (props: AddressFormParams) => {
 			end: 0,
 			top: 12,
 			zIndex: 1002,
+			right: autoCompleteInputFocused && (
+				!!address?.address ||
+				!!formState.changes?.address ||
+				!!addressState.address.address
+			) ? 30 : 15,
+			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -154,13 +168,14 @@ const AddressFormUI = (props: AddressFormParams) => {
 		'true';
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
-
-	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
+	const countryCode = configState?.configs?.country_autocomplete?.value
+	const isHideMap = theme?.address?.components?.map?.hidden
+	const isHideIcons = theme?.address?.components?.icons?.hidden
+	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	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) {
@@ -357,7 +372,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		if (
 			orderState.loading &&
 			!addressesList &&
-			orderState.options.address &&
+			orderState?.options?.address &&
 			auth &&
 			!afterSignup
 		) {
@@ -365,7 +380,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				? navigation.navigate('BottomTab')
 				: navigation.navigate('Business');
 		}
-	}, [orderState.options.address]);
+	}, [orderState?.options?.address]);
 
 	useEffect(() => {
 		if (alertState.open && alertState?.key !== 'ERROR_MAX_LIMIT_LOCATION') {
@@ -472,6 +487,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		}
 	}, []);
 
+	useEffect(() => {
+		Geocoder.init(googleMapsApiKey);
+	}, [googleMapsApiKey]);
+
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener(
 			'keyboardDidShow',
@@ -516,7 +535,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -544,7 +563,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 											onPress={(data, details: any) => {
 												handleChangeAddress(data, details);
 											}}
-											query={{ key: googleMapsApiKey }}
+											query={{
+												key: googleMapsApiKey,
+												components: countryCode && countryCode !== '*' ? `country:${countryCode}` : ''
+											}}
 											fetchDetails
 											ref={googleInput}
 											textInputProps={{
@@ -563,6 +585,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 												autoCorrect: false,
 												blurOnSubmit: false,
 												returnKeyType: 'next',
+												onFocus: () => setAutoCompleteInputFocused(true),
+												onBlur: () => setAutoCompleteInputFocused(false)
 											}}
 											onFail={(error) =>
 												setAlertState({
@@ -586,13 +610,14 @@ const AddressFormUI = (props: AddressFormParams) => {
 												textInput: {
 													borderWidth: 1,
 													borderRadius: 7.6,
-													borderColor: theme.colors.border,
+													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
 													flexGrow: 1,
 													fontSize: 15,
-													paddingHorizontal: 16,
+													paddingLeft: 16,
+													paddingRight: 32,
 													minHeight: 50,
 													fontFamily: 'Poppins-Regular',
-													marginBottom: 24,
+													marginBottom: 24
 												},
 											}}
 										/>
@@ -600,10 +625,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 
 								{(
-									(!isEditing && !isGuestUser && !formState.changes?.address) ||
-									(isEditing && !isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined)) ||
-									(isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined) &&
-								(
+									((!isEditing && !isGuestUser) ||
+										(isEditing && !isGuestUser)) ||
+									(isGuestUser)) &&
+									(
 										<View style={styles.pinIcon}>
 											<GPSButton
 												apiKey={googleMapsApiKey}
@@ -615,9 +640,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 													}
 												}}
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+												isIntGeoCoder
 											/>
 										</View>
-								)}
+									)}
 							</AutocompleteInput>
 
 							{(locationChange || formState.changes?.location) && (
@@ -675,6 +701,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													addressState?.address?.internal_number ||
 													''
 												}
+												isFocusHighlight
 												style={{
 													...styles.inputsStyle,
 													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
@@ -721,6 +748,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													addressState.address.zipcode ||
 													''
 												}
+												isFocusHighlight
 												style={styles.inputsStyle}
 												forwardRef={zipCodeRef}
 												returnKeyType="next"
@@ -766,6 +794,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												''
 											}
 											multiline
+											isFocusHighlight
 											style={styles.textAreaStyles}
 											returnKeyType="done"
 											forwardRef={addressNotesRef}
@@ -841,6 +870,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									saveLocation={saveMapLocation}
 									setSaveLocation={setSaveMapLocation}
 									handleToggleMap={handleToggleMap}
+									isIntGeoCoder
 								/>
 							</GoogleMapContainer>
 						)}

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

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
-import { AddressListContainer, AddressItem } from './styles'
+import { AddressItem, Container } from './styles'
 import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
-import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
@@ -40,9 +39,6 @@ const AddressListUI = (props: AddressListParams) => {
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
 
-	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
-
 	const onNavigatorRedirect = () => {
 		if (route && (isFromBusinesses || isGoBack)) {
 			isGoBack ? goToBack() : onNavigationRedirect('BottomTab')
@@ -104,7 +100,6 @@ const AddressListUI = (props: AddressListParams) => {
 	const handleSetAddress = (address: any) => {
 		if (address.id === orderState?.options?.address_id) return
 		handleSetDefault(address)
-		onNavigatorRedirect()
 	}
 
 	const handleSaveAddress = (address: any) => {
@@ -133,13 +128,21 @@ const AddressListUI = (props: AddressListParams) => {
 		}
 	}
 
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
+
+	useEffect(() => {
+		if (orderState.loading && auth && orderState.options.address?.location) {
+			onNavigatorRedirect()
+		}
+	}, [orderState.options.address])
+
 	useEffect(() => {
 		console.log('From profile : ' + isProfile)
 	}, [])
 
 	return (
-		<Container 
-			noPadding
+		<Container
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -147,17 +150,18 @@ const AddressListUI = (props: AddressListParams) => {
 				/>
 			}
 		>
-			{isProfile && (
-				<NavBar
-					title={t('SAVED_PLACES', 'My saved places')}
-					titleAlign={'center'}
-					onActionLeft={goToBack}
-					showCall={false}
-					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
-				/>
-			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
-				<AddressListContainer>
+				<>
+					{isProfile && (
+						<NavBar
+							title={t('SAVED_PLACES', 'My saved places')}
+							titleAlign={'center'}
+							onActionLeft={goToBack}
+							showCall={false}
+							paddingTop={10}
+							btnStyle={{ paddingLeft: 0 }}
+						/>
+					)}
 					{
 						route &&
 						(
@@ -173,8 +177,8 @@ const AddressListUI = (props: AddressListParams) => {
 								onActionLeft={() => goToBack()}
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
-								paddingTop={0}
-								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
+								paddingTop={10}
+								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>
@@ -323,7 +327,8 @@ const AddressListUI = (props: AddressListParams) => {
 							/>
 						</>
 					)}
-				</AddressListContainer>
+				</>
+
 			)}
 		</Container>
 	)

package/themes/original/src/components/AddressList/styles.tsx

@@ -1,10 +1,12 @@
 import styled from 'styled-components/native'
 
-export const AddressListContainer = styled.View`
+export const Container = styled.ScrollView`
+    position: relative;
     flex: 1;
 	 paddingLeft: 40px;
 	 paddingRight: 40px;
-	 paddingBottom: 20px;
+     margin-bottom: 40px;
+     padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`

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

@@ -1,14 +1,49 @@
 import React, { useEffect, useState } from 'react';
-import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
-import { useEvent, useConfig } from 'ordering-components/native';
+import {
+  createClient,
+  AnalyticsProvider
+} from '@segment/analytics-react-native';
+import { useEvent, useConfig, useLanguage } from 'ordering-components/native';
 
 export const AnalyticsSegment = (props: any) => {
   const { children } = props
 
   const [events] = useEvent()
   const [configState] = useConfig()
+  const [, t] = useLanguage()
   const [segmentClient, setSegmentClient] = useState<any>({})
 
+  const handleProductsSearched = (query: any) => {
+    segmentClient.track('Products Searched', {
+      query: query
+    })
+  }
+
+  const handleProductListViewed = (category: any) => {
+    segmentClient.track('Product List Viewed', {
+      business_id: category?.business_id,
+      category_id: category?.id,
+      category: category?.name,
+      products: category?.products
+    })
+  }
+
+  const handlePromotionViewed = (promotion: any) => {
+    segmentClient.track('Promotion Viewed', {
+      promotion_id: (promotion?.id || '').toString(),
+      name: promotion.name,
+      position: promotion.position
+    })
+  }
+
+  const handlePromotionClicked = (promotion: any) => {
+    segmentClient.track('Promotion Clicked', {
+      promotion_id: (promotion?.id || '').toString(),
+      name: promotion.name,
+      position: promotion.position
+    })
+  }
+
   const handleClickProduct = (product: any) => {
     segmentClient.track('Product Clicked', {
       id: product.id,
@@ -18,6 +53,15 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleProductViewed = (product: any) => {
+    segmentClient.track('Product Viewed', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price
+    })
+  }
+
   const handleProductAdded = (product: any) => {
     segmentClient.track('Product Added', {
       id: product.id,
@@ -38,6 +82,23 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleCartViewed = (cart: any) => {
+    segmentClient.track('Cart Viewed', {
+      id: cart.uuid,
+      products: cart?.products
+    })
+  }
+
+  const handleCheckoutStarted = (cart: any) => {
+    segmentClient.track('Checkout Started', {
+      cart_id: cart?.uuid,
+      affiliation: cart?.business?.name,
+      revenue: cart?.total,
+      tax: cart?.tax_total,
+      shipping: cart?.delivery_zone_price
+    })
+  }
+
   const handleOrderPlaced = (order: any) => {
     segmentClient.track('Order Placed', {
       id: order.id,
@@ -65,6 +126,35 @@ export const AnalyticsSegment = (props: any) => {
       tax: order.tax_total,
       shipping: order.delivery_zone_price
     })
+
+    if (order?.history?.length) {
+      const lasthistory = order.history[order.history.length - 1]
+      if (lasthistory?.data) {
+        lasthistory.data.forEach(item => {
+          if (item.attribute === 'status') {
+            if (item.new === 15) {
+              segmentClient.track('Order Completed', {
+                id: order.id,
+                affiliation: order.business?.name,
+                revenue: order.total,
+                tax: order.tax_total,
+                shipping: order.delivery_zone_price
+              })
+            }
+            const orderCancelled = [2, 5, 6, 10, 12, 16, 17]
+            if (orderCancelled.includes(item.new)) {
+              segmentClient.track('Order Cancelled', {
+                id: order.id,
+                affiliation: order.business?.name,
+                revenue: order.total,
+                tax: order.tax_total,
+                shipping: order.delivery_zone_price
+              })
+            }
+          }
+        })
+      }
+    }
   }
 
   const handleAddOrder = (order: any) => {
@@ -77,6 +167,51 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleCouponEntered = (cart: any) => {
+    segmentClient.track('Coupon Entered', {
+      cart_id: cart.uuid,
+      coupon: cart.coupon
+    })
+  }
+
+  const handleCouponApplied = (cart: any) => {
+    const coupon: any = cart?.offers?.find(offer => offer.type === 2)
+    if (coupon) {
+      segmentClient.track('Coupon Applied', {
+        cart_id: cart.uuid,
+        coupon_id: coupon.id,
+        coupon_name: coupon?.name,
+        discount: coupon?.summary?.discount
+      })
+    }
+  }
+
+  const handleCouponDenied = (coupon: any) => {
+    segmentClient.track('Coupon Denied', {
+      business_id: coupon.business_id,
+      coupon: coupon.coupon,
+      user_id: coupon?.user_id,
+      reason: typeof coupon.reason === 'string' ? t(coupon.reason) : t(coupon.reason[0])
+    })
+  }
+
+  const handleCouponRemoved = (coupon: any) => {
+    segmentClient.track('Coupon Removed', {
+      business_id: coupon.business_id,
+      coupon_id: coupon.offer_id,
+    })
+  }
+
+  const handleProductReviewed = (products: any) => {
+    products.forEach((product: any) => {
+      segmentClient.track('Product Reviewed', {
+        product_id: product.product_id,
+        review_body: product.comment,
+        rating: product.qualification
+      })
+    })
+  }
+
   const handleLogin = (data: any) => {
     segmentClient.identify(data.id, {
       email: data.email,
@@ -84,25 +219,74 @@ 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)
+      events.on('product_list_viewed', handleProductListViewed)
+      events.on('promotion_viewed', handlePromotionViewed)
+      events.on('promotion_clicked', handlePromotionClicked)
       events.on('product_clicked', handleClickProduct)
-      events.on('userLogin', handleLogin)
+      events.on('product_viewed', handleProductViewed)
       events.on('product_added', handleProductAdded)
-      events.on('order_placed', handleOrderPlaced)
+      events.on('cart_product_removed', handleProductRemoved)
+      events.on('cart_viewed', handleCartViewed)
+      events.on('checkout_started', handleCheckoutStarted)
       events.on('order_updated', handleUpdateOrder)
+      events.on('coupon_entered', handleCouponEntered)
+      events.on('offer_applied', handleCouponApplied)
+      events.on('offer_denied', handleCouponDenied)
+      events.on('offer_removed', handleCouponRemoved)
+      events.on('product_reviewed', handleProductReviewed)
+      events.on('userLogin', handleLogin)
+      events.on('order_placed', handleOrderPlaced)
       events.on('order_added', handleAddOrder)
-      events.on('cart_product_removed', handleProductRemoved)
+      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) {
+        events.off('products_searched', handleProductsSearched)
+        events.off('product_list_viewed', handleProductListViewed)
+        events.off('promotion_viewed', handlePromotionViewed)
+        events.off('promotion_clicked', handlePromotionClicked)
         events.off('product_clicked', handleClickProduct)
-        events.off('userLogin', handleLogin)
+        events.off('product_viewed', handleProductViewed)
         events.off('product_added', handleProductAdded)
-        events.off('order_placed', handleOrderPlaced)
+        events.off('cart_product_removed', handleProductRemoved)
+        events.off('cart_viewed', handleCartViewed)
+        events.off('checkout_started', handleCheckoutStarted)
         events.off('order_updated', handleUpdateOrder)
+        events.off('coupon_entered', handleCouponEntered)
+        events.off('offer_applied', handleCouponApplied)
+        events.off('offer_denied', handleCouponDenied)
+        events.off('offer_removed', handleCouponRemoved)
+        events.off('product_reviewed', handleProductReviewed)
+        events.off('userLogin', handleLogin)
+        events.off('order_placed', handleOrderPlaced)
         events.off('order_added', handleAddOrder)
-        events.off('cart_product_removed', handleProductRemoved)
+        events.off('product_added_to_wishlist', handleProductAddedToWishlist)
+        events.off('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+        events.off('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
       }
     }
   }, [segmentClient])
@@ -110,7 +294,7 @@ export const AnalyticsSegment = (props: any) => {
   useEffect(() => {
     if (configState?.configs?.segment_track_id?.value) {
       const _segmentClient: any = createClient({
-        writeKey: configState?.configs?.segment_track_id?.value
+        writeKey: configState?.configs?.segment_track_id?.value,
       });
       setSegmentClient(_segmentClient)
     }
@@ -122,6 +306,5 @@ export const AnalyticsSegment = (props: any) => {
         {children}
       </AnalyticsProvider>
     </>
-
   )
 }

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>