ordering-ui-react-native 0.16.9 → 0.16.12

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

@@ -0,0 +1,268 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { FavoriteParams } from '../../types';
+import { SingleOrderCard } from '../SingleOrderCard';
+import {
+	FavoriteList as FavoriteListController,
+	useOrder,
+  useLanguage
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { _setStoreData } from '../../providers/StoreUtil';
+import { Container, WrappButton } from './styles'
+import { OButton } from '../shared';
+import { BusinessController } from '../BusinessController';
+import { SingleProductCard } from '../SingleProductCard';
+
+
+const FavoriteListUI = (props: FavoriteParams) => {
+	const {
+    favoriteList,
+    handleUpdateFavoriteList,
+    pagination,
+    getFavoriteList,
+    navigation,
+    onNavigationRedirect,
+    reorderState,
+    handleReorder,
+    isBusiness,
+    isOrder,
+    isProduct
+	} = props
+
+	const theme = useTheme();
+  const [, t] = useLanguage()
+  const [orderState] = useOrder();
+  const [{ carts }] = useOrder()
+
+  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
+
+  const getOrderStatus = (s: any) => {
+    const status = parseInt(s)
+    const orderStatus = [
+      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
+      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
+      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
+      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
+      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
+      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
+      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
+      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
+      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
+      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
+      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
+      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
+      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
+      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
+      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
+      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
+      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
+      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
+      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
+      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
+      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
+    ]
+
+    const objectStatus = orderStatus.find((o) => o.key === status)
+
+    return objectStatus && objectStatus
+  }
+
+  useEffect(() => {
+		const _businessId = 'businessId:' + reorderState?.result?.business_id
+		if (reorderState?.error) {
+		  if (reorderState?.result?.business_id) {
+			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+		  }
+		}
+		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+		  const cartProducts = carts?.[_businessId]?.products
+		  const available = cartProducts.every((product: any) => product.valid === true)
+		  const orderProducts = favoriteList?.favorites.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
+
+		  if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
+			onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+		  } else {
+			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+			cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+		  }
+		}
+	  }, [reorderState])
+
+  const handleBusinessClick = (business: any) => {
+    onNavigationRedirect && onNavigationRedirect('Business', {
+      store: business.slug,
+      header: business.header,
+      logo: business.logo,
+    });
+  }
+
+	return (
+		<Container>
+      {isBusiness && (
+        <>
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <Placeholder
+                Animation={Fade}
+                key={i}
+                style={{ marginBottom: 20 }}>
+                <View style={{ width: '100%' }}>
+                  <PlaceholderLine
+                    height={200}
+                    style={{ marginBottom: 20, borderRadius: 25 }}
+                  />
+                  <View style={{ paddingHorizontal: 10 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
+                      <PlaceholderLine
+                        height={25}
+                        width={40}
+                        style={{ marginBottom: 10 }}
+                      />
+                      <PlaceholderLine
+                        height={25}
+                        width={20}
+                        style={{ marginBottom: 10 }}
+                      />
+                    </View>
+                    <PlaceholderLine
+                      height={20}
+                      width={30}
+                      style={{ marginBottom: 10 }}
+                    />
+                    <PlaceholderLine
+                      height={20}
+                      width={80}
+                      style={{ marginBottom: 10 }}
+                    />
+                  </View>
+                </View>
+              </Placeholder>
+            ))
+          )}
+          {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites.map((business: any, i:number) => (
+              <BusinessController
+                key={`${business.id}_` + i}
+                business={business}
+                isBusinessOpen={business.open}
+                handleCustomClick={handleBusinessClick}
+                orderType={orderState?.options?.type}
+                navigation={navigation}
+                businessHeader={business?.header}
+                businessFeatured={business?.featured}
+                businessLogo={business?.logo}
+                businessReviews={business?.reviews}
+                businessDeliveryPrice={business?.delivery_price}
+                businessDeliveryTime={business?.delivery_time}
+                businessPickupTime={business?.pickup_time}
+                businessDistance={business?.distance}
+                handleUpdateBusinessList={handleUpdateFavoriteList}
+              />
+            ))
+          )}
+        </>
+      )}
+
+      {isOrder && (
+        <>
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <Placeholder key={i} 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>
+            ))
+          )}
+          {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites.map((order: any) => (
+              <SingleOrderCard
+                key={order?.id}
+                order={order}
+                getOrderStatus={getOrderStatus}
+                onNavigationRedirect={onNavigationRedirect}
+                pastOrders={pastOrders.includes(order?.status)}
+                handleUpdateOrderList={handleUpdateFavoriteList}
+                handleUpdateFavoriteList={handleUpdateFavoriteList}
+                handleReorder={handleReorder}
+                reorderLoading={reorderState?.loading}
+              />
+            ))
+          )}
+        </>
+      )}
+
+      {isProduct && (
+        <>
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <Placeholder key={i} 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>
+            ))
+          )}
+          {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites.map((product: any) => (
+              <SingleProductCard
+                key={product?.id}
+                isSoldOut={product.inventoried && !product.quantity}
+                product={product}
+                onProductClick={() => {}}
+                handleUpdateProducts={handleUpdateFavoriteList}
+              />
+            ))
+          )}
+        </>
+      )}
+
+      {!favoriteList?.loading && pagination.totalPages && pagination.currentPage < pagination.totalPages && (
+				<WrappButton>
+					<OButton
+						onClick={() => getFavoriteList(pagination?.currentPage + 1)}
+						text={t('LOAD_MORE_ITEMS', 'Load more items')}
+						imgRightSrc={null}
+						textStyle={{ color: theme.colors.white }}
+						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
+					/>
+				</WrappButton>
+			)}
+    </Container>
+	)
+}
+
+export const FavoriteList = (props: any) => {
+  const favoriteBusinessesProps = {
+    ...props,
+    UIComponent: FavoriteListUI
+  }
+  return <FavoriteListController {...favoriteBusinessesProps} />
+}

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View``
+
+export const WrappButton = styled.View``

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

