Update board settings

arjunkomath · arjunkomath · commit 94df84b556f0 · 2025-09-13T15:05:04.000+10:00
diff --git a/apps/web/components/layout/page.component.tsx b/apps/web/components/layout/page.component.tsx
@@ -22,7 +22,7 @@ export default function Page({
   containerClassName,
 }: {
   title: string;
-  subtitle?: string;
+  subtitle?: string | JSX.Element;
   buttons?: JSX.Element | JSX.Element[];
   menuItems?: JSX.Element | JSX.Element[];
   children?: JSX.Element | JSX.Element[];
diff --git a/apps/web/pages/api/billing/enable-email-notifications.ts b/apps/web/pages/api/billing/enable-email-notifications.ts
@@ -18,9 +18,13 @@ const enableEmailNotifications = withAuth<{ status: string }>(
           });
         }
 
-        const { stripe_subscription_id, stripe_subscription } =
+        const { stripe_subscription_id, stripe_subscription, pro_gifted } =
           await getUserById(user.id);
 
+        if (pro_gifted) {
+          return res.status(200).json({ status: "ok" });
+        }
+
         if (
           !stripe_subscription ||
           (stripe_subscription as unknown as Stripe.Subscription)?.status ===
diff --git a/apps/web/pages/pages/[page_id]/roadmap/[board_id].tsx b/apps/web/pages/pages/[page_id]/roadmap/[board_id].tsx
@@ -1,3 +1,4 @@
+import { GlobeIcon, LockClosedIcon } from "@heroicons/react/outline";
 import { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { type JSX } from "react";
@@ -107,9 +108,25 @@ export default function RoadmapBoardDetails({
     <>
       <Page
         title={board.title}
-        subtitle={`${board.is_public ? "Public" : "Private"} Roadmap • ${
-          board.description || "No description"
-        }`}
+        subtitle={
+          <div className="flex items-center gap-3">
+            {board.is_public ? (
+              <div className="flex items-center gap-1.5 text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 px-2.5 py-1 rounded-full text-sm font-medium">
+                <GlobeIcon className="h-4 w-4" />
+                Public
+              </div>
+            ) : (
+              <div className="flex items-center gap-1.5 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-2.5 py-1 rounded-full text-sm font-medium">
+                <LockClosedIcon className="h-4 w-4" />
+                Private
+              </div>
+            )}
+            <span className="text-gray-500 dark:text-gray-400">•</span>
+            <span className="text-gray-600 dark:text-gray-400">
+              {board.description || "No description"}
+            </span>
+          </div>
+        }
         showBackButton={true}
         backRoute={`/pages/${page_id}/roadmap`}
         containerClassName="lg:pb-0"
diff --git a/apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx b/apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx
@@ -3,20 +3,21 @@ import {
   getCategoryColorOptions,
   ROADMAP_COLORS,
 } from "@changes-page/utils";
-import { MenuIcon } from "@heroicons/react/outline";
+import { GlobeIcon, LockClosedIcon, MenuIcon } from "@heroicons/react/outline";
 import { PencilIcon, PlusIcon, TrashIcon } from "@heroicons/react/solid";
 import { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState, type JSX } from "react";
+import SwitchComponent from "../../../../../components/forms/switch.component";
 import AuthLayout from "../../../../../components/layout/auth-layout.component";
 import Page from "../../../../../components/layout/page.component";
+import { createAuditLog } from "../../../../../utils/auditLog";
 import usePageSettings from "../../../../../utils/hooks/usePageSettings";
 import { getPageUrl } from "../../../../../utils/hooks/usePageUrl";
 import { withSupabase } from "../../../../../utils/supabase/withSupabase";
 import { createOrRetrievePageSettings } from "../../../../../utils/useDatabase";
 import { getPage } from "../../../../../utils/useSSR";
 import { useUserData } from "../../../../../utils/useUser";
-import { createAuditLog } from "../../../../../utils/auditLog";
 
 export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
   const { page_id } = ctx.params;
@@ -241,19 +242,19 @@ export default function BoardSettings({
         page_id: page_id,
         actor_id: user.id,
         action: `Updated Roadmap Board: ${boardForm.title}`,
-        changes: { 
+        changes: {
           old: {
             title: board.title,
             description: board.description,
             slug: board.slug,
-            is_public: board.is_public
+            is_public: board.is_public,
           },
           new: {
             title: boardForm.title,
             description: boardForm.description,
             slug: boardForm.slug,
-            is_public: boardForm.is_public
-          }
+            is_public: boardForm.is_public,
+          },
         },
       });
 
@@ -316,7 +317,7 @@ export default function BoardSettings({
 
       if (error) throw error;
 
-      const oldCategory = boardCategories.find(cat => cat.id === categoryId);
+      const oldCategory = boardCategories.find((cat) => cat.id === categoryId);
       const newCategoryData = {
         name: categoryToEdit.trim(),
         color: categoryColorToEdit,
@@ -342,9 +343,9 @@ export default function BoardSettings({
           page_id: page_id,
           actor_id: user.id,
           action: `Updated Roadmap Category: ${newCategoryData.name}`,
-          changes: { 
+          changes: {
             old: oldCategory,
-            new: { ...oldCategory, ...newCategoryData }
+            new: { ...oldCategory, ...newCategoryData },
           },
         });
       }
@@ -380,7 +381,9 @@ export default function BoardSettings({
 
       if (error) throw error;
 
-      const deletedCategory = boardCategories.find(cat => cat.id === categoryId);
+      const deletedCategory = boardCategories.find(
+        (cat) => cat.id === categoryId
+      );
       setBoardCategories((prev) => prev.filter((cat) => cat.id !== categoryId));
 
       // Create audit log for category deletion
@@ -446,7 +449,7 @@ export default function BoardSettings({
 
       if (error) throw error;
 
-      const oldColumn = boardColumns.find(col => col.id === columnId);
+      const oldColumn = boardColumns.find((col) => col.id === columnId);
       const newColumnName = columnToEdit.trim();
 
       setBoardColumns((prev) =>
@@ -463,9 +466,9 @@ export default function BoardSettings({
           page_id: page_id,
           actor_id: user.id,
           action: `Updated Roadmap Column: ${newColumnName}`,
-          changes: { 
+          changes: {
             old: oldColumn,
-            new: { ...oldColumn, name: newColumnName }
+            new: { ...oldColumn, name: newColumnName },
           },
         });
       }
@@ -503,7 +506,7 @@ export default function BoardSettings({
 
       if (error) throw error;
 
-      const deletedColumn = boardColumns.find(col => col.id === columnId);
+      const deletedColumn = boardColumns.find((col) => col.id === columnId);
       setBoardColumns((prev) => prev.filter((col) => col.id !== columnId));
 
       // Create audit log for column deletion
@@ -570,9 +573,17 @@ export default function BoardSettings({
         page_id: page_id,
         actor_id: user.id,
         action: "Reordered Roadmap Columns",
-        changes: { 
-          old_order: boardColumns.map(col => ({ id: col.id, name: col.name, position: col.position })),
-          new_order: newColumns.map((col, index) => ({ id: col.id, name: col.name, position: index + 1 }))
+        changes: {
+          old_order: boardColumns.map((col) => ({
+            id: col.id,
+            name: col.name,
+            position: col.position,
+          })),
+          new_order: newColumns.map((col, index) => ({
+            id: col.id,
+            name: col.name,
+            position: index + 1,
+          })),
         },
       });
 
@@ -612,6 +623,30 @@ export default function BoardSettings({
         {/* Board Settings Tab */}
         {activeTab === "board" && (
           <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+            <div className="mb-6">
+              {boardForm.is_public ? (
+                <div className="flex items-center gap-2 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
+                  <GlobeIcon className="h-5 w-5" />
+                  <div>
+                    <p className="font-medium">Public Board</p>
+                    <p className="text-sm text-green-600 dark:text-green-500">
+                      Anyone can view and vote on items in this board
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
+                  <LockClosedIcon className="h-5 w-5" />
+                  <div>
+                    <p className="font-medium">Private Board</p>
+                    <p className="text-sm text-red-600 dark:text-red-500">
+                      Only you and your team can see and manage this board
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
             <form onSubmit={handleUpdateBoard} className="space-y-6">
               <div>
                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -682,39 +717,54 @@ export default function BoardSettings({
                       {slugError}
                     </p>
                   )}
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Public URL:{" "}
-                    <a
-                      href={`${getPageUrl(page, settings)}/roadmap/${
-                        boardForm.slug
-                      }`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 underline"
-                    >
-                      {getPageUrl(page, settings)}/roadmap/{boardForm.slug}
-                    </a>
-                  </p>
+                  <div className="space-y-2">
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      Public URL:{" "}
+                      <a
+                        href={`${getPageUrl(page, settings)}/roadmap/${
+                          boardForm.slug
+                        }`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 underline"
+                      >
+                        {getPageUrl(page, settings)}/roadmap/{boardForm.slug}
+                      </a>
+                    </p>
+                    {boardForm.is_public && (
+                      <p className="text-sm text-amber-600 dark:text-amber-400 flex items-start gap-1">
+                        <svg
+                          className="h-4 w-4 mt-0.5 flex-shrink-0"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                        Changing the slug will affect the public URL since this
+                        board is public. Users with bookmarks or shared links
+                        will need the updated URL.
+                      </p>
+                    )}
+                  </div>
                 </div>
               </div>
 
               <div>
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={boardForm.is_public}
-                    onChange={(e) =>
-                      setBoardForm((prev) => ({
-                        ...prev,
-                        is_public: e.target.checked,
-                      }))
-                    }
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-                  />
-                  <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">
-                    Make this board public (users can view and vote on items)
-                  </span>
-                </label>
+                <SwitchComponent
+                  title="Public Board"
+                  message="Make this board public (users can view and vote on items)"
+                  enabled={boardForm.is_public}
+                  onChange={(value) =>
+                    setBoardForm((prev) => ({
+                      ...prev,
+                      is_public: value,
+                    }))
+                  }
+                />
               </div>
 
               <div className="flex justify-end">
diff --git a/apps/web/utils/email.ts b/apps/web/utils/email.ts
@@ -4,7 +4,6 @@ import {
   convertMarkdownToHtml,
   convertMarkdownToPlainText,
 } from "@changes-page/utils";
-import Stripe from "stripe";
 import { getPageUrl, getPostUrl } from "./hooks/usePageUrl";
 import inngestClient from "./inngest";
 import { getUserById } from "./useDatabase";
@@ -62,11 +61,7 @@ export const sendPostEmailToSubscribers = async (
   }
 
   const user = await getUserById(page.user_id);
-  if (
-    !user?.stripe_subscription ||
-    (user?.stripe_subscription as unknown as Stripe.Subscription)?.status ===
-      "canceled"
-  ) {
+  if (!user?.has_active_subscription) {
     console.log(
       "sendPostEmailToSubscribers: Account not subscribed to email notifications"
     );
diff --git a/apps/web/utils/useDatabase.ts b/apps/web/utils/useDatabase.ts
@@ -306,6 +306,7 @@ export const reportEmailUsage = async (
     `Update email usage count for user: ${user_id} to ${count}`,
     idempotencyKey
   );
+
   try {
     await stripe.subscriptionItems.createUsageRecord(
       emailSubscriptionItem.id,
diff --git a/packages/supabase/migrations/18_roadmap.sql b/packages/supabase/migrations/18_roadmap.sql
@@ -5,7 +5,7 @@ create table roadmap_boards (
   title text not null,
   description text,
   slug text not null,
-  is_public boolean not null default true,
+  is_public boolean not null default false,
   created_at timestamp with time zone default timezone('utc'::text, now()) not null,
   updated_at timestamp with time zone default timezone('utc'::text, now()) not null
 );
