add failure case final page

src/components/ui/FinalPage/FailureComponent.tsx

@@ -0,0 +1,45 @@
+import { List, ListItem, Typography } from "@mui/material";
+import { Container } from "@mui/system";
+import Image from "next/image";
+
+interface IFailureComponent {
+  missingCartTitles: string[];
+}
+
+const FailureComponent: React.FC<IFailureComponent> = ({
+  missingCartTitles,
+}) => {
+  return (
+    <Container>
+      <Image src={require("/public/icons/smiley-sad.svg")} alt="" />
+      <Typography
+        fontSize={60}
+        sx={{
+          color: "primary.main",
+          marginTop: "20px",
+        }}
+      >
+        Dommage,
+      </Typography>
+      <Typography
+        style={{
+          fontFamily: "fontFamily",
+          fontSize: "20px",
+          color: "primary.main",
+          marginBottom: "5px",
+        }}
+      >
+        Tu as oublié d&apos;ajouter les ingrédients suivants à ton panier :
+        <List sx={{ listStyleType: "disc" }}>
+          {missingCartTitles.map((title) => (
+            <ListItem sx={{ display: "list-item" }} key={title}>
+              {title}
+            </ListItem>
+          ))}
+        </List>
+      </Typography>
+    </Container>
+  );
+};
+
+export default FailureComponent;

src/components/ui/FinalPage/SucessComponent.tsx

@@ -0,0 +1,30 @@
+import { Typography } from "@mui/material";
+import { Container } from "@mui/system";
+import Image from "next/image";
+
+const SuccessComponent = (
+  <Container>
+    <Image src={require("public/icons/congrats.svg")} alt="" />
+    <Typography
+      fontSize={60}
+      sx={{
+        color: "primary.main",
+        marginTop: "50px",
+      }}
+    >
+      Félicitations,
+    </Typography>
+    <Typography
+      style={{
+        fontFamily: "fontFamily",
+        fontSize: "30px",
+        color: "primary.main",
+        marginBottom: "5vh",
+      }}
+    >
+      tu as réussi à commander les ingrédients pour réaliser ta tarte aux pommes
+    </Typography>
+  </Container>
+);
+
+export default SuccessComponent;

src/pages/final.tsx

@@ -1,12 +1,28 @@
-import { Typography } from "@mui/material";
 import { Container } from "@mui/system";
+import { useAtom } from "jotai";
 import type { NextPage } from "next";
-import Image from "next/image";
 
 import AppLink from "src/components/ui/Buttons/AppLink";
+import FailureComponent from "src/components/ui/FinalPage/FailureComponent";
+import SuccessComponent from "src/components/ui/FinalPage/SucessComponent";
 import PageTextTemplate from "src/components/ui/PageTextTemplate/PageTextTemplate";
+import { cartAtom } from "src/store/cart";
 
 const FinalPage: NextPage = () => {
+  const [cart] = useAtom(cartAtom);
+  const expectedCartTitles = ["Pomme", "Oeuf", "Farine de blé"];
+  const missingCartTitles = [];
+  for (const expectedCartTitle of expectedCartTitles) {
+    if (
+      !Object.values(cart).find(
+        (cartItem) => cartItem.product.title === expectedCartTitle
+      )
+    ) {
+      missingCartTitles.push(expectedCartTitle);
+    }
+  }
+
+  const isCartValid = missingCartTitles.length == 0;
   const content = (
     <Container
       sx={{
@@ -17,30 +33,7 @@ const FinalPage: NextPage = () => {
         flexDirection: "column",
       }}
     >
-      <Image
-        src={require("public/product_assets/images/congrats.svg")}
-        alt=""
-      />
-      <Typography
-        fontSize={60}
-        sx={{
-          color: "primary.main",
-          marginTop: "50px",
-        }}
-      >
-        Félicitations,
-      </Typography>
-      <Typography
-        style={{
-          fontFamily: "fontFamily",
-          fontSize: "30px",
-          color: "primary.main",
-          marginBottom: "5vh",
-        }}
-      >
-        tu as réussi à commander les ingrédients pour réaliser ta tarte aux
-        pommes
-      </Typography>
+      {isCartValid ? SuccessComponent : FailureComponent({ missingCartTitles })}
       <AppLink text="Retenter l'expérience ?" link="/" />
     </Container>
   );