Bug 1958754 - Show toast after reporting content/ads. r=home-newtab-reviewers,fluent-reviewers,maxx,bolsson

Differential Revision: https://phabricator.services.mozilla.com/D244547

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.jsx

@@ -100,6 +100,19 @@ export const ReportContent = spocs => {
         data: [{ ...report }],
       })
     );
+
+    dispatch(
+      ac.OnlyToOneContent(
+        {
+          type: at.SHOW_TOAST_MESSAGE,
+          data: {
+            toastId: "reportSuccessToast",
+            showNotifications: true,
+          },
+        },
+        "ActivityStream:Content"
+      )
+    );
   }, [dispatch, selectedReason, report, spocData]);
 
   // Opens and closes the modal based on user interaction

browser/extensions/newtab/content-src/components/Notifications/Notifications.jsx

@@ -6,6 +6,7 @@ import React, { useCallback, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
 import { ThumbUpThumbDownToast } from "./Toasts/ThumbUpThumbDownToast";
+import { ReportContentToast } from "./Toasts/ReportContentToast";
 
 function Notifications({ dispatch }) {
   const toastQueue = useSelector(state => state.Notifications.toastQueue);
@@ -43,13 +44,27 @@ function Notifications({ dispatch }) {
       throw new Error("No toast found");
     }
 
-    return (
-      <ThumbUpThumbDownToast
-        onDismissClick={syncHiddenToastData}
-        onAnimationEnd={syncHiddenToastData}
-        key={toastCounter}
-      />
-    );
+    switch (latestToastItem) {
+      case "reportSuccessToast":
+        return (
+          <ReportContentToast
+            onDismissClick={syncHiddenToastData}
+            onAnimationEnd={syncHiddenToastData}
+            key={toastCounter}
+          />
+        );
+      case "thumbsUpToast":
+      case "thumbsDownToast":
+        return (
+          <ThumbUpThumbDownToast
+            onDismissClick={syncHiddenToastData}
+            onAnimationEnd={syncHiddenToastData}
+            key={toastCounter}
+          />
+        );
+      default:
+        throw new Error(`Unexpected toast type: ${latestToastItem}`);
+    }
   }, [syncHiddenToastData, toastCounter, toastQueue]);
 
   useEffect(() => {

browser/extensions/newtab/content-src/components/Notifications/Toasts/ReportContentToast.jsx

@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { useEffect, useRef } from "react";
+
+function ReportContentToast({ onDismissClick, onAnimationEnd }) {
+  const mozMessageBarRef = useRef(null);
+
+  useEffect(() => {
+    const { current: mozMessageBarElement } = mozMessageBarRef;
+
+    mozMessageBarElement.addEventListener(
+      "message-bar:user-dismissed",
+      onDismissClick,
+      {
+        once: true,
+      }
+    );
+
+    return () => {
+      mozMessageBarElement.removeEventListener(
+        "message-bar:user-dismissed",
+        onDismissClick
+      );
+    };
+  }, [onDismissClick]);
+
+  return (
+    <moz-message-bar
+      type="success"
+      class="notification-feed-item"
+      dismissable={true}
+      data-l10n-id="newtab-toast-thanks-for-feedback"
+      ref={mozMessageBarRef}
+      onAnimationEnd={onAnimationEnd}
+    ></moz-message-bar>
+  );
+}
+
+export { ReportContentToast };

browser/extensions/newtab/data/content/activity-stream.bundle.js

@@ -5898,6 +5898,13 @@ const ReportContent = spocs => {
         ...report
       }]
     }));
+    dispatch(actionCreators.OnlyToOneContent({
+      type: actionTypes.SHOW_TOAST_MESSAGE,
+      data: {
+        toastId: "reportSuccessToast",
+        showNotifications: true
+      }
+    }, "ActivityStream:Content"));
   }, [dispatch, selectedReason, report, spocData]);
 
   // Opens and closes the modal based on user interaction
@@ -13385,6 +13392,38 @@ function ThumbUpThumbDownToast({
   });
 }
 
+;// CONCATENATED MODULE: ./content-src/components/Notifications/Toasts/ReportContentToast.jsx
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+function ReportContentToast({
+  onDismissClick,
+  onAnimationEnd
+}) {
+  const mozMessageBarRef = (0,external_React_namespaceObject.useRef)(null);
+  (0,external_React_namespaceObject.useEffect)(() => {
+    const {
+      current: mozMessageBarElement
+    } = mozMessageBarRef;
+    mozMessageBarElement.addEventListener("message-bar:user-dismissed", onDismissClick, {
+      once: true
+    });
+    return () => {
+      mozMessageBarElement.removeEventListener("message-bar:user-dismissed", onDismissClick);
+    };
+  }, [onDismissClick]);
+  return /*#__PURE__*/external_React_default().createElement("moz-message-bar", {
+    type: "success",
+    class: "notification-feed-item",
+    dismissable: true,
+    "data-l10n-id": "newtab-toast-thanks-for-feedback",
+    ref: mozMessageBarRef,
+    onAnimationEnd: onAnimationEnd
+  });
+}
+
 ;// CONCATENATED MODULE: ./content-src/components/Notifications/Notifications.jsx
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -13394,6 +13433,7 @@ function ThumbUpThumbDownToast({
 
 
 
+
 function Notifications_Notifications({
   dispatch
 }) {
@@ -13424,11 +13464,23 @@ function Notifications_Notifications({
     if (!latestToastItem) {
       throw new Error("No toast found");
     }
-    return /*#__PURE__*/external_React_default().createElement(ThumbUpThumbDownToast, {
-      onDismissClick: syncHiddenToastData,
-      onAnimationEnd: syncHiddenToastData,
-      key: toastCounter
-    });
+    switch (latestToastItem) {
+      case "reportSuccessToast":
+        return /*#__PURE__*/external_React_default().createElement(ReportContentToast, {
+          onDismissClick: syncHiddenToastData,
+          onAnimationEnd: syncHiddenToastData,
+          key: toastCounter
+        });
+      case "thumbsUpToast":
+      case "thumbsDownToast":
+        return /*#__PURE__*/external_React_default().createElement(ThumbUpThumbDownToast, {
+          onDismissClick: syncHiddenToastData,
+          onAnimationEnd: syncHiddenToastData,
+          key: toastCounter
+        });
+      default:
+        throw new Error(`Unexpected toast type: ${latestToastItem}`);
+    }
   }, [syncHiddenToastData, toastCounter, toastQueue]);
   (0,external_React_namespaceObject.useEffect)(() => {
     getToast();

browser/locales-preview/reportContentTemporary.ftl

@@ -17,3 +17,5 @@ newtab-report-ads-reason-seen-it-too-many-times =
 newtab-report-ads-reason-not-interested =
   .label = Not interested
 newtab-report-submit = Submit
+newtab-toast-thanks-for-feedback =
+    .message = Thanks for your feedback.