ordering-ui-react-native 0.15.14 → 0.15.15-release

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
 import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
@@ -25,8 +25,6 @@ export const UserFormDetailsUI = (props: any) => {
 		handleButtonUpdateClick,
 		phoneUpdate,
 		hideUpdateButton,
-		setWillVerifyOtpState,
-		isVerifiedPhone,
 		handleChangePromotions
 	} = props;
 
@@ -141,8 +139,8 @@ export const UserFormDetailsUI = (props: any) => {
 			if (
 				formState.changes?.cellphone === null &&
 				((validationFields?.fields?.checkout?.cellphone?.enabled &&
-					validationFields?.fields?.checkout?.cellphone?.required) ||
-					configs?.verification_phone_required?.value === '1')
+          validationFields?.fields?.checkout?.cellphone?.required) ||
+          configs?.verification_phone_required?.value === '1')
 			) {
 				showToast(
 					ToastType.Error,
@@ -153,9 +151,6 @@ export const UserFormDetailsUI = (props: any) => {
 				);
 				return;
 			}
-			if (formState?.changes?.cellphone && !isVerifiedPhone) {
-				showToast(ToastType.Error, t('VERIFY_ERROR_PHONE_NUMBER', 'The Phone Number field is not verified'))
-			}
 			let changes = null;
 			if (user?.cellphone && !userPhoneNumber) {
 				changes = {
@@ -182,6 +177,16 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(phoneNumber, true);
 	};
 
+	const changeCountry = (country: any) => {
+		let countryCode = {
+			country_code: {
+				name: 'country_code',
+				value: country.cca2
+			}
+		}
+		handleChangeInput(countryCode, true);
+	}
+
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -216,13 +221,6 @@ export const UserFormDetailsUI = (props: any) => {
 			}
 		}
 	}, [user, isEdit]);
