ordering-ui-react-native 0.16.8 → 0.16.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.8",
+  "version": "0.16.11",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/StripeMethodForm/index.tsx

@@ -102,7 +102,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       shippingMethods: [
         {
           amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
-          identifier: 'DPS',
+          identifier: 'standard',
           label: 'Courier',
           detail: 'Delivery',
           type: 'final',
@@ -125,7 +125,6 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           last4: paymentMethod.Card.last4
         }
       })
-      onCancel()
     }
   }
 

package/themes/original/index.tsx

@@ -15,6 +15,8 @@ import { BusinessProductsListing } from './src/components/BusinessProductsListin
 import { CartContent } from './src/components/CartContent';
 import { BusinessCart } from './src/components/BusinessCart';
 import { Checkout } from './src/components/Checkout';
+import { Favorite } from './src/components/Favorite';
+import { FavoriteList } from './src/components/FavoriteList';
 import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
@@ -58,6 +60,7 @@ import { CartStoresListing } from './src/components/CartStoresListing';
 import { PaymentOptionsWebView } from '../../src/components/PaymentOptionsWebView';
 import { GoogleMap } from './src/components/GoogleMap';
 import { SingleProductCard } from './src/components/SingleProductCard';
+import { SingleOrderCard } from './src/components/SingleOrderCard';
 import { UpsellingRedirect } from './src/components/BusinessProductsListing/UpsellingRedirect';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
 import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
@@ -164,6 +167,8 @@ export {
 	CartContent,
 	BusinessCart,
 	Checkout,
+	Favorite,
+	FavoriteList,
 	ForgotPasswordForm,
 	MomentOption,
 	OrdersOption,
@@ -209,6 +214,7 @@ export {
 	PaymentOptionsWebView,
 	GoogleMap,
 	SingleProductCard,
+	SingleOrderCard,
 	UpsellingRedirect,
 	ProductItemAccordion,
 	BusinessItemAccordion,

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

@@ -1,23 +1,13 @@
 import React from 'react';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
-import { OButton, OIcon, OText } from '../shared';
+import { useConfig } from 'ordering-components/native';
 import {
-	ActiveOrdersContainer,
-	Card,
-	Map,
-	Information,
-	Logo,
-	OrderInformation,
-	BusinessInformation,
-	Price,
-	UnreadMessageCounter,
-	LoadMore
+	ActiveOrdersContainer
 } from './styles';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import { ActiveOrdersParams } from '../../types';
-import moment from 'moment';
 import { useTheme } from 'styled-components/native';
+import { SingleOrderCard } from '../SingleOrderCard';
 
 export const ActiveOrders = (props: ActiveOrdersParams) => {
 	const {
@@ -27,111 +17,27 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		loadMoreOrders,
 		getOrderStatus,
 		isMessageView,
-		handleClickOrder
+		handleClickOrder,
+		handleUpdateOrderList
 	} = props;
 
 	const theme = useTheme();
 	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parseDate, parsePrice, optimizeImage }] = useUtils();
-
-	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 handleClickCard = (uuid: string) => {
-		if (isMessageView) {
-			handleClickOrder(uuid)
-			return
-		}
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const Order = ({ order, index }: { order: any; index: number }) => (
-		<React.Fragment>
-			<Card
-				isMiniCard={configs?.google_maps_api_key?.value}
-				onPress={() => handleClickCard(order?.uuid)}
-				activeOpacity={0.7}>
-				{/* {!!(configs?.google_maps_api_key?.value) && (
-					<Map>
-						<OIcon
-						url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-						height={100}
-						width={320}
-						style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
-						/>
-					</Map>
-				)} */}
-				<Information>
-					{!!order.business?.logo && (
-						<Logo>
-							<OIcon
-								url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-								style={styles.logo}
-							/>
-						</Logo>
-					)}
-					<OrderInformation>
-						<BusinessInformation>
-							<OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
-								{order.business?.name}
-							</OText>
-							<View style={styles.orderNumber}>
-								<OText size={10} space color={theme.colors.textSecondary}>
-									{t('ORDER_NO', 'Order No') + '.'}
-								</OText>
-								<OText size={10} color={theme.colors.textSecondary}>
-									{order.id + ` \u2022 `}
-								</OText>
-								<OText size={10} color={theme.colors.textSecondary}>
-									{order?.delivery_datetime_utc
-										? formatDate(order?.delivery_datetime_utc)
-										: formatDate(order?.delivery_datetime, { utc: false })}
-								</OText>
-							</View>
-							{/* {order?.status !== 0 && ( */}
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								weight={400}
-								numberOfLines={2}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-							{/* )} */}
-						</BusinessInformation>
-						{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>
-						)}
-
-					</OrderInformation>
-				</Information>
-			</Card >
-		</React.Fragment >
-	);
 
 	return (
 		<>
 			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
 				{orders.length > 0 &&
 					orders.map((order: any, index: any) => (
-						<Order key={index} order={order} index={index} />
+						<SingleOrderCard
+							key={index}
+							order={order}
+							handleClickOrder={handleClickOrder}
+							isMessageView={isMessageView}
+							getOrderStatus={getOrderStatus}
+							onNavigationRedirect={onNavigationRedirect}
+							handleUpdateOrderList={handleUpdateOrderList}
+						/>
 					))}
 			</ActiveOrdersContainer>
 			<View
@@ -144,26 +50,3 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		</>
 	);
 };
