ordering-ui-react-native 0.15.4 → 0.15.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.4",
+  "version": "0.15.7",
   "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

@@ -290,7 +290,15 @@ export const ProductOptionsUI = (props: any) => {
 				}
 				if (img?.video) {
 					const keys = img?.video.split('/')
-					const _videoId = keys[keys.length - 1]
+					let _videoId = keys[keys.length - 1]
+					if (_videoId.includes('watch')) {
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
+					}
+					if (_videoId.includes('?')) {
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
+					}
 					videoList.push(_videoId)
 				}
 			}

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>;