translate final page

theodo · Sep 28, 2023 · ad7cc23 · ad7cc23
1 parent 265c799
commit ad7cc23
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 38 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -36,5 +36,16 @@
     "quantity": "Quantity",
     "remove": "Remove",
     "validate": "Validate cart"
+  },
+  "final-page": {
+    "failure": {
+      "title": "Too bad",
+      "subtitle": "You forgot to add the following items to your cart:",
+      "try-again": "Retry the experience ?"
+    },
+    "success": {
+      "title": "Congratulations,",
+      "subtitle": "you managed to order the ingredients for your apple pie."
+    }
   }
 }
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -36,5 +36,16 @@
     "quantity": "Quantité",
     "remove": "Retirer",
     "validate": "Valider le panier"
+  },
+  "final-page": {
+    "failure": {
+      "title": "Dommage",
+      "subtitle": "Tu as oublié d'ajouter les ingrédients suivants à ton panier :",
+      "try-again": "Retenter l'expérience ?"
+    },
+    "success": {
+      "title": "Félicitations,",
+      "subtitle": "tu as réussi à commander les ingrédients pour réaliser ta tarte aux pommes."
+    }
   }
 }
diff --git a/src/components/ui/FinalPage/FailureComponent.tsx b/src/components/ui/FinalPage/FailureComponent.tsx
@@ -1,14 +1,14 @@
 import { List, ListItem, Typography } from "@mui/material";
 import { Container } from "@mui/system";
 import Image from "next/image";
+import { useTranslation } from "next-i18next";
 
 interface IFailureComponent {
-  missingCartTitles: string[];
+  missingCart: { title: string; category: string }[];
 }
 
-const FailureComponent: React.FC<IFailureComponent> = ({
-  missingCartTitles,
-}) => {
+const FailureComponent: React.FC<IFailureComponent> = ({ missingCart }) => {
+  const { t } = useTranslation();
   return (
     <Container
       sx={{
@@ -22,7 +22,7 @@ const FailureComponent: React.FC<IFailureComponent> = ({
       <Image src={require("/public/icons/smiley-sad.svg")} alt="" />
       <Container sx={{ width: "700px", textAlign: "center" }}>
         <Typography fontSize={60} color="primary.main">
-          Dommage,
+          {t("final-page.failure.title")}
         </Typography>
         <Container
           sx={{
@@ -32,13 +32,13 @@ const FailureComponent: React.FC<IFailureComponent> = ({
           }}
         >
           <Typography fontSize={20} fontWeight={700} textAlign="center">
-            Tu as oublié d&apos;ajouter les ingrédients suivants à ton panier :
+            {t("final-page.failure.subtitle")}
           </Typography>
           <Typography fontSize={20} fontWeight={700} textAlign="center">
             <List sx={{ listStyleType: "disc" }}>
-              {missingCartTitles.map((title) => (
-                <ListItem sx={{ display: "list-item", padding: 0 }} key={title}>
-                  {title}
+              {missingCart.map((item) => (
+                <ListItem sx={{ display: "list-item" }} key={item.title}>
+                  {t(item.category + ":" + item.title + ".title")}
                 </ListItem>
               ))}
             </List>

diff --git a/src/components/ui/FinalPage/SucessComponent.tsx b/src/components/ui/FinalPage/SucessComponent.tsx
@@ -1,28 +1,31 @@
 import { Typography } from "@mui/material";
 import { Container } from "@mui/system";
 import Image from "next/image";
+import { useTranslation } from "next-i18next";
 
-const SuccessComponent = (
-  <Container
-    sx={{
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      textAlign: "center",
-      rowGap: "1em",
-    }}
-  >
-    <Image src={require("public/icons/congrats.svg")} alt="" />
-    <Container sx={{ width: "700px", textAlign: "center" }}>
-      <Typography fontSize={60} color="primary.main">
-        Félicitations,
-      </Typography>
-      <Typography fontSize={20} fontWeight={700} textAlign="center">
-        tu as réussi à commander les ingrédients pour réaliser ta tarte aux
-        pommes
-      </Typography>
+const SuccessComponent = () => {
+  const { t } = useTranslation();
+  return (
+    <Container
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        textAlign: "center",
+        rowGap: "1em",
+      }}
+    >
+      <Image src={require("public/icons/congrats.svg")} alt="" />
+      <Container sx={{ width: "700px", textAlign: "center" }}>
+        <Typography fontSize={60} color="primary.main">
+          {t("final-page.success.title")}
+        </Typography>
+        <Typography fontSize={20} fontWeight={700} textAlign="center">
+          {t("final-page.success.subtitle")}
+        </Typography>
+      </Container>
     </Container>
-  </Container>
-);
+  );
+};
 
 export default SuccessComponent;
diff --git a/src/pages/final.tsx b/src/pages/final.tsx
@@ -1,28 +1,43 @@
 import { Container } from "@mui/system";
 import { useAtom } from "jotai";
 import type { NextPage } from "next";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 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";
 
+import { StaticProps } from "./_app";
+
 const FinalPage: NextPage = () => {
+  const { t } = useTranslation([
+    "common",
+    "fruits",
+    "flour",
+    "dairy_coffee_egg",
+  ]);
   const [cart] = useAtom(cartAtom);
-  const expectedCartTitles = ["Pomme", "Oeuf", "Farine de blé"];
-  const missingCartTitles = [];
-  for (const expectedCartTitle of expectedCartTitles) {
+  const expectedCart = [
+    { title: "apple", category: "fruits" },
+    { title: "egg", category: "dairy_coffee_egg" },
+    { title: "wheat", category: "flour" },
+  ];
+  const missingCart = [];
+  for (const expectedCartItem of expectedCart) {
     if (
       !Object.values(cart).find(
-        (cartItem) => cartItem.product.title === expectedCartTitle
+        (cartItem) =>
+          cartItem.product.title === expectedCartItem.title + ".title"
       )
     ) {
-      missingCartTitles.push(expectedCartTitle);
+      missingCart.push(expectedCartItem);
     }
   }
 
-  const isCartValid = missingCartTitles.length == 0;
+  const isCartValid = missingCart.length == 0;
   const content = (
     <Container
       sx={{
@@ -33,11 +48,24 @@ const FinalPage: NextPage = () => {
         rowGap: "2em",
       }}
     >
-      {isCartValid ? SuccessComponent : FailureComponent({ missingCartTitles })}
-      <AppLink text="Retenter l'expérience ?" link="/" />
+      {isCartValid ? SuccessComponent() : FailureComponent({ missingCart })}
+      <AppLink text={t("final-page.failure.try-again")} link="/" />
     </Container>
   );
   return <PageTextTemplate content={content} />;
 };
 
 export default FinalPage;
+
+export async function getStaticProps({ locale }: StaticProps) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, [
+        "common",
+        "fruits",
+        "flour",
+        "dairy_coffee_egg",
+      ])),
+    },
+  };
+}