Merge pull request #149 from SocialGouv/fix/order-success-final-step

fix: add order success final step with cta to wallet

webapp/CHANGELOG.md

@@ -1,9 +1,8 @@
 ## [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))
+- 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)
 

webapp/src/pages/dashboard/order/[id]/success.tsx

@@ -1,10 +1,13 @@
+import { Button, Flex, Heading, Icon, Slide, Text } from "@chakra-ui/react";
 import _ from "lodash";
 import { GetServerSideProps } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
+import { HiMiniClock, HiMiniEnvelope } from "react-icons/hi2";
 import LayoutOrderStatus, {
   LayoutOrderStatusProps,
 } from "~/components/obiz/LayoutOrderStatus";
+import Image from "~/components/ui/Image";
 import { useAuth } from "~/providers/Auth";
 import { api } from "~/utils/api";
 
@@ -18,28 +21,15 @@ type Step = {
 };
 
 export const OrderSuccess = ({ order_id }: OrderSuccessProps) => {
-  const utils = api.useUtils();
   const { user } = useAuth();
   const router = useRouter();
 
-  const [stepInterval, setStepInterval] = useState<NodeJS.Timeout>();
   const [currentStep, setCurrentStep] = useState<Step>({
     subtitle: "Validation du paiement...",
     status: "loading",
   });
 
   const { mutate } = api.order.synchronizeOrder.useMutation({
-    onSuccess: ({ data }) => {
-      if (data.ticket) {
-        clearInterval(stepInterval);
-        utils.order.getById.invalidate({ id: parseInt(order_id) });
-        setCurrentStep({
-          status: "success",
-          subtitle: "Tout est bon",
-        });
-        setTimeout(() => router.push(`/dashboard/order/${order_id}`), 1000);
-      }
-    },
     onError: (error) => {
       switch (error.data?.code) {
         case "FORBIDDEN":
@@ -57,6 +47,9 @@ export const OrderSuccess = ({ order_id }: OrderSuccessProps) => {
       {
         subtitle: "Création des bons d'achat...",
       },
+      {
+        status: "success",
+      },
     ];
 
     let currentStepIndex = 0;
@@ -67,24 +60,75 @@ export const OrderSuccess = ({ order_id }: OrderSuccessProps) => {
         currentStepIndex++;
       } else {
         clearInterval(interval);
-        router.push(`/dashboard/order/${order_id}`);
       }
     }, 2000);
 
-    setStepInterval(interval);
-
     return () => clearInterval(interval);
   }, []);
 
   if (!user) return;
 
+  if (currentStep.status === "success") {
+    return (
+      <Slide
+        direction="bottom"
+        in={currentStep.status === "success"}
+        style={{ zIndex: 10, height: "100%" }}
+      >
+        <Flex
+          flexDir="column"
+          h="full"
+          bgColor="#1489FB"
+          color="white"
+          px={8}
+          pb={20}
+        >
+          <Heading
+            size="lg"
+            fontWeight={800}
+            mt="auto"
+            lineHeight="normal"
+            mb={8}
+            textAlign="center"
+          >
+            Vos bons d'achat arrivent toujours ici
+          </Heading>
+          <Image
+            width={326}
+            height={265}
+            src="/images/dashboard/portefeuille-obiz-mvp.gif"
+            alt="Portefeuille Obiz"
+          />
+          <Flex mt={8}>
+            <Icon as={HiMiniClock} w={5} h={5} mr={4} mt={0.5} />
+            <Text fontWeight={500} lineHeight="normal">
+              Les bons mettent quelques minutes à arriver et parfois jusqu’à 24h
+            </Text>
+          </Flex>
+          <Flex mt={6}>
+            <Icon as={HiMiniEnvelope} w={5} h={5} mr={4} mt={0.5} />
+            <Text fontWeight={500} lineHeight="normal">
+              On vous envoie un mail dès que vos bons d’achat sont prêts
+            </Text>
+          </Flex>
+          <Button
+            mt={6}
+            colorScheme="whiteBtn"
+            color="black"
+            fontWeight={800}
+            fontSize={14}
+            onClick={() => router.push("/dashboard/wallet")}
+          >
+            Voir mon portefeuille
+          </Button>
+        </Flex>
+      </Slide>
+    );
+  }
+
   return (
     <LayoutOrderStatus
-      title={
-        currentStep.status === "success"
-          ? "C'est prêt !"
-          : `Nous générons vos bons d'achat ${_.capitalize(user?.firstName ?? "")}`
-      }
+      title={`Nous générons vos bons d'achat ${_.capitalize(user?.firstName ?? "")}`}
       {...currentStep}
     />
   );