ordering-ui-react-native 0.15.71 → 0.15.72

package/package.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
 import { AddressListContainer, AddressItem } from './styles'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
 import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
@@ -27,7 +27,8 @@ const AddressListUI = (props: AddressListParams) => {
 		actionStatus,
 		isFromBusinesses,
 		isFromProductsList,
-		afterSignup
+		afterSignup,
+		loadAddresses
 	} = props
 
 	const theme = useTheme();
@@ -35,6 +36,7 @@ const AddressListUI = (props: AddressListParams) => {
 	const [orderState] = useOrder()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
+	const [refreshing] = useState(false);
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
 
@@ -121,6 +123,12 @@ const AddressListUI = (props: AddressListParams) => {
 		})
 	}
 
+	const handleOnRefresh = () => {
+		if (!addressList.loading) {
+			loadAddresses();
+		}
+	}
+
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
 
@@ -135,22 +143,26 @@ const AddressListUI = (props: AddressListParams) => {
 	}, [])
 
 	return (
-		<Container noPadding>
+		<Container 
+			noPadding
+			refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+		>
+			{isProfile && (
+				<NavBar
+					title={t('SAVED_PLACES', 'My saved places')}
+					titleAlign={'center'}
+					onActionLeft={goToBack}
+					showCall={false}
+					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20 }}
+				/>
+			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
 				<AddressListContainer>
-					{isProfile && (
-						<NavBar
-							title={t('SAVED_PLACES', 'My saved places')}
-							titleAlign={'center'}
-							onActionLeft={() => goToBack()}
-							showCall={false}
-							btnStyle={{ paddingLeft: 0 }}
-							paddingTop={0}
-							isVertical
-							titleWrapStyle={{ paddingHorizontal: 0 }}
-							titleStyle={{ marginLeft: 0, marginRight: 0 }}
-						/>
-					)}
 					{
 						route &&
 						(
@@ -172,7 +184,7 @@ const AddressListUI = (props: AddressListParams) => {
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>
 						)}
-					{addressList.loading && (
+					{addressList.loading && addressList?.addresses?.length === 0 && (
 						<>
 							{[...Array(5)].map((item, i) => (
 								<Placeholder key={i} style={{ paddingVertical: 20 }} Animation={Fade}>

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

@@ -32,7 +32,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setSubcategoriesSelected,
     subcategoriesSelected,
     onClickCategory,
-    lazyLoadProductsRecommended
+    lazyLoadProductsRecommended,
+    isFiltMode
   } = props;
 
   const [, t] = useLanguage();
@@ -48,24 +49,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setCategoriesLayout(_categoriesLayout)
   }
 
-  const onClickSubcategory = (subCategory : any, parentCategory : any) => {
+  const onClickSubcategory = (subCategory: any, parentCategory: any) => {
     if (parentCategory && lazyLoadProductsRecommended) {
       onClickCategory(parentCategory)
     }
     if (!subCategory) {
-      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => _subcategory?.parent_category_id !== parentCategory?.id))
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => _subcategory?.parent_category_id !== parentCategory?.id))
       return
     }
-    const categoryFounded = subcategoriesSelected.find((_subcategory : any) => subCategory?.id === _subcategory?.id)
+    const categoryFounded = subcategoriesSelected.find((_subcategory: any) => subCategory?.id === _subcategory?.id)
     if (categoryFounded) {
-      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => subCategory?.id !== _subcategory?.id))
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id))
     } else {
       setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
     }
   }
 
