ordering-ui-react-native 0.21.48-test → 0.21.48-test-3

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

@@ -1,59 +1,29 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
-import { IOScrollView } from 'react-native-intersection-observer'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
 	StyleSheet,
-	ScrollView,
 	Platform,
 	TouchableOpacity,
-	RefreshControl,
-	AppState
 } from 'react-native';
+
 import {
 	BusinessList as BusinessesListingController,
-	useLanguage,
-	useSession,
 	useOrder,
 	useConfig,
-	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
-	Search,
-	OrderControlContainer,
-	AddressInput,
-	WrapMomentOption,
-	HeaderWrapper,
-	ListWrapper,
-	FeaturedWrapper,
-	FarAwayMessage,
-	AddressInputContainer,
-	PreorderInput,
-	OrderTypesContainer,
 	BusinessLogosContainer
 } from './styles';
 
-import { OIcon, OText, OModal } from '../../../shared';
 import { BusinessesListingParams } from '../../../../types';
-import { NotFoundSource } from '../../../NotFoundSource';
-import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
-import { BusinessController } from '../../../BusinessController';
-import { OrderTypeSelector } from '../../../OrderTypeSelector';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BusinessFeaturedController } from '../../../BusinessFeaturedController';
-import { HighestRatedBusinesses } from '../../../HighestRatedBusinesses';
-import { getTypesText } from '../../../../utils';
-import { OrderProgress } from '../../../OrderProgress';
-import { useFocusEffect, useIsFocused } from '@react-navigation/native';
+import { useFocusEffect } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
-import IconAntDesign from 'react-native-vector-icons/AntDesign';
-import { PageBanner } from '../../../PageBanner'
-import { CitiesControl } from '../../../CitiesControl'
+import { FlatListBusinessListing } from './FlatListBusinessListing'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -62,36 +32,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		navigation,
 		businessesList,
 		getBusinesses,
-		handleChangeBusinessType,
 		handleBusinessClick,
 		paginationProps,
-		businessId,
-		isGuestUser,
-		handleUpdateBusinessList,
 		citiesState,
 		actualSlug,
 		logosLayout
 	} = props;
 	const theme = useTheme();
-	const isFocused = useIsFocused();
 
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
 	const [orderState, { changeCityFilter }] = useOrder();
 	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
 
-	const appState = useRef(AppState.currentState)
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const [refreshing] = useState(false);
 	const allCitiesDisabled = citiesState?.cities?.every((city: any) => !city.enabled)
-	const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2 || allCitiesDisabled) ?? true
-	const hideHero = theme?.business_listing_view?.components?.business_hero?.hidden
-	const hidePreviousOrders = theme?.business_listing_view?.components?.previous_orders_block?.hidden
-	const hideHighestBusiness = theme?.business_listing_view?.components?.highest_rated_business_block?.hidden
-	const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
-	const bgHeader = theme?.business_listing_view?.components?.business_hero?.components?.image
-	const bgHeaderHeight = theme?.business_listing_view?.components?.business_hero?.components?.style?.height
 
 	const styles = StyleSheet.create({
 		container: {
@@ -156,32 +109,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 	});
 
-	const { top } = useSafeAreaInsets();
-
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
-	const [businessTypes, setBusinessTypes] = useState(null)
 	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options?.value)
 	const [isOpenCities, setIsOpenCities] = useState(false)
-	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
-		Number(configs?.max_days_preorder?.value) > 0
-	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
 	const [favoriteIds, setFavoriteIds] = useState<any>([])
-	const chewOrderTypes = [{ name: t('DELIVERY', 'Delivery').toUpperCase(), value: 1 }, { name: t('PICKUP', 'Pickup').toUpperCase(), value: 2 }]
 	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
