ordering-ui-react-native 0.18.32 → 0.18.34

package/package.json

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

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react'
 import moment from 'moment'
-import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
+import { NewOrderNotification as NewOrderNotificationController, useApi, useEvent, useLanguage, useSession } from 'ordering-components/native'
+import React, { useEffect, useState } from 'react'
+import { Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
 import { useTheme } from 'styled-components/native'
-import { useEvent, useLanguage, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
 
-import { OText, OIcon } from '../shared'
-import { NotificationContainer } from './styles'
 import { useLocation } from '../../hooks/useLocation'
+import { OIcon, OText } from '../shared'
+import { NotificationContainer } from './styles'
 
 Sound.setCategory('Playback', true)
 Sound.setMode('Default')
@@ -82,14 +82,14 @@ const NewOrderNotificationUI = (props: any) => {
       } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
-      if (assignedSecondsDiff < 5 && !isBusinessApp) {
+      if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
         handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
     if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound({
       evt: evtType,
-      orderId: value?.order_id
+      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.id
     })
   }
 

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

@@ -21,7 +21,6 @@ import {
 	BusinessInfo,
 	BusinessInfoItem,
 	WrapReviews,
-	WrapBusinessInfo,
 	TitleWrapper,
 	RibbonBox,
 	SocialListWrapper
@@ -101,11 +100,11 @@ export const BusinessBasicInformation = (
 			borderRadius: 3,
 			borderColor: theme.colors.border,
 			borderWidth: isChewLayout ? 0 : 1,
-			width: 20,
-			height: 20,
+			width: 30,
+			height: 30,
 			justifyContent: 'center',
 			alignItems: 'center',
-			marginRight: 5,
+			marginRight: 10,
 			marginBottom: 7
 		},
 		tiktokIcon: {
@@ -166,7 +165,7 @@ export const BusinessBasicInformation = (
 				<MaterialComIcon
 					name={iconTitle}
 					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
-					size={isChewLayout ? 18 : 14}
+					size={isChewLayout ? 25 : 22}
 				/>
 			</TouchableOpacity>
 		)
@@ -291,11 +290,6 @@ export const BusinessBasicInformation = (
 					})}
 					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
 				>
-					{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
-						<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-							<OIcon src={theme.images.general.info} width={24} />
-						</WrapBusinessInfo>
-					)}
 					{isChewLayout && !loading && (
 						<View style={styles.headerChewStyle}>
 							<OText size={24} weight={'600'} mBottom={-5}>
@@ -317,21 +311,31 @@ export const BusinessBasicInformation = (
 				{!hideLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
-							logo || businessState?.business?.logo || typeof theme.images.dummies.businessLogo === 'string' ?
-								<FastImage
-									style={styles.logoStyle}
-									source={{
-										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit') || theme.images.dummies.businessLogo,
-										priority: FastImage.priority.high,
-										cache: FastImage.cacheControl.web
-									}}
-									resizeMode={FastImage.resizeMode.contain}
-								/>
-								:
-								<OIcon
-									src={theme?.images?.dummies?.businessLogo}
-									style={styles.logoStyle}
-								/>
+							<>
+								{loading ? (
+									<View style={styles.logoStyle}>
+										<Placeholder Animation={Fade}>
+											<PlaceholderLine height={72} style={{ borderRadius: 8 }} />
+										</Placeholder>
+									</View>
+								) : (
+									logo || businessState?.business?.logo || typeof theme.images.dummies.businessLogo === 'string' ?
+										<FastImage
+											style={styles.logoStyle}
+											source={{
+												uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit') || theme.images.dummies.businessLogo,
+												priority: FastImage.priority.high,
+												cache: FastImage.cacheControl.web
+											}}
+											resizeMode={FastImage.resizeMode.contain}
+										/>
+										:
+										<OIcon
+											src={theme?.images?.dummies?.businessLogo}
+											style={styles.logoStyle}
+										/>
+								)}
+							</>
 						)}
 					</BusinessLogo>
 				)}
@@ -453,13 +457,28 @@ export const BusinessBasicInformation = (
 										</>
 									)}
 									{!hideReviewsPopup && (
-										<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+										<>
+											<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+												<OText
+													color={theme.colors.primary}
+													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+													size={12}
+												>
+													{t('REVIEWS', 'Reviews')}
+												</OText>
+											</TouchableOpacity>
+											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+										</>
+									)}
+
+									{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
+										<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
 											<OText
 												color={theme.colors.primary}
 												style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
 												size={12}
 											>
-												{t('REVIEWS', 'Reviews')}
+												{t('INFORMATION', 'Information')}
 											</OText>
 										</TouchableOpacity>
 									)}

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

