Update styling on notification toasts for my-data page

Author: webstackdev

src/components/Pages/MyData/client/__tests__/index.spec.ts

@@ -113,7 +113,8 @@ describe('PrivacyForm behavior', () => {
           email: 'test@example.com',
           requestType: 'ACCESS',
         })
-        expect(elements.accessMessage.textContent).toBe('Access request sent.')
+        expect(elements.accessMessage.textContent).toContain('Request Sent')
+        expect(elements.accessMessage.textContent).toContain('Access request sent.')
         expect(elements.accessMessage.classList.contains('hidden')).toBe(false)
         expect(elements.accessMessage.classList.contains('border-success')).toBe(true)
         expect(elements.accessEmailInput.value).toBe('')
@@ -145,18 +146,27 @@ describe('PrivacyForm behavior', () => {
 
         expect(elements.accessForm.dataset.privacyState).toBe('loading')
         expect(elements.accessForm.getAttribute('aria-busy')).toBe('true')
-        expect(elements.accessMessage.textContent).toBe('Sending request...')
-        expect(elements.accessMessage.classList.contains('border-info')).toBe(true)
         expect(accessSubmitButton).toBeInstanceOf(HTMLButtonElement)
         expect((accessSubmitButton as HTMLButtonElement).disabled).toBe(true)
 
+        const accessLoadingToast = element.querySelector('#access-preview-toast-loading')
+        expect(accessLoadingToast).not.toBeNull()
+        expect(accessLoadingToast?.classList.contains('hidden')).toBe(false)
+        expect(accessLoadingToast?.textContent).toContain('Sending Request')
+        expect(accessLoadingToast?.textContent).toContain('Your request is being prepared and submitted.')
+
         expect(elements.deleteForm.dataset.privacyState).toBe('validation')
-        expect(elements.deleteMessage.textContent).toBe(
-          'Please enter a valid email address and confirm the deletion request.'
-        )
-        expect(elements.deleteMessage.classList.contains('border-danger')).toBe(true)
         expect(elements.deleteEmailInput.getAttribute('aria-invalid')).toBe('true')
         expect(elements.deleteConfirmCheckbox.getAttribute('aria-invalid')).toBe('true')
+
+        const deleteValidationToast = element.querySelector('#delete-preview-toast-validation')
+        expect(deleteValidationToast).not.toBeNull()
+        expect(deleteValidationToast?.classList.contains('hidden')).toBe(false)
+        expect(deleteValidationToast?.textContent).toContain('Check Your Details')
+        expect(deleteValidationToast?.textContent).toContain(
+          'Enter a valid email address and confirm the deletion request before submitting.'
+        )
+
         expect(requestDataMock).not.toHaveBeenCalled()
       },
     })