-
-const styles = StyleSheet.create({
-	logo: {
-		borderRadius: 7.6,
-		width: 64,
-		height: 64,
-	},
-	orderNumber: {
-		flexDirection: 'row',
-		marginVertical: 3,
-	},
-	loadOrders: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		minWidth: 230,
-	},
-	loadMoreButton: {
-		width: '100%',
-		marginLeft: 'auto',
-		marginRight: 'auto',
-		borderRadius: 7.6
-	},
-});

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

@@ -3,57 +3,3 @@ import styled from 'styled-components/native'
 export const ActiveOrdersContainer = styled.View`
   margin-bottom: 20px;
 `
-
-export const Card = styled.TouchableOpacity`
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  height: 100px;
-  align-items: center;
-  padding-vertical: 5px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  padding-left: 14px;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`
-
-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 LoadMore = styled.View`
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 10px;
-`

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

@@ -7,7 +7,7 @@ import {
 	useConfig
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
 import {
@@ -20,10 +20,12 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
-	RibbonBox
+	RibbonBox,
+	ReviewAndFavorite
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
@@ -40,7 +42,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryPrice,
 		businessDeliveryTime,
 		businessPickupTime,
-		businessDistance
+		businessDistance,
+		handleFavoriteBusiness
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
@@ -120,6 +123,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
+  const handleChangeFavorite = () => {
+    handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+  }
+
 	return (
 		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
 			{business?.ribbon?.enabled && (
@@ -179,14 +186,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 					</BusinessLogo>
-					{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-						<Reviews>
-							<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-							<OText size={10} style={{ lineHeight: 15 }}>
-								{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-							</OText>
-						</Reviews>
-					)}
+					<ReviewAndFavorite>
+						{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+							<Reviews>
+								<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+								<OText size={10} style={{ lineHeight: 15 }}>
+									{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+								</OText>
+							</Reviews>
+						)}
+						<TouchableOpacity
+							onPress={handleChangeFavorite}
+						>
+							<IconAntDesign
+								name={business?.favorite ? 'heart' : 'hearto'}
+								color={theme.colors.danger5}
+								size={18}
+							/>
+						</TouchableOpacity>
+					</ReviewAndFavorite>
 				</BusinessInfo>
 				<OText
 					size={12}

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

@@ -49,6 +49,11 @@ export const BusinessLogo = styled.View`
    
 `
 
+export const ReviewAndFavorite = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
 export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;

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

@@ -33,7 +33,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     subcategoriesSelected,
     onClickCategory,
     lazyLoadProductsRecommended,
-    isFiltMode
+    isFiltMode,
+    handleUpdateProducts
   } = props;
 
   const [, t] = useLanguage();
@@ -125,6 +126,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               businessId={businessId}
               onProductClick={() => onProductClick(product)}
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+              handleUpdateProducts={handleUpdateProducts}
             />
           ))
       }
@@ -147,6 +149,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       product={product}
                       businessId={businessId}
                       onProductClick={onProductClick}
+                      handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ),
@@ -212,7 +215,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       {category?.description?.length > 80 && (
                         <OButton
                           style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
-                          text={t('SEE_MORE', 'See more')}
+                          text={t('VIEW_MORE', 'View more')}
                           parentStyle={{ padding: 0 }}
                           onClick={() => setOpenDescription(category)}
                           bgColor='transparent'
@@ -238,6 +241,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       businessId={businessId}
                       product={product}
                       onProductClick={onProductClick}
+                      handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ))}
@@ -327,7 +331,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               style={{ borderRadius: 7.6 }}
             />
           )}
