ordering-ui-react-native 0.16.51 → 0.16.54

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

@@ -12,7 +12,7 @@ import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, R
 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';
@@ -36,6 +36,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	} = props;
 
 	const theme = useTheme();
+	const showAddButton = !theme?.layouts?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -89,8 +90,9 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [, t] = useLanguage();
 	const [stateConfig] = useConfig();
 	const [{ parsePrice, optimizeImage }] = useUtils();
-	const [orderState] = useOrder();
+	const [orderState] = useOrder()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+
 	const editMode = typeof product?.code !== 'undefined';
 
 	const removeToBalance = editMode ? product?.quantity : 0;
@@ -123,107 +125,123 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		<InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
 			{isIntersectionObserver && (
 				<CardContainer
+					showAddButton={showAddButton}
 					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}>
+					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={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>
 							<OText
-								size={12}
-								weight={'500'}
-								numberOfLines={1}
+								size={10}
+								numberOfLines={2}
 								ellipsizeMode="tail"
-								style={styles.line18}>
-								{product?.name}
+								color={theme.colors.textSecondary}
+								style={styles.line15}>
+								{product?.description}
 							</OText>
-							<TouchableOpacity
-								onPress={handleChangeFavorite}
-							>
-								<IconAntDesign
-									name={product?.favorite ? 'heart' : 'hearto'}
-									color={theme.colors.danger5}
-									size={18}
+						</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 ? (
+								<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>
-						</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>
-						<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}
+						</LogoWrapper>
+
+						{(isSoldOut || maxProductQuantity <= 0) && (
+							<SoldOut>
+								<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
+									{t('SOLD_OUT', 'SOLD OUT')}
 								</OText>
-							</RibbonBox>
+							</SoldOut>
 						)}
-						{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}
-							/>
-						)}
-					</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')}
+						/>
 					)}
 				</CardContainer>
 			)}
-		</InView >
+		</InView>
 	);
 }, 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,33 +1,43 @@
 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 {
 	open: boolean;
+	transparent?: boolean;
 	title?: string;
 	children?: any;
 	onClose?: any;
 	isStatusBar?: boolean;
+	bottomContainerStyle?: any;
+	titleStyle?: any;
+	closeIcon?: any;
 }
 const OBottomPopup = (props: Props) => {
 	const {
 		open,
+		transparent,
 		title,
 		onClose,
 		children,
-		isStatusBar
+		isStatusBar,
+		titleStyle,
+		bottomContainerStyle,
+		closeIcon
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
+
 	return (
 		<Modal
 			animationType='slide'
-			transparent={false}
+			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
 		>
-		  {isStatusBar && <StatusBar translucent={false} />}
+			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}
@@ -35,10 +45,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>
 						)}
@@ -54,7 +72,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
+		justifyContent: 'flex-end'
 	},
 	touchableOutsideStyle: {
 		flex: 1,
@@ -69,7 +87,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,26 @@ 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, logo: string, driver: any, products: Array<any>, review: any, user_review: any };
+	stars?: any;
+	defaultStar?: number;
+	handleChangeInput?: any;
+	handleChangeRating?: any;
+	handleSendReview?: any;
+	formState?: any;
+	navigation?: any;
+	setIsReviewed?: (isReviewed: boolean) => void;
+	handleReviewState?: any;
+	setStars?: any;
+	onNavigationRedirect?: any;
 }
 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;
 }
 export interface SingleProductReviewParams {
 	product: any,
@@ -445,12 +446,12 @@ 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;
 }
 export interface MessagesParams {
 	type?: string,