ordering-ui-react-native 0.15.3 → 0.15.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.3",
+  "version": "0.15.6",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -48,6 +48,8 @@
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
+    "@segment/analytics-react-native": "^2.1.11",
+    "@segment/sovran-react-native": "^0.2.6",
     "@sentry/react-native": "^2.6.0",
     "@stripe/stripe-react-native": "^0.2.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",

package/themes/original/index.tsx

@@ -1,5 +1,6 @@
 import { AddressForm } from './src/components/AddressForm';
 import { AddressDetails } from './src/components/AddressDetails';
+import { AnalyticsSegment } from './src/components/AnalyticsSegment';
 import { Home } from './src/components/Home';
 import { LoginForm } from './src/components/LoginForm';
 import { SignupForm } from './src/components/SignupForm';
@@ -67,6 +68,7 @@ import {
 export {
 	AddressForm,
 	AddressDetails,
+	AnalyticsSegment,
 	Home as HomeView,
 	SignupForm,
 	LoginForm,

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

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
+import { useEvent, useConfig } from 'ordering-components/native';
+
+export const AnalyticsSegment = (props: any) => {
+  const { children } = props
+
+  const [events] = useEvent()
+  const [configState] = useConfig()
+  const [segmentClient, setSegmentClient] = useState<any>({})
+
+  const handleClickProduct = (product: any) => {
+    segmentClient.track('Product Clicked', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price
+    })
+  }
+
+  const handleProductAdded = (product: any) => {
+    segmentClient.track('Product Added', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
+  const handleProductRemoved = (product: any) => {
+    segmentClient.track('Product Removed', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
+  const handleOrderPlaced = (order: any) => {
+    segmentClient.track('Order Placed', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+    segmentClient.track('Payment Info Entered', {
+      order: order.id,
+      business: order.business?.name,
+      business_id: order.business_id,
+      total: order.total,
+      tax: order.tax_total,
+      delivery: order.delivery_zone_price,
+      paymethod: order.paymethod
+    })
+  }
+
+  const handleUpdateOrder = (order: any) => {
+    segmentClient.track('Order Updated', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+  }
+
+  const handleAddOrder = (order: any) => {
+    segmentClient.track('Order Added', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+  }
+
+  const handleLogin = (data: any) => {
+    segmentClient.identify(data.id, {
+      email: data.email,
+      name: data.name
+    })
+  }
+
+  useEffect(() => {
+    if (segmentClient?.config?.writeKey) {
+      events.on('product_clicked', handleClickProduct)
+      events.on('userLogin', handleLogin)
+      events.on('product_added', handleProductAdded)
+      events.on('order_placed', handleOrderPlaced)
+      events.on('order_updated', handleUpdateOrder)
+      events.on('order_added', handleAddOrder)
+      events.on('cart_product_removed', handleProductRemoved)
+    }
+    return () => {
+      if (segmentClient?.config?.writeKey) {
+        events.off('product_clicked', handleClickProduct)
+        events.off('userLogin', handleLogin)
+        events.off('product_added', handleProductAdded)
+        events.off('order_placed', handleOrderPlaced)
+        events.off('order_updated', handleUpdateOrder)
+        events.off('order_added', handleAddOrder)
+        events.off('cart_product_removed', handleProductRemoved)
+      }
+    }
+  }, [segmentClient])
+
+  useEffect(() => {
+    if (configState?.configs?.segment_track_id?.value) {
+      const _segmentClient: any = createClient({
+        writeKey: configState?.configs?.segment_track_id?.value
+      });
+      setSegmentClient(_segmentClient)
+    }
+  }, [configState])
+
+  return (
+    <>
+      <AnalyticsProvider client={segmentClient}>
+        {children}
+      </AnalyticsProvider>
+    </>
+
+  )
+}

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

@@ -29,7 +29,7 @@ const types = ['food', 'laundry', 'alcohol', 'groceries'];
 export const BusinessBasicInformation = (
 	props: BusinessBasicInformationParams,
 ) => {
-	const { navigation, businessState, isBusinessInfoShow, logo, header } = props;
+	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
@@ -181,12 +181,16 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-									{t('PRE_ORDER', 'Preorder')}
-								</OText>
-							</TouchableOpacity>
-							<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+							{ isPreOrder && (
+								<>
+								<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+									<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+										{t('PRE_ORDER', 'Preorder')}
+									</OText>
+								</TouchableOpacity>
+								<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+								</>
+							)}
 							<TouchableOpacity onPress={() => setOpenBusinessReviews(true)}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('REVIEWS', 'Reviews')}
@@ -262,4 +266,4 @@ const styles = StyleSheet.create({
 		zIndex: 100,
 		left: 40
 	},
-});
+});

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

@@ -8,7 +8,8 @@ import {
 	useSession,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -52,7 +53,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
-
+	const [{ configs }] = useConfig()
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const styles = StyleSheet.create({
 		mainContainer: {
 			flex: 1,
@@ -231,6 +233,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					openBusinessInformation={openBusinessInformation}
 					header={header}
 					logo={logo}
+					isPreOrder={isPreOrder}
 				/>
 				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 				{!loading && business?.id && (

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

@@ -134,6 +134,7 @@ const CheckoutUI = (props: any) => {
 
 
 	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -149,6 +150,12 @@ const CheckoutUI = (props: any) => {
 		}
 	})
 
+	const handleMomentClick = () => {
+		if (isPreOrder) {
+			navigation.navigate('MomentOption')
+		}
+	}
+	
 	const handlePlaceOrder = () => {
 		if (!userErrors.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder()
@@ -260,19 +267,21 @@ const CheckoutUI = (props: any) => {
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
-								onPress={() => navigation.navigate('MomentOption')}
-								disabled={loading}
+									onPress={() => handleMomentClick()}
+									disabled={loading}
 							>
 								<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
 									{options?.moment
 										? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
+								{ isPreOrder && (
+									<OIcon
+										src={theme.images.general.arrow_down}
+										width={10}
+										style={{ marginStart: 8 }}
+									/>
+								)}
 							</CHMomentWrapper>
 						</ChHeader>
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />

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

@@ -37,7 +37,8 @@ import {
 	ExtraOptionWrap,
 	WeightUnitSwitch,
 	WeightUnitItem,
-	TopActions
+	TopActions,
+	ProductSummary
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -170,8 +171,11 @@ export const ProductOptionsUI = (props: any) => {
 		pieces: true
 	})
 	const [pricePerWeightUnit, setPricePerWeightUnit] = useState<any>(null)
-
+	const scrollViewRef = useRef<any>(null);
 	const swiperRef: any = useRef(null)
+	const [optionLayout, setOptionLayout] = useState<any>({})
+	const [headerRefHeight, setHeaderRefHeight] = useState(0)
+	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -253,6 +257,28 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeProductCartQuantity(quantity)
 	}
 
+	const scrollDown = (id: any) => {
+		const isErrors = Object.values(errors).length > 0
+		if (!isErrors) {
+			return
+		}
+		const targetOptionId = Object.getOwnPropertyNames(errors).filter(item => !item.includes(id))[0]
+		const targetY = optionLayout[targetOptionId]?.y
+		if (targetY) {
+			scrollViewRef.current.scrollTo({
+				y: targetY + headerRefHeight + summaryRefHeight,
+				animated: true
+			})
+		}
+	}
+
+	const handleOnLayout = (event: any, optionId: any) => {
+		const _optionLayout = { ...optionLayout }
+		const optionKey = 'id:' + optionId
+		_optionLayout[optionKey] = { y: event.nativeEvent.layout?.y }
+		setOptionLayout(_optionLayout)
+	}
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -343,10 +369,10 @@ export const ProductOptionsUI = (props: any) => {
 					<OIcon src={theme.images.general.arrow_left} width={15} />
 				</TopActions>
 			</TopHeader>
-			<ScrollView>
+			<ScrollView ref={scrollViewRef}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
-						<WrapHeader>
+						<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
 							{loading && !product ? (
 								<View style={styles.productHeaderSkeleton}>
 									<Placeholder Animation={Fade}>
@@ -470,96 +496,98 @@ export const ProductOptionsUI = (props: any) => {
 							)}
 						</WrapHeader>
 						<WrapContent>
-							<ProductTitle>
-								{loading && !product ? (
-									<Placeholder Animation={Fade}>
-										<View
-											style={{
-												flexDirection: 'row',
-												justifyContent: 'space-between',
-											}}>
-											<PlaceholderLine width={40} height={20} />
-											<PlaceholderLine width={30} height={20} />
-										</View>
-									</Placeholder>
-								) : (
-									<>
-										<View style={{ flexDirection: 'row' }}>
-											<OText
-												size={20}
-												lineHeight={30}
-												weight={'600'}
-												style={{ flex: 1, marginBottom: 10 }}>
-												{product?.name || productCart.name}
-											</OText>
-											{!!product?.calories && (
-												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+							<ProductSummary onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}>
+								<ProductTitle>
+									{loading && !product ? (
+										<Placeholder Animation={Fade}>
+											<View
+												style={{
+													flexDirection: 'row',
+													justifyContent: 'space-between',
+												}}>
+												<PlaceholderLine width={40} height={20} />
+												<PlaceholderLine width={30} height={20} />
+											</View>
+										</Placeholder>
+									) : (
+										<>
+											<View style={{ flexDirection: 'row' }}>
+												<OText
+													size={20}
+													lineHeight={30}
+													weight={'600'}
+													style={{ flex: 1, marginBottom: 10 }}>
+													{product?.name || productCart.name}
 												</OText>
-											)}
-										</View>
-										{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
-											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
-												{
-													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
-													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
-												}
-												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
-													<>&nbsp;&#183;&nbsp;</>
-												)}
-												{product?.estimated_person
-													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
-												}
-											</OText>
-										)}
-										{isHaveWeight ? (
-											<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
-										) : (
-											<View style={{ flexDirection: 'row', marginBottom: 10 }}>
-												<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-												{product?.offer_price !== null && product?.in_offer && (
-													<OText style={{
-														fontSize: 14,
-														color: '#808080',
-														textDecorationLine: 'line-through',
-														marginLeft: 7,
-														marginRight: 7
-													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+												{!!product?.calories && (
+													<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+													</OText>
 												)}
 											</View>
-										)}
-									</>
-								)}
-							</ProductTitle>
-							<ProductDescription>
-								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
-									{product?.description || productCart?.description}
-								</OText>
-							</ProductDescription>
-							<ScrollView
-								horizontal
-								showsHorizontalScrollIndicator={false}
-								contentContainerStyle={{ paddingBottom: 30 }}
-							>
-								{product?.tags?.map((tag: any) => (
-									<View
-										key={tag.id}
-										style={styles.productTagWrapper}
-									>
-										{!!tag?.image ? (
-											<OIcon
-												url={optimizeImage(tag?.image, 'h_40,c_limit')}
-												style={styles.productTagImageStyle}
-											/>
-										) : (
-											<OIcon
-												src={theme.images?.dummies?.product}
-												style={styles.productTagImageStyle}
-											/>
-										)}
-										<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
-									</View>
-								))}
-							</ScrollView>
+											{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
+												<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
+													{
+														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+											{isHaveWeight ? (
+												<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
+											) : (
+												<View style={{ flexDirection: 'row', marginBottom: 10 }}>
+													<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+													{product?.offer_price !== null && product?.in_offer && (
+														<OText style={{
+															fontSize: 14,
+															color: '#808080',
+															textDecorationLine: 'line-through',
+															marginLeft: 7,
+															marginRight: 7
+														}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+													)}
+												</View>
+											)}
+										</>
+									)}
+								</ProductTitle>
+								<ProductDescription>
+									<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
+										{product?.description || productCart?.description}
+									</OText>
+								</ProductDescription>
+								<ScrollView
+									horizontal
+									showsHorizontalScrollIndicator={false}
+									contentContainerStyle={{ paddingBottom: 30 }}
+								>
+									{product?.tags?.map((tag: any) => (
+										<View
+											key={tag.id}
+											style={styles.productTagWrapper}
+										>
+											{!!tag?.image ? (
+												<OIcon
+													url={optimizeImage(tag?.image, 'h_40,c_limit')}
+													style={styles.productTagImageStyle}
+												/>
+											) : (
+												<OIcon
+													src={theme.images?.dummies?.product}
+													style={styles.productTagImageStyle}
+												/>
+											)}
+											<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
+										</View>
+									))}
+								</ScrollView>
+							</ProductSummary>
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -658,7 +686,7 @@ export const ProductOptionsUI = (props: any) => {
 													return (
 														<React.Fragment key={`popt_${option.id}`}>
 															{showOption(option) && (
-																<View style={styles.optionContainer}>
+																<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
 																	<ProductOption
 																		option={option}
 																		currentState={currentState}
@@ -695,6 +723,8 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
+																							scrollDown={scrollDown}
+																							error={errors[`id:${option.id}`]}
 																						/>
 																					);
 																				},
@@ -855,7 +885,7 @@ export const ProductOptionsUI = (props: any) => {
 							{qtyBy?.pieces && (
 								<TextInput
 									keyboardType='numeric'
-									value={`${productCart?.quantity > 0 ? productCart?.quantity: ''}`}
+									value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
 									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
 									editable={!orderState.loading}
 									style={{

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

@@ -71,7 +71,7 @@ export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
 	min-height: 70px;
-  padding-top: ${(props : any) => props.ios ? '20px' : '0'};
+  padding-top: ${(props: any) => props.ios ? '20px' : '0'};
   padding-horizontal: 40px;
   width: 100%;
   flex-direction: row;
@@ -97,3 +97,5 @@ export const WeightUnitItem = styled.View`
     background-color: ${(props: any) => props.theme.colors.primary}20;
   `}
 `
+export const ProductSummary = styled.View`
+`

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

@@ -27,7 +27,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		suboption,
 		toggleSelect,
 		changePosition,
-		disabled
+		disabled,
+		error,
+		scrollDown
 	} = props
 
 	const theme = useTheme();
@@ -38,6 +40,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
+		if (error) {
+			scrollDown(option?.id)
+		}
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}

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

@@ -193,6 +193,7 @@ export interface BusinessBasicInformationParams {
 	isBusinessInfoShow?: boolean;
 	header?: any;
 	logo?: any;
+	isPreOrder?: boolean;
 }
 export interface BusinessProductsCategoriesParams {
 	categories: Array<any>;