@@ -20,7 +20,10 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     onBusinessClick,
     navigation,
     isLoading,
-    getBusinesses
+    getBusinesses,
+    favoriteIds,
+    setFavoriteIds,
+    handleUpdateBusinessList
   } = props;
 
   const [, t] = useLanguage()
@@ -33,6 +36,17 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     getBusinesses(true)
   }, [isLoading])
 
+  useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach(business => {
+      if (business?.favorite) {
+        ids.push(business.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
   return (
     <>
 
@@ -123,6 +137,9 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                           handleCustomClick={onBusinessClick}
                           orderType={orderState?.options?.type}
                           navigation={navigation}
+                          favoriteIds={favoriteIds}
+                          setFavoriteIds={setFavoriteIds}
+                          handleUpdateBusinessList={handleUpdateBusinessList}
                         />
                       </View>
                     )

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

@@ -1027,7 +1027,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount)}
+                          -{parsePrice(event.amount, {isTruncable: true})}
                         </OText>
                       </View>
                     ))}

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

@@ -37,7 +37,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		refreshOrders,
 		setRefreshOrders,
 		reorderState,
-		handleReorder
+		handleReorder,
+		handleUpdateOrderList
 	} = props
 
 	const theme = useTheme();
@@ -222,6 +223,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						customArray={customArray}
 						getOrderStatus={getOrderStatus}
 						onNavigationRedirect={onNavigationRedirect}
+						handleUpdateOrderList={handleUpdateOrderList}
 					/>
 				) : activeOrders ? (
 					<ActiveOrders
@@ -231,6 +233,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						customArray={customArray}
 						getOrderStatus={getOrderStatus}
 						onNavigationRedirect={onNavigationRedirect}
+						handleUpdateOrderList={handleUpdateOrderList}
 					/>
 				) : (
 					<PreviousOrders
@@ -241,6 +244,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						getOrderStatus={getOrderStatus}
 						onNavigationRedirect={onNavigationRedirect}
 						handleReorder={handleReorder}
+						handleUpdateOrderList={handleUpdateOrderList}
 					/>
 				)
 			)}

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

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-      (
-        <>
-          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-            <Container
-              key={wallet.id}
-              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-              onPress={() => handleOnChange(idx, wallet)}
-              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-            >
-              <SectionLeft>
-                {checkedState[idx] ? (
-                  <MaterialCommunityIcons
-                    name="checkbox-marked"
-                    size={25}
-                    color={theme.colors.primary}
-                  />
-                ) : (
-                  <MaterialCommunityIcons
-                    name="checkbox-blank-outline"
-                    size={25}
-                    color={theme.colors.disabled}
-                  />
-                )}
-                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                  <View>
-                    <OText
-                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
-                        color: theme.colors.disabled
-                      } : {}}
-                    >
-                      {walletName[wallet.type]?.name}
-                    </OText>
+        (
+          <>
+            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+              <Container
+                key={wallet.id}
+                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+                onPress={() => handleOnChange(idx, wallet)}
+                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+              >
+                <SectionLeft>
+                  {checkedState[idx] ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={25}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={25}
+                      color={theme.colors.disabled}
+                    />
+                  )}
+                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                    <View>
+                      <OText
+                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
+                          color: theme.colors.disabled
+                        } : {}}
+                      >
+                        {walletName[wallet.type]?.name}
+                      </OText>
+                    </View>
                   </View>
