ordering-ui-react-native 0.12.9 → 0.12.13

package/themes/single-business/src/components/OrdersOption/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
-import { useFocusEffect } from '@react-navigation/native'
 import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
@@ -32,7 +31,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ordersLength,
     setOrdersLength,
 		businessId,
-		preOrders
+		preOrders,
+    sortOrders
   } = props
 
   const theme = useTheme()
@@ -45,7 +45,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ? theme.images.general.emptyActiveOrders
     : theme.images.general.emptyPastOrders
 
-  const orders = customArray || values || []
+  let [orders, setOrders] = useState(values)
 
   const [reorderLoading, setReorderLoading] = useState(false)
   const [isLoadingFirstRender, setIsLoadingFirstRender] = useState(false)
@@ -99,44 +99,44 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     return objectStatus && objectStatus
   }
 
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders()
-      setIsLoadingFirstRender(false)
-      return () => {
-        setIsLoadingFirstRender(true)
-      }
-    }, [navigation])
-  )
-
   useEffect(() => {
     setOrdersLength && setOrdersLength({
       ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
+      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: values.length
     })
-  }, [orders.length])
+  }, [values.length])
 
+  useEffect(() => {
+    setOrders(
+      sortOrders(
+        values.filter((order: any) => orderStatus.includes(order.status))
+      )
+    )
+  }, [values])
 
   return (
     <>
       <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <OText size={16} color={theme.colors.textPrimary} mBottom={10} style={activeOrders ? { paddingHorizontal: 0 } : {}}>
+        {orders.length > 0 && !isLoadingFirstRender && (
+          <OText
+            size={16}
+            color={theme.colors.textPrimary}
+            mBottom={10}
+            style={activeOrders ? { paddingHorizontal: 0 } : {}}
+          >
             {titleContent || (
-							preOrders ? t('UPCOMING', 'UPCOMING') 
+							preOrders ? t('UPCOMING', 'Upcoming')
 							: activeOrders ? t('ACTIVE', 'Active')
               : t('PAST', 'Past'))}
           </OText>
         )}
       </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
-      )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
+      {!loading &&
+        orders.length === 0 &&
+        !isLoadingFirstRender &&
+        ordersLength.previousOrdersLength === 0 &&
+        ordersLength.activeOrdersLength === 0 &&
+      (
         <NotFoundSource
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           image={imageFails}
@@ -191,31 +191,31 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             setScreen={setScreen}
             screen={screen}
           />
-					) : (
+				) : (
 					<>
-					{preOrders ? 
-						<ActiveOrders
-							orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-							pagination={pagination}
-							loadMoreOrders={loadMoreOrders}
-							reorderLoading={reorderLoading}
-							customArray={customArray}
-							getOrderStatus={getOrderStatus}
-							onNavigationRedirect={onNavigationRedirect}
-							setScreen={setScreen}
-							screen={screen}
-							isPreorders
-						/>
-					: <PreviousOrders
-							reorderLoading={reorderLoading}
-							orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-							pagination={pagination}
-							loadMoreOrders={loadMoreOrders}
-							getOrderStatus={getOrderStatus}
-							onNavigationRedirect={onNavigationRedirect}
-							handleReorder={handleReorder}
-						/>
-					}
+            {preOrders ?
+              <ActiveOrders
+                orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
+                pagination={pagination}
+                loadMoreOrders={loadMoreOrders}
+                reorderLoading={reorderLoading}
+                customArray={customArray}
+                getOrderStatus={getOrderStatus}
+                onNavigationRedirect={onNavigationRedirect}
+                setScreen={setScreen}
+                screen={screen}
+                isPreorders
+              />
+            : <PreviousOrders
+                reorderLoading={reorderLoading}
+                orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
+                pagination={pagination}
+                loadMoreOrders={loadMoreOrders}
+                getOrderStatus={getOrderStatus}
+                onNavigationRedirect={onNavigationRedirect}
+                handleReorder={handleReorder}
+              />
+            }
 					</>
         )
       )}

package/themes/single-business/src/components/OrdersOption/styles.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components/native'
 
 export const OptionTitle = styled.View`
-	margin-top: 24px;
+	margin-top: 10px;
 `

package/themes/single-business/src/components/PreviousOrders/index.tsx

@@ -73,21 +73,32 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 	const [reorderSelected, setReorderSelected] = useState<number | null>(null);
 	const [{ parseDate, optimizeImage }] = useUtils();
 	const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+  const [isReviewedOrders, setIsReviewedOrders] = useState<Array<any>>([])
 
 	const handleClickViewOrder = (uuid: string) => {
 		onNavigationRedirect &&
 			onNavigationRedirect('OrderDetails', { orderId: uuid });
 	};
 
+  const handleReviewState = (orderId: any) => {
+    if (!orderId || isReviewedOrders.includes(orderId)) return
+    setIsReviewedOrders([ ...isReviewedOrders, orderId ])
+  }
+
 	const handleClickOrderReview = (order: any) => {
 		onNavigationRedirect &&
 			onNavigationRedirect('ReviewOrder', {
-				order: {
-					id: order?.id,
-					business_id: order?.business_id,
-					logo: order.business?.logo,
-				},
-			});
+        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
+        },
+        handleReviewState: handleReviewState
+      });
 	};
 
 	const formatDate = (date: string, option?: any) => {
@@ -100,82 +111,85 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 	};
 
 	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'}>
-								{`${t('ORDER_NO', 'Order No')}.${order.id}`}
-							</OText>
-							<OText
-								size={10}
-								lineHeight={21}
-								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>
-							<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>
-			))}
-			{pagination.totalPages && pagination.currentPage < pagination.totalPages && (
-				<WrappButton>
-					<OButton
-						onClick={loadMoreOrders}
-						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-						imgRightSrc={null}
-						textStyle={{ color: theme.colors.white }}
-						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
-					/>
-				</WrappButton>
-			)}
-		</View>
+    orders.length === 0 ? null : (
+      <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'}>
+                  {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+                </OText>
+                <OText
+                  size={10}
+                  lineHeight={21}
+                  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>
+                <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 && !isReviewedOrders.includes(order?.id) &&
+                (
+                  <TouchableOpacity
+                    onPress={() => handleClickOrderReview(order)}
+                    style={styles.reviewButton}>
+                    <OText size={10} color={theme.colors.primary} numberOfLines={1}>
+                      {t('REVIEW', 'Review')}
+                    </OText>
+                  </TouchableOpacity>
+                )}
+              </Status>
+            </Card>
+          </TouchableOpacity>
+        ))}
+        {pagination.totalPages && pagination.currentPage < pagination.totalPages && (
+          <WrappButton>
+            <OButton
+              onClick={loadMoreOrders}
+              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+              imgRightSrc={null}
+              textStyle={{ color: theme.colors.white }}
+              style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
+            />
+          </WrappButton>
+        )}
+      </View>
+    )
 	);
 };