tor-browser

ReportContent.jsx (7859B)

---

/* 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 https://mozilla.org/MPL/2.0/. */
import React, { useRef, useEffect, useCallback, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { actionTypes as at, actionCreators as ac } from "common/Actions.mjs";

export const ReportContent = spocs => {
 const dispatch = useDispatch();
 const modal = useRef(null);
 const radioGroupRef = useRef(null);
 const submitButtonRef = useRef(null);
 const report = useSelector(state => state.DiscoveryStream.report);
 const [valueSelected, setValueSelected] = useState(false);
 const [selectedReason, setSelectedReason] = useState(null);
 const spocData = spocs.spocs.data;

 // Sends a dispatch to update the redux store when modal is cancelled
 const handleCancel = () => {
   dispatch(
     ac.AlsoToMain({
       type: at.REPORT_CLOSE,
     })
   );
 };

 const handleSubmit = useCallback(() => {
   const {
     card_type,
     corpus_item_id,
     position,
     reporting_url,
     scheduled_corpus_item_id,
     section_position,
     section,
     title,
     topic,
     url,
   } = report;

   if (card_type === "organic") {
     dispatch(
       ac.AlsoToMain({
         type: at.REPORT_CONTENT_SUBMIT,
         data: {
           card_type,
           corpus_item_id,
           report_reason: selectedReason,
           scheduled_corpus_item_id,
           section_position,
           section,
           title,
           topic,
           url,
         },
       })
     );
   } else if (card_type === "spoc") {
     // Retrieve placement_id by comparing spocData with the ad that was reported
     const getPlacementId = () => {
       if (!spocData || !report.url) {
         return null;
       }

       for (const [placementId, spocList] of Object.entries(spocData)) {
         for (const spoc of Object.values(spocList)) {
           if (spoc?.url === report.url) {
             return placementId;
           }
         }
       }
       return null;
     };

     const placement_id = getPlacementId();

     dispatch(
       ac.AlsoToMain({
         type: at.REPORT_AD_SUBMIT,
         data: {
           report_reason: selectedReason,
           placement_id,
           position,
           reporting_url,
           url,
         },
       })
     );
   }

   dispatch(
     ac.AlsoToMain({
       type: at.BLOCK_URL,
       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
 useEffect(() => {
   if (report.visible && modal?.current) {
     modal.current.showModal();

     // Clear any previously selected radio button
     const radioGroup = radioGroupRef.current;
     if (radioGroup) {
       const selectedRadioButton =
         radioGroup.querySelector("moz-radio[checked]");
       if (selectedRadioButton) {
         selectedRadioButton.removeAttribute("checked");
       }
     }

     // Clear out the states
     setValueSelected(false);
     setSelectedReason(null);
   } else if (!report.visible && modal?.current?.open) {
     modal.current.close();
   }
 }, [report.visible]);

 // Updates the submit button's state based on if a value is selected
 useEffect(() => {
   const radioGroup = radioGroupRef.current;
   const submitButton = submitButtonRef.current;

   const handleRadioChange = e => {
     const reasonValue = e?.target?.value;

     if (reasonValue) {
       setValueSelected(true);
       setSelectedReason(reasonValue);
     }
   };

   if (radioGroup) {
     radioGroup.addEventListener("change", handleRadioChange);
   }

   // Handle submit button state on valueSelected change
   const updateSubmitState = () => {
     if (valueSelected) {
       submitButton.removeAttribute("disabled");
     } else {
       submitButton.setAttribute("disabled", "");
     }
   };

   updateSubmitState();

   return () => {
     if (radioGroup) {
       radioGroup.removeEventListener("change", handleRadioChange);
     }
   };
 }, [valueSelected, selectedReason]);

 return (
   <dialog
     className="report-content-form"
     id="dialog-report"
     ref={modal}
     onClose={() => dispatch({ type: at.REPORT_CLOSE })}
   >
     <form action="">
       {/* spocs and stories are going to have different reporting
         options, so placed a conditional to render the different reasons */}
       {report.card_type === "spoc" ? (
         <>
           <moz-radio-group
             name="report"
             ref={radioGroupRef}
             id="report-group"
             data-l10n-id="newtab-report-ads-why-reporting"
             className="report-ads-options"
             headingLevel="3"
           >
             <moz-radio
               data-l10n-id="newtab-report-ads-reason-not-interested"
               value="not_interested"
             ></moz-radio>
             <moz-radio
               data-l10n-id="newtab-report-ads-reason-inappropriate"
               value="inappropriate"
             ></moz-radio>
             <moz-radio
               data-l10n-id="newtab-report-ads-reason-seen-it-too-many-times"
               value="seen_too_many_times"
             ></moz-radio>
           </moz-radio-group>
         </>
       ) : (
         <>
           <moz-radio-group
             name="report"
             ref={radioGroupRef}
             id="report-group"
             data-l10n-id="newtab-report-content-why-reporting-this"
             className="report-content-options"
             headingLevel="3"
           >
             <moz-radio
               data-l10n-id="newtab-report-content-wrong-category"
               value="wrong_category"
             ></moz-radio>
             <moz-radio
               data-l10n-id="newtab-report-content-outdated"
               value="outdated"
             ></moz-radio>
             <moz-radio
               data-l10n-id="newtab-report-content-inappropriate-offensive"
               value="inappropriate_or_offensive"
             ></moz-radio>
             <moz-radio
               data-l10n-id="newtab-report-content-spam-misleading"
               value="spam_or_misleading"
             ></moz-radio>
             <moz-radio
               data-l10n-id="newtab-report-content-requires-payment-subscription"
               value="requires_payment_or_subscription"
             >
               <a
                 slot="support-link"
                 is="moz-support-link"
                 support-page="recommendations-firefox-new-tab#w_what-is-a-paywall"
                 data-l10n-id="newtab-report-content-requires-payment-subscription-learn-more"
                 rel="noreferrer"
                 target="_blank"
               ></a>
             </moz-radio>
           </moz-radio-group>
         </>
       )}

       <moz-button-group>
         <moz-button
           data-l10n-id="newtab-report-cancel"
           onClick={handleCancel}
           className="cancel-report-btn"
         ></moz-button>

         <moz-button
           type="primary"
           data-l10n-id="newtab-report-submit"
           ref={submitButtonRef}
           onClick={handleSubmit}
           className="submit-report-btn"
         ></moz-button>
       </moz-button-group>
     </form>
   </dialog>
 );
};