feat(order-list): add order list component

apps/mobile/app/(app)/orders/[id].tsx → apps/mobile/app/(app)/orders/[id]/index.tsx

@@ -2,7 +2,7 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { format } from "date-fns";
 import { Link, useLocalSearchParams, useNavigation } from "expo-router";
 import { useEffect, useMemo, useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { Image, Text, TouchableOpacity, View } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import MapViewDirections from "react-native-maps-directions";
 
@@ -17,7 +17,7 @@ export default function OrderPage() {
   const { navigate } = useNavigation() as {
     navigate: (href: string, params?: any) => void;
   };
-  const { id } = useLocalSearchParams<"/(app)/orders/[id]">();
+  const { id } = useLocalSearchParams<"/(app)/orders/[id]/">();
 
   const [order, setOrder] = useState<Order | undefined>(undefined);
   useEffect(() => {
@@ -78,12 +78,18 @@ export default function OrderPage() {
           strokeColor="#008D5E"
         />
       </MapView>
-      <TouchableOpacity
-        onPress={() => navigate(`(app)`, { screen: "orders/index" })}
-        className="absolute left-0 flex items-center justify-center w-12 h-12 p-2 m-4 bg-black top-12"
-      >
-        <MaterialCommunityIcons name="arrow-left" size={24} color="white" />
-      </TouchableOpacity>
+      <View key="header" className="flex flex-row items-center justify-between w-full absolute left-0 p-2 -mt-px">
+        <TouchableOpacity
+          onPress={() => navigate(`(app)`, { screen: "orders/index" })}
+          className=" flex items-center justify-center w-10 h-10 p-2 m-4 bg-black top-12"
+        >
+          <MaterialCommunityIcons name="arrow-left" size={24} color="white" />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => {}} className=" flex items-center justify-center w-10 h-10 p-2 m-4 top-12">
+          <Image className="w-10 h-10  bg-white" source={require("@/assets/images/avatar.png")} />
+        </TouchableOpacity>
+      </View>
+
       <View className="absolute bottom-0 left-0 flex flex-col w-screen h-64 px-4 bg-black gap-y-6">
         {eta && (
           <Text className="text-xl font-bold text-white">{`Arrivée prévue à ${format(new Date(eta), "HH:mm")}`}</Text>

apps/mobile/app/(app)/orders/index.tsx

@@ -1,8 +1,8 @@
-import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from "expo-router";
-import { FlatList, TouchableOpacity, View } from "react-native";
+import { FlatList, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+import { OrderListItem } from "@/components/order/list/item";
 import { AppHeader } from "@/components/ui/header";
 import { orderList } from "@/constants/data";
 
@@ -12,28 +12,17 @@ export default function Orders() {
   };
   return (
     <View className="relative flex flex-col justify-between w-screen h-screen p-6 pb-16 bg-white">
-      <View className="absolute bottom-0 left-0 w-screen bg-black h-96" />
+      {/* <View className="absolute bottom-0 left-0 w-screen bg-black h-32" /> */}
       <SafeAreaView className="flex flex-col w-full h-full gap-4">
         <View className="w-full">
           <AppHeader />
         </View>
-        <View className="w-full">
+        <View className="w-full grow">
           <FlatList
             className="grow"
             data={orderList}
-            renderItem={({ item }) => (
-              <TouchableOpacity
-                onPress={() => {
-                  navigate(`(app)`, {
-                    screen: "orders/[id]",
-                    params: { id: item.id },
-                  });
-                }}
-                key={item.id}
-                className="relative flex flex-col w-full p-4 bg-white border border-black"
-              />
-            )}
-            ItemSeparatorComponent={() => <View className="h-2" />}
+            renderItem={({ item }) => <OrderListItem {...{ item, navigate }} />}
+            ItemSeparatorComponent={() => <View className="h-2 border-t border-gray-200 mt-2" />}
           />
         </View>
       </SafeAreaView>

apps/mobile/components/order/list/item.tsx

@@ -0,0 +1,76 @@
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import classNames from "classnames";
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+import { Text, TouchableOpacity, View } from "react-native";
+
+import { Status } from "@/types";
+import { Order } from "@/types/order";
+
+const ORDER_STATUS = {
+  [Status.PENDING]: "En attente",
+  [Status.FULFILLED]: "Livrée",
+  [Status.REJECTED]: "Annulée",
+  [Status.IN_PROGRESS]: "En cours",
+};
+
+export const OrderListItem = ({ item, navigate }: { item: Order; navigate: (href: string, params?: any) => void }) => {
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        navigate(`(app)`, {
+          screen: "orders/[id]/index",
+          params: { id: item.id },
+        });
+      }}
+      key={item.id}
+      className={classNames(
+        "relative flex flex-col w-full py-4 bg-white gap-y-2",
+        item.status === Status.FULFILLED && "opacity-50",
+      )}
+    >
+      {item.status !== Status.REJECTED && item.status !== Status.FULFILLED && (
+        <Text className="font-bold text-base">{`Livraison estimée : ${format(
+          new Date(item.delivery.eta),
+          "dd MMMM yyyy à HH:mm",
+          {
+            locale: fr,
+          },
+        )}`}</Text>
+      )}
+      {item.status === Status.REJECTED && <Text className="font-bold">Commande annulée</Text>}
+      {item.status === Status.FULFILLED && (
+        <Text className="font-bold">{`Livrée le ${format(new Date(item.updated_at), "dd MMMM yyyy à HH:mm", {
+          locale: fr,
+        })}`}</Text>
+      )}
+      <View className="flex flex-row space-x-2 justify-between">
+        <View className="flex flex-col grow gap-1">
+          <View className="flex flex-row items-center">
+            <MaterialCommunityIcons name="truck-delivery" size={16} color="black" />
+            <Text className="ml-2 text-sm font-medium text-black">{ORDER_STATUS[item.status]}</Text>
+          </View>
+          <View className="flex flex-row items-center">
+            <MaterialCommunityIcons name="calendar" size={16} color="black" />
+            <Text className="ml-2 text-sm font-medium text-black">
+              {format(new Date(item.created_at), "dd MMMM yyyy à HH:mm", {
+                locale: fr,
+              })}
+            </Text>
+          </View>
+        </View>
+        <View className="flex flex-col gap-1">
+          <View className="flex flex-row items-center justify-end">
+            <Text className="ml-2 text-sm font-extrabold text-black">{item.payment.total.toFixed(2)} €</Text>
+          </View>
+          <View className="flex flex-row items-center">
+            <MaterialCommunityIcons name="walk" size={16} color="black" />
+            <Text className="ml-2 text-sm font-medium text-black">
+              {item.delivery.person.first_name + " " + item.delivery.person.last_name}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

apps/mobile/components/ui/header.tsx

@@ -9,7 +9,7 @@ export const AppHeader = () => {
   return (
     <View key="header" className="flex flex-row items-center justify-between w-full ">
       <TouchableOpacity
-        className="flex items-center justify-center w-12 h-12 bg-white"
+        className="flex items-center justify-center w-10 h-10 bg-white"
         onPress={() => {
           // @ts-ignore
           navigation.openDrawer();