ordering-ui-react-native 0.14.76 → 0.14.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.76",
+  "version": "0.14.79",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/ProductForm/index.tsx

@@ -316,6 +316,7 @@ export const ProductOptionsUI = (props: any) => {
           <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '70%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
+                isDisabled={orderState.loading}
                 onClick={() => handleSaveProduct()}
                 imgRightSrc=''
                 text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')} ${productCart.total ? parsePrice(productCart?.total) : ''}`}

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

@@ -7,7 +7,8 @@ import {
 	ScrollView,
 	Platform,
 	TouchableOpacity,
-	RefreshControl
+	RefreshControl,
+	AppState
 } from 'react-native';
 import {
 	BusinessList as BusinessesListingController,
@@ -63,8 +64,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	const theme = useTheme();
 	const isFocused = useIsFocused();
+	const appState = useRef(AppState.currentState)
+	const [appStateVisible, setAppStateVisible] = useState(appState.current);
 	const [refreshing] = useState(false);
-
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -168,15 +170,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const resetInactivityTimeout = () => {
 		clearTimeout(timerId.current)
 		timerId.current = setInterval(() => {
-			if (!businessesList.loading) {
-				getBusinesses(true)
-			}
+			getBusinesses(true)
 		}, 300000)
 	}
 
 	useEffect(() => {
 		resetInactivityTimeout()
-	}, [])
+	}, [businessesList.loading])
 
 	const handleOnRefresh = () => {
 		if (!businessesList.loading) {
@@ -197,6 +197,26 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
+	useEffect(() => {
+		const onFocusApp = (nextAppState : any) => {
+			if (
+				appState.current.match(/inactive|background/) &&
+				nextAppState === "active"
+			) {
+				if (!businessesList.loading) {
+					getBusinesses(true);
+				}
+			}
+			appState.current = nextAppState;
+			setAppStateVisible(appState.current);
+		}
+
+		AppState.addEventListener("change", onFocusApp);
+		return () => {
+			AppState.removeEventListener('change', onFocusApp);
+		};
+	}, [])
+
 	useFocusEffect(
 		useCallback(() => {
 			getBusinesses(true)

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

@@ -62,7 +62,8 @@ const SignupFormUI = (props: SignupParams) => {
 		setCheckPhoneCodeState,
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
-		notificationState
+		notificationState,
+		handleChangePromotions
 	} = props;
 
 	const theme = useTheme();
@@ -92,9 +93,9 @@ const SignupFormUI = (props: SignupParams) => {
 			marginBottom: 7,
 		},
 		checkBoxStyle: {
-      width: 25,
-      height: 25,
-    }
+			width: 25,
+			height: 25,
+		}
 	});
 
 	const [, { showToast }] = useToast();
@@ -281,9 +282,9 @@ const SignupFormUI = (props: SignupParams) => {
 		const supported = await Linking.canOpenURL(url);
 
 		if (supported) {
-		  	await Linking.openURL(url);
+			await Linking.openURL(url);
 		} else {
-		  	showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
 		}
 	}
 
@@ -470,6 +471,33 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<CheckBox
+											value={value}
+											onValueChange={newValue => {
+												onChange(newValue)
+												handleChangePromotions()
+											}}
+											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' && style.checkBoxStyle}
+										/>
+									)}
+									name='promotions'
+									defaultValue={false}
+								/>
+								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+							</View>
+
 							{configs?.terms_and_conditions?.value === 'true' && (
 								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
 									<Controller
@@ -592,25 +620,25 @@ const SignupFormUI = (props: SignupParams) => {
 							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
-							style={{ borderRadius: 7.6, marginTop: 6,shadowOpacity: 0 }}
+							style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
 						/>
 					)}
 				</FormInput>
 
 				{
-          onNavigationRedirect && loginButtonText && (
-            <View style={style.wrappText}>
-              <OText size={14} style={{ marginRight: 5 }}>
-                {t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
-              </OText>
-              <Pressable onPress={() => onNavigationRedirect('Login')}>
-                <OText size={14} color={theme.colors.primary}>
-                  {loginButtonText}
-                </OText>
-              </Pressable>
-            </View>
-          )
-        }
+					onNavigationRedirect && loginButtonText && (
+						<View style={style.wrappText}>
+							<OText size={14} style={{ marginRight: 5 }}>
+								{t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
+							</OText>
+							<Pressable onPress={() => onNavigationRedirect('Login')}>
+								<OText size={14} color={theme.colors.primary}>
+									{loginButtonText}
+								</OText>
+							</Pressable>
+						</View>
+					)
+				}
 				<View
 					style={{
 						flexDirection: 'row',
@@ -632,23 +660,23 @@ const SignupFormUI = (props: SignupParams) => {
 
 				{configs && Object.keys(configs).length > 0 && (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-					(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
+						(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
 					(
 						<ButtonsWrapper>
 							<SocialButtons>
 								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-								configs?.facebook_id?.value && (
-									<FacebookLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessFacebookLogin={handleSuccessFacebook}
-									/>
-								)}
+									configs?.facebook_id?.value && (
+										<FacebookLogin
+											notificationState={notificationState}
+											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleLoading={(val: boolean) => setIsFBLoading(val)}
+											handleSuccessFacebookLogin={handleSuccessFacebook}
+										/>
+									)}
 								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
 									<GoogleLogin
 										notificationState={notificationState}
-                    					webClientId={configs?.google_login_client_id?.value}
+										webClientId={configs?.google_login_client_id?.value}
 										handleErrors={(err: any) => showToast(ToastType.Error, err)}
 										handleLoading={(val: boolean) => setIsFBLoading(val)}
 										handleSuccessGoogleLogin={handleSuccessFacebook}

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

@@ -3,14 +3,17 @@ 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 } from '../shared';
+import { OIcon, OText, OModal } from '../shared';
+import { VerifyPhone } from '../VerifyPhone';
+import Spinner from 'react-native-loading-spinner-overlay';
 
 import { UserFormDetailsUI } from '../UserFormDetails';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
@@ -26,15 +29,33 @@ const UserDetailsUI = (props: any) => {
 		isUserDetailsEdit,
 		phoneUpdate,
 		togglePhoneUpdate,
-		isCheckout
+		isCheckout,
+		checkPhoneCodeState,
+		handleSendVerifyCode,
+		handleCheckPhoneCode,
+		verifyPhoneState,
+		isVerifiedPhone,
+		setCheckPhoneCodeState
 	} = 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) {
@@ -55,6 +76,54 @@ 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) && (
@@ -117,10 +186,32 @@ const UserDetailsUI = (props: any) => {
 							)}
 						</UDInfo>
 					) : (
-						<UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} isCheckout={isCheckout} />
+						<UserFormDetailsUI
+							{...props}
+							phoneUpdate={phoneUpdate}
+							togglePhoneUpdate={togglePhoneUpdate}
+							isCheckout={isCheckout}
+							setWillVerifyOtpState={setWillVerifyOtpState}
+						/>
 					)}
 				</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 { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } 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';
@@ -10,6 +10,7 @@ import { OText, OButton, OInput } from '../shared';
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
+import CheckBox from '@react-native-community/checkbox';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -24,6 +25,9 @@ export const UserFormDetailsUI = (props: any) => {
 		handleButtonUpdateClick,
 		phoneUpdate,
 		hideUpdateButton,
+		setWillVerifyOtpState,
+		isVerifiedPhone
+		handleChangePromotions
 	} = props;
 
 	const theme = useTheme();
@@ -58,6 +62,10 @@ export const UserFormDetailsUI = (props: any) => {
 			paddingStart: 0,
 			paddingBottom: 0,
 			marginBottom: -0,
+		},
+		checkBoxStyle: {
+			width: 25,
+			height: 25,
 		}
 	});
 
@@ -133,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,
@@ -145,6 +153,9 @@ 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 = {
@@ -205,6 +216,13 @@ export const UserFormDetailsUI = (props: any) => {
 			}
 		}
 	}, [user, isEdit]);
