@reqquest/ui 1.16.0 → 1.18.0

package/app/src/internal/appreq-utils.ts

@@ -0,0 +1,33 @@
+import { enumIneligiblePhases, enumRequirementStatus, type IneligiblePhases } from '@reqquest/ui'
+
+/**
+ * True when this application is ineligible because of an applicant requirement (PREQUAL, QUALIFICATION
+ * or POSTQUAL). This looks at the type of the failing requirement, not at when it failed - a reviewer
+ * changing an applicant answer after submission also makes this true. For "was it ineligible before
+ * submission" use the API's `hiddenIneligiblePreSubmit` instead.
+ *
+ * These are the applications that land in the "Ineligible benefits" panel on
+ * the applicant screens, and the ones whose program `eligibilityDescription` should be shown.
+ * Anywhere that cares about membership in that panel should go through this function so the
+ * panel and the extra messaging can't drift out of sync.
+ */
+export function isIneligibleByApplicantRequirement (application: { ineligiblePhase?: IneligiblePhases | null }) {
+  return application.ineligiblePhase === enumIneligiblePhases.PREQUAL || application.ineligiblePhase === enumIneligiblePhases.QUALIFICATION
+}
+
+
+ // Return the appRequests with any application that is ineligible because of an applicant requirement stripped out of each one. See `isIneligibleByApplicantRequirement`.
+export function excludeApplicantRequirementIneligibleApps<T extends { applications: { ineligiblePhase?: IneligiblePhases | null }[] }> (appRequests: T[]): T[] {
+  return appRequests.map(ar => ({
+    ...ar,
+    applications: ar.applications.filter(app => !isIneligibleByApplicantRequirement(app))
+  }))
+}
+
+export function isHiddenFromApplicant (application: { hiddenIneligiblePreSubmit?: boolean | null, requirements?: { status: string, prompts: { optOut?: boolean | null }[] }[] }) {
+  if (!application.hiddenIneligiblePreSubmit) return false
+  const optedOut = application.requirements?.some(r => r.status === enumRequirementStatus.DISQUALIFYING && r.prompts.some(p => p.optOut))
+  return !optedOut
+}
+
+export const DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE = 'Based on your responses, you don\'t currently qualify for any available benefits. If you believe this is incorrect, review your answers.'

