ordering-ui-react-native 0.15.36 → 0.15.37-release

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

@@ -85,8 +85,7 @@ const CheckoutUI = (props: any) => {
 		deliveryOptionSelected,
 		instructionsOptions,
 		handleChangeDeliveryOption,
-		currency,
-		merchantId
+		currency
 	} = props
 
 	const theme = useTheme();
@@ -113,7 +112,10 @@ const CheckoutUI = (props: any) => {
 			right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
 			position: 'absolute',
 			fontSize: 20
-		}
+		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	})
 
 	const [, { showToast }] = useToast();
@@ -133,11 +135,20 @@ 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 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 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) || []
@@ -239,7 +250,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 +261,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>
@@ -547,18 +563,17 @@ const CheckoutUI = (props: any) => {
 									onNavigationRedirect={onNavigationRedirect}
 									paySelected={paymethodSelected}
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
-									handlePlaceOrder={handlePlaceOrder}
-									merchantId={merchantId}
 								/>
 							</ChPaymethods>
 						</ChSection>
 					)}
 
-					{!cartState.loading && cart && isWalletEnabled && (
+					{!cartState.loading && cart && isWalletEnabled && businessDetails?.business?.configs && (
 						<WalletPaymentOptionContainer>
 							<PaymentOptionWallet
 								cart={cart}
 								businessId={cart?.business_id}
+								businessConfigs={businessDetails?.business?.configs}
 							/>
 						</WalletPaymentOptionContainer>
 					)}
@@ -596,21 +611,19 @@ const CheckoutUI = (props: any) => {
 												</OText>
 											</TouchableOpacity>
 										</CartHeader>
-										{props.isFranchiseApp && (
-											<TouchableOpacity
-												onPress={() => setOpenChangeStore(true)}
-												style={{ alignSelf: 'flex-start' }}
+										<TouchableOpacity
+											onPress={() => setOpenChangeStore(true)}
+											style={{ alignSelf: 'flex-start' }}
+										>
+											<OText
+												size={12}
+												lineHeight={18}
+												color={theme.colors.textSecondary}
+												style={{ textDecorationLine: 'underline' }}
 											>
-												<OText
-													size={12}
-													lineHeight={18}
-													color={theme.colors.textSecondary}
-													style={{ textDecorationLine: 'underline' }}
-												>
-													{t('CHANGE_STORE', 'Change store')}
-												</OText>
-											</TouchableOpacity>
-										)}
+												{t('CHANGE_STORE', 'Change store')}
+											</OText>
+										</TouchableOpacity>
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
@@ -624,7 +637,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}
@@ -648,7 +661,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 && (
@@ -659,11 +672,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)}
@@ -707,19 +731,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'}
-				/>
-			)}
 		</>
 	)
 }
