ordering-ui-react-native 0.16.52 → 0.16.55

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

@@ -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;
@@ -120,110 +122,140 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
-			{isIntersectionObserver && (
+		<InView style={{ minHeight: 200 }} 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>
+			) : (
+				<Placeholder style={{ padding: 5 }} Animation={Fade}>
+					<View style={{ flexDirection: 'row' }}>
+						<PlaceholderLine
+							width={24}
+							height={70}
+							style={{ marginRight: 10, marginBottom: 10 }}
+						/>
+						<Placeholder style={{ paddingVertical: 10 }}>
+							<PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+							<PlaceholderLine width={20} />
+						</Placeholder>
+					</View>
+				</Placeholder>
 			)}
-		</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

@@ -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/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,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,