✨(front) add customization to feedbacks

Let's implement the freshly added envvar to the feedback feature.

Author: NathanVss

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 
 - ✨(front) add move modal #213
 - ✨(front) update the homepage to alpha #234
+- ✨(global) add customization to feedbacks
 
 ## Changed
 

src/frontend/apps/drive/src/features/feedback/Feedback.tsx

@@ -8,42 +8,69 @@ import {
 } from "@openfun/cunningham-react";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useApiConfig } from "../config/useApiConfig";
 
 export const Feedback = (props: { buttonProps?: Partial<ButtonProps> }) => {
   const { t } = useTranslation();
   const modal = useModal();
+  const { data: config } = useApiConfig();
 
   const FEEDBACK_BUTTONS = useMemo(
     () => [
       {
         icon: <FormIcon />,
         title: "feedback.modal.buttons.form.title",
         description: "feedback.modal.buttons.form.description",
-        href: process.env.NEXT_PUBLIC_ALPHA_FEEDBACK_FORM,
+        href: config?.FRONTEND_FEEDBACK_FORM_URL,
       },
       {
         icon: <TchapIcon />,
         title: "feedback.modal.buttons.tchap.title",
         description: "feedback.modal.buttons.tchap.description",
-        href: process.env.NEXT_PUBLIC_ALPHA_FEEDBACK_TCHAP,
+        href: config?.FRONTEND_FEEDBACK_TCHAP_URL,
       },
       {
         icon: <VisioIcon />,
         title: "feedback.modal.buttons.visio.title",
         description: "feedback.modal.buttons.visio.description",
-        href: process.env.NEXT_PUBLIC_ALPHA_FEEDBACK_VISIO,
+        href: config?.FRONTEND_FEEDBACK_VISIO_URL,
       },
     ],
     []
   );
 
+  const showFeedbackButton = () => {
+    if (!config?.FRONTEND_FEEDBACK_BUTTON_SHOW) {
+      return false;
+    }
+
+    // For idle mode, there is no feedback buttons displayed as the modal will never show up,
+    // so we show the button even if there is no href.
+    if (
+      !config?.FRONTEND_FEEDBACK_BUTTON_IDLE &&
+      FEEDBACK_BUTTONS.filter((button) => !!button.href).length === 0
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  if (!showFeedbackButton()) {
+    return null;
+  }
+
   return (
     <>
       <Button
         color="tertiary"
         icon={<Icon name="info" />}
         className="c__feedback__button"
-        onClick={modal.open}
+        onClick={() => {
+          if (config?.FRONTEND_FEEDBACK_BUTTON_IDLE) {
+            return;
+          }
+          modal.open();
+        }}
         {...props.buttonProps}
       >
         {t("feedback.button")}
@@ -57,7 +84,7 @@ export const Feedback = (props: { buttonProps?: Partial<ButtonProps> }) => {
           {t("feedback.modal.description")}
         </p>
         <div className="c__feedback__modal__buttons">
-          {FEEDBACK_BUTTONS.map((button) => (
+          {FEEDBACK_BUTTONS.filter((button) => !!button.href).map((button) => (
             <FeedbackButton
               key={button.title}
               {...button}

src/frontend/apps/drive/src/pages/index.tsx

@@ -27,9 +27,11 @@ import {
 } from "@/features/ui/components/toaster/Toaster";
 import { Button } from "@openfun/cunningham-react";
 import { Feedback } from "@/features/feedback/Feedback";
+import { useApiConfig } from "@/features/config/useApiConfig";
 export default function HomePage() {
   const { t } = useTranslation();
   const { user } = useAuth();
+  const { data: config } = useApiConfig();
 
   useEffect(() => {
     if (user) {
@@ -88,7 +90,7 @@ export default function HomePage() {
                   color="secondary"
                   icon={<Icon name="info" type={IconType.OUTLINED} />}
                   fullWidth
-                  href={process.env.NEXT_PUBLIC_ALPHA_MORE}
+                  href={config?.FRONTEND_MORE_LINK}
                   target="_blank"
                 >
                   {t("home.more")}