ordering-ui-react-native 0.21.45 → 0.21.46-release

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

@@ -56,6 +56,10 @@ import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 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;
 
 export const ProductOptionsUI = (props: any) => {
@@ -79,12 +83,12 @@ export const ProductOptionsUI = (props: any) => {
 		actionStatus,
 		handleCreateGuestUser
 	} = props;
-
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
 	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: {
@@ -138,7 +142,7 @@ export const ProductOptionsUI = (props: any) => {
 		slide1: {
 			flex: 1,
 			alignItems: 'center',
-			width: '100%',
+			width: '100%'
 		},
 		mainSwiper: {
 			height: 258,
@@ -177,7 +181,7 @@ export const ProductOptionsUI = (props: any) => {
 			marginTop: 10
 		},
 		wrapperNavbar: {
-			paddingHorizontal: 30,
+			paddingHorizontal: 20,
 			paddingTop: 0,
 		}
 	});
@@ -208,7 +212,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 	const [viewedProduct, setViewedProduct] = useState<any>(null)
 	const [showTitle, setShowTitle] = useState(false)
-
+	const productOptionsMounted = useRef(false)
 	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
 	const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
 
@@ -283,14 +287,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) => {
@@ -321,57 +325,20 @@ export const ProductOptionsUI = (props: any) => {
 		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
 	}
 
-	const handleOnLayout = (event: any, optionId: any) => {
-		const _optionLayout = { ...optionLayout }
+	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 }
-		setOptionLayout(_optionLayout)
+		if (lastMounts) {
+			setOptionLayout(_optionLayout)
+		}
 	}
 
-	const saveErrors =
-		orderState.loading ||
-		maxProductQuantity === 0 ||
-		Object.keys(errors)?.length > 0;
-
-
-	const ExtraOptions = ({ eID, options }: any) => (
-		<>
-			{options.map(({ id, name, respect_to, suboptions }: any) => (
-				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && suboptions?.length > 0 && (
-						<TouchableOpacity
-							key={`eopt_key_${id}`}
-							onPress={() => {
-								setSelectedOpt(id)
-								scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
-									y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
-									animated: true
-								})
-							}}
-							style={[
-								styles.extraItem,
-								{
-									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
-								},
-							]}>
-							<OText
-								color={
-									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
-								}
-								size={12}
-								weight={selOpt == id ? '600' : 'normal'}
-								style={{ maxWidth: 150 }}
-								numberOfLines={1}>
-								{name}
-							</OText>
-						</TouchableOpacity>
-					)}
-				</React.Fragment>
-			))}
-		</>
-	);
-
 	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
 		setShowTitle(contentOffset.y > 30)
 	}
@@ -431,90 +398,6 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [product])
 
