ordering-ui-react-native 0.21.45 → 0.21.46-release

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

@@ -1,9 +1,12 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler, 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 { useIsFocused } from '@react-navigation/native';
+
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import {
 	Checkout as CheckoutController,
@@ -46,7 +49,9 @@ import {
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
 	WalletPaymentOptionContainer,
-	CartHeader
+	CartHeader,
+	TopHeader,
+	TopActions
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { FloatingButton } from '../FloatingButton';
@@ -96,10 +101,13 @@ const CheckoutUI = (props: any) => {
 		currency,
 		merchantId,
 		setPlaceSpotNumber,
-		maxDate
+		maxDate,
+		androidAppId,
+		urlscheme
 	} = props
 
 	const theme = useTheme();
+	const isFocused = useIsFocused();
 
 	const styles = StyleSheet.create({
 		btnBackArrow: {
@@ -115,7 +123,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingHorizontal: 40
+			paddingHorizontal: 20
 		},
 		icon: {
 			top: 15,
@@ -124,13 +132,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
 		}
 	})
 
@@ -154,7 +163,7 @@ const CheckoutUI = (props: any) => {
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
 	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
-	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
+	const [showGateway, setShowGateway] = useState<any>({ closedByUser: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
@@ -163,12 +172,14 @@ 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 [isGiftCardCart, setIsGiftCardCart] = useState(!cart?.business_id)
+	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
-	const isGiftCardCart = !cart?.business_id
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -201,7 +212,7 @@ const CheckoutUI = (props: any) => {
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		(cardsMethods.includes(paymethodSelected?.gateway) && cardList?.cards?.length === 0) ||
-		(options.type === 1 &&
+		(options.type === 1 && !isGiftCardCart &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
@@ -331,6 +342,10 @@ const CheckoutUI = (props: any) => {
 		setPhoneUpdate(val)
 	}
 
+	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
 	useEffect(() => {
 		if (validationFields && validationFields?.fields?.checkout) {
 			checkValidationFields()
@@ -346,13 +361,23 @@ const CheckoutUI = (props: any) => {
 
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			if (cart?.business?.slug) {
+			if (cart?.business_id !== null) {
 				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
-			} else {
+			} else if (isGiftCardCart) {
 				onNavigationRedirect('Wallets')
 			}
 		}
-	}, [cart?.products])
+	}, [cart?.products?.length])
+
+	useEffect(() => {
+		if (cart?.products?.length > 0) {
+			if (cart?.uuid && cart?.business_id === null) {
+				setIsGiftCardCart(true)
+			} else {
+				setIsGiftCardCart(false)
+			}
+		}
+	}, [cart?.uuid, cart?.products?.length])
 
 	useEffect(() => {
 		onFailPaypal()
@@ -392,6 +417,7 @@ const CheckoutUI = (props: any) => {
 	}, [])
 
 	useEffect(() => {
+		if (!isFocused) return
 		if (!cartState?.loading && (cartState?.error || typeof cartState?.cart === 'string')) {
 			const error = cartState?.error || typeof cartState.cart === 'string' && cartState.cart
 			if (error) {
@@ -399,13 +425,61 @@ const CheckoutUI = (props: any) => {
 				navigation.navigate('BusinessList')
 			}
 		}
-	}, [cartState?.error, cartState?.cart, cartState?.loading])
+	}, [cartState?.error, cartState?.cart, cartState?.loading, isFocused])
+
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			containerRef?.current?.scrollToEnd && containerRef.current.scrollToEnd({ animated: true })
+		})
+		return () => {
+			keyboardDidShowListener.remove()
+		}
+	}, [])
+
+	useEffect(() => {
+		const onBackFunction = () => {
+			if (webviewPaymethod?.gateway === 'paypal' && showGateway.open) {
+				setShowGateway({ open: false, closedByUser: true })
+				return true
+			} else {
+				return false
+			}
+		}
+		BackHandler.addEventListener('hardwareBackPress', onBackFunction)
+		return () => {
+			BackHandler.removeEventListener('hardwareBackPress', onBackFunction)
+		}
+	}, [BackHandler, webviewPaymethod?.gateway, showGateway.open])
 
 	return (
 		<>
-			<Container noPadding>
+			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+				<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>
+			</SafeAreaView>
+			<Container pt={0} forwardRef={containerRef} showsVerticalScrollIndicator={false} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
+						hideArrowLeft
 						title={t('CHECKOUT', 'Checkout')}
 						titleAlign={'center'}
 						onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}
@@ -417,44 +491,46 @@ const CheckoutUI = (props: any) => {
 					/>
 				</View>
 				<ChContainer style={styles.pagePadding}>
-					<ChSection style={{ paddingTop: 0 }}>
-						<ChHeader>
-							<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText
-									size={12}
-									numberOfLines={1}
-									ellipsizeMode={'tail'}
-									color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
-								>
-									{t(getTypesText(options?.type || 1), 'Delivery')}
-								</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-									{...(isChewLayout && { color: 'white' })}
-								/>
-							</CHMomentWrapper>
-							<CHMomentWrapper
-								onPress={() => handleMomentClick()}
-								disabled={loading}
-							>
-								<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
-									{options?.moment
-										? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-										: t('ASAP_ABBREVIATION', 'ASAP')}
-								</OText>
-								{isPreOrder && (
+					{!isGiftCardCart && (
+						<ChSection style={{ paddingTop: 0 }}>
+							<ChHeader>
+								<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
+									<OText
+										size={12}
+										numberOfLines={1}
+										ellipsizeMode={'tail'}
+										color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
+									>
+										{t(getTypesText(options?.type || 1), 'Delivery')}
+									</OText>
 									<OIcon
 										src={theme.images.general.arrow_down}
 										width={10}
 										style={{ marginStart: 8 }}
+										{...(isChewLayout && { color: 'white' })}
 									/>
-								)}
-							</CHMomentWrapper>
-						</ChHeader>
-						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
-					</ChSection>
+								</CHMomentWrapper>
+								<CHMomentWrapper
+									onPress={() => handleMomentClick()}
+									disabled={loading}
+								>
+									<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
+										{options?.moment
+											? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+											: t('ASAP_ABBREVIATION', 'ASAP')}
+									</OText>
+									{isPreOrder && (
+										<OIcon
+											src={theme.images.general.arrow_down}
+											width={10}
+											style={{ marginStart: 8 }}
+										/>
+									)}
+								</CHMomentWrapper>
+							</ChHeader>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
+						</ChSection>
+					)}
 
 					{!isGiftCardCart && !hideBusinessDetails && (
 						<ChSection>
@@ -544,13 +620,15 @@ const CheckoutUI = (props: any) => {
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
 												textStyle={{ color: theme.colors.white }}
+												bgColor={theme.colors.primary}
+												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, signup: true })}
 											/>
 											<OButton
 												text={t('LOGIN', 'Login')}
-												textStyle={{ color: theme.colors.primary }}
-												bgColor={theme.colors.white}
+												textStyle={{ color: theme.colors.white }}
+												bgColor={theme.colors.primary}
 												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}
@@ -695,7 +773,7 @@ const CheckoutUI = (props: any) => {
 						cart?.status !== 2 &&
 						validationFields?.fields?.checkout?.driver_tip?.enabled &&
 						driverTipsOptions && driverTipsOptions?.length > 0 &&
-						!isGiftCardCart &&
+						cart?.business_id &&
 						(
 							<ChSection>
 								<ChDriverTips>
@@ -743,6 +821,8 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									urlscheme={urlscheme}
+									androidAppId={androidAppId}
 									setMethodPaySupported={setMethodPaySupported}
 									methodPaySupported={methodPaySupported}
 									placeByMethodPay={placeByMethodPay}
@@ -788,7 +868,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
-								{cartsWithProducts && cart?.products?.length === 0 ? (
+								{cartsWithProducts?.length > 0 && cart?.products?.length === 0 ? (
 									<NotFoundSource
 										content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
 										btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
@@ -866,13 +946,15 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 
-								{!cart?.valid_products && cart?.status !== 2 && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
-									</OText>
+								{!cart?.valid_products && cart?.status !== 2 && cart?.total !== 0 && (
+									<>
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+										</OText>
+									</>
 								)}
 								{cart?.valid_preorder !== undefined && !cart?.valid_preorder && (
 									<OText
@@ -882,7 +964,7 @@ const CheckoutUI = (props: any) => {
 										{t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}
 									</OText>
 								)}
-								{options.type === 1 &&
+								{options.type === 1 && !isGiftCardCart &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&
 									(Number(cart?.driver_tip) <= 0) && (

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,33 @@
+import React from 'react';
+import DatePicker from 'react-native-date-picker'
+import { DateContainer } from './styles';
+import { useLanguage } from 'ordering-components/native';
+
+export const DatePickerUI = (props: any) => {
+	const {
+		birthdate,
+		onConfirm,
+		onCancel,
+		open,
+	} = props;
+
+	const [, t] = useLanguage();
+
+	return (
+		<DateContainer>
+			<DatePicker
+				modal
+				mode="date"
+				open={open}
+				title={t('SELECT_A_DATE', 'Select a date')}
+				confirmText={t('CONFIRM', 'Confirm')}
+				cancelText={t('CANCEL', 'Cancel')}
+				date={birthdate ? new Date(birthdate) : new Date()}
+				onConfirm={date => onConfirm(date)}
+				onCancel={onCancel}
+				maximumDate={new Date()}
+			/>
+		</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

@@ -14,8 +14,7 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation,
-    franchiseId
+    navigation
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -35,16 +34,20 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container
-      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
-    >
+    <Container>
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <TabContainer>
         {tabList.map((menu, i) => (
@@ -73,7 +76,6 @@ export const Favorite = (props: any) => {
           originalURL='business'
           location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
           propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'products' && (
@@ -82,7 +84,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -91,7 +92,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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/ForgotPasswordForm/index.tsx

@@ -125,6 +125,11 @@ const ForgotPasswordUI = (props: any) => {
 				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
 				titleStyle={{ width: '100%', marginLeft: 0, paddingLeft: 0 }}
 				titleWrapStyle={{ paddingHorizontal: 0, paddingStart: 0, flex: 1 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<FormSide>
 				<OText

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/GiftCardOrdersList/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { View } from 'react-native';
+import { OText } from '../../shared'
+import { VerticalGiftCardOrdersLayout } from '../VerticalGiftCardOrdersLayout'
+
+import {
+  Container,
+  NoOrdersWrapper
+} from './styles'
+
+export const GiftCardOrdersList = (props: any) => {
+  const {
+    onNavigationRedirect
+  } = props;
+
+	const theme = useTheme();
+  const [, t] = useLanguage();
+  const [isEmptyPending, setIsEmptyPending] = useState(false);
+  const [isEmptySent, setIsEmptySent] = useState(false);
+  const [isEmptyRedeemed, setIsEmptyRedeemed] = useState(false);
+
+  return (
+    <Container>
+      <VerticalGiftCardOrdersLayout
+        title={t('PENDING', 'Pending')}
+        defaultStatus='pending'
+        setIsEmpty={setIsEmptyPending}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      {!isEmptyPending && (
+        <View
+          style={{
+            height: 8,
+            backgroundColor: theme.colors.backgroundGray100,
+            marginHorizontal: -40,
+          }}
+        />
+      )}
+
+      <VerticalGiftCardOrdersLayout
+        title={t('SENT', 'Sent')}
+        defaultStatus='sent'
+        setIsEmpty={setIsEmptySent}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      <VerticalGiftCardOrdersLayout
+        title={t('REDEEMED', 'Redeemed')}
+        defaultStatus='activated'
+        setIsEmpty={setIsEmptyRedeemed}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <NoOrdersWrapper>
+          <OText size={16} color={theme.colors.textNormal}>{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}</OText>
+        </NoOrdersWrapper>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+`
+
+export const NoOrdersWrapper = styled.View`
+  margin-vertical: 20px;
+`

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/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/index.tsx

@@ -84,12 +84,12 @@ const SendGiftCardUI = (props: any) => {
         />
       </FormController>
       <FormController>
-        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('FROM', 'From')}</OText>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('NAME', 'Name')}</OText>
         <Controller
           control={control}
           render={({ onChange, value }: any) => (
             <OInput
-              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+              placeholder={t('WRITE_A_NAME', 'Write a name')}
               value={value}
               onChange={(val: any) => onChange(val)}
               autoCapitalize='none'

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`