ordering-ui-react-native 0.18.26 → 0.18.28

package/package.json

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

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

@@ -1,14 +1,46 @@
 import React, { useEffect, useState } from 'react';
 import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
-import { useEvent, useConfig } from 'ordering-components/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 +50,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 +79,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 +123,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 +164,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,
@@ -86,23 +218,47 @@ export const AnalyticsSegment = (props: any) => {
 
   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)
     }
     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)
       }
     }
   }, [segmentClient])
@@ -110,7 +266,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)
     }

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -22,7 +22,8 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClearProducts,
 		handleClickCheckout,
 		checkoutButtonDisabled,
-		isMultiCheckout
+		isMultiCheckout,
+		isFromUpselling
 	} = props
 
 	const [orderState] = useOrder();
@@ -30,6 +31,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [{ configs }] = useConfig()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
@@ -37,6 +39,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const [isActive, setActiveState] = useState(!!singleBusiness)
+	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
@@ -52,6 +55,15 @@ export const BusinessItemAccordion = (props: any) => {
 		return acc = acc
 	}, cart?.subtotal)
 
+	useEffect(() => {
+		if (isActive && !isFromUpselling) {
+			if (cart?.uuid !== viewedCart?.uuid) {
+				setViewedCart(cart)
+				events.emit('cart_viewed', cart)
+			}
+		}
+	}, [isActive, viewedCart])
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader

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

@@ -11,7 +11,8 @@ import {
   useUtils,
   ToastType,
   useToast,
-  useConfig
+  useConfig,
+  useEvent
 } from 'ordering-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
@@ -80,6 +81,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [{ parsePrice }] = useUtils()
   const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
+  const [events] = useEvent()
   const isFocused = useIsFocused();
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
@@ -133,6 +135,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [openService, setOpenService] = useState(false)
   const [currentProduct, setCurrentProduct] = useState(null)
   const [searchBarHeight, setSearchBarHeight] = useState(60)
+  const [viewedCategory, setViewedCategory] = useState<any>(null)
 
   const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
   const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
@@ -178,6 +181,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         productAddedToCartLength
       })
     }
+    events.emit('product_clicked', product)
   }
 
   const handleCancel = () => {
@@ -309,6 +313,36 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     return acc = acc
   }, currentCart?.subtotal)
 
+  const onChangeSearch = (query: any) => {
+    handleChangeSearch(query)
+    if (query) {
+      events.emit('products_searched', query)
+    }
+  }
+
+  useEffect(() => {
+    let categoryId: any = null
+    if (business?.lazy_load_products_recommended) {
+      if (categorySelected?.id) {
+        categoryId = categorySelected.id
+      }
+    } else {
+      if (selectedCategoryId) {
+        const originCategoryId = selectedCategoryId.replace('cat_', '')
+        if (!isNaN(originCategoryId)) {
+          categoryId = Number(originCategoryId)
+        }
+      }
+    }
+    if (categoryId) {
+      const _viewedCategory = business.categories.find(category => category.id === categoryId)
+      if (_viewedCategory?.id !== viewedCategory?.id) {
+        setViewedCategory(_viewedCategory)
+        events.emit('product_list_viewed', _viewedCategory)
+      }
+    }
+  }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>
@@ -343,12 +377,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               <WrapSearchBar>
                 <SearchBar
                   autoFocus
-                  onSearch={handleChangeSearch}
+                  onSearch={onChangeSearch}
                   onCancel={() => handleCancel()}
                   isCancelXButtonShow
                   noBorderShow
                   placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
-                  lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                  lazyLoad
                 />
               </WrapSearchBar>
             )}

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

@@ -51,7 +51,8 @@ const CartUI = (props: any) => {
     preorderTimeRange,
     preorderMaximumDays,
     preorderMinimumDays,
-    cateringTypes
+    cateringTypes,
+    isFromUpselling
   } = props
 
   const theme = useTheme();
