ordering-ui-react-native 0.15.66 → 0.15.67-release

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';
@@ -17,6 +17,9 @@ export const UserFormDetailsUI = (props: any) => {
 		isEdit,
 		formState,
 		showField,
+		requiredFields,
+		onClose,
+		setIsSubmit,
 		cleanFormState,
 		onCloseProfile,
 		isRequiredField,
@@ -76,6 +79,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: {
@@ -141,8 +146,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 +158,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,6 +165,7 @@ export const UserFormDetailsUI = (props: any) => {
 					cellphone: '',
 				};
 			}
+			setIsSubmit && setIsSubmit(true)
 			handleButtonUpdateClick(changes);
 		}
 	};
@@ -182,7 +185,7 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(phoneNumber, true);
 	};
 
-	const changeCountry = (country : any) => {
+	const changeCountry = (country: any) => {
 		let countryCode = {
 			country_code: {
 				name: 'country_code',
@@ -229,10 +232,16 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
+			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 (
 		<>
 			<UDForm>
@@ -245,7 +254,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,15 +328,15 @@ 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
 										data={phoneInputData}
 										handleData={(val: any) => handleChangePhoneNumber(val)}
-										changeCountry={(val : any) => changeCountry(val)}
+										changeCountry={(val: any) => changeCountry(val)}
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
-										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
+										defaultCode={user?.country_phone_code || null}
 										boxStyle={styles.phoneSelect}
 										inputStyle={styles.phoneInputStyle}
 										textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
@@ -344,69 +353,76 @@ 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=''
-							/>
-							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}>
+							{!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=''
+								/>
+							)}
+							{!requiredFields && (
 								<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
+										<TouchableOpacity
+											style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
+											onPress={() => {
+												onChange(!value)
+												handleChangePromotions(!value)
 											}}
-											tintColor={theme.colors.disabled}
-											onCheckColor={theme.colors.primary}
-											onTintColor={theme.colors.primary}
-											style={Platform.OS === 'ios' && styles.checkBoxStyle}
-										/>
+										>
+											<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))}
 								/>
-								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-							</View>
+							)}
+
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (
@@ -438,6 +454,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,6 +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 FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
 
@@ -108,8 +109,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
-	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 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)
 	}
@@ -214,6 +215,14 @@ 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>

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

@@ -40,7 +40,8 @@ const ProfileUI = (props: ProfileParams) => {
 		handleCheckPhoneCode,
 		verifyPhoneState,
 		isVerifiedPhone,
-		setCheckPhoneCodeState
+		setCheckPhoneCodeState,
+    setFormState
 	} = props;
 
 	const theme = useTheme();
@@ -56,7 +57,8 @@ const ProfileUI = (props: ProfileParams) => {
 		},
 		pagePadding: {
 			paddingLeft: 40,
-			paddingRight: 40
+			paddingRight: 40,
+			justifyContent: 'center',
 		},
 		navBarStyle: {
 			paddingLeft: 40,
@@ -205,8 +207,8 @@ const ProfileUI = (props: ProfileParams) => {
 				},
 			});
 			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
+				cellphone: cellphone,
+				country_phone_code: countryPhoneCode
 			})
 		}
 	}
@@ -271,21 +273,30 @@ 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 (
 		<>
+			<NavBar
+				title={t('ACCOUNT', 'Account')}
+				titleAlign={'center'}
+				onActionLeft={() => navigation.goBack()}
+				showCall={false}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
+			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>
-					<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 +316,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 +337,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>
 		</>