ordering-ui-react-native 0.14.78 → 0.14.79

package/package.json

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

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/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

@@ -25,6 +25,8 @@ export const UserFormDetailsUI = (props: any) => {
 		handleButtonUpdateClick,
 		phoneUpdate,
 		hideUpdateButton,
+		setWillVerifyOtpState,
+		isVerifiedPhone
 		handleChangePromotions
 	} = props;
 
@@ -139,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,
@@ -151,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 = {
@@ -211,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>

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 {