ordering-ui-react-native 0.21.76 → 0.21.77-release

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

@@ -19,7 +19,7 @@ import { CouponControl } from '../CouponControl';
 import { OButton, OInput, OModal, OText } from '../shared';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View, Vibration } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
@@ -114,6 +114,7 @@ const CartUI = (props: any) => {
   }
 
   const handleUpsellingPage = (individualCart: any) => {
+    Vibration.vibrate(100)
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -155,18 +156,20 @@ const CartUI = (props: any) => {
     }
   }
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (cart?.taxes === null || !cart?.taxes) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
+      return cart?.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return cart?.taxes?.filter((tax: any) => (tax?.type === 1 && tax?.target === 'product'))?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const OfferAlert = ({ offerId }: any) => {
@@ -197,10 +200,15 @@ const CartUI = (props: any) => {
   }, cart?.subtotal)
 
   const handleClickCheckout = () => {
+    Vibration.vibrate(100)
     if (cart?.business_id) {
       setOpenUpselling(true)
     } else {
-      handleUpsellingPage(cart)
+      onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        cartTotal: cart?.total
+      }, true)
     }
   }
 
@@ -219,7 +227,7 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {openUpselling && (
+      {!!openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}
@@ -239,7 +247,10 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={() => setOpenChangeStore(true)}
+        handleChangeStore={() => {
+          Vibration.vibrate(100)
+          setOpenChangeStore(true)
+        }}
         handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
@@ -320,7 +331,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any, i: number) => (
                 <OSTable key={`${tax.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1} >
@@ -375,9 +386,25 @@ const CartUI = (props: any) => {
             {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount + getIncludedTaxes(true))}</OText>
               </OSTable>
             )}
+            {
+              cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                <OSTable key={`${tax.description}_${i}`}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18} numberOfLines={1}>
+                      {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                      {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                    </OText>
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                </OSTable>
+              ))
+            }
             {
               cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
                 <OSTable key={`${offer.id}_${i}`}>
@@ -553,10 +580,10 @@ const CartUI = (props: any) => {
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
                   bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  borderColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-                  borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
+                  textStyle={{ textAlign: 'center', flex: 1 }}
                   onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Vibration, View } from 'react-native';
 import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
@@ -13,7 +13,8 @@ export const CartContent = (props: any) => {
 	const {
 		onNavigationRedirect,
 		singleBusiness,
-		businessSlug
+		businessSlug,
+		navigation
 	} = props
 
 	const theme = useTheme();
@@ -22,7 +23,7 @@ export const CartContent = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 	const [cartsOpened, setCartsOpened] = useState([])
-	const [{ carts: cartsContext }] = useOrder();
+	const [{ carts: cartsContext }, { confirmCart }] = useOrder();
 	const cartsList =
 		(cartsContext &&
 			Object.values(cartsContext).filter((cart: any) => cart.products.length > 0)) ??
@@ -38,6 +39,7 @@ export const CartContent = (props: any) => {
 		?.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 = () => {
+		Vibration.vibrate(100)
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
 				screen: 'CheckoutPage',
@@ -71,7 +73,7 @@ export const CartContent = (props: any) => {
 		}
 	}
 
-	const changeActiveState = useCallback((isClosed : boolean, uuid : string) => {
+	const changeActiveState = useCallback((isClosed: boolean, uuid: string) => {
 		const isActive = cartsOpened?.includes?.(uuid) || !!singleBusiness
 		if (isActive || !isClosed) {
 			setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
@@ -83,6 +85,20 @@ export const CartContent = (props: any) => {
 		}
 	}, [cartsOpened])
 
+	useEffect(() => {
+		const unsuscribe = navigation.addListener('focus', () => {
+			const cartsListBlockedByPaypal = carts?.filter((cart: any) => cart?.status === 2 && cart?.paymethod_data?.gateway === 'paypal')
+			if (cartsListBlockedByPaypal?.length > 0) {
+				cartsListBlockedByPaypal.map(async (cart: any) => {
+					await confirmCart(cart?.uuid)
+				})
+			}
+		})
+		return () => {
+			return unsuscribe()
+		}
+	}, [carts, navigation])
+
 	return (
 		<CCContainer
 			style={{ paddingHorizontal: 20 }}
@@ -158,11 +174,8 @@ export const CartContent = (props: any) => {
 									<CheckoutAction style={{ marginTop: 0 }}>
 										<OButton
 											text={t('CHECKOUT', 'Checkout')}
-											bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
 											isDisabled={!cartsAvailable.length}
-											borderColor={theme.colors.primary}
 											imgRightSrc={null}
-											textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
 											onClick={() => handleCheckoutRedirect()}
 											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 										/>

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

@@ -5,6 +5,7 @@ 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 {
@@ -100,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: {
@@ -208,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)) ||
@@ -342,6 +346,12 @@ const CheckoutUI = (props: any) => {
 		setShowTitle(contentOffset.y > 30)
 	}
 
+	const handleRedirect = () => {
+		props.fromProductsList
+			? navigation?.goBack()
+			: onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)
+	}
+
 	useEffect(() => {
 		if (validationFields && validationFields?.fields?.checkout) {
 			checkValidationFields()
@@ -413,6 +423,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) {
@@ -420,7 +431,7 @@ 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', () => {
@@ -451,7 +462,7 @@ const CheckoutUI = (props: any) => {
 			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
 				<View style={styles.wrapperNavbar}>
 					<TopHeader>
-						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
+						<TopActions onPress={() => handleRedirect()}>
 							<IconAntDesign
 								name='arrowleft'
 								size={26}
@@ -471,13 +482,13 @@ const CheckoutUI = (props: any) => {
 					</TopHeader>
 				</View>
 			</SafeAreaView>
-			<Container pt={0} forwardRef={containerRef} noPadding onScroll={handleScroll}>
+			<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)}
+						onActionLeft={() => handleRedirect()}
 						showCall={false}
 						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
@@ -614,15 +625,11 @@ const CheckoutUI = (props: any) => {
 											<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer details')} />
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
-												textStyle={{ color: theme.colors.white }}
 												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}
-												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}
 											/>
@@ -744,6 +751,7 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<AddressDetails
+										cart={cart}
 										navigation={navigation}
 										location={options?.address?.location}
 										businessLogo={businessDetails?.business?.logo}
@@ -766,7 +774,7 @@ const CheckoutUI = (props: any) => {
 						cart?.status !== 2 &&
 						validationFields?.fields?.checkout?.driver_tip?.enabled &&
 						driverTipsOptions && driverTipsOptions?.length > 0 &&
-						!isGiftCardCart &&
+						cart?.business_id &&
 						(
 							<ChSection>
 								<ChDriverTips>
@@ -814,6 +822,8 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									urlscheme={urlscheme}
+									androidAppId={androidAppId}
 									setMethodPaySupported={setMethodPaySupported}
 									methodPaySupported={methodPaySupported}
 									placeByMethodPay={placeByMethodPay}
@@ -859,7 +869,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')}
@@ -937,13 +947,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
@@ -953,7 +965,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/CitiesControl/index.tsx

@@ -69,10 +69,7 @@ export const CitiesControl = (props: any) => {
       </View>
       <OButton
         text={t('CONTINUE', 'Continue')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
         style={styles.btnStyle}
-        textStyle={{ color: 'white' }}
         onClick={() => handleClick()}
       />
     </Container>

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

@@ -102,9 +102,7 @@ const CouponControlUI = (props: any) => {
 					/>
 					<OButton
 						onClick={() => onButtonApplyClick()}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white', fontSize: 12 }}
+						textStyle={{ fontSize: 12 }}
 						imgRightSrc={null}
 						text={t('APPLY', 'Apply')}
 						isDisabled={!couponInput}

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

@@ -125,9 +125,7 @@ const DriverTipsUI = (props: any) => {
 						/>
 						<OButton
 							text={t('APPLY_TIP', 'Apply Tip')}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 14 }}
+							textStyle={{ fontSize: 14 }}
 							imgRightSrc={null}
 							style={{ borderRadius: 5, height: 44 }}
 							isDisabled={parseFloat(value || '0') < 0 || parseFloat(value || '0') === driverTip || value === ''}

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()
@@ -72,7 +71,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' && (
@@ -81,7 +79,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -90,7 +87,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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

@@ -270,7 +270,6 @@ const FavoriteListUI = (props: FavoriteParams) => {
             onClick={() => getFavoriteList(pagination?.currentPage + 1)}
             text={t('LOAD_MORE_ITEMS', 'Load more items')}
             imgRightSrc={null}
-            textStyle={{ color: theme.colors.white }}
             style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
           />
         </WrappButton>

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

@@ -64,7 +64,7 @@ const ForgotPasswordUI = (props: any) => {
 		handleReCaptcha(null)
 		if (reCaptchaValue) return
 
-	  if (!recaptchaConfig?.siteKey) {
+		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
 			return
 		}
@@ -73,7 +73,7 @@ const ForgotPasswordUI = (props: any) => {
 			return
 		}
 		recaptchaRef.current.open()
-  	}
+	}
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
@@ -92,8 +92,8 @@ const ForgotPasswordUI = (props: any) => {
 				formState.result?.result && showToast(
 					ToastType.Error,
 					typeof formState.result?.result === 'string'
-          ? formState.result?.result
-          : formState.result?.result[0]
+						? formState.result?.result
+						: formState.result?.result[0]
 				)
 				return
 			}
@@ -208,9 +208,7 @@ const ForgotPasswordUI = (props: any) => {
 
 					<OButton
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-						textStyle={{ color: 'white' }}
-						bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-						borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
+						isDisabled={formState.loading || emailSent && !formState.result?.error}
 						isLoading={formState.loading}
 						imgRightSrc={null}
 						onClick={emailSent && !formState.result?.error ? () => { } : handleSubmit(onSubmit)}

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

@@ -12,7 +12,7 @@ import {
   Container
 } from './styles'
 
-export const GiftCardUI =  React.memo((props: any) => {
+export const GiftCardUI = React.memo((props: any) => {
   const {
     navigation
   } = props
@@ -57,9 +57,7 @@ export const GiftCardUI =  React.memo((props: any) => {
         <OButton
           onClick={() => setOpenModal('purchase')}
           text={t('PURCHASE', 'Purchase')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
-          textStyle={{ color: 'white', fontSize: 13 }}
+          textStyle={{ fontSize: 13 }}
           imgRightSrc={null}
           style={{ ...style.btnStyle, marginRight: 14 }}
         />
@@ -76,26 +74,26 @@ export const GiftCardUI =  React.memo((props: any) => {
       </View>
 
       <OModal
-				open={openModal === 'purchase'}
-				onClose={() => setOpenModal(null)}
-				entireModal
+        open={openModal === 'purchase'}
+        onClose={() => setOpenModal(null)}
+        entireModal
         customClose
-			>
-				<PurchaseGiftCard
+      >
+        <PurchaseGiftCard
           handleCustomGoToCheckout={handleCustomGoToCheckout}
           onClose={() => setOpenModal(null)}
         />
-			</OModal>
+      </OModal>
       <OModal
-				open={openModal === 'redeem'}
-				onClose={() => setOpenModal(null)}
-				entireModal
+        open={openModal === 'redeem'}
+        onClose={() => setOpenModal(null)}
+        entireModal
         customClose
-			>
-				<RedeemGiftCard
+      >
+        <RedeemGiftCard
           onClose={() => setOpenModal(null)}
         />
-			</OModal>
+      </OModal>
     </Container>
   )
-})
+})

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

@@ -58,12 +58,10 @@ const PurchaseGiftCardUI = (props: any) => {
             borderWidth: 0,
             width: 26,
             height: 26,
-            backgroundColor: '#FFF',
-            borderColor: '#FFF',
-            shadowColor: '#FFF',
             paddingLeft: 0,
             paddingRight: 0,
           }}
+          useArrow
           onClick={onClose}
           icon={AntDesignIcon}
           iconProps={{
@@ -113,9 +111,7 @@ const PurchaseGiftCardUI = (props: any) => {
       <OButton
         onClick={() => handleAccept()}
         text={t('ACCEPT', 'Accept')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{ color: 'white', fontSize: 13 }}
+        textStyle={{ fontSize: 13 }}
         imgRightSrc={null}
         style={style.btnStyle}
         isDisabled={!selectedProduct}
@@ -130,4 +126,4 @@ export const PurchaseGiftCard = (props: any) => {
     UIComponent: PurchaseGiftCardUI
   }
   return <PurchaseGiftCardController {...purchaseGiftCardProps} />
-}
+}