ordering-ui-react-native 0.17.5 → 0.17.6-release

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

@@ -12,27 +12,28 @@ import {
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, style }: any) => {
+const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, handleCustomUpdate, style }: any) => {
   return (
     <>
       {businesses?.result?.map((business: any, i: number) => (
-        <BusinessController
-          key={`${business.id}_` + i}
-          business={business}
-          isBusinessOpen={business.open}
-          handleCustomClick={() => onBusinessClick(business)}
-          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}
-          style={style}
-        />
+        <View style={style} key={`${business.id}_` + i}>
+          <BusinessController
+            business={business}
+            isBusinessOpen={business.open}
+            handleCustomClick={() => onBusinessClick(business)}
+            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}
+            handleCustomUpdate={handleCustomUpdate}
+          />
+        </View>
       ))}
     </>
   )
@@ -92,6 +93,7 @@ export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) =>
     businesses,
     onNavigationRedirect,
     isBusinessesSearchList,
+    handleUpdateBusinesses,
   } = props
 
   const [orderState] = useOrder()
@@ -107,7 +109,12 @@ export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) =>
   });
 
   return (
-    <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
+    <ScrollView
+      horizontal={isBusinessesSearchList}
+      style={styles.container}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+    >
       {isBusinessesSearchList ? (
         <>
           {!businesses?.loading && (
@@ -117,6 +124,7 @@ export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) =>
               orderState={orderState}
               navigation={navigation}
               businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
             />
           )}
         </>
@@ -130,6 +138,7 @@ export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) =>
               orderState={orderState}
               navigation={navigation}
               businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
             />
           )}
         </ListWrapper>

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

@@ -3,7 +3,6 @@ import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OButton } from '../shared'
-import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 import { PreviousBusinessOrdered } from './PreviousBusinessOrdered'
@@ -18,6 +17,7 @@ import {
 } from "rn-placeholder";
 
 import { View, ScrollView } from 'react-native'
+import { getOrderStatus, flatArray } from '../../utils'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -48,7 +48,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		hideOrders,
 		BusinessControllerSkeletons,
 		businesses,
-		businessPaginationProps
+		businessPaginationProps,
+		handleUpdateProducts,
+		handleUpdateBusinesses
 	} = props
 
 	const theme = useTheme();
@@ -58,46 +60,45 @@ 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 = []
 
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s)
-		const orderStatus = [
-			{ key: 0, value: t('PENDING', 'Pending') },
-			{ key: 1, value: t('COMPLETED', 'Completed') },
-			{ key: 2, value: t('REJECTED', 'Rejected') },
-			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-			{ key: 13, value: t('PREORDER', 'PreOrder') },
-			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
+	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)
+				.map((_o: any, _: any, _ordersList: any) => {
+					const obj = {
+						..._o,
+						id: _ordersList.map(o => o.id),
+						review: _o.review,
+						user_review: _o.user_review,
+						total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
+						business: _ordersList.map((o: any) => o.business),
+						business_id: _ordersList.map((o: any) => o.business_id),
+						products: _ordersList.map((o: any) => o.products)
+					}
+					return obj
+				}).find((o: any) => o)
+			: 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 onProductClick = (product: any) => {
 		if (product?.product_id && product?.category_id && product?.businessId &&
@@ -119,6 +120,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}
 
 	useEffect(() => {
+		if (reorderState?.loading) return
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
 			if (reorderState?.result?.business_id) {
@@ -126,21 +128,39 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 				navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
 			}
 		}
-		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+		if (!reorderState?.error && !reorderState.loading && reorderState?.result?.business_id) {
 			const cartProducts = carts?.[_businessId]?.products
-			const available = cartProducts.every((product: any) => product.valid === true)
-			const orderProducts = orders.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 })
+			const available = cartProducts.every((product: any) => product.valid)
+			const orderProducts = orders.find(
+				(order: any) => Array.isArray(order?.id)
+					? order?.id?.includes(reorderState?.result?.orderId)
+					: order?.id === reorderState?.result?.orderId
+			)?.products
+
+			const productsFlatten = orderProducts?.length && flatArray(orderProducts)?.filter(product => product?.order_id === reorderState?.result?.orderId)
+
+			if (available && reorderState?.result?.uuid && (cartProducts?.length === productsFlatten?.length)) {
+				const multiOrders = flatArray(orderProducts)?.map(product => product.order_id)
+				const params = multiOrders?.length > 1
+					? { screen: 'MultiCheckout', checkCarts: true }
+					: { cartUuid: reorderState?.result.uuid }
+
+				onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', params)
 			} else {
 				_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
-				cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+				cartProducts?.length !== productsFlatten?.length && _setStoreData('already-removed', JSON.stringify('removed'))
 				navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
 			}
 		}
 	}, [reorderState])
 
+	useEffect(() => {
+		if (reorderState?.error) {
+			showToast(ToastType.Error, reorderState?.result)
+		}
+	}, [reorderState])
+
 	useFocusEffect(
 		React.useCallback(() => {
 			if (!businessesSearchList) {
@@ -159,14 +179,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) {
@@ -191,7 +211,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 				</NoOrdersWrapper>
 			)}
-			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
+			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (
 				<>
 					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
 						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
@@ -204,20 +224,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 							</OText>
 						</OptionTitle>
 					)}
-
-					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
-						!loading &&
-						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
-						(
-							<NotFoundSource
-								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-								image={imageFails}
-								conditioned
-							/>
-						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businesses?.loading &&  (
+			{isBusiness && !!businessesSearchList && businesses?.loading && (
 				<ScrollView horizontal>
 					<BusinessControllerSkeletons paginationProps={businessPaginationProps} />
 				</ScrollView>
@@ -227,6 +236,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					onNavigationRedirect={onNavigationRedirect}
 					isBusinessesSearchList={!!businessesSearchList}
 					businesses={businesses}
+					handleUpdateBusinesses={handleUpdateBusinesses}
 				/>
 			)}
 
@@ -234,6 +244,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 				<PreviousProductsOrdered
 					products={products}
 					onProductClick={onProductClick}
+					handleUpdateProducts={handleUpdateProducts}
 					isBusinessesSearchList={!!businessesSearchList}
 				/>
 			)}
@@ -258,38 +269,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))}
@@ -321,9 +301,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>
+					)}
+				</>
+			)}
 		</>
 	)
 }

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