@@ -187,7 +197,8 @@ describe('PrivacyForm behavior', () => {
         await flushMicrotasks()
 
         expect(requestDataMock).not.toHaveBeenCalled()
-        expect(elements.deleteMessage.textContent).toBe(
+        expect(elements.deleteMessage.textContent).toContain('Check Your Details')
+        expect(elements.deleteMessage.textContent).toContain(
           'Please confirm you understand the deletion request.'
         )
         expect(elements.deleteMessage.classList.contains('border-danger')).toBe(true)

src/components/Pages/MyData/client/index.ts

@@ -18,6 +18,8 @@ type DsarVerifyResult =
 
 type RequestDataResult = { message: string }
 
+type RequestToastTone = 'success' | 'error' | 'info'
+
 const requestPreviewStates = ['loading', 'success', 'error', 'validation'] as const
 
 const requestPreviewQueryParams: Record<RequestFormType, string> = {
@@ -67,6 +69,13 @@ export class PrivacyFormElement extends LitElement {
   private deleteConfirmCheckbox!: HTMLInputElement
   private deleteMessage!: HTMLElement
 
+  private getPreviewToastElements(requestType: RequestType): HTMLElement[] {
+    const prefix = requestType === 'ACCESS' ? 'access' : 'delete'
+    return ['success', 'loading', 'error', 'validation']
+      .map(state => this.querySelector<HTMLElement>(`#${prefix}-preview-toast-${state}`))
+      .filter((el): el is HTMLElement => el !== null)
+  }
+
   override connectedCallback(): void {
     super.connectedCallback()
 
@@ -146,9 +155,20 @@ export class PrivacyFormElement extends LitElement {
     })
   }
 
-  private setRequestState(form: HTMLFormElement, state: RequestPreviewState | 'idle'): void {
+  private setRequestState(
+    form: HTMLFormElement,
+    state: RequestPreviewState | 'idle',
+    requestType?: RequestType
+  ): void {
     form.dataset.privacyState = state
     form.setAttribute('aria-busy', String(state === 'loading'))
+
+    if (!requestType) {
+      return
+    }
+
+    const rootAttributeName = requestType === 'ACCESS' ? 'data-access-state' : 'data-delete-state'
+    this.setAttribute(rootAttributeName, state)
   }
 
   private setSubmitLoading(form: HTMLFormElement, loading: boolean): void {
@@ -168,20 +188,116 @@ export class PrivacyFormElement extends LitElement {
     this.deleteConfirmCheckbox.setAttribute('aria-invalid', String(invalid))
   }
 
+  private hidePreviewToast(requestType: RequestType): void {
+    for (const el of this.getPreviewToastElements(requestType)) {
+      el.classList.add('hidden')
+    }
+  }
+
+  private resolveRequestToastConfig(
+    requestType: RequestType,
+    message: string,
+    type: RequestToastTone
+  ): {
+    title: string
+    icon: 'check-stylized' | 'warning' | 'spinner'
+    containerClasses: string[]
+    iconContainerClasses: string[]
+    titleClasses: string[]
+  } {
+    if (type === 'success') {
+      return {
+        title: requestType === 'ACCESS' ? 'Request Sent' : 'Deletion Request Sent',
+        icon: 'check-stylized',
+        containerClasses: ['border-success', 'bg-success-inverse', 'text-success'],
+        iconContainerClasses: ['bg-success', 'text-content-inverse'],
+        titleClasses: ['text-success'],
+      }
+    }
+
+    if (type === 'info') {
+      return {
+        title: 'Sending Request',
+        icon: 'spinner',
+        containerClasses: ['border-info', 'bg-info-inverse', 'text-info'],
+        iconContainerClasses: ['bg-info', 'text-content-inverse'],
+        titleClasses: ['text-info'],
+      }
+    }
+
+    const isValidationMessage =
+      message.includes('valid email') || message.includes('confirm you understand') || message.includes('confirm the deletion request')
+
+    return {
+      title: isValidationMessage
+        ? 'Check Your Details'
+        : requestType === 'ACCESS'
+          ? 'Request Failed'
+          : 'Deletion Request Failed',
+      icon: 'warning',
+      containerClasses: ['border-danger', 'bg-danger-inverse', 'text-danger'],
+      iconContainerClasses: ['bg-danger', 'text-content-inverse'],
+      titleClasses: ['text-danger'],
+    }
+  }
+
+  private renderRequestToast(target: HTMLElement, requestType: RequestType, message: string, type: RequestToastTone): void {
+    const config = this.resolveRequestToastConfig(requestType, message, type)
+
+    target.replaceChildren()
+    target.classList.remove('px-4', 'py-3', 'text-sm', 'bg-danger-offset')
+    target.classList.add('w-full', 'rounded-xl', 'border')
+    target.classList.add(...config.containerClasses)
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'flex items-start gap-4 p-6'
+
+    const iconContainer = document.createElement('div')
+    iconContainer.className = 'shrink-0 flex h-6 w-6 items-center justify-center rounded-full'
+    iconContainer.classList.add(...config.iconContainerClasses)
+
+    const icon = document.createElement('span')
+    icon.setAttribute('aria-hidden', 'true')
+    icon.textContent = config.icon === 'check-stylized' ? '✓' : config.icon === 'spinner' ? '◌' : '!'
+    iconContainer.appendChild(icon)
+
+    const content = document.createElement('div')
+
+    const title = document.createElement('h3')
+    title.className = 'mb-2 text-lg font-semibold'
+    title.classList.add(...config.titleClasses)
+    title.textContent = config.title
+
+    const body = document.createElement('p')
+    body.textContent = message
+
+    content.append(title, body)
+    wrapper.append(iconContainer, content)
+    target.appendChild(wrapper)
+  }
+
   private resetMessage(target: HTMLElement): void {
-    target.textContent = ''
+    target.replaceChildren()
     target.classList.add('hidden')
     target.classList.remove(
+      'w-full',
+      'rounded-xl',
+      'border',
       'border-success',
       'bg-success-inverse',
       'text-success',
       'border-danger',
       'bg-danger-offset',
+      'bg-danger-inverse',
       'text-danger',
       'border-info',
       'bg-info-inverse',
-      'text-info'
+      'text-info',
+      'px-4',
+      'py-3',
+      'text-sm'
     )
+    target.classList.add('rounded-xl', 'border', 'px-4', 'py-3', 'text-sm')
   }
 
   private resetRequestState(requestType: RequestType): void {
@@ -190,8 +306,9 @@ export class PrivacyFormElement extends LitElement {
     const emailInput = isAccessRequest ? this.accessEmailInput : this.deleteEmailInput
     const message = isAccessRequest ? this.accessMessage : this.deleteMessage
 
+    this.hidePreviewToast(requestType)
     this.resetMessage(message)
-    this.setRequestState(form, 'idle')
+    this.setRequestState(form, 'idle', requestType)
     this.setSubmitLoading(form, false)
     this.setEmailInvalid(emailInput, false)
 
@@ -208,9 +325,23 @@ export class PrivacyFormElement extends LitElement {
   ): void {
     target.setAttribute('role', type === 'error' ? 'alert' : 'status')
     target.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite')
-    target.textContent = message
     target.classList.remove('hidden')
 
+    const requestType =
+      target.id === 'access-message' ? 'ACCESS' : target.id === 'delete-message' ? 'DELETE' : null
+
+    if (requestType) {
+      this.renderRequestToast(target, requestType, message, type)
+
+      if (options.focus ?? true) {
+        target.focus()
+      }
+
+      return
+    }
+
+    target.textContent = message
+
     const variantClasses = [
       'border-success',
       'bg-success-inverse',
@@ -263,61 +394,25 @@ export class PrivacyFormElement extends LitElement {
     requestType: RequestType,
     previewState: RequestPreviewState
   ): void {
-    this.resetRequestState(requestType)
-
     const isAccessRequest = requestType === 'ACCESS'
     const form = isAccessRequest ? this.accessForm : this.deleteForm
     const emailInput = isAccessRequest ? this.accessEmailInput : this.deleteEmailInput
-    const message = isAccessRequest ? this.accessMessage : this.deleteMessage
-
-    switch (previewState) {
-      case 'loading':
-        this.setRequestState(form, 'loading')
-        this.setSubmitLoading(form, true)
-        this.setMessage(message, 'Sending request...', 'info', { focus: false })
-        return
+    const prefix = isAccessRequest ? 'access' : 'delete'
 
-      case 'success':
-        this.setRequestState(form, 'success')
-        this.setMessage(
-          message,
-          isAccessRequest
-            ? 'Data access request sent. Please check your inbox to verify the request.'
-            : 'Deletion request sent. Please check your inbox to verify the request.',
-          'success',
-          { focus: false }
-        )
-        return
-
-      case 'error':
-        this.setRequestState(form, 'error')
-        this.setMessage(
-          message,
-          isAccessRequest
-            ? 'Unable to submit your data request. Please try again.'
-            : 'Unable to submit your deletion request. Please try again.',
-          'error',
-          { focus: false }
-        )
-        return
-
-      case 'validation':
-        this.setRequestState(form, 'validation')
-        this.setEmailInvalid(emailInput, true)
+    // Show only the matching static SSR preview toast; hide all others for this form.
+    for (const el of this.getPreviewToastElements(requestType)) {
+      el.classList.add('hidden')
+    }
+    this.querySelector<HTMLElement>(`#${prefix}-preview-toast-${previewState}`)?.classList.remove('hidden')
 
-        if (isAccessRequest) {
-          this.setMessage(message, 'Please enter a valid email address.', 'error', { focus: false })
-          return
-        }
+    this.setRequestState(form, previewState, requestType)
+    this.setSubmitLoading(form, previewState === 'loading')
 
+    if (previewState === 'validation') {
+      this.setEmailInvalid(emailInput, true)
+      if (!isAccessRequest) {
         this.setDeleteConfirmationInvalid(true)
-        this.setMessage(
-          message,
-          'Please enter a valid email address and confirm the deletion request.',
-          'error',
-          { focus: false }
-        )
-        return
+      }
     }
   }
 
@@ -408,33 +503,33 @@ export class PrivacyFormElement extends LitElement {
     this.resetRequestState(requestType)
 
     if (requestType === 'DELETE' && !this.deleteConfirmCheckbox.checked) {
-      this.setRequestState(formEl, 'validation')
+      this.setRequestState(formEl, 'validation', requestType)
       this.setDeleteConfirmationInvalid(true)
       this.setMessage(messageEl, 'Please confirm you understand the deletion request.', 'error')
       return
     }
 
     const email = emailInput.value
-    this.setRequestState(formEl, 'loading')
+    this.setRequestState(formEl, 'loading', requestType)
     this.setSubmitLoading(formEl, true)
     this.setMessage(messageEl, 'Sending request...', 'info')
 
     try {
       const { data, error } = await actions.gdpr.requestData({ email, requestType })
       if (error || !data) {
-        this.setRequestState(formEl, 'error')
+        this.setRequestState(formEl, 'error', requestType)
         this.setSubmitLoading(formEl, false)
         this.setMessage(messageEl, error?.message || 'Request failed', 'error')
         return
       }
 
       const resultData = data as RequestDataResult
-      this.setRequestState(formEl, 'success')
+      this.setRequestState(formEl, 'success', requestType)
       this.setSubmitLoading(formEl, false)
       this.setMessage(messageEl, resultData.message, 'success')
       formEl.reset()
     } catch (error) {
-      this.setRequestState(formEl, 'error')
+      this.setRequestState(formEl, 'error', requestType)
       this.setSubmitLoading(formEl, false)
       this.setMessage(
         messageEl,