package/app/src/internal/components/AnnouncementBanner.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { InlineNotification, NotificationActionButton } from 'carbon-components-svelte'
+
+  /** Short headline shown in bold. */
+  export let subject: string
+  /** Body text shown under the subject. */
+  export let body: string
+  /** Optional URL rendered as a ghost action button after the text. */
+  export let link: string | null | undefined = undefined
+  /** Visible text for the link. Required by the API whenever a link is given. */
+  export let linkText: string | null | undefined = undefined
+</script>
+
+<!--
+  Deliberately NOT carbon's default role="alert". The banner is ordinary page content that is
+  already there when the applicant arrives, so it must be a labelled landmark that screen readers
+  meet once in reading order (and can jump to), not a live region that announces itself and its
+  link on insertion. NVDA was reading the link three times under role="alert". The prop type only
+  admits alert|log|status, but the component forwards the string verbatim to the root div, hence
+  the cast. The fixed label keeps the subject from being spoken twice (landmark name + title).
+-->
+<InlineNotification
+  role={'region' as any}
+  aria-label="Announcement"
+  kind="warning"
+  title={subject}
+  subtitle={body}
+  lowContrast
+  hideCloseButton
+  class="time-sensitive-banner"
+>
+  <svelte:fragment slot="actions">
+    {#if link}
+      <NotificationActionButton href={link}>{linkText}</NotificationActionButton>
+    {/if}
+  </svelte:fragment>
+</InlineNotification>
+
+<style>
+  :global(div.time-sensitive-banner.bx--inline-notification) {
+    min-width: unset;
+    max-width: fit-content;
+    flex-wrap: wrap;
+    width: auto;
+    align-items: center;
+  }
+</style>

package/app/src/internal/components/AppRequestCard.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import type { ActionItem } from '@txstate-mws/carbon-svelte'
+  import { Card, TagSet } from '@txstate-mws/carbon-svelte'
+  import { Button } from 'carbon-components-svelte'
+  import { goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import { enumPromptVisibility } from '@reqquest/ui'
+  import { getApplicationStatusInfo, getAppRequestStatusInfo, getNavigationButton } from '../status-utils.js'
+  import { longNumericTime } from '../util.js'
+  import { uiRegistry } from '$local'
+  import type { PageData } from '../../routes/dashboards/applicant/$types'
+  import StatusMessageList from './StatusMessageList.svelte'
+  import WarningIconYellow from './WarningIconYellow.svelte'
+
+  // Type for the partial AppRequest data passed from dashboard
+  type DashboardAppRequest = PageData['appRequests'][number]
+
+  export let request: DashboardAppRequest
+  export let actions: ActionItem[] = []
+  export let showAcceptanceButtons = true
+  export let onAcceptanceNavigate: ((requestId: string) => void) | undefined = undefined
+
+  $: statusInfo = getAppRequestStatusInfo(request.status, request.phase, request.closedAt)
+  $: firstInvalidatedPrompt = request.applications
+    .flatMap(app => app.requirements)
+    .flatMap(req => req.prompts)
+    .find(p => p.visibility === enumPromptVisibility.AVAILABLE && !p.moot && p.invalidated && p.invalidatedReason)
+  $: navButton = firstInvalidatedPrompt
+    ? { label: 'Make corrections', href: `/requests/${request.id}/apply/${firstInvalidatedPrompt.id}` }
+    : getNavigationButton(request.status, request.id)
+
+  async function handleAcceptanceClick () {
+    if (onAcceptanceNavigate) {
+      onAcceptanceNavigate(request.id)
+    } else {
+      await goto(resolve(`/requests/${request.id}/apply`))
+    }
+  }
+</script>
+
+<Card
+  title={request.period.name}
+  subhead={`Started: ${longNumericTime(request.createdAt)}`}
+  tags={statusInfo.tags}
+  tagsInBody
+  {actions}
+  forceOverflow={true}
+  navigations={navButton ? [navButton] : []}>
+
+  <!-- Status description -->
+  {#if statusInfo.description}
+    <p class="pl-1.5 mb-4 text-sm">{statusInfo.description}</p>
+  {/if}
+
+  <!-- Benefits section -->
+  <div class="rounded">
+    <h4 class="m-0 mb-2 text-lg benefits-title">Potential benefits</h4>
+    <p class="m-0 mb-3 benefits-subtitle text-sm">Benefit results will be finalized once the {uiRegistry.getWord('appRequest').toLowerCase()} submission and review is completed.</p>
+
+    {#if request.applications.length > 0}
+      {#each request.applications as application (application.id)}
+        {@const invalidatedPrompts = application.requirements
+          .flatMap(req => req.prompts)
+          .filter(p => p.visibility === enumPromptVisibility.AVAILABLE && !p.moot && p.invalidated && p.invalidatedReason)
+        }
+        {@const warningReqs = application.requirements.filter(r => r.status === 'WARNING' && r.statusReason)}
+        {@const appStatusTags = invalidatedPrompts.length > 0
+          ? [{ label: 'Needs corrections', type: 'magenta' as const }]
+          : getApplicationStatusInfo(application.status, request.phase, request.closedAt, application.rescindedStatus).map(info => ({ label: info.label, type: info.color }))}
+        <div class="program-status py-2 px-4 mb-4">
+          <div class="flex items-center">
+            <span class="font-medium">{application.title}</span>
+            <div class="tagwrap">
+              <TagSet tags={appStatusTags} />
+            </div>
+            {#if (application.status === 'PENDING' || application.status === 'ELIGIBLE') && warningReqs.length > 0}
+              <WarningIconYellow size={20} />
+            {/if}
+
+            <!-- Acceptance buttons -->
+            {#if showAcceptanceButtons && (request.status === 'ACCEPTANCE' || request.status === 'READY_TO_ACCEPT') && application.status === 'ELIGIBLE'}
+              <Button kind="primary" size="small" class="ml-auto"
+                on:click={handleAcceptanceClick}>
+                {request.status === 'READY_TO_ACCEPT' ? 'Accept Offer' : 'Review Offer'}
+              </Button>
+            {/if}
+          </div>
+
+          <!-- Status reason -->
+          {#if application.statusReason && application.status !== 'INELIGIBLE' && invalidatedPrompts.length === 0}
+            <p class="status-reason mt-2 mb-0 text-sm">{application.statusReason}</p>
+          {/if}
+
+          <!-- Warnings for PENDING/ELIGIBLE applications -->
+          {#if (application.status === 'PENDING' || application.status === 'ELIGIBLE') && warningReqs.length > 0}
+            <StatusMessageList
+              items={warningReqs.map(r => ({ id: r.id, message: r.statusReason! }))}
+              variant="warning"
+              accordionTitle="Multiple warnings" />
+          {/if}
+
+          <!-- Failed requirements for INELIGIBLE applications -->
+          {#if application.status === 'INELIGIBLE' && application.requirements}
+            {@const failedRequirements = application.requirements.filter(req => req.status === 'DISQUALIFYING' && req.statusReason)}
+            <StatusMessageList
+              items={failedRequirements.map(r => ({ id: r.id, message: r.statusReason! }))}
+              accordionTitle="Multiple eligibility issues" />
+          {/if}
+
+          <!-- Corrections needed for non-INELIGIBLE applications -->
+          {#if invalidatedPrompts.length > 0}
+            <StatusMessageList
+              items={invalidatedPrompts.map(p => ({ id: p.id, message: p.invalidatedReason! }))}
+              accordionTitle="Multiple corrections needed" />
+          {/if}
+        </div>
+      {/each}
+    {:else}
+      <p>No benefits associated with this {uiRegistry.getWord('appRequest').toLowerCase()}.</p>
+    {/if}
+  </div>
+
+  <!-- Footer info grid -->
+  <div class="mt-4 grid grid-cols-3 footer-grid">
+    <div class="text-center py-4 px-2 footer-section">
+      <span class="block text-sm font-semibold footer-label mb-1">Request number:</span>
+      <span class="block text-sm footer-value">{request.id.slice(0, 6).toUpperCase()}</span>
+    </div>
+    <div class="text-center py-4 px-2 footer-section">
+      <span class="block text-sm font-semibold footer-label mb-1">Last updated:</span>
+      <span class="block text-sm footer-value">{longNumericTime(request.updatedAt)}</span>
+    </div>
+    <div class="text-center py-4 px-2 footer-section">
+      <span class="block text-sm font-semibold footer-label mb-1">Waiting on:</span>
+      <span class="block text-sm footer-value">{statusInfo.waitingOn}</span>
+    </div>
+  </div>
+</Card>
+
+<style>
+  /* Global styles for external component overrides */
+  :global(.tagwrap .tag-set > *) {
+    max-width: 100% !important;
+  }
+
+  .benefits-subtitle {
+    color: var(--cds-text-02);
+  }
+
+  .program-status {
+    background-color: var(--cds-ui-01);
+  }
+
+  .footer-grid {
+    background-color: var(--cds-ui-01);
+  }
+
+  .footer-section {
+    border-right: 1px solid var(--cds-ui-05);
+
+  }
+  .footer-section:last-child {
+    border-right: none;
+  }
+
+  .footer-label {
+    color: var(--cds-text-01);
+  }
+
+  .footer-value {
+    color: var(--cds-text-01);
+  }
+</style>

package/app/src/internal/components/ApplicantOptOutModal.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { Form, PanelFormDialog } from '@txstate-mws/carbon-svelte'
+  import type { FormStore } from '@txstate-mws/svelte-forms'
+  import { afterNavigate, invalidate, invalidateAll } from '$app/navigation'
+  import { uiRegistry } from '$local'
+  import { api, type PromptForEditing } from '../api.js'
+  import { Loading } from "carbon-components-svelte";
+  import MissingDefinitionNotification from './MissingDefinitionNotification.svelte'
+  import type { AppRequestForDetails, OptOutApplication } from '@reqquest/ui'
+
+  export let open = false
+  export let optIn = false
+  export let prompt: PromptForEditing
+  export let appRequest: AppRequestForDetails
+  export let optOutSelected: OptOutApplication | undefined
+
+  $: def = uiRegistry.getPrompt(prompt.key)
+  let loading = false
+
+
+  let store: FormStore | undefined
+
+  async function submit (data: any) {
+    loading = true
+    try {      
+      const { success, messages, data: newData } = await api.updatePrompt(prompt.id, data, false)
+      if (!success) loading = false
+      return { success, messages, data: newData?.[prompt.key] }
+    } catch (e) {
+      loading = false
+      throw e
+    }
+  }
+
+  async function saved () {
+    open = false
+    loading = false
+    invalidateAll()
+  }
+
+  async function onValidate (data: any) {
+    const { messages } = await api.updatePrompt(prompt.id, data, true)
+    return messages
+  }
+
+  let lastPromptId: string | undefined
+  $: if (prompt.id !== lastPromptId) {
+    lastPromptId = prompt.id
+    store = undefined
+  }
+</script>
+
+{#if loading}
+  <Loading />
+{/if}
+
+<PanelFormDialog
+  let:data
+  bind:store
+  centered
+  open={open}
+  on:cancel={() => { open = false }}
+  validate={onValidate}
+  on:saved={saved}
+  disableSaveUntilChanged={true}
+  {submit}
+  title={`${optIn ? 'Opt in to' : 'Opt out of'} ${optOutSelected?.title}?`}
+  submitText={optIn ? 'Opt in' : 'Opt out'}
+  cancelText="Cancel"
+  preload={prompt.preloadData}
+  preloadAsDraft={!prompt.hasSavedData} 
+  >
+    {#if def?.formComponent == null}
+      <MissingDefinitionNotification kind="prompt" definitionKey={prompt.key} />
+    {:else}
+    <svelte:component this={def.formComponent} {data} appRequestId={appRequest.id} appRequestData={appRequest.data} prestageData={{latest: prompt.prestageData, current: appRequest.data[prompt.key]?.__prestage}} fetched={prompt.fetchedData} configData={prompt.configurationData} gatheredConfigData={prompt.gatheredConfigData} invalidated={prompt.invalidated} invalidatedReason={prompt.invalidatedReason} statusReasons={optOutSelected?.prompt.statusReasons ?? []} />
+    {/if}
+</PanelFormDialog>

package/app/src/internal/components/ApplicantProgramList.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+  import { TagSet } from '@txstate-mws/carbon-svelte'
+  import { Button } from 'carbon-components-svelte'
+  import { Close, InProgress, CheckmarkFilled, Information, SubtractAlt } from 'carbon-icons-svelte'
+  import { isNotBlank } from 'txstate-utils'
+  import { type ApplicationForDetails, type AppRequestForDetails, enumApplicationStatus, enumIneligiblePhases, enumPromptVisibility, enumRequirementStatus, enumRequirementType, type OptOutApplication } from '@reqquest/ui'
+  import { getApplicationStatusTags } from '../status-utils.js'
+  import { isIneligibleByApplicantRequirement } from '../appreq-utils.js'
+  import ApplicantProgramListTooltip from './ApplicantProgramListTooltip.svelte'
+  import WarningIconYellow from './WarningIconYellow.svelte'
+  import { api, type PromptForEditing } from '$internal/api.js'
+  import ApplicantOptOutModal from './ApplicantOptOutModal.svelte'
+
+  export let appRequest: AppRequestForDetails
+  export let applications: ApplicationForDetails[]
+  export let viewMode = false
+  export let showTooltipsAsText = false
+  export let promptsById: Record<string, any> = {}
+
+  let open = false
+  let optIn = false
+  let optOutPrompt: PromptForEditing | undefined
+  let optOutSelected: OptOutApplication | undefined
+
+  async function openOptOutModal (programId: string, openOptIn = false) {
+    optOutSelected = optOutPrograms[programId]
+    await loadOptOutPrompt()
+    optIn = openOptIn
+    open = true
+  }
+
+  $: promptsByApplicationId = applications.reduce<Record<string, typeof applications[0]['requirements'][0]['prompts'] | undefined>>((acc, curr) => ({
+    ...acc,
+    [curr.id]: curr.requirements
+      .filter(r => r.type === enumRequirementType.QUALIFICATION)
+      .flatMap(r => r.prompts)      
+  }), {})
+
+  $: programButtonStatus = applications.reduce((acc, curr) => {
+    let status: string
+    if (curr.completionStatus === enumApplicationStatus.PENDING) {
+      const unanswered = curr.requirements
+        .filter(r => r.type === enumRequirementType.QUALIFICATION)
+        .flatMap(r => r.prompts)
+        .filter(p => (!p.answered || p.invalidated) && !p.optOut)
+      if (!curr.requirements.some(r => r.prompts.some(p => p.answered && !p.invalidated && !p.optOut))) status = 'start'
+      else if (unanswered.length === 0) status = 'complete'
+      else if (unanswered.some(p => p.visibility === enumPromptVisibility.AVAILABLE)) status = 'continue'
+      // every remaining unanswered prompt is owned by an earlier program, so continuing here shows nothing new
+      else status = 'revisitPending'
+    } else if (curr.completionStatus === enumApplicationStatus.INELIGIBLE) {
+      status = curr.ineligiblePhase === enumIneligiblePhases.PREQUAL ? 'ineligible' : 'revisit'
+    } else status = 'complete'
+    return { ...acc, [curr.id]: status }
+  }, {} as Record<string, string>)
+
+  const programButtonLabels: Record<string, string> = {
+    start: 'Start',
+    continue: 'Continue',
+    complete: 'Revisit',
+    revisit: 'Revisit',
+    revisitPending: 'Revisit'
+  }
+
+  $: programFirstPromptId = applications.reduce((acc, curr) => ({
+    ...acc,
+    [curr.id]: (promptsByApplicationId[curr.id]?.find(p => (!p.answered || p.invalidated) && !p.optOut) ?? (promptsByApplicationId[curr.id]?.[0]?.optOut ? promptsByApplicationId[curr.id]?.[1] : promptsByApplicationId[curr.id]?.[0]))?.id
+  }), {} as Record<string, string | undefined>)
+
+  $: optOutPrograms = applications.reduce((acc, curr) => {
+    const optOut = curr.requirements.flatMap(r => r.prompts).find(({ optOut: optOutPrompt }) => optOutPrompt)
+
+    if (!optOut) return acc
+
+    return {
+      ...acc,
+      [curr.id]: {
+        ...curr,
+        prompt: optOut
+      }
+    }
+  }, {} as Record<string, OptOutApplication | undefined>)
+
+ $: optedOutPrograms = applications
+    .filter(curr => curr.requirements.flatMap(r => r.prompts).find(r => r.optOut))
+    .reduce((acc, c) => {
+      const optOutRequirement = c.requirements.find(r => r.prompts.some(p => p.optOut))
+      return {
+        ...acc,
+        [c.id]: optOutRequirement?.status === enumRequirementStatus.DISQUALIFYING
+      }
+    }, {} as Record<string, boolean>)
+
+  async function loadOptOutPrompt () {
+    const promptId = optOutSelected?.prompt?.id
+    if (!promptId) return    
+    const { prompt } = await api.getApplicantPrompt(appRequest.id, promptId)
+    optOutPrompt = prompt
+  }
+
+</script>
+
+<section class="programs-container">
+  <header>
+    <div class="program column">Program</div>
+    <div class="status column">Status</div>
+  </header>
+  {#each applications as application (application.id)}
+    {@const programStatus = programButtonStatus[application.id]}
+    {@const programFirstPrompt = programFirstPromptId[application.id]}
+    {@const programDescriptions = isIneligibleByApplicantRequirement(application) && !optedOutPrograms[application.id] ? [application.applicantDescription, application.eligibilityDescription].filter(isNotBlank) : []}
+    <div class="program column [ flex-col ]" style='align-items: start;'>
+      <span>{application.title}</span>
+      {#if !viewMode}
+        {#if optedOutPrograms[application.id]}
+          <Button on:click={() => openOptOutModal(application.id, true)} kind='ghost' style='padding: 0; min-height: 0;' class='[ p-0 justify-start ]'>Opt In</Button>
+        {:else if optOutPrograms[application.id] && application.completionStatus !== enumApplicationStatus.INELIGIBLE}
+          <Button on:click={() => openOptOutModal(application.id)} kind='ghost' style='padding: 0; min-height: 0;' class='[ p-0 justify-start ]'>Opt out</Button>
+        {/if} 
+      {/if}
+    </div>
+    <div class="status column" class:no-tooltip={!application.statusReason?.length && !programDescriptions.length}>
+      {#if !viewMode}
+        <div class="icon-and-tooltip" class:wide-icon={application.completionStatus === enumApplicationStatus.INELIGIBLE}>
+          {#if optedOutPrograms[application.id]}
+            <SubtractAlt size={24} fill='#dd3b46'/>
+          {:else if application.completionStatus === enumApplicationStatus.INELIGIBLE}
+            <Close size={32} class="status-icon-ineligible" />
+          {:else if ['start', 'continue', 'revisitPending'].includes(programStatus)}
+            <InProgress size={24} class="status-icon-pending" />
+          {:else if application.hasWarning}
+            <WarningIconYellow size={24} class="status-icon-warning" />
+          {:else}
+            <CheckmarkFilled size={24} class="status-icon-complete" />
+          {/if}
+          <ApplicantProgramListTooltip {optedOutPrograms} {application} />
+        </div>
+        {#if optedOutPrograms[application.id]}
+          <p>Opted out</p>
+        {:else if programFirstPrompt && programStatus !== 'ineligible'}
+          <Button size="small" kind={programStatus === 'complete' ? 'ghost' : ['revisit', 'revisitPending'].includes(programStatus) ? 'secondary' : 'primary'} href={programFirstPrompt}>{programButtonLabels[programStatus]}</Button>
+        {/if}
+      {:else}
+        {#if ['start', 'continue', 'complete', 'revisitPending'].includes(programStatus) && !optedOutPrograms[application.id]}
+          <TagSet tags={getApplicationStatusTags(application.status, appRequest.phase, appRequest.closedAt, application.rescindedStatus)} />
+        {:else if optedOutPrograms[application.id]}
+          <SubtractAlt size={24} fill='#dd3b46'/><p>Opted out</p>
+        {:else}
+          <Close size={32} class="status-icon-ineligible" />
+        {/if}
+        <ApplicantProgramListTooltip {optedOutPrograms} {application} />
+      {/if}
+    </div>
+    {#if application.warningReasons.length || application.ineligibleReasons.length || programDescriptions.length}
+      <div class="tooltip-text-row" class:visible={showTooltipsAsText}>
+        {#each application.ineligibleReasons as reason (reason)}
+          <div class="tooltip-text-item">
+            <Information size={16} /> {reason}
+          </div>
+        {/each}
+        {#each programDescriptions as description (description)}
+          <div class="tooltip-text-item">
+            <Information size={16} /> {description}
+          </div>
+        {/each}
+        {#each application.warningReasons as reason (reason)}
+          <div class="tooltip-text-item">
+            <Information size={16} /> {reason}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/each}
+</section>
+
+
+{#if optOutPrompt?.key}
+  <ApplicantOptOutModal bind:open bind:optIn bind:prompt={optOutPrompt} {optOutSelected} {appRequest} />
+{/if}
+
+<style>
+  .programs-container {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    margin-bottom: 1.5rem;
+    background-color: #F2F2F2;
+  }
+
+  .programs-container header {
+    display: contents;
+    font-weight: bold;
+  }
+
+  .programs-container header .column {
+    padding: 0.75rem 10px;
+  }
+
+  .programs-container .column {
+    border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
+    padding: .5rem 10px;
+  }
+
+  .programs-container :global(.status-column) {
+    flex-grow: 0;
+  }
+
+  :not(.header) .program.column {
+    display: flex;
+    align-items: center;
+  }
+
+  :not(.header) .status.column {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+  }
+
+  .status.column :global(.reason-tooltip) {
+    height: 16px;
+  }
+  :not(.header) .status.column.no-tooltip {
+    flex-wrap: nowrap
+  }
+
+  .programs-container :global(.status-icon-pending) {
+    fill: var(--cds-support-04);
+  }
+
+  .programs-container :global(.status-icon-complete) {
+    fill: var(--cds-support-04);
+  }
+
+  .programs-container :global(.status-icon-ineligible) {
+    margin-left: -4px;
+  }
+
+  .icon-and-tooltip {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .icon-and-tooltip.wide-icon {
+    gap: 4px;
+  }
+
+  .tooltip-text-row {
+    grid-column: span 2;
+    background-color: #FBF1DA;
+    padding: 0.5rem 1rem;
+    display: none;
+  }
+
+  .tooltip-text-row.visible {
+    display: block;
+  }
+
+  .tooltip-text-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.125rem 16px;
+    color: var(--cds-text-01);
+  }
+
+  @media print {
+    .tooltip-text-row {
+      display: block !important;
+    }
+  }
+
+  :global(.opt-out-modal .bx--modal-content) {
+    margin-bottom: 1rem;
+  }
+</style>

package/app/src/internal/components/ApplicantProgramListTooltip.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Tooltip } from 'carbon-components-svelte'
+  import { isNotBlank } from 'txstate-utils'
+  import type { ApplicationForDetails } from '@reqquest/ui'
+  import { isIneligibleByApplicantRequirement } from '../appreq-utils.js'
+
+  export let application: ApplicationForDetails
+  export let optedOutPrograms: Record<string, boolean>
+
+  // Programs that died before submission get extra context above the failing reason: what the
+  // program is and a summary of what it would have required. An applicant disqualified early may
+  // never have seen the program's prompts, so the statusReason alone lacks context.
+  $: programDescriptions = isIneligibleByApplicantRequirement(application) && !optedOutPrograms[application.id]
+    ? [application.applicantDescription, application.eligibilityDescription].filter(isNotBlank)
+    : []
+</script>
+
+{#if application.warningReasons.length || application.ineligibleReasons.length || application.metReasons.length || programDescriptions.length}
+  <Tooltip align="end" direction="bottom" triggerText="" class="reason-tooltip">
+    {#if application.ineligibleReasons.length || programDescriptions.length}
+      {#each application.ineligibleReasons as reason (reason)}
+        <p>{reason}</p>
+      {/each}
+      {#each programDescriptions as description (description)}
+        <p class="program-description">{description}</p>
+      {/each}
+    {:else if application.warningReasons.length}
+      <p><strong>Warnings:</strong></p>
+      {#each application.warningReasons as reason (reason)}
+        <p>{reason}</p>
+      {/each}
+    {:else if application.metReasons.length}
+      {#each application.metReasons as reason (reason)}
+        <p>{reason}</p>
+      {/each}
+    {/if}
+  </Tooltip>
+{/if}
+
+<style>
+  .program-description {
+    margin-top: 0.75rem;
+  }
+</style>