@@ -0,0 +1,171 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useUtils, useEvent, PageBanner as PageBannerController } from 'ordering-components/native'
+import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Carousel from 'react-native-snap-carousel'
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useTheme } from 'styled-components/native';
+import { PageBannerWrapper } from './styles'
+
+const PageBannerUI = (props: any) => {
+  const {
+    pageBannerState,
+    navigation
+  } = props
+
+	const theme = useTheme();
+	const [{ optimizeImage }] = useUtils();
+  const [events] = useEvent()
+  const carouselRef = useRef<any>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [viewedBanner, setViewedBanner] = useState<any>(null)
+
+  const windowWidth = Dimensions.get('window').width;
+
+  const styles = StyleSheet.create({
+    mainSwiper: {
+			height: 300,
+		},
+    swiperButton: {
+      position: 'absolute',
+      zIndex: 100,
+			alignItems: 'center',
+			justifyContent: 'center',
+			width: 32,
+			height: 32,
+			borderRadius: 16,
+			backgroundColor: 'rgba(208,208,208,0.5)'
+		},
+    sliderWrapper: {
+      width: '100%',
+      height: 300
+    }
+  })
+
+  const onRedirect = (route: string, params?: any) => {
+		navigation.push(route, params)
+	}
+
+  const handleGoToPage = (item: any) => {
+    const action = item.action
+    if (!action?.url) return
+    let slug
+    if (action.type === 'business') {
+      slug = action.url.split('store/')[1]
+      onRedirect('Business', {
+        store: slug
+      })
+    }
+    if (action.type === 'product') {
+      slug = action.url.split('store/')[1]?.split('?')[0]
+      onRedirect('ProductDetails', {
+				businessSlug: slug,
+				businessId: action.business_id,
+        categoryId: action.category_id,
+        productId: action.product_id
+			})
+    }
+    const clickedBanner = pageBannerState.result.find(banner => banner.id === item?.banner_id)
+    events.emit('promotion_clicked', clickedBanner)
+  }
+
+  const renderItem = ({ item, index }) => {
+    return (
+      <TouchableOpacity
+        onPress={() => handleGoToPage(item)}
+      >
+        <View style={styles.sliderWrapper}>
+          <FastImage
+            style={{ height: '100%', width: '100%' }}
+            resizeMode='cover'
+            source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
+          />
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  const updateIndex = () => {
+    setCurrentIndex(carouselRef?.current?.currentIndex)
+  }
+
+  useEffect(() => {
+    if (pageBannerState.loading) return
+    if (pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0) {
+      const bannerId = pageBannerState.banner.items[currentIndex]?.banner_id
+      if (pageBannerState.result && bannerId) {
+        const _viewedBanner = pageBannerState.result.find(banner => banner.id === bannerId)
+        if (_viewedBanner?.id !== viewedBanner?.id) {
+          setViewedBanner(_viewedBanner)
+          events.emit('promotion_viewed', _viewedBanner)
+        }
+      }
+    }
+  }, [pageBannerState.loading, currentIndex, viewedBanner])
+
+  return (
+    <>
+      {pageBannerState.loading ? (
+        <PageBannerWrapper>
+          <Placeholder
+            Animation={Fade}
+          >
+            <PlaceholderLine
+							height={300}
+							style={{ marginBottom: 20, borderRadius: 8 }}
+						/>
+          </Placeholder>
+        </PageBannerWrapper>
+      ) : (
+        <>
+          {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
+            <PageBannerWrapper>
+              <TouchableOpacity
+                style={[styles.swiperButton, { left: 25 }]}
+                onPress={() => carouselRef.current.snapToPrev()}
+              >
+                <IconAntDesign
+                  name="caretleft"
+                  color={theme.colors.white}
+                  size={13}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.swiperButton, { right: 25 }]}
+                onPress={() => carouselRef.current.snapToNext()}
+              >
+                <IconAntDesign
+                  name="caretright"
+                  color={theme.colors.white}
+                  size={13}
+                />
+              </TouchableOpacity>
+              <Carousel
+                ref={carouselRef}
+                loop={pageBannerState.banner?.items.length > 1}
+                data={pageBannerState.banner?.items}
+                renderItem={renderItem}
+                sliderWidth={windowWidth - 80}
+                itemWidth={windowWidth - 80}
+                inactiveSlideScale={1}
+                pagingEnabled
+                removeClippedSubviews={false}
+                inactiveSlideOpacity={1}
+                onSnapToItem={updateIndex}
+              />
+            </PageBannerWrapper>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export const PageBanner = (props: any) => {
+  const pageBannerProps = {
+    ...props,
+    UIComponent: PageBannerUI
+  }
+  return <PageBannerController {...pageBannerProps} />
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const PageBannerWrapper = styled.View`
+  margin-horizontal: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-vertical: 30px;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+`

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

@@ -39,7 +39,7 @@ export const OSItem = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 0px;
+  padding: 10px 0px;
 `;
 
 export const OSItemContent = styled.TouchableOpacity`