ordering-ui-react-native 0.23.57 → 0.23.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.23.57",
+  "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

@@ -175,9 +175,12 @@ const CheckoutUI = (props: any) => {
 	const [showTitle, setShowTitle] = useState(false)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
 	const [isGiftCardCart, setIsGiftCardCart] = useState(!cart?.business_id)
+	const [userHasCards, setUserHasCards] = useState(false)
 	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_connect', 'stripe_redirect']
+	const cardsPaymethods: any = ['stripe', 'stripe_connect']
+
 	const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 
 	const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field: any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
@@ -226,8 +229,8 @@ const CheckoutUI = (props: any) => {
 		validateCommentsCartField ||
 		validateDriverTipField ||
 		validateCouponField ||
-		validateZipcodeCard
-
+		validateZipcodeCard ||
+		(!userHasCards && cardsPaymethods.includes(paymethodSelected?.gateway))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -261,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 })
 	}
 
@@ -868,6 +868,7 @@ const CheckoutUI = (props: any) => {
 									openUserModal={setIsOpen}
 									paymethodClicked={paymethodClicked}
 									setPaymethodClicked={setPaymethodClicked}
+									setUserHasCards={setUserHasCards}
 								/>
 							</ChPaymethods>
 						</ChSection>

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/MomentOption/index.tsx

@@ -377,7 +377,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 							titleWrapStyle={{ paddingHorizontal: 0 }}
 						/>
 					)}
-					{(preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder && (
+					{((preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder) && (
 						<WrapSelectOption
 							onPress={() => _handleAsap()}
 							disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
@@ -510,4 +510,4 @@ export const MomentOption = (props: any) => {
 		UIComponent: MomentOptionUI,
 	};
 	return <MomentOptionController {...momentOptionProps} />;
-};
+};

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

@@ -76,7 +76,8 @@ const PaymentOptionsUI = (props: any) => {
 		openUserModal,
 		paymethodClicked,
 		setPaymethodClicked,
-		androidAppId
+		androidAppId,
+		setUserHasCards
 	} = props
 
 	const theme = useTheme();
@@ -348,6 +349,7 @@ const PaymentOptionsUI = (props: any) => {
 						businessId={props.businessId}
 						onPaymentChange={onPaymentChange}
 						paySelected={props.paySelected}
+						setUserHasCards={setUserHasCards}
 					/>
 				</View>
 			)}
@@ -440,6 +442,7 @@ const PaymentOptionsUI = (props: any) => {
 						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
 						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable || isOpenMethod?.paymethod?.credentials?.publishable}
 						paySelected={props.paySelected}
+						setUserHasCards={setUserHasCards}
 					/>
 				</View>
 			)}

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

@@ -32,7 +32,8 @@ export const StripeCardsListUI = (props: any) => {
 		gateway,
 		paySelected,
 		newCardAdded,
-		addNewCardAsDefault
+		addNewCardAsDefault,
+		setUserHasCards
 	} = props;
 
 	const theme = useTheme();
@@ -62,6 +63,11 @@ export const StripeCardsListUI = (props: any) => {
 		}
 	}, [JSON.stringify(newCardAdded)])
 
+	useEffect(() => {
+		const hasCardSelected = cardsList?.cards?.some?.((card : any) => card?.id === paySelected?.data?.id)
+		setUserHasCards && setUserHasCards(cardsList?.cards?.length > 0 && hasCardSelected)
+	}, [cardsList?.cards?.length, paySelected])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (

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 {