MNTOR-3919: cronjob WIP for churn emails

package.json

@@ -16,6 +16,7 @@
     "dev:cron:db-delete-unverified-subscribers": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/deleteUnverifiedSubscribers.ts",
     "dev:cron:db-pull-breaches": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/syncBreaches.ts",
     "dev:cron:db-pull-data-brokers": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/syncOnerepDataBrokers.ts",
+    "dev:cron:churn-discount": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/churnDiscount.ts",
     "dev:cron:remote-settings-pull-breaches": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/updateBreachesInRemoteSettings.ts",
     "dev:cron:onerep-limits-alert": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/onerepStatsAlert.ts",
     "dev:cron:report-lighthouse-results": "tsx --tsconfig tsconfig.cronjobs.json src/scripts/cronjobs/reportLighthouseResults.ts",
@@ -36,6 +37,7 @@
     "cron:db-delete-unverified-subscribers": "node dist/scripts/cronjobs/deleteUnverifiedSubscribers.js",
     "cron:db-pull-breaches": "node dist/scripts/cronjobs/syncBreaches.js",
     "cron:db-pull-data-brokers": "node dist/scripts/cronjobs/syncOnerepDataBrokers.js",
+    "cron:churn-discount": "node dist/scripts/cronjobs/churnDiscount.js",
     "cron:remote-settings-pull-breaches": "node dist/scripts/cronjobs/updateBreachesInRemoteSettings.js",
     "cron:onerep-limits-alert": "node dist/scripts/cronjobs/onerepStatsAlert.js",
     "cron:report-lighthouse-results": "node dist/scripts/cronjobs/reportLighthouseResults.js",
@@ -75,6 +77,7 @@
     "@fluent/bundle": "^0.18.0",
     "@fluent/langneg": "^0.7.0",
     "@fluent/react": "^0.15.2",
+    "@google-cloud/bigquery": "^7.9.1",
     "@google-cloud/logging-winston": "^6.0.0",
     "@google-cloud/pubsub": "^4.9.0",
     "@grpc/grpc-js": "1.12.2",

src/app/(proper_react)/(redesign)/(authenticated)/admin/churn-subscribers/ChurnAdmin.module.scss