+
+	useEffect(() => {
+		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
+			setWillVerifyOtpState(true)
+		}
+	}, [phoneInputData])
+
 	return (
 		<>
 			<UDForm>
@@ -320,7 +338,7 @@ export const UserFormDetailsUI = (props: any) => {
 								render={() => (
 									<>
 										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-										{t('PASSWORD', 'Password')}
+											{t('PASSWORD', 'Password')}
 										</OText>
 										<OInput
 											name='password'
@@ -347,9 +365,37 @@ export const UserFormDetailsUI = (props: any) => {
 									</>
 								)}
 								name='password'
-								rules={getInputRules({name: 'password', code: 'password'})}
+								rules={getInputRules({ name: 'password', code: 'password' })}
 								defaultValue=''
 							/>
+							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<CheckBox
+											value={value}
+											onValueChange={newValue => {
+												onChange(newValue)
+												handleChangePromotions(newValue)
+											}}
+											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}
+										/>
+									)}
+									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>
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (

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

@@ -5,7 +5,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
-  useConfig
+	useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm } from 'react-hook-form';
@@ -15,10 +15,11 @@ import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
 import { ProfileParams } from '../../types';
 import { UserFormDetailsUI } from '../UserFormDetails';
 
-import { OIcon, OIconButton } from '../shared';
+import { OIcon, OIconButton, OModal } from '../shared';
 import { CenterView } from './styles';
 import NavBar from '../NavBar';
 import { Container } from '../../layouts/Container';
