ordering-ui-react-native 0.16.54 → 0.16.55-release

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
 	OrderTypeControl,
 	useLanguage,
@@ -6,28 +6,32 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { Platform, View } from 'react-native'
-import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, Wrapper } from './styles'
+import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, OTab, OTabs, TabBtn, Wrapper } from './styles'
 import { OrderTypeSelectParams } from '../../types'
 import { OIcon, OText } from '../shared'
 import NavBar from '../NavBar';
 import { ORDER_TYPES } from '../../config/constants';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const {
 		navigation,
 		handleChangeOrderType,
+		handleChangeType,
 		typeSelected,
 		defaultValue,
 		configTypes,
 		orderTypes,
-		setOrderTypeValue
+		setOrderTypeValue,
+		isChewLayout,
+		chewOrderTypes
 	} = props
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	
+
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
@@ -42,43 +46,88 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		if (!orderState.loading) {
 			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
-			goToBack();
+			if (!isChewLayout) {
+				goToBack();
+			}
 		}
 	}
 
+	useEffect(() => {
+		handleChangeType && handleChangeType(typeSelected)
+	}, [typeSelected])
+
 	return (
 		<Wrapper>
-			<NavBar
-				onActionLeft={() => goToBack()}
-				btnStyle={{ paddingLeft: 0 }}
-				paddingTop={0}
-				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
-				titleAlign={'center'}
-				titleStyle={{ fontSize: 14 }}
-			/>
-			{
-			items.length > 0 && (
-				<ListWrapper>
-				{
-					items && items.map((item: any, idx: number) => 
-						<OrderTypeWrapper activeOpacity={0.8} key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
-							<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4}}>
-								<MaskCont>
-									<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
-									<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
-									<View style={{flexDirection: 'row', alignItems: 'center'}}>
-										<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-										<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{transform: [{ rotate: '180deg' }], marginStart: 4}} />
-									</View>
-								</MaskCont>
-							</BgImage>
-						</OrderTypeWrapper>
-					)
-				}
-				</ListWrapper>
-				)
-			}
+			{isChewLayout ? (
+				<View>
+					<OTabs
+						horizontal
+						showsHorizontalScrollIndicator={false}
+					>
+						{chewOrderTypes?.map((type: any) => (
+							<TabBtn
+								key={type.value}
+								onPress={() => handleChangeOrderTypeCallback(type.value)}
+							>
+								<OTab
+									style={{
+										borderBottomColor:
+											type.value === typeSelected
+												? theme.colors.textNormal
+												: theme.colors.border,
+									}}>
+									<OText
+										size={14}
+										color={
+											type.value === typeSelected
+												? theme.colors.textNormal
+												: theme.colors.disabled
+										}
+										weight={type.value === typeSelected ? 'bold' : 'normal'}>
+										{type.name}
+									</OText>
+								</OTab>
+							</TabBtn>
+						))}
+					</OTabs>
+				</View>
+			) : (
+				<>
+					<NavBar
+						onActionLeft={() => goToBack()}
+						btnStyle={{ paddingLeft: 0, width: 50 }}
+						paddingTop={0}
+						style={{ paddingBottom: 0 }}
+						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
+						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
+						noMargin
+					/>
+					{
+						items.length > 0 && (
+							<ListWrapper>
+								{
+									items && items.map((item: any, idx: number) =>
+										<OrderTypeWrapper activeOpacity={0.8} key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
+											<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{ opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4 }}>
+												<MaskCont>
+													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
+													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
+													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
+														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
+													</View>
+												</MaskCont>
+											</BgImage>
+										</OrderTypeWrapper>
+									)
+								}
+							</ListWrapper>
+						)
+					}
+				</>
+			)}
+
 		</Wrapper>
 	)
 }

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