@@ -0,0 +1,121 @@
+@use "../../../../../tokens";
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$spacing-2xl;
+  background-color: tokens.$color-grey-05;
+  height: 100%;
+  padding: tokens.$layout-lg tokens.$layout-2xl;
+
+  @media screen and (max-width: tokens.$screen-lg) {
+    padding: tokens.$spacing-lg;
+  }
+}
+
+.header {
+  font: tokens.$text-title-xs;
+  font-weight: normal;
+
+  b {
+    font-weight: bold;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$spacing-2xl;
+
+  .userPicker {
+    flex: 1 0 auto;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: tokens.$spacing-2xl;
+    min-height: tokens.$layout-2xl;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: tokens.$spacing-sm;
+      min-width: 50%;
+    }
+
+    input {
+      padding: tokens.$spacing-sm;
+      font: tokens.$text-body-md;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: tokens.$spacing-xl;
+
+    button {
+      flex: 1 1 25%;
+    }
+  }
+}
+
+.status {
+  background-color: tokens.$color-yellow-05;
+  border: 2px solid tokens.$color-yellow-20;
+  border-radius: tokens.$border-radius-sm;
+  padding: tokens.$spacing-md tokens.$spacing-lg;
+  font: tokens.$text-body-md;
+}
+
+.tableWrapper {
+  margin: 1rem;
+  overflow-x: auto;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 0.75rem;
+      text-align: left;
+      border-bottom: 1px solid #ddd;
+    }
+
+    th {
+      background-color: #f5f5f5;
+      font-weight: bold;
+    }
+
+    tr:hover {
+      background-color: #f9f9f9;
+    }
+  }
+}
+
+.uploadSection {
+  margin: 1rem 0;
+  padding: 1rem;
+  border: 2px dashed #ccc;
+  border-radius: 4px;
+
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.fileInput {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+}
+
+.dangerButton {
+  background-color: #dc3545;
+  color: white;
+  margin-top: 1rem;
+
+  &:hover {
+    background-color: #c82333;
+  }
+}

src/app/(proper_react)/(redesign)/(authenticated)/admin/churn-subscribers/ChurnAdmin.tsx

@@ -0,0 +1,192 @@
+/* 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/. */
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import styles from "./ChurnAdmin.module.scss";
+import { SubscriberChurnRow } from "knex/types/tables";
+import { getAllChurns, upsertAllChurns, clearAllChurns } from "./actions";
+
+export const ChurnAdmin = () => {
+  const session = useSession();
+  const [subscriberData, setSubscriberData] = useState<
+    SubscriberChurnRow[] | null
+  >(null);
+  const [parsedData, setParsedData] = useState<SubscriberChurnRow[] | null>(
+    null,
+  );
+
+  // Load data on component mount
+  useEffect(() => {
+    const loadSubscriberData = async () => {
+      const data = await getAllChurns();
+      setSubscriberData(data);
+    };
+
+    void loadSubscriberData();
+  }, []);
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result as string;
+      const rows = text.split("\n");
+
+      // Validate minimum number of rows
+      if (rows.length < 2) {
+        alert("CSV file appears to be empty or missing headers");
+        return;
+      }
+
+      // Expected headers and validation
+      const expectedHeaders = [
+        "userid",
+        "customer",
+        "created",
+        "nickname",
+        "intervl",
+        "plan_id",
+        "product_id",
+        "current_period_end",
+      ];
+      const headers = rows[0]
+        .toLowerCase()
+        .split(",")
+        .map((header) => header.trim());
+
+      console.log("Expected headers:", expectedHeaders);
+      console.log("Actual headers:", headers);
+      console.log(
+        "Validation result:",
+        expectedHeaders.every((expectedHeader) =>
+          headers.includes(expectedHeader),
+        ),
+      );
+
+      if (
+        !expectedHeaders.every((expectedHeader) =>
+          headers.includes(expectedHeader),
+        )
+      ) {
+        alert(
+          `Invalid CSV format: Headers don't match expected format\n${expectedHeaders.toString()}\n${headers.toString()}`,
+        );
+        return;
+      }
+
+      try {
+        const parsedData: SubscriberChurnRow[] = rows
+          .slice(1)
+          .filter((row) => row.trim()) // Skip empty rows
+          .map((row) => {
+            const values = row.split(",");
+
+            return {
+              userid: values[0],
+              customer: values[1],
+              created: values[2],
+              nickname: values[3],
+              intervl: values[4],
+              plan_id: values[6],
+              product_id: values[7],
+              current_period_end: new Date(values[8]).toISOString(),
+            };
+          });
+
+        setParsedData(parsedData);
+      } catch (error) {
+        alert(`Error parsing CSV: ${(error as Error).message}`);
+        setParsedData(null);
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <main className={styles.wrapper}>
+      <header className={styles.header}>Churn Admin Dashboard</header>
+      <p>
+        Logged in as <b>{session.data?.user.email}</b>.
+      </p>
+
+      <div className={styles.uploadSection}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!parsedData) return;
+            void upsertAllChurns(parsedData);
+          }}
+        >
+          <input
+            onChange={handleFileUpload}
+            className={styles.fileInput}
+            type="file"
+          />
+          <button type="submit" disabled={!parsedData}>
+            Upload Data
+          </button>
+        </form>
+      </div>
+
+      <button
+        className={styles.dangerButton}
+        onClick={() => {
+          if (
+            window.confirm(
+              "Are you sure you want to delete all churn data? This cannot be undone.",
+            )
+          ) {
+            void clearAllChurns();
+          }
+        }}
+      >
+        Clear All Data
+      </button>
+
+      {subscriberData ? (
+        <div>
+          <p>
+            Total rows: <b>{subscriberData.length}</b> | Yearly:{" "}
+            <b>{subscriberData.filter((s) => s.intervl === "year").length}</b>
+          </p>
+          <div className={styles.tableWrapper}>
+            <table>
+              <thead>
+                <tr>
+                  <th>FxA UID</th>
+                  <th>nickname</th>
+                  <th>Interval</th>
+                  <th>Plan ID</th>
+                  <th>Product ID</th>
+                  <th>Churn Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {subscriberData.map((row) => (
+                  <tr key={row.userid}>
+                    <td>{row.userid}</td>
+                    <td>{row.nickname}</td>
+                    <td>{row.intervl}</td>
+                    <td>{row.plan_id}</td>
+                    <td>{row.product_id}</td>
+                    <td>
+                      {new Date(row.current_period_end).toLocaleDateString()}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ) : (
+        <p>Loading subscriber data...</p>
+      )}
+    </main>
+  );
+};