ordering-ui-react-native 0.22.75 → 0.22.76-release

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PhoneInput from "react-native-phone-number-input";
-import { StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useLanguage, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../types';
 import { OIcon, OText } from '../shared';
+import { OModal } from '../../../../../src/components/shared'
 import { findExitingCode, transformCountryCode } from '../../utils'
 
 export const PhoneInputNumber = (props: PhoneInputParams) => {
@@ -25,7 +26,8 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		isDisabled,
 		isStartValidation,
 		changeCountry,
-		updateStateWithSubmit
+		updateStateWithSubmit,
+		defaultCodeFallback
 	} = props
 
 	const theme = useTheme();
@@ -34,6 +36,13 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	const [{ configs }] = useConfig()
 	const phoneInput = useRef<PhoneInput>(null);
 	const [userphoneNumber, setUserphoneNumber] = useState('');
+	const [countryPhoneSuboptions, setCountryPhoneSuboptions] = useState({
+		open: false,
+		options: []
+	})
+	const isDisableNumberValidation = parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)
+	const countriesWithSubOptions = ['PR']
+	const codesStartsWithZero: any = ['44']
 
 	const style = StyleSheet.create({
 		input: {
@@ -62,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) {
+				if (((!checkValid && formattedNumber?.number && !isPossibly) || !validNumber) && !!isDisableNumberValidation) {
 					handleData && handleData({
 						...data,
 						error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
@@ -80,8 +98,11 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 					error: '',
 					phone: {
 						country_phone_code: callingCode,
-						cellphone: formattedNumber?.number
+						cellphone: !isDisableNumberValidation ? cellphone.slice(callingCode?.length) : formattedNumber?.number
 					}
+				}, {
+					countryCallingCode: callingCode,
+					number: numberWithoutCountryCode,
 				})
 			} else {
 				handleData && handleData({
@@ -109,6 +130,37 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		}
 	}, [defaultValue])
 
+	useEffect(() => {
+		if (defaultCodeFallback && countriesWithSubOptions.includes(defaultCode) && phoneInput.current) {
+			phoneInput.current?.setState({
+				...phoneInput.current.state,
+				code: `${defaultCodeFallback}`
+			})
+		}
+	}, [phoneInput.current])
+
+	const _changeCountry = (c) => {
+		changeCountry?.(c)
+		if (c.callingCode?.length > 1) {
+			setCountryPhoneSuboptions({
+				open: true,
+				options: c.callingCode
+			})
+		}
+	}
+
+	const handleSelectCallingCode = (option: any) => {
+		setCountryPhoneSuboptions({
+			open: false,
+			options: []
+		})
+		handleChangeNumber(`+${option}`)
+		phoneInput.current?.setState({
+			...phoneInput.current.state,
+			code: `${option}`
+		})
+	}
+
 	return (
 		<Wrapper onPress={() => forwardRef?.current?.focus?.()}>
 			{(isStartValidation && userphoneNumber === '') && (
@@ -130,7 +182,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 					: findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
 				withDarkTheme
-				onChangeCountry={(country) => changeCountry?.(country)}
+				onChangeCountry={(country: any) => _changeCountry?.(country)}
 				countryPickerProps={{ withAlphaFilter: true }}
 				textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
 				textInputStyle={textStyle}
@@ -151,6 +203,39 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 					{data.error}
 				</OText>
 			)}
+			<OModal
+				open={countryPhoneSuboptions.open}
+				onClose={() => setCountryPhoneSuboptions({
+					open: false,
+					options: []
+				})}
+				title={t('SELECT_THE_PHONE_CODE', 'Select the phone code')}
+				entireModal
+			>
+				<View
+					style={{
+						alignItems: 'center'
+					}}
+				>
+					{countryPhoneSuboptions.options.map((option: any) => (
+						<Pressable
+							style={{
+								margin: 10,
+								padding: 10,
+								borderBottomColor: '#ccc',
+								borderBottomWidth: 1,
+								width: '100%'
+							}}
+							key={option}
+							onPress={() => handleSelectCallingCode(option)}
+						>
+							<OText>
+								{`+${option}`}
+							</OText>
+						</Pressable>
+					))}
+				</View>
+			</OModal>
 		</Wrapper>
 	)
 }

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { View, Animated, StyleSheet, TouchableOpacity } from 'react-native'
-import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
+import { useUtils, useLanguage, useOrder, ProductItemAccordion as ProductItemAccordionController } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import RNPickerSelect from 'react-native-picker-select'
@@ -24,7 +24,7 @@ import { OIcon, OText, OAlert, OModal } from '../shared'
 
 import { ProductItemAccordionParams } from '../../types'
 
-export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
+export const ProductItemAccordionUI = (props: ProductItemAccordionParams) => {
 
 	const {
 		isDisabledEdit,
@@ -36,6 +36,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		onDeleteProduct,
 		onEditProduct,
 		isFromCheckout,
+		productInfo
 	} = props
 
 	const theme = useTheme();
@@ -46,6 +47,14 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 	const hideProductCommentHide = isFromCheckout && theme?.checkout?.components?.cart?.components?.product?.components?.comments?.hidden
 
+	const styles = StyleSheet.create({
+		productImage: {
+			borderRadius: 7.6,
+			width: 48,
+			height: 48
+		}
+	})
+
 	const pickerStyle = StyleSheet.create({
 		inputAndroid: {
 			width: 45,
@@ -91,24 +100,6 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	const [isServiceOpen, setIsServiceOpen] = useState(false)
 	const [productQuantityState, setProductQuantityState] = useState<any>(product.quantity.toString())
 
-	const productInfo = () => {
-		if (isCartProduct) {
-			const ingredients = JSON.parse(JSON.stringify(Object.values(product.ingredients ?? {})))
-			let options = JSON.parse(JSON.stringify(Object.values(product.options ?? {})))
-
-			options = options.map((option: any) => {
-				option.suboptions = Object.values(option.suboptions ?? {})
-				return option
-			})
-			return {
-				...productInfo,
-				ingredients,
-				options
-			}
-		}
-		return product
-	}
-
 	const handleEditProduct = (curProduct: any) => {
 		if (!curProduct?.calendar_event) {
 			onEditProduct && onEditProduct(curProduct)
@@ -154,8 +145,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 					isValid={product?.valid ?? true}
 					onPress={
 						(!product?.valid_menu && isCartProduct) ||
-						!(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || !!product.comment)
-						? null : () => setActiveState(!isActive)
+							!(productInfo.ingredients.length > 0 || productInfo.options.length > 0 || !!product.comment)
+							? null : () => setActiveState(!isActive)
 					}
 				>
 					<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
@@ -246,7 +237,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 							<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
 								<View style={{ flexDirection: 'row' }}>
 									<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
-									{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || !!product.comment) && (
+									{(productInfo.ingredients.length > 0 || productInfo.options.length > 0 || !!product.comment) && (
 										<MaterialCommunityIcon name='chevron-down' size={18} />
 									)}
 								</View>
@@ -290,20 +281,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: isFromCheckout ? 100 : 40, marginTop: isFromCheckout ? -80 : -30 }}>
 					<Animated.View>
 						<AccordionContent>
-							{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
+							{productInfo.ingredients.length > 0 && productInfo.ingredients.some((ingredient: any) => !ingredient.selected) && (
 								<ProductOptionsList>
 									<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
-									{productInfo().ingredients.map((ingredient: any, i) => !ingredient.selected && (
+									{productInfo.ingredients.map((ingredient: any, i) => !ingredient.selected && (
 										<OText size={10} color={theme.colors.textThird} key={ingredient.id + i} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
 									))}
 								</ProductOptionsList>
 							)}
-							{productInfo().options.length > 0 && (
+							{productInfo.options.length > 0 && (
 								<ProductOptionsList>
-									{productInfo().options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => (
+									{productInfo.options.map((option: any) => (
 										<ProductOption key={option.id}>
 											<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
-											{option.suboptions.map((suboption: any) => (
+											{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map((suboption: any) => (
 												<ProductSubOption key={suboption.id}>
 													<OText size={10} color={theme.colors.textThird}>
 														{getFormattedSubOptionName({
@@ -350,13 +341,13 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	)
 }
 
-const styles = StyleSheet.create({
-	productImage: {
-		borderRadius: 7.6,
-		width: 48,
-		height: 48
-	},
-	test: {
-		overflow: 'hidden',
+export const ProductItemAccordion = (props: any) => {
+	const productItemAccordionProps = {
+		...props,
+		UIComponent: ProductItemAccordionUI
 	}
-})
+
+	return (
+		<ProductItemAccordionController {...productItemAccordionProps} />
+	)
+}

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

@@ -36,10 +36,16 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		setIsScrollAvailable,
 		image,
 		enableIntersection,
-		onChange
+		usePizzaValidation,
+		pizzaState
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement =
+		option?.with_half_option
+			? pizzaState?.[`option:${option?.id}`]?.value === option?.max
+			: option?.limit_suboptions_by_max
+				? (balance === option?.max || state.quantity === suboption.max)
+				: state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	const theme = useTheme();
@@ -66,8 +72,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
+		const minMaxValidation = option?.with_half_option ? usePizzaValidation : (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))
 
-		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
+		if (!state.selected && minMaxValidation) {
 			setShowMessage(true)
 		}
 	}
@@ -87,13 +94,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
 			setShowMessage(false)
 		}
-	}, [balance])
-
-	useEffect(() => {
-		if (!suboption?.preselected || !option?.respect_to) return
-		const newState = { ...state, selected: suboption?.preselected, quantity: state.selected ? 0 : 1 }
-		onChange(newState, suboption, option)
-	}, [suboption, option])
+	}, [balance, pizzaState?.[`option:${option?.id}`]?.value])
 
 	return (
 		<InView onChange={(inView: boolean) => handleChangeInterSection(inView)} triggerOnce={true}>
@@ -129,7 +130,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							{suboption?.name}
 						</OText>
 					</IconControl>
-					{option?.allow_suboption_quantity && state?.selected && (
+					{!(option?.max === 1 && option?.min === 1) && option?.allow_suboption_quantity && state?.selected && (
 						<QuantityControl>
 							<>
 								<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
@@ -142,11 +143,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OText size={12}>
 									{state.quantity}
 								</OText>
-								<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+								<Checkbox disabled={disabled || disableIncrement || usePizzaValidation} onPress={increment}>
 									<IconAntDesign
 										name='pluscircleo'
 										size={iconsSize}
-										color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+										color={disableIncrement || disabled || usePizzaValidation ? theme.colors.disabled : theme.colors.primary}
 									/>
 								</Checkbox>
 							</>
@@ -164,7 +165,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 										style={styles.inverse}
 									/>
 								</Circle>
-								<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+								<Circle disabled={disabled || (pizzaState?.[`option:${option?.id}`]?.value === option?.max)} onPress={() => changePosition('whole')}>
 									<OIcon
 										src={theme.images.general.half_f}
 										color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}

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

@@ -143,7 +143,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     const valid = busyTimes.some(item => {
       return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
         moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
-        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).valueOf() &&
           moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
@@ -259,7 +259,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   useEffect(() => {
-    if (selectDate === null || currentProfessional === null) return
+    if (selectDate === null || !currentProfessional?.schedule) return
     const _times = getTimes(selectDate, currentProfessional)
     setTimeList(_times)
   }, [selectDate, currentProfessional])

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Modal } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -32,11 +32,9 @@ import {
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
-import { VerifyPhone } from '../VerifyPhone';
 
 import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
-import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
@@ -85,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
 		useSignUpOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -141,6 +140,8 @@ const SignupFormUI = (props: SignupParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [isCheckingCode, setCheckingCode] = useState(false)
+	const [otpError, setOtpError] = useState(null)
 
 	const tabsRef = useRef<any>(null)
 	const nameRef = useRef<any>(null);
@@ -153,9 +154,9 @@ const SignupFormUI = (props: SignupParams) => {
 	const recaptchaRef = useRef<any>({});
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
-	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
-	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
+	const appleLoginEnabled = Platform.OS === 'ios' && configs?.apple_login_enabled?.value === '1'
 
 	const closeAlert = () => {
 		setAlertState({
@@ -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' &&
@@ -467,9 +481,16 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
+			const titleText = (
+				typeof checkPhoneCodeState?.result?.result === 'string'
+					? checkPhoneCodeState?.result?.result
+					: checkPhoneCodeState?.result?.result[0].toString()
+			) || t('ERROR', 'Error')
+			setCheckingCode(false)
+			setOtpError(titleText)
+			checkPhoneCodeState?.generate && setAlertState({
 				open: true,
-				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				title: titleText,
 				content: []
 			})
 		}
@@ -650,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,
@@ -967,13 +980,16 @@ const SignupFormUI = (props: SignupParams) => {
 					)
 				)}
 			</FormSide>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					pinCount={numOtpInputs || 6}
 					willVerifyOtpState={willVerifyOtpState || false}
 					setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
@@ -981,7 +997,7 @@ const SignupFormUI = (props: SignupParams) => {
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Spinner
 				visible={formState.loading || validationFields.loading || isFBLoading}
 			/>

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

@@ -3,7 +3,8 @@ import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
   useOrder,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native';
 import FastImage from 'react-native-fast-image'
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -45,6 +46,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
+  const [{ configs }] = useConfig()
   const theme = useTheme();
   const isFocused = useIsFocused();
 
@@ -54,6 +56,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
   const isGiftCardOrder = !order?.business_id
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     container: {
@@ -284,7 +287,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   ) : (
                     <Price>
                       <OText size={12} lineHeight={18}>
-                        {parsePrice(order?.total)}
+                        {parsePrice(order?.summary?.total ?? order?.total)}
                       </OText>
                     </Price>
                   )}
@@ -333,7 +336,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
+                        {order?.business?.length > 1 ? order?.business?.length : !(changeIdToExternalId && order?.external_id) && (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -342,7 +345,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : ((changeIdToExternalId && order?.external_id) || order.id) + ` \u2022 `}
                       </OText>
                     </>
                   )}
@@ -367,7 +370,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                     size={10}
                     lineHeight={15}
                     numberOfLines={1}>
-                    {getOrderStatus(order.status)?.value}
+                    {getOrderStatus(order.status, t)?.value}
                   </OText>
                 )}
               </View>

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

@@ -54,6 +54,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
 	const textSize = isChewLayout ? 12 : 10
 	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
+	const hideFavoriteIcon = theme?.business_view?.components?.products?.components?.product?.components?.favorite?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -198,7 +199,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									style={{ ...styles.line18, flex: 1 }}>
 									{product?.name}
 								</OText>
-								{!isPreviously && (
+								{!isPreviously && !hideFavoriteIcon && (
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}

package/themes/original/src/components/SingleProductCard/styles.tsx

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -35,7 +35,7 @@ const StripeElementsFormUI = (props: any) => {
 		setPlaceByMethodPay,
 		cartTotal,
 		publicKeyAddCard,
-		urlScheme,
+		urlscheme,
 		androidAppId,
 		businessNames,
 		setNewCardAdded
@@ -218,7 +218,7 @@ const StripeElementsFormUI = (props: any) => {
 							<StripeProvider
 								publishableKey={isToSave}
 								merchantIdentifier={merchantId}
-								urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
+								urlscheme={`${urlscheme}://checkout/${cart?.uuid}`}
 							>
 								{methodsPay?.includes(paymethod) ? (
 									<StripeMethodForm