-  const SubcategoriesComponent = ({ category } : any) => {
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory : any) => category?.id === subcategory?.parent_category_id)
+  const SubcategoriesComponent = ({ category }: any) => {
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
 
     return (
       <SubCategoriesContainer>
@@ -80,8 +81,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
           />
         </ContainerButton>
-        {category?.subcategories?.map((subcategory : any) => {
-          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory : any) => _subcategory?.id === subcategory?.id)
+        {category?.subcategories?.map((subcategory: any) => {
+          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
           return (
             <ContainerButton
               key={subcategory?.id}
@@ -112,21 +113,21 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       </HeaderWrapper>
       {category.id &&
         categoryState.products
-          ?.filter((product : any) =>
-            !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
-            subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id)
-              ?.sort((a: any, b: any) => a.rank - b.rank)
-              ?.map((product: any) => (
-                <SingleProductCard
-                  key={'prod_' + product.id}
-                  isSoldOut={product.inventoried && !product.quantity}
-                  product={product}
-                  businessId={businessId}
-                  onProductClick={() => onProductClick(product)}
-                  productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                />
-              ))
-          )}
+          ?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
+          ?.sort((a: any, b: any) => a.rank - b.rank)
+          ?.map((product: any, i : number) => (
+            <SingleProductCard
+              key={'prod_' + product.id + `_${i}`}
+              isSoldOut={product.inventoried && !product.quantity}
+              product={product}
+              businessId={businessId}
+              onProductClick={() => onProductClick(product)}
+              productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+            />
+          ))
+      }
       {!category.id &&
         featured &&
         categoryState?.products?.find((product: any) => product.featured) && (
@@ -141,7 +142,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
-                      key={'feat_' + product.id}
+                      key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
                       businessId={businessId}
@@ -156,16 +157,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
         const _products = !isUseParentCategory
-          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
-          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+          ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
         const products = subcategoriesSelected?.length > 0
-          ? _products?.filter((product : any) =>
-            !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
-            subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id))
+          ? _products?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
           : _products
 
         const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
-        
+
         return (
           <React.Fragment key={'cat_' + category.id}>
             {products.length > 0 && (
@@ -226,7 +227,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     </OText>
                   </View>
                 )}
-                {category?.subcategories?.length > 0 && (
+                {category?.subcategories?.length > 0 && !isFiltMode && (
                   <SubcategoriesComponent category={category} />
                 )}
                 <>
@@ -272,6 +273,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !isBusinessLoading &&
         categoryState.products.length === 0 &&
         !errors &&
+        !isFiltMode &&
         !(
           (searchValue && errorQuantityProducts) ||
           (!searchValue && !errorQuantityProducts)

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -22,13 +22,16 @@ import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer
+	BusinessProductsListingContainer,
+	FiltProductsContainer,
+	ContainerSafeAreaView,
+	BackgroundGray
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
 import Animated from 'react-native-reanimated'
 
-const PIXELS_TO_SCROLL = 1000
+const PIXELS_TO_SCROLL = 2000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -95,7 +98,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
+	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
+	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -179,11 +183,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}, [])
 
 	return (
-		<SafeAreaView
+		<ContainerSafeAreaView
 			style={{ flex: 1 }}
+			isOpenFiltProducts={isOpenFiltProducts}
 		>
 			<Animated.View style={{ position: 'relative' }}>
-				<TopHeader>
+				<TopHeader isIos={Platform.OS === 'ios'}>
 					{!isOpenSearchBar && (
 						<>
 							<View style={{ ...styles.headerItem, flex: 1 }}>
@@ -221,6 +226,46 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</TopHeader>
 			</Animated.View>
+
+			{business?.categories?.length > 0 && isOpenFiltProducts && (
+					<FiltProductsContainer
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<BusinessProductsList
+								categories={[
+									{ id: null, name: t('ALL', 'All') },
+									{ id: 'featured', name: t('FEATURED', 'Featured') },
+									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+								]}
+								category={categorySelected}
+								categoryState={categoryState}
+								businessId={business.id}
+								errors={errors}
+								onProductClick={onProductClick}
+								handleSearchRedirect={handleSearchRedirect}
+								featured={featuredProducts}
+								searchValue={searchValue}
+								handleClearSearch={handleChangeSearch}
+								errorQuantityProducts={errorQuantityProducts}
+								handleCancelSearch={handleCancel}
+								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
+			)}
+			{isOpenFiltProducts && (
+				<BackgroundGray />
+			)}
 			<BusinessProductsListingContainer
 				stickyHeaderIndices={[2]}
 				style={styles.mainContainer}
@@ -255,7 +300,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
 								setCategoryClicked={setCategoryClicked}
-								
+
 							/>
 						)}
 					</>
@@ -288,6 +333,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								setCategoriesLayout={setCategoriesLayout}
 								currentCart={currentCart}
 								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
 							/>
 						</WrapContent>
 					</>
@@ -326,7 +372,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
 					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-					btnLeftValue={currentCart?.products?.length}
+					btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
 					btnRightValue={parsePrice(currentCart?.total)}
 					disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					handleClick={() => setOpenUpselling(true)}
@@ -347,7 +393,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onRedirect={onRedirect}
 				/>
 			)}
-		</SafeAreaView>
+		</ContainerSafeAreaView>
 	)
 }
 

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

@@ -1,5 +1,8 @@
 import styled, { css } from 'styled-components/native'
 
+export const ContainerSafeAreaView = styled.SafeAreaView`
+`
+
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -11,6 +14,7 @@ export const TopHeader = styled.View`
   z-index: 1;
   height: 60px;
   min-height: 60px;
+  margin-top: ${(props : any) => props.isIos ? '0' : '40px'};
 `
 export const AddressInput = styled.TouchableOpacity`
   flex: 1;
@@ -33,3 +37,21 @@ export const BusinessProductsListingContainer = styled.ScrollView`
     margin-bottom: 50px;
   `}
 `
+
+export const FiltProductsContainer = styled.ScrollView`
+  position: absolute;
+  width: 100%;
+  z-index: 2000;
+  top: ${(props : any) => props.isIos ? '40px': '80px'};
+  margin-top: 20px;
+`
+
+export const BackgroundGray = styled.View`
+  flex: 1;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  position: absolute; 
+  margin-top: 100px; 
+  z-index: 100;
+  width: 100%;
+`

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

@@ -45,7 +45,6 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const renderTypes = ({ item }: any) => {
 		return (
 			<TouchableOpacity
-				key={item.id}
 				onPress={() => handleChangeBusinessType(item.id)}
 				style={{
 					height: 34,
@@ -103,7 +102,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									showsHorizontalScrollIndicator={false}
 									data={typesState?.types}
 									renderItem={renderTypes}
-									keyExtractor={(type) => type.name}
+									keyExtractor={(type, index) => `${type.name}_${index}`}
 								/>
 								<TouchableOpacity
 									style={{ marginLeft: 15 }}

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

@@ -47,7 +47,7 @@ import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 
-const PIXELS_TO_SCROLL = 1000;
+const PIXELS_TO_SCROLL = 2000;
 
 const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
@@ -116,7 +116,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
 	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
@@ -203,6 +203,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
+	useEffect(() => {
+		if(!orderState?.loading){
+			setOrderTypeValue(orderState?.options?.type)
+		}
+	}, [orderState?.options?.type])
+
 	useFocusEffect(
 		useCallback(() => {
 			resetInactivityTimeout()
@@ -257,8 +263,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				)}
 				<OrderControlContainer>
 					<View style={styles.wrapperOrderOptions}>
-						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
+						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
+							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
 							<OIcon
 								src={theme.images.general.arrow_down}
 								width={10}
@@ -273,7 +279,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									numberOfLines={1}
 									ellipsizeMode="tail"
 									color={theme.colors.textSecondary}>
-									{orderState.options?.momentß
+									{orderState.options?.moment
 										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
@@ -325,7 +331,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[0].id}
 										business={bAry[0]}
 										isBusinessOpen={bAry[0]?.open}
 										handleCustomClick={handleBusinessClick}
@@ -333,7 +338,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									/>
 									{bAry.length > 1 && (
 										<BusinessFeaturedController
-											key={bAry[1].id}
 											business={bAry[1]}
 											isBusinessOpen={bAry[1]?.open}
 											handleCustomClick={handleBusinessClick}
@@ -372,9 +376,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any) => (
+					(business: any, i : number) => (
 						<BusinessController
-							key={business.id}
+							key={`${business.id}_` + i}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}

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

@@ -166,9 +166,9 @@ const CartUI = (props: any) => {
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >
-        {cart?.products?.length > 0 && cart?.products.map((product: any) => (
+        {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
-            key={product.code}
+            key={`${product.code}_${i}`}
             isCartPending={isCartPending}
             isCartProduct
             product={product}
@@ -202,8 +202,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
-                <OSTable key={offer.id}>
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+                <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
                     {offer.rate_type === 1 && (
@@ -234,8 +234,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                <OSTable key={tax.id}>
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+                <OSTable key={`${tax.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1} >
                       {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -250,8 +250,8 @@ const CartUI = (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} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -293,8 +293,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
-                <OSTable key={offer.id}>
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
+                <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
                     {offer.rate_type === 1 && (
@@ -409,7 +409,7 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
-        {cart?.valid_products && (
+        {cart?.valid_products ? (
           <CheckoutAction>
             <OButton
               text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
@@ -428,6 +428,12 @@ const CartUI = (props: any) => {
               style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
             />
           </CheckoutAction>
+        ) : (
+          <View style={{ alignItems: 'center', width: '100%' }}>
+            <OText size={12} color={theme.colors.red} style={{ textAlign: 'center', marginTop: 5 }}>
+              {t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+            </OText>
+          </View>
         )}
       </BusinessItemAccordion>
 

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

@@ -649,7 +649,7 @@ const CheckoutUI = (props: any) => {
 										color={theme.colors.error}
 										size={12}
 									>
-										{t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
+										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
 								{placeSpotTypes.includes(options?.type) && !cart?.place && (

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

@@ -36,7 +36,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadOrders,
 		setSelectedOrderId,
 		setOrderList,
-		setOpenMessges
+		setOpenMessges,
+		setRefreshOrders,
+		refreshOrders
 	} = props
 
 	const theme = useTheme();
@@ -99,6 +101,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		setOrderList(orderList)
 	}, [orderList, loading])
 
+	useEffect(() => {
+		if(refreshOrders){
+			loadOrders(false, false, false, true)
+			setRefreshOrders && setRefreshOrders(false)
+		}
+	}, [refreshOrders])
+
 	return (
 		<>
 			{!loading && orders.length === 0 && (

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

@@ -19,7 +19,8 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		typeSelected,
 		defaultValue,
 		configTypes,
-		orderTypes
+		orderTypes,
+		setOrderTypeValue
 	} = props
 
 	const theme = useTheme();
@@ -39,6 +40,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 
 	const handleChangeOrderTypeCallback = (orderType: number) => {
 		if (!orderState.loading) {
+			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
 			goToBack();
 		}

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

@@ -33,7 +33,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreOrders,
 		loadOrders,
 		setOrdersLength,
-		ordersLength
+		ordersLength,
+		refreshOrders,
+		setRefreshOrders
 	} = props
 
 	const theme = useTheme();
@@ -105,7 +107,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders()
+			loadOrders(false, false, false, true)
 		}, [navigation])
 	)
 
@@ -128,6 +130,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [orders, activeOrders])
 
+	useEffect(() => {
+		if(refreshOrders){
+			loadOrders(false, false, false, true)
+			setRefreshOrders && setRefreshOrders(false)
+		}
+	}, [refreshOrders])
+
 	return (
 		<>
 			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (

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

@@ -100,12 +100,13 @@ const PaymentOptionWalletUI = (props: any) => {
             <Container
               key={wallet.id}
               isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
             >
               <SectionLeft>
                 <CheckBox
                   value={checkedState[idx]}
-                  onValueChange={() => handleOnChange(idx, wallet)}
-                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 }
+                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
                   boxType={'square'}
                   tintColors={{
                     true: theme.colors.primary,

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const Container = styled.View`
+export const Container = styled.TouchableOpacity`
   width: 100%;
   display: flex;
   padding: 20px 0;

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

@@ -292,20 +292,20 @@ export const ProductOptionsUI = (props: any) => {
 					let _videoId = keys[keys.length - 1]
 
 					if (_videoId.includes('watch')) {
-					  const __url = _videoId.split('=')[1]
-					  _videoId = __url
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
 					} else if (_videoId.includes('?')) {
-					  const __url = _videoId.split('?')[0]
-					  _videoId = __url
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
 					}
 
 					if (_videoId.search(/&/i) >= 0) {
-					  _videoId = _videoId.split('&')[0]
+						_videoId = _videoId.split('&')[0]
 					} else if (_videoId.search(/\?/i) >= 0) {
-					  _videoId = _videoId.split('?')[0]
+						_videoId = _videoId.split('?')[0]
 					}
 					if ((_videoId.length === 11)) {
-					  videoList.push(_videoId)
+						videoList.push(_videoId)
 					}
 				}
 			}
@@ -326,25 +326,6 @@ export const ProductOptionsUI = (props: any) => {
 
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
-			{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>
-				</TouchableOpacity>
-			)}
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
 					{respect_to == null && suboptions?.length > 0 && (
@@ -665,6 +646,25 @@ export const ProductOptionsUI = (props: any) => {
 												{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>
+											</TouchableOpacity>
+										)}
 										{product?.extras.map((extra: any) =>
 											<ExtraOptions key={extra.id} options={extra.options} />
 										)}

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

@@ -130,9 +130,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 						</>
 					)}
 				</PositionControl>
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-					+ {parsePrice(price)}
-				</OText>
+				{price > 0 && (
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+						+ {parsePrice(price)}
+					</OText>
+				)}
 			</Container>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
 		</View>

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

@@ -13,9 +13,14 @@ import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
 import { shape } from '../../utils';
 
-export const SingleProductCard = (props: SingleProductCardParams) => {
+function SingleProductCardPropsAreEqual(prevProps : any, nextProps : any) {
+	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) && 
+	prevProps.isSoldOut === nextProps.isSoldOut && 
+	prevProps.productAddedToCartLength === nextProps.productAddedToCartLength
+}
+
+export const SingleProductCard = React.memo((props: SingleProductCardParams) => {
 	const {
-		businessId,
 		product,
 		isSoldOut,
 		onProductClick,
@@ -148,7 +153,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 							weight={'400'}
 							color={theme.colors.white}
 							numberOfLines={2}
-              ellipsizeMode='tail'
+							ellipsizeMode='tail'
 							lineHeight={13}
 						>
 							{product?.ribbon?.text}
@@ -181,4 +186,4 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			)}
 		</CardContainer>
 	);
-};
+}, SingleProductCardPropsAreEqual);

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

@@ -4,7 +4,7 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
-  useOrder
+	useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
@@ -62,7 +62,19 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.textSecondary,
 			height: 38
-		}
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginVertical: 2,
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			backgroundColor: theme.colors.clear,
+			shadowColor: theme.colors.clear,
+			padding: 40,
+		},
 	})
 
 	const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -77,11 +89,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		? cart?.products.map((product: any) => product.id)
 		: []
 
-  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
-      ? upsellingProducts?.products?.length
-      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-      : []
+	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+		? upsellingProducts?.products?.length
+			? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+			: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+		: []
 
 	useEffect(() => {
 		if (!isCustomMode && !props.products) {
@@ -100,10 +112,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	}, [cart, isCheckout])
 
 	const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
+		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			product: product,
+			businessId: product?.api?.businessId,
+			businessSlug: business.slug,
 		})
 	}
 
@@ -119,8 +131,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? productsList.map((product: any) => (
-										<Item key={product.id}>
+									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
+										<Item key={`${product.id}_${i}`}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
 													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
@@ -148,50 +160,54 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
-  const UpsellingContent = () => {
-    return (
-      <>
-        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-          <TopActions onPress={() => onGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
-        </TopBar>
-        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+	const UpsellingContent = () => {
+		return (
+			<>
+				<View style={{ ...styles.headerItem, flex: 1 }}>
+					<OButton
+						imgLeftSrc={theme.images.general.arrow_left}
+						imgRightSrc={null}
+						style={styles.btnBackArrow}
+						onClick={() => onGoBack()}
+						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+					/>
+				</View>
+				<ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <View style={{ paddingHorizontal: 40 }}>
-            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-            <OrderSummary
-              cart={cart}
-              isCartPending={cart?.status === 2}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{...styles.closeUpsellingButton}}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => {
-				handleUpsellingPage()
-				setIsCheckout(true)
-			}}
-          />
-        </View>
-      </>
-    )
-  }
+						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+							<UpsellingLayout />
+						</View>
+					}
+					<View style={{ paddingHorizontal: 40 }}>
+						<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+						<OrderSummary
+							cart={cart}
+							isCartPending={cart?.status === 2}
+							onNavigationRedirect={onNavigationRedirect}
+						/>
+					</View>
+				</ScrollView>
+				<View
+					style={{
+						alignItems: 'center',
+						bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+					}}
+				>
+					<OButton
+						imgRightSrc=''
+						text={t('CHECKOUT', 'Checkout')}
+						style={{ ...styles.closeUpsellingButton }}
+						textStyle={{ color: theme.colors.white, fontSize: 14 }}
+						onClick={() => {
+							handleUpsellingPage()
+							setIsCheckout(true)
+						}}
+					/>
+				</View>
+			</>
+		)
+	}
 
 	return (
 		<>
@@ -199,20 +215,20 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 				<UpsellingLayout />
 			) : (
 				<>
-          {props.isPage ? (
-            <UpsellingContent />
-          ) : (
-            canOpenUpselling && !modalIsOpen && (
-              <OBottomPopup
-                title={''}
-                open={openUpselling}
-                onClose={() => handleUpsellingPage()}
-                isStatusBar
-              >
-                <UpsellingContent />
-              </OBottomPopup>
-            )
-          )}
+					{props.isPage ? (
+						<UpsellingContent />
+					) : (
+						canOpenUpselling && !modalIsOpen && (
+							<OBottomPopup
+								title={''}
+								open={openUpselling}
+								onClose={() => handleUpsellingPage()}
+								isStatusBar
+							>
+								<UpsellingContent />
+							</OBottomPopup>
+						)
+					)}
 				</>
 			)}
 		</>

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
 import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
@@ -182,7 +182,7 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(phoneNumber, true);
 	};
 
-	const changeCountry = (country : any) => {
+	const changeCountry = (country: any) => {
 		let countryCode = {
 			country_code: {
 				name: 'country_code',
@@ -325,7 +325,7 @@ export const UserFormDetailsUI = (props: any) => {
 									<PhoneInputNumber
 										data={phoneInputData}
 										handleData={(val: any) => handleChangePhoneNumber(val)}
-										changeCountry={(val : any) => changeCountry(val)}
+										changeCountry={(val: any) => changeCountry(val)}
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
 										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
 										boxStyle={styles.phoneSelect}
@@ -379,16 +379,18 @@ export const UserFormDetailsUI = (props: any) => {
 								rules={getInputRules({ name: 'password', code: 'password' })}
 								defaultValue=''
 							/>
-							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}>
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
+							<Controller
+								control={control}
+								render={({ onChange, value }: any) => (
+									<TouchableOpacity
+										style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
+										onPress={() => {
+											onChange(!value)
+											handleChangePromotions(!value)
+										}}
+									>
 										<CheckBox
 											value={value}
-											onValueChange={newValue => {
-												onChange(newValue)
-												handleChangePromotions(newValue)
-											}}
 											boxType={'square'}
 											tintColors={{
 												true: theme.colors.primary,
@@ -399,14 +401,14 @@ export const UserFormDetailsUI = (props: any) => {
 											onTintColor={theme.colors.primary}
 											style={Platform.OS === 'ios' && styles.checkBoxStyle}
 										/>
-									)}
-									name='promotions'
-									defaultValue={formState?.result?.result
-										? !!formState?.result?.result?.settings?.notification?.newsletter
-										: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
-								/>
-								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-							</View>
+										<OText style={{ fontSize: 14, paddingHorizontal: 5, paddingLeft: 10 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+									</TouchableOpacity>
+								)}
+								name='promotions'
+								defaultValue={formState?.result?.result
+									? !!formState?.result?.result?.settings?.notification?.newsletter
+									: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
+							/>
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (

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

@@ -56,7 +56,8 @@ const ProfileUI = (props: ProfileParams) => {
 		},
 		pagePadding: {
 			paddingLeft: 40,
-			paddingRight: 40
+			paddingRight: 40,
+			justifyContent: 'center',
 		},
 		navBarStyle: {
 			paddingLeft: 40,
@@ -205,8 +206,8 @@ const ProfileUI = (props: ProfileParams) => {
 				},
 			});
 			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
+				cellphone: cellphone,
+				country_phone_code: countryPhoneCode
 			})
 		}
 	}
@@ -277,15 +278,16 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
+			<NavBar
+				title={t('ACCOUNT', 'Account')}
+				titleAlign={'center'}
+				onActionLeft={() => navigation.goBack()}
+				showCall={false}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
+			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>
-					<NavBar
-						onActionLeft={() => navigation.goBack()}
-						btnStyle={{ paddingStart: 0 }}
-						title={t('ACCOUNT', 'Account')}
-						isVertical
-						style={styles.navBarStyle}
-					/>
+
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
 							{user?.photo ? (
@@ -305,7 +307,7 @@ const ProfileUI = (props: ProfileParams) => {
 							icon={theme.images.general.camera}
 							borderColor={theme.colors.clear}
 							iconStyle={{ width: 20, height: 20 }}
-							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
+							style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>
@@ -326,13 +328,13 @@ const ProfileUI = (props: ProfileParams) => {
 				entireModal
 			>
 				<VerifyPhone
-				phone={phoneInputData.phone}
-				verifyPhoneState={verifyPhoneState}
-				checkPhoneCodeState={checkPhoneCodeState}
-				handleCheckPhoneCode={handleCheckPhoneCode}
-				setCheckPhoneCodeState={setCheckPhoneCodeState}
-				handleVerifyCodeClick={handleVerifyCodeClick}
-				onClose={() => setIsModalVisible(false)}
+					phone={phoneInputData.phone}
+					verifyPhoneState={verifyPhoneState}
+					checkPhoneCodeState={checkPhoneCodeState}
+					handleCheckPhoneCode={handleCheckPhoneCode}
+					setCheckPhoneCodeState={setCheckPhoneCodeState}
+					handleVerifyCodeClick={handleVerifyCodeClick}
+					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 		</>

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

@@ -35,7 +35,10 @@ const WalletsUI = (props: any) => {
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
-    isWalletPointsEnabled
+    isWalletPointsEnabled,
+    getWallets,
+    refreshWallets,
+    setRefreshWallets
   } = props
 
   const [, t] = useLanguage()
@@ -95,6 +98,13 @@ const WalletsUI = (props: any) => {
     }
   }, [configs])
 
+  useEffect(() => {
+    if(refreshWallets){
+      getWallets()
+      setRefreshWallets && setRefreshWallets(false)
+    }
+  }, [refreshWallets])
+
   return (
     <Container>
       <NavBar
@@ -111,14 +121,17 @@ const WalletsUI = (props: any) => {
         walletList.wallets?.length > 0 &&
       (
         <>
-          <OTabs>
+          <OTabs
+            horizontal
+            showsHorizontalScrollIndicator={false}
+          >
             {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
               <Pressable
                 key={wallet.id}
                 onPress={() => handleChangeTab(wallet)}
               >
-                <OTab>
-                  <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
+                <OTab isSelected={tabSelected === wallet.type}>
+                  <OText size={18}>
                     {walletName[wallet.type]?.name}
                   </OText>
                 </OTab>

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

@@ -59,6 +59,7 @@ export interface AddressListParams {
 	isFromProductsList?: boolean;
 	afterSignup?: boolean;
 	isFromCheckout?: boolean
+	loadAddresses: () => void
 }
 
 export interface AddressFormParams {
@@ -164,7 +165,7 @@ export interface BusinessTypeFilterParams {
 	setBusinessTypes?: any
 }
 export interface BusinessControllerParams {
-	key?: number;
+	key?: string | number;
 	business?: any;
 	handleCustomClick?: any;
 	orderType?: any;
@@ -247,7 +248,8 @@ export interface BusinessProductsListParams {
 	setSubcategoriesSelected?: any,
     subcategoriesSelected?: any,
     onClickCategory?: any,
-    lazyLoadProductsRecommended?: boolean
+    lazyLoadProductsRecommended?: boolean,
+	isFiltMode?: boolean
 }
 export interface SingleProductCardParams {
 	businessId: any,
@@ -303,7 +305,9 @@ export interface OrdersOptionParams {
 	ordersLength: { activeOrdersLength: number, previousOrdersLength: number },
 	setSelectedOrderId?: any,
 	setOpenMessges?: any,
-	loadMoreStatus?: boolean
+	loadMoreStatus?: boolean,
+	refreshOrders?: boolean,
+	setRefreshOrders?: (value : boolean) => void
 }
 export interface ActiveOrdersParams {
 	orders?: any,
@@ -489,6 +493,7 @@ export interface OrderTypeSelectParams {
 	defaultValue?: number;
 	configTypes?: Array<any>;
 	orderTypes: Array<any>;
+	setOrderTypeValue?: (value : number) => any
 }
 export interface UpsellingProductsParams {
 	isCustomMode?: boolean;