-          <OText mBottom={40}>{openDescription?.description}</OText>
+          <OText mBottom={60}>{openDescription?.description}</OText>
         </ScrollView>
       </OModal>
     </ProductsContainer>

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

@@ -53,6 +53,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		setAlertState,
 		multiRemoveProducts,
 		getNextProducts,
+		handleUpdateProducts
 	} = props
 
 	const theme = useTheme();
@@ -353,6 +354,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								currentCart={currentCart}
 								setSubcategoriesSelected={setSubcategoriesSelected}
 								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
 							/>
 						</WrapContent>
 					</>
@@ -374,6 +376,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								categoryState={categoryState}
 								isBusinessLoading={loading}
 								errorQuantityProducts={errorQuantityProducts}
+								handleUpdateProducts={handleUpdateProducts}
 							/>
 						</WrapContent>
 					</>

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

@@ -60,7 +60,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		paginationProps,
 		handleChangeSearch,
 		businessId,
-		isGuestUser
+		isGuestUser,
+		handleUpdateBusinessList
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -122,6 +123,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		Number(configs?.max_days_preorder?.value) > 0
 	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
+  const [favoriteIds, setFavoriteIds] = useState<any>([])
+
 	// const panResponder = useRef(
 	// 	PanResponder.create({
 	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
@@ -217,6 +220,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}, [navigation])
 	)
 
+	useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach((business: any) => {
+      if (business?.favorite) {
+        ids.push(business?.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
@@ -227,7 +241,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			}
 		>
 			<HeaderWrapper
-				source={theme.images.backgrounds.business_list_header}
+				source={theme.images.general.homeHero}
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
@@ -355,7 +369,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			{
 				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+					<HighestRatedBusinesses
+						onBusinessClick={handleBusinessClick}
+						navigation={navigation}
+						favoriteIds={favoriteIds}
+						setFavoriteIds={setFavoriteIds}
+					/>
 				)
 			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
@@ -394,6 +413,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							businessDeliveryTime={business?.delivery_time}
 							businessPickupTime={business?.pickup_time}
 							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
 						/>
 					)
 				)}

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

@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import { useLanguage, useOrder } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { FavoriteList } from '../FavoriteList'
+import NavBar from '../NavBar'
+import { OText } from '../shared'
+
+import {
+  TabContainer,
+  Tab,
+  Container
+} from './styles'
+
+export const Favorite = (props: any) => {
+  const {
+    navigation
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [orderState] = useOrder()
+  const [tabSelected, setTabSelected] = useState('businesses')
+
+  const tabList = [
+    { key: 'businesses', name: t('BUSINESSES', 'Businesses') },
+    { key: 'products', name: t('PRODUCTS', 'Products') },
+    { key: 'orders', name: t('ORDERS', 'Orders') }
+  ]
+
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const onRedirect = (route: string, params?: any) => {
+    navigation.navigate(route, params)
+  }
+
+  return (
+    <Container>
+      <NavBar
+        title={t('FAVORITE', 'Favorite')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      <TabContainer>
+        {tabList.map((menu, i) => (
+          <Tab
+            key={i}
+            active={menu.key === tabSelected}
+            onPress={() => setTabSelected(menu.key)}
+          >
+            <OText
+              color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
+					    size={14}
+					    weight={menu.key === tabSelected ? '500' : '400'}
+					    style={{ marginBottom: 12 }}
+            >
+              {menu.name}
+            </OText>
+          </Tab>
+        ))}
+      </TabContainer>
+      {tabSelected === 'businesses' && (
+        <FavoriteList
+          navigation={navigation}
+          onNavigationRedirect={onRedirect}
+          isBusiness
+          favoriteURL='favorite_businesses'
+          originalURL='business'
+          location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
+          propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
+        />
+      )}
+      {tabSelected === 'products' && (
+        <FavoriteList
+          favoriteURL='favorite_products'
+          originalURL='products'
+          isProduct
+        />
+      )}
+      {tabSelected === 'orders' && (
+        <FavoriteList
+          onNavigationRedirect={onRedirect}
+          favoriteURL='favorite_orders'
+          originalURL='orders'
+          isOrder
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components/native'
+
+export const TabContainer = styled.View`
+  flex-direction: row;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  border-bottom-width: 1px;
+  margin-bottom: 25px;
+`
+
+export const Tab = styled.TouchableOpacity`
+  margin-right: 32px;
+  ${(props: any) => props.active && css`
+    border-bottom-color: ${(props: any) => props.theme.colors.textNormal};
+    border-bottom-width: 1px;
+  `}
+`
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+  padding-bottom: 20px;
+`