feat(release-notes): enhance unsubscribe functionality and user experience (#105)

Author: viv-helix

src/index.jsx

@@ -1,6 +1,9 @@
 import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig, getPath,
 } from '@edx/frontend-platform';
+import {
+  ensureAuthenticatedUser, fetchAuthenticatedUser, getAuthenticatedUser, hydrateAuthenticatedUser,
+} from '@edx/frontend-platform/auth';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 import React, { StrictMode, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -48,6 +51,11 @@ const queryClient = new QueryClient({
   },
 });
 
+const isReleaseNoteUnsubscribePath = () => {
+  const normalizedPath = global.location.pathname.replace(/\/$/, '');
+  return normalizedPath.endsWith('/release-notes/unsubscribe');
+};
+
 const App = () => {
   useEffect(() => {
     if (process.env.HOTJAR_APP_ID) {
@@ -189,6 +197,19 @@ initialize({
         ENABLE_RELEASE_NOTES_BANNER: process.env.ENABLE_RELEASE_NOTES_BANNER || 'false',
       }, 'CourseAuthoringConfig');
     },
+    auth: async (requireUser, hydrateUser) => {
+      if (isReleaseNoteUnsubscribePath()) {
+        await fetchAuthenticatedUser();
+      } else if (requireUser) {
+        await ensureAuthenticatedUser(globalThis.location.href);
+      } else {
+        await fetchAuthenticatedUser();
+      }
+
+      if (hydrateUser && getAuthenticatedUser() !== null) {
+        hydrateAuthenticatedUser();
+      }
+    },
   },
   messages,
   requireAuthenticatedUser: true,

src/release-notes/data/api.js

@@ -1,5 +1,5 @@
 import { getConfig, camelCaseObject } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getAuthenticatedHttpClient, getHttpClient } from '@edx/frontend-platform/auth';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
@@ -27,7 +27,7 @@ export async function deleteReleaseNote(id) {
   return camelCaseObject(data);
 }
 
-export async function unsubscribeFromReleaseNoteEmails() {
-  const { data } = await getAuthenticatedHttpClient().get(getUnsubscribeApiUrl());
+export async function unsubscribeFromReleaseNoteEmails(token) {
+  const { data } = await getHttpClient().post(getUnsubscribeApiUrl(), { token });
   return camelCaseObject(data);
 }

src/release-notes/data/api.test.js

@@ -1,5 +1,5 @@
 import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getAuthenticatedHttpClient, getHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
 
 import { initializeMocks } from '../../testUtils';
@@ -58,11 +58,13 @@ describe('release-notes api', () => {
     await expect(getReleaseNotes()).rejects.toBeTruthy();
   });
 
-  test('unsubscribeFromReleaseNoteEmails issues authenticated GET', async () => {
+  test('unsubscribeFromReleaseNoteEmails posts token without authentication', async () => {
     const expectedUrl = new URL('/api/release_notes/v1/email/unsubscribe/', getConfig().STUDIO_BASE_URL).href;
-    mock.onGet(expectedUrl).reply(200, { message: 'unsubscribed' });
-    const res = await unsubscribeFromReleaseNoteEmails();
+    const unauthenticatedMock = new MockAdapter(getHttpClient());
+    unauthenticatedMock.onPost(expectedUrl).reply(200, { message: 'unsubscribed' });
+    const res = await unsubscribeFromReleaseNoteEmails('signed-token');
     expect(res.message).toBe('unsubscribed');
-    expect(mock.history.get[0].url).toBe(expectedUrl);
+    expect(unauthenticatedMock.history.post[0].url).toBe(expectedUrl);
+    expect(JSON.parse(unauthenticatedMock.history.post[0].data)).toEqual({ token: 'signed-token' });
   });
 });

src/release-notes/unsubscribe/ReleaseNoteUnsubscribe.jsx

@@ -1,20 +1,28 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Alert, Button, Card, Container, Spinner,
 } from '@openedx/paragon';
 import { Info, CheckCircle, Email } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { useSearchParams } from 'react-router-dom';
 import { unsubscribeFromReleaseNoteEmails } from '../data/api';
 import messages from './messages';
 
 const ReleaseNoteUnsubscribe = () => {
   const intl = useIntl();
-  const [status, setStatus] = useState('idle'); // idle, loading, success, error
+  const [searchParams] = useSearchParams();
+  const token = useMemo(() => searchParams.get('token'), [searchParams]);
+  const [status, setStatus] = useState(token ? 'idle' : 'invalid');
 
   const handleUnsubscribe = () => {
+    if (!token) {
+      setStatus('invalid');
+      return;
+    }
+
     setStatus('loading');
 
-    unsubscribeFromReleaseNoteEmails()
+    unsubscribeFromReleaseNoteEmails(token)
       .then(() => {
         setStatus('success');
       })
@@ -25,6 +33,12 @@ const ReleaseNoteUnsubscribe = () => {
 
   return (
     <Container size="sm" className="d-flex align-items-center justify-content-center py-5">
+      {status === 'invalid' && (
+        <Alert variant="danger" icon={Info}>
+          <Alert.Heading>{intl.formatMessage(messages.unsubscribeInvalidTitle)}</Alert.Heading>
+          <p className="mb-0">{intl.formatMessage(messages.unsubscribeInvalid)}</p>
+        </Alert>
+      )}
       {status === 'idle' && (
         <Card className="text-center shadow-sm" style={{ maxWidth: '480px' }}>
           <Card.Section className="p-4">

src/release-notes/unsubscribe/ReleaseNoteUnsubscribe.test.jsx

@@ -7,35 +7,49 @@ import ReleaseNoteUnsubscribe from './ReleaseNoteUnsubscribe';
 import messages from './messages';
 import * as api from '../data/api';
 
+const renderUnsubscribePage = (search = '') => render(
+  <ReleaseNoteUnsubscribe />,
+  {
+    path: '/release-notes/unsubscribe',
+    routerProps: { initialEntries: [`/release-notes/unsubscribe${search}`] },
+  },
+);
+
 describe('ReleaseNoteUnsubscribe', () => {
   beforeEach(() => {
     initializeMocks();
   });
 
-  test('renders the idle confirmation state', () => {
-    render(<ReleaseNoteUnsubscribe />);
+  test('renders invalid state when token is missing', () => {
+    renderUnsubscribePage();
+    expect(screen.getByText(messages.unsubscribeInvalidTitle.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.unsubscribeInvalid.defaultMessage)).toBeInTheDocument();
+  });
+
+  test('renders the idle confirmation state when token is present', () => {
+    renderUnsubscribePage('?token=signed-token');
     expect(screen.getByText(messages.unsubscribeTitle.defaultMessage)).toBeInTheDocument();
     expect(screen.getByText(messages.unsubscribeConfirmation.defaultMessage)).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: messages.unsubscribeButton.defaultMessage }),
     ).toBeInTheDocument();
   });
 
-  test('calls unsubscribeFromReleaseNoteEmails and shows success state on success', async () => {
+  test('calls unsubscribeFromReleaseNoteEmails with token and shows success state on success', async () => {
     const spy = jest.spyOn(api, 'unsubscribeFromReleaseNoteEmails').mockResolvedValue({ message: 'ok' });
-    render(<ReleaseNoteUnsubscribe />);
+    renderUnsubscribePage('?token=signed-token');
 
     fireEvent.click(screen.getByRole('button', { name: messages.unsubscribeButton.defaultMessage }));
 
     await waitFor(() => {
       expect(screen.getByText(messages.unsubscribeSuccessTitle.defaultMessage)).toBeInTheDocument();
     });
-    expect(spy).toHaveBeenCalledWith();
+    expect(spy).toHaveBeenCalledWith('signed-token');
   });
 
   test('shows error state and allows retry on failure', async () => {
     const spy = jest.spyOn(api, 'unsubscribeFromReleaseNoteEmails').mockRejectedValue(new Error('boom'));
-    render(<ReleaseNoteUnsubscribe />);
+    renderUnsubscribePage('?token=signed-token');
 
     fireEvent.click(screen.getByRole('button', { name: messages.unsubscribeButton.defaultMessage }));
 

src/release-notes/unsubscribe/messages.js

@@ -35,7 +35,15 @@ const messages = defineMessages({
   },
   unsubscribeError: {
     id: 'release-notes.unsubscribe.error',
-    defaultMessage: 'We were unable to process your unsubscribe request. Please sign in with the account that received the email and try again.',
+    defaultMessage: 'We were unable to process your unsubscribe request. Please use the unsubscribe link from your Release Notes email and try again.',
+  },
+  unsubscribeInvalidTitle: {
+    id: 'release-notes.unsubscribe.invalid.title',
+    defaultMessage: 'Invalid Unsubscribe Link',
+  },
+  unsubscribeInvalid: {
+    id: 'release-notes.unsubscribe.invalid',
+    defaultMessage: 'This unsubscribe link is invalid or incomplete. Please open the unsubscribe link from your Release Notes email.',
   },
   unsubscribeRetry: {
     id: 'release-notes.unsubscribe.retry',