@@ -872,7 +883,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,91 @@
+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'
+          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;
+`

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

@@ -0,0 +1,287 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { FavoriteParams } from '../../types';
+import { SingleOrderCard } from '../SingleOrderCard';
+import {
+	FavoriteList as FavoriteListController,
+	useOrder,
+  useLanguage
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { _setStoreData } from '../../providers/StoreUtil';
+import { Container, WrappButton } from './styles'
+import { OButton } from '../shared';
+import { BusinessController } from '../BusinessController';
+import { SingleProductCard } from '../SingleProductCard';
+import moment from 'moment';
+
+
+const FavoriteListUI = (props: FavoriteParams) => {
+	const {
+    favoriteList,
+    handleUpdateFavoriteList,
+    pagination,
+    getFavoriteList,
+    navigation,
+    onNavigationRedirect,
+    reorderState,
+    handleReorder,
+    isBusiness,
+    isOrder,
+    isProduct
+	} = props
+
+	const theme = useTheme();
+  const [, t] = useLanguage()
+  const [orderState] = useOrder();
+  const [{ carts }] = useOrder()
+
+  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
+
+  const getOrderStatus = (s: any) => {
+    const status = parseInt(s)
+    const orderStatus = [
+      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
+      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
+      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
+      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
+      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
+      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
+      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
+      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
+      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
+      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
+      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
+      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
+      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
+      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
+      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
+      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
+      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
+      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
+      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
+      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
+      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
+    ]
+
+    const objectStatus = orderStatus.find((o) => o.key === status)
+
+    return objectStatus && objectStatus
+  }
+
+  useEffect(() => {
+		const _businessId = 'businessId:' + reorderState?.result?.business_id
+		if (reorderState?.error) {
+		  if (reorderState?.result?.business_id) {
+			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+		  }
+		}
+		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+		  const cartProducts = carts?.[_businessId]?.products
+		  const available = cartProducts.every((product: any) => product.valid === true)
+		  const orderProducts = favoriteList?.favorites.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
+
+		  if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
+			onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+		  } else {
+			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+			cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+		  }
+		}
+	  }, [reorderState])
+
+  const handleBusinessClick = (business: any) => {
+    onNavigationRedirect && onNavigationRedirect('Business', {
+      store: business.slug,
+      header: business.header,
+      logo: business.logo,
+    });
+  }
+
+  const BusinessSkeleton = () => {
+    return (
+      <Placeholder
+        Animation={Fade}
+        style={{ marginBottom: 20 }}>
+        <View style={{ width: '100%' }}>
+          <PlaceholderLine
+            height={200}
+            style={{ marginBottom: 20, borderRadius: 25 }}
+          />
+          <View style={{ paddingHorizontal: 10 }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}>
+              <PlaceholderLine
+                height={25}
+                width={40}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={25}
+                width={20}
+                style={{ marginBottom: 10 }}
+              />
+            </View>
+            <PlaceholderLine
+              height={20}
+              width={30}
+              style={{ marginBottom: 10 }}
+            />
+            <PlaceholderLine
+              height={20}
+              width={80}
+              style={{ marginBottom: 10 }}
+            />
+          </View>
+        </View>
+      </Placeholder>
+    )
+  }
+
+  const ProductSkeleton = () => {
+    return (
+      <Placeholder style={{ padding: 5 }} Animation={Fade}>
+        <View style={{ flexDirection: 'row' }}>
+          <PlaceholderLine
+            width={24}
+            height={70}
+            style={{ marginRight: 10, marginBottom: 10 }}
+          />
+          <Placeholder style={{ paddingVertical: 10 }}>
+            <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+            <PlaceholderLine width={20} />
+          </Placeholder>
+        </View>
+      </Placeholder>
+    )
+  }
+
+  const OrderSkeleton = () => {
+    return (
+      <Placeholder style={{ padding: 5 }} Animation={Fade}>
+        <View style={{ flexDirection: 'row' }}>
+          <PlaceholderLine
+            width={24}
+            height={70}
+            style={{ marginRight: 10, marginBottom: 10 }}
+          />
+          <Placeholder style={{ paddingVertical: 10 }}>
+            <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+            <PlaceholderLine width={20} />
+          </Placeholder>
+        </View>
+      </Placeholder>
+    )
+  }
+
+	return (
+		<Container>
+      {isBusiness && (
+        <>
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((business: any, i:number) => (
+              <BusinessController
+                key={`${business.id}_` + i}
+                business={business}
+                isBusinessOpen={business.open}
+                handleCustomClick={handleBusinessClick}
+                orderType={orderState?.options?.type}
+                navigation={navigation}
+                businessHeader={business?.header}
+                businessFeatured={business?.featured}
+                businessLogo={business?.logo}
+                businessReviews={business?.reviews}
+                businessDeliveryPrice={business?.delivery_price}
+                businessDeliveryTime={business?.delivery_time}
+                businessPickupTime={business?.pickup_time}
+                businessDistance={business?.distance}
+                handleUpdateBusinessList={handleUpdateFavoriteList}
+              />
+            ))
+          )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <BusinessSkeleton key={i} />
+            ))
+          )}
+        </>
+      )}
+
+      {isOrder && (
+        <>
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b:any) => moment(a?.delivery_datetime_utc).valueOf() - moment(b?.delivery_datetime_utc).valueOf())
+              .map((order: any, i: number) => (
+                <SingleOrderCard
+                  key={`${order?.id}_${i}`}
+                  order={order}
+                  getOrderStatus={getOrderStatus}
+                  onNavigationRedirect={onNavigationRedirect}
+                  pastOrders={pastOrders.includes(order?.status)}
+                  handleUpdateOrderList={handleUpdateFavoriteList}
+                  handleUpdateFavoriteList={handleUpdateFavoriteList}
+                  handleReorder={handleReorder}
+                  reorderLoading={reorderState?.loading}
+                />
+            ))
+          )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <OrderSkeleton key={i} />
+            ))
+          )}
+        </>
+      )}
+
+      {isProduct && (
+        <>
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
+              <SingleProductCard
+                key={`${product?.id}_${i}`}
+                isSoldOut={product.inventoried && !product.quantity}
+                product={product}
+                onProductClick={() => {}}
+                handleUpdateProducts={handleUpdateFavoriteList}
+              />
+            ))
+          )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <ProductSkeleton key={i} />
+            ))
+          )}
+        </>
+      )}
+
+      {!favoriteList?.loading && pagination.totalPages && pagination.currentPage < pagination.totalPages && (
+				<WrappButton>
+					<OButton
+						onClick={() => getFavoriteList(pagination?.currentPage + 1)}
+						text={t('LOAD_MORE_ITEMS', 'Load more items')}
+						imgRightSrc={null}
+						textStyle={{ color: theme.colors.white }}
+						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
+					/>
+				</WrappButton>
+			)}
+    </Container>
+	)
+}
+
+export const FavoriteList = (props: any) => {
+  const favoriteBusinessesProps = {
+    ...props,
+    UIComponent: FavoriteListUI
+  }
+  return <FavoriteListController {...favoriteBusinessesProps} />
+}

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View``
+
+export const WrappButton = styled.View``