Fix status URL query param handling in my-data form

Author: webstackdev

src/components/Forms/Privacy/client/__tests__/index.spec.ts

@@ -51,11 +51,7 @@ describe('PrivacyForm behavior', () => {
       container,
       component: PrivacyForm,
       moduleSpecifier: '@components/Forms/Privacy/client/index',
-      args: {
-        props: {
-          status: undefined,
-        },
-      },
+      args: {},
       waitForReady: async (element: PrivacyFormElementInstance) => {
         window.history.replaceState({}, '', 'http://localhost/privacy/my-data')
         element.initialize()
@@ -83,11 +79,7 @@ describe('PrivacyForm behavior', () => {
       container,
       component: PrivacyForm,
       moduleSpecifier: '@components/Forms/Privacy/client/index',
-      args: {
-        props: {
-          status: undefined,
-        },
-      },
+      args: {},
       waitForReady: async (element: PrivacyFormElementInstance) => {
         window.history.replaceState({}, '', 'http://localhost/privacy/my-data')
         element.initialize()
@@ -119,11 +111,7 @@ describe('PrivacyForm behavior', () => {
       container,
       component: PrivacyForm,
       moduleSpecifier: '@components/Forms/Privacy/client/index',
-      args: {
-        props: {
-          status: undefined,
-        },
-      },
+      args: {},
       waitForReady: async (element: PrivacyFormElementInstance) => {
         window.history.replaceState({}, '', 'http://localhost/privacy/my-data?token=unit-test-token')
         ;(element as unknown as { downloadJson: typeof downloadJsonSpy }).downloadJson = downloadJsonSpy

src/components/Forms/Privacy/client/index.ts

@@ -16,6 +16,28 @@ type DsarVerifyResult =
 
 type RequestDataResult = { message: string }
 
+const statusMessages: Record<string, { type: MessageType; message: string }> = {
+  sent: {
+    type: 'success',
+    message:
+      'Verification email sent! Please check your inbox and click the link to complete your request.',
+  },
+  invalid: {
+    type: 'error',
+    message: 'Invalid or expired verification link. Please submit a new request.',
+  },
+  expired: {
+    type: 'error',
+    message: 'This verification link has expired. Please submit a new request.',
+  },
+  'already-completed': { type: 'info', message: 'This request has already been completed.' },
+  deleted: {
+    type: 'success',
+    message: 'Your data has been successfully deleted from our systems.',
+  },
+  error: { type: 'error', message: 'An error occurred. Please try again or contact support.' },
+}
+
 export class PrivacyFormElement extends LitElement {
   static readonly registeredName = 'privacy-form'
 
@@ -67,7 +89,7 @@ export class PrivacyFormElement extends LitElement {
       this.bindEvents()
       this.isInitialized = true
 
-      this.focusStatusMessage()
+      this.renderStatusFromQueryString()
       void this.handleVerificationToken()
     } catch (error) {
       handleScriptError(error, context)
@@ -114,12 +136,6 @@ export class PrivacyFormElement extends LitElement {
     })
   }
 
-  private focusStatusMessage(): void {
-    if (this.statusMessage) {
-      this.statusMessage.focus()
-    }
-  }
-
   private setMessage(target: HTMLElement, message: string, type: MessageType): void {
     target.setAttribute('role', type === 'error' ? 'alert' : 'status')
     target.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite')
@@ -154,6 +170,18 @@ export class PrivacyFormElement extends LitElement {
     target.focus()
   }
 
+  private renderStatusFromQueryString(): void {
+    if (!this.statusMessage) return
+
+    const status = new URLSearchParams(window.location.search).get('status')
+    if (!status) return
+
+    const statusMessage = statusMessages[status]
+    if (!statusMessage) return
+
+    this.setMessage(this.statusMessage, statusMessage.message, statusMessage.type)
+  }
+
   private resolveTokenFromQueryString(): string {
     const params = new URLSearchParams(window.location.search)
     return params.get('token') ?? ''

src/components/Forms/Privacy/index.astro

@@ -1,15 +1,7 @@
 ---
-import { statusMessages } from '@components/Forms/Privacy/server'
-
-export interface Props {
-  status?: string | null
-}
-
-const { status } = Astro.props
-const statusMessage = status ? statusMessages[status] : undefined
 ---
 
-<privacy-form class="block" status={status ?? undefined}>
+<privacy-form class="block">
   <div class="container mx-auto px-4 py-16 max-w-5xl space-y-10">
     <header class="space-y-3">
       <h1 class="text-3xl md:text-4xl font-bold">My Data &amp; Privacy Rights</h1>
@@ -18,25 +10,14 @@ const statusMessage = status ? statusMessages[status] : undefined
       </p>
     </header>
 
-    {
-      statusMessage && (
-        <div
-          id="status-message"
-          tabindex="-1"
-          role={statusMessage.type === 'error' ? 'alert' : 'status'}
-          aria-live={statusMessage.type === 'error' ? 'assertive' : 'polite'}
-          aria-atomic="true"
-          class:list={[
-            'rounded-xl border px-4 py-3 text-sm',
-            statusMessage.type === 'success' && 'border-success bg-success-inverse  text-success',
-            statusMessage.type === 'error' && 'border-danger bg-danger-offset text-danger',
-            statusMessage.type === 'info' && 'border-info bg-info-inverse text-info',
-          ]}
-        >
-          {statusMessage.message}
-        </div>
-      )
-    }
+    <div
+      id="status-message"
+      tabindex="-1"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      class="hidden rounded-xl border px-4 py-3 text-sm"
+    ></div>
 
     <section class="bg-page-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-intro-title">
       <h2 class="sr-only" id="my-data-intro-title">Overview</h2>

src/pages/privacy/my-data.astro

@@ -5,15 +5,9 @@ const pageTitle = 'My Data - Privacy Rights'
 const path = 'privacy/my-data'
 const description =
   'Exercise your GDPR rights by requesting a copy of your data or asking us to delete it.'
-
-// Get status from query params
-const status = Astro.url.searchParams.get('status')
 ---
 
 <BaseLayout pageTitle={pageTitle} path={path} description={description}>
-  <PrivacyForm {status} />
+  <PrivacyForm />
 </BaseLayout>
 
-
-
-