ordering-ui-react-native 0.15.56 → 0.15.58-release

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

@@ -4,7 +4,7 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
-  useOrder
+	useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
@@ -62,7 +62,19 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.textSecondary,
 			height: 38
-		}
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginVertical: 2,
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			backgroundColor: theme.colors.clear,
+			shadowColor: theme.colors.clear,
+			padding: 40,
+		},
 	})
 
 	const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -77,11 +89,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		? cart?.products.map((product: any) => product.id)
 		: []
 
-  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
-      ? upsellingProducts?.products?.length
-      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-      : []
+	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+		? upsellingProducts?.products?.length
+			? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+			: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+		: []
 
 	useEffect(() => {
 		if (!isCustomMode && !props.products) {
@@ -95,15 +107,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	useEffect(() => {
-		isCheckout && Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
-	}, [cart, isCheckout])
-
 	const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
+		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			product: product,
+			businessId: product?.api?.businessId,
+			businessSlug: business.slug,
 		})
 	}
 
@@ -119,8 +127,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? productsList.map((product: any) => (
-										<Item key={product.id}>
+									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
+										<Item key={`${product.id}_${i}`}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
 													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
@@ -148,50 +156,54 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
-  const UpsellingContent = () => {
-    return (
-      <>
-        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-          <TopActions onPress={() => onGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
-        </TopBar>
-        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+	const UpsellingContent = () => {
+		return (
+			<>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
+					<OButton
+						imgLeftSrc={theme.images.general.arrow_left}
+						imgRightSrc={null}
+						style={styles.btnBackArrow}
+						onClick={() => onGoBack()}
+						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+					/>
+				</View>
+				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <View style={{ paddingHorizontal: 40 }}>
-            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-            <OrderSummary
-              cart={cart}
-              isCartPending={cart?.status === 2}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{...styles.closeUpsellingButton}}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => {
-				handleUpsellingPage()
-				setIsCheckout(true)
-			}}
-          />
-        </View>
-      </>
-    )
-  }
+						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+							<UpsellingLayout />
+						</View>
+					}
+					<View style={{ paddingHorizontal: 40 }}>
+						<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+						<OrderSummary
+							cart={cart}
+							isCartPending={cart?.status === 2}
+							onNavigationRedirect={onNavigationRedirect}
+						/>
+					</View>
+				</ScrollView>
+				<View
+					style={{
+						alignItems: 'center',
+						bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+					}}
+				>
+					<OButton
+						imgRightSrc=''
+						text={t('CHECKOUT', 'Checkout')}
+						style={{ ...styles.closeUpsellingButton }}
+						textStyle={{ color: theme.colors.white, fontSize: 14 }}
+						onClick={() => {
+							handleUpsellingPage()
+							setIsCheckout(true)
+						}}
+					/>
+				</View>
+			</>
+		)
+	}
 
 	return (
 		<>
@@ -199,20 +211,20 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 				<UpsellingLayout />
 			) : (
 				<>
-          {props.isPage ? (
-            <UpsellingContent />
-          ) : (
-            canOpenUpselling && !modalIsOpen && (
-              <OBottomPopup
-                title={''}
-                open={openUpselling}
-                onClose={() => handleUpsellingPage()}
-                isStatusBar
-              >
-                <UpsellingContent />
-              </OBottomPopup>
-            )
-          )}
+					{props.isPage ? (
+						<UpsellingContent />
+					) : (
+						canOpenUpselling && !modalIsOpen && (
+							<OBottomPopup
+								title={''}
+								open={openUpselling}
+								onClose={() => handleUpsellingPage()}
+								isStatusBar
+							>
+								<UpsellingContent />
+							</OBottomPopup>
+						)
+					)}
 				</>
 			)}
 		</>

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

@@ -3,17 +3,14 @@ import { TouchableOpacity, View } from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { UDContainer, UDHeader, UDForm, UDInfo, EditBtn } from './styles';
+
 import {
 	UserFormDetails as UserFormController,
 	useLanguage,
 	useSession,
-	ToastType,
-	useToast
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText, OModal } from '../shared';
-import { VerifyPhone } from '../VerifyPhone';
-import Spinner from 'react-native-loading-spinner-overlay';
+import { OIcon, OText } from '../shared';
 
 import { UserFormDetailsUI } from '../UserFormDetails';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
@@ -29,33 +26,15 @@ const UserDetailsUI = (props: any) => {
 		isUserDetailsEdit,
 		phoneUpdate,
 		togglePhoneUpdate,
-		isCheckout,
-		checkPhoneCodeState,
-		handleSendVerifyCode,
-		handleCheckPhoneCode,
-		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
+		isCheckout
 	} = props
 
 	const theme = useTheme();
 
 	const [, t] = useLanguage()
 	const [{ user }] = useSession()
-	const [, { showToast }] = useToast();
-
 	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
 
