ordering-ui-react-native 0.17.98 → 0.17.99-release

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { ActivityIndicator, View } from 'react-native'
 import {
   Cart,
@@ -20,12 +20,11 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
+import { OInput, OModal, OText, OAlert } from '../shared';
 import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
-import { OAlert } from '../../../../../src/components/shared'
 import { MomentOption } from '../MomentOption';
 
 const OrderSummaryUI = (props: any) => {
@@ -46,6 +45,8 @@ const OrderSummaryUI = (props: any) => {
     preorderMaximumDays,
     preorderMinimumDays,
     cateringTypes,
+    hideDeliveryFee,
+    loyaltyRewardRate,
     maxDate
   } = props;
 
@@ -55,9 +56,34 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
+  const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
+  const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
+
+  const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null || !cart?.taxes) {
+      return cart?.business?.tax_type === 1 ? cart?.tax : 0
+    } else {
+      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const clearAmount = (value: any) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
+  const loyaltyRewardValue = clearAmount((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate)
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -75,41 +101,20 @@ const OrderSummaryUI = (props: any) => {
     })
   }
 
-  const getIncludedTaxes = () => {
-    if (cart?.taxes === null || !cart?.taxes) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
-    } else {
-      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
-      }, 0)
-    }
-  }
-
   const getIncludedTaxesDiscounts = () => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
