ordering-ui-react-native 0.16.8 → 0.16.11

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

@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+import moment from 'moment';
+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 }] = 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 formatDate = (date: string, option?: any) => {
+		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
+	};
+
+  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>
+            <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+              {order.business?.name}
+            </OText>
+            {!!!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
+                    ? formatDate(order?.delivery_datetime_utc)
+                    : formatDate(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

@@ -4,13 +4,15 @@ import {
 	useConfig,
 	useOrder,
 	useUtils,
+	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 { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
 
 function SingleProductCardPropsAreEqual(prevProps : any, nextProps : any) {
@@ -19,13 +21,14 @@ function SingleProductCardPropsAreEqual(prevProps : any, nextProps : any) {
 	prevProps.productAddedToCartLength === nextProps.productAddedToCartLength
 }
 
-export const SingleProductCard = React.memo((props: SingleProductCardParams) => {
+const SinguleProductCardUI = (props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
-		style
+		style,
+		handleFavoriteProduct
 	} = props;
 
 	const theme = useTheme();
@@ -37,6 +40,11 @@ export const SingleProductCard = React.memo((props: SingleProductCardParams) =>
 			borderColor: theme.colors.border,
 			marginBottom: 28,
 		},
+		titleWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'space-between'
+		},
 		line18: {
 			lineHeight: 18,
 		},
@@ -102,6 +110,11 @@ export const SingleProductCard = React.memo((props: SingleProductCardParams) =>
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
+
+	const handleChangeFavorite = () => {
+		handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+	}
+
 	return (
 		<CardContainer
 			style={[
@@ -118,14 +131,25 @@ export const SingleProductCard = React.memo((props: SingleProductCardParams) =>
 				</QuantityContainer>
 			)}
 			<CardInfo>
-				<OText
-					size={12}
-					weight={'500'}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={styles.line18}>
-					{product?.name}
-				</OText>
+				<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 && (
@@ -186,4 +210,12 @@ export const SingleProductCard = React.memo((props: SingleProductCardParams) =>
 			)}
 		</CardContainer>
 	);
+}
+
+export const SingleProductCard = React.memo((props: SingleProductCardParams) => {
+	const singleProductCardProps = {
+		...props,
+		UIComponent: SinguleProductCardUI
+	}
+	return <SingleProductCardController {...singleProductCardProps} />
 }, SingleProductCardPropsAreEqual);

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

@@ -219,6 +219,10 @@ const ProfileListUI = (props: ProfileParams) => {
 						<Ionicons name='md-list-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SESSIONS', 'Sessions')}</OText>
 					</ListItem>
+					<ListItem onPress={() => navigation.navigate('Favorite')} activeOpacity={0.7}>
+						<Ionicons name='heart-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('FAVORITES', 'Favorites')}</OText>
+					</ListItem>
 				</Actions>
 
 				<Actions>

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

@@ -154,13 +154,17 @@ export interface BusinessesListingParams {
 	franchiseId?: any;
 	businessId?: any;
 	isGuestUser?: any;
+	handleUpdateBusinessList?: any;
 }
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
 	onBusinessClick?: void;
 	navigation?: any;
 	isLoading?: boolean;
-	getBusinesses: (newFetch: boolean) => void
+	getBusinesses: (newFetch: boolean) => void,
+	favoriteIds?: any,
+	setFavoriteIds?: any,
+	handleUpdateBusinessList?: any
 }
 export interface BusinessTypeFilterParams {
 	businessTypes?: Array<any>;
@@ -189,7 +193,11 @@ export interface BusinessControllerParams {
 	businessDeliveryPrice?: number,
 	businessDeliveryTime?: string,
 	businessPickupTime?: string,
-	businessDistance?: number
+	businessDistance?: number,
+	favoriteIds?: number[],
+	handleFavoriteBusiness?: any,
+	setFavoriteIds?: any;
+	handleUpdateBusinessList?: any;
 }
 export interface BusinessProductsListingParams {
 	navigation?: any;
@@ -212,6 +220,7 @@ export interface BusinessProductsListingParams {
 	handleChangeCategory: (value: any) => {};
 	setProductLogin?: () => {};
 	updateProductModal?: (value: any) => {};
+	handleUpdateProducts?: any;
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;
@@ -259,7 +268,8 @@ export interface BusinessProductsListParams {
     subcategoriesSelected?: any,
     onClickCategory?: any,
     lazyLoadProductsRecommended?: boolean,
-	isFiltMode?: boolean
+	isFiltMode?: boolean,
+	handleUpdateProducts?: any
 }
 export interface SingleProductCardParams {
 	businessId: any,
@@ -267,7 +277,9 @@ export interface SingleProductCardParams {
 	isSoldOut: boolean;
 	onProductClick: any;
 	productAddedToCartLength: number;
-	style?: ViewStyle
+	style?: ViewStyle,
+	handleFavoriteProduct?: any,
+	handleUpdateProducts?: any
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -319,7 +331,8 @@ export interface OrdersOptionParams {
 	setOpenMessges?: any,
 	loadMoreStatus?: boolean,
 	refreshOrders?: boolean,
-	setRefreshOrders?: (value : boolean) => void
+	setRefreshOrders?: (value : boolean) => void,
+	handleUpdateOrderList?: (orderId: number, changes: any) => {}
 }
 export interface ActiveOrdersParams {
 	orders?: any,
@@ -332,7 +345,8 @@ export interface ActiveOrdersParams {
 	loadMoreOrders?: () => {},
 	onNavigationRedirect?: (route: string, params?: any) => {},
 	isMessageView?: boolean,
-	handleClickOrder?: any
+	handleClickOrder?: any,
+	handleUpdateOrderList?: (orderId: number, changes: any) => {}
 }
 export interface PreviousOrdersParams {
 	orders?: any,
@@ -343,6 +357,7 @@ export interface PreviousOrdersParams {
 	loadMoreOrders?: () => {},
 	handleReorder?: (orderId: number) => {},
 	onNavigationRedirect?: (route: string, params?: any) => {}
+	handleUpdateOrderList?: (orderId: number, changes: any) => {}
 }
 export interface OrderDetailsParams {
 	navigation?: any,
@@ -620,3 +635,29 @@ export interface otpParams {
 	handleLoginOtp: (code : string) => void,
 	setAlertState: any
 }
+
+export interface FavoriteParams {
+	favoriteList: any,
+	handleUpdateFavoriteList: (id: number, changes: any) => {},
+	pagination: any,
+	getFavoriteList: (value: number) => {},
+	navigation?: any,
+	onNavigationRedirect?: (route: string, params?: any) => {},
+	reorderState?: any,
+	handleReorder?: (orderId: number) => {},
+	isOrder?: boolean,
+	isProduct?: boolean,
+	isBusiness?: boolean
+}
+
+export interface SingleOrderCardParams {
+	order: any,
+	reorderLoading: any,
+	handleReorder?: (value: any) => {},
+	getOrderStatus: any,
+	handleFavoriteOrder?: (value: boolean) => {},
+	onNavigationRedirect?: (route: string, params?: any) => {},
+	pastOrders: any,
+	isMessageView?: any,
+	handleClickOrder: (value: any) => {}
+}