ordering-ui-react-native 0.16.49 → 0.16.50

package/package.json

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

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

@@ -4,7 +4,9 @@ import {
 	useUtils,
 	useOrder,
 	useLanguage,
-	useConfig
+	useConfig,
+	useToast,
+	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -44,14 +46,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryTime,
 		businessPickupTime,
 		businessDistance,
-		handleFavoriteBusiness
+		handleFavoriteBusiness,
+		enableIntersection
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
+	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
-	const [isIntersectionObserver, setIsIntersectionObserver] = useState(false)
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -121,7 +125,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const handleBusinessClick = (selectedBusiness: any) => {
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
-			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+			if (configState?.configs?.preorder_status_enabled?.value === '1') {
+				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+				return
+			}
+			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
 		}
 	}
 

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

@@ -239,6 +239,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
+                      enableIntersection
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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

@@ -223,7 +223,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}, [currentCart])
 
 	return (
-		<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
+		<>
 			<ContainerSafeAreaView
 				style={{ flex: 1 }}
 				isOpenFiltProducts={isOpenFiltProducts}
@@ -366,7 +366,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 					{!loading && business?.id && (
-						<>
+						<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
 							>
@@ -397,7 +397,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									handleUpdateProducts={handleUpdateProducts}
 								/>
 							</WrapContent>
-						</>
+						</IOScrollView>
 					)}
 					{loading && !error && (
 						<>
@@ -481,7 +481,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onClose={() => setOpenService(false)}
 				/>
 			</OModal>
-		</IOScrollView>
+		</>
 	)
 }
 

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { IOScrollView } from 'react-native-intersection-observer'
 import Geolocation from '@react-native-community/geolocation'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
@@ -460,29 +461,32 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				{businessesList.businesses?.map(
-					(business: any, i: number) => (
-						<BusinessController
-							key={`${business.id}_` + i}
-							business={business}
-							isBusinessOpen={business.open}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-							navigation={navigation}
-							businessHeader={business?.header}
-							businessFeatured={business?.featured}
-							businessLogo={business?.logo}
-							businessReviews={business?.reviews}
-							businessDeliveryPrice={business?.delivery_price}
-							businessDeliveryTime={business?.delivery_time}
-							businessPickupTime={business?.pickup_time}
-							businessDistance={business?.distance}
-							handleUpdateBusinessList={handleUpdateBusinessList}
-							favoriteIds={favoriteIds}
-							setFavoriteIds={setFavoriteIds}
-						/>
-					)
-				)}
+				<IOScrollView>
+					{businessesList.businesses?.map(
+						(business: any, i: number) => (
+							<BusinessController
+								key={`${business.id}_` + i}
+								enableIntersection
+								business={business}
+								isBusinessOpen={business.open}
+								handleCustomClick={handleBusinessClick}
+								orderType={orderState?.options?.type}
+								navigation={navigation}
+								businessHeader={business?.header}
+								businessFeatured={business?.featured}
+								businessLogo={business?.logo}
+								businessReviews={business?.reviews}
+								businessDeliveryPrice={business?.delivery_price}
+								businessDeliveryTime={business?.delivery_time}
+								businessPickupTime={business?.pickup_time}
+								businessDistance={business?.distance}
+								handleUpdateBusinessList={handleUpdateBusinessList}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					)}
+				</IOScrollView>
 				{businessesList.loading && (
 					<>
 						{[

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
@@ -162,7 +163,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		const hasMore = !(
 			paginationProps.totalPages === paginationProps.currentPage
 		);
-
 		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
 			getBusinesses();
 		}
@@ -430,29 +430,32 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				{businessesList.businesses?.map(
-					(business: any, i: number) => (
-						<BusinessController
-							key={`${business.id}_` + i}
-							business={business}
-							isBusinessOpen={business.open}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-							navigation={navigation}
-							businessHeader={business?.header}
-							businessFeatured={business?.featured}
-							businessLogo={business?.logo}
-							businessReviews={business?.reviews}
-							businessDeliveryPrice={business?.delivery_price}
-							businessDeliveryTime={business?.delivery_time}
-							businessPickupTime={business?.pickup_time}
-							businessDistance={business?.distance}
-							handleUpdateBusinessList={handleUpdateBusinessList}
-							favoriteIds={favoriteIds}
-							setFavoriteIds={setFavoriteIds}
-						/>
-					)
-				)}
+				<IOScrollView>
+					{businessesList.businesses?.map(
+						(business: any, i: number) => (
+							<BusinessController
+								key={`${business.id}_` + i}
+								enableIntersection
+								business={business}
+								isBusinessOpen={business.open}
+								handleCustomClick={handleBusinessClick}
+								orderType={orderState?.options?.type}
+								navigation={navigation}
+								businessHeader={business?.header}
+								businessFeatured={business?.featured}
+								businessLogo={business?.logo}
+								businessReviews={business?.reviews}
+								businessDeliveryPrice={business?.delivery_price}
+								businessDeliveryTime={business?.delivery_time}
+								businessPickupTime={business?.pickup_time}
+								businessDistance={business?.distance}
+								handleUpdateBusinessList={handleUpdateBusinessList}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					)}
+				</IOScrollView>
 				{businessesList.loading && (
 					<>
 						{[

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

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react'
 import { useOrder, useSession } from 'ordering-components/native';
 
 import { useTheme } from 'styled-components/native'
-import { IOScrollView } from 'react-native-intersection-observer'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 
@@ -43,9 +42,9 @@ export const BusinessesListing = (props: any) => {
   }, [auth])
 
   return (
-    <IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
+    <>
       {(layout === 'original') && <OriginalBusinessListing {...props} />}
       {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
-    </IOScrollView>
+    </>
   )
 }

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

@@ -373,518 +373,518 @@ export const ProductOptionsUI = (props: any) => {
 					<OIcon src={theme.images.general.arrow_left} width={30} />
 				</TopActions>
 			</TopHeader>
-			<ScrollView ref={scrollViewRef}>
-				{!error && (
-					<View style={{ paddingBottom: 80 }}>
-						<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
-							{loading && !product ? (
-								<View style={styles.productHeaderSkeleton}>
-									<Placeholder Animation={Fade}>
-										<PlaceholderLine
-											height={258}
-											style={{ borderRadius: 0 }}
-											width={windowWidth}
-										/>
-									</Placeholder>
-								</View>
-							) : (
-								<>
-									<Swiper
-										loop={false}
-										ref={swiperRef}
-										showsButtons={true}
-										style={styles.mainSwiper}
-										showsPagination={false}
-										onIndexChanged={(index) => handleChangeMainIndex(index)}
-										prevButton={
-											<View style={styles.swiperButton}>
-												<IconAntDesign
-													name="caretleft"
-													color={theme.colors.white}
-													size={13}
-												// style={styles.starIcon}
-												/>
-											</View>
-										}
-										nextButton={
-											<View style={styles.swiperButton}>
-												<IconAntDesign
-													name="caretright"
-													color={theme.colors.white}
-													size={13}
-												// style={styles.starIcon}
+			{!error && (
+				<ScrollView
+					ref={scrollViewRef}
+					contentContainerStyle={{ paddingBottom: 80 }}
+					stickyHeaderIndices={[2]}>
+					<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
+						{loading && !product ? (
+							<View style={styles.productHeaderSkeleton}>
+								<Placeholder Animation={Fade}>
+									<PlaceholderLine
+										height={258}
+										style={{ borderRadius: 0 }}
+										width={windowWidth}
+									/>
+								</Placeholder>
+							</View>
+						) : (
+							<>
+								<Swiper
+									loop={false}
+									ref={swiperRef}
+									showsButtons={true}
+									style={styles.mainSwiper}
+									showsPagination={false}
+									onIndexChanged={(index) => handleChangeMainIndex(index)}
+									prevButton={
+										<View style={styles.swiperButton}>
+											<IconAntDesign
+												name="caretleft"
+												color={theme.colors.white}
+												size={13}
+											// style={styles.starIcon}
+											/>
+										</View>
+									}
+									nextButton={
+										<View style={styles.swiperButton}>
+											<IconAntDesign
+												name="caretright"
+												color={theme.colors.white}
+												size={13}
+											// style={styles.starIcon}
+											/>
+										</View>
+									}
+								>
+									{gallery && gallery.length > 0 && gallery.map((img, i) => (
+										<View
+											style={styles.slide1}
+											key={i}
+										>
+											{img.includes('image') ? (
+												<FastImage
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+													source={{
+														uri: optimizeImage(img, 'h_1024,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
 												/>
-											</View>
-										}
-									>
-										{gallery && gallery.length > 0 && gallery.map((img, i) => (
+											) : (
+												<>
+													<YoutubePlayer
+														height={300}
+														play={playing}
+														videoId={img}
+														onChangeState={onStateChange}
+													/>
+													<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+												</>
+											)}
+										</View>
+									))}
+								</Swiper>
+								<ScrollView
+									horizontal
+									contentContainerStyle={{
+										paddingHorizontal: 30,
+										paddingVertical: 15
+									}}
+								>
+									{gallery.length > 0 && gallery.map((img, index) => (
+										<TouchableOpacity
+											key={index}
+											onPress={() => handleClickThumb(index)}
+										>
 											<View
-												style={styles.slide1}
-												key={i}
+												style={{
+													height: 56,
+													borderRadius: 8,
+													margin: 8,
+													opacity: index === thumbsSwiper ? 1 : 0.8
+												}}
 											>
 												{img.includes('image') ? (
-													<FastImage
-														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-														source={{
-															uri: optimizeImage(img, 'h_1024,c_limit'),
-															priority: FastImage.priority.normal,
+													<OIcon
+														url={img}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%',
+															opacity: isSoldOut ? 0.5 : 1
 														}}
+														width={56}
+														height={56}
+														cover
 													/>
 												) : (
-													<>
-														<YoutubePlayer
-															height={300}
-															play={playing}
-															videoId={img}
-															onChangeState={onStateChange}
-														/>
-														<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
-													</>
+													<OIcon
+														url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%',
+															opacity: isSoldOut ? 0.5 : 1
+														}}
+														width={56}
+														height={56}
+														cover
+													/>
 												)}
 											</View>
-										))}
-									</Swiper>
-									<ScrollView
-										horizontal
-										contentContainerStyle={{
-											paddingHorizontal: 30,
-											paddingVertical: 15
-										}}
-									>
-										{gallery.length > 0 && gallery.map((img, index) => (
-											<TouchableOpacity
-												key={index}
-												onPress={() => handleClickThumb(index)}
-											>
-												<View
-													style={{
-														height: 56,
-														borderRadius: 8,
-														margin: 8,
-														opacity: index === thumbsSwiper ? 1 : 0.8
-													}}
-												>
-													{img.includes('image') ? (
-														<OIcon
-															url={img}
-															style={{
-																borderColor: theme.colors.lightGray,
-																borderRadius: 8,
-																minHeight: '100%',
-																opacity: isSoldOut ? 0.5 : 1
-															}}
-															width={56}
-															height={56}
-															cover
-														/>
-													) : (
-														<OIcon
-															url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
-															style={{
-																borderColor: theme.colors.lightGray,
-																borderRadius: 8,
-																minHeight: '100%',
-																opacity: isSoldOut ? 0.5 : 1
-															}}
-															width={56}
-															height={56}
-															cover
-														/>
-													)}
-												</View>
-											</TouchableOpacity>
+										</TouchableOpacity>
 
-										))}
-									</ScrollView>
+									))}
+								</ScrollView>
+							</>
+						)}
+					</WrapHeader>
+					<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>
+										{!!product?.calories && (
+											<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+											</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>
+											)}
+										</View>
+									)}
 								</>
 							)}
-						</WrapHeader>
-						<WrapContent>
-							<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>
+						</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}
+										/>
 									) : (
-										<>
-											<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
-													</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>
-													)}
-												</View>
-											)}
-										</>
+										<OIcon
+											src={theme.images?.dummies?.product}
+											style={styles.productTagImageStyle}
+										/>
 									)}
-								</ProductTitle>
-								<ProductDescription>
-									<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
-										{product?.description || productCart?.description}
+									<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
+								</View>
+							))}
+						</ScrollView>
+					</ProductSummary>
+					{(!loading && product) && (
+						<ExtraOptionWrap
+							horizontal
+							showsHorizontalScrollIndicator={false}
+							style={{ marginBottom: 20 }}
+							contentContainerStyle={{ marginHorizontal: 40, paddingHorizontal: 33, backgroundColor: theme.colors.white }}
+						>
+							<TouchableOpacity
+								key={`eopt_all_0`}
+								onPress={() => setSelectedOpt(0)}
+								style={[
+									styles.extraItem,
+									{
+										borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+									},
+								]}>
+								<OText
+									color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
+									size={selOpt == 0 ? 14 : 12}
+									weight={selOpt == 0 ? '600' : 'normal'}>
+									{t('ALL', 'All')}
+								</OText>
+							</TouchableOpacity>
+							{product?.ingredients.length > 0 && (
+								<TouchableOpacity
+									key={`eopt_all_00`}
+									onPress={() => setSelectedOpt(-1)}
+									style={[
+										styles.extraItem,
+										{
+											borderBottomColor:
+												selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+										},
+									]}>
+									<OText
+										color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
+										size={selOpt == -1 ? 14 : 12}
+										weight={selOpt == -1 ? '600' : 'normal'}>
+										{t('INGREDIENTS', 'Ingredients')}
 									</OText>
-								</ProductDescription>
-								<ScrollView
-									horizontal
-									showsHorizontalScrollIndicator={false}
-									contentContainerStyle={{ paddingBottom: 30 }}
-								>
-									{product?.tags?.map((tag: any) => (
+								</TouchableOpacity>
+							)}
+							{product?.extras.map((extra: any) =>
+								<ExtraOptions key={extra.id} options={extra.options} />
+							)}
+						</ExtraOptionWrap>
+					)}
+					{loading && !product ? (
+						<>
+							{[...Array(2)].map((item, i) => (
+								<Placeholder
+									key={i}
+									style={{ marginBottom: 20 }}
+									Animation={Fade}>
+									<PlaceholderLine
+										height={40}
+										style={{ flex: 1, marginTop: 10 }}
+									/>
+									{[...Array(3)].map((item, i) => (
 										<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>
+											key={'place_key_' + i}
+											style={{
+												flexDirection: 'row',
+												justifyContent: 'space-between',
+											}}>
+											<PlaceholderLine
+												height={30}
+												width={10}
+												style={{ marginBottom: 20 }}
+											/>
+											<PlaceholderLine
+												height={30}
+												width={50}
+												style={{ marginBottom: 20 }}
+											/>
+											<PlaceholderLine
+												height={30}
+												width={30}
+												style={{ marginBottom: 20 }}
+											/>
 										</View>
 									))}
-								</ScrollView>
-							</ProductSummary>
-							{loading && !product ? (
+								</Placeholder>
+							))}
+						</>
+					) : (
+						<ProductEditions>
+							{selOpt == 0 ? (
 								<>
-									{[...Array(2)].map((item, i) => (
-										<Placeholder
-											key={i}
-											style={{ marginBottom: 20 }}
-											Animation={Fade}>
-											<PlaceholderLine
-												height={40}
-												style={{ flex: 1, marginTop: 10 }}
-											/>
-											{[...Array(3)].map((item, i) => (
-												<View
-													key={'place_key_' + i}
-													style={{
-														flexDirection: 'row',
-														justifyContent: 'space-between',
-													}}>
-													<PlaceholderLine
-														height={30}
-														width={10}
-														style={{ marginBottom: 20 }}
-													/>
-													<PlaceholderLine
-														height={30}
-														width={50}
-														style={{ marginBottom: 20 }}
-													/>
-													<PlaceholderLine
-														height={30}
-														width={30}
-														style={{ marginBottom: 20 }}
+									{product?.ingredients.length > 0 && (
+										<View style={styles.optionContainer}>
+											<SectionTitle>
+												<OText size={16}>
+													{t('INGREDIENTS', 'Ingredients')}
+												</OText>
+											</SectionTitle>
+											<WrapperIngredients>
+												{product?.ingredients.map((ingredient: any) => (
+													<ProductIngredient
+														key={ingredient.id}
+														ingredient={ingredient}
+														state={
+															productCart.ingredients[`id:${ingredient.id}`]
+														}
+														onChange={handleChangeIngredientState}
+														isSoldOut={isSoldOut}
 													/>
-												</View>
-											))}
-										</Placeholder>
-									))}
+												))}
+											</WrapperIngredients>
+										</View>
+									)}
+									{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+										extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+											const currentState =
+												productCart.options[`id:${option.id}`] || {};
+											return (
+												<React.Fragment key={`popt_${option.id}`}>
+													{showOption(option) && (
+														<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
+															<ProductOption
+																option={option}
+																currentState={currentState}
+																error={errors[`id:${option.id}`]}>
+																<WrapperSubOption
+																	style={{
+																		backgroundColor: isError(option.id),
+																		borderRadius: 7.6
+																	}}>
+																	{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
+																		(suboption: any) => {
+																			const currentState =
+																				productCart.options[
+																					`id:${option.id}`
+																				]?.suboptions[
+																				`id:${suboption.id}`
+																				] || {};
+																			const balance =
+																				productCart.options[
+																					`id:${option.id}`
+																				]?.balance || 0;
+																			return (
+																				<ProductOptionSubOption
+																					key={suboption.id}
+																					isSoldOut={isSoldOut}
+																					onChange={
+																						handleChangeSuboptionState
+																					}
+																					balance={balance}
+																					option={option}
+																					suboption={suboption}
+																					state={currentState}
+																					disabled={
+																						isSoldOut ||
+																						maxProductQuantity <= 0
+																					}
+																					setIsScrollAvailable={setIsScrollAvailable}
+																					error={errors[`id:${option.id}`]}
+																				/>
+																			);
+																		},
+																	)}
+																</WrapperSubOption>
+															</ProductOption>
+														</View>
+													)}
+												</React.Fragment>
+											);
+										}),
+									)}
 								</>
 							) : (
-								<ProductEditions>
-									<ExtraOptionWrap
-										horizontal
-										showsHorizontalScrollIndicator={false}
-										style={{ marginBottom: 20 }}
-										contentContainerStyle={{ paddingHorizontal: 33 }}
-									>
-										<TouchableOpacity
-											key={`eopt_all_0`}
-											onPress={() => setSelectedOpt(0)}
-											style={[
-												styles.extraItem,
-												{
-													borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
-												},
-											]}>
-											<OText
-												color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-												size={selOpt == 0 ? 14 : 12}
-												weight={selOpt == 0 ? '600' : 'normal'}>
-												{t('ALL', 'All')}
-											</OText>
-										</TouchableOpacity>
-										{product?.ingredients.length > 0 && (
-											<TouchableOpacity
-												key={`eopt_all_00`}
-												onPress={() => setSelectedOpt(-1)}
-												style={[
-													styles.extraItem,
-													{
-														borderBottomColor:
-															selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-													},
-												]}>
-												<OText
-													color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-													size={selOpt == -1 ? 14 : 12}
-													weight={selOpt == -1 ? '600' : 'normal'}>
+								<>
+									{selOpt == -1 ? (
+										<View style={styles.optionContainer}>
+											<SectionTitle>
+												<OText size={16}>
 													{t('INGREDIENTS', 'Ingredients')}
 												</OText>
-											</TouchableOpacity>
-										)}
-										{product?.extras.map((extra: any) =>
-											<ExtraOptions key={extra.id} options={extra.options} />
-										)}
-									</ExtraOptionWrap>
-
-									{selOpt == 0 ? (
+											</SectionTitle>
+											<WrapperIngredients>
+												{product?.ingredients.map((ingredient: any) => (
+													<ProductIngredient
+														key={ingredient.id}
+														ingredient={ingredient}
+														state={
+															productCart.ingredients[`id:${ingredient.id}`]
+														}
+														onChange={handleChangeIngredientState}
+														isSoldOut={isSoldOut}
+													/>
+												))}
+											</WrapperIngredients>
+										</View>
+									) : (
 										<>
-											{product?.ingredients.length > 0 && (
-												<View style={styles.optionContainer}>
-													<SectionTitle>
-														<OText size={16}>
-															{t('INGREDIENTS', 'Ingredients')}
-														</OText>
-													</SectionTitle>
-													<WrapperIngredients>
-														{product?.ingredients.map((ingredient: any) => (
-															<ProductIngredient
-																key={ingredient.id}
-																ingredient={ingredient}
-																state={
-																	productCart.ingredients[`id:${ingredient.id}`]
-																}
-																onChange={handleChangeIngredientState}
-																isSoldOut={isSoldOut}
-															/>
-														))}
-													</WrapperIngredients>
-												</View>
-											)}
-											{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+											{product?.extras.map((extra: any) =>
 												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
-													const currentState =
-														productCart.options[`id:${option.id}`] || {};
-													return (
-														<React.Fragment key={`popt_${option.id}`}>
-															{showOption(option) && (
-																<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
-																	<ProductOption
-																		option={option}
-																		currentState={currentState}
-																		error={errors[`id:${option.id}`]}>
-																		<WrapperSubOption
-																			style={{
-																				backgroundColor: isError(option.id),
-																				borderRadius: 7.6
-																			}}>
-																			{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																				(suboption: any) => {
-																					const currentState =
-																						productCart.options[
-																							`id:${option.id}`
-																						]?.suboptions[
-																						`id:${suboption.id}`
-																						] || {};
-																					const balance =
-																						productCart.options[
-																							`id:${option.id}`
-																						]?.balance || 0;
-																					return (
-																						<ProductOptionSubOption
-																							key={suboption.id}
-																							isSoldOut={isSoldOut}
-																							onChange={
-																								handleChangeSuboptionState
-																							}
-																							balance={balance}
-																							option={option}
-																							suboption={suboption}
-																							state={currentState}
-																							disabled={
-																								isSoldOut ||
-																								maxProductQuantity <= 0
-																							}
-																							setIsScrollAvailable={setIsScrollAvailable}
-																							error={errors[`id:${option.id}`]}
-																						/>
-																					);
-																				},
-																			)}
-																		</WrapperSubOption>
-																	</ProductOption>
-																</View>
-															)}
-														</React.Fragment>
-													);
+													if (
+														option.id == selOpt ||
+														(hasRespected(
+															extra.options,
+															option.respect_to,
+														) &&
+															showOption(option))
+													) {
+														const currentState =
+															productCart.options[`id:${option.id}`] || {};
+														return (
+															<React.Fragment key={option.id}>
+																{showOption(option) && (
+																	<View style={styles.optionContainer}>
+																		<ProductOption
+																			option={option}
+																			currentState={currentState}
+																			error={errors[`id:${option.id}`]}>
+																			<WrapperSubOption
+																				style={{
+																					backgroundColor: isError(
+																						option.id,
+																					),
+																				}}>
+																				{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
+																					(suboption: any) => {
+																						const currentState =
+																							productCart.options[
+																								`id:${option.id}`
+																							]?.suboptions[
+																							`id:${suboption.id}`
+																							] || {};
+																						const balance =
+																							productCart.options[
+																								`id:${option.id}`
+																							]?.balance || 0;
+																						return (
+																							<ProductOptionSubOption
+																								key={suboption.id}
+																								onChange={
+																									handleChangeSuboptionState
+																								}
+																								balance={balance}
+																								option={option}
+																								suboption={suboption}
+																								state={currentState}
+																								disabled={
+																									isSoldOut ||
+																									maxProductQuantity <= 0
+																								}
+																							/>
+																						);
+																					},
+																				)}
+																			</WrapperSubOption>
+																		</ProductOption>
+																	</View>
+																)}
+															</React.Fragment>
+														);
+													}
 												}),
 											)}
 										</>
-									) : (
-										<>
-											{selOpt == -1 ? (
-												<View style={styles.optionContainer}>
-													<SectionTitle>
-														<OText size={16}>
-															{t('INGREDIENTS', 'Ingredients')}
-														</OText>
-													</SectionTitle>
-													<WrapperIngredients>
-														{product?.ingredients.map((ingredient: any) => (
-															<ProductIngredient
-																key={ingredient.id}
-																ingredient={ingredient}
-																state={
-																	productCart.ingredients[`id:${ingredient.id}`]
-																}
-																onChange={handleChangeIngredientState}
-																isSoldOut={isSoldOut}
-															/>
-														))}
-													</WrapperIngredients>
-												</View>
-											) : (
-												<>
-													{product?.extras.map((extra: any) =>
-														extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
-															if (
-																option.id == selOpt ||
-																(hasRespected(
-																	extra.options,
-																	option.respect_to,
-																) &&
-																	showOption(option))
-															) {
-																const currentState =
-																	productCart.options[`id:${option.id}`] || {};
-																return (
-																	<React.Fragment key={option.id}>
-																		{showOption(option) && (
-																			<View style={styles.optionContainer}>
-																				<ProductOption
-																					option={option}
-																					currentState={currentState}
-																					error={errors[`id:${option.id}`]}>
-																					<WrapperSubOption
-																						style={{
-																							backgroundColor: isError(
-																								option.id,
-																							),
-																						}}>
-																						{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																							(suboption: any) => {
-																								const currentState =
-																									productCart.options[
-																										`id:${option.id}`
-																									]?.suboptions[
-																									`id:${suboption.id}`
-																									] || {};
-																								const balance =
-																									productCart.options[
-																										`id:${option.id}`
-																									]?.balance || 0;
-																								return (
-																									<ProductOptionSubOption
-																										key={suboption.id}
-																										onChange={
-																											handleChangeSuboptionState
-																										}
-																										balance={balance}
-																										option={option}
-																										suboption={suboption}
-																										state={currentState}
-																										disabled={
-																											isSoldOut ||
-																											maxProductQuantity <= 0
-																										}
-																									/>
-																								);
-																							},
-																						)}
-																					</WrapperSubOption>
-																				</ProductOption>
-																			</View>
-																		)}
-																	</React.Fragment>
-																);
-															}
-														}),
-													)}
-												</>
-											)}
-										</>
-									)}
-									{!product?.hide_special_instructions && (
-										<ProductComment>
-											<SectionTitle>
-												<OText size={16} weight={'600'} lineHeight={24}>
-													{t('SPECIAL_COMMENT', 'Special comment')}
-												</OText>
-											</SectionTitle>
-											<OInput
-												multiline
-												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-												value={productCart.comment}
-												onChange={(val: string) =>
-													handleChangeCommentState({ target: { value: val } })
-												}
-												isDisabled={
-													!(productCart && !isSoldOut && maxProductQuantity)
-												}
-												style={styles.comment}
-											/>
-										</ProductComment>
 									)}
-								</ProductEditions>
+								</>
 							)}
-						</WrapContent>
-					</View>
-				)}
-				{!!error && error.length > 0 && (
-					<NotFoundSource content={error[0]?.message || error[0]} />
-				)}
-			</ScrollView>
+							{!product?.hide_special_instructions && (
+								<ProductComment>
+									<SectionTitle>
+										<OText size={16} weight={'600'} lineHeight={24}>
+											{t('SPECIAL_COMMENT', 'Special comment')}
+										</OText>
+									</SectionTitle>
+									<OInput
+										multiline
+										placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+										value={productCart.comment}
+										onChange={(val: string) =>
+											handleChangeCommentState({ target: { value: val } })
+										}
+										isDisabled={
+											!(productCart && !isSoldOut && maxProductQuantity)
+										}
+										style={styles.comment}
+									/>
+								</ProductComment>
+							)}
+						</ProductEditions>
+					)}
+					{!!error && error.length > 0 && (
+						<NotFoundSource content={error[0]?.message || error[0]} />
+					)}
+				</ScrollView>
+			)}
 			{!loading && !error && product && (
 				<ProductActions ios={Platform?.OS === 'ios'}>
 					<View>

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

@@ -49,7 +49,7 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
+  padding: 0 40px;
 `
 
 export const SectionTitle = styled.View`
@@ -99,4 +99,8 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
+  padding: 26px 40px;
+  position: relative;
+  background-color: white;
+  z-index: 100;
 `

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

@@ -31,7 +31,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct
+		handleFavoriteProduct,
+		enableIntersection
 	} = props;
 
 	const theme = useTheme();
@@ -89,7 +90,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [stateConfig] = useConfig();
 	const [{ parsePrice, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
-	const [isIntersectionObserver, setIsIntersectionObserver] = useState(false)
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 	const editMode = typeof product?.code !== 'undefined';
 
 	const removeToBalance = editMode ? product?.quantity : 0;

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

@@ -213,6 +213,7 @@ export interface BusinessControllerParams {
 	handleFavoriteBusiness?: any,
 	setFavoriteIds?: any;
 	handleUpdateBusinessList?: any;
+	enableIntersection?: boolean;
 }
 export interface BusinessProductsListingParams {
 	navigation?: any;
@@ -289,15 +290,16 @@ export interface BusinessProductsListParams {
 	handleUpdateProducts?: any
 }
 export interface SingleProductCardParams {
-	businessId: any,
+	businessId: any;
 	product: any;
 	isSoldOut: boolean;
 	onProductClick: any;
 	productAddedToCartLength: number;
-	style?: ViewStyle,
-	categoryState?: any,
-	handleFavoriteProduct?: any,
-	handleUpdateProducts?: any
+	style?: ViewStyle;
+	categoryState?: any;
+	handleFavoriteProduct?: any;
+	handleUpdateProducts?: any;
+	enableIntersection?: boolean;
 }
 export interface BusinessInformationParams {
 	navigation?: any,