ordering-ui-react-native 0.16.96 → 0.16.97-release

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

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, ScrollView } 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';
+import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput } from '../shared';
+import { OText, OButton, OInput, OModal } from '../shared';
+import Alert from '../../providers/AlertProvider'
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
-import CheckBox from '@react-native-community/checkbox';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -18,7 +19,6 @@ export const UserFormDetailsUI = (props: any) => {
 		formState,
 		showField,
 		requiredFields,
-		onClose,
 		setIsSubmit,
 		cleanFormState,
 		onCloseProfile,
@@ -29,12 +29,13 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
-		handleChangePromotions,
+		handlePlaceOrderAsGuest,
+		isCheckout,
+		setIsOpen
 	} = props;
 
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -64,10 +65,6 @@ export const UserFormDetailsUI = (props: any) => {
 			paddingStart: 0,
 			paddingBottom: 0,
 			marginBottom: -0,
-		},
-		checkBoxStyle: {
-			width: 25,
-			height: 25,
 		}
 	});
 
@@ -76,10 +73,11 @@ export const UserFormDetailsUI = (props: any) => {
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
-	const [{ user }] = useSession();
+	const [{ user }, { login }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
-  const [isChanged, setIsChanged] = useState(false)
+	const [isChanged, setIsChanged] = useState(false)
+	const [isModalOpen, setIsModalOpen] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -87,9 +85,18 @@ export const UserFormDetailsUI = (props: any) => {
 			cellphone: null,
 		},
 	});