@@ -24,4 +24,22 @@ export const MaskCont = styled.View`
   padding: 16px 39px;
   background-color: #0000004D;
   height: 100%;
-`;
+`;
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  margin-bottom: -1px;
+  justify-content: space-between;
+`;
+
+export const OTab = styled.View`
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  padding-horizontal: 10px;
+`;
+
+export const TabBtn = styled.TouchableOpacity`
+  min-height: 30px;
+  height: 30px;
+`;

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

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { BusinessList as BusinessListController, useOrder } from 'ordering-components/native'
+import React from 'react'
+import { useOrder } from 'ordering-components/native'
 import { BusinessController } from '../../BusinessController'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -12,43 +12,12 @@ import {
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams) => {
-  const {
-    navigation,
-    businessesList,
-    setBusinessLoading,
-    businessId,
-    onNavigationRedirect,
-    isBusinessesSearchList,
-    businessLoading
-  } = props
-
-  const [orderState] = useOrder()
-  const windowWidth = Dimensions.get('window').width;
-
-  const onBusinessClick = (business: any) => {
-    onNavigationRedirect('Business', { store: business.slug })
-  }
-  useEffect(() => {
-    if (businessesList?.loading && businessesList?.businesses?.length === 0) {
-      setBusinessLoading(true)
-    } else {
-      setBusinessLoading(false)
-    }
-  }, [businessesList?.loading])
-
-  const styles = StyleSheet.create({
-    container: {
-      marginBottom: 0,
-    },
-  });
-
-  const BusinessControllerList = ({ style }: any) => {
-    return (
-      <>
-        {businessesList.businesses?.filter((business: any) => businessId?.includes(business?.id))?.map((business: any, i: number) => (
+const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, handleCustomUpdate, style }: any) => {
+  return (
+    <>
+      {businesses?.result?.map((business: any, i: number) => (
+        <View style={style} key={`${business.id}_` + i}>
           <BusinessController
-            key={`${business.id}_` + i}
             business={business}
             isBusinessOpen={business.open}
             handleCustomClick={() => onBusinessClick(business)}
@@ -62,76 +31,115 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
             businessDeliveryTime={business?.delivery_time}
             businessPickupTime={business?.pickup_time}
             businessDistance={business?.distance}
-            style={style}
+            handleCustomUpdate={handleCustomUpdate}
           />
-        ))}
-      </>
-    )
-  }
+        </View>
+      ))}
+    </>
+  )
+}
 