-              </View>
-              </SectionLeft>
-
-              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
-                {wallet.type === 'cash' && (
-                  <OText>
-                    {parsePrice(wallet?.balance)}
-                  </OText>
-                )}
-                {wallet.type === 'credit_point' && (
-                  <OText>
-                    <OText color={theme.colors.primary} weight='bold'>
-                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                </SectionLeft>
+
+                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
+                  {wallet.type === 'cash' && (
+                    <OText>
+                      {parsePrice(wallet?.balance, { isTruncable: true })}
                     </OText>
+                  )}
+                  {wallet.type === 'credit_point' && (
                     <OText>
-                      {wallet?.balance > 0
-                        ? creditBalance(wallet)
-                        : null}
+                      <OText color={theme.colors.primary} weight='bold'>
+                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                      </OText>
+                      <OText>
+                        {wallet?.balance > 0
+                          ? creditBalance(wallet)
+                          : null}
+                      </OText>
                     </OText>
-                  </OText>
-                )}
-              </View>
-            </Container>
-          ))}
-        </>
-      )}
+                  )}
+                </View>
+              </Container>
+            ))}
+          </>
+        )}
 
       {walletsState?.loading && (
         <View>

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

@@ -1,18 +1,13 @@
-import React, { useState } from 'react';
-import { useLanguage, useUtils } from 'ordering-components/native';
+import React from 'react';
+import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, TouchableOpacity, ScrollView, View } from 'react-native';
-import { OButton, OIcon, OText } from '../shared';
+import { View } from 'react-native';
+import { OButton } from '../shared';
 import {
-	Card,
-	Logo,
-	Information,
-	MyOrderOptions,
-	Status,
 	WrappButton,
 } from './styles';
 import { PreviousOrdersParams } from '../../types';
-import moment from 'moment';
+import { SingleOrderCard } from '../SingleOrderCard';
 
 export const PreviousOrders = (props: PreviousOrdersParams) => {
 	const {
@@ -24,152 +19,28 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 		handleReorder,
 		reorderLoading,
 		orderID,
+		handleUpdateOrderList
 	} = props;
 
 	const theme = useTheme();
 
-
-	const styles = StyleSheet.create({
-		logo: {
-			borderRadius: 10,
-			width: 64,
-			height: 64,
-		},
-		reorderbutton: {
-			height: 23,
-			paddingLeft: 10,
-			paddingRight: 10,
-			borderRadius: 23,
-			shadowOpacity: 0,
-			backgroundColor: theme.colors.primaryContrast,
-			borderWidth: 0,
-		},
-		reorderLoading: {
-			width: 80,
-			height: 40,
-			borderRadius: 10,
-		},
-		reviewButton: {
-			height: 23,
-			maxHeight: 23,
-			backgroundColor: theme.colors.white,
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingHorizontal: 10,
-			borderRadius: 23,
-			borderWidth: 1,
-			borderColor: theme.colors.primaryContrast,
-		},
-		buttonText: {
-			color: theme.colors.primary,
-			fontSize: 10,
-			marginLeft: 2,
-			marginRight: 2,
-		},
-	});
-
-
 	const [, t] = useLanguage();
-	const [reorderSelected, setReorderSelected] = useState<number | null>(null);
-	const [{ parseDate, optimizeImage }] = useUtils();
-	const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
-
-	const handleClickViewOrder = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const handleClickOrderReview = (order: any) => {
-		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
-				},
-			});
-	};
-
-	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 handleReorderClick = (id: number) => {
-		setReorderSelected(id);
-		handleReorder && handleReorder(id);
-	};
+  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
 	return (
 		<View style={{ marginBottom: 30 }}>
-			{orders.map((order: any) => (
-				<TouchableOpacity
-					onPress={() => handleClickViewOrder(order?.uuid)}
-					activeOpacity={0.7}
-					style={{ flexDirection: 'row' }}
-					key={order.id}>
-					<Card>
-						{!!order.business?.logo && (
-							<Logo>
-								<OIcon
-									url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-									style={styles.logo}
-								/>
-							</Logo>
-						)}
-						<Information>
-							<OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-								{order.business?.name}
-							</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>
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								numberOfLines={1}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-						</Information>
-						<Status>
-							{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}
-								/>
-							)}
-							{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>
-								)}
-						</Status>
-					</Card>
-				</TouchableOpacity>
+			{orders.map((order: any, i: number) => (
+				<SingleOrderCard
+					key={i}
+					order={order}
+					reorderLoading={reorderLoading}
+					handleReorder={handleReorder}
+					onNavigationRedirect={onNavigationRedirect}
+					getOrderStatus={getOrderStatus}
+					pastOrders={pastOrders.includes(order?.status)}
+					handleUpdateOrderList={handleUpdateOrderList}
+				/>
 			))}
 			{pagination.totalPages && pagination.currentPage < pagination.totalPages && (
 				<WrappButton>