-	const handleMomentClick = () => {
-		if (isPreorderEnabled) {
-			navigation.navigate('MomentOption')
-		}
-	}
-
-	const configTypes =
-		configs?.order_types_allowed?.value
-			.split('|')
-			.map((value: any) => Number(value)) || [];
-
 	const handleScroll = ({ nativeEvent }: any) => {
 		const y = nativeEvent.contentOffset.y;
 		const height = nativeEvent.contentSize.height;
@@ -355,340 +290,25 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	return (
-		<IOScrollView
-			style={styles.container}
-			onScroll={(e) => handleScroll(e)}
-			showsVerticalScrollIndicator={false}
-			refreshControl={
-				<RefreshControl
-					refreshing={refreshing}
-					onRefresh={() => handleOnRefresh()}
-				/>
-			}
-		>
-			{enabledPoweredByOrdering && auth && (
-				<View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', top: 20 }}>
-					<OText>
-						Powered By Ordering.co
-					</OText>
-				</View>
-			)}
-			<View style={{
-				height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
-				marginTop: isChewLayout ? 0 : Platform.OS == 'ios' ? 0 : 50,
-				backgroundColor: isChewLayout ? theme?.colors?.chew : theme.colors?.white
-			}}
-			>
-				{isChewLayout && (
-					<View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
-						<OText size={24} weight={700} color={theme.colors?.white}>
-							{t('WELCOME', 'Welcome')} {user?.name}
-						</OText>
-					</View>
-				)}
-				<Search isChewLayout={isChewLayout}>
-					<AddressInput
-						isChewLayout={isChewLayout}
-						onPress={() =>
-							auth
-								? navigation.navigate('AddressList', { isFromBusinesses: true })
-								: navigation.navigate('AddressForm', {
-									address: orderState.options?.address,
-									isFromBusinesses: true,
-									isGuestUser: isGuestUser
-								})
-						}>
-						<AddressInputContainer isChewLayout={isChewLayout}>
-							<OIcon
-								src={theme.images.general.pin}
-								color={theme.colors.disabled}
-								width={16}
-								style={{ marginRight: isChewLayout ? 0 : 10 }}
-							/>
-							<OText size={12} numberOfLines={1} style={{ flex: 1 }}>
-								{orderState?.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-							</OText>
-							{!isChewLayout && (
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							)}
-						</AddressInputContainer>
-					</AddressInput>
-				</Search>
-				{isFarAway && !isChewLayout && (
-					<FarAwayMessage style={styles.farAwayMsg}>
-						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
-					</FarAwayMessage>
-				)}
-				{!isChewLayout ? (
-					<OrderControlContainer>
-						<View style={styles.wrapperOrderOptions}>
-							{isPreOrderSetting && (
-								<WrapMomentOption
-									onPress={() => handleMomentClick()}>
-									<OText
-										size={12}
-										numberOfLines={1}
-										ellipsizeMode="tail"
-										color={theme.colors.textSecondary}>
-										{orderState.options?.moment
-											? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-											: t('ASAP_ABBREVIATION', 'ASAP')}
-									</OText>
-									{isPreorderEnabled && (
-										<OIcon
-											src={theme.images.general.arrow_down}
-											width={10}
-											style={{ marginStart: 8 }}
-										/>
-									)}
-								</WrapMomentOption>
-							)}
-							<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
-								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							</WrapMomentOption>
-						</View>
-					</OrderControlContainer>
-				) : (
-					<>
-						{isPreOrderSetting && (
-							<View style={{ paddingHorizontal: 30 }}>
-								<PreorderInput
-									isChewLayout={isChewLayout}
-									onPress={() => handleMomentClick()}
-								>
-									<OText color={theme.colors.textSecondary}>
-										{orderState.options?.moment
-											? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-											: t('ASAP_ABBREVIATION', 'ASAP')}</OText>
-								</PreorderInput>
-							</View>
-						)}
-					</>
-				)}
-			</View>
-			{!isChewLayout ? (
-				<>
-					{!hideHero ? (
-						<HeaderWrapper
-							source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
-							style={{ paddingTop: top + 20 }}
-							resizeMode='cover'
-							bgHeaderHeight={bgHeaderHeight}
-						>
-							{!auth && (
-								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-								</TouchableOpacity>
-							)}
-						</HeaderWrapper>
-					) : (
-						<>
-							{!auth && (
-								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-								</TouchableOpacity>
-							)}
-						</>
-					)}
-				</>
-			) : (
-				<OrderTypesContainer>
-					<OrderTypeSelector
-						handleChangeBusinessType={handleChangeBusinessType}
-						isChewLayout
-						chewOrderTypes={chewOrderTypes}
-						handleChangeType={setOrderTypeValue}
-					/>
-				</OrderTypesContainer>
-			)}
-
-			{!hideCities && orderTypeValue === 2 && (
-				<View style={{ marginTop: 20 }}>
-					<TouchableOpacity
-						style={styles.buttonCityStyle}
-						onPress={() => setIsOpenCities(true)}
-						disabled={orderState?.loading}
-					>
-						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
-							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
-						</OText>
-					</TouchableOpacity>
-				</View>
-			)}
-			{!hidePreviousOrders && (
-				<OrderProgress
-					{...props}
-					isFocused={isFocused}
-				/>
-			)}
-			{
-				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
-					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
-						<ScrollView
-							showsHorizontalScrollIndicator={false}
-							nestedScrollEnabled
-							horizontal
-							contentContainerStyle={{ paddingHorizontal: 40 }}
-						>
-							{featuredBusiness.map((bAry: any, idx) => (
-								<View key={'f-listing_' + idx}>
-									<BusinessFeaturedController
-										business={bAry[0]}
-										isBusinessOpen={bAry[0]?.open}
-										handleCustomClick={handleBusinessClick}
-										orderType={orderState?.options?.type}
-									/>
-									{bAry.length > 1 && (
-										<BusinessFeaturedController
-											business={bAry[1]}
-											isBusinessOpen={bAry[1]?.open}
-											handleCustomClick={handleBusinessClick}
-											orderType={orderState?.options?.type}
-										/>
-									)}
-								</View>
-							))}
-						</ScrollView>
-					</FeaturedWrapper>
-				)
-			}
-			{!isChewLayout && !hideHighestBusiness && (
-				<>
-					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-					{
-						!businessId && !props.franchiseId && (
-							<HighestRatedBusinesses
-								propsToFetch={props.propsToFetch}
-								onBusinessClick={handleBusinessClick}
-								navigation={navigation}
-								favoriteIds={favoriteIds}
-								setFavoriteIds={setFavoriteIds}
-							/>
-						)
-					}
-				</>
-			)}
-
-			<PageBanner position='app_business_listing' navigation={navigation} />
-
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
-				{!businessId && !isAllCategoriesHidden && (
-					<BusinessTypeFilter
-						images={props.images}
-						businessTypes={props.businessTypes}
-						defaultBusinessType={props.defaultBusinessType}
-						handleChangeBusinessType={handleChangeBusinessType}
-						setBusinessTypes={setBusinessTypes}
-					/>
-				)}
-				{!businessesList.loading && businessesList.businesses.length === 0 && businessesList?.fetched && (
-					<NotFoundSource
-						content={t(
-							'NOT_FOUND_BUSINESSES',
-							'No businesses to delivery / pick up at this address, please change filters or change address.',
-						)}
-					/>
-				)}
-				{businessesList.businesses?.map(
-					(business: any, i: number) => (
-						<BusinessController
-							key={`${business.id}_` + i}
-							enableIntersection
-							business={business}
-							isBusinessOpen={business.open}
-							handleCustomClick={handleBusinessClick}
-							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}
-							handleUpdateBusinessList={handleUpdateBusinessList}
-							favoriteIds={favoriteIds}
-							setFavoriteIds={setFavoriteIds}
-						/>
-					)
-				)}
-				{(businessesList.loading || !businessesList?.fetched) && (
-					<>
-						{[
-							...Array(
-								paginationProps.nextPageItems
-									? paginationProps.nextPageItems
-									: 8,
-							).keys(),
-						].map((item, i) => (
-							<Placeholder
-								Animation={Fade}
-								key={i}
-								style={{ marginBottom: 20 }}>
-								<View style={{ width: '100%' }}>
-									<PlaceholderLine
-										height={200}
-										style={{ marginBottom: 20, borderRadius: 25 }}
-									/>
-									<View style={{ paddingHorizontal: 10 }}>
-										<View
-											style={{
-												flexDirection: 'row',
-												justifyContent: 'space-between',
-											}}>
-											<PlaceholderLine
-												height={25}
-												width={40}
-												style={{ marginBottom: 10 }}
-											/>
-											<PlaceholderLine
-												height={25}
-												width={20}
-												style={{ marginBottom: 10 }}
-											/>
-										</View>
-										<PlaceholderLine
-											height={20}
-											width={30}
-											style={{ marginBottom: 10 }}
-										/>
-										<PlaceholderLine
-											height={20}
-											width={80}
-											style={{ marginBottom: 10 }}
-										/>
-									</View>
-								</View>
-							</Placeholder>
-						))}
-					</>
-				)}
-			</ListWrapper>
-			<OModal
-				open={isOpenCities}
-				onClose={() => setIsOpenCities(false)}
-				title={t('SELECT_A_CITY', 'Select a city')}
-			>
-				<CitiesControl
-					cities={citiesState?.cities}
-					onClose={() => setIsOpenCities(false)}
-					handleChangeCity={handleChangeCity}
-				/>
-			</OModal>
-		</IOScrollView>
+		<FlatListBusinessListing
+			{...props}
+			navigation={navigation}
+			businessesList={businessesList}
+			enabledPoweredByOrdering={enabledPoweredByOrdering}
+			orderTypeValue={orderTypeValue}
+			allCitiesDisabled={allCitiesDisabled}
+			featuredBusiness={featuredBusiness}
+			favoriteIds={favoriteIds}
+			isFarAway={isFarAway}
+			isOpenCities={isOpenCities}
+			isChewLayout={isChewLayout}
+			handleScroll={handleScroll}
+			setIsOpenCities={setIsOpenCities}
+			setFavoriteIds={setFavoriteIds}
+			handleOnRefresh={handleOnRefresh}
+			setOrderTypeValue={setOrderTypeValue}
+			handleChangeCity={handleChangeCity}
+		/>
 	);
 };
 

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

@@ -192,7 +192,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 ||
@@ -400,6 +404,10 @@ const CheckoutUI = (props: any) => {
 	return (
 		<>
 			<Container noPadding>
+				<OText>
+					si esta viendo esto uste ha instalado correctamente mi rama :)
+					gateway: {JSON.stringify(paymethodSelected)}
+				</OText>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
 						title={t('CHECKOUT', 'Checkout')}

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/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={{