ordering-ui-react-native 0.23.58 → 0.23.59

package/package.json

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

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

@@ -264,14 +264,11 @@ const CheckoutUI = (props: any) => {
 		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
 	}
 
-	const handleSuccessSignup = (user: any) => {
-		login({
+	const handleSuccessSignup = async (user: any) => {
+		await login({
 			user,
 			token: user?.session?.access_token
 		})
-		if (openModal?.isGuest && requiredFields?.length === 0) {
-			openModal?.isGuest && handlePlaceOrderAsGuest()
-		}
 		setOpenModal({ ...openModal, signup: false, isGuest: false })
 	}
 

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

@@ -73,7 +73,8 @@ const LoginFormUI = (props: LoginParams) => {
 		generateOtpCode,
 		useLoginOtpEmail,
 		useLoginOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -300,6 +301,11 @@ const LoginFormUI = (props: LoginParams) => {
 		setTabLayouts(_tabLayouts)
 	}
 
+	const handleChangePhoneNumber = (number : any, rawNumber: any) => {
+		setPhoneInputData(number)
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -586,7 +592,7 @@ const LoginFormUI = (props: LoginParams) => {
 							<View style={{ marginBottom: 28 }}>
 								<PhoneInputNumber
 									data={phoneInputData}
-									handleData={(val: any) => setPhoneInputData(val)}
+									handleData={handleChangePhoneNumber}
 									textInputProps={{
 										returnKeyType: 'next',
 										onSubmitEditing: () => passwordRef?.current?.focus?.(),

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

@@ -42,6 +42,8 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	})
 	const isDisableNumberValidation = parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)
 	const countriesWithSubOptions = ['PR']
+	const codesStartsWithZero: any = ['44']
+
 	const style = StyleSheet.create({
 		input: {
 			backgroundColor: theme.colors.white,
@@ -69,13 +71,22 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	useEffect(() => {
 		if ((defaultValue && userphoneNumber) || !defaultValue) {
 			if (userphoneNumber) {
-				const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
+				const validationsForUK = ['01', '02', '07', '0800', '0808', '0845', '0870', '0871']
+
+				let isPossibly = false
+				let numberWithoutCountryCode = ''
 				const callingCode = phoneInput.current?.getCallingCode();
+				const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
+				if (codesStartsWithZero.includes(callingCode)) {
+					numberWithoutCountryCode = cellphone.replace(callingCode || '', '')
+					const result = validationsForUK.some(areaCode => numberWithoutCountryCode?.startsWith(areaCode))
+					isPossibly = result && numberWithoutCountryCode?.length >= 10 && numberWithoutCountryCode?.length < 12
+				}
+				const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
 				const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
 				const regex = /^[0-9]*$/
-				const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
 				const validNumber = regex.test(cellphone)
-				if (((!checkValid && formattedNumber?.number) || !validNumber) && !!isDisableNumberValidation) {
+				if (((!checkValid && formattedNumber?.number && !isPossibly) || !validNumber) && !!isDisableNumberValidation) {
 					handleData && handleData({
 						...data,
 						error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
@@ -89,6 +100,9 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 						country_phone_code: callingCode,
 						cellphone: !isDisableNumberValidation ? cellphone.slice(callingCode?.length) : formattedNumber?.number
 					}
+				}, {
+					countryCallingCode: callingCode,
+					number: numberWithoutCountryCode,
 				})
 			} else {
 				handleData && handleData({

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

@@ -83,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
 		useSignUpOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -366,6 +367,19 @@ const SignupFormUI = (props: SignupParams) => {
 		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
+	const handleChangePhoneNumber = (number : any, rawNumber: any) => {
+		setPhoneInputData({
+			...phoneInputData,
+			...number,
+			phone: {
+				...phoneInputData.phone,
+				...number.phone,
+				country_code: phoneInputData.phone.country_code
+			}
+		})
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -657,15 +671,7 @@ const SignupFormUI = (props: SignupParams) => {
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
-										handleData={(val: any) => setPhoneInputData({
-											...phoneInputData,
-											...val,
-											phone: {
-												...phoneInputData.phone,
-												...val.phone,
-												country_code: phoneInputData.phone.country_code
-											}
-										})}
+										handleData={handleChangePhoneNumber}
 										forwardRef={phoneRef}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,

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

@@ -66,7 +66,7 @@ export const StripeCardsListUI = (props: any) => {
 	useEffect(() => {
 		const hasCardSelected = cardsList?.cards?.some?.((card : any) => card?.id === paySelected?.data?.id)
 		setUserHasCards && setUserHasCards(cardsList?.cards?.length > 0 && hasCardSelected)
-	}, [cardsList?.cards?.length])
+	}, [cardsList?.cards?.length, paySelected])
 
 	return (
 		<>

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

@@ -42,7 +42,8 @@ export const UserFormDetailsUI = (props: any) => {
 		isGuest,
 		isOrderTypeValidationField,
 		checkoutFields,
-		isCheckoutPlace
+		isCheckoutPlace,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -185,7 +186,7 @@ export const UserFormDetailsUI = (props: any) => {
 				formState.changes?.cellphone === null &&
 				((validationFields?.fields?.checkout?.cellphone?.enabled &&
 					validationFields?.fields?.checkout?.cellphone?.required) ||
-					(configs?.verification_phone_required?.value === '1' && !user?.guest_id)) 
+					(configs?.verification_phone_required?.value === '1' && !user?.guest_id))
 			) {
 				content = content + `${t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.',)}\n`
 				showToast(ToastType.Error, content);
@@ -207,7 +208,7 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	};
 
-	const handleChangePhoneNumber = (number: any) => {
+	const handleChangePhoneNumber = (number: any, rawNumber : any) => {
 		setPhoneInputData(number);
 		setIsChanged(true)
 		let phoneNumber = {
@@ -220,6 +221,7 @@ export const UserFormDetailsUI = (props: any) => {
 				value: number.phone.cellphone,
 			},
 		};
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
 		handleChangeInput(phoneNumber, true);
 	};
 
@@ -428,7 +430,7 @@ export const UserFormDetailsUI = (props: any) => {
 										<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
 										<PhoneInputNumber
 											data={phoneInputData}
-											handleData={(val: any) => handleChangePhoneNumber(val)}
+											handleData={handleChangePhoneNumber}
 											changeCountry={(val: any) => changeCountry(val)}
 											defaultValue={phoneUpdate ? '' : cellphoneValue()}
 											defaultCode={user?.country_code ?? user?.country_phone_code ?? null}

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

@@ -25,7 +25,8 @@ export interface LoginParams {
 	generateOtpCode: (values?: any) => void,
 	useLoginOtpEmail?: boolean,
 	useLoginOtpCellphone?: boolean,
-	useLoginOtp?: boolean
+	useLoginOtp?: boolean,
+	setCellphoneStartZero?: any
 }
 export interface ProfileParams {
 	navigation?: any;
@@ -131,6 +132,7 @@ export interface SignupParams {
 	setSignUpTab?: (in1: string) => void;
 	setWillVerifyOtpState?: (in1: boolean) => void;
 	setOtpState?: (in1: string) => void;
+	setCellphoneStartZero?: any
 }
 
 export interface PhoneInputParams {