feat: add links related to open food facts in settings route.

src/i18n/common.json

@@ -210,7 +210,30 @@
     "reportIssue": "Found a bug?, please let us know",
     "dev_mode_title": "To get more options, activate the dev mode",
     "dev_mode_label": "Dev Mode",
-    "dev_page_toggle": "Show {{name}} page"
+    "dev_page_toggle": "Show {{name}} page",
+    "join_community":"Join the community",
+    "text1":"Open Food Facts is a collaborative project built by tens of thousands of volunteers and managed by a non-profit organization with 8 employees. We need your donations to fund the Open Food Facts 2023 budget and to continue to develop the project.",
+    "thank_you":"Thank you",
+    "donate":"Donate",
+    "join_the_community": {
+      "discover_our":"Discover our ",
+      "code_of_conduct":"Code of conduct ",
+      "join_us_on":"Join us on ",
+      "forum":"Forum",
+      "subscribe_to_our":"Subscribe to our ",
+      "newsletter":"newsletter"
+    },
+    "discover_the_project":"Discover the project",
+    "Who_we_are":"Who we are",
+    "Vision_Mission_Values_and_Programs":"Vision, Mission, Values and Programs",
+    "FAQS":"FAQS",
+    "open_Food_Facts_blog":"Open Food Facts blog",
+    "Press":"Press",
+    "Open_Food_Facts_wiki":"Open Food Facts wiki (en)",
+    "Translators":"Translators",
+    "Partners":"Partners",
+    "Open_Beauty_Facts":"Open Beauty Facts - Cosmétiques",
+    "text2":"A collaborative, free and open database of food products from around the world."
   },
   "helper": {
     "welcome": {

src/i18n/en.json

@@ -210,7 +210,30 @@
     "reportIssue": "Found a bug?, please let us know",
     "dev_mode_title": "To get more options, activate the dev mode",
     "dev_mode_label": "Dev Mode",
-    "dev_page_toggle": "Show {{name}} page"
+    "dev_page_toggle": "Show {{name}} page",
+    "join_community":"Join the community",
+    "text1":"Open Food Facts is a collaborative project built by tens of thousands of volunteers and managed by a non-profit organization with 8 employees. We need your donations to fund the Open Food Facts 2023 budget and to continue to develop the project.",
+    "thank_you":"Thank you",
+    "donate":"Donate",
+    "join_the_community": {
+      "discover_our":"Discover our",
+      "code_of_conduct":"Code of conduct",
+      "join_us_on":"Join us on",
+      "forum":"Forum",
+      "subscribe_to_our":"Subscribe to our",
+      "newsletter":"newsletter"
+    },
+    "discover_the_project":"Discover the project",
+    "Who_we_are":"Who we are",
+    "Vision_Mission_Values_and_Programs":"Vision, Mission, Values and Programs",
+    "FAQS":"FAQS",
+    "open_Food_Facts_blog":"Open Food Facts blog",
+    "Press":"Press",
+    "Open_Food_Facts_wiki":"Open Food Facts wiki (en)",
+    "Translators":"Translators",
+    "Partners":"Partners",
+    "Open_Beauty_Facts":"Open Beauty Facts - Cosmétiques",
+    "text2":"A collaborative, free and open database of food products from around the world."
   },
   "helper": {
     "welcome": {

src/pages/settings/DiscoverTheProject.jsx

@@ -0,0 +1,80 @@
+import { Button, Chip, Divider, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { useTranslation } from "react-i18next";
+
+const discover = [
+  {
+    text: "settings.Who_we_are",
+    url: "https://world.openfoodfacts.org/who-we-are",
+  },
+  {
+    text: "settings.Vision_Mission_Values_and_Programs",
+    url: "https://world.openfoodfacts.org/open-food-facts-vision-mission-values-and-programs",
+  },
+  {
+    text: "settings.FAQS",
+    url: "https://world.openfoodfacts.org/faq",
+  },
+  {
+    text: "settings.open_Food_Facts_blog",
+    url: "https://blog.openfoodfacts.org/en/",
+  },
+  {
+    text: "settings.Press",
+    url: "https://world.openfoodfacts.org/press",
+  },
+  {
+    text: "settings.Open_Food_Facts_wiki",
+    url: "https://wiki.openfoodfacts.org/",
+  },
+  {
+    text: "settings.Translators",
+    url: "https://world.openfoodfacts.org/cgi/top_translators.pl",
+  },
+  {
+    text: "settings.Partners",
+    url: "https://world.openfoodfacts.org/partners",
+  },
+  {
+    text: "settings.Open_Beauty_Facts",
+    url: "https://world-fr.openbeautyfacts.org/",
+  },
+];
+
+const DiscoverTheProject = () => {
+  const { t } = useTranslation();
+  return (
+    <Box sx={{ width: { xs: "100%", sm: "50%" } }}>
+      <Divider light>
+        <Chip label="Discover the project" />
+      </Divider>
+      <br />
+      <Box
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "20px",
+          justifyContent: "center",
+        }}
+      >
+        {discover.map((content) => {
+          return (
+            <Button
+              sx={{
+                backgroundColor: "#a08d84",
+                "&:hover": { backgroundColor: "#887369" },
+              }}
+              variant="contained"
+              href={content.url}
+              target="_blank"
+            >
+              <Typography noWrap>{t(content.text)}</Typography>
+            </Button>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+
+export default DiscoverTheProject;

src/pages/settings/Donate.jsx

@@ -0,0 +1,54 @@
+import { Button, Typography } from "@mui/material";
+import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism";
+import { Box } from "@mui/system";
+import { useTranslation } from "react-i18next";
+
+const Donate = () => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: {
+          xs: "column-reverse",
+          sm: "column-reverse",
+          md: "row",
+        },
+        gap: "20px",
+        justifyContent: "space-around",
+        pl: { md: "25px", xs: "", sm: "" },
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Button
+          href="https://world.openfoodfacts.org/donate-to-open-food-facts?utm_source=off&utf_medium=web&utm_campaign=donate-2023&utm_term=en-text-button"
+          target="_blank"
+          sx={{
+            height: { xs: "50px", md: "50%" },
+            width: { xs: "200px", md: "100%" },
+            borderRadius: "100px",
+            p: "30px",
+          }}
+          variant="outlined"
+          startIcon={<VolunteerActivismIcon />}
+        >
+          {t("settings.donate")}
+        </Button>
+      </div>
+      <Typography textAlign={{ xs: "center", md: "left" }}>
+        {t("settings.text1")}
+        <br />
+        <br />
+        <Typography variant="h6">{t("settings.thank_you")} ❤️</Typography>
+      </Typography>
+    </Box>
+  );
+};
+
+export default Donate;

src/pages/settings/FooterButtons.jsx

@@ -0,0 +1,32 @@
+import { Button, IconButton, Typography } from "@mui/material";
+import { Stack } from "@mui/system";
+
+const FooterButtons = (props) => {
+  const { title, subTitle, icon, url } = props;
+  return (
+    <Button
+      href={url}
+      target="_blank"
+      variant="contained"
+      sx={{
+        width: "220px",
+        pr: "1",
+        pl: "0",
+        backgroundColor: "#a08d84",
+        "&:hover": { backgroundColor: "#887369" },
+      }}
+    >
+      <IconButton>{icon}</IconButton>
+      <Stack>
+        <Typography noWrap variant="caption">
+          {subTitle}
+        </Typography>
+        <Typography noWrap variant="h6">
+          {title}
+        </Typography>
+      </Stack>
+    </Button>
+  );
+};
+
+export default FooterButtons;

src/pages/settings/FooterWithLinks.jsx

@@ -0,0 +1,87 @@
+import { Box } from "@mui/system";
+import AppleIcon from "@mui/icons-material/Apple";
+import GoogleIcon from "@mui/icons-material/Google";
+import WindowIcon from "@mui/icons-material/Window";
+import AndroidIcon from "@mui/icons-material/Android";
+import FooterButtons from "./FooterButtons";
+import Donate from "./Donate";
+import JoinTheCommunity from "./JoinTheCommunity";
+import DiscoverTheProject from "./DiscoverTheProject";
+import OpenFoodFacts from "./OpenFoodFacts";
+
+const footerLinks = [
+  {
+    title: "App Store",
+    subTitle: "Download on the",
+    icon: <AppleIcon fontSize="large" />,
+    url: "https://apps.apple.com/app/open-food-facts/id588797948",
+  },
+  {
+    title: "Play Store",
+    subTitle: "Get it on",
+    icon: <GoogleIcon fontSize="large" />,
+    url: "https://play.google.com/store/apps/details?id=org.openfoodfacts.scanner&hl=en",
+  },
+  {
+    title: "Microsoft",
+    subTitle: "Get it from",
+    icon: <WindowIcon fontSize="large" />,
+    url: "https://www.microsoft.com/en-us/p/openfoodfacts/9nblggh0dkqr?activetab=pivot:overviewtab",
+  },
+  {
+    title: "Android APK",
+    subTitle: "Download",
+    icon: <AndroidIcon fontSize="large" />,
+    url: "https://github.com/openfoodfacts/smooth-app/releases/tag/v4.4.0",
+  },
+];
+
+const FooterWithLinks = () => {
+  return (
+    <>
+      <br />
+      {/* Donate to open food facts */}
+      <Donate />
+      <br />
+      {/*App download links for different platforms*/}
+      <Box
+        sx={{
+          width: "100%",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "20px",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {footerLinks.map((link) => {
+          return (
+            <FooterButtons
+              title={link.title}
+              subTitle={link.subTitle}
+              icon={link.icon}
+              url={link.url}
+            />
+          );
+        })}
+      </Box>
+      <br />
+      <br />
+      <Box
+        sx={{
+          mx: 2,
+          display: "flex",
+          flexDirection: { xs: "column", sm: "row" },
+          gap: { xs: "10px", sm: "" },
+        }}
+      >
+        <JoinTheCommunity />
+        <DiscoverTheProject />
+      </Box>
+      <br />
+      <OpenFoodFacts />
+    </>
+  );
+};
+
+export default FooterWithLinks;

src/pages/settings/JoinTheCommunity.jsx

@@ -0,0 +1,67 @@
+import { Chip, Divider, Step, StepLabel, Stepper } from "@mui/material";
+import { Box } from "@mui/system";
+import Link from "@mui/material/Link";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { useTranslation } from "react-i18next";
+
+const content = [
+  {
+    tag: "settings.join_the_community.discover_our",
+    urlText: "settings.join_the_community.code_of_conduct",
+    url: "https://world.openfoodfacts.org/code-of-conduct",
+  },
+  {
+    tag: "settings.join_the_community.join_us_on",
+    urlText: "slack",
+    url: "https://slack.openfoodfacts.org/",
+  },
+  {
+    tag: "",
+    urlText: "settings.join_the_community.forum",
+    url: "https://forum.openfoodfacts.org/",
+  },
+  {
+    tag: "settings.join_the_community.subscribe_to_our",
+    urlText: "settings.join_the_community.newsletter",
+    url: "https://link.openfoodfacts.org/newsletter-en",
+  },
+];
+
+const JoinTheCommunity = () => {
+  const { t } = useTranslation();
+  const CustomStepIcon = (props) => {
+    return <div>{<CheckCircleIcon sx={{ color: "#a08d84" }} />}</div>;
+  };
+
+  return (
+    <div style={{ flexGrow: "1" }}>
+      <Divider light>
+        <Chip label={t("settings.join_community")} />
+      </Divider>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Stepper orientation="vertical">
+          {content.map((step, index) => (
+            <Step active key={index}>
+              <StepLabel StepIconComponent={CustomStepIcon}>
+                {t(step.tag) + " "}
+                {
+                  <Link href={step.url} underline="always">
+                    {t(step.urlText)}
+                  </Link>
+                }
+              </StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </Box>
+    </div>
+  );
+};
+
+export default JoinTheCommunity;