+import { VerifyPhone } from '../VerifyPhone'
 
 const ProfileUI = (props: ProfileParams) => {
 	const {
@@ -32,6 +33,12 @@ const ProfileUI = (props: ProfileParams) => {
 		cleanFormState,
 		handleChangeInput,
 		handleButtonUpdateClick,
+		checkPhoneCodeState,
+		handleSendVerifyCode,
+		handleCheckPhoneCode,
+		verifyPhoneState,
+		isVerifiedPhone,
+		setCheckPhoneCodeState
 	} = props;
 
 	const theme = useTheme();
@@ -61,6 +68,8 @@ const ProfileUI = (props: ProfileParams) => {
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
 	const { handleSubmit, errors, setValue, control } = useForm();
+	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
 
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
@@ -79,8 +88,8 @@ const ProfileUI = (props: ProfileParams) => {
 		if (
 			formState.changes.cellphone === '' &&
 			((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,
@@ -182,6 +191,24 @@ const ProfileUI = (props: ProfileParams) => {
 		return rules;
 	};
 
+	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 (formState.result.result && !formState.loading) {
 			if (formState.result?.error) {
@@ -216,44 +243,95 @@ const ProfileUI = (props: ProfileParams) => {
 		}
 	}, [user?.country_phone_code]);
 
+	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 (
-		<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}>
-						<OIcon
-							url={user?.photo}
-							src={!user?.photo && theme.images.general.user}
-							width={79}
-							height={79}
+		<>
+			<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}>
+							<OIcon
+								url={user?.photo}
+								src={!user?.photo && theme.images.general.user}
+								width={79}
+								height={79}
+							/>
+						</View>
+						<OIconButton
+							icon={theme.images.general.camera}
+							borderColor={theme.colors.clear}
+							iconStyle={{ width: 16, height: 16 }}
+							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
+							onClick={() => handleImagePicker()}
+						/>
+					</CenterView>
+					<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
+					<View style={styles.pagePadding}>
+						<UserFormDetailsUI
+							{...props}
+							isEdit
+							setWillVerifyOtpState={setWillVerifyOtpState}
 						/>
 					</View>
-					<OIconButton
-						icon={theme.images.general.camera}
-						borderColor={theme.colors.clear}
-						iconStyle={{ width: 16, height: 16 }}
-						style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
-						onClick={() => handleImagePicker()}
-					/>
-				</CenterView>
-				<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
-				<Spinner visible={formState?.loading} />
-				<View style={styles.pagePadding}>
-					<UserFormDetailsUI {...props} isEdit />
-				</View>
-			</Container>
-		</KeyboardAvoidingView>
+				</Container>
+			</KeyboardAvoidingView>
+			<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>
+		</>
+
 	);
 };
 
-
 export const UserProfileForm = (props: any) => {
 	const profileProps = {
 		...props,

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.disabled,
-			borderRadius: 20,
+			borderColor: theme.colors.inputBorderColor,
+			borderRadius: 8,
 			textAlign: 'center',
 			fontSize: 40
 		}
@@ -131,11 +131,11 @@ export const VerifyPhone = (props: any) => {
 
 	return (
 		<Container>
-			<OText size={30} style={{ textAlign: 'left' }}>
-				{t('VERIFY_PHONE', 'Verify Phone')}
+			<OText size={26} style={{ textAlign: 'left', fontWeight: '600', marginTop: 10, marginBottom: 30 }}>
+				{t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
 			</OText>
 			{lastNumbers && (
-				<OText size={20} color={theme.colors.disabled}>
+				<OText size={16} 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={20}
+								size={16}
 								color={theme.colors.error}
 							>
 								{`* ${t(getTraduction(e))}`}
@@ -183,12 +183,9 @@ 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('SEND_AGAIN', 'Send Again')}
+						{t('RESEND_CODE', 'Resend code')}
 					</OText>
 				</Pressable>
 			</ResendSection>

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

@@ -19,13 +19,12 @@ 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: 20px;
+  padding-bottom: 50px;
 `
 
 export const InputsSection = styled.View`

package/themes/original/src/types/index.tsx

@@ -31,6 +31,12 @@ export interface ProfileParams {
 	validationFields?: any;
 	showField?: any;
 	isRequiredField?: any;
+	handleSendVerifyCode?: any;
+	handleCheckPhoneCode?: any;
+	checkPhoneCodeState?: any;
+	verifyPhoneState?: any;
+	setCheckPhoneCodeState?: any;
+	isVerifiedPhone?: any;
 }
 
 export interface AddressListParams {
@@ -93,6 +99,7 @@ export interface SignupParams {
 	handleSendVerifyCode?: any;
 	handleCheckPhoneCode?: any;
 	notificationState?: any;
+	handleChangePromotions: () => void;
 }
 
 export interface PhoneInputParams {