Merge branch 'main' into fix/order-success-final-step

webapp/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [0.69.1](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.69.0...v0.69.1) (2024-11-19)
+
+
+### Bug Fixes
+
+* change get of id query params from getServerSideProps to client side ([20309ed](https://github.com/SocialGouv/carte-jeune-engage/commit/20309edb6ff699c62ce101c0b9bb7a8129d233c9))
+
 # [0.69.0](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.68.2...v0.69.0) (2024-11-19)
 
 ### Features

webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webapp",
-  "version": "0.69.0",
+  "version": "0.69.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

webapp/src/pages/dashboard/offer/cje/[id]/index.tsx

@@ -10,29 +10,32 @@ import { motion, AnimatePresence } from "framer-motion";
 import OfferContent from "~/components/offer/page/OfferContent";
 import CouponContent from "~/components/offer/page/CouponContent";
 import { isIOS } from "~/utils/tools";
-import { GetServerSideProps } from "next";
 
 const flipVariants = {
   hidden: { rotateY: 90 },
   visible: { rotateY: 0 },
   exit: { rotateY: -90 },
 };
 
-type OfferCjePageProps = {
-  offer_id: string;
-};
-
-export default function OfferCjePage({ offer_id }: OfferCjePageProps) {
+export default function OfferCjePage() {
   const router = useRouter();
 
+  const { id: offer_id } = router.query as { id: string };
+
   const { data: resultOffer, isLoading: isLoadingOffer } =
-    api.offer.getById.useQuery({ id: parseInt(offer_id), source: "cje" });
+    api.offer.getById.useQuery(
+      { id: parseInt(offer_id), source: "cje" },
+      { enabled: !!offer_id }
+    );
 
   const {
     data: resultCoupon,
     isLoading: isLoadingCoupon,
     refetch: refetchCoupon,
-  } = api.coupon.getOne.useQuery({ offer_id: parseInt(offer_id) });
+  } = api.coupon.getOne.useQuery(
+    { offer_id: parseInt(offer_id) },
+    { enabled: !!offer_id }
+  );
 
   const { data: offer } = resultOffer || {};
   const { data: coupon } = resultCoupon || {};
@@ -126,8 +129,8 @@ export default function OfferCjePage({ offer_id }: OfferCjePageProps) {
       await increaseNbSeen({ offer_id: parseInt(offer_id) });
     };
 
-    mutateData();
-  }, []);
+    if (!!offer_id) mutateData();
+  }, [offer_id]);
 
   useEffect(() => {
     if (
@@ -228,24 +231,3 @@ export default function OfferCjePage({ offer_id }: OfferCjePageProps) {
     </OfferHeaderWrapper>
   );
 }
-
-export const getServerSideProps: GetServerSideProps = async ({
-  query,
-  params,
-}) => {
-  const offer_id = query.id || params?.id || null;
-
-  if (!offer_id || Array.isArray(offer_id)) {
-    console.error("Invalid offer_id in getServerSideProps:", { query, params });
-    return {
-      redirect: {
-        destination: "/dashboard",
-        permanent: false,
-      },
-    };
-  }
-
-  return {
-    props: { offer_id },
-  };
-};

webapp/src/pages/dashboard/offer/obiz/[id]/index.tsx

@@ -11,10 +11,9 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
-import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { BarcodeIcon } from "~/components/icons/barcode";
 import LoadingLoader from "~/components/LoadingLoader";
 import ObizOrderProcessModal from "~/components/modals/ObizOrderProcessModal";
@@ -27,13 +26,11 @@ import { getItemsTermsOfUse } from "~/payload/components/CustomSelectTermsOfUse"
 import { api } from "~/utils/api";
 import { cleanHtml } from "~/utils/tools";
 
-type OfferObizPageProps = {
-  offer_id: string;
-};
-
-export default function OfferObizPage({ offer_id }: OfferObizPageProps) {
+export default function OfferObizPage() {
   const router = useRouter();
 
+  const { id: offer_id } = router.query as { id: string };
+
   const {
     isOpen: isOpenOrderProcessModal,
     onOpen: onOpenOrderProcessModal,
@@ -46,7 +43,10 @@ export default function OfferObizPage({ offer_id }: OfferObizPageProps) {
     api.offer.increaseNbSeen.useMutation();
 
   const { data: resultOffer, isLoading: isLoadingOffer } =
-    api.offer.getById.useQuery({ id: parseInt(offer_id), source: "obiz" });
+    api.offer.getById.useQuery(
+      { id: parseInt(offer_id), source: "obiz" },
+      { enabled: !!offer_id }
+    );
 
   const { data: offer } = resultOffer || {};
 
@@ -80,8 +80,8 @@ export default function OfferObizPage({ offer_id }: OfferObizPageProps) {
       await increaseNbSeen({ offer_id: parseInt(offer_id) });
     };
 
-    mutateData();
-  }, []);
+    if (!!offer_id) mutateData();
+  }, [offer_id]);
 
   if (isLoadingOffer || !router.isReady) {
     return (
@@ -277,24 +277,3 @@ export default function OfferObizPage({ offer_id }: OfferObizPageProps) {
     </>
   );
 }
-
-export const getServerSideProps: GetServerSideProps = async ({
-  query,
-  params,
-}) => {
-  const offer_id = query.id || params?.id || null;
-
-  if (!offer_id || Array.isArray(offer_id)) {
-    console.error("Invalid offer_id in getServerSideProps:", { query, params });
-    return {
-      redirect: {
-        destination: "/dashboard",
-        permanent: false,
-      },
-    };
-  }
-
-  return {
-    props: { offer_id },
-  };
-};