feat: history page - handle new order schema

webapp/src/pages/dashboard/account/history.tsx

@@ -1,3 +1,4 @@
+import { ChevronLeftIcon } from "@chakra-ui/icons";
 import {
   Box,
   Center,
@@ -8,15 +9,16 @@ import {
   IconButton,
   Text,
 } from "@chakra-ui/react";
+import { TinyColor } from "@ctrl/tinycolor";
+import Image from "next/image";
 import { useRouter } from "next/router";
-import { useAuth } from "~/providers/Auth";
-import LoadingLoader from "~/components/LoadingLoader";
 import { HiMiniCheckCircle, HiMiniClock } from "react-icons/hi2";
-import { api } from "~/utils/api";
+import LoadingLoader from "~/components/LoadingLoader";
+import { useAuth } from "~/providers/Auth";
+import { OrderIncluded } from "~/server/api/routers/order";
+import { CouponExtanded } from "~/server/api/routers/saving";
 import { UserIncluded } from "~/server/api/routers/user";
-import Image from "next/image";
-import { ChevronLeftIcon } from "@chakra-ui/icons";
-import { TinyColor } from "@ctrl/tinycolor";
+import { api } from "~/utils/api";
 
 const UserSavingsNoData = () => {
   return (
@@ -37,16 +39,34 @@ export default function AccountHistory() {
       { userId: (user as UserIncluded)?.id },
       { enabled: !!user?.id }
     );
+  const { data: resultUserOrders, isLoading: isLoadingUserOrders } =
+    api.order.getList.useQuery({
+      status: "delivered",
+    });
 
   const { data: userSavings } = resultUserSavings || {};
+  const { data: userOrders } = resultUserOrders || {};
 
-  if (!user || isLoadingUserSavings || !userSavings)
+  if (
+    !user ||
+    isLoadingUserSavings ||
+    !userSavings ||
+    isLoadingUserOrders ||
+    !userOrders
+  )
     return (
       <Center h="full" w="full">
         <LoadingLoader />
       </Center>
     );
 
+  const history: (CouponExtanded | OrderIncluded)[] = [
+    ...userSavings,
+    ...userOrders,
+  ].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  );
+
   return (
     <Box pt={12} pb={36} px={8}>
       <IconButton
@@ -65,20 +85,21 @@ export default function AccountHistory() {
       <Heading as="h2" size="xl" fontWeight={800} mt={6}>
         Historique de mes réductions
       </Heading>
-      {userSavings.length > 0 ? (
+      {history.length > 0 ? (
         <Flex flexDir="column" mt={8}>
-          {userSavings.map((userSaving, index) => {
+          {history.map((userHistoryItem, index) => {
             const currentDate = new Date();
             const currentCouponUsedAt = new Date(
-              (userSaving.usedAt
-                ? userSaving.usedAt
-                : userSaving.offer.validityTo) as string
+              ("usedAt" in userHistoryItem
+                ? userHistoryItem.usedAt
+                : userHistoryItem.createdAt) as string
             );
-            const previousCouponUsedAt = userSavings[index - 1]
+            const previousCoupon = history[index - 1];
+            const previousCouponUsedAt = previousCoupon
               ? new Date(
-                  (userSavings[index - 1]?.usedAt
-                    ? userSavings[index - 1].usedAt
-                    : userSavings[index - 1]?.offer.validityTo) as string
+                  ("usedAt" in previousCoupon && previousCoupon.usedAt
+                    ? previousCoupon.usedAt
+                    : previousCoupon.createdAt) as string
                 )
               : new Date();
 
@@ -87,7 +108,7 @@ export default function AccountHistory() {
             });
 
             const darkenPartnerColor = new TinyColor(
-              userSaving.offer.partner.color
+              userHistoryItem.offer.partner.color
             )
               .darken(10)
               .toHexString();
@@ -120,7 +141,7 @@ export default function AccountHistory() {
                   </Text>
                 )}
                 <Flex
-                  key={userSaving.id}
+                  key={userHistoryItem.id}
                   alignItems="center"
                   justifyContent="space-between"
                   mt={4}
@@ -133,22 +154,33 @@ export default function AccountHistory() {
                       p={1.5}
                     >
                       <Image
-                        src={userSaving.offer.partner.icon.url as string}
-                        alt={userSaving.offer.partner.icon.alt as string}
+                        src={userHistoryItem.offer.partner.icon.url as string}
+                        alt={userHistoryItem.offer.partner.icon.alt as string}
                         width={36}
                         height={36}
                         style={{ borderRadius: "8px" }}
                       />
                     </Box>
                     <Flex flexDir="column" justifyContent="start" w="full">
                       <Text fontSize={14} fontWeight={500}>
-                        {userSaving.offer.partner.name}
+                        {userHistoryItem.offer.partner.name}
                       </Text>
                       <Text fontSize={12} fontWeight={500} noOfLines={1}>
-                        {userSaving.offer.title}
+                        {userHistoryItem.offer.title}
                       </Text>
                       <Box mt={1}>
-                        {userSaving.used ? (
+                        {"used" in userHistoryItem && !userHistoryItem.used ? (
+                          <Flex alignItems="center" color="disabled" gap={0.5}>
+                            <Icon as={HiMiniClock} w={3} h={3} />
+                            <Text fontWeight={500} fontSize={12}>
+                              Fin{" "}
+                              {currentCouponUsedAt.toLocaleDateString("fr-FR", {
+                                day: "2-digit",
+                                month: "2-digit",
+                              })}
+                            </Text>
+                          </Flex>
+                        ) : (
                           <Flex
                             alignItems="center"
                             fontSize={12}
@@ -168,17 +200,6 @@ export default function AccountHistory() {
                             />
                             Déjà utilisée
                           </Flex>
-                        ) : (
-                          <Flex alignItems="center" color="disabled" gap={0.5}>
-                            <Icon as={HiMiniClock} w={3} h={3} />
-                            <Text fontWeight={500} fontSize={12}>
-                              Fin{" "}
-                              {currentCouponUsedAt.toLocaleDateString("fr-FR", {
-                                day: "2-digit",
-                                month: "2-digit",
-                              })}
-                            </Text>
-                          </Flex>
                         )}
                       </Box>
                     </Flex>

webapp/src/pages/dashboard/wallet/index.tsx

@@ -34,7 +34,7 @@ export default function Wallet() {
   const { data: resultUserCoupons, isLoading: isLoadingUserCoupons } =
     api.coupon.getList.useQuery();
   const { data: resultUserOrders, isLoading: isLoadingUserOrders } =
-    api.order.getList.useQuery();
+    api.order.getList.useQuery({});
 
   const { data: currentUserCoupons } = resultUserCoupons || { data: [] };
   const { data: currentUserOrders } = resultUserOrders || { data: [] };

webapp/src/server/api/routers/order.ts

@@ -7,6 +7,7 @@ import { createOrderPayload, insertItemPayload } from "~/utils/obiz";
 import { payloadWhereOfferIsValid } from "~/utils/tools";
 import fs from "fs/promises";
 import os from "os";
+import { Where } from "payload/types";
 
 export interface OrderIncluded extends Order {
   offer: Offer & { partner: Partner & { icon: Media } } & { image: Media };
@@ -266,23 +267,41 @@ export const orderRouter = createTRPCRouter({
       }
     }),
 
-  getList: userProtectedProcedure.query(async ({ ctx }) => {
-    const orders = await ctx.payload.find({
-      collection: "orders",
-      depth: 3,
-      where: {
-        and: [
-          { user: { equals: ctx.session.id } },
-          { status: { not_in: ["awaiting_payment", "archived"] } },
-          {
-            ...payloadWhereOfferIsValid("offer"),
-          },
-        ],
-      },
-    });
+  getList: userProtectedProcedure
+    .input(
+      z.object({
+        status: z.enum(["delivered"]).optional(),
+      })
+    )
+    .query(async ({ ctx, input }) => {
+      const { status } = input;
+
+      let statusQuery: Where = {
+        status: { not_in: ["awaiting_payment", "archived"] },
+      };
 
-    return { data: orders.docs as OrderIncluded[] };
-  }),
+      if (status) {
+        statusQuery = {
+          status: { equals: status },
+        };
+      }
+
+      const orders = await ctx.payload.find({
+        collection: "orders",
+        depth: 3,
+        where: {
+          and: [
+            { user: { equals: ctx.session.id } },
+            { ...statusQuery },
+            {
+              ...payloadWhereOfferIsValid("offer"),
+            },
+          ],
+        },
+      });
+
+      return { data: orders.docs as OrderIncluded[] };
+    }),
 
   getById: userProtectedProcedure
     .input(

webapp/src/server/api/routers/saving.ts

@@ -26,10 +26,8 @@ export const savingRouter = createTRPCRouter({
           user: {
             equals: userId,
           },
-          ["offer.validityTo"]: {
-            less_than: new Date(new Date().setHours(23, 59, 59)).toISOString(),
-          },
         },
+        limit: 1000,
         sort: "-usedAt",
       });