@@ -36,11 +36,6 @@ export const WrapReviews = styled.View`
   align-items: center;
   justify-content: flex-start;
 `;
-export const WrapBusinessInfo = styled.TouchableOpacity`
-  position: absolute;
-  top: 16px;
-  end: 39px;
-`;
 
 export const TitleWrapper = styled.View`
   width: 100%;
@@ -52,6 +47,7 @@ export const RibbonBox = styled.View`
   padding: 2px 8px;
   max-width: 180px;
   align-self: flex-start;
+  margin-bottom: 5px;
 
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -6,33 +7,29 @@ import {
 	useLanguage,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+
+import { OText } from '../shared';
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
-	BusinessState,
 	BusinessLogo,
-	Reviews,
 	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 	const { business, handleClick, isBusinessOpen } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
+
+	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
-
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 25,
@@ -79,23 +76,14 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			justifyContent: 'flex-start',
 			width: '100%',
 		},
+		productStyle: {
+			height: 40,
+			width: 40
+		}
 	});
 
-	const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
 	const { width } = useWindowDimensions();
 
-	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
-		const _types: any = [];
-		types.forEach((type) => {
-			if (business[type]) {
-				_types.push(t(type.toUpperCase(), type));
-			}
-		});
-		return _types.join(', ');
-	};
-
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
 			{business?.ribbon?.enabled && (
@@ -120,10 +108,13 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			)}
 			<BusinessHero>
 				<BusinessLogo>
-					<OIcon
-						url={optimizeImage(business?.logo, 'h_100,c_limit')}
-						width={40}
-						height={40}
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(business?.logo, 'h_100,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
 					/>
 				</BusinessLogo>
 				<BusinessContent style={{ width: width * 0.6 }}>
@@ -131,23 +122,7 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						<OText size={12} ellipsizeMode={'tail'} numberOfLines={2}>
 							{business?.name}
 						</OText>
-						{/* {business?.reviews?.total > 0 && (
-              <Reviews>
-                <IconAntDesign
-                  name="star"
-                  color={theme.colors.primary}
-                  size={16}
-                  style={styles.starIcon}
-                />
-                <OText>
-                  {parseNumber(business?.reviews?.total, { separator: '.' })}
-                </OText>
-              </Reviews>
-            )} */}
 					</BusinessInfo>
-					{/* <BusinessCategory>
-            <OText>{getBusinessType()}</OText>
-          </BusinessCategory> */}
 					<Metadata>
 						{!isBusinessOpen ? (
 							<View style={styles.closed}>
@@ -157,7 +132,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 							</View>
 						) : (
 							<View style={styles.bullet}>
-								{/* <MaterialComIcon name="alarm" size={16} /> */}
 								<OText size={10} color={theme.colors.textSecondary}>
 									{t('DELIVERY_FEE', 'Delivery Fee')}
 								</OText>
@@ -186,15 +160,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						)}
 					</Metadata>
 				</BusinessContent>
-				{/* <BusinessState>
-          {!business?.open && (
-            <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
-            </View>
-          )}
-        </BusinessState> */}
 			</BusinessHero>
 		</Card>
 	);

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

