ordering-ui-react-native 0.16.92-release → 0.16.93-release

package/package.json

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

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

@@ -62,6 +62,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
+		businessSlug
 	} = props;
 
 	const theme = useTheme();
@@ -160,7 +161,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
 	const countryCode = configState?.configs?.country_autocomplete?.value
-	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
+	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) => {

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/BusinessProductsList/index.tsx

@@ -39,7 +39,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleUpdateProducts,
     previouslyProducts,
     isFiltMode,
-    navigation
+    navigation,
+    businessSingleId
   } = props;
 
   const [, t] = useLanguage();
@@ -92,6 +93,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           handleUpdateProducts={handleUpdateProducts}
           currentCart={currentCart}
           searchValue={searchValue}
+          businessSingleId={businessSingleId}
         />
       )}
       {category.id &&
@@ -112,6 +114,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
               navigation={navigation}
+              businessSingleId={businessSingleId}
             />
           ))
       }
@@ -139,6 +142,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                       navigation={navigation}
+                      businessSingleId={businessSingleId}
                     />
                   ),
               )}
@@ -240,6 +244,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       handleUpdateProducts={handleUpdateProducts}
                       navigation={navigation}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                      businessSingleId={businessSingleId}
                     />
                   ))}
                 </>

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'
@@ -68,7 +69,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     professionalSelected,
     handleUpdateProfessionals,
     handleChangeProfessionalSelected,
-    onBusinessClick
+    onBusinessClick,
+    businessSingleId
   } = props
 
   const insets = useSafeAreaInsets()
@@ -79,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'
 
@@ -132,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'
@@ -177,6 +181,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         productAddedToCartLength
       })
     }
+    events.emit('product_clicked', product)
   }
 
   const handleCancel = () => {
@@ -308,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 }}>
@@ -317,12 +352,15 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               marginTop: Platform.OS === 'ios' ? insets.top : 0
             }}
             onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height)}
+            hideArrow={(businessSingleId && auth)}
           >
             {!isOpenSearchBar && (
               <>
-                <TopActions onPress={() => handleBackNavigation()}>
-                  <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-                </TopActions>
+                {!(businessSingleId && auth) && (
+                  <TopActions onPress={() => handleBackNavigation()}>
+                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+                  </TopActions>
+                )}
                 {!errorQuantityProducts && (
                   <View style={{ ...styles.headerItem }}>
                     <TouchableOpacity
@@ -339,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>
             )}
@@ -412,6 +450,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 previouslyProducts={business?.previously_products}
                 navigation={navigation}
                 isFiltMode
+                businessSingleId={businessSingleId}
               />
             </View>
           </FiltProductsContainer>
@@ -514,6 +553,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                   handleUpdateProducts={handleUpdateProducts}
                   navigation={navigation}
                   previouslyProducts={business?.previously_products}
+                  businessSingleId={businessSingleId}
                 />
               </WrapContent>
             </>

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

@@ -7,7 +7,7 @@ export const TopHeader = styled.View`
   width: 100%;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ hideArrow }: any) => hideArrow ? 'flex-end' : 'space-between'};
   z-index: 1;
   height: 60px;
   min-height: 60px;

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

@@ -50,7 +50,8 @@ const CartUI = (props: any) => {
     preorderTimeRange,
     preorderMaximumDays,
     preorderMinimumDays,
-    cateringTypes
+    cateringTypes,
+    isFromUpselling
   } = props
 
   const theme = useTheme();
@@ -218,6 +219,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
@@ -402,6 +404,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>([]);
@@ -329,6 +331,10 @@ const CheckoutUI = (props: any) => {
 		)
 	}
 
+	useEffect(() => {
+		cart && events.emit('checkout_started', cart)
+	}, [])
+
 	return (
 		<>
 			<Container noPadding>

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/Home/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useEffect } from 'react';
+import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
@@ -8,12 +8,21 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
-	const { onNavigationRedirect } = props;
+	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
+	const [{ configs }] = useConfig()
 
 	const theme = useTheme();
+	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
 
 	return (
 		<View style={styles.container}>
@@ -60,7 +69,7 @@ export const Home = (props: any) => {
 					style={{ ...styles.textLink, marginTop: 12 }}
 					onPress={() =>
 						orderState?.options?.address?.address
-							? onNavigationRedirect('BusinessList', { isGuestUser: true })
+							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
 							: onNavigationRedirect('AddressForm', { isGuestUser: true })
 					}>
 					<OText weight="normal" size={18} color={theme.colors.white}>

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

@@ -20,7 +20,8 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
     currentCart,
     handleUpdateProducts,
     navigation,
-    searchValue
+    searchValue,
+    businessSingleId
   } = props
 
   const [, t] = useLanguage()
@@ -65,6 +66,7 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
                 handleUpdateProducts={handleUpdateProducts}
                 navigation={navigation}
                 isPreviously
+                businessSingleId={businessSingleId}
               />
             </ProductWrapper>
           ))}

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/SingleProductCard/index.tsx

@@ -40,7 +40,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		navigation,
 		businessId,
 		isPreviously,
-		viewString
+		viewString,
+		businessSingleId
 	} = props;
 
 	const theme = useTheme();
@@ -180,7 +181,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 				>
 					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
-							<QuantityContainer style={[styles.quantityContainer, {
+							<QuantityContainer businessSingleId={businessSingleId} style={[styles.quantityContainer, {
 								transform: [{ translateX: 25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>

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

@@ -18,6 +18,11 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
+  ${({businessSingleId} : any) => businessSingleId ? css`
+    left: 0;
+  ` : css`
+    right: 0;
+  `}
 `
 export const PricesContainer = styled.View`
   flex-direction: row;

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

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

@@ -92,7 +92,8 @@ export interface AddressFormParams {
 	hasAddressDefault?: any,
 	isFromCheckout?: boolean
 	afterSignup?: boolean
-	isGuestFromStore?: boolean
+	isGuestFromStore?: boolean,
+	businessSlug?: number | string
 }
 export interface SignupParams {
 	navigation?: any;
@@ -254,6 +255,7 @@ export interface BusinessProductsListingParams {
 	handleUpdateProfessionals?: any;
 	onBusinessClick?: any;
 	onNavigationRedirect?: any;
+	businessSingleId?: number | string
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;
@@ -305,6 +307,7 @@ export interface BusinessProductsListParams {
 	handleUpdateProducts?: any,
 	navigation?: any;
 	previouslyProducts?: any;
+	businessSingleId?: number | string
 }
 export interface SingleProductCardParams {
 	businessId: any;
@@ -320,6 +323,8 @@ export interface SingleProductCardParams {
 	navigation?: any;
 	isPreviously?: any;
 	isProductId?: any;
+	viewString?: string;
+	businessSingleId?: number
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -788,7 +793,8 @@ export interface OrderItAgainParams {
 	currentCart: any,
 	handleUpdateProducts: any,
 	navigation: any,
-	searchValue?: string
+	searchValue?: string,
+	businessSingleId?: number | string
 }
 
 export interface PreviousProductsOrderedParams {