Merge branch 'dev' into feature/fix-commands-lists

floriaaan · Feb 9, 2024 · 1ee3000 · 1ee3000
2 parents 517512d + 2fb82d3
commit 1ee3000
Show file tree

Hide file tree

Showing 47 changed files with 1,091 additions and 861 deletions.
diff --git a/apps/web/app/(normal)/(home)/catalog/index.tsx b/apps/web/app/(normal)/(home)/catalog/index.tsx
@@ -27,12 +27,14 @@ export const Catalog = () => {
         <CatalogContext.Provider value={{ type, setType }}>
           <section className="grid auto-rows-max gap-4 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-3">
             <CatalogFilters />
-            {list.sort((a, b) =>
-            // if a is out of stock, it goes to the end
-            a.isOutOfStock === b.isOutOfStock ? 0 : a.isOutOfStock ? 1 : -1,
-          ).map((product) => (
-              <ProductCatalogListItem key={product.id} {...product} />
-            ))}
+            {list
+              .sort((a, b) =>
+                // if a is out of stock, it goes to the end
+                a.isOutOfStock === b.isOutOfStock ? 0 : a.isOutOfStock ? 1 : -1,
+              )
+              .map((product) => (
+                <ProductCatalogListItem key={product.id} {...product} />
+              ))}
             {list.length === 0 && (
               <div className="flex grow flex-col items-center justify-center gap-y-2 p-6 pb-12 sm:col-span-2 lg:col-span-3">
                 <MdClose className="h-8 w-8 shrink-0" />

diff --git a/apps/web/app/(normal)/(home)/pending-order-banner.tsx b/apps/web/app/(normal)/(home)/pending-order-banner.tsx
@@ -1,24 +1,26 @@
+/* eslint-disable @tanstack/query/exhaustive-deps */
 "use client";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { useAuth } from "@/hooks";
+import { fetchAPI } from "@/lib/fetchAPI";
 import { Status } from "@/types/global";
-import { MdDirectionsBike } from "react-icons/md";
-import { useQuery } from "@tanstack/react-query";
 import { Order } from "@/types/order";
-import { fetchAPI } from "@/lib/fetchAPI";
+import { useQuery } from "@tanstack/react-query";
+import { MdDirectionsBike } from "react-icons/md";
 
 export const PendingOrderBanner = () => {
   const { user, session } = useAuth();
-  if (!user) return null;
 
   const { data: order } = useQuery<Order>({
-    queryKey: ["order", "user", user.id],
+    queryKey: ["order", "user", user?.id],
     queryFn: async () => {
-      const res = await fetchAPI(`/api/order/by-user/${user.id}`, session?.token);
+      const res = await fetchAPI(`/api/order/by-user/${user?.id}`, session?.token);
       const orders = await res.json();
       return orders.ordersList.findLast((order: Order) => order.status === Status.PENDING);
     },
+    enabled: !!user && !!session?.token,
   });
+  if (!user) return null;
   if (!order) return null;
 
   // If last order is older than 7 days, don't show the banner

diff --git a/apps/web/app/(normal)/(home)/rating-banner.tsx b/apps/web/app/(normal)/(home)/rating-banner.tsx
@@ -1,23 +1,25 @@
 "use client";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { useAuth } from "@/hooks";
+import { fetchAPI } from "@/lib/fetchAPI";
 import { Status } from "@/types/global";
-import { MdRateReview } from "react-icons/md";
-import { useQuery } from "@tanstack/react-query";
 import { Order } from "@/types/order";
-import { fetchAPI } from "@/lib/fetchAPI";
+import { useQuery } from "@tanstack/react-query";
+import { MdRateReview } from "react-icons/md";
 export const RatingBanner = () => {
   const { user, session } = useAuth();
-  if (!user) return null;
 
   const { data: lastOrder } = useQuery<Order>({
-    queryKey: ["order", "user", user.id],
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: ["order", "user", user?.id],
     queryFn: async () => {
-      const res = await fetchAPI(`/api/order/by-user/${user.id}`, session?.token);
+      const res = await fetchAPI(`/api/order/by-user/${user?.id}`, session?.token);
       const orders = await res.json();
       return orders.ordersList.findLast((order: Order) => order.status === Status.FULFILLED);
     },
+    enabled: !!user && !!session?.token,
   });
+  if (!user) return null;
   if (!lastOrder) return null;
 
   // If last order is older than 7 days, don't show the banner

diff --git a/apps/web/app/(normal)/account/layout.tsx b/apps/web/app/(normal)/account/layout.tsx
@@ -1,10 +1,11 @@
 "use client";
+import { NotLogged } from "@/components/ui/not-logged";
 import { Sidebar } from "@/components/ui/user/sidebar";
 import { useAuth } from "@/hooks";
 
 export default function UserAccountLayout({ children }: { children: React.ReactNode }) {
   const { user } = useAuth();
-  if (!user) return "Not authenticated";
+  if (!user) return <NotLogged />;
 
   return (
     <>

diff --git a/apps/web/app/(normal)/account/orders/[id]/map.tsx b/apps/web/app/(normal)/account/orders/[id]/map.tsx
@@ -3,7 +3,6 @@ import { Bow, Map, Marker, OrderPin, RestaurantPin, UserPin } from "@/components
 import { LargeComponentLoader } from "@/components/ui/loader/large-component";
 import { useLocation } from "@/hooks";
 import { DeliveryType, Order } from "@/types/order";
-import { Delivery } from "@/types/delivery";
 
 export const OrderStatusMap = (order: Order) => {
   const delivery_person = order.delivery.deliveryPerson;

diff --git a/apps/web/app/(normal)/account/page.tsx b/apps/web/app/(normal)/account/page.tsx
@@ -4,11 +4,12 @@ import { BecomeDeliveryPersonButton } from "@/app/(normal)/account/become-delive
 import { ChangePasswordForm } from "@/app/(normal)/account/change-password-form";
 import { Infos } from "@/app/(normal)/account/infos";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { NotLogged } from "@/components/ui/not-logged";
 import { useAuth } from "@/hooks";
 
 export default function UserAccount() {
   const { user } = useAuth();
-  if (!user) return "Unauthenticated";
+  if (!user) return <NotLogged />;
   return (
     <>
       <div className="flex flex-col gap-4 bg-neutral-100 p-4 pt-6 lg:p-8">

diff --git a/apps/web/app/(normal)/checkout/callback/[id]/page.tsx b/apps/web/app/(normal)/checkout/callback/[id]/page.tsx
@@ -1,32 +1,32 @@
 "use client";
 
-import { MdArrowBack, MdArrowForward, MdDirectionsWalk, MdShoppingBasket } from "react-icons/md";
+import { OrderStatusMap } from "@/app/(normal)/account/orders/[id]/map";
+import { CheckoutReceipt } from "@/app/(normal)/checkout/receipt";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { LargeComponentLoader } from "@/components/ui/loader/large-component";
+import { NotLogged } from "@/components/ui/not-logged";
 import { useAuth, useBasket } from "@/hooks";
-import Link from "next/link";
-import { useQuery } from "@tanstack/react-query";
 import { fetchAPI } from "@/lib/fetchAPI";
-import { PaymentStatus } from "@/types/payment";
 import { Order } from "@/types/order";
+import { PaymentStatus } from "@/types/payment";
+import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { CheckoutReceipt } from "@/app/(normal)/checkout/receipt";
-import { OrderStatusMap } from "@/app/(normal)/account/orders/[id]/map";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { LargeComponentLoader } from "@/components/ui/loader/large-component";
-import React from "react";
-import { Button } from "@/components/ui/button";
+import { MdArrowBack, MdArrowForward, MdDirectionsWalk, MdShoppingBasket } from "react-icons/md";
 
 type PageProps = { params: { id: string } };
 export default function CheckoutCallbackPage({ params }: PageProps) {
   const { push } = useRouter();
   const paymentId = decodeURIComponent(params.id);
 
   const { user, session } = useAuth();
-
   const { isAuthenticated } = useBasket();
 
   const { data: order } = useQuery<Order>({
-    queryKey: ["Order", "PaymentId", paymentId],
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: ["order", "payment", paymentId],
     queryFn: async () => {
       const res = await fetchAPI(`/api/order/by-payment/${paymentId}`, session?.token);
       return await res.json();
@@ -40,12 +40,13 @@ export default function CheckoutCallbackPage({ params }: PageProps) {
       });
       push("/"); // Redirect to home
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.log(e);
       return;
     }
   };
 
-  if (!(isAuthenticated && user && session?.token)) return;
+  if (!(isAuthenticated && user && session?.token)) return <NotLogged />;
   return (
     <>
       <div className="flex h-full grow p-4 pb-12">

diff --git a/apps/web/app/(normal)/checkout/page.tsx b/apps/web/app/(normal)/checkout/page.tsx
@@ -11,13 +11,15 @@ import { useState } from "react";
 import { MdCheck, MdLock, MdRestaurant, MdShoppingBasket } from "react-icons/md";
 
 import { CheckoutReceipt } from "@/app/(normal)/checkout/receipt";
-import { LargeComponentLoader } from "@/components/ui/loader/large-component";
 import { orderList } from "@/constants/data";
 import { EmbeddedCheckout, EmbeddedCheckoutProvider } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
 import { TiLocationArrow } from "react-icons/ti";
 
+import { LargeComponentLoader } from "@/components/ui/loader/large-component";
+import { NotFoundResource } from "@/components/ui/not-found-resource";
+import { NotLogged } from "@/components/ui/not-logged";
 import { useAuth, useBasket, useLocation } from "@/hooks";
 import { fetchAPI } from "@/lib/fetchAPI";
 import { Payment } from "@/types/payment";
@@ -33,23 +35,24 @@ type PageProps = { params: { id: string } };
 export default function CheckoutPage({}: PageProps) {
   // decode url encoded params.id
   const { user, session } = useAuth();
-
   const { restaurants } = useLocation();
-
   const { isAuthenticated, isBasketEmpty, isRestaurantSelected, selectedRestaurant } = useBasket();
 
   const [deliveryType, setDeliveryType] = useState(DeliveryType.DELIVERY.toString());
 
   const [delivery_isModalOpen, setDelivery_isModalOpen] = useState(false);
   const [delivery_checkoutSessionSecret, setDelivery_checkoutSessionSecret] = useState("");
-
   const [takeaway_isModalOpen, setTakeaway_isModalOpen] = useState(false);
 
   // TODO: implement takeway order creation
-  const [hasCreatedOrder, setHasCreatedOrder] = useState(false);
-  const [order, setOrder] = useState<Order | null>(orderList[0]); // TODO: replace with real order
+  // const [hasCreatedOrder, setHasCreatedOrder] = useState(false);
+  const [
+    order,
+    // setOrder
+  ] = useState<Order | null>(orderList[0]); // TODO: replace with real order
 
-  const { data: payment } = useQuery<{ Payment: Payment; clientSecret: string }>({
+  useQuery<{ Payment: Payment; clientSecret: string }>({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: ["payment", "stripe"],
     queryFn: async () => {
       const res = await fetchAPI(`/api/payment/stripe`, session?.token, {
@@ -64,8 +67,8 @@ export default function CheckoutPage({}: PageProps) {
     },
   });
 
-  if (!user) return null;
-  if (!selectedRestaurant) return null;
+  if (!user) return <NotLogged />;
+  if (!selectedRestaurant) return <NotFoundResource reason="Aucun restaurant sélectionné" />;
 
   return (
     <div className="flex h-full grow p-4 pb-12">
@@ -75,7 +78,7 @@ export default function CheckoutPage({}: PageProps) {
             <h2 className="text-xl font-semibold">Paiement</h2>
             <small>Sélectionnez votre mode de paiement</small>
             <RadioGroup
-              disabled={hasCreatedOrder}
+              // disabled={hasCreatedOrder}
               onValueChange={setDeliveryType}
               defaultValue={DeliveryType.DELIVERY.toString()}
             >
@@ -118,7 +121,13 @@ export default function CheckoutPage({}: PageProps) {
                     <MdShoppingBasket className="h-4 w-4 shrink-0" />
                     Payer
                   </Button>
-                  <Dialog onOpenChange={setDelivery_isModalOpen} open={delivery_isModalOpen || hasCreatedOrder}>
+                  <Dialog
+                    onOpenChange={setDelivery_isModalOpen}
+                    open={
+                      delivery_isModalOpen
+                      //  || hasCreatedOrder
+                    }
+                  >
                     <DialogContent className="flex aspect-video max-h-screen w-screen items-center justify-center p-0">
                       <div id="checkout" className="w-full">
                         {delivery_checkoutSessionSecret ? (
@@ -154,7 +163,13 @@ export default function CheckoutPage({}: PageProps) {
                     <MdCheck className="h-4 w-4 shrink-0" />
                     Finaliser et payer sur place
                   </Button>
-                  <Dialog onOpenChange={setTakeaway_isModalOpen} open={takeaway_isModalOpen || hasCreatedOrder}>
+                  <Dialog
+                    onOpenChange={setTakeaway_isModalOpen}
+                    open={
+                      takeaway_isModalOpen
+                      //  || hasCreatedOrder
+                    }
+                  >
                     <DialogContent className="grid aspect-video h-auto max-w-4xl justify-center gap-2 md:grid-cols-2">
                       {order &&
                         (() => {

diff --git a/apps/web/app/(normal)/checkout/recap.tsx b/apps/web/app/(normal)/checkout/recap.tsx
@@ -10,7 +10,7 @@ export const CheckoutRecap = ({ deliveryType, address }: { deliveryType: string;
   const { total, eta, basket, products } = useBasket();
   const { street, city, zipcode } = address || {};
 
-  const address_displayed = `${street}, ${zipcode} ${city}`;
+  const address_displayed = `${street}, ${zipcode || ""} ${city || ""}`;
 
   return (
     <div id="SidebarRoot" className="flex w-full flex-col justify-end gap-1 border border-solid border-gray-100">

diff --git a/apps/web/app/(normal)/checkout/receipt.tsx b/apps/web/app/(normal)/checkout/receipt.tsx
@@ -1,11 +1,11 @@
 import { fetchAPI } from "@/lib/fetchAPI";
 import { toPrice } from "@/lib/product/toPrice";
 import { BasketSnapshot, DeliveryType, Order } from "@/types/order";
+import { Product } from "@/types/product";
 import { Restaurant } from "@/types/restaurant";
+import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import fr from "date-fns/locale/fr";
-import { useQuery } from "@tanstack/react-query";
-import { Product } from "@/types/product";
 import { useEffect, useState } from "react";
 
 export const CheckoutReceipt = (order: Order) => {
@@ -19,6 +19,12 @@ export const CheckoutReceipt = (order: Order) => {
     },
   });
 
+  const getProduct = async (id: string): Promise<Product> => {
+    const res = await fetchAPI(`/api/product/${id}`, undefined);
+    return await res.json();
+  };
+
+  const basket: BasketSnapshot = JSON.parse(order.basketSnapshot.string);
   useEffect(() => {
     (async () => {
       const productsList = await Promise.all(
@@ -29,16 +35,9 @@ export const CheckoutReceipt = (order: Order) => {
       );
       setProductList(productsList);
     })();
-  }, []);
-
-  const getProduct = async (id: string): Promise<Product> => {
-    const res = await fetchAPI(`/api/product/${id}`, undefined);
-    return await res.json();
-  };
+  }, [basket.productsList]);
 
   if (!restaurant) return null;
-  const basket: BasketSnapshot = JSON.parse(order.basketSnapshot.string);
-
   return (
     <div className="flex w-96 flex-col bg-[url(/images/wrinkled-paper.jpg)] bg-center p-5 font-mono text-sm uppercase">
       <h2 className="my-5 bg-black bg-opacity-70 p-2 text-center text-5xl font-bold tracking-tighter text-white">

diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { Sidebar } from "@/components/admin/sidebar";
+import { NotAuthorized } from "@/components/ui/not-authorized";
 import { useAuth } from "@/hooks";
 import { AdminProvider } from "@/hooks/useAdmin";
 import { ReactNode } from "react";
 
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const { user } = useAuth();
-  if (!user) return "Unauthorized";
-  if (user.role.code !== "MANAGER" && user.role.code !== "ADMIN") return "Unauthorized";
+  if (!user) return <NotAuthorized />;
+  if (user.role.code !== "MANAGER" && user.role.code !== "ADMIN") return <NotAuthorized />;
 
   return (
     <AdminProvider>

diff --git a/apps/web/app/admin/page.tsx b/apps/web/app/admin/page.tsx
@@ -7,17 +7,17 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { orders_columns } from "@/components/admin/order/columns";
 import { products_columns } from "@/components/admin/product/columns";
+import { ProductCreateSheet, ProductRefreshSheet } from "@/components/admin/product/sheet";
 import { promotions_columns } from "@/components/admin/promotion/columns";
 import { PromotionCreateSheet, PromotionRefreshSheet } from "@/components/admin/promotion/sheet";
 import { restaurants_columns } from "@/components/admin/restaurant/columns";
+import { RestaurantCreateSheet, RestaurantRefreshSheet } from "@/components/admin/restaurant/sheet";
 import { users_columns } from "@/components/admin/user/columns";
 import { UserCreateSheet } from "@/components/admin/user/sheet";
 import { LargeComponentLoader } from "@/components/ui/loader/large-component";
 import { useAdmin } from "@/hooks/useAdmin";
 import { useEffect, useRef, useState } from "react";
 import { Marker, Popup } from "react-map-gl";
-import { RestaurantCreateSheet, RestaurantRefreshSheet } from "@/components/admin/restaurant/sheet";
-import { ProductCreateSheet, ProductRefreshSheet } from "@/components/admin/product/sheet";
 
 export default function AdminHome() {
   const { restaurant, selectRestaurant, restaurant_users, restaurants, extendedProducts, promotions, orders } =
@@ -49,13 +49,13 @@ export default function AdminHome() {
               }}
               mapRef={mapRef}
             >
-              {/*{orders*/}
-              {/*  .map((o) => o.delivery.person.location)*/}
-              {/*  .map((o, i) => (*/}
-              {/*    <Marker key={i} latitude={o[0]} longitude={o[1]}>*/}
-              {/*      <OrderPin />*/}
-              {/*    </Marker>*/}
-              {/*  ))}*/}
+              {orders
+                .map((o) => o.delivery.address)
+                .map((o, i) => (
+                  <Marker key={i} latitude={o.lat} longitude={o.lng}>
+                    <OrderPin />
+                  </Marker>
+                ))}
               {restaurants.map((r) => (
                 <Marker
                   key={r.id}