Release corrections: candidate URL exposure, onboarding notification honesty, pasted link cleanup (#101)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/onboarding/NotificationsStep.test.tsx

@@ -180,10 +180,22 @@ describe('onboarding step 3', () => {
     expect(requestPermission).not.toHaveBeenCalled()
   })
 
-  it('"Turn on notifications" finishes onboarding and goes Home while notifications are unavailable', async () => {
+  it('"Turn on notifications" says plainly that nothing was turned on while notifications are unavailable', async () => {
     const server = await renderApp()
     fireEvent.click(turnOn())
 
+    expect(await screen.findByRole('status')).toHaveTextContent(
+      "Notifications aren't on yet: MealQuest can't send them until the notification feature ships, so nothing was turned on.",
+    )
+    // Not a silent success: onboarding is not finished behind the household's back.
+    expect(server.held).toHaveLength(0)
+    expect(screen.getByRole('heading', { level: 1, name: 'Stay in the loop' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Turn on notifications' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Maybe later' })).not.toBeInTheDocument()
+
+    const finish = screen.getByRole('button', { name: 'Finish setting up' })
+    expectMinHitArea(finish)
+    fireEvent.click(finish)
     await vi.waitFor(() => expect(server.held).toHaveLength(1))
     expect(server.held[0]!.body).toEqual({ onboarding_completed: true })
     completed(server.held[0]!)
@@ -193,6 +205,19 @@ describe('onboarding step 3', () => {
     expect(requestPermission).not.toHaveBeenCalled()
   })
 
+  it('"Turn on notifications" says the browser blocked them when denied, then finishes on request', async () => {
+    const server = await renderStep(() => Promise.resolve('denied'))
+    fireEvent.click(turnOn())
+
+    expect(await screen.findByRole('status')).toHaveTextContent("Notifications aren't on: this browser blocked them.")
+    expect(server.held).toHaveLength(0)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Finish setting up' }))
+    await vi.waitFor(() => expect(server.held).toHaveLength(1))
+    completed(server.held[0]!)
+    expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+  })
+
   it('"Turn on notifications" asks the injected enableNotifications first, then finishes', async () => {
     let answer: (result: 'enabled') => void = () => {}
     const enable = vi.fn<EnableNotifications>(

web/src/onboarding/NotificationsStep.tsx

@@ -14,11 +14,21 @@ export type NotificationsResult = 'enabled' | 'denied' | 'unavailable'
 export type EnableNotifications = () => Promise<NotificationsResult>
 
 // TODO(Feature 19): Web Push. Until it is wired, notifications cannot be
-// turned on, and nothing asks the browser for permission.
+// turned on, and nothing asks the browser for permission. This placeholder
+// is the interim state: "Turn on notifications" answers 'unavailable', and
+// the step tells the household plainly that nothing was turned on.
 export function notificationsUnavailable(): Promise<NotificationsResult> {
   return Promise.resolve('unavailable')
 }
 
+// notOnReasons says why notifications are not on after asking, for each
+// result other than 'enabled'.
+const notOnReasons: Record<Exclude<NotificationsResult, 'enabled'>, string> = {
+  unavailable:
+    "Notifications aren't on yet: MealQuest can't send them until the notification feature ships, so nothing was turned on. You can finish setting up now.",
+  denied: "Notifications aren't on: this browser blocked them. You can allow them in the browser's settings later.",
+}
+
 const topics: { icon: LucideIcon; name: string; meaning: string }[] = [
   {
     icon: CalendarDays,
@@ -49,16 +59,19 @@ export type NotificationsStepProps = {
 }
 
 // NotificationsStep is onboarding step 3: what MealQuest notifies about, the
-// iOS install hint, and finishing onboarding. Either button records that
-// onboarding is finished and goes Home. When the server refuses because the
-// household has fewer than three Regulars, the reason shows with a way back
-// to step 2 to add them.
+// iOS install hint, and finishing onboarding. "Maybe later", and "Turn on
+// notifications" once they are enabled, record that onboarding is finished
+// and go Home. When they are not enabled, the step says so and offers only
+// "Finish setting up". When the server refuses because the household has
+// fewer than three Regulars, the reason shows with a way back to step 2 to
+// add them.
 export function NotificationsStep({ enableNotifications = notificationsUnavailable }: NotificationsStepProps) {
   const navigate = useNavigate()
   const complete = useCompleteOnboarding()
   const [enabling, setEnabling] = useState(false)
   const [problem, setProblem] = useState<string | null>(null)
   const [fewRegulars, setFewRegulars] = useState(false)
+  const [notOn, setNotOn] = useState<string | null>(null)
   const busy = enabling || complete.isPending
 
   async function finish() {
@@ -80,14 +93,19 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
   async function turnOn() {
     clearProblem()
     setEnabling(true)
+    let result: NotificationsResult
     try {
-      await enableNotifications()
+      result = await enableNotifications()
     } catch (error) {
       setProblem(`Could not turn on notifications: ${(error as Error).message}`)
       return
     } finally {
       setEnabling(false)
     }
+    if (result !== 'enabled') {
+      setNotOn(notOnReasons[result])
+      return
+    }
     await finish()
   }
 
@@ -101,14 +119,22 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
       step={3}
       title="Stay in the loop"
       action={
-        <div className={styles.actions}>
-          <Button className={styles.action} disabled={busy} onClick={() => void turnOn()}>
-            Turn on notifications
-          </Button>
-          <Button variant="outline" className={styles.action} disabled={busy} onClick={later}>
-            Maybe later
-          </Button>
-        </div>
+        notOn ? (
+          <div className={styles.actions}>
+            <Button className={styles.action} disabled={busy} onClick={later}>
+              Finish setting up
+            </Button>
+          </div>
+        ) : (
+          <div className={styles.actions}>
+            <Button className={styles.action} disabled={busy} onClick={() => void turnOn()}>
+              Turn on notifications
+            </Button>
+            <Button variant="outline" className={styles.action} disabled={busy} onClick={later}>
+              Maybe later
+            </Button>
+          </div>
+        )
       }
     >
       <p className={styles.helper}>MealQuest can let the household know when there&apos;s something to look at:</p>
@@ -128,6 +154,11 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
       <div className={styles.hint}>
         <InstallHint />
       </div>
+      {notOn && (
+        <p role="status" className={styles.notOn}>
+          {notOn}
+        </p>
+      )}
       {problem && (
         <p role="alert" className={styles.problem}>
           {problem}

web/src/onboarding/Onboarding.module.css

@@ -229,6 +229,18 @@
   color: var(--color-accent-700);
 }
 
+/* Step 3: why notifications are not on after asking for them. */
+.notOn {
+  margin: var(--space-4) 0 0;
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--color-text);
+}
+
 /* Step 3: back to step 2 when the server wants more Regulars. */
 .recover {
   margin-top: var(--space-3);

web/src/sw.test.ts

@@ -15,12 +15,16 @@ describe('service worker activation', () => {
     vi.unstubAllGlobals()
   })
 
-  it('deletes the v1 API cache and keeps the precache, photo and font caches', async () => {
-    // A household on the v1 worker: its API cache held dinners with the
-    // pasted recipe_url; its photos and fonts are not in the precache.
+  it('deletes the v1 and v2 API caches and keeps the current caches', async () => {
+    // A household that ran the v1 and v2 workers: the v1 API cache held
+    // dinners with the pasted recipe_url, the v2 one recipe candidates whose
+    // candidate_id was the full URL. Its photos and fonts are not in the
+    // precache, and the current API cache may already exist.
     const names = [
       'mealquest-precache-v1',
       'mealquest-api-v1',
+      'mealquest-api-v2',
+      'mealquest-api-v3',
       'mealquest-media-v1',
       'mealquest-fonts-v1',
       'other-app-cache',
@@ -42,6 +46,7 @@ describe('service worker activation', () => {
 
     expect(pending).toHaveLength(1)
     expect(cacheStorage.delete).toHaveBeenCalledWith('mealquest-api-v1')
-    expect(cacheStorage.delete).toHaveBeenCalledTimes(1)
+    expect(cacheStorage.delete).toHaveBeenCalledWith('mealquest-api-v2')
+    expect(cacheStorage.delete).toHaveBeenCalledTimes(2)
   })
 })

web/src/sw/routes.test.ts

@@ -147,12 +147,13 @@ describe('cache names', () => {
     for (const name of Object.values(cacheNames)) expect(name).toMatch(/^mealquest-/)
   })
 
-  it('retire only the v1 API cache', () => {
-    // v1 API responses held dinners with the pasted recipe_url, which can
-    // carry a personal token; offline, the worker would still serve them.
+  it('retire only the v1 and v2 API caches', () => {
+    // v1 API responses held dinners with the pasted recipe_url and v2 ones
+    // recipe candidates whose candidate_id was the full URL; either can carry
+    // a personal token, and offline the worker would still serve them.
     // The precache, photos and fonts keep their v1 caches.
     expect(cacheNames).toEqual({
-      api: 'mealquest-api-v2',
+      api: 'mealquest-api-v3',
       media: 'mealquest-media-v1',
       fonts: 'mealquest-fonts-v1',
     })

web/src/sw/routes.ts

@@ -29,9 +29,10 @@ export interface RouteRequest {
 // photos and fonts stay available offline.
 export const cacheVersions = {
   precache: 'v1',
-  // v2 retires the v1 API cache, whose dinner responses still carried the
-  // pasted recipe_url.
-  api: 'v2',
+  // v2 retired the v1 API cache, whose dinner responses still carried the
+  // pasted recipe_url; v3 retires the v2 API cache, whose recipe-candidate
+  // responses used the full URL as candidate_id.
+  api: 'v3',
   media: 'v1',
   fonts: 'v1',
 } as const