ordering-ui-react-native 0.16.53 → 0.16.54

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

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useLanguage, useUtils } from 'ordering-components/native'
+
+import {
+  ReviewOrderContainer,
+  BusinessLogo,
+  FormReviews,
+  ActionContainer,
+  RatingStarContainer,
+  PlacedDate
+} from './styles'
+import { OButton, OIcon, OText } from '../shared'
+import { StyleSheet, View, I18nManager } from 'react-native';
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
+
+import { useTheme } from 'styled-components/native'
+
+export const ReviewTrigger = (props: any) => {
+  const {
+    order,
+    handleOpenOrderReview
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    logoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: { width: 1, height: 4 },
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    },
+    reviewedStyle: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 20
+    },
+  })
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const placedOnDate = parseDate(order?.delivery_datetime, { utc: true, outputFormat: 'dddd MMMM DD, YYYY' })
+  const [star, setStar] = useState(5)
+
+  return (
+    <>
+      <ReviewOrderContainer>
+        <BusinessLogo>
+          <View style={styles.logoWrapper}>
+            <OIcon
+              url={order?.logo}
+              width={80}
+              height={80}
+            />
+          </View>
+        </BusinessLogo>
+        {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
+          <FormReviews>
+            <RatingStarContainer>
+              {[...Array(5).keys()].map((index: number) => (<FontAwesome name={(index <= (star - 1)) ? 'star' : 'star-o'} size={28} key={`star-symbol-${index}`} onPress={() => setStar(index + 1)} color={theme?.colors?.primary} />)
+              )}
+            </RatingStarContainer>
+            <PlacedDate>
+              <OText color={theme.colors.textNormal}>{t('DONOT_FORGET_RATE_YOUR_ORDER', 'Do not forget to rate your order placed on ')}</OText>
+              <OText color={theme.colors.textNormal} style={{ fontWeight: "bold" }}>{placedOnDate}</OText>
+            </PlacedDate>
+          </FormReviews>
+        </View>
+      </ReviewOrderContainer>
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('GOTO_REVIEW', 'Go to review')}
+            style={{ borderRadius: 8 }}
+            imgRightSrc={theme.images.general.arrow_right}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            onClick={() => handleOpenOrderReview(star)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}

package/themes/original/src/components/{Reviews/ReviewOrder → ReviewTrigger}/styles.tsx

@@ -16,32 +16,13 @@ export const FormReviews = styled.View`
   margin-top: 30px;
 `
 
-export const CommentsButtonGroup = styled.View`
-  flex-direction: row;
-  flex-wrap: wrap;
-`
-
 export const ActionContainer = styled.View`
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   padding: 3px 30px;
 `
 
-export const SkipButton = styled.TouchableOpacity`
-`
-
-export const RatingBarContainer = styled.View`
-  margin-top: 10px;
-  margin-bottom: 25px;
-`
-
-export const RatingTextContainer = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10px;
-`
 export const RatingStarContainer = styled.View`
   flex-direction: row;
   align-items: center;
@@ -50,4 +31,4 @@ export const RatingStarContainer = styled.View`
 `
 export const PlacedDate = styled.View`
   margin-top: 30px;
-`
+`

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -10,6 +10,8 @@ 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 { OButton, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -29,7 +31,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct
+		handleFavoriteProduct,
+		enableIntersection
 	} = props;
 
 	const theme = useTheme();
@@ -87,7 +90,8 @@ 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';
 
@@ -118,122 +122,126 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<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={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>
+		<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)}
+				>
+					<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>
 						)}
-					</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}
-						>
+						<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={10}
-								weight={'400'}
-								color={theme.colors.white}
 								numberOfLines={2}
-								ellipsizeMode='tail'
-								lineHeight={13}
-							>
-								{product?.ribbon?.text}
+								ellipsizeMode="tail"
+								color={theme.colors.textSecondary}
+								style={styles.line15}>
+								{product?.description}
 							</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,
+						</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}
+								/>
+							)}
+						</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,
+
 							}}
-							resizeMode={FastImage.resizeMode.cover}
+							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
+							borderColor={theme?.colors.primary}
+							textStyle={{ color: theme.colors.primary }}
+							text={t('ADD', 'Add')}
 						/>
 					)}
-				</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>
 			)}
-		</CardContainer>
+		</InView>
 	);
 }, SingleProductCardPropsAreEqual);
 

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

@@ -6,6 +6,7 @@ const deviceHeight = Dimensions.get('window').height
 
 interface Props {
 	open: boolean;
+	transparent?: boolean;
 	title?: string;
 	children?: any;
 	onClose?: any;
@@ -17,6 +18,7 @@ interface Props {
 const OBottomPopup = (props: Props) => {
 	const {
 		open,
+		transparent,
 		title,
 		onClose,
 		children,
@@ -26,10 +28,11 @@ const OBottomPopup = (props: Props) => {
 		closeIcon
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
+
 	return (
 		<Modal
 			animationType='slide'
-			transparent={false}
+			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
@@ -69,7 +72,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
+		justifyContent: 'flex-end'
 	},
 	touchableOutsideStyle: {
 		flex: 1,

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

@@ -417,8 +417,9 @@ export interface ProductItemAccordionParams {
 	isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-	order?: { id: number, business_id: number, business_name?: string, delivery_datetime?: string, logo: string, driver: any, products: Array<any>, review: any, user_review: 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;
@@ -428,8 +429,6 @@ export interface ReviewOrderParams {
 	handleReviewState?: any;
 	setStars?: any;
 	onNavigationRedirect?: any;
-	closeReviewOrder?: () => void;
-	skipReview?: () => void;
 }
 export interface ReviewProductParams {
 	navigation?: any,
@@ -438,7 +437,6 @@ export interface ReviewProductParams {
 	formState?: any,
 	handleChangeFormState?: any,
 	handleSendProductReview?: any;
-	closeReviewProduct?: () => void;
 }
 export interface SingleProductReviewParams {
 	product: any,
@@ -454,7 +452,6 @@ export interface ReviewDriverParams {
 	dirverReviews?: any,
 	setDriverReviews?: any,
 	handleSendDriverReview?: any;
-	closeReviewDriver?: () => void;
 }
 export interface MessagesParams {
 	type?: string,