ordering-ui-react-native 0.17.73 → 0.17.74-release

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

@@ -1,15 +1,18 @@
 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, OIcon } from '../shared';
+import { OAlert } from '../../../../../src/components/shared'
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
+import { ListItem } from '../UserProfile/styles';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -27,6 +30,11 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
+		handlePlaceOrderAsGuest,
+		isCheckout,
+		setIsOpen,
+		handleRemoveAccount,
+		isProfile
 	} = props;
 
 	const theme = useTheme();
@@ -68,10 +76,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 [isModalOpen, setIsModalOpen] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -79,9 +88,19 @@ export const UserFormDetailsUI = (props: any) => {
 			cellphone: null,
 		},
 	});
+	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
+	const isAdmin = user?.level === 0
 	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)
@@ -187,6 +206,18 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	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 (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -206,6 +237,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]);
 
@@ -389,6 +424,12 @@ export const UserFormDetailsUI = (props: any) => {
 							)}
 						</UDWrapper>
 					)}
+				{isProfile && (
+					<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>
+				)}
 				{validationFields?.loading && (
 					<UDLoader>
 						<OText size={12}>{t('LOADING', 'Loading')}</OText>
@@ -423,18 +464,46 @@ 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>
+			<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 })}
+			/>
 		</>
 	);
 };
-

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

