ordering-ui-react-native 0.16.50 → 0.16.53

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -10,9 +10,7 @@ import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
 import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
-import { InView } from 'react-native-intersection-observer'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { OText } from '../shared';
+import { OButton, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
@@ -31,11 +29,11 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct,
-		enableIntersection
+		handleFavoriteProduct
 	} = props;
 
 	const theme = useTheme();
+	const showAddButton = !theme?.layouts?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -90,7 +88,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [stateConfig] = useConfig();
 	const [{ parsePrice, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
-	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+
 	const editMode = typeof product?.code !== 'undefined';
 
 	const removeToBalance = editMode ? product?.quantity : 0;
@@ -120,110 +118,122 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
-			{isIntersectionObserver && (
-				<CardContainer
-					style={[
-						styles.container,
-						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
-						(style && { ...style }),
-					]}
-					onPress={() => onProductClick?.(product)}>
-					{productAddedToCartLength > 0 && (
-						<QuantityContainer style={[styles.quantityContainer, {
-							transform: [{ translateX: 10 }, { translateY: -10 }],
-						}]}>
-							<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
-						</QuantityContainer>
-					)}
-					<CardInfo>
-						<View style={styles.titleWrapper}>
-							<OText
-								size={12}
-								weight={'500'}
-								numberOfLines={1}
-								ellipsizeMode="tail"
-								style={styles.line18}>
-								{product?.name}
-							</OText>
-							<TouchableOpacity
-								onPress={handleChangeFavorite}
-							>
-								<IconAntDesign
-									name={product?.favorite ? 'heart' : 'hearto'}
-									color={theme.colors.danger5}
-									size={18}
-								/>
-							</TouchableOpacity>
-						</View>
-						<PricesContainer>
-							<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
-							{product?.offer_price !== null && product?.in_offer && (
-								<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
-							)}
-						</PricesContainer>
+		<CardContainer
+			showAddButton={showAddButton}
+			style={[
+				styles.container,
+				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
+				(style && { ...style }),
+			]}
+			onPress={() => onProductClick?.(product)}
+		>
+			<View style={{ flexDirection: 'row' }}>
+				{productAddedToCartLength > 0 && (
+					<QuantityContainer style={[styles.quantityContainer, {
+						transform: [{ translateX: 10 }, { translateY: -10 }],
+					}]}>
+						<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
+					</QuantityContainer>
+				)}
+				<CardInfo>
+					<View style={styles.titleWrapper}>
 						<OText
-							size={10}
-							numberOfLines={2}
+							size={12}
+							weight={'500'}
+							numberOfLines={1}
 							ellipsizeMode="tail"
-							color={theme.colors.textSecondary}
-							style={styles.line15}>
-							{product?.description}
+							style={styles.line18}>
+							{product?.name}
 						</OText>
-					</CardInfo>
-					<LogoWrapper>
-						{product?.ribbon?.enabled && (
-							<RibbonBox
-								bgColor={product?.ribbon?.color}
-								isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
-								isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
-							>
-								<OText
-									size={10}
-									weight={'400'}
-									color={theme.colors.white}
-									numberOfLines={2}
-									ellipsizeMode='tail'
-									lineHeight={13}
-								>
-									{product?.ribbon?.text}
-								</OText>
-							</RibbonBox>
-						)}
-						{product?.images ? (
-							<>
-								{isIntersectionObserver && (
-									<FastImage
-										style={styles.productStyle}
-										source={{
-											uri: optimizeImage(product?.images, 'h_250,c_limit'),
-											priority: FastImage.priority.normal,
-										}}
-										resizeMode={FastImage.resizeMode.cover}
-									/>
-								)}
-							</>
-						) : (
-							<FastImage
-								style={styles.productStyle}
-								source={{
-									uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
-									priority: FastImage.priority.normal,
-								}}
-								resizeMode={FastImage.resizeMode.cover}
+						<TouchableOpacity
+							onPress={handleChangeFavorite}
+						>
+							<IconAntDesign
+								name={product?.favorite ? 'heart' : 'hearto'}
+								color={theme.colors.danger5}
+								size={18}
 							/>
+						</TouchableOpacity>
+					</View>
+					<PricesContainer>
+						<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
+						{product?.offer_price !== null && product?.in_offer && (
+							<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 						)}
-					</LogoWrapper>
-					{(isSoldOut || maxProductQuantity <= 0) && (
-						<SoldOut>
-							<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
-								{t('SOLD_OUT', 'SOLD OUT')}
+					</PricesContainer>
+					<OText
+						size={10}
+						numberOfLines={2}
+						ellipsizeMode="tail"
+						color={theme.colors.textSecondary}
+						style={styles.line15}>
+						{product?.description}
+					</OText>
+				</CardInfo>
+				<LogoWrapper>
+					{product?.ribbon?.enabled && (
+						<RibbonBox
+							bgColor={product?.ribbon?.color}
+							isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+							isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+						>
+							<OText
+								size={10}
+								weight={'400'}
+								color={theme.colors.white}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+								lineHeight={13}
+							>
+								{product?.ribbon?.text}
 							</OText>
-						</SoldOut>
+						</RibbonBox>
+					)}
+					{product?.images ? (
+						<FastImage
+							style={styles.productStyle}
+							source={{
+								uri: optimizeImage(product?.images, 'h_250,c_limit'),
+								priority: FastImage.priority.normal,
+							}}
+							resizeMode={FastImage.resizeMode.cover}
+						/>
+					) : (
+						<FastImage
+							style={styles.productStyle}
+							source={{
+								uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
+								priority: FastImage.priority.normal,
+							}}
+							resizeMode={FastImage.resizeMode.cover}
+						/>
 					)}
-				</CardContainer>
+				</LogoWrapper>
+
+				{(isSoldOut || maxProductQuantity <= 0) && (
+					<SoldOut>
+						<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
+							{t('SOLD_OUT', 'SOLD OUT')}
+						</OText>
+					</SoldOut>
+				)}
+			</View>
+			{showAddButton && (
+				<OButton
+					onClick={() => onProductClick?.(product)}
+					style={{ 
+						width: '100%', 
+						borderRadius: 7.6, 
+						marginTop: 10,
+
+					}}
+					bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
+					borderColor={theme?.colors.primary}
+					textStyle={{color: theme.colors.primary}}
+					text={t('ADD', 'Add')}
+				/>
 			)}
-		</InView >
+		</CardContainer>
 	);
 }, SingleProductCardPropsAreEqual);
 

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
   flex: 1;
-  flex-direction: row;
+  flex-direction: ${(props : any) => props.showAddButton ? 'column' : 'row'};
   justify-content: space-between;
   align-items: center;
   padding: 12px;
@@ -23,7 +23,7 @@ export const SoldOut = styled.View`
 `
 
 export const QuantityContainer = styled.View`
-  background: ${({ theme } : any) => theme.colors.primary};
+  background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
 `

package/themes/original/src/components/shared/OBottomPopup.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
+import { Modal, TouchableWithoutFeedback, TouchableOpacity, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { OIcon } from '.';
 const deviceHeight = Dimensions.get('window').height
 
 interface Props {
@@ -9,6 +10,9 @@ interface Props {
 	children?: any;
 	onClose?: any;
 	isStatusBar?: boolean;
+	bottomContainerStyle?: any;
+	titleStyle?: any;
+	closeIcon?: any;
 }
 const OBottomPopup = (props: Props) => {
 	const {
@@ -16,7 +20,10 @@ const OBottomPopup = (props: Props) => {
 		title,
 		onClose,
 		children,
-		isStatusBar
+		isStatusBar,
+		titleStyle,
+		bottomContainerStyle,
+		closeIcon
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
 	return (
@@ -27,7 +34,7 @@ const OBottomPopup = (props: Props) => {
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
 		>
-		  {isStatusBar && <StatusBar translucent={false} />}
+			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}
@@ -35,10 +42,18 @@ const OBottomPopup = (props: Props) => {
 				>
 					<View style={styles.touchableOutsideStyle} />
 				</TouchableWithoutFeedback>
-				<View style={styles.bottomContainer}>
+				<View style={{ ...styles.bottomContainer, ...bottomContainerStyle }}>
 					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{title != '' && (
-							<Text style={styles.titleStyle}>
+						{closeIcon && (
+							<TouchableOpacity onPress={onClose} style={styles.closeIconStyle}>
+								<OIcon
+									src={closeIcon}
+									width={30}
+								/>
+							</TouchableOpacity>
+						)}
+						{!!title && (
+							<Text style={{ ...styles.titleStyle, ...titleStyle }}>
 								{title}
 							</Text>
 						)}
@@ -69,7 +84,11 @@ const styles = StyleSheet.create({
 	titleStyle: {
 		fontSize: 20,
 		fontWeight: 'bold',
-		marginVertical: 15
+		marginVertical: 10
+	},
+	closeIconStyle: {
+		paddingTop: 20,
+		paddingLeft: 20
 	}
 })
 

package/themes/original/src/components/shared/OButton.tsx

@@ -78,6 +78,7 @@ interface Props {
 	borderColor?: string;
 	loadingStyle?: ViewStyle;
 	showNextIcon?: boolean;
+	isDisabledWithSameStyles?: boolean;
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -110,6 +111,7 @@ const OButton = (props: Props): React.ReactElement => {
 			activeOpacity={props.activeOpacity}
 			onPress={props.onClick}
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
+			disabled={props.isDisabledWithSameStyles}
 		>
 			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
 				{props.imgLeftSrc ? (

package/themes/original/src/types/index.tsx

@@ -417,25 +417,28 @@ export interface ProductItemAccordionParams {
 	isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-	order?: { id: number, businessId: number, business_name?: string, delivery_datetime?: string, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
-	stars?: any,
-	handleChangeInput?: any,
-	handleChangeRating?: any,
-	handleSendReview?: any,
-	formState?: any,
-	navigation?: any,
-	setIsReviewed?: (isReviewed: boolean) => {},
-	handleReviewState?: any,
-	setStars?: any,
-	onNavigationRedirect?: any
+	order?: { id: number, business_id: number, business_name?: string, delivery_datetime?: string, logo: string, driver: any, products: Array<any>, review: any, user_review: any };
+	stars?: any;
+	handleChangeInput?: any;
+	handleChangeRating?: any;
+	handleSendReview?: any;
+	formState?: any;
+	navigation?: any;
+	setIsReviewed?: (isReviewed: boolean) => void;
+	handleReviewState?: any;
+	setStars?: any;
+	onNavigationRedirect?: any;
+	closeReviewOrder?: () => void;
+	skipReview?: () => void;
 }
 export interface ReviewProductParams {
 	navigation?: any,
 	onNavigationRedirect?: any,
-	order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	order?: { orderId: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
 	formState?: any,
 	handleChangeFormState?: any,
-	handleSendProductReview?: any
+	handleSendProductReview?: any;
+	closeReviewProduct?: () => void;
 }
 export interface SingleProductReviewParams {
 	product: any,
@@ -445,12 +448,13 @@ export interface SingleProductReviewParams {
 export interface ReviewDriverParams {
 	navigation?: any,
 	onNavigationRedirect?: any,
-	order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	order?: { orderId: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
 	formState?: any,
 	setIsDriverReviewed?: (isReviewed: boolean) => {},
 	dirverReviews?: any,
 	setDriverReviews?: any,
-	handleSendDriverReview?: any
+	handleSendDriverReview?: any;
+	closeReviewDriver?: () => void;
 }
 export interface MessagesParams {
 	type?: string,