@reqquest/ui 1.0.0 → 1.1.0

package/dist/components/AppRequestCard.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import { getApplicationStatusInfo, getAppRequestStatusInfo, getNavigationButton } from '../status-utils.js'
+  import { longNumericTime } from '../util.js'
+  import type { ActionItem } from '@txstate-mws/carbon-svelte'
+  import { Card, TagSet } from '@txstate-mws/carbon-svelte'
+  import Button from "carbon-components-svelte/src/Button/Button.svelte";
+  import type { PageData } from '../../routes/dashboards/applicant/$types'
+  import StatusMessageList from './StatusMessageList.svelte'
+  import WarningIconYellow from './WarningIconYellow.svelte'
+  import { enumPromptVisibility } from '../typed-client'
+
+  // 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)
+  $: firstInvalidatedPrompt = request.applications
+    .flatMap(app => app.requirements)
+    .flatMap(req => req.prompts)
+    .find(p => p.visibility === enumPromptVisibility.AVAILABLE && 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={[{ label: statusInfo.label, type: statusInfo.color }]}
+  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 application 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.invalidated && p.invalidatedReason)
+        }
+        {@const warningReqs = application.requirements.filter(r => r.status === 'WARNING' && r.statusReason)}
+        {@const appStatusTag = invalidatedPrompts.length > 0
+          ? { label: 'Needs corrections', color: 'magenta' as const }
+          : getApplicationStatusInfo(application.status)}
+        <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={[{ label: appStatusTag.label, type: appStatusTag.color }]} />
+            </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 application.</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/dist/components/ApplicantProgramList.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { TagSet } from '@txstate-mws/carbon-svelte'
+  import Button from "carbon-components-svelte/src/Button/Button.svelte";
+  import Close from "carbon-icons-svelte/lib/Close.svelte";
+import InProgress from "carbon-icons-svelte/lib/InProgress.svelte";
+import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
+import Information from "carbon-icons-svelte/lib/Information.svelte";
+  import { ucfirst } from 'txstate-utils'
+  import type { ApplicationForDetails } from './types'
+  import { enumApplicationStatus, enumIneligiblePhases, enumRequirementType, getApplicationStatusInfo } from '..'
+  import ApplicantProgramListTooltip from './ApplicantProgramListTooltip.svelte'
+  import WarningIconYellow from './WarningIconYellow.svelte'
+
+  export let applications: ApplicationForDetails[]
+  export let viewMode = false
+  export let showTooltipsAsText = false
+
+  $: 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) => ({
+    ...acc,
+    [curr.id]: curr.completionStatus === enumApplicationStatus.PENDING
+      ? curr.requirements.some(r => r.prompts.some(p => p.answered && !p.invalidated))
+        ? curr.requirements.filter(r => r.type === enumRequirementType.QUALIFICATION).every(r => r.prompts.every(p => p.answered && !p.invalidated))
+          ? 'complete'
+          : 'continue'
+        : 'start'
+      : curr.completionStatus === enumApplicationStatus.INELIGIBLE
+        ? curr.ineligiblePhase === enumIneligiblePhases.PREQUAL
+          ? 'ineligible'
+          : 'revisit'
+        : 'complete'
+  }), {})
+  $: programFirstPromptId = applications.reduce((acc, curr) => ({
+    ...acc,
+    [curr.id]: (promptsByApplicationId[curr.id]?.find(p => !p.answered || p.invalidated) ?? promptsByApplicationId[curr.id]?.[0])?.id
+  }), {})
+</script>
+
+<section class="programs-container">
+  <header>
+    <div class="program column">Program</div>
+    <div class="status column">Eligibility</div>
+  </header>
+  {#each applications as application (application.id)}
+    {@const programStatus = programButtonStatus[application.id]}
+    {@const programFirstPrompt = programFirstPromptId[application.id]}
+    <div class="program column">{application.title}</div>
+    <div class="status column" class:no-tooltip={!application.statusReason?.length}>
+      {#if !viewMode}
+        <div class="icon-and-tooltip" class:wide-icon={application.completionStatus === enumApplicationStatus.INELIGIBLE}>
+          {#if application.completionStatus === enumApplicationStatus.INELIGIBLE}
+            <Close size={32} class="status-icon-ineligible" />
+          {:else if ['start', 'continue'].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 {application} />
+        </div>
+        {#if programFirstPrompt && programStatus !== 'ineligible'}
+          <Button size="small" kind={programStatus === 'complete' ? 'ghost' : programStatus === 'revisit' ? 'secondary' : 'primary'} href={programFirstPrompt}>{ucfirst(programStatus)}</Button>
+        {/if}
+      {:else}
+        {@const statusInfo = getApplicationStatusInfo(application.status)}
+        <TagSet tags={[{ type: statusInfo.color, label: statusInfo.label }]} />
+        <ApplicantProgramListTooltip {application} />
+      {/if}
+    </div>
+    {#if application.warningReasons.length || application.ineligibleReasons.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 application.warningReasons as reason (reason)}
+          <div class="tooltip-text-item">
+            <Information size={16} /> {reason}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/each}
+</section>
+
+<style>
+  .programs-container {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    margin-bottom: 1.5rem;
+  }
+
+  .programs-container header {
+    display: contents;
+    font-weight: bold;
+  }
+
+  .programs-container header .column {
+    padding: 0.5rem 8px;
+  }
+
+  .programs-container .column {
+    border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
+    padding: 1rem 8px;
+  }
+
+  .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;
+    }
+  }
+</style>

package/dist/components/ApplicantProgramListTooltip.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Tooltip from "carbon-components-svelte/src/Tooltip/Tooltip.svelte";
+  import type { ApplicationForDetails } from './types'
+
+  export let application: ApplicationForDetails
+</script>
+
+{#if application.warningReasons.length || application.ineligibleReasons.length}
+  <Tooltip align="end" direction="bottom" triggerText="" class="reason-tooltip">
+    {#if application.ineligibleReasons.length}
+      <p><strong>Ineligible Because:</strong></p>
+      {#each application.ineligibleReasons as reason (reason)}
+        <p>{reason}</p>
+      {/each}
+    {:else if application.warningReasons.length}
+      <p><strong>Warnings:</strong></p>
+      {#each application.warningReasons as reason (reason)}
+        <p>{reason}</p>
+      {/each}
+    {/if}
+  </Tooltip>
+{/if}

package/dist/components/ApplicantPromptPage.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  /**
+   * This page collects prompt data from the applicant. Only one route exists per
+   * prompt, even if the prompt is shared between multiple applications. We should
+   * be able to figure out which application we are in based on the full state of
+   * the app request since the prompt should only be visible in a single spot.
+   */
+
+  import { Form } from '@txstate-mws/carbon-svelte'
+  import type { FormStore } from '@txstate-mws/svelte-forms'
+  import Button from "carbon-components-svelte/src/Button/Button.svelte";
+  import { getContext } from 'svelte'
+  import type { Writable } from 'svelte/store'
+  import { afterNavigate, beforeNavigate, goto, invalidate } from '$app/navigation'
+  import type { ResolvedPathname } from '$app/types'
+  import { api, ButtonLoadingIcon } from '..'
+  import { uiRegistry } from '../../local/index.js'
+  import type { PageData } from '../../routes/requests/[id]/apply/[promptId]/$types.js'
+
+  export let data: PageData
+  $: ({ prompt, appRequestForExport } = data)
+  $: def = uiRegistry.getPrompt(prompt.key)
+  const nextHref = getContext<Writable<{ nextHref: ResolvedPathname, prevHref: ResolvedPathname | undefined }>>('nextHref')
+
+  let store: FormStore | undefined
+  let continueAfterSave = false
+  $: hasPreviousPrompt = $nextHref.prevHref != null
+
+  async function handleBack () {
+    const previousHref = $nextHref.prevHref
+    if (previousHref) {
+      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
+      await goto(previousHref)
+    }
+  }
+
+  async function onSubmit (data: any) {
+    const { success, messages } = await api.updatePrompt(prompt.id, data, false, appRequestForExport.dataVersion)
+    return {
+      success,
+      messages,
+      data
+    }
+  }
+
+  async function onValidate (data: any) {
+    const { messages } = await api.updatePrompt(prompt.id, data, true, appRequestForExport.dataVersion)
+    return messages
+  }
+
+  async function onSaved () {
+    await invalidate('request:apply')
+    if (continueAfterSave && prompt.answered) {
+      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
+      await goto($nextHref.nextHref)
+    } else await store?.setData(appRequestForExport.data[prompt.key] as object)
+  }
+
+  // Remove the form from the DOM when navigating between prompts
+  // to make sure state is reset
+  let hideForm = false
+  beforeNavigate(() => {
+    hideForm = true
+  })
+  afterNavigate(() => {
+    hideForm = false
+  })
+</script>
+
+{#if !hideForm}
+  <div class="prompt-intro flow max-w-screen-md mx-auto pt-10 px-6">
+    <!-- svelte-ignore a11y_autofocus -->
+    <h2 id="prompt-title" tabindex="-1" autofocus class="font-medium text-xl text-center">{prompt.title}</h2>
+    <p class="text-center"> {prompt.description}</p>
+  </div>
+  <Form bind:store hideFallbackMessage submit={onSubmit} validate={onValidate} preload={prompt.preloadData} on:saved={onSaved} let:data>
+    <svelte:component this={def!.formComponent} {data} appRequestId={appRequestForExport.id} appRequestData={appRequestForExport.data} fetched={prompt.fetchedData} configData={prompt.configurationData} gatheredConfigData={prompt.gatheredConfigData} />
+    <svelte:fragment slot="submit" let:submitting>
+      <div class='form-submit flex gap-12 justify-center mt-16'>
+        {#if hasPreviousPrompt}
+          <Button kind="ghost" on:click={handleBack}>Back</Button>
+        {/if}
+        <Button icon={submitting && !continueAfterSave ? ButtonLoadingIcon : null} type="submit" kind="secondary" disabled={submitting} on:click={() => { continueAfterSave = false }}>Save</Button>
+        <Button icon={submitting && !continueAfterSave ? ButtonLoadingIcon : null} type="submit" disabled={submitting} on:click={() => { continueAfterSave = true }}>Continue</Button>
+      </div>
+    </svelte:fragment>
+  </Form>
+{/if}