-	const [isModalVisible, setIsModalVisible] = useState(false);
-	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-
 
 	useEffect(() => {
 		if (isUserDetailsEdit) {
@@ -76,54 +55,6 @@ const UserDetailsUI = (props: any) => {
 		}
 	}, [user?.country_phone_code])
 
-	const handleVerifyCodeClick = () => {
-		if (formState?.changes?.cellphone && formState?.changes?.country_phone_code) {
-			const { cellphone, country_phone_code: countryPhoneCode } = formState?.changes
-
-			setPhoneInputData({
-				error: '',
-				phone: {
-					country_phone_code: countryPhoneCode,
-					cellphone: cellphone,
-				},
-			});
-			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
-			})
-		}
-	}
-
-	useEffect(() => {
-		if (willVerifyOtpState) handleVerifyCodeClick()
-	}, [willVerifyOtpState])
-
-	useEffect(() => {
-		if (verifyPhoneState && !verifyPhoneState?.loading) {
-			if (verifyPhoneState.result?.error) {
-				const message = typeof verifyPhoneState?.result?.result === 'string'
-					? verifyPhoneState?.result?.result
-					: verifyPhoneState?.result?.result[0]
-				verifyPhoneState.result?.result && showToast(
-					ToastType.Error,
-					message
-				)
-				setWillVerifyOtpState(false)
-				return
-			}
-
-			const okResult = verifyPhoneState.result?.result === 'OK'
-			if (okResult) {
-				!isModalVisible && setIsModalVisible(true)
-				setWillVerifyOtpState(false)
-			}
-		}
-	}, [verifyPhoneState])
-
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
-
 	return (
 		<>
 			{(validationFields.loading || formState.loading) && (
@@ -138,7 +69,7 @@ const UserDetailsUI = (props: any) => {
 			{!(validationFields.loading || formState.loading) && (
 				<UDContainer>
 					<UDHeader>
-						<OText size={16} lineHeight={24} weight={'500'}>
+						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
 							{t('CUSTOMER_DETAILS', 'Customer Details')}
 						</OText>
 						{cartStatus !== 2 && (
@@ -186,32 +117,10 @@ const UserDetailsUI = (props: any) => {
 							)}
 						</UDInfo>
 					) : (
-						<UserFormDetailsUI
-							{...props}
-							phoneUpdate={phoneUpdate}
-							togglePhoneUpdate={togglePhoneUpdate}
-							isCheckout={isCheckout}
-							setWillVerifyOtpState={setWillVerifyOtpState}
-						/>
+						<UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} isCheckout={isCheckout} />
 					)}
 				</UDContainer>
 			)}
-			<OModal
-				open={isModalVisible}
-				onClose={() => setIsModalVisible(false)}
-				entireModal
-			>
-				<VerifyPhone
-				phone={phoneInputData.phone}
-				verifyPhoneState={verifyPhoneState}
-				checkPhoneCodeState={checkPhoneCodeState}
-				handleCheckPhoneCode={handleCheckPhoneCode}
-				setCheckPhoneCodeState={setCheckPhoneCodeState}
-				handleVerifyCodeClick={handleVerifyCodeClick}
-				onClose={() => setIsModalVisible(false)}
-				/>
-			</OModal>
-			<Spinner visible={verifyPhoneState?.loading} />
 		</>
 	)
 }

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';
@@ -27,7 +27,7 @@ export const UserFormDetailsUI = (props: any) => {
 		hideUpdateButton,
 		setWillVerifyOtpState,
 		isVerifiedPhone,
-		handleChangePromotions
+		handleChangePromotions,
 	} = props;
 
 	const theme = useTheme();
@@ -141,8 +141,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 +153,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 +179,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);
@@ -219,7 +226,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
+			setWillVerifyOtpState?.(true)
 		}
 	}, [phoneInputData])
 
@@ -315,6 +322,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 +376,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 +398,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,
@@ -17,7 +17,9 @@ 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,
@@ -35,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();
@@ -92,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 IsPromotionsEnabled = configs?.advanced_offers_module === '1' || configs?.advanced_offers_module === 'true'
+	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 IsPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -136,6 +144,24 @@ 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, paddingTop: 20 }}>
 			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
@@ -167,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} />
@@ -189,14 +215,35 @@ 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('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>
+					<ListItem onPress={() => navigation.navigate('Favorite')} activeOpacity={0.7}>
+						<Ionicons name='heart-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('FAVORITES', 'Favorites')}</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

@@ -56,7 +56,8 @@ const ProfileUI = (props: ProfileParams) => {
 		},
 		pagePadding: {
 			paddingLeft: 40,
-			paddingRight: 40
+			paddingRight: 40,
+			justifyContent: 'center',
 		},
 		navBarStyle: {
 			paddingLeft: 40,
@@ -205,8 +206,8 @@ const ProfileUI = (props: ProfileParams) => {
 				},
 			});
 			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
+				cellphone: cellphone,
+				country_phone_code: countryPhoneCode
 			})
 		}
 	}
@@ -277,15 +278,16 @@ 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 ? (
@@ -305,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>
@@ -326,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>
 		</>