ordering-ui-react-native 0.18.2 → 0.18.3-release

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, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -11,7 +11,8 @@ import {
   useUtils,
   ToastType,
   useToast,
-  useConfig
+  useConfig,
+  useEvent
 } from 'ordering-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
@@ -24,6 +25,8 @@ import { BusinessProductsListingParams } from '../../types'
 import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useIsFocused } from '@react-navigation/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
   TopHeader,
@@ -42,6 +45,7 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
+import { NavBack } from 'ordering-ui-react-native/src/components/OrderDetails/styles';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -68,7 +72,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     professionalSelected,
     handleUpdateProfessionals,
     handleChangeProfessionalSelected,
-    onBusinessClick
+    onBusinessClick,
+    businessSingleId,
+    productModal
   } = props
 
   const insets = useSafeAreaInsets()
@@ -79,6 +85,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [{ parsePrice }] = useUtils()
   const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
+  const [events] = useEvent()
   const isFocused = useIsFocused();
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
@@ -107,7 +114,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
     searchIcon: {
       borderWidth: 0,
-      padding: 15,
+      padding: 10,
       justifyContent: 'center',
       shadowColor: theme.colors.clear,
     },
@@ -132,31 +139,44 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [openService, setOpenService] = useState(false)
   const [currentProduct, setCurrentProduct] = useState(null)
   const [searchBarHeight, setSearchBarHeight] = useState(60)
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [viewedCategory, setViewedCategory] = useState<any>(null)
+  const [showTitle, setShowTitle] = useState(false)
 
   const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
   const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
   const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
-
   const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
   const isOpenFiltProducts = isOpenSearchBar && !!searchValue
-  const filtProductsHeight = Platform.OS === 'ios' ? 165 : 100
+  const filtProductsHeight = Platform.OS === 'ios' ? 65 : 30
+  const viewOrderButtonVisible = !loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0
+
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+  const vibrateApp = (impact?: string) => {
+    const options = {
+      enableVibrateFallback: true,
+      ignoreAndroidSystemSettings: false
+    };
+    ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+  }
   const onProductClick = async (product: any) => {
-    if (product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
+    if (product.ingredients?.length === 0 && product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
       const isProductAddedToCart = currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)
       const productQuantity = isProductAddedToCart?.quantity
+      const minimumPerOrder = product?.minimum_per_order || 1
       const addCurrentProduct = {
         ...product,
-        quantity: 1
+        quantity: minimumPerOrder
       }
       const updateCurrentProduct = {
+        name: product?.name,
         id: product.id,
         code: isProductAddedToCart?.code,
         quantity: productQuantity + 1
       }
-      Vibration.vibrate()
+      vibrateApp()
       const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
       if (isProductAddedToCart) {
         await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)
@@ -173,10 +193,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       onRedirect('ProductDetails', {
         product: product,
         businessSlug: business.slug,
-        businessId: business.id,
-        productAddedToCartLength
+        businessId: business.id || product?.category?.business_id,
+        productAddedToCartLength,
+        isRedirect: false
       })
     }
+    events.emit('product_clicked', product)
   }
 
   const handleCancel = () => {
@@ -184,18 +206,23 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleChangeSearch('')
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (cart: any) => {
+    const isProductCartParam = !!cart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-    if (cartsAvailable.length === 1) {
+    const cartsAvailable: any = Object.values(orderState?.carts)
+      ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
+      ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== cart?.uuid : _c)
+    if (cartsAvailable.length === 1 || !isCheckoutMultiBusinessEnabled) {
+      const cart = isCheckoutMultiBusinessEnabled ? cartsAvailable[0] : currentCart
+
       props.onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
-        cartUuid: cartsAvailable[0]?.uuid,
-        businessLogo: cartsAvailable[0]?.business?.logo,
-        businessName: cartsAvailable[0]?.business?.name,
-        cartTotal: cartsAvailable[0]?.total
-      })
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      }, true)
     } else {
       const groupKeys: any = {}
       cartsAvailable.forEach((_cart: any) => {
@@ -211,12 +238,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         props.onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           checkCarts: true
-        })
+        }, true)
       } else {
         props.onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           cartUuid: cartsAvailable[0]?.group?.uuid
-        })
+        }, true)
       }
     }
   }
