ordering-ui-react-native 0.21.85 → 0.21.86-release

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

@@ -1,12 +1,13 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } 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 ReactNativeHapticFeedback, { HapticFeedbackTypes } from "react-native-haptic-feedback";
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -14,7 +15,6 @@ import {
 	useApi,
 	useLanguage,
 	useUtils,
-	useValidationFields,
 	useConfig,
 	useToast,
 	ToastType,
@@ -100,10 +100,14 @@ const CheckoutUI = (props: any) => {
 		currency,
 		merchantId,
 		setPlaceSpotNumber,
-		maxDate
+		maxDate,
+		androidAppId,
+		urlscheme,
+		checkoutFieldsState
 	} = props
 
 	const theme = useTheme();
+	const isFocused = useIsFocused();
 
 	const styles = StyleSheet.create({
 		btnBackArrow: {
@@ -141,12 +145,11 @@ const CheckoutUI = (props: any) => {
 
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
-	const [{ user, token }, { login }] = useSession();
+	const [{ user, token, loading: userLoading }, { login }] = useSession();
 	const [ordering] = useApi()
 	const [{ configs }] = useConfig();
 	const [{ parsePrice, parseDate }] = useUtils();
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
-	const [validationFields] = useValidationFields();
 	const [events] = useEvent()
 	const [orientationState] = useDeviceOrientation();
 	const [isReadMore, setIsReadMore] = useState(false)
@@ -163,6 +166,7 @@ const CheckoutUI = (props: any) => {
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
+	const [orderTypeValidationFields, setOrderTypeValidationFields] = useState<any>([])
 	const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
 	const [allowedGuest, setAllowedGuest] = useState(false)
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
@@ -174,6 +178,14 @@ const CheckoutUI = (props: any) => {
 	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+	const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
+
+	const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field : any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
+	const guestCheckoutDriveTip = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === 1 && field?.validation_field?.code === 'driver_tip'), [JSON.stringify(checkoutFields), options])
+	const guestCheckoutComment = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [JSON.stringify(checkoutFields), options])
+	const guestCheckoutCoupon = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [JSON.stringify(checkoutFields), options])
+	const guestCheckoutZipcode = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'zipcode'), [JSON.stringify(checkoutFields), options])
+
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const businessConfigs = businessDetails?.business?.configs ?? []
@@ -198,27 +210,28 @@ const CheckoutUI = (props: any) => {
 		return acc = acc
 	}, 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 &&
-		!paymethodSelected?.data?.card?.zipcode &&
-		paymethodSelected?.gateway === 'stripe'
+	const validateCommentsCartField = (guestCheckoutComment?.enabled && (user?.guest_id ? guestCheckoutComment?.required_with_guest : guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
+	const validateDriverTipField = options.type === 1 && (guestCheckoutDriveTip?.enabled && (user?.guest_id ? guestCheckoutDriveTip?.required_with_guest : guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
+	const validateCouponField = (guestCheckoutCoupon?.enabled && (user?.guest_id ? guestCheckoutCoupon?.required_with_guest : guestCheckoutCoupon?.required)) && !cart?.offers?.some((offer : any) => offer?.type === 2)
+	const validateZipcodeCard = (guestCheckoutZipcode?.enabled && (user?.guest_id ? guestCheckoutZipcode?.required_with_guest : guestCheckoutZipcode?.required)) && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
 
 	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 &&
-			validationFields?.fields?.checkout?.driver_tip?.enabled &&
-			validationFields?.fields?.checkout?.driver_tip?.required &&
-			(Number(cart?.driver_tip) <= 0)) ||
 		(validateCommentsCartField) ||
-		(validateZipcodeCard)
-		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
+		(validateDriverTipField && !isGiftCardCart) ||
+		(validateZipcodeCard) ||
+		(methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) ||
+		validateCommentsCartField ||
+		validateDriverTipField ||
+		validateCouponField ||
+		validateZipcodeCard
+
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
 		: configs?.driver_tip_options?.value || []
+	const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && (guestCheckoutDriveTip?.enabled) && driverTipsOptions.length > 0
 
 	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 
@@ -239,7 +252,7 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const vibrateApp = (impact?: string) => {
+	const vibrateApp = (impact?: HapticFeedbackTypes) => {
 		const options = {
 			enableVibrateFallback: true,
 			ignoreAndroidSystemSettings: false
@@ -266,7 +279,7 @@ const CheckoutUI = (props: any) => {
 			return
 		}
 
-		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
+		if (!userErrors.length && (!requiredFields?.length) || forcePlace) {
 			vibrateApp()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment, NativeStripeSdk?.dismissPlatformPay)
 			return
@@ -305,35 +318,55 @@ const CheckoutUI = (props: any) => {
 
 	const checkValidationFields = () => {
 		setUserErrors([])
-		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
-		const _requiredFields: any = []
-
-		Object.values(validationFields?.fields?.checkout).map((field: any) => {
-			if (field?.required && !notFields.includes(field.code) && field?.enabled) {
-				if (!user[field?.code]) {
-					_requiredFields.push(field?.code)
+		const errors: Array<string> = []
+		const userSelected = user
+		const _requiredFields: Array<string> = []
+		Object.values(checkoutFieldsState?.fields).map((field: any) => {
+			if (options?.type === field?.order_type_id &&
+				field?.enabled &&
+				field?.required &&
+				!notFields.includes(field?.validation_field?.code)
+			) {
+				if (userSelected && !userSelected[field?.validation_field?.code]) {
+					_requiredFields.push(field?.validation_field?.code)
 				}
 			}
 		})
-
+		const mobilePhoneField: any = Object.values(checkoutFieldsState?.fields)?.find((field: any) => field?.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
 		if (
-			!user?.cellphone &&
-			((validationFields?.fields?.checkout?.cellphone?.enabled &&
-				validationFields?.fields?.checkout?.cellphone?.required) ||
+			userSelected &&
+			!userSelected?.cellphone &&
+			((mobilePhoneField?.enabled &&
+				mobilePhoneField?.required) ||
 				configs?.verification_phone_required?.value === '1')
 		) {
 			_requiredFields.push('cellphone')
 		}
 		setRequiredFields(_requiredFields)
 
-		if (phoneUpdate) {
-			errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
-		}
-
 		setUserErrors(errors)
 	}
 
+	const checkGuestValidationFields = () => {
+		const userSelected = user
+		const _requiredFields = checkoutFieldsState?.fields
+			.filter((field) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
+				!notFields.includes(field?.validation_field?.code) &&
+				userSelected && !userSelected[field?.validation_field?.code])
+		const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
+		const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+		if (
+			userSelected &&
+			!userSelected?.cellphone &&
+			((guestCheckoutCellPhone?.enabled &&
+				guestCheckoutCellPhone?.required_with_guest) ||
+				configs?.verification_phone_required?.value === '1')
+		) {
+			requiredFieldsCode.push('cellphone')
+		}
+		setRequiredFields(requiredFieldsCode)
+	}
+
 	const togglePhoneUpdate = (val: boolean) => {
 		setPhoneUpdate(val)
 	}
@@ -342,11 +375,20 @@ 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) {
+		if (checkoutFieldsState?.loading || userLoading) return
+		if (user?.guest_id) {
+			checkGuestValidationFields()
+		} else {
 			checkValidationFields()
 		}
-	}, [validationFields, user])
+	}, [checkoutFieldsState, user, options?.type])
 
 	useEffect(() => {
 		if (errors) {
@@ -413,6 +455,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 +463,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 +494,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 +514,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 +657,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 })}
 											/>
@@ -647,6 +686,9 @@ const CheckoutUI = (props: any) => {
 											isCheckout
 											phoneUpdate={phoneUpdate}
 											togglePhoneUpdate={togglePhoneUpdate}
+											isOrderTypeValidationField
+											requiredFields={requiredFields}
+											checkoutFields={checkoutFields}
 										/>
 									)
 								)}
@@ -744,6 +786,7 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<AddressDetails
+										cart={cart}
 										navigation={navigation}
 										location={options?.address?.location}
 										businessLogo={businessDetails?.business?.logo}
@@ -759,14 +802,7 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{!cartState.loading &&
-						cart &&
-						cart?.valid &&
-						options.type === 1 &&
-						cart?.status !== 2 &&
-						validationFields?.fields?.checkout?.driver_tip?.enabled &&
-						driverTipsOptions && driverTipsOptions?.length > 0 &&
-						!isGiftCardCart &&
+					{driverTipsField &&
 						(
 							<ChSection>
 								<ChDriverTips>
@@ -814,6 +850,8 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									urlscheme={urlscheme}
+									androidAppId={androidAppId}
 									setMethodPaySupported={setMethodPaySupported}
 									methodPaySupported={methodPaySupported}
 									placeByMethodPay={placeByMethodPay}
@@ -909,6 +947,8 @@ const CheckoutUI = (props: any) => {
 												creditPointPlanOnBusiness?.accumulation_rate ??
 												(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
 											}
+											hideCommentsByValidationCheckout={!guestCheckoutComment?.enabled}
+											hideCouponByValidationCheckout={!guestCheckoutCoupon?.enabled}
 										/>
 									</>
 								)}
@@ -955,10 +995,8 @@ 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 &&
-									validationFields?.fields?.checkout?.driver_tip?.enabled &&
-									validationFields?.fields?.checkout?.driver_tip?.required &&
-									(Number(cart?.driver_tip) <= 0) && (
+								{validateDriverTipField && !isGiftCardCart &&
+									(
 										<OText
 											color={theme.colors.error}
 											size={12}
@@ -966,7 +1004,6 @@ const CheckoutUI = (props: any) => {
 											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
 										</OText>
 									)}
-
 								{validateCommentsCartField && (
 									<OText
 										color={theme.colors.error}
@@ -984,6 +1021,15 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')}
 									</OText>
 								)}
+								{validateCouponField &&
+									(
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_COUPON_FIELD', 'Coupon is required.')}
+										</OText>
+									)}
 							</ChErrors>
 						</View>
 					)}
@@ -1007,14 +1053,16 @@ const CheckoutUI = (props: any) => {
 								isUserDetailsEdit
 								cartStatus={cart?.status}
 								businessId={cart?.business_id}
-								useValidationFields
 								useDefualtSessionManager
 								useSessionUser
 								isCheckout
 								isEdit
 								phoneUpdate={phoneUpdate}
 								togglePhoneUpdate={togglePhoneUpdate}
+								isOrderTypeValidationField
 								requiredFields={requiredFields}
+								checkoutFields={checkoutFields}
+								isCheckoutPlace
 								hideUpdateButton
 								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {

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} />
-}
+}