From 451b2bb5513fb89fe718f2979b029ccceda56691 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 11 Jan 2025 17:59:12 +0800
Subject: [PATCH] fixes fixes fixes

---
 src/components/Badge.tsx           |  2 ++
 src/components/OrderItems.tsx      |  4 ++--
 src/hooks/use-qpay-checkout.ts     |  2 +-
 src/hooks/use-stripe-checkout.ts   |  2 +-
 src/screens/OrderHistoryScreen.tsx | 11 ++++++++++-
 src/screens/OrderScreen.tsx        | 18 ++++++++++++------
 6 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 8854d77..5f0a44e 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -12,12 +12,14 @@ function getColorFromStatus(status) {
         case 'operational':
         case 'active':
         case 'completed':
+        case 'pickup_ready':
             return 'green';
         case 'dispatched':
         case 'assigned':
             return 'indigo';
         case 'disabled':
         case 'canceled':
+        case 'order_canceled':
         case 'incomplete':
         case 'unable':
         case 'failed':
diff --git a/src/components/OrderItems.tsx b/src/components/OrderItems.tsx
index 16fce97..02244d1 100644
--- a/src/components/OrderItems.tsx
+++ b/src/components/OrderItems.tsx
@@ -76,14 +76,14 @@ const OrderItems = ({ order }) => {
                                             </Text>
                                         )}
                                         <YStack>
-                                            {entity.meta.variants.map((variant) => (
+                                            {entity.meta.variants.filter(Boolean).map((variant) => (
                                                 <XStack key={variant.id} alignItems='center' space='$2'>
                                                     <Text flex={1} fontSize='$3' color='$textSecondary' numberOfLines={1}>
                                                         {variant.name}
                                                     </Text>
                                                 </XStack>
                                             ))}
-                                            {entity.meta.addons.map((addon) => (
+                                            {entity.meta.addons.filter(Boolean).map((addon) => (
                                                 <XStack key={addon.id} alignItems='center' space='$2'>
                                                     <Text flex={1} fontSize='$3' color='$textSecondary' numberOfLines={1}>
                                                         {addon.name}
diff --git a/src/hooks/use-qpay-checkout.ts b/src/hooks/use-qpay-checkout.ts
index ab06d82..c61b8de 100644
--- a/src/hooks/use-qpay-checkout.ts
+++ b/src/hooks/use-qpay-checkout.ts
@@ -177,7 +177,7 @@ export default function useQPayCheckout({ onOrderComplete }) {
     }, [setupGateway, customer, cart, serviceQuote]);
 
     useEffect(() => {
-        if (checkoutOptions.pickup || !cart) {
+        if (!cart) {
             return;
         }
 
diff --git a/src/hooks/use-stripe-checkout.ts b/src/hooks/use-stripe-checkout.ts
index a62e9ed..4ce5c67 100644
--- a/src/hooks/use-stripe-checkout.ts
+++ b/src/hooks/use-stripe-checkout.ts
@@ -345,7 +345,7 @@ export default function useStripeCheckout({ onOrderComplete }) {
 
     // Fetch service quote whenever location or cart contents change
     useEffect(() => {
-        if (checkoutOptions.pickup || !cart) {
+        if (!cart) {
             return;
         }
 
diff --git a/src/screens/OrderHistoryScreen.tsx b/src/screens/OrderHistoryScreen.tsx
index fdcdf15..19df173 100644
--- a/src/screens/OrderHistoryScreen.tsx
+++ b/src/screens/OrderHistoryScreen.tsx
@@ -23,6 +23,7 @@ const OrderHistoryScreen = () => {
     const navigation = useNavigation();
     const { customer } = useAuth();
     const [orders, setOrders] = useStorage(`${customer.id}_orders`, []);
+    const [refreshing, setRefreshing] = useState(false);
 
     const fetchOrders = async (params = {}) => {
         try {
@@ -34,6 +35,12 @@ const OrderHistoryScreen = () => {
         }
     };
 
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        await fetchOrders();
+        setRefreshing(false);
+    };
+
     const handleViewOrder = (order) => {
         navigation.navigate('Order', { order: order.serialize() });
     };
@@ -60,7 +67,7 @@ const OrderHistoryScreen = () => {
                                 </Text>
                             </YStack>
                             <YStack space='$2'>
-                                <XStack space='$3'>
+                                <XStack space='$3' justifyContent='flex-end'>
                                     <Text color='$textSecondary'>{formatCurrency(order.getAttribute('meta.total'), order.getAttribute('meta.currency'))}</Text>
                                     <FontAwesomeIcon icon={faChevronRight} size={14} color={theme['$textSecondary'].val} />
                                 </XStack>
@@ -74,6 +81,8 @@ const OrderHistoryScreen = () => {
                 ItemSeparatorComponent={() => <Separator borderBottomWidth={1} borderColor='$borderColorWithShadow' />}
                 showsHorizontalScrollIndicator={false}
                 showsVerticalScrollIndicator={false}
+                refreshing={refreshing}
+                onRefresh={handleRefresh}
             />
         </SafeAreaView>
     );
diff --git a/src/screens/OrderScreen.tsx b/src/screens/OrderScreen.tsx
index d39284a..2b12a30 100644
--- a/src/screens/OrderScreen.tsx
+++ b/src/screens/OrderScreen.tsx
@@ -40,10 +40,9 @@ const OrderScreen = ({ route }) => {
     }, [order]);
 
     const reloadOrder = useCallback(async () => {
-        console.log('[order]', order);
         try {
-            // const order = await order.reload();
-            // setOrder(order);
+            const reloadedOrder = await order.reload();
+            setOrder(reloadedOrder);
         } catch (err) {
             console.error('Error reloading order:', err);
         }
@@ -70,14 +69,21 @@ const OrderScreen = ({ route }) => {
     }, []);
 
     useEffect(() => {
-        if (!order || listenerRef.current) {
+        if (!order) {
+            return;
+        }
+
+        getDistanceMatrix();
+    }, [order]);
+
+    useEffect(() => {
+        if (listenerRef.current) {
             return;
         }
 
         const listenForUpdates = async () => {
             const listener = await listen(`order.${order.id}`, (event) => {
                 reloadOrder();
-                getDistanceMatrix();
             });
             if (listener) {
                 listenerRef.current = listener;
@@ -91,7 +97,7 @@ const OrderScreen = ({ route }) => {
                 listenerRef.current.stop();
             }
         };
-    }, [listen, order]);
+    }, [listen, order.id]);
 
     return (
         <YStack flex={1} bg='$background'>