+	const [alertState, setAlertState] = useState({ open: false, content: '' })
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
+	const handleSuccessSignup = (user: any) => {
+		login({
+			user,
+			token: user?.session?.access_token
+		})
+		handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+	}
+
 	const getInputRules = (field: any) => {
 		const rules: any = {
 			required: isRequiredField(field.code)
@@ -214,6 +221,10 @@ export const UserFormDetailsUI = (props: any) => {
 		if (!formState?.loading && formState?.result?.error) {
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
+			if (isCheckout) {
+				setIsOpen && setIsOpen(false)
+				cleanFormState && cleanFormState({ changes: {} })
+			}
 		}
 	}, [formState?.loading]);
 
@@ -243,10 +254,10 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
-			const _isValid = requiredFields.every((key: any) => formState?.changes[key])
-			setIsValid(_isValid)
-		}, [formState?.changes, requiredFields])
-	
+		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
+		setIsValid(_isValid)
+	}, [formState?.changes, requiredFields])
+
 	return (
 		<>
 			<UDForm>
@@ -333,7 +344,7 @@ export const UserFormDetailsUI = (props: any) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber &&((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
+							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
 									<PhoneInputNumber
@@ -395,39 +406,6 @@ export const UserFormDetailsUI = (props: any) => {
 									defaultValue=''
 								/>
 							)}
-							{!requiredFields && (
-								<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}
-												boxType={'square'}
-												tintColors={{
-													true: theme.colors.primary,
-													false: theme.colors.disabled
-												}}
-												tintColor={theme.colors.disabled}
-												onCheckColor={theme.colors.primary}
-												onTintColor={theme.colors.primary}
-												style={Platform.OS === 'ios' && styles.checkBoxStyle}
-											/>
-											<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 && (
@@ -464,18 +442,39 @@ export const UserFormDetailsUI = (props: any) => {
 					text={
 						formState.loading
 							? t('UPDATING', 'Updating...')
-							: t('CONTINUE', 'Continue')
+							: ((isCheckout && !!user?.guest_id)
+								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
+								: t('CONTINUE', 'Continue'))
 					}
 					bgColor={theme.colors.white}
 					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
 					borderColor={theme.colors.primary}
-					isDisabled={formState.loading || !isValid}
+					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
-					onClick={handleSubmit(onSubmit)}
+					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
 				/>
 			)}
+			{isCheckout && !!user?.guest_id && (
+				<TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
+					<OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
+				</TouchableOpacity>
+			)}
+			<OModal
+				open={isModalOpen}
+				onClose={() => setIsModalOpen(false)}
+			>
+				<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
+					<SignupForm
+						handleSuccessSignup={handleSuccessSignup}
+						isGuest
+						signupButtonText={t('SIGNUP', 'Signup')}
+						useSignupByEmail
+						useChekoutFileds
+					/>
+				</ScrollView>
+			</OModal>
+			
 		</>
 	);
 };
-

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

@@ -17,7 +17,7 @@ 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 FontAwesome from 'react-native-vector-icons/FontAwesome'
 import FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
 
@@ -29,21 +29,27 @@ import {
 	CenterView,
 	Actions,
 	ListWrap,
-	ListItem
+	ListItem,
+	NotificationsWrapper,
+	NotificationBadge
 } from './styles';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import styled from 'styled-components';
+import ToggleSwitch from 'toggle-switch-react-native';
 
 const ProfileListUI = (props: ProfileParams) => {
 	const {
 		navigation,
-		formState,
+		notificationsGroup,
 		handleRemoveAccount,
-		removeAccountState
+		removeAccountState,
+		handleChangePromotions,
 	} = props;
 
 	const theme = useTheme();
 
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {
@@ -85,8 +91,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: isChewLayout ? 20 : 40
 		},
 		messageIconStyle: {
 			fontSize: 18,
@@ -108,22 +113,19 @@ const ProfileListUI = (props: ProfileParams) => {
 	const { top, bottom } = useSafeAreaInsets();
 
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
-
-  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isWalletEnabled = configs?.cash_wallet?.value && 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)
 	}
 
 	useEffect(() => {
-		if (formState.result.result && !formState.loading) {
-			if (formState.result?.error) {
-				showToast(ToastType.Error, formState.result.result);
-			} else {
+		if (notificationsGroup.result.result && !notificationsGroup.loading) {
+			if (!notificationsGroup.result?.error) {
 				showToast(ToastType.Success, t('UPDATE_SUCCESSFULLY', 'Update successfully'));
 			}
 		}
-	}, [formState.result])
+	}, [notificationsGroup.result])
 
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
@@ -139,21 +141,20 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [errors]);
 
 	const detailProps = {
-
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
 		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)
-      }
-    })
+			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(() => {
@@ -163,10 +164,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [removeAccountState])
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62, paddingTop: 20 }}>
-			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
-				{t('PROFILE', 'Profile')}
-			</OText> */}
+		<View style={{ flex: 1, height: height - top - bottom, paddingTop: 20 }}>
 			<CenterView style={styles.pagePadding}>
 				{user?.photo && (
 					<View style={styles.photo}>
@@ -183,12 +181,12 @@ const ProfileListUI = (props: ProfileParams) => {
 				<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 })}>
