ordering-ui-react-native 0.15.66 → 0.15.67-release

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

@@ -0,0 +1,275 @@
+import React, { useState } from 'react';
+import {
+  SingleOrderCard as SingleOrderCardController,
+  useUtils,
+  useLanguage
+} from 'ordering-components/native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { OIcon, OText, OButton } from '../shared';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { SingleOrderCardParams } from '../../types';
+
+import {
+  Container,
+  InnerContainer,
+  Logo,
+  CardInfoWrapper,
+  ContentHeader,
+  ButtonWrapper,
+  ContentFooter,
+  UnreadMessageCounter,
+  Price
+} from './styles';
+
+const SingleOrderCardUI = (props: SingleOrderCardParams) => {
+  const {
+    order,
+    reorderLoading,
+    handleReorder,
+    getOrderStatus,
+    handleFavoriteOrder,
+    onNavigationRedirect,
+    pastOrders,
+    isMessageView,
+    handleClickOrder
+  } = props;
+
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
+  const [, t] = useLanguage();
+  const theme = useTheme();
+
+  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+
+  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+
+  const styles = StyleSheet.create({
+    logo: {
+      borderRadius: 8,
+      width: 64,
+      height: 64
+    },
+    logoWrapper: {
+      overflow: 'hidden',
+      backgroundColor: 'white',
+      borderRadius: 8,
+      shadowColor: '#000000',
+      shadowOffset: { width: 1, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 3
+    },
+    buttonText: {
+      color: theme.colors.primary,
+      fontSize: 10,
+      marginLeft: 2,
+      marginRight: 2,
+    },
+    reorderLoading: {
+      width: 80,
+      height: 40,
+      borderRadius: 10,
+    },
+    reorderbutton: {
+      height: 23,
+      paddingLeft: 10,
+      paddingRight: 10,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primaryContrast,
+      borderWidth: 0,
+    },
+    reviewButton: {
+      height: 23,
+      maxHeight: 23,
+      backgroundColor: theme.colors.white,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 10,
+      borderRadius: 23,
+      borderWidth: 1,
+      borderColor: theme.colors.primaryContrast,
+      marginRight: 2
+    },
+    infoText: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  });
+
+  const handleReorderClick = (id: number) => {
+    setReorderSelected(id);
+    handleReorder && handleReorder(id);
+  };
+
+  const handleClickOrderReview = (order: any) => {
+    if (pastOrders) {
+      onNavigationRedirect &&
+        onNavigationRedirect('ReviewOrder', {
+          order: {
+            id: order?.id,
+            business_id: order?.business_id,
+            logo: order?.business?.logo,
+            driver: order?.driver,
+            products: order?.products,
+            review: order?.review,
+            user_review: order?.user_review
+          },
+        });
+      return
+    }
+    if (isMessageView) {
+      handleClickOrder(order?.uuid)
+      return
+    }
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
+  };
+
+  const handleClickViewOrder = (uuid: string) => {
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  };
+
+  const handleChangeFavorite = () => {
+    handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
+  };
+
+  return (
+    <Container
+      onPress={() => handleClickViewOrder(order?.uuid)}
+      activeOpacity={0.7}
+    >
+      <InnerContainer>
+        {!!order.business?.logo && (
+          <Logo style={styles.logoWrapper}>
+            <OIcon
+              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+              style={styles.logo}
+            />
+          </Logo>
+        )}
+        <CardInfoWrapper>
+          <ContentHeader>
+            <View style={{ flex: 1 }}>
+              <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                {order.business?.name}
+              </OText>
+            </View>
+            {!!!pastOrders && (
+              <>
+                {isMessageView ? (
+                  <>
+                    {order?.unread_count > 0 && (
+                      <UnreadMessageCounter>
+                        <OText size={12} color={theme.colors.primary} lineHeight={18} >
+                          {order?.unread_count}
+                        </OText>
+                      </UnreadMessageCounter>
+                    )}
+                  </>
+                ) : (
+                  <Price>
+                    <OText size={12} lineHeight={18}>
+                      {parsePrice(order?.summary?.total || order?.total)}
+                    </OText>
+                  </Price>
+                )}
+              </>
+            )}
+            {!!pastOrders && (
+              <ButtonWrapper>
+                {allowedOrderStatus.includes(parseInt(order?.status)) &&
+                  !order.review && (
+                    <TouchableOpacity
+                      onPress={() => handleClickOrderReview(order)}
+                      style={styles.reviewButton}>
+                      <OText size={10} color={theme.colors.primary} numberOfLines={1}>
+                        {t('REVIEW', 'Review')}
+                      </OText>
+                    </TouchableOpacity>
+                  )}
+                {order.cart && (
+                  <OButton
+                    text={t('REORDER', 'Reorder')}
+                    imgRightSrc={''}
+                    textStyle={styles.buttonText}
+                    style={
+                      reorderLoading && order.id === reorderSelected
+                        ? styles.reorderLoading
+                        : styles.reorderbutton
+                    }
+                    onClick={() => handleReorderClick(order.id)}
+                    isLoading={reorderLoading && order.id === reorderSelected}
+                  />
+                )}
+              </ButtonWrapper>
+            )}
+          </ContentHeader>
+          <ContentFooter>
+            <View style={{ flex: 1 }}>
+              <View style={styles.infoText}>
+                {!!!pastOrders && (
+                  <>
+                    <OText
+                      size={10}
+                      space
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      lineHeight={15}
+                      numberOfLines={1}
+                    >
+                      {t('ORDER_NO', 'Order No') + '.'}
+                    </OText>
+                    <OText
+                      size={10}
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      lineHeight={15}
+                      numberOfLines={1}
+                    >
+                      {order.id + ` \u2022 `}
+                    </OText>
+                  </>
+                )}
+                <OText
+                  size={10}
+                  lineHeight={15}
+                  color={theme.colors.textSecondary}
+                  style={{ marginVertical: 3 }}
+                  numberOfLines={1}>
+                  {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
+                </OText>
+              </View>
+              <OText
+                color={theme.colors.primary}
+                size={10}
+                lineHeight={15}
+                numberOfLines={1}>
+                {getOrderStatus(order.status)?.value}
+              </OText>
+            </View>
+            <TouchableOpacity
+              onPress={handleChangeFavorite}
+              style={{ marginTop: 5 }}
+            >
+              <IconAntDesign
+                name={order?.favorite ? 'heart' : 'hearto'}
+                color={theme.colors.danger5}
+                size={16}
+              />
+            </TouchableOpacity>
+          </ContentFooter>
+        </CardInfoWrapper>
+      </InnerContainer>
+    </Container>
+  )
+}
+
+export const SingleOrderCard = (props: any) => {
+  const singleOrderCardProps = {
+    ...props,
+    UIComponent: SingleOrderCardUI
+  }
+  return <SingleOrderCardController {...singleOrderCardProps} />
+}

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

@@ -0,0 +1,54 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.TouchableOpacity`
+  border-radius: 7.6px;
+	box-shadow: 0 1px 2px #0000001A;
+  margin-bottom: 10px;
+  padding-vertical: 5px;
+`
+
+export const InnerContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+`
+
+export const Logo = styled.View`
+	border-radius: 7.6px;
+  margin-right: 12px;
+`
+
+export const CardInfoWrapper = styled.View`
+  flex: 1;
+`
+
+export const ContentHeader = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const ButtonWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const ContentFooter = styled.View`
+  flex-direction: row;
+  width: 100%;
+`
+
+export const UnreadMessageCounter = styled.View`
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 7.6px;
+  background-color: ${(props: any) => props.theme.colors.primaryContrast};
+`
+
+export const Price = styled.View`
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-left: 10px;
+  width: 30%;
+`

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

@@ -1,29 +1,50 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
 	useLanguage,
 	useConfig,
 	useOrder,
 	useUtils,
+	useSession,
+	useOrderingTheme,
+	SingleProductCard as SingleProductCardController
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet } from 'react-native';
-import { OText, OIcon } from '../shared';
+import { StyleSheet, View, TouchableOpacity, Image, Animated } 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'
 import { shape } from '../../utils';
 
-export const SingleProductCard = (props: SingleProductCardParams) => {
+function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
+		prevProps.isSoldOut === nextProps.isSoldOut &&
+		prevProps.productAddedToCartLength === nextProps.productAddedToCartLength &&
+		prevProps.categoryState === nextProps.categoryState
+}
+
+const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
-		businessId,
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
-		style
+		style,
+		handleFavoriteProduct,
+		enableIntersection,
+		navigation,
+		businessId,
+		isPreviously
 	} = props;
 
 	const theme = useTheme();
+	const [orderingTheme] = useOrderingTheme()
+	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
+
+	const fadeAnim = useRef(new Animated.Value(0)).current;
 
 	const styles = StyleSheet.create({
 		container: {
@@ -32,6 +53,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			borderColor: theme.colors.border,
 			marginBottom: 28,
 		},
+		titleWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'space-between'
+		},
 		line18: {
 			lineHeight: 18,
 		},
@@ -68,11 +94,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		}
 	});
 
-
 	const [, t] = useLanguage();
 	const [stateConfig] = useConfig();
-	const [{ parsePrice, optimizeImage }] = useUtils();
-	const [orderState] = useOrder();
+	const [{ auth }] = useSession()
+	const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
+	const [orderState] = useOrder()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const editMode = typeof product?.code !== 'undefined';
 
@@ -97,88 +124,186 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
+
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
+	const handleChangeFavorite = () => {
+		if (auth) {
+			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
+		}
+	}
+
+	const handleChangeIntersection = () => {
+		setIsIntersectionObserver(true);
+		fadeIn();
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<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>
-				<OText
-					size={12}
-					weight={'500'}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={styles.line18}>
-					{product?.name}
-				</OText>
-				<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: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+			{isIntersectionObserver ? (
+				<CardContainer
+					showAddButton={!hideAddButton}
+					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, flex: 1 }}>
+									{product?.name}
+								</OText>
+								{!isPreviously && (
+									<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}
+								numberOfLines={!isPreviously ? 2 : 1}
+								ellipsizeMode="tail"
+								color={theme.colors.textSecondary}
+								style={styles.line15}>
+								{product?.description}
+							</OText>
+							{isPreviously && (
+								<OText
+									size={10}
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									color={theme.colors.primary}
+									style={styles.line15}>
+									{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}
+								</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 && (
+								<Animated.View
+									style={[
+										{
+											// Bind opacity to animated value
+											opacity: fadeAnim
+										}
+									]}
+								>
+									<FastImage
+										style={styles.productStyle}
+										source={{
+											uri: optimizeImage(product?.images, 'h_250,c_limit'),
+											priority: FastImage.priority.normal,
+										}}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</Animated.View>
+							)}
+						</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>
+					{!hideAddButton && (
+						<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')}
+						/>
 					)}
-				</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>
-					</RibbonBox>
-				)}
-				{product?.images ? (
-					<FastImage
-						style={styles.productStyle}
-						source={{
-							uri: optimizeImage(product?.images, 'h_250,c_limit'),
-							priority: FastImage.priority.normal,
-						}}
-						resizeMode={FastImage.resizeMode.cover}
-					/>
-				) : (
-					<OIcon
-						src={theme?.images?.dummies?.product}
-						style={styles.productStyle}
-					/>
-				)}
-			</LogoWrapper>
-
-			{(isSoldOut || maxProductQuantity <= 0) && (
-				<SoldOut>
-					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
-						{t('SOLD_OUT', 'SOLD OUT')}
-					</OText>
-				</SoldOut>
+				</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>
 			)}
-		</CardContainer>
+		</InView>
 	);
-};
+}, SingleProductCardPropsAreEqual);
+
+export const SingleProductCard = (props: SingleProductCardParams) => {
+	const singleProductCardProps = {
+		...props,
+		UIComponent: SingleProductCardUI
+	}
+	return <SingleProductCardController {...singleProductCardProps} />
+}

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;
 `