ordering-ui-react-native 0.21.49-test → 0.21.49-test-v2

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
-import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
+import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
 
@@ -11,10 +11,9 @@ import { NotFoundSource } from '../NotFoundSource';
 
 export const CartContent = (props: any) => {
 	const {
-		carts,
-		isOrderStateCarts,
 		onNavigationRedirect,
-		singleBusiness
+		singleBusiness,
+		businessSlug
 	} = props
 
 	const theme = useTheme();
@@ -22,16 +21,22 @@ export const CartContent = (props: any) => {
 	const [{ configs }] = useConfig()
 	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
-
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const [cartsOpened, setCartsOpened] = useState([])
+	const [{ carts: cartsContext }] = useOrder();
+	const cartsList =
+		(cartsContext &&
+			Object.values(cartsContext).filter((cart: any) => cart.products.length > 0)) ??
+		[];
+	const carts = businessSlug
+		? cartsList.filter((cart: any) => cart?.business?.slug === businessSlug || parseInt(businessSlug) === cart?.business_id)
+		: cartsList
+	const isOrderStateCarts = !!carts
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-
+	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2)
 	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
 	const totalCartsFee = cartsAvailable?.length && cartsAvailable
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
-
 	const handleCheckoutRedirect = () => {
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
@@ -66,9 +71,21 @@ export const CartContent = (props: any) => {
 		}
 	}
 
+	const changeActiveState = useCallback((isClosed : boolean, uuid : string) => {
+		const isActive = cartsOpened?.includes?.(uuid) || !!singleBusiness
+		if (isActive || !isClosed) {
+			setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
+		} else {
+			setCartsOpened([
+				...cartsOpened,
+				uuid
+			])
+		}
+	}, [cartsOpened])
+
 	return (
 		<CCContainer
-			style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+			style={{ paddingHorizontal: 20 }}
 		>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
@@ -88,8 +105,12 @@ export const CartContent = (props: any) => {
 										hideUpselling
 										businessConfigs={cart?.business?.configs}
 										hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
-                    hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
+										hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
 										hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
+										cartsOpened={cartsOpened}
+										setCartsOpened={setCartsOpened}
+										changeActiveState={changeActiveState}
+										isActive={cartsOpened?.includes?.(cart?.uuid) || !!singleBusiness}
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>
@@ -101,32 +122,32 @@ export const CartContent = (props: any) => {
 							{!!cartsAvailable.length && (
 								<ChCartsTotal>
 									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(totalCartsFee)}
-                      </OText>
-                    </View>
-                  )}
-                  {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
-                    configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('DRIVER_TIP', 'Driver tip')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
-                      </OText>
-                    </View>
-                  )}
-                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
-                      {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
-                    </OText>
-                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
-                  </View>
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+												{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
+											</OText>
+											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+												{parsePrice(totalCartsFee)}
+											</OText>
+										</View>
+									)}
+									{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+										configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+											<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+													{t('DRIVER_TIP', 'Driver tip')}
+												</OText>
+												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+													{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+												</OText>
+											</View>
+										)}
+									<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+											{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+										</OText>
+										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+									</View>
 									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
 										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
 											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}

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

@@ -9,7 +9,7 @@ export const Container = styled.View`
 `
 
 export const ItemListing = styled.ScrollView`
-  padding: 0 40px;
+  padding: 0 20px;
   margin: 0 0 140px;
 `
 
@@ -19,7 +19,7 @@ export const TopHeader = styled.View`
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding: 0 40px;
+  padding: 0 20px;
 `
 
 export const HeaderItem = styled.TouchableOpacity`

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

@@ -1,9 +1,11 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, SafeAreaView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import {
 	Checkout as CheckoutController,
@@ -46,7 +48,9 @@ import {
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
 	WalletPaymentOptionContainer,
-	CartHeader
+	CartHeader,
+	TopHeader,
+	TopActions
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { FloatingButton } from '../FloatingButton';
@@ -115,7 +119,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingHorizontal: 40
+			paddingHorizontal: 20
 		},
 		icon: {
 			top: 15,
@@ -124,13 +128,14 @@ const CheckoutUI = (props: any) => {
 			fontSize: 20
 		},
 		detailWrapper: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			width: '100%'
 		},
 		wrapperNavbar: {
-			paddingVertical: 0,
-			paddingHorizontal: 40,
-			marginVertical: 2
+			paddingVertical: 2,
+			paddingHorizontal: 20,
+			backgroundColor: theme?.colors?.white,
+			borderWidth: 0
 		}
 	})
 
@@ -163,6 +168,7 @@ const CheckoutUI = (props: any) => {
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
 	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
 	const [paymethodClicked, setPaymethodClicked] = useState<any>(null)
+	const [showTitle, setShowTitle] = useState(false)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
@@ -192,7 +198,11 @@ const CheckoutUI = (props: any) => {
 	}, cart?.subtotal)
 
 	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
-	const validateZipcodeCard = validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required && !paymethodSelected?.data?.card?.zipcode
+	const validateZipcodeCard = validationFields?.fields?.card?.zipcode?.enabled &&
+		validationFields?.fields?.card?.zipcode?.required &&
+		paymethodSelected?.data?.card &&
+		!paymethodSelected?.data?.card?.zipcode &&
+		paymethodSelected?.gateway === 'stripe'
 
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
@@ -327,6 +337,10 @@ const CheckoutUI = (props: any) => {
 		setPhoneUpdate(val)
 	}
 
+	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
 	useEffect(() => {
 		if (validationFields && validationFields?.fields?.checkout) {
 			checkValidationFields()
@@ -399,9 +413,33 @@ const CheckoutUI = (props: any) => {
 
 	return (
 		<>
-			<Container noPadding>
+			<View style={styles.wrapperNavbar}>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
+							<IconAntDesign
+								name='arrowleft'
+								size={26}
+							/>
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center', right: 15 }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{t('CHECKOUT', 'Checkout')}
+							</OText>
+						)}
+					</>
+				</TopHeader>
+			</View>
+			<Container noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
+						hideArrowLeft
 						title={t('CHECKOUT', 'Checkout')}
 						titleAlign={'center'}
 						onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}

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

@@ -113,3 +113,20 @@ export const CartHeader = styled.View`
   justify-content: space-between;
   margin-bottom: 10px;
 `
+
+export const TopActions = 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;
+`

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/native'
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 40px;
+  padding: 0 20px;
   justify-content: space-between;
   padding-bottom: 12px;
 

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import DatePicker from 'react-native-date-picker'
+import { DateContainer } from './styles';
+
+export const DatePickerUI = (props: any) => {
+	const {
+		birthdate,
+		handleChangeDate
+	} = props;
+
+	return (
+		<DateContainer>
+			<DatePicker mode="date" date={birthdate ? new Date(birthdate) : new Date()} onDateChange={handleChangeDate} />
+		</DateContainer>
+	);
+};
+

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native';
+
+export const DateContainer = styled.View`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 10px 15px;
+    border: 1px solid #E9ECEF;
+  }
+
+  .react-datepicker__triangle {
+    transform: translate(40px, 0px) !important;
+  }
+
+`

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

@@ -35,9 +35,7 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container
-      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
-    >
+    <Container>
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}

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

@@ -16,7 +16,5 @@ export const Tab = styled.TouchableOpacity`
 `
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -5,7 +5,7 @@ export const Container = styled.View`
   bottom: 0px;
   left: 0;
   right: 0;
-  padding: 12px 40px;
+  padding: 12px 20px;
   flex-direction: row;
   border-top-width: 1px;
   border-color: ${(props: any) => props.theme.colors.border};

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

@@ -61,7 +61,7 @@ export const GPSButton = (props: any) => {
     if (trackingStatus === 'not-determined') {
       trackingStatus = await requestTrackingPermission()
     }
-    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+    if ( trackingStatus === 'authorized' || trackingStatus === 'denied' || trackingStatus === 'unavailable') {
       setLoading(true)
       Geolocation.getCurrentPosition((pos) => {
         geoCodePosition(pos.coords)

package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx

@@ -56,7 +56,7 @@ export const GiftCardUI =  React.memo((props: any) => {
       <View style={style.actionWrapper}>
         <OButton
           onClick={() => setOpenModal('purchase')}
-          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          text={t('PURCHASE', 'Purchase')}
           bgColor={theme.colors.primary}
           borderColor={theme.colors.primary}
           textStyle={{ color: 'white', fontSize: 13 }}
@@ -66,7 +66,7 @@ export const GiftCardUI =  React.memo((props: any) => {
 
         <OButton
           onClick={() => setOpenModal('redeem')}
-          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          text={t('REDEEM', 'Redeem')}
           bgColor={theme.colors.lightPrimary}
           borderColor={theme.colors.lightPrimary}
           textStyle={{ color: theme.colors.primary, fontSize: 13 }}
@@ -79,13 +79,18 @@ export const GiftCardUI =  React.memo((props: any) => {
 				open={openModal === 'purchase'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
-				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+				<PurchaseGiftCard
+          handleCustomGoToCheckout={handleCustomGoToCheckout}
+          onClose={() => setOpenModal(null)}
+        />
 			</OModal>
       <OModal
 				open={openModal === 'redeem'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
 				<RedeemGiftCard
           onClose={() => setOpenModal(null)}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -3,10 +3,11 @@ import {
   useLanguage,
   PurchaseGiftCard as PurchaseGiftCardController
 } from 'ordering-components/native'
-import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView, Platform } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OIcon } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container
@@ -17,7 +18,8 @@ const PurchaseGiftCardUI = (props: any) => {
     productsListState,
     selectedProduct,
     setSelectedProduct,
-    handleAccept
+    handleAccept,
+    onClose
   } = props
 
   const theme = useTheme()
@@ -42,7 +44,38 @@ const PurchaseGiftCardUI = (props: any) => {
 
   return (
     <Container>
-      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <View style={{
+        marginBottom: 40,
+        marginTop: Platform.OS === 'ios' ? 30 : 50,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}>
+        <OButton
+          imgLeftStyle={{ width: 18 }}
+          imgRightSrc={null}
+          style={{
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: '#FFF',
+            borderColor: '#FFF',
+            shadowColor: '#FFF',
+            paddingLeft: 0,
+            paddingRight: 0,
+          }}
+          onClick={onClose}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26,
+            style: {
+              color: theme.colors.textNormal
+            }
+          }}
+        />
+        <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      </View>
       <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
       <ScrollView
         contentContainerStyle={{

package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const Container = styled.View`
   width: 100%;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   flex: 1;
   padding-bottom: 30px;
 `

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -3,9 +3,10 @@ import {
   useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
 } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
-import { StyleSheet, View, Alert } from 'react-native';
+import { StyleSheet, View, Alert, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
@@ -93,7 +94,38 @@ const RedeemGiftCardUI = (props: any) => {
     <Container>
       {!redeemedGiftCard ? (
         <View>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
@@ -106,7 +138,7 @@ const RedeemGiftCardUI = (props: any) => {
                   onChange(val)
                   handleChangeCode(val)
                 }}
-                autoCapitalize='none'
+                autoCapitalize='characters'
                 autoCorrect={false}
                 blurOnSubmit={false}
                 style={style.inputStyle}
@@ -156,7 +188,38 @@ const RedeemGiftCardUI = (props: any) => {
         </View>
       ) : (
         <>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+          </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>

package/themes/original/src/components/GiftCard/RedeemGiftCard/styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 export const FormController = styled.View`
   margin-bottom: 25px;

package/themes/original/src/components/GiftCard/SendGiftCard/styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-bottom: 30px;
 `
 export const FormController = styled.View`

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

@@ -56,7 +56,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
             showsHorizontalScrollIndicator={false}
             nestedScrollEnabled
             horizontal
-            style={{ height: 300, paddingHorizontal: 40 }}
+            style={{ height: 300, paddingHorizontal: 20 }}
           >
             {[
               ...Array(10).keys()

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

@@ -2,6 +2,6 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
   padding-top: 30px;
 `;

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

@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'space-between',
-		paddingHorizontal: 40,
+		paddingHorizontal: 20,
 	},
 	logo: {
 		marginTop: 64,

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

@@ -129,7 +129,8 @@ export const LastOrder = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 3,
 			controlType: 'infinity'
-		}
+		},
+		noGiftCardOrders: true
 	}
 
 	return <OrderList {...MyOrdersProps} />