-  }
-
-  const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
-
-  const walletName: any = {
-    cash: {
-      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-    },
-    credit_point: {
-      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-    }
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   return (
@@ -165,9 +170,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -205,8 +210,8 @@ const OrderSummaryUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={fee?.id + i}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -231,9 +236,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -241,10 +246,10 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+              {orderState?.options?.type === 1 && !hideDeliveryFee && (
                 <OSTable>
                   <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
+                  <OText size={12}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
                 </OSTable>
               )}
               {
@@ -258,9 +263,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -310,9 +315,16 @@ const OrderSummaryUI = (props: any) => {
                       {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>
+                  {!!loyaltyRewardValue && (
+                    <OSTable style={{ justifyContent: 'flex-end' }}>
+                      <OText size={12} color={theme.colors.textNormal}>
+                        {t('REWARD_LOYALTY_POINT', 'Reward :amount: on loyalty points').replace(':amount:', loyaltyRewardValue)}
+                      </OText>
+                    </OSTable>
+                  )}
                 </View>
               )}
-              {cart?.business_id && cart?.status !== 2 && (
+              {cart?.business_id && cart?.status !== 2 && !hideCartComments && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
                     <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
@@ -330,6 +342,7 @@ const OrderSummaryUI = (props: any) => {
                           marginTop: 10,
                           borderRadius: 8
                         }}
+                        forwardRef={commentRef}
                         multiline
                       />
                       {commentState?.loading && (
@@ -375,14 +388,6 @@ const OrderSummaryUI = (props: any) => {
               products={cart?.products}
             />
           </OModal>
-          <OAlert
-            open={confirm.open}
-            title={confirm.title}
-            content={confirm.content}
-            onAccept={confirm.handleOnAccept}
-            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-          />
         </>
       )}
     </OSContainer>

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

@@ -31,14 +31,12 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
-	const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
-	const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
+
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
-			label: orderTypeTitle(type.value) || t(type.content, type.content),
-			description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+			label: t(type.content, type.content),
+			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
 		}
 	})
 
@@ -102,6 +100,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						style={{ paddingBottom: 0 }}
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
 						noMargin
 					/>
 					{
@@ -115,7 +114,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
 													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
 													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-														<OText size={10} lineHeight={15} color={theme.colors.white}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
 														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -23,21 +23,21 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
     },
   });
 
-  const ProductList = ({ style }: any) => {
+  const ProductList = () => {
     return (
       <>
         {products?.filter((product : any) => product?.business?.available)?.map((product: any) => (
-            <SingleProductCard
-              key={product?.id}
-              isProductId
-              isSoldOut={(product.inventoried && !product.quantity)}
-              product={product}
-              businessId={product?.business?.id}
-              onProductClick={onProductClick}
-              style={style}
-              productAddedToCartLength={0}
-              handleUpdateProducts={handleUpdateProducts}
-            />
+          <SingleProductCard
+            key={product?.id}
+            isProductId
+            isSoldOut={(product.inventoried && !product.quantity)}
+            product={product}
+            businessId={product?.business?.id}
+            onProductClick={onProductClick}
+            style={{ width: windowWidth - (products?.length > 1 ? 120 : 80), marginRight: 20 }}
+            productAddedToCartLength={0}
+            handleUpdateProducts={handleUpdateProducts}
+          />
         ))}
       </>
     )
@@ -45,7 +45,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
+        <ProductList />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />

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

@@ -10,6 +10,7 @@ import { PreviousProductsOrdered } from './PreviousProductsOrdered'
 import { OptionTitle, NoOrdersWrapper } from './styles'
 import { OrdersOptionParams } from '../../types'
 import { _setStoreData } from '../../providers/StoreUtil';
+import { NotFoundSource } from '../NotFoundSource';
 import {
 	Placeholder,
 	PlaceholderLine,
@@ -17,7 +18,7 @@ import {
 } from "rn-placeholder";
 
 import { View, ScrollView } from 'react-native'
-import { getOrderStatus } from '../../utils'
+import { getOrderStatus, flatArray } from '../../utils'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -50,7 +51,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businesses,
 		businessPaginationProps,
 		handleUpdateProducts,
-		handleUpdateBusinesses
+		handleUpdateBusinesses,
+		businessId
 	} = props
 
 	const theme = useTheme();
@@ -98,7 +100,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			return false
 		})
 		setOrders(orders)
-	}, [_orders?.length])
+	}, [JSON.stringify(_orders)])
 
 	const onProductClick = (product: any) => {
 		if (product?.product_id && product?.category_id && product?.businessId &&
@@ -120,6 +122,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}
 
 	useEffect(() => {
+		if (reorderState?.loading) return
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
 			if (reorderState?.result?.business_id) {
@@ -127,21 +130,39 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 				navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
 			}
 		}
-		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+		if (!reorderState?.error && !reorderState.loading && reorderState?.result?.business_id) {
 			const cartProducts = carts?.[_businessId]?.products
-			const available = cartProducts.every((product: any) => product.valid === true)
-			const orderProducts = orders.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
 
-			if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
-				onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+			const available = cartProducts.every((product: any) => product.valid)
+			const orderProducts = orders.find(
+				(order: any) => Array.isArray(order?.id)
+					? order?.id?.includes(reorderState?.result?.orderId)
+					: order?.id === reorderState?.result?.orderId
+			)?.products
+
+			const productsFlatten = orderProducts?.length && flatArray(orderProducts)?.filter(product => product?.order_id === reorderState?.result?.orderId)
+
+			if (available && reorderState?.result?.uuid && (cartProducts?.length === productsFlatten?.length)) {
+				const multiOrders = flatArray(orderProducts)?.map(product => product.order_id)
+				const params = multiOrders?.length > 1
+					? { screen: 'MultiCheckout', checkCarts: true }
+					: { cartUuid: reorderState?.result.uuid }
+
+				onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', params)
 			} else {
 				_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
-				cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+				cartProducts?.length !== productsFlatten?.length && _setStoreData('already-removed', JSON.stringify('removed'))
 				navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
 			}
 		}
 	}, [reorderState])
 