@@ -229,6 +256,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const handlePageScroll = useCallback(({ nativeEvent }: any) => {
     const scrollOffset = nativeEvent.contentOffset.y
+    setShowTitle(scrollOffset > 30)
+
     if (businessState?.business?.lazy_load_products_recommended) {
       const height = nativeEvent.contentSize.height
       const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
@@ -259,7 +288,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   }, []);
 
   const handleBackNavigation = () => {
-    navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
+    navigation?.canGoBack() && !props.fromMulti ? navigation.goBack() : navigation.navigate('BottomTab')
   }
 
   const adjustBusiness = async (adjustBusinessId: number) => {
@@ -297,12 +326,84 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [isFocused])
 
+
+  useEffect(() => {
+    function onKeyboardDidShow(e: KeyboardEvent) {
+      setKeyboardHeight(e?.endCoordinates?.height);
+    }
+
+    function onKeyboardDidHide() {
+      setKeyboardHeight(0);
+    }
+
+    const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
   const subtotalWithTaxes = currentCart?.taxes?.reduce((acc: any, item: any) => {
     if (item?.type === 1)
       return acc = acc + item?.summary?.tax
     return acc = acc
   }, currentCart?.subtotal)
 
+  const onChangeSearch = (query: any) => {
+    handleChangeSearch(query)
+    if (query) {
+      events.emit('products_searched', query)
+    }
+  }
+
+  useEffect(() => {
+    let categoryId: any = null
+    if (business?.lazy_load_products_recommended) {
+      if (categorySelected?.id) {
+        categoryId = categorySelected.id
+      }
+    } else {
+      if (selectedCategoryId) {
+        const originCategoryId = selectedCategoryId.replace('cat_', '')
+        if (!isNaN(originCategoryId)) {
+          categoryId = Number(originCategoryId)
+        }
+      }
+    }
+    if (categoryId) {
+      const _viewedCategory = business.categories.find(category => category.id === categoryId)
+      if (_viewedCategory?.id !== viewedCategory?.id) {
+        setViewedCategory(_viewedCategory)
+        events.emit('product_list_viewed', _viewedCategory)
+      }
+    }
+  }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
+
+  useEffect(() => {
+    const handleArrowBack: any = () => {
+      navigation.goBack()
+      return true
+    }
+    BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!business && !loading && !error) {
+      showToast(ToastType.Error, t('BUSINESS_NOT_FOUND', 'Business not found'))
+      navigation.navigate('BusinessList')
+    }
+  }, [business, error, loading])
+
+  useEffect(() => {
+    if (productModal?.product && !productModal?.loading && !productModal?.error) {
+      onProductClick(props?.productModal?.product)
+    }
+  }, [productModal])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>
@@ -312,12 +413,29 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               marginTop: Platform.OS === 'ios' ? insets.top : 0
             }}
             onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height)}
+            hideArrow={(businessSingleId && auth)}
           >
             {!isOpenSearchBar && (
               <>
-                <TopActions onPress={() => handleBackNavigation()}>
-                  <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-                </TopActions>
+                {!(businessSingleId && auth) && (
+                  <TopActions onPress={() => handleBackNavigation()}>
+                    <AntDesignIcon
+                      name='arrowleft'
+                      size={26}
+                    />
+                  </TopActions>
+                )}
+                {showTitle && (
+                  <OText
+                    size={16}
+                    style={{ flex: 1, textAlign: 'center' }}
+                    weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                    numberOfLines={2}
+                    ellipsizeMode='tail'
+                  >
+                    {business?.name}
+                  </OText>
+                )}
                 {!errorQuantityProducts && (
                   <View style={{ ...styles.headerItem }}>
                     <TouchableOpacity
@@ -334,12 +452,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               <WrapSearchBar>
                 <SearchBar
                   autoFocus
-                  onSearch={handleChangeSearch}
+                  onSearch={onChangeSearch}
                   onCancel={() => handleCancel()}
                   isCancelXButtonShow
                   noBorderShow
                   placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
-                  lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                  lazyLoad
                 />
               </WrapSearchBar>
             )}
@@ -373,8 +491,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {business?.categories?.length > 0 && isOpenFiltProducts && (
           <FiltProductsContainer
             style={{
-              height: Dimensions.get('window').height - filtProductsHeight,
-              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight
+              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 55 : 0),
+              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight,
             }}
             contentContainerStyle={{ flexGrow: 1 }}
           >
@@ -407,15 +525,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 previouslyProducts={business?.previously_products}
                 navigation={navigation}
                 isFiltMode
+                businessSingleId={businessSingleId}
               />
             </View>
           </FiltProductsContainer>
         )}
-        {isOpenFiltProducts && (
-          <BackgroundGray isIos={Platform.OS === 'ios'} />
-        )}
         <IOScrollView
-          stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
+          stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
             marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
@@ -452,7 +568,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               />
             </ProfessionalFilterWrapper>
           )}
