feat(mass-mail): make announcements opt-in, and stoppable at any time (#261)

Author: jouwdan

apps/community/app/(board)/notifications/preferences/page.tsx

@@ -1,10 +1,14 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
-import { NotificationPreferencesForm } from '@/components/account/notification-forms'
+import {
+  AnnouncementsOptInForm,
+  NotificationPreferencesForm,
+} from '@/components/account/notification-forms'
 import { PushDeviceForm } from '@/components/account/push-device-form'
 import { BoardNotice } from '@/components/shell/board-notice'
 import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
 import { getActor } from '@/server/context'
 import { getTranslator, tr } from '@/server/i18n'
 import { audiencesForActor } from '@/server/notification-audience'
@@ -34,6 +38,9 @@ export default async function NotificationPreferencesPage({
     await Promise.all(audiences.map((audience) => service.preferences(userId, audience)))
   ).flat()
 
+  const { memberSettings } = getContainer()
+  const settings = memberSettings === null ? null : await memberSettings.read(userId)
+
   const push = await pushAvailability()
   const view = buildPreferencesView(rows, await getTranslator())
   const notice = notificationNotice(query, await getTranslator())
@@ -60,6 +67,13 @@ export default async function NotificationPreferencesPage({
         push={push.enabled}
         copy={notificationFormsCopy(await getTranslator())}
       />
+
+      {settings !== null && (
+        <AnnouncementsOptInForm
+          optedIn={settings.massMailOptInAt !== null}
+          copy={notificationFormsCopy(await getTranslator())}
+        />
+      )}
     </PanelPage>
   )
 }

apps/community/app/(board)/unsubscribe/page.tsx

@@ -60,9 +60,11 @@ export default async function UnsubscribePage({
           <UnsubscribeConfirmForm
             token={token}
             description={
-              claim.scope === 'email'
-                ? await tr('page.unsubscribe.emailScope')
-                : await tr('page.unsubscribe.targetScope')
+              claim.scope === 'mass-mail'
+                ? await tr('page.unsubscribe.massMailScope')
+                : claim.scope === 'email'
+                  ? await tr('page.unsubscribe.emailScope')
+                  : await tr('page.unsubscribe.targetScope')
             }
             copy={followFormCopy(translator)}
           />

apps/community/app/admin/users/mail/page.tsx

@@ -58,7 +58,7 @@ export default async function AdminMassMailPage() {
         <p>{await tr('page.before-press-it')}</p>
         <ul className="flex list-disc flex-col gap-1 pl-4">
           <li>{translator.t('adminUsers.massMailQueued')}</li>
-          <li>{translator.t('adminUsers.massMailNoUnsubscribe')}</li>
+          <li>{translator.t('adminUsers.massMailOptIn')}</li>
           <li>{translator.t('adminUsers.massMailContinues')}</li>
           <li>{await tr('page.email-cannot-be-unsent')}</li>
         </ul>

apps/community/src/components/account/notification-forms.tsx

@@ -6,6 +6,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   markAllNotificationsReadAction,
   markNotificationReadAction,
+  saveMassMailOptInAction,
   saveNotificationPreferencesAction,
 } from '@/server/notification-actions'
 
@@ -155,3 +156,47 @@ export function NotificationPreferencesForm({
     </form>
   )
 }
+
+export function AnnouncementsOptInForm({ optedIn, copy }: { optedIn: boolean; copy: Copy }) {
+  const [state, action] = useActionState(saveMassMailOptInAction, EMPTY_STATE)
+
+  return (
+    <form
+      action={action}
+      className="flex flex-col gap-4 rounded-lg border border-border bg-card p-5"
+    >
+      <FormError message={state.error} />
+
+      <fieldset className="flex flex-col gap-3">
+        <legend className="text-sm font-medium">
+          {fromCopy(copy, 'accountForm.announcements.legend')}
+        </legend>
+
+        <label className="flex items-start gap-3 text-sm">
+          <input
+            type="checkbox"
+            name="announcements"
+            defaultChecked={optedIn}
+            className={`mt-1 ${CHECKBOX}`}
+          />
+          <span>
+            <span className="font-medium">{fromCopy(copy, 'accountForm.announcements.title')}</span>
+            <span className="block text-muted-foreground">
+              {fromCopy(copy, 'accountForm.announcements.description')}
+            </span>
+          </span>
+        </label>
+      </fieldset>
+
+      <p className="text-xs text-muted-foreground">
+        {fromCopy(copy, 'accountForm.announcements.blurb')}
+      </p>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.announcements.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}

apps/community/src/components/auth/register-form.tsx

@@ -105,6 +105,24 @@ export function RegisterForm({
         </>
       )}
 
+      <label className="flex items-start gap-2 text-sm text-muted-foreground">
+        <input
+          type="checkbox"
+          name="announcements"
+          value="1"
+          defaultChecked={state.values?.announcements === '1'}
+          className="mt-0.5 size-4 rounded border-input accent-primary"
+        />
+        <span>
+          <span className="block text-foreground">
+            {fromCopy(copy, 'authForm.register.announcements')}
+          </span>
+          <span className="block text-xs">
+            {fromCopy(copy, 'authForm.register.announcementsHint')}
+          </span>
+        </span>
+      </label>
+
       {terms !== null && (
         <label className="flex items-start gap-2 text-sm text-muted-foreground">
           <input

apps/community/src/server/auth-actions.test.ts

@@ -229,6 +229,26 @@ describe('registerAction', () => {
     expect(state.values?.terms).toBeUndefined()
   })
 
+  it('records consent when the announcements box is ticked, and not otherwise', async () => {
+    const consent: Array<{ userId: number; optIn: boolean }> = []
+    ;(getContainer() as unknown as Record<string, unknown>).memberSettings = {
+      saveMassMailOptIn: async (input: { userId: number; optIn: boolean }) => {
+        consent.push(input)
+      },
+    }
+
+    await redirectOf(registerAction(EMPTY_STATE, form({ ...CREDS, announcements: '1' })))
+    expect(consent).toEqual([{ userId: expect.any(Number), optIn: true }])
+
+    await redirectOf(
+      registerAction(
+        EMPTY_STATE,
+        form({ ...CREDS, username: 'quiet', email: 'quiet@example.com' }),
+      ),
+    )
+    expect(consent).toHaveLength(1)
+  })
+
   it('spends no allowance on a form a person simply got wrong', async () => {
     await registerAction(EMPTY_STATE, form({ ...CREDS, terms: '' }))
 

apps/community/src/server/auth-actions.ts

@@ -93,7 +93,13 @@ export async function registerAction(_prev: FormState, form: FormData): Promise<
   const email = field(form, 'email')
   const password = field(form, 'password')
   const accepted = field(form, 'terms') !== ''
-  const values = { username, email, ...(accepted ? { terms: '1' } : {}) }
+  const announcements = field(form, 'announcements') !== ''
+  const values = {
+    username,
+    email,
+    ...(accepted ? { terms: '1' } : {}),
+    ...(announcements ? { announcements: '1' } : {}),
+  }
 
   const identity = await configuredIdentity()
 
@@ -142,6 +148,11 @@ export async function registerAction(_prev: FormState, form: FormData): Promise<
 
     if (fields !== null) await fields.applyRegistration(result.account.id, fieldValues)
 
+    const { memberSettings } = getContainer()
+    if (announcements && memberSettings !== null) {
+      await memberSettings.saveMassMailOptIn({ userId: result.account.id, optIn: true })
+    }
+
     if (result.verificationToken !== undefined) {
       verification = {
         token: result.verificationToken,

apps/community/src/server/notification-actions.test.ts

@@ -34,6 +34,7 @@ vi.mock('./context', () => ({ getActor: async () => actorRef.current }))
 const {
   markAllNotificationsReadAction,
   markNotificationReadAction,
+  saveMassMailOptInAction,
   saveNotificationPreferencesAction,
 } = await import('./notification-actions')
 const { EMPTY_STATE } = await import('./auth-form-state')
@@ -139,7 +140,16 @@ class FakeNotifications implements NotificationRepository {
   }
 }
 
+class FakeMemberSettings {
+  readonly consent: Array<{ userId: number; optIn: boolean }> = []
+
+  async saveMassMailOptIn(input: { userId: number; optIn: boolean }) {
+    this.consent.push(input)
+  }
+}
+
 let notifications: FakeNotifications
+let memberSettings: FakeMemberSettings
 
 async function actorFor(groupId: number, userId: number | null): Promise<Actor> {
   const source = new InMemoryAuthorizationSource(SEED_BOARD)
@@ -175,8 +185,9 @@ async function run(
 
 beforeEach(async () => {
   notifications = new FakeNotifications()
+  memberSettings = new FakeMemberSettings()
   actorRef.current = await actorFor(SEED_GROUP.registered, 7)
-  installTestContainer({ container: { notifications } })
+  installTestContainer({ container: { notifications, memberSettings } })
 })
 
 describe('marking read', () => {
@@ -272,3 +283,34 @@ describe('saving preferences', () => {
     expect(result.redirectedTo).toBe('/notifications/preferences?saved=1')
   })
 })
+
+describe('the announcements opt-in', () => {
+  it('records consent for the signed-in member, never for the id in the form', async () => {
+    const result = await run(
+      saveMassMailOptInAction,
+      form([
+        ['announcements', '1'],
+        ['userId', '1'],
+      ]),
+    )
+
+    expect(result.redirectedTo).toBe('/notifications/preferences?saved=announcements')
+    expect(memberSettings.consent).toEqual([{ userId: 7, optIn: true }])
+  })
+
+  it('reads an unticked box as consent withdrawn', async () => {
+    const result = await run(saveMassMailOptInAction, form([]))
+
+    expect(result.redirectedTo).toBe('/notifications/preferences?saved=announcements')
+    expect(memberSettings.consent).toEqual([{ userId: 7, optIn: false }])
+  })
+
+  it('refuses a visitor who is not signed in', async () => {
+    actorRef.current = await actorFor(SEED_GROUP.guest, null)
+
+    const result = await run(saveMassMailOptInAction, form([['announcements', '1']]))
+
+    expect(result.error).toBeDefined()
+    expect(memberSettings.consent).toEqual([])
+  })
+})

apps/community/src/server/notification-actions.ts

@@ -7,6 +7,7 @@ import { msg } from '@meith/i18n'
 import type { NotificationService } from '@meith/notifications'
 
 import type { FormState } from './auth-form-state'
+import { getContainer } from './container'
 import { getActor } from './context'
 import { formStateReporter } from './form-state-reporter'
 import { positiveInt } from './form-values'
@@ -62,6 +63,30 @@ export async function markAllNotificationsReadAction(
   redirect('/notifications?read=all')
 }
 
+export async function saveMassMailOptInAction(
+  _prev: FormState,
+  form: FormData,
+): Promise<FormState> {
+  try {
+    const actor = await getActor()
+    if (actor.userId === null) throw new ForbiddenError(msg('error.app.must-logged'))
+
+    const { memberSettings } = getContainer()
+    if (memberSettings === null) {
+      throw new ForbiddenError(msg('error.app.board-running-in-memory-sample-data-9'))
+    }
+
+    await memberSettings.saveMassMailOptIn({
+      userId: actor.userId,
+      optIn: form.get('announcements') !== null,
+    })
+  } catch (err) {
+    return toFormState(err)
+  }
+
+  redirect('/notifications/preferences?saved=announcements')
+}
+
 export async function saveNotificationPreferencesAction(
   _prev: FormState,
   form: FormData,

apps/community/src/server/profile-fields.test.ts

@@ -107,6 +107,7 @@ class FakeSettings implements MemberSettingsRepository {
     website: null,
     bio: null,
     displayGroupId: null,
+    massMailOptInAt: null,
   }
   async read() {
     return this.row
@@ -117,6 +118,7 @@ class FakeSettings implements MemberSettingsRepository {
   async saveDisplayGroup() {}
   async saveProfile() {}
   async saveOptions() {}
+  async saveMassMailOptIn() {}
   async adoptEmail() {
     return true
   }