@@ -74,6 +75,7 @@ const CartUI = (props: any) => {
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const hideCartComments = theme?.business_view?.components?.cart?.components?.comments?.hidden
   const hideCartDiscount = theme?.business_view?.components?.cart?.components?.discount?.hidden
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -231,6 +233,7 @@ const CartUI = (props: any) => {
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
+        isFromUpselling={isFromUpselling}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
@@ -383,7 +386,7 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && cart?.delivery_price_with_discount >= 0 && !hideDeliveryFee && (
+            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && cart?.delivery_price_with_discount >= 0 && !hideDeliveryFee && isChewLayout && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE_AFTER_DISCOUNT', 'Delivery Fee After Discount')}</OText>
                 <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
@@ -417,6 +420,7 @@ const CartUI = (props: any) => {
                   <CouponControl
                     businessId={businessId}
                     price={cart.total}
+                    cart={cart}
                   />
                 </OSCoupon>
               </OSTable>

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

@@ -14,6 +14,7 @@ import {
 	useConfig,
 	useToast,
 	ToastType,
+	useEvent
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OModal, OButton } from '../shared';
@@ -138,6 +139,7 @@ const CheckoutUI = (props: any) => {
 	const [{ parsePrice, parseDate }] = useUtils();
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
 	const [validationFields] = useValidationFields();
+	const [events] = useEvent()
 
 	const [errorCash, setErrorCash] = useState(false);
 	const [userErrors, setUserErrors] = useState<any>([]);
@@ -166,6 +168,9 @@ const CheckoutUI = (props: any) => {
 	const hideBusinessMap = theme?.checkout?.components?.business?.components?.map?.hidden
 	const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
 
+	const creditPointPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
+	const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find((b: any) => b.business_id === cart?.business_id && b.accumulates)
+
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
 		if (item?.type === 1)
@@ -326,6 +331,10 @@ const CheckoutUI = (props: any) => {
 		)
 	}
 
+	useEffect(() => {
+		cart && events.emit('checkout_started', cart)
+	}, [])
+
 	return (
 		<>
 			<Container noPadding>
@@ -729,7 +738,10 @@ const CheckoutUI = (props: any) => {
 											placeSpotTypes={placeSpotTypes}
 											businessConfigs={businessConfigs}
 											maxDate={maxDate}
-											loyaltyRewardRate={loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')?.accumulation_rate ?? 0}
+											loyaltyRewardRate={
+												creditPointPlanOnBusiness?.accumulation_rate ??
+													(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
+											}
 										/>
 									</>
 								)}
@@ -739,7 +751,7 @@ const CheckoutUI = (props: any) => {
 
 					{!cartState.loading && cart && (
 						<View>
-							<ChErrors style={{ marginBottom: 10 }}>
+							<ChErrors style={{ marginBottom: 30 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -766,7 +778,7 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
-								{!cart?.valid_preorder && (
+								{cart?.valid_preorder !== undefined && !cart?.valid_preorder && (
 									<OText
 										color={theme.colors.error}
 										size={12}

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, Alert, Text } from 'react-native';
-import { CouponControl as CouponController, useLanguage } from 'ordering-components/native';
+import { CouponControl as CouponController, useLanguage, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	CContainer,
@@ -18,11 +18,13 @@ const CouponControlUI = (props: any) => {
 		handleRemoveCouponClick,
 		onChangeInputCoupon,
 		confirm,
-		setConfirm
+		setConfirm,
+		cart
 	} = props
 
 	const [, t] = useLanguage()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	const styles = StyleSheet.create({
 		inputsStyle: {
@@ -45,6 +47,11 @@ const CouponControlUI = (props: any) => {
 		setConfirm({ ...confirm, open: false, error: false })
 	}
 
+	const onButtonApplyClick = () => {
+		events.emit('coupon_entered', { ...cart, coupon: couponInput })
+		handleButtonApplyClick()
+	}
+
 	useEffect(() => {
 		if (confirm.content) {
 			Alert.alert(
@@ -94,7 +101,7 @@ const CouponControlUI = (props: any) => {
 						inputStyle={{ fontSize: 12 }}
 					/>
 					<OButton
-						onClick={() => handleButtonApplyClick()}
+						onClick={() => onButtonApplyClick()}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						textStyle={{ color: 'white', fontSize: 12 }}

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

@@ -60,7 +60,7 @@ const MultiCheckoutUI = (props: any) => {
     handleSelectWallet,
     handlePaymethodDataChange,
     cartUuid,
-    rewardRate,
+    loyaltyPlansState,
     totalCartsFee,
     cartGroup,
     onNavigationRedirectReplace
@@ -92,7 +92,13 @@ const MultiCheckoutUI = (props: any) => {
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
 
-  const loyaltyRewardValue = Math.round(openCarts.reduce((sum: any, cart: any) => sum + cart?.subtotal, 0) / rewardRate)
+  const creditPointPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
+  const businessIds = openCarts.map((cart: any) => cart.business_id)
+  const loyalBusinessIds = creditPointPlan?.businesses?.filter((b: any) => b.accumulates).map((item: any) => item.business_id)
+  const creditPointPlanOnBusiness = businessIds.every((bid: any) => loyalBusinessIds.includes(bid)) && creditPointPlan
+
+  const loyaltyRewardValue = creditPointPlanOnBusiness?.accumulation_rate
+    ? Math.round(openCarts.reduce((sum: any, cart: any) => sum + cart?.subtotal, 0) / creditPointPlanOnBusiness?.accumulation_rate) : 0
 
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);

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

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react'
-import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
+import React, { useEffect, useState, useRef } from 'react'
+import { useUtils, useEvent, PageBanner as PageBannerController } from 'ordering-components/native'
 import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Carousel from 'react-native-snap-carousel'
@@ -16,7 +16,10 @@ const PageBannerUI = (props: any) => {
 
 	const theme = useTheme();
 	const [{ optimizeImage }] = useUtils();
-  const carouselRef = useRef(null)
+  const [events] = useEvent()
+  const carouselRef = useRef<any>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [viewedBanner, setViewedBanner] = useState<any>(null)
 
   const windowWidth = Dimensions.get('window').width;
 
@@ -44,7 +47,8 @@ const PageBannerUI = (props: any) => {
 		navigation.navigate(route, params)
 	}
 
-  const handleGoToPage = (action: any) => {
+  const handleGoToPage = (item: any) => {
+    const action = item.action
     if (!action?.url) return
     let slug
     if (action.type === 'business') {
@@ -62,12 +66,14 @@ const PageBannerUI = (props: any) => {
         productId: action.product_id
 			})
     }
+    const clickedBanner = pageBannerState.result.find(banner => banner.id === item?.banner_id)
+    events.emit('promotion_clicked', clickedBanner)
   }
 
   const renderItem = ({ item, index }) => {
     return (
       <TouchableOpacity
-        onPress={() => handleGoToPage(item.action)}
+        onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
           <FastImage
@@ -80,6 +86,24 @@ const PageBannerUI = (props: any) => {
     )
   }
 
+  const updateIndex = () => {
+    setCurrentIndex(carouselRef?.current?.currentIndex)
+  }
+
+  useEffect(() => {
+    if (pageBannerState.loading) return
+    if (pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0) {
+      const bannerId = pageBannerState.banner.items[currentIndex]?.banner_id
+      if (pageBannerState.result && bannerId) {
+        const _viewedBanner = pageBannerState.result.find(banner => banner.id === bannerId)
+        if (_viewedBanner?.id !== viewedBanner?.id) {
+          setViewedBanner(_viewedBanner)
+          events.emit('promotion_viewed', _viewedBanner)
+        }
+      }
+    }
+  }, [pageBannerState.loading, currentIndex, viewedBanner])
+
   return (
     <>
       {pageBannerState.loading ? (
@@ -128,6 +152,7 @@ const PageBannerUI = (props: any) => {
                 pagingEnabled
                 removeClippedSubviews={false}
                 inactiveSlideOpacity={1}
+                onSnapToItem={updateIndex}
               />
             </PageBannerWrapper>
           )}

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

@@ -20,7 +20,8 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig
+	useConfig,
+	useEvent
 } from 'ordering-components/native';
 import uuid from 'react-native-uuid';
 import { useTheme } from 'styled-components/native';
@@ -81,6 +82,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
+	const [events] = useEvent()
 
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
@@ -203,6 +205,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
+	const [viewedProduct, setViewedProduct] = useState<any>(null)
 
 	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])
@@ -515,6 +518,12 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (!product?.id || product?.id === viewedProduct?.id) return
+		setViewedProduct(product)
+		events.emit('product_viewed', product)
+	}, [product?.id, viewedProduct])
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<View style={styles.wrapperNavbar}>

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

@@ -196,6 +196,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
           {showCartList && cartList.map((cart: any, i: number) => (
             <CartList key={i}>
               <Cart
+                isFromUpselling
                 cart={cart}
                 cartuuid={cart.uuid}
                 hideUpselling