@@ -20,7 +20,7 @@ export const UDLoader = styled.View`
   width: 100%;
   justify-content: center;
   height: auto;
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   padding: 0;
   margin-top: 0px;

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

@@ -35,7 +35,6 @@ import {
 } 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) => {
@@ -49,6 +48,19 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const theme = useTheme();
 
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideProfileImage = theme?.profile?.components?.picture?.hidden
+	const hideOrders = theme?.profile?.components?.orders?.hidden
+	const hideProfile = theme?.profile?.components?.profile?.hidden
+	const hideWallet = theme?.profile?.components?.wallet?.hidden
+	const hideMessages = theme?.bar_menu?.components?.messages?.hidden
+	const hideHelp = theme?.bar_menu?.components?.help?.hidden
+	const hideFavorites = theme?.bar_menu?.components?.favortes?.hidden
+	const hideSession = theme?.bar_menu?.components?.sessions?.hidden
+	const hidePromotions = theme?.bar_menu?.components?.promotions?.hidden
+	const hideAddressList = theme?.profile?.components?.address_list?.hidden
+	const showLanguages = theme?.profile?.components?.languages?.hidden
+	const showNotifications = !theme?.profile?.components?.notification_settings?.hidden
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {
 			color: theme.colors.textNormal,
@@ -89,8 +101,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: isChewLayout ? 20 : 40
 		},
 		messageIconStyle: {
 			fontSize: 18,
@@ -106,8 +117,6 @@ const ProfileListUI = (props: ProfileParams) => {
 	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
-	const isAdmin = user?.level === 0
-
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
@@ -141,19 +150,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	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)
-			}
-		})
+		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
+		handleRemoveAccount
 	}
 
 	useEffect(() => {
@@ -163,12 +161,9 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [removeAccountState])
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom, paddingTop: 20 }}>
-			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
-				{t('PROFILE', 'Profile')}
-			</OText> */}
+		<View style={{ flex: 1, height: '100%', paddingTop: 20 }}>
 			<CenterView style={styles.pagePadding}>
-				{user?.photo && (
+				{user?.photo && !hideProfileImage && (
 					<View style={styles.photo}>
 						<FastImage
 							style={{ height: 60, width: 60, borderRadius: 8 }}
@@ -182,83 +177,97 @@ 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.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
-					</TouchableOpacity>
+					{!hideProfile && (
+						<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
+							<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={notificationsGroup?.loading} />
 			<ListWrap style={{ ...styles.pagePadding }}>
 				<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('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} />
-						<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 && (
+					{!hideAddressList && (
+						<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('SAVED_PLACES', 'My saved places')}</OText>
+						</ListItem>
+					)}
+					{!hideMessages && (
+						<ListItem onPress={() => onRedirect('Messages', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+							<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>
+					)}
+					{!hideOrders && (
+						<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 && !hideWallet && (
 						<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 							<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
 						</ListItem>
 					)}
-					{IsPromotionsEnabled && (
+					{IsPromotionsEnabled && !hidePromotions && (
 						<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('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>
-					</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>
+					{!hideHelp && (
+						<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>
+					)}
+					{showNotifications && (
+						<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('MARKETING_NOTIFICATIONS', 'Marketing 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>
+					)}
+					{!hideSession && (
+						<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>
+					)}
+					{!hideFavorites && (
+						<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} />
+				<Actions style={{ paddingTop: height * .02 }}>
+					{!showLanguages && (
+						<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

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,
@@ -285,22 +279,25 @@ const ProfileUI = (props: ProfileParams) => {
 	return (
 		<>
 			<Container
-				pt={15}
-				noPadding
+				pdng={Platform.OS === 'ios' ? '20px' : '10px'}
 			>
 				<NavBar
 					title={t('ACCOUNT', 'Account')}
 					titleAlign={'center'}
 					onActionLeft={() => navigation.goBack()}
 					showCall={false}
-					style={{ paddingHorizontal: 40 }}
+					btnStyle={{ paddingLeft: 0 }}
 				/>
-				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-					<CenterView style={styles.pagePadding}>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					enabled={Platform.OS === 'ios' ? true : false}
+					style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
+				>
+					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
-									style={{ height: 60, width: 80, borderRadius: 8 }}
+									style={{ height: 80, width: 80, borderRadius: 8 }}
 									source={{
 										uri: user?.photo,
 										priority: FastImage.priority.normal,
@@ -319,15 +316,14 @@ 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>
+					<UserFormDetailsUI
+						{...props}
+						isProfile
+						isEdit
+						setWillVerifyOtpState={setWillVerifyOtpState}
+					/>
 				</KeyboardAvoidingView>
 			</Container>
 			<OModal

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

@@ -195,38 +195,39 @@ const UserVerificationUI = (props: any) => {
   }
 
   useEffect(() => {
-    let _timer = TIME_COUNTDOWN - 1;
-    let minutes = 0;
-    let seconds = 0;
-    const interval = setInterval(() => {
-      minutes = _timer / 60;
-      seconds = _timer % 60;
-
-      minutes = minutes < 10 ? 0 + minutes : minutes;
-      seconds = seconds < 10 ? 0 + seconds : seconds;
-
-      const formatMinutes = parseInt(minutes.toString()) < 10
-        ? `0${parseInt(minutes.toString())}`
-        : parseInt(minutes.toString());
-
-      const formatseconds = parseInt(seconds.toString()) < 10
-        ? `0${parseInt(seconds.toString())}`
-        : parseInt(seconds.toString());
-
-      setTimer(`${formatMinutes}:${formatseconds}`);
-
-      if (--_timer < 0) {
-        clearInterval(interval);
-      }
-
-      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
-        setIsSendCodeAgain(false)
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval)
-  }, [isSendCodeAgain])
+    if (verificationState.phone) {
+      let _timer = TIME_COUNTDOWN - 1;
+      let minutes = 0;
+      let seconds = 0;
+      const interval = setInterval(() => {
+        minutes = _timer / 60;
+        seconds = _timer % 60;
+
+        minutes = minutes < 10 ? 0 + minutes : minutes;
+        seconds = seconds < 10 ? 0 + seconds : seconds;
+
+        const formatMinutes = parseInt(minutes.toString()) < 10
+          ? `0${parseInt(minutes.toString())}`
+          : parseInt(minutes.toString());
+
+        const formatseconds = parseInt(seconds.toString()) < 10
+          ? `0${parseInt(seconds.toString())}`
+          : parseInt(seconds.toString());
+
+        setTimer(`${formatMinutes}:${formatseconds}`);
+
+        if (--_timer < 0) {
+          clearInterval(interval);
+        }
+
+        if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
+          setIsSendCodeAgain(false)
+          clearInterval(interval);
+        }
+      }, 1000);
+      return () => clearInterval(interval)
+    }
+  }, [isSendCodeAgain, verificationState.phone])
 
   useEffect(() => {
     if (otpState?.length === CODE_LENGTH) {
@@ -292,7 +293,7 @@ const UserVerificationUI = (props: any) => {
 
   useEffect(() => {
     setupUserPhoneNumber()
-  }, [user])
+  }, [user?.cellphone, user?.country_phone_code])
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
@@ -401,6 +402,7 @@ const UserVerificationUI = (props: any) => {
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled
+                      updateStateWithSubmit
                     />
                   </InputWrapper>
                 </>
@@ -460,28 +462,31 @@ const UserVerificationUI = (props: any) => {
           )}
 
         </Container>
-        <ButtonsActions>
-          <View style={{ width: '100%' }}>
-            <OButton
-              onClick={(verificationState.email || verificationState.phone)
-                ? () => setVerificationState({ email: false, phone: false })
-                : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
-              }
-              text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-              bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-              borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-              textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
-              imgRightSrc={null}
-              isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-              style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
-            />
-          </View>
-        </ButtonsActions>
+        {!!phoneState?.cellphone && (
+          <ButtonsActions>
+            <View style={{ width: '100%' }}>
+              <OButton
+                onClick={(verificationState.email || verificationState.phone)
+                  ? () => setVerificationState({ email: false, phone: false })
+                  : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+                }
+                text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+                bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+                borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+                textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+                imgRightSrc={null}
+                isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+              />
+            </View>
+          </ButtonsActions>
+        )}
         <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
           <UserDetails
             user={user}
             isEdit
             isVerifiedPhone
+            dontToggleEditMode
           />
         </View>
       </ScrollView>