-  const BusinessSkeletons = () => {
-    return (
-      <>
-        {[...Array(4).keys()].map((item, i) => (
-          <Placeholder
-            Animation={Fade}
-            key={i}
-            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>
+const BusinessSkeletons = () => {
+  return (
+    <>
+      {[...Array(4).keys()].map((item, i) => (
+        <Placeholder
+          Animation={Fade}
+          key={i}
+          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={20}
-                  width={30}
+                  height={25}
+                  width={40}
                   style={{ marginBottom: 10 }}
                 />
                 <PlaceholderLine
-                  height={20}
-                  width={80}
+                  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>
-          </Placeholder>
-        ))}
-      </>
-    )
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}
+
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
+  const {
+    navigation,
+    businesses,
+    onNavigationRedirect,
+    isBusinessesSearchList,
+    handleUpdateBusinesses,
+  } = props
+
+  const [orderState] = useOrder()
+  const windowWidth = Dimensions.get('window').width;
+  const onBusinessClick = (business: any) => {
+    onNavigationRedirect('Business', { store: business.slug, logo: business.logo, header: business.header })
   }
 
+  const styles = StyleSheet.create({
+    container: {
+      marginBottom: 0,
+    },
+  });
+
   return (
-    <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
+    <ScrollView
+      horizontal={isBusinessesSearchList}
+      style={styles.container}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+    >
       {isBusinessesSearchList ? (
         <>
-          {!businessLoading && (
+          {!businesses?.loading && (
             <BusinessControllerList
-              style={{ width: windowWidth - 80, marginRight: 20 }}
+              style={{ width: windowWidth - 120, marginRight: 20 }}
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
             />
           )}
         </>
       ) : (
         <ListWrapper>
-          <BusinessControllerList />
-          {businessesList.loading && (
+          {businesses?.loading ? (
             <BusinessSkeletons />
+          ) : (
+            <BusinessControllerList
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
+            />
           )}
         </ListWrapper>
       )}
@@ -139,15 +147,3 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
     </ScrollView>
   )
 }
-
-export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
-  const previousBusinessOrderedController = {
-    ...props,
-    UIComponent: PreviousBusinessOrderedUI,
-    paginationSettings: { initialPage: 1, pageSize: 50, controlType: 'infinity' }
-  }
-
-  return (
-    <BusinessListController {...previousBusinessOrderedController} />
-  )
-}

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

@@ -11,6 +11,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   const {
     products,
     onProductClick,
+    handleUpdateProducts,
     isBusinessesSearchList
   } = props
 
@@ -28,12 +29,14 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
         {products?.map((product: any) => (
             <SingleProductCard
               key={product?.id}
+              isProductId
               isSoldOut={(product.inventoried && !product.quantity)}
               product={product}
               businessId={product?.business?.id}
               onProductClick={onProductClick}
               style={style}
               productAddedToCartLength={0}
+              handleUpdateProducts={handleUpdateProducts}
             />
         ))}
       </>

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

@@ -47,6 +47,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businessesSearchList,
 		hideOrders,
 		BusinessControllerSkeletons,
+		businesses,
+		businessPaginationProps,
+		handleUpdateProducts,
+		handleUpdateBusinesses
 	} = props
 
 	const theme = useTheme();
@@ -56,12 +60,43 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const [, { showToast }] = useToast()
 	const { loading, error, orders: values } = orderList
 	const [businessLoading, setBusinessLoading] = useState(true)
+	const [orders, setOrders] = useState([])
 
 	const imageFails = activeOrders
 		? theme.images.general.emptyActiveOrders
 		: theme.images.general.emptyPastOrders
 
-	const orders = customArray || values || []
+	const _orders = customArray || values || []
+	const uniqueOrders: any = []
+
+
+	useEffect(() => {
+		if (loading || error) return
+		const ordersReduced = _orders.map((order: any) => order?.cart_group_id
+		? _orders
+				?.filter((_order : any) => _order?.cart_group_id === order?.cart_group_id)
+				?.reduce((orderCompleted : any, currentOrder : any) => ({
+					...orderCompleted,
+					total: orderCompleted.summary?.total + currentOrder?.summary?.total,
+					business: [orderCompleted.business, currentOrder.business].flat(),
+					business_id: [orderCompleted.business_id, currentOrder.business_id].flat(),
+					id: [orderCompleted.id, currentOrder.id].flat(),
+					review: orderCompleted.review && currentOrder.review,
+					user_review: orderCompleted.user_review && currentOrder.user_review,
+					products: [orderCompleted.products, currentOrder.products].flat()
+				}))
+				: order)
+		const orders = ordersReduced?.filter((order: any) => {
+			if (!order?.cart_group_id) return true
+			const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+			if (!isDuplicate) {
+				uniqueOrders.push(order?.cart_group_id)
+				return true
+			}
+			return false
+		})
+		setOrders(orders)
+	}, [_orders?.length])
 
 	const getOrderStatus = (s: string) => {
 		const status = parseInt(s)
@@ -141,7 +176,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders(false, false, false, true)
+			if (!businessesSearchList) {
+				loadOrders(false, false, false, true)
+			}
 		}, [navigation])
 	)
 
@@ -155,14 +192,14 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	useEffect(() => {
 		if (loading) return
 
-		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
+		const updateOrders = _orders.filter((order: any) => orderStatus.includes(order.status))
 
 		if (activeOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
 		}
-	}, [orders, activeOrders, preOrders])
+	}, [_orders, activeOrders, preOrders])
 
 	useEffect(() => {
 		if (refreshOrders) {
@@ -189,15 +226,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			)}
 			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
 				<>
-					<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-							{titleContent || (activeOrders
-								? t('ACTIVE', 'Active')
-								: preOrders
-									? t('PREORDERS', 'Preorders')
-									: t('PAST', 'Past'))}
-						</OText>
-					</OptionTitle>
+					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
+						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
+							<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+								{titleContent || (activeOrders
+									? t('ACTIVE', 'Active')
+									: preOrders
+										? t('PREORDERS', 'Preorders')
+										: t('PAST', 'Past'))}
+							</OText>
+						</OptionTitle>
+					)}
+
 					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
 						!loading &&
 						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
@@ -210,34 +250,33 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businessLoading && (
+			{isBusiness && !!businessesSearchList && businesses?.loading && (
 				<ScrollView horizontal>
-					<BusinessControllerSkeletons />
+					<BusinessControllerSkeletons paginationProps={businessPaginationProps} />
 				</ScrollView>
 			)}
-			{isBusiness && businessOrderIds?.length > 0 && (
+			{isBusiness && (
 				<PreviousBusinessOrdered
-					businessId={businessOrderIds}
-					businessLoading={businessLoading}
-					setBusinessLoading={setBusinessLoading}
 					onNavigationRedirect={onNavigationRedirect}
-					isLoadingOrders={loading}
 					isBusinessesSearchList={!!businessesSearchList}
+					businesses={businesses}
+					handleUpdateBusinesses={handleUpdateBusinesses}
 				/>
 			)}
 
-			{isProducts && (
+			{isProducts && !loading && (
 				<PreviousProductsOrdered
 					products={products}
 					onProductClick={onProductClick}
+					handleUpdateProducts={handleUpdateProducts}
 					isBusinessesSearchList={!!businessesSearchList}
 				/>
 			)}
 			{(loading && isProducts) && (
 				<>
-					{[...Array(4).keys()].map(
+					{[...Array(!!businessesSearchList ? 1 : 4).keys()].map(
 						(item, i) => (
-							<Placeholder key={i} style={{ padding: 5, paddingLeft: 40 }} Animation={Fade}>
+							<Placeholder key={i} style={{ padding: 5, paddingLeft: !!businessesSearchList ? 0 : 40, marginBottom: !!businessesSearchList ? 38 : 0 }} Animation={Fade}>
 								<View style={{ flexDirection: 'row' }}>
 									<PlaceholderLine
 										width={24}
@@ -254,38 +293,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					)}
 				</>
 			)}
-			{loading && !hideOrders && (
-				<>
-					{!activeOrders ? (
-						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
-							<View style={{ width: '100%', flexDirection: 'row' }}>
-								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
-								<Placeholder>
-									<PlaceholderLine width={30} style={{ marginTop: 5 }} />
-									<PlaceholderLine width={50} />
-									<PlaceholderLine width={70} />
-								</Placeholder>
-							</View>
-						</Placeholder>
-					) : (
-						<View style={{ marginTop: 30 }}>
-							{[...Array(5)].map((item, i) => (
-								<Placeholder key={i} Animation={Fade}>
-									<View style={{ width: '100%', flexDirection: 'row' }}>
-										<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
-										<Placeholder>
-											<PlaceholderLine width={30} style={{ marginTop: 5 }} />
-											<PlaceholderLine width={50} />
-											<PlaceholderLine width={20} />
-										</Placeholder>
-									</View>
-								</Placeholder>
-							))}
-						</View>
-					)}
-				</>
-			)}
-			{!loading && !error && orders.length > 0 && !hideOrders && (
+			{!error && orders.length > 0 && !hideOrders && (
 				preOrders ? (
 					<ActiveOrders
 						orders={orders.filter((order: any) => orderStatus.includes(order.status))}
@@ -317,9 +325,41 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						onNavigationRedirect={onNavigationRedirect}
 						handleReorder={handleReorder}
 						handleUpdateOrderList={handleUpdateOrderList}
+						loading={loading}
 					/>
 				)
 			)}
+			{loading && !hideOrders && (
+				<>
+					{!activeOrders ? (
+						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
+							<View style={{ width: '100%', flexDirection: 'row' }}>
+								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
+								<Placeholder>
+									<PlaceholderLine width={30} style={{ marginTop: 5 }} />
+									<PlaceholderLine width={50} />
+									<PlaceholderLine width={70} />
+								</Placeholder>
+							</View>
+						</Placeholder>
+					) : (
+						<View style={{ marginTop: 30 }}>
+							{[...Array(5)].map((item, i) => (
+								<Placeholder key={i} Animation={Fade}>
+									<View style={{ width: '100%', flexDirection: 'row' }}>
+										<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+										<Placeholder>
+											<PlaceholderLine width={30} style={{ marginTop: 5 }} />
+											<PlaceholderLine width={50} />
+											<PlaceholderLine width={20} />
+										</Placeholder>
+									</View>
+								</Placeholder>
+							))}
+						</View>
+					)}
+				</>
+			)}
 		</>
 	)
 }