MNTOR-3556: Front end integration (#4995)

* feat: some example code for FE

* extract data from the right table

* Unsubscription from monthly report confirmation page (#4998)

* fix: gurantee boolean value

* fix: update should upsert too

* fix: delete primary_email field

* fix: remove dup primary_email from new table

* fix: generate the link for the unsub page instead

* feat: some example code for FE

* extract data from the right table

* Unsubscription from monthly report confirmation page

* pass in the right function

* fix unit tests

* fix unit tests

---------

Co-authored-by: Joey Zhou <[email protected]>

* pass subscriber data

* return void

* add toast

* correct api endpoint

* remove debugging comments

* add try again link

* add feature flag

* rename file

* override css variables

* wrap in try catch

* add loader

* fixup

* add toat if catch error

* remove original css override styles

* move to /unsubscribe-email folder

* lint

* add try again styling

* use plus language for header

* unit test

---------

Co-authored-by: Kaitlyn <[email protected]>

locales-pending/settings-premium.ftl

@@ -2,11 +2,6 @@
 # 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/.
 
-## Email preferences
-
-settings-alert-preferences-allow-monthly-monitor-plus-report-title = Monthly { -brand-monitor-plus } report
-settings-alert-preferences-allow-monthly-monitor-plus-report-subtitle = A monthly update of new exposures, what’s been fixed, and what needs your attention.
-
 ## Cancel Plus subscription
 
 settings-cancel-plus-title = Cancel { -brand-monitor-plus } subscription
@@ -59,3 +54,7 @@ settings-delete-monitor-plus-account-dialog-lead-p1-2 = All of your { -brand-mon
 settings-delete-monitor-plus-account-dialog-lead-p2-2 = You’ll regain access to { -brand-monitor-plus } features if you sign back in during any remaining time of your paid subscription.
 settings-delete-monitor-plus-account-dialog-cta-label = Delete account
 settings-delete-monitor-plus-account-dialog-cancel-button-label = Never mind, take me back
+
+## Monthly Monitor Report
+
+settings-alert-preferences-allow-monthly-monitor-plus-report-title = Monthly { -brand-monitor-plus } report

locales/en/settings.ftl

@@ -58,3 +58,8 @@ settings-delete-monitor-free-account-dialog-cta-label = Delete account
 settings-delete-monitor-free-account-dialog-cancel-button-label = Never mind, take me back
 settings-delete-monitor-account-confirmation-toast-label-2 = Your { -brand-monitor } account is now deleted.
 settings-delete-monitor-account-confirmation-toast-dismiss-label = Dismiss
+
+## Monthly Monitor Report
+
+settings-alert-preferences-allow-monthly-monitor-report-title = Monthly { -brand-monitor } report
+settings-alert-preferences-allow-monthly-monitor-report-subtitle = A monthly update of new exposures, what’s been fixed, and what needs your attention.

locales/en/unsubscribe.ftl

@@ -0,0 +1,18 @@
+# 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/.
+
+# Confirm Unsubscription State
+
+unsubscribe-from-monthly-report-header = Unsubscribe from this email?
+unsubscribe-from-monthly-report-body = You’ll no longer receive the monthly { -brand-monitor } report, which tells you how many new exposures you’ve had each month and how many are fixed.
+unsubscribe-cta = Unsubscribe
+
+# Success Unsubscription State
+
+unsubscribe-success-from-monthly-report-header = You’re now unsubscribed
+unsubscribe-success-from-monthly-report-body = You can resubscribe or update your email preferences anytime from your { -brand-monitor } settings.
+
+# Error warning
+
+unsubscription-failed = Unsubscribe failed. <try_again_link>Try again.</try_again_link>

package.json

@@ -100,6 +100,7 @@
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.13.0",
     "react-stately": "^3.32.2",
+    "react-toastify": "^10.0.5",
     "server-only": "^0.0.1",
     "uuid": "^10.0.0",
     "winston": "^3.14.2"

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.tsx

@@ -29,13 +29,15 @@ import { VisuallyHidden } from "../../../../../../components/server/VisuallyHidd
 import { useSession } from "next-auth/react";
 import { FeatureFlagName } from "../../../../../../../db/tables/featureFlags";
 import { Session } from "next-auth";
-import { hasPremium } from "../../../../../../functions/universal/user";
 import { useRouter } from "next/navigation";
 import { SubscriberRow } from "knex/types/tables";
+import { SubscriberEmailPreferencesOutput } from "../../../../../../../db/tables/subscriber_email_preferences";
+import { hasPremium } from "../../../../../../functions/universal/user";
 
 export type Props = {
   user: Session["user"];
   subscriber: SubscriberRow;
+  data: SubscriberEmailPreferencesOutput;
   enabledFeatureFlags: FeatureFlagName[];
 };
 
@@ -48,7 +50,15 @@ export const AlertAddressForm = (props: Props) => {
 
   const breachAlertsEmailsAllowed = props.subscriber.all_emails_to_primary;
 
-  const monitorReportAllowed = props.subscriber.monthly_monitor_report;
+  // Extract monthly report preference from the right column
+  const monitorReportAllowed = hasPremium(props.user)
+    ? props.data.monthly_monitor_report
+    : props.data.monthly_monitor_report_free;
+
+  // TODO: Deprecate this when monthly report for free users has been created
+  const monthlyFreeUserReportEnabled =
+    props.enabledFeatureFlags.includes("MonthlyReportFreeUser") ||
+    hasPremium(props.user);
 
   const defaultActivateAlertEmail =
     typeof breachAlertsEmailsAllowed === "boolean";
@@ -175,22 +185,25 @@ export const AlertAddressForm = (props: Props) => {
             </AlertAddressRadio>
           </AlertAddressContext.Provider>
         )}
-
         {props.enabledFeatureFlags.includes("MonthlyActivityEmail") &&
-          hasPremium(props.user) && (
+          monthlyFreeUserReportEnabled && (
             <ActivateEmailsCheckbox
               isSelected={activateMonthlyMonitorReport}
               onChange={handleMonthlyMonitorReportToggle}
             >
               <div>
                 <b>
-                  {l10n.getString(
-                    "settings-alert-preferences-allow-monthly-monitor-plus-report-title",
-                  )}
+                  {hasPremium(props.user)
+                    ? l10n.getString(
+                        "settings-alert-preferences-allow-monthly-monitor-plus-report-title",
+                      )
+                    : l10n.getString(
+                        "settings-alert-preferences-allow-monthly-monitor-report-title",
+                      )}
                 </b>
                 <p>
                   {l10n.getString(
-                    "settings-alert-preferences-allow-monthly-monitor-plus-report-subtitle",
+                    "settings-alert-preferences-allow-monthly-monitor-report-subtitle",
                   )}
                 </p>
               </div>