-	const ActionButton = () => {
-		return (
-			<View
-				style={{
-					width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
-				}}>
-				{((productCart &&
-					auth &&
-					orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
-						<OButton
-							onClick={() => handleSaveProduct()}
-							imgRightSrc=""
-							text={`${orderState.loading
-								? t('LOADING', 'Loading')
-								: (isSoldOut || maxProductQuantity <= 0)
-									? t('SOLD_OUT', 'Sold out')
-									: editMode
-										? 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))}
-							textStyle={{
-								color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
-								fontSize: orderState.loading || editMode ? 10 : 14
-							}}
-							style={{
-								backgroundColor: saveErrors || 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)) ? theme.colors.lightGray : theme.colors.primary,
-								borderColor: saveErrors || 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)) ? theme.colors.white : theme.colors.primary,
-								opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
-								borderRadius: 7.6,
-								height: 44,
-								shadowOpacity: 0,
-								borderWidth: 1,
-								marginTop: isHaveWeight ? 10 : 0
-							}}
-						/>
-					)}
-				{auth &&
-					!orderState.options?.address_id &&
-					(orderState.loading ? (
-						<OButton
-							isDisabled
-							text={t('LOADING', 'Loading')}
-							imgRightSrc=""
-							textStyle={{ fontSize: 10 }}
-						/>
-					) : (
-						<OButton onClick={navigation.navigate('AddressList')} />
-					))}
-				{!auth && (
-					<OButton
-						isDisabled={isSoldOut || maxProductQuantity <= 0}
-						onClick={() => handleRedirectLogin()}
-						text={
-							isSoldOut || maxProductQuantity <= 0
-								? t('SOLD_OUT', 'Sold out')
-								: t('LOGIN_SIGNUP', 'Login / Sign Up')
-						}
-						imgRightSrc=""
-						textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
-						style={{
-							height: 42,
-							borderColor: theme.colors.primary,
-							backgroundColor: theme.colors.white,
-							paddingLeft: 0,
-							paddingRight: 0
-						}}
-					/>
-				)}
-				{!auth && guestCheckoutEnabled && orderTypeEnabled && (
-					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
-						{actionStatus?.loading ? (
-							<Placeholder Animation={Fade}>
-								<PlaceholderLine height={20} />
-							</Placeholder>
-						) : (
-							<OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>
-						)}
-					</TouchableOpacity>
-				)}
-			</View>
-		)
-	}
-
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
 			scrollViewRef.current.scrollToEnd({ animated: true })
@@ -530,6 +413,35 @@ export const ProductOptionsUI = (props: any) => {
 		events.emit('product_viewed', product)
 	}, [product?.id, viewedProduct])
 
+	const actionButtonProps = {
+		navigation,
+		isHaveWeight,
+		isSoldOut,
+		maxProductQuantity,
+		productCart,
+		handleSaveProduct,
+		editMode,
+		product,
+		errors,
+		productAddedToCartLength,
+		handleRedirectLogin,
+		guestCheckoutEnabled,
+		orderTypeEnabled,
+		handleUpdateGuest,
+		actionStatus
+	}
+
+	const extraOptionsProps = {
+		setSelectedOpt,
+		scrollViewRef,
+		optionLayout,
+		editionsLayoutY,
+		styles,
+		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}>
@@ -556,7 +468,7 @@ export const ProductOptionsUI = (props: any) => {
 				</TopHeader>
 			</View>
 			{!error && (
-				<ScrollView
+				<IOScrollView
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
 					stickyHeaderIndices={[2]}
@@ -576,119 +488,123 @@ export const ProductOptionsUI = (props: any) => {
 							</View>
 						) : (
 							<>
-								<Swiper
-									loop={false}
-									ref={swiperRef}
-									showsButtons={true}
-									style={styles.mainSwiper}
-									showsPagination={false}
-									onIndexChanged={(index) => 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, i) => (
-										<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: 30,
-										paddingVertical: 15
-									}}
-								>
-									{gallery?.length > 1 && gallery.map((img, index) => (
-										<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>
 					<ProductSummary
-						ph={isChewLayout ? 20 : 30}
+						ph={20}
 						onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}
 					>
 						<ProductTitle>
@@ -821,8 +737,8 @@ export const ProductOptionsUI = (props: any) => {
 									</OText>
 								</TouchableOpacity>
 							)}
-							{product?.extras?.map((extra: any) =>
-								<ExtraOptions key={extra.id} options={extra.options} />
+							{suboptionsLength < 200 && product?.extras?.map((extra: any) =>
+								<ExtraOptions key={extra.id} options={extra.options} {...extraOptionsProps} />
 							)}
 						</ExtraOptionWrap>
 					)}
@@ -866,14 +782,14 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions
-							style={{ paddingHorizontal: isChewLayout ? 20 : 30 }}
+							style={{ paddingHorizontal: 20 }}
 							onLayout={(event: any) => {
 								setEditionsLayoutY(event.nativeEvent.layout?.y)
 							}}
 						>
 							<>
 								{product?.ingredients?.length > 0 && (
-									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
+									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0, true)}>
 										<SectionTitle>
 											<OText size={16}>
 												{t('INGREDIENTS', 'Ingredients')}
@@ -895,13 +811,13 @@ export const ProductOptionsUI = (props: any) => {
 									</View>
 								)}
 								{product?.extras?.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
-									extra.options?.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+									extra.options?.sort((a: any, b: any) => a.rank - b.rank).map((option: any, i: number) => {
 										const currentState =
 											productCart.options[`id:${option.id}`] || {};
 										return (
 											<React.Fragment key={`popt_${option.id}`}>
 												{showOption(option) && (
-													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
+													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id, extra.options?.length <= i + 2)}>
 														<ProductOption
 															option={option}
 															currentState={currentState}
@@ -936,6 +852,7 @@ export const ProductOptionsUI = (props: any) => {
 																				}
 																				setIsScrollAvailable={setIsScrollAvailable}
 																				error={errors[`id:${option.id}`]}
+																				enableIntersection={suboptionsLength >= 200}
 																			/>
 																		);
 																	},
@@ -953,7 +870,7 @@ export const ProductOptionsUI = (props: any) => {
 								<ProductComment>
 									<SectionTitle>
 										<OText size={16} weight={'600'} lineHeight={24}>
-											{t('SPECIAL_COMMENT', 'Special comment')}
+											{t('COMMENTS', 'Special comment')}
 										</OText>
 									</SectionTitle>
 									<OInput
@@ -967,6 +884,7 @@ export const ProductOptionsUI = (props: any) => {
 											!(productCart && !isSoldOut && maxProductQuantity)
 										}
 										style={styles.comment}
+										forwardRef={commentRef}
 									/>
 								</ProductComment>
 							)}
@@ -975,7 +893,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}>
@@ -1086,9 +1004,9 @@ export const ProductOptionsUI = (props: any) => {
 								)}
 							</>
 						)}
-						{!isHaveWeight && <ActionButton />}
+						{!isHaveWeight && <ActionButton {...actionButtonProps} />}
 					</View>
-					{isHaveWeight && <ActionButton />}
+					{isHaveWeight && <ActionButton {...actionButtonProps} />}
 				</ProductActions>
 			)}
 		</SafeAreaView>