-          <PageBanner position='app_business_page' navigation={navigation} />
+          {businessState?.business?.id && (
+            <PageBanner position='app_business_page' businessId={businessState?.business?.id} navigation={navigation} />
+          )}
           <View
             style={{
               height: 8,
@@ -480,7 +598,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             <>
               <WrapContent
                 onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
-                style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+                style={{ paddingHorizontal: 20 }}
               >
                 <BusinessProductsList
                   categories={[
@@ -509,6 +627,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                   handleUpdateProducts={handleUpdateProducts}
                   navigation={navigation}
                   previouslyProducts={business?.previously_products}
+                  businessSingleId={businessSingleId}
                 />
               </WrapContent>
             </>
@@ -536,8 +655,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               </WrapContent>
             </>
           )}
+          {isOpenFiltProducts && (
+            <BackgroundGray isIos={Platform.OS === 'ios'} />
+          )}
         </IOScrollView>
-        {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
+        {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton
               btnText={
@@ -588,12 +710,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         <ServiceForm
           navigation={navigation}
           product={currentProduct}
-          businessSlug={business.slug}
-          businessId={business.id}
+          businessSlug={business?.slug}
+          businessId={business?.id}
           professionalList={business?.professionals}
           professionalSelected={professionalSelected}
           handleChangeProfessional={handleChangeProfessionalSelected}
-          handleChangeProfessional={handleChangeProfessionalSelected}
           handleUpdateProfessionals={handleUpdateProfessionals}
           onSave={() => setOpenService(false)}
           onClose={() => setOpenService(false)}
@@ -607,6 +728,8 @@ export const BusinessProductsListing = (props: BusinessProductsListingParams) =>
   const businessProductslistingProps = {
     ...props,
     isForceSearch: Platform.OS === 'ios',
+    isApp: true,
+    isFetchAllProducts: true,
     UIComponent: BusinessProductsListingUI
   }
   return (

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

@@ -7,7 +7,7 @@ export const TopHeader = styled.View`
   width: 100%;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ hideArrow }: any) => hideArrow ? 'flex-end' : 'space-between'};
   z-index: 1;
   height: 60px;
   min-height: 60px;
@@ -42,16 +42,15 @@ export const FiltProductsContainer = styled.ScrollView`
 
 export const BackgroundGray = styled.View`
   flex: 1;
-  height: ${(props: any) => props.isIos ? '80%' : '100%'};
+  height: 100%;
   background-color: rgba(0,0,0,0.5);
   position: absolute;
-  margin-top: 100px;
   z-index: 10000;
   width: 100%;
 `
 
 export const ProfessionalFilterWrapper = styled.View`
-  padding-left: 40px;
+  padding-left: 20px;
   margin-bottom: 35px;
 `
 
@@ -64,6 +63,6 @@ export const NearBusiness = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
-  padding-horizontal: 30px;
+  padding-horizontal: 20px;
   width: 100px;
 `;

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

@@ -3,6 +3,7 @@ import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
 	useOrder,
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
@@ -30,6 +31,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const theme = useTheme();
 	const [searchReview, setSearchReview] = useState('')
 	const [orderState] = useOrder();
+	const [{ parseDate }] = useUtils()
 
 	const styles = StyleSheet.create({
 		starIcon: {
@@ -94,7 +96,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
 			<OText size={12} color={theme.colors.textSecondary}>
-				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
+				{parseDate(created_at, { outputFormat: 'MMMM D, YYYY • hh:mm A' })}
 			</OText>
 			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>
@@ -107,7 +109,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent
-				contentContainerStyle={{ paddingHorizontal: 40, paddingVertical: 27 }}>
+				contentContainerStyle={{ paddingHorizontal: 20, paddingVertical: 27 }}>
 				{reviewsList.error ? (
 					<OText size={16}>{t('ERROR_UNKNOWN', 'An error has ocurred')}</OText>
 				) : (

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

@@ -415,7 +415,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
-							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							horizontal contentContainerStyle={{ paddingHorizontal: 20 }}>
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController

package/themes/original/src/components/BusinessesListing/Layout/Appointment/styles.tsx

@@ -54,13 +54,13 @@ export const WrapMomentOption = styled.TouchableOpacity`
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
 	height: 370px;
-	padding: 20px 40px;
+	padding: 20px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `;
 
 export const FeaturedWrapper = styled.View`
@@ -72,7 +72,7 @@ export const FeaturedWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `
 
 export const FarAwayMessage = styled.View`
@@ -98,10 +98,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { ListWrapper } from './styles'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { View } from 'react-native'
+
+export const FlatListBusinessListFooter = (props : any) => {
+    const {
+        businessesList,
+        paginationProps,
+        isChewLayout
+    } = props
+    return (
+        <>
+            <ListWrapper style={{ paddingHorizontal: 20 }}>
+                {(businessesList.loading || !businessesList?.fetched) && (
+                    <>
+                        {[
+                            ...Array(
+                                paginationProps.nextPageItems
+                                    ? paginationProps.nextPageItems
+                                    : 8,
+                            ).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>
+                                        <PlaceholderLine
+                                            height={20}
+                                            width={30}
+                                            style={{ marginBottom: 10 }}
+                                        />
+                                        <PlaceholderLine
+                                            height={20}
+                                            width={80}
+                                            style={{ marginBottom: 10 }}
+                                        />
+                                    </View>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+            </ListWrapper>
+        </>
+    )
+}