ordering-ui-react-native 0.16.18 → 0.16.19-release

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

@@ -23,6 +23,8 @@ const UserDetailsUI = (props: any) => {
 		isEdit,
 		formState,
 		cleanFormState,
+		requiredFields,
+		onClose,
 		cartStatus,
 		toggleIsEdit,
 		validationFields,
@@ -30,12 +32,9 @@ const UserDetailsUI = (props: any) => {
 		phoneUpdate,
 		togglePhoneUpdate,
 		isCheckout,
-		checkPhoneCodeState,
 		handleSendVerifyCode,
-		handleCheckPhoneCode,
 		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
+		setFormState
 	} = props
 
 	const theme = useTheme();
@@ -47,7 +46,9 @@ const UserDetailsUI = (props: any) => {
 	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
 
 	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [isSubmit, setIsSubmit] = useState(false)
 	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
+	const [checkPhoneCodeState, setCheckPhoneCodeState] = useState({ loading: false, result: { error: false } })
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -56,7 +57,6 @@ const UserDetailsUI = (props: any) => {
 		},
 	});
 
-
 	useEffect(() => {
 		if (isUserDetailsEdit) {
 			!isEdit && toggleIsEdit()
@@ -68,6 +68,12 @@ const UserDetailsUI = (props: any) => {
 		cleanFormState({ changes: {} })
 	}
 
+	useEffect(() => {
+		if (isSubmit && !isEdit && requiredFields) {
+			onClose && onClose()
+		}
+	}, [isSubmit, requiredFields, isEdit])
+
 	useEffect(() => {
 		if (user?.cellphone && !user?.country_phone_code) {
 			togglePhoneUpdate(true)
@@ -94,6 +100,18 @@ const UserDetailsUI = (props: any) => {
 		}
 	}
 
+	const handleSendPhoneCode = (values: any) => {
+    setWillVerifyOtpState(false)
+		setIsModalVisible(false)
+    setFormState({
+      ...formState,
+      changes: {
+        ...formState?.changes,
+        verification_code: values?.code
+      }
+    })
+  }
+
 	useEffect(() => {
 		if (willVerifyOtpState) handleVerifyCodeClick()
 	}, [willVerifyOtpState])
@@ -120,10 +138,6 @@ const UserDetailsUI = (props: any) => {
 		}
 	}, [verifyPhoneState])
 
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
-
 	return (
 		<>
 			{(validationFields.loading || formState.loading) && (
@@ -141,7 +155,7 @@ const UserDetailsUI = (props: any) => {
 						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
 							{t('CUSTOMER_DETAILS', 'Customer Details')}
 						</OText>
-						{cartStatus !== 2 && (
+						{cartStatus !== 2 && !requiredFields && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
 									<OIcon
@@ -192,6 +206,7 @@ const UserDetailsUI = (props: any) => {
 							togglePhoneUpdate={togglePhoneUpdate}
 							isCheckout={isCheckout}
 							setWillVerifyOtpState={setWillVerifyOtpState}
+							setIsSubmit={setIsSubmit}
 						/>
 					)}
 				</UDContainer>
@@ -202,13 +217,12 @@ const UserDetailsUI = (props: any) => {
 				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={handleSendPhoneCode}
+					handleVerifyCodeClick={handleVerifyCodeClick}
+					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 			<Spinner visible={verifyPhoneState?.loading} />

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

@@ -10,13 +10,14 @@ 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 {
 		isEdit,
 		formState,
 		showField,
+		requiredFields,
+		setIsSubmit,
 		cleanFormState,
 		onCloseProfile,
 		isRequiredField,
@@ -26,13 +27,10 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
-		isVerifiedPhone,
-		handleChangePromotions,
 	} = props;
 
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -62,10 +60,6 @@ export const UserFormDetailsUI = (props: any) => {
 			paddingStart: 0,
 			paddingBottom: 0,
 			marginBottom: -0,
-		},
-		checkBoxStyle: {
-			width: 25,
-			height: 25,
 		}
 	});
 
@@ -76,6 +70,8 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const [{ user }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
+	const [isValid, setIsValid] = useState(false)
+	const [isChanged, setIsChanged] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -153,9 +149,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 = {
@@ -163,12 +156,14 @@ export const UserFormDetailsUI = (props: any) => {
 					cellphone: '',
 				};
 			}
+			setIsSubmit && setIsSubmit(true)
 			handleButtonUpdateClick(changes);
 		}
 	};
 
 	const handleChangePhoneNumber = (number: any) => {
 		setPhoneInputData(number);
+		setIsChanged(true)
 		let phoneNumber = {
 			country_phone_code: {
 				name: 'country_phone_code',
@@ -228,10 +223,21 @@ export const UserFormDetailsUI = (props: any) => {
 	}, [user, isEdit]);
 
 	useEffect(() => {
-		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
+		if (!phoneInputData.error &&
+			phoneInputData?.phone?.country_phone_code &&
+			phoneInputData?.phone?.cellphone &&
+			configs?.verification_phone_required?.value === '1' &&
+			formState?.changes?.cellphone &&
+			isChanged) {
 			setWillVerifyOtpState?.(true)
 		}
-	}, [phoneInputData])
+	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
+
+	useEffect(() => {
+		if (!requiredFields || formState?.changes?.length === 0) return
+		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
+		setIsValid(_isValid)
+	}, [formState?.changes, requiredFields])
 
 	return (
 		<>
@@ -245,7 +251,7 @@ export const UserFormDetailsUI = (props: any) => {
 							}).map(
 								(field: any) =>
 									showField &&
-									showField(field.code) && (
+									showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
 										<React.Fragment key={field.id}>
 											<Controller
 												key={field.id}
@@ -319,7 +325,7 @@ export const UserFormDetailsUI = (props: any) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber && (
+							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
 									<PhoneInputNumber
@@ -344,71 +350,43 @@ export const UserFormDetailsUI = (props: any) => {
 									)}
 								</WrapperPhone>
 							)}
-							<Controller
-								control={control}
-								render={() => (
-									<>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-											{t('PASSWORD', 'Password')}
-										</OText>
-										<OInput
-											name='password'
-											placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
-											inputStyle={styles.inputStyle}
-											style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
-											autoCapitalize='none'
-											isDisabled={false}
-											value={
-												formState?.changes['password'] ??
-												(user && user['password']) ??
-												''
-											}
-											onChange={(val: any) => {
-												setValue('password', val.target.value)
-												handleChangeInput(val)
-											}}
-											autoCorrect
-											type='default'
-											returnKeyType="done"
-											autoCompleteType='off'
-											isSecured
-										/>
-									</>
-								)}
-								name='password'
-								rules={getInputRules({ name: 'password', code: 'password' })}
-								defaultValue=''
-							/>
-							<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))}
-							/>
+							{!requiredFields && (
+								<Controller
+									control={control}
+									render={() => (
+										<>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+												{t('PASSWORD', 'Password')}
+											</OText>
+											<OInput
+												name='password'
+												placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
+												inputStyle={styles.inputStyle}
+												style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+												autoCapitalize='none'
+												isDisabled={false}
+												value={
+													formState?.changes['password'] ??
+													(user && user['password']) ??
+													''
+												}
+												onChange={(val: any) => {
+													setValue('password', val.target.value)
+													handleChangeInput(val)
+												}}
+												autoCorrect
+												type='default'
+												returnKeyType="done"
+												autoCompleteType='off'
+												isSecured
+											/>
+										</>
+									)}
+									name='password'
+									rules={getInputRules({ name: 'password', code: 'password' })}
+									defaultValue=''
+								/>
+							)}
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (
@@ -440,7 +418,22 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
+			{requiredFields && (
+				<OButton
+					text={
+						formState.loading
+							? t('UPDATING', 'Updating...')
+							: t('CONTINUE', 'Continue')
+					}
+					bgColor={theme.colors.white}
+					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+					borderColor={theme.colors.primary}
+					isDisabled={formState.loading || !isValid}
+					imgRightSrc={null}
+					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
+					onClick={handleSubmit(onSubmit)}
+				/>
+			)}
 		</>
 	);
 };
-

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,22 +29,26 @@ 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 langPickerStyle = StyleSheet.create({
 		inputAndroid: {
 			color: theme.colors.textNormal,
@@ -108,22 +112,20 @@ 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 isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 	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(() => {
@@ -188,7 +189,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				</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 +200,12 @@ 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>
+					{isChewLayout && (
+						<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 +222,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 +265,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

@@ -35,12 +35,9 @@ const ProfileUI = (props: ProfileParams) => {
 		cleanFormState,
 		handleChangeInput,
 		handleButtonUpdateClick,
-		checkPhoneCodeState,
 		handleSendVerifyCode,
-		handleCheckPhoneCode,
 		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
+		setFormState
 	} = props;
 
 	const theme = useTheme();
@@ -73,6 +70,7 @@ const ProfileUI = (props: ProfileParams) => {
 	const { handleSubmit, errors, setValue, control } = useForm();
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
+	const [checkPhoneCodeState, setCheckPhoneCodeState] = useState({ loading: false, result: { error: false } })
 
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
@@ -272,9 +270,17 @@ const ProfileUI = (props: ProfileParams) => {
 		}
 	}, [verifyPhoneState])
 
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
+	const handleSendPhoneCode = (values: any) => {
+		setWillVerifyOtpState(false)
+		setIsModalVisible(false)
+		setFormState({
+			...formState,
+			changes: {
+				...formState?.changes,
+				verification_code: values?.code
+			}
+		})
+	}
 
 	return (
 		<>
@@ -283,7 +289,7 @@ const ProfileUI = (props: ProfileParams) => {
 				titleAlign={'center'}
 				onActionLeft={() => navigation.goBack()}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 , marginTop: Platform.OS === 'ios' ? 50 : 40 }}
+				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>
@@ -331,8 +337,7 @@ const ProfileUI = (props: ProfileParams) => {
 					phone={phoneInputData.phone}
 					verifyPhoneState={verifyPhoneState}
 					checkPhoneCodeState={checkPhoneCodeState}
-					handleCheckPhoneCode={handleCheckPhoneCode}
-					setCheckPhoneCodeState={setCheckPhoneCodeState}
+					handleCheckPhoneCode={handleSendPhoneCode}
 					handleVerifyCodeClick={handleVerifyCodeClick}
 					onClose={() => setIsModalVisible(false)}
 				/>