ordering-ui-react-native 0.15.61 → 0.15.63-release

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

@@ -39,7 +39,8 @@ const CartUI = (props: any) => {
     handleChangeComment,
     commentState,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    isMultiCheckout
   } = props
 
   const theme = useTheme();
@@ -59,10 +60,11 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+  const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
-  const placeSpotTypes = [3, 4]
+  const placeSpotTypes = [4]
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -96,17 +98,23 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    props.onNavigationRedirect('CheckoutNavigator', {
-      screen: 'CheckoutPage',
-      cartUuid: cart?.uuid,
-      businessLogo: cart?.business?.logo,
-      businessName: cart?.business?.name,
-      cartTotal: cart?.total
-    })
+    if (isCheckoutMultiBusinessEnabled) {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'MultiCheckout'
+      })
+    } else {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      })
+    }
   }
 
   const getIncludedTaxes = () => {
-    if (cart?.taxes === null) {
+    if (cart?.taxes === null || !cart?.taxes) {
       return cart.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
@@ -162,13 +170,14 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        isMultiCheckout={isMultiCheckout}
       >
-        {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 +211,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 +243,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,12 +259,12 @@ 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')}{' '}
-                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -293,8 +302,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 && (
@@ -352,7 +361,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
+                  {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                 </OText>
               </OSTable>
             </OSTotal>
@@ -409,30 +418,40 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
-        {cart?.valid_products && (
-          <CheckoutAction>
-            <OButton
-              text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
-              ) : !cart?.valid_address ? (
-                `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
-              ) : (
-                `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-              )}
-              bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-              isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
-              borderColor={theme.colors.primary}
-              imgRightSrc={null}
-              textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-              onClick={() => setOpenUpselling(true)}
-              style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-            />
-          </CheckoutAction>
+        {!isMultiCheckout && (
+          <>
+            {cart?.valid_products ? (
+              <CheckoutAction>
+                <OButton
+                  text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                    !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
+                  ) : !cart?.valid_address ? (
+                    `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
+                  ) : (
+                    `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
+                  )}
+                  bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+                  borderColor={theme.colors.primary}
+                  imgRightSrc={null}
+                  textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+                  onClick={() => setOpenUpselling(true)}
+                  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>
 
       <OModal
-        open={openChangeStore && props.isFranchiseApp}
+        open={openChangeStore}
         entireModal
         customClose
         onClose={() => setOpenChangeStore(false)}

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

@@ -113,7 +113,14 @@ const CheckoutUI = (props: any) => {
 			right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
 			position: 'absolute',
 			fontSize: 20
-		}
+		},
+		detailWrapper: {
+			paddingHorizontal: 40,
+			width: '100%'
+		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	})
 
 	const [, { showToast }] = useToast();
@@ -133,11 +140,23 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-	
-	const placeSpotTypes = [3, 4]
-	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const [isOpen, setIsOpen] = useState(false)
+	const [requiredFields, setRequiredFields] = useState<any>([])
+
+	const placeSpotTypes = [4]
+	const businessConfigs = businessDetails?.business?.configs ?? []
+	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
+	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
+	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
+	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
+
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place)
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
+		cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+		(options.type === 1 &&
+			validationFields?.fields?.checkout?.driver_tip?.enabled &&
+			validationFields?.fields?.checkout?.driver_tip?.required &&
+			(Number(cart?.driver_tip) <= 0))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -159,9 +178,13 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = () => {
-		if (!userErrors.length) {
-			handlerClickPlaceOrder && handlerClickPlaceOrder()
+	const handlePlaceOrder = (confirmPayment: any) => {
+		if (!userErrors.length && !requiredFields?.length) {
+			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
+			return
+		}
+		if (requiredFields?.length) {
+			setIsOpen(true)
 			return
 		}
 		let stringError = ''
@@ -191,11 +214,12 @@ const CheckoutUI = (props: any) => {
 		setUserErrors([])
 		const errors = []
 		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
-			if (field?.required && !notFields.includes(field.code)) {
+			if (field?.required && !notFields.includes(field.code) && field?.enabled) {
 				if (!user[field?.code]) {
-					errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+					_requiredFields.push(field?.code)
 				}
 			}
 		})
@@ -206,8 +230,9 @@ const CheckoutUI = (props: any) => {
 				validationFields?.fields?.checkout?.cellphone?.required) ||
 				configs?.verification_phone_required?.value === '1')
 		) {
-			errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+			_requiredFields.push('cellphone')
 		}
+		setRequiredFields(_requiredFields)
 
 		if (phoneUpdate) {
 			errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
@@ -239,7 +264,7 @@ const CheckoutUI = (props: any) => {
 
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			navigation?.canGoBack() && navigation.goBack();
+			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
 		}
 	}, [cart?.products])
 
@@ -250,13 +275,18 @@ const CheckoutUI = (props: any) => {
 	return (
 		<>
 			<Container noPadding>
-				<NavBar
-					isVertical
-					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-					title={t('CHECKOUT', 'Checkout')}
-					titleStyle={{ marginLeft: 0, marginRight: 0, paddingLeft: 40 }}
-					btnStyle={{ marginLeft: 40, padding: 40 }}
-				/>
+				<View style={styles.wrapperNavbar}>
+					<NavBar
+						title={t('CHECKOUT', 'Checkout')}
+						titleAlign={'center'}
+						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+						showCall={false}
+						btnStyle={{ paddingLeft: 0 }}
+						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+						titleWrapStyle={{ paddingHorizontal: 0 }}
+						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					/>
+				</View>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
@@ -597,7 +627,7 @@ const CheckoutUI = (props: any) => {
 												</OText>
 											</TouchableOpacity>
 										</CartHeader>
-										{props.isFranchiseApp && (
+										{isBusinessChangeEnabled && (
 											<TouchableOpacity
 												onPress={() => setOpenChangeStore(true)}
 												style={{ alignSelf: 'flex-start' }}
@@ -616,6 +646,7 @@ const CheckoutUI = (props: any) => {
 											cart={cart}
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
+											placeSpotTypes={placeSpotTypes}
 										/>
 									</>
 								)}
@@ -625,7 +656,7 @@ const CheckoutUI = (props: any) => {
 
 					{!cartState.loading && cart && (
 						<View>
-							<ChErrors style={{ marginBottom: 0 }}>
+							<ChErrors style={{ marginBottom: 10 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -649,7 +680,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 && (
@@ -660,11 +691,22 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
 									</OText>
 								)}
+								{options.type === 1 &&
+									validationFields?.fields?.checkout?.driver_tip?.enabled &&
+									validationFields?.fields?.checkout?.driver_tip?.required &&
+									(Number(cart?.driver_tip) <= 0) && (
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+										</OText>
+									)}
 							</ChErrors>
 						</View>
 					)}
 					<OModal
-						open={openChangeStore && props.isFranchiseApp}
+						open={openChangeStore}
 						entireModal
 						customClose
 						onClose={() => setOpenChangeStore(false)}
@@ -674,11 +716,33 @@ const CheckoutUI = (props: any) => {
 							onClose={() => setOpenChangeStore(false)}
 						/>
 					</OModal>
+					<OModal
+						open={isOpen}
+						onClose={() => setIsOpen(false)}
+					>
+						<View style={styles.detailWrapper}>
+							<UserDetails
+								isUserDetailsEdit
+								cartStatus={cart?.status}
+								businessId={cart?.business_id}
+								useValidationFields
+								useDefualtSessionManager
+								useSessionUser
+								isCheckout
+								isEdit
+								phoneUpdate={phoneUpdate}
+								togglePhoneUpdate={togglePhoneUpdate}
+								requiredFields={requiredFields}
+								hideUpdateButton
+								onClose={() => setIsOpen(false)}
+							/>
+						</View>
+					</OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={() => handlePlaceOrder()}
+					handleClick={() => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
 					btnText={cart?.subtotal >= cart?.minimum
@@ -692,7 +756,7 @@ const CheckoutUI = (props: any) => {
 						: (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
 					}
 					btnRightValueShow
-					btnRightValue={parsePrice(cart?.total)}
+					btnRightValue={parsePrice(cart?.balance)}
 					iosBottom={30}
 				/>
 			)}
@@ -708,19 +772,6 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
-			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
-				<PaymentOptionsWebView
-					onNavigationRedirect={onNavigationRedirect}
-					uri={`https://test-square-f50f7.web.app`}
-					user={user}
-					token={token}
-					cart={cart}
-					currency={currency}
-					webviewPaymethod={webviewPaymethod}
-					setShowGateway={setShowGateway}
-					locationId={'L1NGAY5M6KJRX'}
-				/>
-			)}
 		</>
 	)
 }
@@ -873,7 +924,7 @@ export const Checkout = (props: any) => {
 		...props,
 		UIComponent: CheckoutUI,
 		cartState,
-		[props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
+		uuid: cartUuid
 	}
 
 	return (

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

@@ -48,22 +48,28 @@ const DriverTipsUI = (props: any) => {
 		}
 	})
 
-	const [value, setvalue] = useState(0);
+	const [value, setvalue] = useState('');
 
 	const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
 		? `${configs?.format_number_currency?.value}0`
 		: `0${configs?.format_number_currency?.value}`
 
 	const handleChangeDriverTip = (val: any) => {
-		let tip = parseFloat(val)
-		tip = isNaN(tip) ? 0 : tip
-		setvalue(tip)
+		const tip = Number(val)
+		if ((isNaN(tip) || tip < 0)) {
+		  setvalue(value)
+		  return
+		}
+		setvalue(val)
 	}
-
+	
 	return (
 		<DTContainer>
+			<DTLabel>
+				{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
+			</DTLabel>
 			<DTWrapperTips>
-				{driverTipsOptions.map((option: any, i: number) => (
+				{!isDriverTipUseCustom && driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
 						onPress={() => handlerChangeOption(option)}
@@ -79,7 +85,7 @@ const DriverTipsUI = (props: any) => {
 					</TouchableOpacity>
 				))}
 			</DTWrapperTips>
-			{!driverTipsOptions.includes(driverTip) && driverTip > 0 && (
+			{(!isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0) && (
 				<OText
 					color={theme.colors.error}
 					size={16}
@@ -90,13 +96,12 @@ const DriverTipsUI = (props: any) => {
 			)}
 			{isDriverTipUseCustom && (
 				<DTForm>
-					<DTLabel>
-						{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
-					</DTLabel>
 					<DTWrapperInput>
 						<OInput
 							placeholder={placeholderCurrency}
 							style={style.inputStyle}
+							value={value}
+							type={'numeric'}
 							onChange={handleChangeDriverTip}
 							autoCapitalize='none'
 							autoCorrect={false}
@@ -108,10 +113,10 @@ const DriverTipsUI = (props: any) => {
 							textStyle={{ color: 'white', fontSize: 14 }}
 							imgRightSrc={null}
 							style={{ borderRadius: 5, height: 44 }}
-							isDisabled={!(value > 0 && value !== driverTip) || !value}
+							isDisabled={parseFloat(value || '0') < 0 || parseFloat(value || '0') === driverTip || value === ''}
 							onClick={() => {
 								handlerChangeOption(value)
-								setvalue(0)
+								setvalue('')
 							}}
 						/>
 					</DTWrapperInput>

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

@@ -0,0 +1,92 @@
+import React, { useState } from 'react'
+import { useLanguage, useOrder } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { FavoriteList } from '../FavoriteList'
+import NavBar from '../NavBar'
+import { OText } from '../shared'
+
+import {
+  TabContainer,
+  Tab,
+  Container
+} from './styles'
+
+export const Favorite = (props: any) => {
+  const {
+    navigation
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [orderState] = useOrder()
+  const [tabSelected, setTabSelected] = useState('businesses')
+
+  const tabList = [
+    { key: 'businesses', name: t('BUSINESSES', 'Businesses') },
+    { key: 'products', name: t('PRODUCTS', 'Products') },
+    { key: 'orders', name: t('ORDERS', 'Orders') }
+  ]
+
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const onRedirect = (route: string, params?: any) => {
+    navigation.navigate(route, params)
+  }
+
+  return (
+    <Container>
+      <NavBar
+        title={t('FAVORITE', 'Favorite')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      <TabContainer>
+        {tabList.map((menu, i) => (
+          <Tab
+            key={i}
+            active={menu.key === tabSelected}
+            onPress={() => setTabSelected(menu.key)}
+          >
+            <OText
+              color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
+					    size={14}
+					    weight={menu.key === tabSelected ? '500' : '400'}
+					    style={{ marginBottom: 12 }}
+            >
+              {menu.name}
+            </OText>
+          </Tab>
+        ))}
+      </TabContainer>
+      {tabSelected === 'businesses' && (
+        <FavoriteList
+          navigation={navigation}
+          onNavigationRedirect={onRedirect}
+          isBusiness
+          favoriteURL='favorite_businesses'
+          originalURL='business'
+          location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
+          propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
+        />
+      )}
+      {tabSelected === 'products' && (
+        <FavoriteList
+          favoriteURL='favorite_products'
+          originalURL='products'
+          onNavigationRedirect={onRedirect}
+          isProduct
+        />
+      )}
+      {tabSelected === 'orders' && (
+        <FavoriteList
+          onNavigationRedirect={onRedirect}
+          favoriteURL='favorite_orders'
+          originalURL='orders'
+          isOrder
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components/native'
+
+export const TabContainer = styled.View`
+  flex-direction: row;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  border-bottom-width: 1px;
+  margin-bottom: 25px;
+`
+
+export const Tab = styled.TouchableOpacity`
+  margin-right: 32px;
+  ${(props: any) => props.active && css`
+    border-bottom-color: ${(props: any) => props.theme.colors.textNormal};
+    border-bottom-width: 1px;
+  `}
+`
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+  padding-bottom: 20px;
+  padding-top: 30px;
+`