ordering-ui-react-native 0.21.13 → 0.21.14-release

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

@@ -4,6 +4,7 @@ import {
 	PaymentOptionStripe,
 	useSession,
 	useLanguage,
+	useValidationFields
 } from 'ordering-components/native';
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
@@ -28,29 +29,29 @@ export const StripeCardsListUI = (props: any) => {
 		cardSelected,
 		cardsList,
 		handleCardClick,
-		setAddCardOpen,
+		onOpen,
 		gateway,
-		setCardsList,
-		addCardOpen,
-		isOpenMethod,
-		handlePaymethodDataChange
+		paySelected
 	} = props;
 
 	const theme = useTheme();
 
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
-
+	const [validationFields] = useValidationFields()
+	const validateZipcodeCard =
+		validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
 	const paymethodsWithoutSaveCards = ['credomatic']
 
 	const handleCardSelected = (card: any) => {
+		if (!card?.zipcode && validateZipcodeCard) return
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
 	useEffect(() => {
 		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
-			setAddCardOpen({ ...addCardOpen, stripe: true })
+			onOpen && onOpen();
 		}
 	}, [cardsList?.loading])
 
@@ -92,10 +93,10 @@ export const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length}>
+						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
-									{card.id === cardSelected?.id ? (
+									{(card.id === cardSelected?.id || card.id === paySelected?.data?.id) ? (
 										<OIcon
 											src={theme.images.general.radio_act}
 											width={16}
@@ -117,6 +118,13 @@ export const StripeCardsListUI = (props: any) => {
 										XXXX-XXXX-XXXX-{card.last4}
 									</OText>
 								</View>
+								{!card?.zipcode && validateZipcodeCard && (
+									<View style={styles.viewStyle}>
+										<OText size={10} color={theme?.colors?.danger5}>
+											({t('MISSING_ZIPCODE', 'Missing zipcode')})
+										</OText>
+									</View>
+								)}
 							</OSItemContent>
 							<OSItemActions>
 								<OAlert
@@ -135,33 +143,6 @@ export const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
-			<OModal
-				entireModal
-				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={addCardOpen.stripe}
-				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-				style={{ backgroundColor: 'red' }}
-			>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
-					enabled={Platform.OS === 'ios' ? true : false}
-				>
-					<StripeElementsForm
-						openCarts={props.openCarts}
-						toSave
-						businessId={props.businessId}
-						businessIds={props.businessIds}
-						publicKey={props.publicKey || isOpenMethod?.paymethod?.credentials?.publishable}
-						setCardsList={setCardsList}
-						cardsList={cardsList}
-						requirements={props.clientSecret}
-						handleCardClick={handleCardClick}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
 		</>
 	)
 }

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

@@ -33,7 +33,10 @@ const StripeElementsFormUI = (props: any) => {
 		placeByMethodPay,
 		methodPaySupported,
 		setPlaceByMethodPay,
-		cartTotal
+		cartTotal,
+		publicKeyAddCard,
+		urlScheme,
+		androidAppId
 	} = props;
 
 	const theme = useTheme();
@@ -52,10 +55,11 @@ const StripeElementsFormUI = (props: any) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
 	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+	const isToSave = methodsPay?.includes(paymethod) ? publicKey : publicKeyAddCard
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			justifyContent: 'space-between',
 			paddingBottom: 12
 		},
@@ -200,9 +204,9 @@ const StripeElementsFormUI = (props: any) => {
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider
-						publishableKey={publicKey}
+						publishableKey={isToSave}
 						merchantIdentifier={merchantId}
-						urlScheme={merchantId}
+						urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
 					>
 						{methodsPay?.includes(paymethod) ? (
 							<StripeMethodForm
@@ -217,6 +221,7 @@ const StripeElementsFormUI = (props: any) => {
 								placeByMethodPay={placeByMethodPay}
 								methodPaySupported={methodPaySupported}
 								setPlaceByMethodPay={setPlaceByMethodPay}
+								androidAppId={androidAppId}
 							/>
 						) : (
 							<CardField

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import {
+    useLanguage,
+    useOrder,
+    useConfig
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { OText, OButton } from '../shared'
+import {
+    CartList,
+    CartDivider,
+    TopActionsHeader,
+    TopHeader
+} from './styles'
+import { OrderSummary } from '../OrderSummary';
+import { Cart } from '../Cart';
+import { ScrollView } from 'react-native-gesture-handler';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UpsellingLayout } from './UpsellingLayout';
+
+export const UpsellingContent = (props : any) => {
+    const {
+        onGoBack,
+        handleUpsellingPage,
+        onNavigationRedirect,
+        cart,
+        productsList
+    } = props
+
+    const theme = useTheme();
+
+    const [{ carts }] = useOrder()
+    const [{ configs }] = useConfig()
+    const [, t] = useLanguage()
+    const { bottom } = useSafeAreaInsets()
+    const [isCartsLoading, setIsCartsLoading] = useState(false)
+    const [showTitle, setShowTitle] = useState(false)
+
+    const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+    const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+    const showCartList = isChewLayout
+    const commentDelayTime = isChewLayout ? 500 : null
+
+    const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
+    
+    const styles = StyleSheet.create({
+        closeUpsellingButton: {
+            borderRadius: 7.6,
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            borderWidth: 1,
+            alignSelf: 'center',
+            height: 44,
+            shadowOpacity: 0,
+            width: '80%',
+        },
+        cancelBtn: {
+            paddingHorizontal: 18,
+            borderWidth: 1,
+            borderRadius: 7.6,
+            borderColor: theme.colors.textSecondary,
+            height: 38
+        },
+        headerItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 2,
+            marginHorizontal: 20,
+        },
+        btnBackArrow: {
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: theme.colors.clear,
+            borderColor: theme.colors.clear,
+            shadowColor: theme.colors.clear,
+            paddingLeft: 0,
+            paddingRight: 0,
+            marginLeft: 20,
+            marginBottom: 10
+        },
+        wrapperNavbar: {
+            paddingHorizontal: 20,
+            paddingTop: 0,
+        }
+    })
+
+
+    const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+        setShowTitle(contentOffset.y > 30)
+    }
+
+    return (
+        <>
+            <View style={styles.wrapperNavbar}>
+                <TopHeader>
+                    <>
+                        <TopActionsHeader onPress={() => onGoBack()}>
+                            <IconAntDesign
+                                name='arrowleft'
+                                size={26}
+                            />
+                        </TopActionsHeader>
+                        {showTitle && (
+                            <OText
+                                size={16}
+                                style={{ flex: 1, textAlign: 'center', right: 15 }}
+                                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                                numberOfLines={2}
+                                ellipsizeMode='tail'
+                            >
+                                {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
+                            </OText>
+                        )}
+                    </>
+                </TopHeader>
+            </View>
+            <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false} onScroll={handleScroll}>
+                {productsList.length > 0 &&
+                    <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+                        <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+                        <UpsellingLayout {...props} />
+                    </View>
+                }
+                <View style={{ paddingHorizontal: 40 }}>
+                    <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+                    <OrderSummary
+                        cart={cart}
+                        commentDelayTime={commentDelayTime}
+                        isCartPending={cart?.status === 2}
+                        onNavigationRedirect={onNavigationRedirect}
+                    />
+                </View>
+                {showCartList && cartList.map((cart: any, i: number) => (
+                    <CartList key={i}>
+                        <Cart
+                            isFromUpselling
+                            cart={cart}
+                            cartuuid={cart.uuid}
+                            hideUpselling
+                            singleBusiness={props.singleBusiness}
+                            isFranchiseApp={props.isFranchiseApp}
+                            isCartsLoading={isCartsLoading}
+                            setIsCartsLoading={setIsCartsLoading}
+                            isMultiCheckout={isMultiCheckout}
+                            onNavigationRedirect={props.onNavigationRedirect}
+                        />
+                        <CartDivider />
+                    </CartList>
+                ))}
+            </ScrollView>
+            <View
+                style={{
+                    alignItems: 'center',
+                    bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+                }}
+            >
+                <OButton
+                    imgRightSrc=''
+                    text={t('CHECKOUT', 'Checkout')}
+                    style={{ ...styles.closeUpsellingButton }}
+                    textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                    onClick={() => handleUpsellingPage(cart)}
+                />
+            </View>
+        </>
+    )
+}

package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import {
+    useUtils,
+    useLanguage
+} from 'ordering-components/native'
+import {
+    Container,
+    UpsellingContainer,
+    Item,
+    Details,
+    AddButton,
+} from './styles'
+import { OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native';
+
+export const UpsellingLayout = (props : any) => {
+    const {
+        upsellingProducts,
+        productsList,
+        onNavigationRedirect,
+        business
+    } = props
+    const theme = useTheme()
+    const [{ parsePrice }] = useUtils()
+    const [, t] = useLanguage()
+
+    const styles = StyleSheet.create({
+        imageStyle: {
+            width: 73,
+            height: 73,
+            resizeMode: 'cover',
+            borderRadius: 7.6,
+        },
+    })
+
+    const handleFormProduct = (product: any) => {
+        onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+            product: product,
+            businessId: product?.api?.businessId,
+            businessSlug: business.slug,
+        })
+    }
+
+
+    return (
+        <>
+            <Container>
+                <UpsellingContainer
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
+                >
+                    {
+                        !upsellingProducts.loading && (
+                            <>
+                                {
+                                    !upsellingProducts.error ? productsList.map((product: any, i: number) => (
+                                        <Item key={`${product.id}_${i}`}>
+                                            <View style={{ flexBasis: '57%' }}>
+                                                <Details>
+                                                    <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
+                                                    <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
+                                                </Details>
+                                                <AddButton onPress={() => handleFormProduct(product)}>
+                                                    <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
+                                                </AddButton>
+                                            </View>
+                                            <View>
+                                                <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                                            </View>
+                                        </Item>
+                                    )) : (
+                                        <OText>
+                                            {upsellingProducts.message}
+                                        </OText>
+                                    )
+                                }
+                            </>
+                        )
+                    }
+                </UpsellingContainer>
+            </Container>
+        </>
+    )
+}

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

@@ -1,116 +1,41 @@
-import React, { useState, useEffect } from 'react'
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
+import React, { useEffect } from 'react'
 import {
   UpsellingPage as UpsellingPageController,
-  useUtils,
-  useLanguage,
   useOrder,
-  useConfig
 } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OBottomPopup, OButton } from '../shared'
+import { OBottomPopup } from '../shared'
 import { UpsellingProductsParams } from '../../types'
-import {
-  Container,
-  UpsellingContainer,
-  Item,
-  Details,
-  AddButton,
-  CartList,
-  CartDivider
-} from './styles'
-import { OrderSummary } from '../OrderSummary';
-import { Cart } from '../Cart';
-import { ScrollView } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { UpsellingLayout } from './UpsellingLayout';
+import { UpsellingContent } from './UpsellingContent';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   const {
     isCustomMode,
     upsellingProducts,
-    business,
     handleUpsellingPage,
     openUpselling,
     canOpenUpselling,
     setCanOpenUpselling,
-    isFromCart,
-    onNavigationRedirect,
-    onGoBack
+    isFromCart
   } = props
 
-  const theme = useTheme();
-
-  const styles = StyleSheet.create({
-    imageStyle: {
-      width: 73,
-      height: 73,
-      resizeMode: 'cover',
-      borderRadius: 7.6,
-    },
-    closeUpsellingButton: {
-      borderRadius: 7.6,
-      borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.primary,
-      borderWidth: 1,
-      alignSelf: 'center',
-      height: 44,
-      shadowOpacity: 0,
-      width: '80%',
-    },
-    cancelBtn: {
-      paddingHorizontal: 18,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      borderColor: theme.colors.textSecondary,
-      height: 38
-    },
-    headerItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginVertical: 2,
-      marginHorizontal: 20,
-    },
-    btnBackArrow: {
-      borderWidth: 0,
-      width: 26,
-      height: 26,
-      backgroundColor: theme.colors.clear,
-      borderColor: theme.colors.clear,
-      shadowColor: theme.colors.clear,
-      paddingLeft: 0,
-      paddingRight: 0,
-      marginLeft: 20,
-      marginBottom: 10
-    },
-  })
-
   const [{ carts }] = useOrder()
-  const [{ parsePrice }] = useUtils()
-  const [{ configs }] = useConfig()
-  const [, t] = useLanguage()
-  const { bottom } = useSafeAreaInsets()
-  const [isCartsLoading, setIsCartsLoading] = useState(false)
-
-  const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const showCartList = isChewLayout
-  const commentDelayTime = isChewLayout ? 500 : null
 
   const cart = carts?.[`businessId:${props.businessId}`] ?? {}
-  const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
   const cartProducts = cart?.products?.length
-    ? cart?.products.map((product: any) => product.id)
-    : []
+  ? cart?.products.map((product: any) => product.id)
+  : []
 
   const productsList = !upsellingProducts.loading && !upsellingProducts.error
-    ? upsellingProducts?.products?.length
+  ? upsellingProducts?.products?.length
       ? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
       : (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-    : []
+  : []
 
   useEffect(() => {
     if (!isCustomMode && !props.products) {
-      if (!upsellingProducts.loading) {
+      if (!upsellingProducts?.loading) {
         if (upsellingProducts?.products?.length && !isFromCart) {
           setCanOpenUpselling && setCanOpenUpselling(true)
         } else {
@@ -118,125 +43,16 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         }
       }
     }
-  }, [upsellingProducts.loading, upsellingProducts?.products.length])
-
-  const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
-    })
-  }
-
-  const UpsellingLayout = () => {
-    return (
-      <Container>
-        <UpsellingContainer
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
-        >
-          {
-            !upsellingProducts.loading && (
-              <>
-                {
-                  !upsellingProducts.error ? productsList.map((product: any, i: number) => (
-                    <Item key={`${product.id}_${i}`}>
-                      <View style={{ flexBasis: '57%' }}>
-                        <Details>
-                          <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
-                          <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
-                        </Details>
-                        <AddButton onPress={() => handleFormProduct(product)}>
-                          <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
-                        </AddButton>
-                      </View>
-                      <View>
-                        <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
-                      </View>
-                    </Item>
-                  )) : (
-                    <OText>
-                      {upsellingProducts.message}
-                    </OText>
-                  )
-                }
-              </>
-            )
-          }
-        </UpsellingContainer>
-      </Container>
-    )
-  }
-
-  const UpsellingContent = () => {
-    return (
-      <>
-        <View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
-          <TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
-            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-          </TouchableOpacity>
-        </View>
-        <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
-          {productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <View style={{ paddingHorizontal: 40 }}>
-            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-            <OrderSummary
-              cart={cart}
-              commentDelayTime={commentDelayTime}
-              isCartPending={cart?.status === 2}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-          {showCartList && cartList.map((cart: any, i: number) => (
-            <CartList key={i}>
-              <Cart
-                isFromUpselling
-                cart={cart}
-                cartuuid={cart.uuid}
-                hideUpselling
-                singleBusiness={props.singleBusiness}
-                isFranchiseApp={props.isFranchiseApp}
-                isCartsLoading={isCartsLoading}
-                setIsCartsLoading={setIsCartsLoading}
-                isMultiCheckout={isMultiCheckout}
-                onNavigationRedirect={props.onNavigationRedirect}
-              />
-              <CartDivider />
-            </CartList>
-          ))}
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{ ...styles.closeUpsellingButton }}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => handleUpsellingPage(cart)}
-          />
-        </View>
-      </>
-    )
-  }
+  }, [upsellingProducts?.loading, upsellingProducts?.products?.length])
 
   return (
     <>
       {isCustomMode ? (
-        <UpsellingLayout />
+        <UpsellingLayout {...props} productsList={productsList} />
       ) : (
         <>
           {props.isPage ? (
-            <UpsellingContent />
+            <UpsellingContent {...props} cart={cart} productsList={productsList} />
           ) : (
             canOpenUpselling && (
               <OBottomPopup
@@ -245,7 +61,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                 onClose={() => handleUpsellingPage(cart)}
                 isStatusBar
               >
-                <UpsellingContent />
+                <UpsellingContent {...props} productsList={productsList} />
               </OBottomPopup>
             )
           )}

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

@@ -59,3 +59,22 @@ export const CartDivider = styled.View`
   background-color:  ${(props: any) => props.theme.colors.backgroundGray100};
   margin: 20px -40px 0;
 `
+
+
+export const TopActionsHeader = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`
+