-						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
+						<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
 					</TouchableOpacity>
 				</View>
 			</CenterView>
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32 }} />
-			<Spinner visible={formState?.loading} />
+			<Spinner visible={notificationsGroup?.loading} />
 			<ListWrap style={{ ...styles.pagePadding }}>
 				<Actions>
 					<ListItem onPress={() => onRedirect('AddressList', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
@@ -199,6 +197,10 @@ const ProfileListUI = (props: ProfileParams) => {
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
 					</ListItem>
+					<ListItem onPress={() => onRedirect('MyOrders', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+						<FontAwesome name='list-alt' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_ORDERS', 'My Orders')}</OText>
+					</ListItem>
 					{isWalletEnabled && (
 						<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 							<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
@@ -215,6 +217,27 @@ const ProfileListUI = (props: ProfileParams) => {
 						<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('Notifications', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+						<NotificationBadge style={{ borderRadius: 100 / 2 }} />
+						<Ionicons name='notifications-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('NOTIFICATIONS', 'Notifications')}
+						</OText>
+						<NotificationsWrapper>
+							<ToggleSwitch
+								isOn={user && (!!user?.settings?.notification?.newsletter ||
+									!!user?.settings?.sms?.newsletter ||
+									!!user?.settings?.email?.newsletter)}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={notificationsGroup?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleChangePromotions(!(user && (!!user?.settings?.notification?.newsletter ||
+									!!user?.settings?.sms?.newsletter ||
+									!!user?.settings?.email?.newsletter)))}
+							/>
+						</NotificationsWrapper>
+					</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>
@@ -237,13 +260,13 @@ const ProfileListUI = (props: ProfileParams) => {
 				</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 })}
-      />
+				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/UserProfile/styles.ts

@@ -1,5 +1,8 @@
+import { useTheme } from 'styled-components';
 import styled from 'styled-components/native'
 
+const theme = useTheme();
+
 export const CenterView = styled.View`
 	flex-direction: row;
 	justify-content: flex-start;
@@ -40,3 +43,17 @@ export const ListItem = styled.TouchableOpacity`
 	margin-bottom: 24px;
 `
 
+export const NotificationsWrapper = styled.View`
+	position: absolute;
+  right: 0;
+`
+
+export const NotificationBadge = styled.View`
+    width: 10px;
+    height: 10px;
+	z-index: 2000;
+    background-color: ${theme.colors.red};
+    position: absolute;
+    left: -2px;
+    top: 3px;
+  `;

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

@@ -16,9 +16,8 @@ import { ProfileParams } from '../../types';
 import { UserFormDetailsUI } from '../UserFormDetails';
 
 import { OIcon, OIconButton, OModal } from '../shared';
-import { CenterView } from './styles';
+import { CenterView, Container } from './styles';
 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'
@@ -51,11 +50,6 @@ const ProfileUI = (props: ProfileParams) => {
 			shadowOpacity: 0.2,
 			backgroundColor: theme.colors.white,
 		},
-		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40,
-			justifyContent: 'center',
-		},
 		navBarStyle: {
 			paddingLeft: 40,
 			paddingRight: 40,
@@ -284,17 +278,18 @@ 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 }}
-			/>
-			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-				<Container noPadding>
-
-					<CenterView style={styles.pagePadding}>
+			<Container
+				pdng={Platform.OS === 'ios' ? '20px' : '10px'}
+			>
+				<NavBar
+					title={t('ACCOUNT', 'Account')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+				/>
+				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
+					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
@@ -317,17 +312,15 @@ const ProfileUI = (props: ProfileParams) => {
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>
-					<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
 					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
-					<View style={styles.pagePadding}>
-						<UserFormDetailsUI
-							{...props}
-							isEdit
-							setWillVerifyOtpState={setWillVerifyOtpState}
-						/>
-					</View>
-				</Container>
-			</KeyboardAvoidingView>
+					<UserFormDetailsUI
+						{...props}
+						isEdit
+						setWillVerifyOtpState={setWillVerifyOtpState}
+					/>
+				</KeyboardAvoidingView>
+			</Container>
 			<OModal
 				open={isModalVisible}
 				onClose={() => setIsModalVisible(false)}

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

@@ -9,6 +9,13 @@ export const UserData = styled.View`
   text-align: center;
 `
 
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+	  padding-top: ${(props: any) => props.pdng};
+    margin-bottom: 40px;
+`
+
 export const Names = styled.View`
   flex-direction: row;
 `

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, StyleSheet, View, ScrollView } from 'react-native';
+import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
@@ -24,7 +24,6 @@ import {
   WalletTransactionsWrapper
 } from './styles'
 
-import NavBar from '../NavBar'
 import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { WalletTransactions } from '../WalletTransactions'
@@ -63,7 +62,8 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-  const isChewLayout = theme?.wallets_view?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -78,7 +78,7 @@ const WalletsUI = (props: any) => {
       isActive: isWalletCashEnabled
     },
     credit_point: {
-      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+      name: t('POINTS_WALLET', 'Points Wallet'),
       value: 1,
       isActive: isWalletPointsEnabled
     }
@@ -112,15 +112,7 @@ const WalletsUI = (props: any) => {
     <>
       <Container>
         <Header>
-          <NavBar
-            title={isChewLayout ? '' : t('WALLETS', 'Wallets')}
-            titleAlign={'center'}
-            onActionLeft={goToBack}
-            showCall={false}
-            paddingTop={10}
-            btnStyle={{ paddingLeft: 0 }}
-            style={{ flex: 1 }}
-          />
+        <OText size={24} style={{ marginTop: 30 }}>{t('WALLETS', 'Wallets')}</OText>
           {isChewLayout && (
             <OButton
               text={t('WALLET_HISTORY', 'Wallet history')}
@@ -145,16 +137,25 @@ const WalletsUI = (props: any) => {
                 showsHorizontalScrollIndicator={false}
               >
                 {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
-                  <Pressable
+                  <TouchableOpacity
                     key={wallet.id}
                     onPress={() => handleChangeTab(wallet)}
                   >
-                    <OTab isSelected={tabSelected === wallet.type}>
-                      <OText size={18}>
+                    <OTab
+                      isSelected={tabSelected === wallet.type}
+                      style={{
+                        borderBottomWidth: 1,
+                        borderBottomColor:
+                          tabSelected === wallet.type
+                            ? theme.colors.textNormal
+                            : theme.colors.border
+                      }}
+                    >
+                      <OText>
                         {walletName[wallet.type]?.name}
                       </OText>
                     </OTab>
-                  </Pressable>
+                  </TouchableOpacity>
                 ))}
               </OTabs>
 
@@ -165,7 +166,7 @@ const WalletsUI = (props: any) => {
                       <OText size={20}>
                         {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
                       </OText>
-                      {loyaltyLevel.image ? (
+                      {/* {loyaltyLevel.image ? (
                         <FastImage
                           style={styles.logoStyle}
                           source={{
@@ -180,7 +181,7 @@ const WalletsUI = (props: any) => {
                           source={theme.images.dummies.loyaltyLevel}
                           resizeMode='contain'
                         />
-                      )}
+                      )} */}
                       <OText
                         size={22}
                         weight='bold'

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

@@ -34,10 +34,12 @@ export const OTabs = styled.View`
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
+  padding-vertical: 5px;
 `;
 
 export const OTab = styled.View`
   padding-horizontal: 10px;
+  padding-vertical: 10px;
 `;
 
 export const LoyaltyContent = styled.View`

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { StyleSheet, ViewStyle } from 'react-native'
+import styled from 'styled-components/native'
+
+const CardContainerTouchable = styled.TouchableOpacity``
+
+interface Props {
+    children: React.ReactChildren | Element,
+    style?: Array<ViewStyle> | any,
+    onClick: any
+}
+
+export const CardAnimation = (props: Props) => {
+    const {
+        children,
+        onClick,
+        style
+    } = props
+    const [isPressed, setIsPressed] = useState(false)
+    const styles = StyleSheet.create({
+        cardAnimation: {
+            elevation: isPressed ? 2 : 0,
+            shadowColor: '#888',
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 0,
+            shadowOpacity: isPressed ? 0.8 : 0,
+            borderRadius: 12,
+        }
+    })
+
+    const styleProvided = style || []
+    return (
+        <CardContainerTouchable
+            onPress={onClick}
+            activeOpacity={0.8}
+            delayPressIn={20}
+            onPressIn={() => setIsPressed(true)}
+            onPressOut={() => setIsPressed(false)}
+            style={[
+                ...styleProvided,
+                styles.cardAnimation
+            ]}
+        >
+            {children}
+        </CardContainerTouchable>
+    )
+}