+	useEffect(() => {
+		if (reorderState?.error) {
+			showToast(ToastType.Error, reorderState?.result)
+		}
+	}, [reorderState])
+
 	useFocusEffect(
 		React.useCallback(() => {
 			if (!businessesSearchList) {
@@ -166,6 +187,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
+		} else {
+			setOrdersLength && setOrdersLength({ ...ordersLength, preordersLength: updateOrders?.length })
 		}
 	}, [_orders, activeOrders, preOrders])
 
@@ -178,21 +201,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	return (
 		<>
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && ordersLength?.preordersLength === 0 && !activeOrders && !preOrders && (
 				<NoOrdersWrapper>
-					<OText size={14} numberOfLines={1}>
-						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
-					</OText>
-					<OButton
-						text={t('ORDER_NOW', 'Order now')}
-						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
-						textStyle={{ color: 'white', fontSize: 14 }}
-						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
+					<NotFoundSource
+						hideImage
+						btnStyle={{ borderRadius: 8 }}
+						content={t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
+						btnTitle={t('ORDER_NOW', 'Order now')}
+						onClickButton={() => onNavigationRedirect && (businessId ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList'))}
 					/>
-
 				</NoOrdersWrapper>
 			)}
-			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (
+			{((ordersLength?.activeOrdersLength > 0 && activeOrders) ||
+				(ordersLength?.previousOrdersLength > 0 && !activeOrders && !preOrders) ||
+				(ordersLength?.preordersLength > 0 && preOrders)
+			) && (
 				<>
 					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
 						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>

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

@@ -10,5 +10,5 @@ export const OptionTitle = styled.View`
 export const NoOrdersWrapper = styled.View`
 	flex-direction: column;
 	align-items: center;
-	margin-top: 50px;
+	margin-top: 60px;
 `

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;
 
@@ -41,10 +44,11 @@ const PageBannerUI = (props: any) => {
   })
 
   const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
+		navigation.push(route, params)
 	}
 
-  const handleGoToPage = (action: any) => {
+  const handleGoToPage = (item: any) => {
+    const action = item.action
     if (!action?.url) return
     let slug
     if (action.type === 'business') {
@@ -59,15 +63,22 @@ const PageBannerUI = (props: any) => {
 				businessSlug: slug,
 				businessId: action.business_id,
         categoryId: action.category_id,
-        productId: action.product_id
+        productId: action.product_id,
+        isRedirect: 'business',
+        business: {
+          store: slug
+        }
 			})
     }
+    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)}
+        activeOpacity={1}
+        onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
           <FastImage
@@ -80,6 +91,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 ? (
@@ -97,37 +126,44 @@ const PageBannerUI = (props: any) => {
         <>
           {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
             <PageBannerWrapper>
-              <TouchableOpacity
-                style={[styles.swiperButton, { left: 25 }]}
-                onPress={() => carouselRef.current.snapToPrev()}
-              >
-                <IconAntDesign
-                  name="caretleft"
-                  color={theme.colors.white}
-                  size={13}
-                />
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.swiperButton, { right: 25 }]}
-                onPress={() => carouselRef.current.snapToNext()}
-              >
-                <IconAntDesign
-                  name="caretright"
-                  color={theme.colors.white}
-                  size={13}
-                />
-              </TouchableOpacity>
+              {pageBannerState.banner?.items.length > 1 && (
+                <>
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    style={[styles.swiperButton, { left: 25 }]}
+                    onPress={() => carouselRef.current.snapToPrev()}
+                  >
+                    <IconAntDesign
+                      name="caretleft"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    style={[styles.swiperButton, { right: 25 }]}
+                    onPress={() => carouselRef.current.snapToNext()}
+                  >
+                    <IconAntDesign
+                      name="caretright"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </TouchableOpacity>
+                </>
+              )}
               <Carousel
                 ref={carouselRef}
                 loop={pageBannerState.banner?.items.length > 1}
                 data={pageBannerState.banner?.items}
                 renderItem={renderItem}
-                sliderWidth={windowWidth - 80}
-                itemWidth={windowWidth - 80}
+                sliderWidth={windowWidth}
+                itemWidth={windowWidth}
                 inactiveSlideScale={1}
                 pagingEnabled
                 removeClippedSubviews={false}
                 inactiveSlideOpacity={1}
+                onSnapToItem={updateIndex}
               />
             </PageBannerWrapper>
           )}

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

@@ -1,10 +1,7 @@
 import styled from 'styled-components/native'
 
 export const PageBannerWrapper = styled.View`
-  margin-horizontal: 40px;
-  border-radius: 8px;
   overflow: hidden;
-  margin-vertical: 30px;
   position: relative;
   flex-direction: row;
   align-items: center;