-
-	useEffect(() => {
-		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
-		}
-	}, [phoneInputData])
-
 	return (
 		<>
 			<UDForm>
@@ -315,6 +313,7 @@ export const UserFormDetailsUI = (props: any) => {
 									<PhoneInputNumber
 										data={phoneInputData}
 										handleData={(val: any) => handleChangePhoneNumber(val)}
+										changeCountry={(val: any) => changeCountry(val)}
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
 										defaultCode={user?.country_phone_code || null}
 										boxStyle={styles.phoneSelect}
@@ -368,16 +367,18 @@ export const UserFormDetailsUI = (props: any) => {
 								rules={getInputRules({ name: 'password', code: 'password' })}
 								defaultValue=''
 							/>
-							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}>
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
+							<Controller
+								control={control}
+								render={({ onChange, value }: any) => (
+									<TouchableOpacity
+										style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
+										onPress={() => {
+											onChange(!value)
+											handleChangePromotions(!value)
+										}}
+									>
 										<CheckBox
 											value={value}
-											onValueChange={newValue => {
-												onChange(newValue)
-												handleChangePromotions(newValue)
-											}}
 											boxType={'square'}
 											tintColors={{
 												true: theme.colors.primary,
@@ -388,14 +389,14 @@ export const UserFormDetailsUI = (props: any) => {
 											onTintColor={theme.colors.primary}
 											style={Platform.OS === 'ios' && styles.checkBoxStyle}
 										/>
-									)}
-									name='promotions'
-									defaultValue={formState?.result?.result
-										? !!formState?.result?.result?.settings?.notification?.newsletter
-										: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
-								/>
-								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-							</View>
+										<OText style={{ fontSize: 14, paddingHorizontal: 5, paddingLeft: 10 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+									</TouchableOpacity>
+								)}
+								name='promotions'
+								defaultValue={formState?.result?.result
+									? !!formState?.result?.result?.settings?.notification?.newsletter
+									: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
+							/>
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	UserFormDetails as UserProfileController,
 	useSession,
@@ -16,6 +16,10 @@ import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import FastImage from 'react-native-fast-image'
+import { OAlert } from '../../../../../src/components/shared'
 
 import {
 	OIcon,
@@ -33,7 +37,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 const ProfileListUI = (props: ProfileParams) => {
 	const {
 		navigation,
-		formState
+		formState,
+		handleRemoveAccount,
+		removeAccountState
 	} = props;
 
 	const theme = useTheme();
@@ -90,17 +96,21 @@ const ProfileListUI = (props: ProfileParams) => {
 	});
 
 
-	const [{ user }] = useSession();
+	const [{ user }, { logout }] = useSession();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
+	const isAdmin = user?.level === 0
+
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
-	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
+	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const IsPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -134,25 +144,42 @@ const ProfileListUI = (props: ProfileParams) => {
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
 	}
 
+	const onRemoveAccount = () => {
+		setConfirm({
+      open: true,
+      content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+      title: t('ACCOUNT_ALERT', 'Account alert'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveAccount && handleRemoveAccount(user?.id)
+      }
+    })
+	}
+
+	useEffect(() => {
+		if (removeAccountState?.result === 'OK') {
+			logout()
+		}
+	}, [removeAccountState])
+
 	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62 }}>
-			<OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
+		<View style={{ flex: 1, height: height - top - bottom - 62, paddingTop: 20 }}>
+			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
 				{t('PROFILE', 'Profile')}
-			</OText>
+			</OText> */}
 			<CenterView style={styles.pagePadding}>
-				<View style={styles.photo}>
-					{user?.photo ? (
-						<OIcon
-							url={user?.photo}
-							cover
-							width={60}
-							height={60}
-							borderRadius={8}
+				{user?.photo && (
+					<View style={styles.photo}>
+						<FastImage
+							style={{ height: 60, width: 60, borderRadius: 8 }}
+							source={{
+								uri: user?.photo,
+								priority: FastImage.priority.normal,
+							}}
+							resizeMode={FastImage.resizeMode.cover}
 						/>
-					) : (
-						<Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />
-					)}
-				</View>
+					</View>
+				)}
 				<View style={{ flexBasis: '70%' }}>
 					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
@@ -166,7 +193,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				<Actions>
 					<ListItem onPress={() => onRedirect('AddressList', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_SAVED_PLACES', 'My saved places')}</OText>
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SAVED_PLACES', 'My saved places')}</OText>
 					</ListItem>
 					<ListItem onPress={() => onRedirect('Messages', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
@@ -178,18 +205,41 @@ const ProfileListUI = (props: ProfileParams) => {
 							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
 						</ListItem>
 					)}
+					{IsPromotionsEnabled && (
+						<ListItem onPress={() => onRedirect('Promotions', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+							<MaterialIcons name='local-offer' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('PROMOTIONS', 'Promotions')}</OText>
+						</ListItem>
+					)}
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>
 					</ListItem>
+					<ListItem onPress={() => navigation.navigate('Sessions')} activeOpacity={0.7}>
+						<Ionicons name='md-list-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SESSIONS', 'Sessions')}</OText>
+					</ListItem>
 				</Actions>
 
 				<Actions>
 					<LanguageSelector iconColor={theme.colors.textNormal} pickerStyle={langPickerStyle} />
 					<View style={{ height: 17 }} />
 					<LogoutButton color={theme.colors.textNormal} text={t('LOGOUT', 'Logout')} />
+					<View style={{ height: 17 }} />
+					<ListItem disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
+						<OIcon src={theme.images.general.user} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
+						<OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger5}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+					</ListItem>
 				</Actions>
 			</ListWrap>
+			<OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
 		</View>
 	);
 };

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

@@ -21,6 +21,7 @@ import NavBar from '../NavBar';
 import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 const ProfileUI = (props: ProfileParams) => {
 	const {
@@ -55,7 +56,8 @@ const ProfileUI = (props: ProfileParams) => {
 		},
 		pagePadding: {
 			paddingLeft: 40,
-			paddingRight: 40
+			paddingRight: 40,
+			justifyContent: 'center',
 		},
 		navBarStyle: {
 			paddingLeft: 40,
@@ -204,8 +206,8 @@ const ProfileUI = (props: ProfileParams) => {
 				},
 			});
 			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
+				cellphone: cellphone,
+				country_phone_code: countryPhoneCode
 			})
 		}
 	}
@@ -276,24 +278,26 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
+			<NavBar
+				title={t('ACCOUNT', 'Account')}
+				titleAlign={'center'}
+				onActionLeft={() => navigation.goBack()}
+				showCall={false}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 , marginTop: Platform.OS === 'ios' ? 50 : 40 }}
+			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>
-					<NavBar
-						onActionLeft={() => navigation.goBack()}
-						btnStyle={{ paddingStart: 0 }}
-						title={t('ACCOUNT', 'Account')}
-						isVertical
-						style={styles.navBarStyle}
-					/>
+
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
 							{user?.photo ? (
-								<OIcon
-									url={user?.photo}
-									cover
-									width={60}
-									height={60}
-									borderRadius={8}
+								<FastImage
+									style={{ height: 60, width: 80, borderRadius: 8 }}
+									source={{
+										uri: user?.photo,
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
 								/>
 							) : (
 								<Ionicons name='person-outline' size={50} />
@@ -303,7 +307,7 @@ const ProfileUI = (props: ProfileParams) => {
 							icon={theme.images.general.camera}
 							borderColor={theme.colors.clear}
 							iconStyle={{ width: 20, height: 20 }}
-							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
+							style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>
@@ -324,13 +328,13 @@ const ProfileUI = (props: ProfileParams) => {
 				entireModal
 			>
 				<VerifyPhone
-				phone={phoneInputData.phone}
-				verifyPhoneState={verifyPhoneState}
-				checkPhoneCodeState={checkPhoneCodeState}
-				handleCheckPhoneCode={handleCheckPhoneCode}
-				setCheckPhoneCodeState={setCheckPhoneCodeState}
-				handleVerifyCodeClick={handleVerifyCodeClick}
-				onClose={() => setIsModalVisible(false)}
+					phone={phoneInputData.phone}
+					verifyPhoneState={verifyPhoneState}
+					checkPhoneCodeState={checkPhoneCodeState}
+					handleCheckPhoneCode={handleCheckPhoneCode}
+					setCheckPhoneCodeState={setCheckPhoneCodeState}
+					handleVerifyCodeClick={handleVerifyCodeClick}
+					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 		</>

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

@@ -37,8 +37,8 @@ export const VerifyPhone = (props: any) => {
 			height: 75,
 			marginBottom: 25,
 			borderWidth: 1,
-			borderColor: theme.colors.inputBorderColor,
-			borderRadius: 8,
+			borderColor: theme.colors.disabled,
+			borderRadius: 20,
 			textAlign: 'center',
 			fontSize: 40
 		}
@@ -131,11 +131,11 @@ export const VerifyPhone = (props: any) => {
 
 	return (
 		<Container>
-			<OText size={26} style={{ textAlign: 'left', fontWeight: '600', marginTop: 10, marginBottom: 30 }}>
-				{t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<OText size={30} style={{ textAlign: 'left' }}>
+				{t('VERIFY_PHONE', 'Verify Phone')}
 			</OText>
 			{lastNumbers && (
-				<OText size={16} color={theme.colors.disabled}>
+				<OText size={20} color={theme.colors.disabled}>
 					{`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} **${lastNumbers}`}
 				</OText>
 			)}
@@ -174,7 +174,7 @@ export const VerifyPhone = (props: any) => {
 						).result?.result)?.map((e: any, i: number) => (
 							<OText
 								key={i}
-								size={16}
+								size={20}
 								color={theme.colors.error}
 							>
 								{`* ${t(getTraduction(e))}`}
@@ -183,9 +183,12 @@ export const VerifyPhone = (props: any) => {
 					</ErrorSection>
 				)}
 			<ResendSection>
+				<OText size={16} style={{ marginRight: 5 }}>
+					{t('ARE_YOU_NOT_SEEING_THE_CODE', 'Are you not seeing the code?')}
+				</OText>
 				<Pressable onPress={() => handleSendCodeAgain()}>
 					<OText size={16} color={theme.colors.primary}>
-						{t('RESEND_CODE', 'Resend code')}
+						{t('SEND_AGAIN', 'Send Again')}
 					</OText>
 				</Pressable>
 			</ResendSection>

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

@@ -19,12 +19,13 @@ export const CountDownContainer = styled.View`
 export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
+  justify-content: center;
   margin-bottom: 30px;
 `
 
 export const WrappCountdown = styled.View`
   padding-top: 20px;
-  padding-bottom: 50px;
+  padding-bottom: 20px;
 `
 
 export const InputsSection = styled.View`

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import FastImage from 'react-native-fast-image'
 import {
   WalletList,
   useLanguage,
@@ -15,7 +16,10 @@ import {
   TransactionsWrapper,
   OTabs,
   OTab,
-  SectionContent
+  SectionContent,
+  LoyaltyContent,
+  LoyaltyWrapp,
+  LoyaltyImg
 } from './styles'
 
 import NavBar from '../NavBar'
@@ -27,10 +31,14 @@ const WalletsUI = (props: any) => {
   const {
     navigation,
     walletList,
+    userLoyaltyLevel,
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
-    isWalletPointsEnabled
+    isWalletPointsEnabled,
+    getWallets,
+    refreshWallets,
+    setRefreshWallets
   } = props
 
   const [, t] = useLanguage()
@@ -38,12 +46,27 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+  const styles = StyleSheet.create({
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  });
+
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
 
   const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 
+  const loyaltyLevel = Object.keys(userLoyaltyLevel.loyaltyLevel ?? {}).length > 0 && userLoyaltyLevel.loyaltyLevel
+
   const walletName: any = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet'),
@@ -74,6 +97,13 @@ const WalletsUI = (props: any) => {
     }
   }, [configs])
 
+  useEffect(() => {
+    if(refreshWallets){
+      getWallets()
+      setRefreshWallets && setRefreshWallets(false)
+    }
+  }, [refreshWallets])
+
   return (
     <Container>
       <NavBar
@@ -86,18 +116,22 @@ const WalletsUI = (props: any) => {
       />
 
       {!walletList.loading &&
+        !userLoyaltyLevel.loading &&
         !walletList.error &&
         walletList.wallets?.length > 0 &&
       (
         <>
-          <OTabs>
+          <OTabs
+            horizontal
+            showsHorizontalScrollIndicator={false}
+          >
             {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
               <Pressable
                 key={wallet.id}
                 onPress={() => handleChangeTab(wallet)}
               >
-                <OTab>
-                  <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
+                <OTab isSelected={tabSelected === wallet.type}>
+                  <OText size={18}>
                     {walletName[wallet.type]?.name}
                   </OText>
                 </OTab>
@@ -106,6 +140,39 @@ const WalletsUI = (props: any) => {
           </OTabs>
 
           <SectionContent>
+            {!!loyaltyLevel && (
+              <LoyaltyContent>
+                <LoyaltyWrapp>
+                  <OText size={20}>
+                    {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                  </OText>
+                  {loyaltyLevel.image ? (
+                    <FastImage
+                      style={styles.logoStyle}
+                      source={{
+                        uri: loyaltyLevel.image,
+                        priority: FastImage.priority.high,
+                        cache:FastImage.cacheControl.web
+                      }}
+                      resizeMode={FastImage.resizeMode.contain}
+                    />
+                  ) : (
+                    <LoyaltyImg
+                      source={theme.images.dummies.loyaltyLevel}
+                      resizeMode='contain'
+                    />
+                  )}
+                  <OText
+                    size={22}
+                    weight='bold'
+                    style={{ textTransform: 'uppercase' }}
+                    color={theme.colors.primary}
+                  >
+                    {loyaltyLevel.name}
+                  </OText>
+                </LoyaltyWrapp>
+              </LoyaltyContent>
+            )}
             <BalanceElement>
               <OText size={20} style={{fontWeight: '600'}}>
                 {currentWalletSelected?.type === 'cash'
@@ -172,7 +239,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {walletList?.loading && (
+      {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>
           <View>
             <Placeholder Animation={Fade}>
@@ -196,7 +263,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
+      {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
         <NotFoundSource
           content={walletList?.error
             ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')

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

@@ -41,3 +41,24 @@ export const OTabs = styled.View`
 export const OTab = styled.View`
   padding-horizontal: 10px;
 `;
+
+export const LoyaltyContent = styled.View`
+  width: 100%;
+  margin-bottom: 20px;
+`
+
+export const LoyaltyWrapp = styled.View`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+export const LoyaltyImg = styled.ImageBackground`
+  position: relative;
+  height: 150px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`

package/themes/original/src/components/shared/HeaderTitle.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import OText from './OText';
+
+const HeaderTitle = (props: any) => {
+  const { text, style } = props
+  return (
+    <OText
+      size={24}
+      style={style ?? {
+        marginTop: Platform.OS === 'android' ? 50 : 30,
+        paddingHorizontal: 40,
+        textTransform: 'capitalize'
+      }}
+    >
+      {text}
+    </OText>
+  )
+}
+
+export default HeaderTitle

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

@@ -11,6 +11,7 @@ import OKeyButton from './OKeyButton'
 import OModal from './OModal'
 import OAlert from './OAlert'
 import OBottomPopup from './OBottomPopup'
+import HeaderTitle from './HeaderTitle'
 
 export {
 	OText,
@@ -26,4 +27,5 @@ export {
 	OAlert,
   	OModal,
 	OBottomPopup,
+  HeaderTitle
 }