@@ -74,23 +74,6 @@ export const BusinessItemAccordion = (props: any) => {
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
-						{/* {orderState?.options?.type === 1 ? (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
-              </View>
-            ) : (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
-              </View>
-            )} */}
 						<View style={{ flexDirection: 'row' }}>
 							{props.onNavigationRedirect && !isClosed && (
 								<>
@@ -99,7 +82,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</TouchableOpacity>
 								</>
 							)}
-							{!isCartPending && !isClosed && (
+							{!isCartPending && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<OAlert

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

@@ -1,30 +1,26 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastType } from 'ordering-components/native'
-import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
+import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
 import { OButton, OModal, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
-import { BusinessController } from '../BusinessController'
 import { NotFoundSource } from '../NotFoundSource'
 import { SingleProductCard } from '../SingleProductCard'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import {
   SearchWrapper,
-  WrapHeader,
   ProductsList,
   SingleBusinessSearch,
   BusinessInfo,
   BusinessInfoItem,
   Metadata,
   SingleBusinessContainer,
-  LoadMoreBusinessContainer,
   TagsContainer,
   SortContainer,
   BrandContainer,
   BrandItem,
   PriceFilterWrapper,
-  OptionTitle,
   BContainer,
   WrapperButtons
 } from './styles'
@@ -32,10 +28,8 @@ import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
-import { MyOrders } from '../MyOrders'
 import { useIsFocused } from '@react-navigation/native';
 import { MaxSectionItem } from './MaxSectionItem'
-import { BusinessControllerSkeletons } from './BusinessControllerSkeletons'
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
@@ -43,17 +37,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     onBusinessClick,
     handleChangeTermValue,
     termValue,
-    paginationProps,
     handleSearchbusinessAndProducts,
     handleChangeFilters,
     filters,
     businessTypes,
     setFilters,
     brandList,
-    onNavigationRedirect,
-    handleUpdateBusinessList,
-    handleUpdateProducts,
-    brandId
+    handleUpdateProducts
   } = props
 
   const screenHeight = Dimensions.get('window').height;
@@ -259,63 +249,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </View>
         )
       }
-      {businessesSearchList.businesses?.length > 0 && termValue?.length === 0 && (
-        <MyOrders
-          hideOrders
-          businessesSearchList={businessesSearchList}
-          onNavigationRedirect={onNavigationRedirect}
-          BusinessControllerSkeletons={BusinessControllerSkeletons}
-          businessPaginationProps={paginationProps}
-          franchiseId={brandId}
-          hideBackBtn
-          titleStyle={{
-            paddingHorizontal: 0,
-            marginTop: 0,
-            marginLeft: 0
-          }}
-        />
-      )}
-      {businessesSearchList.businesses?.length > 0 && (
-        <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
-          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
-            {t('BUSINESSES', 'Businesses')}
-          </OText>
-        </OptionTitle>
-      )}
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
-          <View
-            key={business.id}
-            style={{
-              width: screenWidth - 120,
-              marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0
-            }}
-          >
-            <BusinessController
-              business={business}
-              isBusinessOpen={business.open}
-              enableIntersection={false}
-              handleCustomClick={() => onBusinessClick(business)}
-              handleUpdateBusinessList={handleUpdateBusinessList}
-              orderType={orderState?.options?.type}
-            />
-          </View>
-        ))}
-        {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
-          <LoadMoreBusinessContainer>
-            <OButton
-              bgColor='transparent'
-              borderColor={theme.colors.primary}
-              onClick={() => handleSearchbusinessAndProducts()}
-              text={t('LOAD_MORE_BUSINESS', 'Load more business')}
-              textStyle={{ color: theme.colors.primary }}
-            />
-          </LoadMoreBusinessContainer>
-        )}
-        {businessesSearchList.loading && (
-          <BusinessControllerSkeletons paginationProps={paginationProps} />
-        )}
-      </ScrollView>
       <ProductsList>
         {businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0).map((business: any) => (
           <SingleBusinessSearch key={`card-${business?.id}`}>

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

@@ -4,11 +4,6 @@ export const BContainer = styled.View`
   padding: 20px 40px;
 `
 
-export const WrapHeader = styled.View`
-  width: 100%;
-	padding-vertical: 20px;
-`
-
 export const SearchWrapper = styled.View`
 
 `
@@ -53,12 +48,6 @@ export const SingleBusinessContainer = styled.View`
   justify-content: space-between;
 `
 
-export const LoadMoreBusinessContainer = styled.View`
-  align-items: center;
-  justify-content: center;
-  margin-left: 20px;
-`
-
 export const TagsContainer = styled.View`
   padding-bottom: 10px;
 `
@@ -80,13 +69,6 @@ export const PriceFilterWrapper = styled.View`
   margin-bottom: 20px;
 `
 
-export const OptionTitle = styled.View`
-	margin-top: 24px;
-	${(props: any) => props.titleContent && css`
-		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
-	`}
-`
-
 export const WrapperButtons = styled.View`
   flex-direction: row;
   width: 100%;

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

@@ -224,7 +224,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	useEffect(() => {
 		if (!businessesList?.loading) {
-			const fb = businessesList.businesses.filter((b) => b?.featured === true && b?.open);
+			const fb = businessesList.businesses.filter((b) => b?.featured && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
 				ary.push(fb.splice(0, 2));

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

@@ -359,10 +359,10 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && !hideDeliveryFee && (
+            {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
               </OSTable>
             )}
             {
@@ -386,12 +386,6 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && cart?.delivery_price_with_discount >= 0 && !hideDeliveryFee && isChewLayout && (
-              <OSTable>
-                <OText size={12} lineHeight={18}>{t('DELIVERY_FEE_AFTER_DISCOUNT', 'Delivery Fee After Discount')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
-              </OSTable>
-            )}
             {cart?.driver_tip > 0 && !hideDriverTip && (
               <OSTable>
                 <OText size={12} lineHeight={18}>

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

@@ -98,7 +98,7 @@ const MultiCheckoutUI = (props: any) => {
 
   const creditPointPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
   const businessIds = openCarts.map((cart: any) => cart.business_id)
-  const loyalBusinessIds = creditPointPlan?.businesses?.filter((b: any) => b.accumulates).map((item: any) => item.business_id)
+  const loyalBusinessIds = creditPointPlan?.businesses?.filter((b: any) => b.accumulates).map((item: any) => item.business_id) ?? []
   const creditPointPlanOnBusiness = businessIds.every((bid: any) => loyalBusinessIds.includes(bid)) && creditPointPlan
 
   const loyaltyRewardValue = creditPointPlanOnBusiness?.accumulation_rate

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

@@ -46,6 +46,7 @@ const OrderSummaryUI = (props: any) => {
     preorderMaximumDays,
     preorderMinimumDays,
     cateringTypes,
+    hideDeliveryFee,
     loyaltyRewardRate,
     maxDate
   } = props;
@@ -243,10 +244,10 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+              {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !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>
               )}
               {

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

@@ -63,7 +63,11 @@ 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)
@@ -121,33 +125,37 @@ 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
+                    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>
+                </>
+              )}
               <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}

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;

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

@@ -242,7 +242,7 @@ const ProfileListUI = (props: ProfileParams) => {
 						<ListItem onPress={() => navigation.navigate('Notifications', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 							<NotificationBadge style={{ borderRadius: 100 / 2 }} />
 							<Ionicons name='notifications-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
-							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('NOTIFICATIONS', 'Notifications')}
+							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MARKETING_NOTIFICATIONS', 'Marketing notifications')}
 							</OText>
 							<NotificationsWrapper>
 								<ToggleSwitch