ordering-ui-react-native 0.22.45 → 0.22.46-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/PlaceSpot/index.tsx

@@ -236,9 +236,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
           <View style={{ alignItems: 'flex-start' }}>
             <OButton
               onClick={() => onChangeSpot()}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 12 }}
+              textStyle={{ fontSize: 12 }}
               imgRightSrc={null}
               text={t('UPDATE_SPOT_NUMBER', 'Update')}
               isDisabled={(!spotNumber && !Object.values(vehicle).every(e => e))}

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

@@ -27,7 +27,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 
 	const [, t] = useLanguage();
 
-  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
+	const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
 	return (
 		<View style={{ marginBottom: 30 }}>
@@ -49,9 +49,6 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 						onClick={loadMoreOrders}
 						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
 						imgRightSrc={null}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: theme.colors.white }}
 						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
 					/>
 				</WrappButton>

package/themes/original/src/components/ProductForm/ActionButton.tsx

@@ -43,9 +43,9 @@ export const ActionButton = (props: any) => {
             style={{
                 width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
             }}>
-            {((productCart &&
+            {(productCart &&
                 auth &&
-                (orderState.options?.address_id || isAllowUnaddressOrderType)) || (isSoldOut || maxProductQuantity <= 0)) && (
+                ((orderState.options?.address_id || isAllowUnaddressOrderType) || (isSoldOut || maxProductQuantity <= 0))) && (
                     <OButton
                         onClick={() => handleSaveProduct()}
                         imgRightSrc=""
@@ -57,15 +57,11 @@ export const ActionButton = (props: any) => {
                                     ? t('UPDATE', 'Update')
                                     : t('ADD', 'Add')
                             }`}
-                        isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
+                        isDisabled={buttonColor}
                         textStyle={{
-                            color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
                             fontSize: orderState.loading || editMode ? 10 : 14
                         }}
-                        bgColor={buttonColor ? theme.colors.lightGray : theme.colors.primary}
-                        borderColor={!buttonColor ? theme.colors.white : theme.colors.primary}
                         style={{
-                            opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
                             borderRadius: 7.6,
                             height: 44,
                             shadowOpacity: 0,
@@ -84,7 +80,7 @@ export const ActionButton = (props: any) => {
                         textStyle={{ fontSize: 10 }}
                     />
                 ) : (
-                    <OButton onClick={navigation.navigate('AddressList')} />
+                    <OButton onClick={() => navigation.navigate('AddressList')} />
                 ))}
             {!auth && (
                 <OButton
@@ -96,13 +92,12 @@ export const ActionButton = (props: any) => {
                             : t('LOGIN_SIGNUP', 'Login / Sign Up')
                     }
                     imgRightSrc=""
-                    textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
+                    textStyle={{ fontSize: 13, textAlign: 'center' }}
                     style={{
                         height: 42,
-                        borderColor: theme.colors.primary,
-                        backgroundColor: theme.colors.white,
                         paddingLeft: 0,
-                        paddingRight: 0
+                        paddingRight: 0,
+                        borderRadius: 7.6
                     }}
                 />
             )}

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

@@ -88,6 +88,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [events] = useEvent()
 	const commentRef = useRef()
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -487,114 +488,118 @@ export const ProductOptionsUI = (props: any) => {
 							</View>
 						) : (
 							<>
-								<Swiper
-									loop={false}
-									ref={swiperRef}
-									showsButtons={true}
-									style={styles.mainSwiper}
-									showsPagination={false}
-									onIndexChanged={(index : any) => handleChangeMainIndex(index)}
-									prevButton={
-										<View style={styles.swiperButton}>
-											<IconAntDesign
-												name="caretleft"
-												color={theme.colors.white}
-												size={13}
-											// style={styles.starIcon}
-											/>
-										</View>
-									}
-									nextButton={
-										<View style={styles.swiperButton}>
-											<IconAntDesign
-												name="caretright"
-												color={theme.colors.white}
-												size={13}
-											// style={styles.starIcon}
-											/>
-										</View>
-									}
-								>
-									{gallery && gallery?.length > 0 && gallery.map((img : any, i: number) => (
-										<View
-											style={styles.slide1}
-											key={i}
-										>
-											{(String(img).includes('http') || typeof img === 'number') ? (
-												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
-													source={typeof img !== 'number' ? {
-														uri: optimizeImage(img, 'h_1024,c_limit'),
-														priority: FastImage.priority.normal,
-													} : img}
-												/>
-											) : (
-												<>
-													<YoutubePlayer
-														height={'100%'}
-														width={'100%'}
-														play={playing}
-														videoId={img}
-														onChangeState={onStateChange}
+								{(product?.images || !hideProductDummyLogo) && (
+									<>
+										<Swiper
+											loop={false}
+											ref={swiperRef}
+											showsButtons={true}
+											style={styles.mainSwiper}
+											showsPagination={false}
+											onIndexChanged={(index : any) => handleChangeMainIndex(index)}
+											prevButton={
+												<View style={styles.swiperButton}>
+													<IconAntDesign
+														name="caretleft"
+														color={theme.colors.white}
+														size={13}
+													// style={styles.starIcon}
 													/>
-													<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
-												</>
-											)}
-										</View>
-									))}
-								</Swiper>
-								<ScrollView
-									horizontal
-									contentContainerStyle={{
-										paddingHorizontal: 20,
-										paddingVertical: 15
-									}}
-								>
-									{gallery?.length > 1 && gallery.map((img: any, index: number) => (
-										<TouchableOpacity
-											key={index}
-											onPress={() => handleClickThumb(index)}
-										>
-											<View
-												style={{
-													height: 56,
-													borderRadius: 8,
-													margin: 8,
-													opacity: index === thumbsSwiper ? 1 : 0.8
-												}}
-											>
-												{String(img).includes('http') ? (
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%',
-															opacity: isSoldOut ? 0.5 : 1
-														}}
-														width={56}
-														height={56}
-														cover
+												</View>
+											}
+											nextButton={
+												<View style={styles.swiperButton}>
+													<IconAntDesign
+														name="caretright"
+														color={theme.colors.white}
+														size={13}
+													// style={styles.starIcon}
 													/>
-												) : (
-													<OIcon
-														url={'https://img.youtube.com/vi/' + img + '/0.jpg'}
+												</View>
+											}
+										>
+											{gallery && gallery?.length > 0 && gallery.map((img : any, i: number) => (
+												<View
+													style={styles.slide1}
+													key={i}
+												>
+													{(String(img).includes('http') || typeof img === 'number') ? (
+														<FastImage
+															style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
+															source={typeof img !== 'number' ? {
+																uri: optimizeImage(img, 'h_1024,c_limit'),
+																priority: FastImage.priority.normal,
+															} : img}
+														/>
+													) : (
+														<>
+															<YoutubePlayer
+																height={'100%'}
+																width={'100%'}
+																play={playing}
+																videoId={img}
+																onChangeState={onStateChange}
+															/>
+															<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+														</>
+													)}
+												</View>
+											))}
+										</Swiper>
+										<ScrollView
+											horizontal
+											contentContainerStyle={{
+												paddingHorizontal: 20,
+												paddingVertical: 15
+											}}
+										>
+											{gallery?.length > 1 && gallery.map((img: any, index: number) => (
+												<TouchableOpacity
+													key={index}
+													onPress={() => handleClickThumb(index)}
+												>
+													<View
 														style={{
-															borderColor: theme.colors.lightGray,
+															height: 56,
 															borderRadius: 8,
-															minHeight: '100%',
-															opacity: isSoldOut ? 0.5 : 1
+															margin: 8,
+															opacity: index === thumbsSwiper ? 1 : 0.8
 														}}
-														width={56}
-														height={56}
-														cover
-													/>
-												)}
-											</View>
-										</TouchableOpacity>
+													>
+														{String(img).includes('http') ? (
+															<OIcon
+																url={img}
+																style={{
+																	borderColor: theme.colors.lightGray,
+																	borderRadius: 8,
+																	minHeight: '100%',
+																	opacity: isSoldOut ? 0.5 : 1
+																}}
+																width={56}
+																height={56}
+																cover
+															/>
+														) : (
+															<OIcon
+																url={'https://img.youtube.com/vi/' + img + '/0.jpg'}
+																style={{
+																	borderColor: theme.colors.lightGray,
+																	borderRadius: 8,
+																	minHeight: '100%',
+																	opacity: isSoldOut ? 0.5 : 1
+																}}
+																width={56}
+																height={56}
+																cover
+															/>
+														)}
+													</View>
+												</TouchableOpacity>
 
-									))}
-								</ScrollView>
+											))}
+										</ScrollView>
+									</>
+								)}
 							</>
 						)}
 					</WrapHeader>

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();
@@ -43,8 +44,17 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		? theme?.checkout?.components?.cart?.components?.product?.components?.image?.hidden
 		: theme?.confirmation?.components?.cart?.components?.products?.components?.photo?.hidden
 
+	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,
@@ -90,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)
@@ -153,13 +145,13 @@ 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' }}>
 						<ContentInfo>
-							{(product?.images || theme?.images?.dummies?.product) && !hideProductImage && (
+							{(product?.images || (!hideProductDummyLogo && theme?.images?.dummies?.product)) && !hideProductImage && (
 								<ProductImage>
 									{isFromCheckout ? (
 										product?.images ? (
@@ -245,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>
@@ -289,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({
@@ -349,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} />
+	)
+}