ordering-ui-react-native 0.21.68 → 0.21.70

package/package.json

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

package/themes/business/src/components/DriverMap/index.tsx

@@ -382,7 +382,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                   <View style={styles.view}>
                     <OIcon
                       style={styles.image}
-                      url={location.icon}
+                      src={typeof location.icon === 'number' ? location.icon : { uri: location.icon }}
                       width={25}
                       height={25}
                     />

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

@@ -491,8 +491,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {business?.categories?.length > 0 && isOpenFiltProducts && (
           <FiltProductsContainer
             style={{
-              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 55 : 0),
-              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight,
+              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 10 : 0),
+              top: Platform.OS === 'ios' ? viewOrderButtonVisible ? (searchBarHeight - 10) + insets.top + 10 : (searchBarHeight - 10) + insets.top : searchBarHeight,
             }}
             contentContainerStyle={{ flexGrow: 1 }}
           >

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

@@ -217,7 +217,7 @@ const PaymentOptionsUI = (props: any) => {
 								style={{ margin: 0, marginTop: 4 }}
 								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 							>
-								{t(item.gateway.toUpperCase(), item.name)}
+								{t(item?.gateway?.toUpperCase(), item.name)}
 							</OText>
 						</PMItem>
 					</TouchableOpacity>

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

@@ -58,6 +58,8 @@ import NavBar from '../NavBar';
 import { orderTypeList } from '../../utils';
 import { ActionButton } from './ActionButton'
 import { ExtraOptions } from './ExtraOptions'
+import { IOScrollView } from 'react-native-intersection-observer';
+
 const windowWidth = Dimensions.get('window').width;
 
 
@@ -286,14 +288,14 @@ export const ProductOptionsUI = (props: any) => {
 		setQtyBy({ [val]: true, [!val]: false })
 	}
 
-	const onStateChange = useCallback((state) => {
+	const onStateChange = useCallback((state : string) => {
 		if (state === "ended") {
 			setPlaying(false);
 		}
 	}, []);
 
 	const togglePlaying = useCallback(() => {
-		setPlaying((prev) => !prev);
+		setPlaying((prev : any) => !prev);
 	}, []);
 
 	const onChangeProductCartQuantity = (quantity: number) => {
@@ -327,6 +329,9 @@ export const ProductOptionsUI = (props: any) => {
 	let _optionLayout: any = {}
 
 	const handleOnLayout = (event: any, optionId: any, lastMounts: boolean) => {
+		if (suboptionsLength >= 200) {
+			return
+		}
 		_optionLayout = { ..._optionLayout }
 		const optionKey = 'id:' + optionId
 		_optionLayout[optionKey] = { y: event.nativeEvent.layout?.y }
@@ -436,6 +441,8 @@ export const ProductOptionsUI = (props: any) => {
 		selOpt
 	}
 
+	const suboptionsLength = product.extras.reduce((acc : number, extras : any) => acc + extras?.options?.reduce((accSuboptions : number, options: any) => accSuboptions + options?.suboptions?.length, 0), 0)
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<View style={styles.wrapperNavbar}>
@@ -462,7 +469,7 @@ export const ProductOptionsUI = (props: any) => {
 				</TopHeader>
 			</View>
 			{!error && (
-				<ScrollView
+				<IOScrollView
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
 					stickyHeaderIndices={[2]}
@@ -488,7 +495,7 @@ export const ProductOptionsUI = (props: any) => {
 									showsButtons={true}
 									style={styles.mainSwiper}
 									showsPagination={false}
-									onIndexChanged={(index) => handleChangeMainIndex(index)}
+									onIndexChanged={(index : any) => handleChangeMainIndex(index)}
 									prevButton={
 										<View style={styles.swiperButton}>
 											<IconAntDesign
@@ -510,7 +517,7 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									}
 								>
-									{gallery && gallery?.length > 0 && gallery.map((img, i) => (
+									{gallery && gallery?.length > 0 && gallery.map((img : any, i: number) => (
 										<View
 											style={styles.slide1}
 											key={i}
@@ -545,7 +552,7 @@ export const ProductOptionsUI = (props: any) => {
 										paddingVertical: 15
 									}}
 								>
-									{gallery?.length > 1 && gallery.map((img, index) => (
+									{gallery?.length > 1 && gallery.map((img: any, index: number) => (
 										<TouchableOpacity
 											key={index}
 											onPress={() => handleClickThumb(index)}
@@ -727,7 +734,7 @@ export const ProductOptionsUI = (props: any) => {
 									</OText>
 								</TouchableOpacity>
 							)}
-							{product?.extras?.map((extra: any) =>
+							{suboptionsLength < 200 && product?.extras?.map((extra: any) =>
 								<ExtraOptions key={extra.id} options={extra.options} {...extraOptionsProps} />
 							)}
 						</ExtraOptionWrap>
@@ -842,6 +849,7 @@ export const ProductOptionsUI = (props: any) => {
 																				}
 																				setIsScrollAvailable={setIsScrollAvailable}
 																				error={errors[`id:${option.id}`]}
+																				enableIntersection={suboptionsLength >= 200}
 																			/>
 																		);
 																	},
@@ -882,7 +890,7 @@ export const ProductOptionsUI = (props: any) => {
 					{!!error && error?.length > 0 && (
 						<NotFoundSource content={error[0]?.message || error[0]} />
 					)}
-				</ScrollView>
+				</IOScrollView>
 			)}
 			{!loading && !error && product && (
 				<ProductActions ios={Platform?.OS === 'ios'} isColumn={isHaveWeight}>

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

@@ -19,6 +19,8 @@ import {
 	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
+import { InView } from 'react-native-intersection-observer'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder';
 
 export const ProductOptionSubOptionUI = (props: any) => {
 	const {
@@ -32,7 +34,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		changePosition,
 		disabled,
 		setIsScrollAvailable,
-		image
+		image,
+		enableIntersection
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -43,6 +46,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const [{ parsePrice, optimizeImage }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const iconsSize = 20
 
@@ -67,6 +71,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		}
 	}
 
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+	}
+
 	useEffect(() => {
 		if (balance === option?.max && state?.selected && isDirty) {
 			setIsDirty(false)
@@ -81,104 +89,110 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	}, [balance])
 
 	return (
-		<View>
-			<Container onPress={!((option?.with_half_option || option?.allow_suboption_quantity) && state?.selected) ? () => handleSuboptionClick() : null}>
-				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
-					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
-						state?.selected ? (
-							<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
-						) : (
-							<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
-						)
-					) : (
-						state?.selected ? (
-							<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+		<InView onChange={(inView: boolean) => handleChangeInterSection(inView)} triggerOnce={true}>
+			{isIntersectionObserver ? (
+				<Container onPress={!((option?.with_half_option || option?.allow_suboption_quantity) && state?.selected) ? () => handleSuboptionClick() : null}>
+					<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
+						{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
+							state?.selected ? (
+								<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+							) : (
+								<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
+							)
 						) : (
-							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
-						)
+							state?.selected ? (
+								<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+							) : (
+								<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+							)
+						)}
+						{image && (
+							<Logo style={styles.logo}>
+								<FastImage
+									style={styles.icon}
+									source={{
+										uri: optimizeImage(image, 'h_100,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							</Logo>
+						)}
+						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
+							{suboption?.name}
+						</OText>
+					</IconControl>
+					{option?.allow_suboption_quantity && state?.selected && (
+						<QuantityControl>
+							<>
+								<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+									<IconAntDesign
+										name='minuscircleo'
+										size={iconsSize}
+										color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+									/>
+								</Checkbox>
+								<OText size={12}>
+									{state.quantity}
+								</OText>
+								<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+									<IconAntDesign
+										name='pluscircleo'
+										size={iconsSize}
+										color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+									/>
+								</Checkbox>
+							</>
+						</QuantityControl>
 					)}
-					{image && (
-						<Logo style={styles.logo}>
-							<FastImage
-								style={styles.icon}
-								source={{
-									uri: optimizeImage(image, 'h_100,c_limit'),
-									priority: FastImage.priority.normal,
-								}}
-								resizeMode={FastImage.resizeMode.cover}
-							/>
-						</Logo>
+					{option?.with_half_option && state?.selected && (
+						<PositionControl>
+							<>
+								<Circle disabled={disabled} onPress={() => changePosition('left')}>
+									<OIcon
+										src={theme.images.general.half_l}
+										color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+										width={20}
+										height={20}
+										style={styles.inverse}
+									/>
+								</Circle>
+								<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+									<OIcon
+										src={theme.images.general.half_f}
+										color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+										width={20}
+										height={20}
+									/>
+								</Circle>
+								<Circle disabled={disabled} onPress={() => changePosition('right')}>
+									<OIcon
+										src={theme.images.general.half_r}
+										color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+										width={20}
+										height={20}
+									/>
+								</Circle>
+							</>
+						</PositionControl>
 					)}
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
-						{suboption?.name}
-					</OText>
-				</IconControl>
-				{option?.allow_suboption_quantity && state?.selected && (
-					<QuantityControl>
-						<>
-							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<IconAntDesign
-									name='minuscircleo'
-									size={iconsSize}
-									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-								/>
-							</Checkbox>
-							<OText size={12}>
-								{state.quantity}
-							</OText>
-							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<IconAntDesign
-									name='pluscircleo'
-									size={iconsSize}
-									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-								/>
-							</Checkbox>
-						</>
-					</QuantityControl>
-				)}
-				{option?.with_half_option && state?.selected && (
-					<PositionControl>
-						<>
-							<Circle disabled={disabled} onPress={() => changePosition('left')}>
-								<OIcon
-									src={theme.images.general.half_l}
-									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={20}
-									height={20}
-									style={styles.inverse}
-								/>
-							</Circle>
-							<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-								<OIcon
-									src={theme.images.general.half_f}
-									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={20}
-									height={20}
-								/>
-							</Circle>
-							<Circle disabled={disabled} onPress={() => changePosition('right')}>
-								<OIcon
-									src={theme.images.general.half_r}
-									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={20}
-									height={20}
-								/>
-							</Circle>
-						</>
-					</PositionControl>
-				)}
-				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
-						+ {parsePrice(price)}
-					</OText>
-				)}
-			</Container>
+					{price > 0 && (
+						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
+							+ {parsePrice(price)}
+						</OText>
+					)}
+				</Container>
+			) : (
+				<Placeholder>
+					<PlaceholderLine height={25} />
+				</Placeholder>
+			)}
 			{showMessage && (
 				<OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>
 					{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}
 				</OText>
 			)}
-		</View>
+		</InView>
 	)
 }
 

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

@@ -129,7 +129,7 @@ const WalletsUI = (props: any) => {
               flexDirection: !hideWalletsTheme ? 'column' : 'row',
               justifyContent: !hideWalletsTheme ? 'flex-start' : 'space-between',
               alignItems: !hideWalletsTheme ? 'flex-start' : 'center',
-              marginTop: !hideWalletsTheme ? 30 : 10,
+              marginTop: !hideWalletsTheme ? Platform.OS === 'ios' ? 20 : 30 : 10,
             },
           }}>
             <NavBar