feat: DAH-4037 I2I response pages

app/controllers/invite_to_controller.rb

@@ -1,12 +1,11 @@
 # Invite to X controller
 class InviteToController < ApplicationController
   def index
-    # TODO: uncomment when backend token updated
-    # decoded_params = decode_token(params[:t])
-    # if decoded_params.is_a?(String)
-    #   redirect_to decoded_params
-    #   return
-    # end
+    decoded_params = decode_token(params[:t])
+    if decoded_params.is_a?(String)
+      redirect_to decoded_params
+      return
+    end
     decoded_params ||= params
     @invite_to_props = props(decoded_params)
     # Get file upload URL for application

app/javascript/__tests__/api/inviteToApplyApiService.test.ts → app/javascript/__tests__/api/inviteToApiService.test.ts

@@ -1,5 +1,6 @@
 import { post } from "../../api/apiService"
 import { recordResponse } from "../../api/inviteToApiService"
+import { INVITE_TO_X } from "../../modules/constants"
 
 jest.mock("../../api/apiService", () => ({
   post: jest.fn(),
@@ -16,7 +17,7 @@ describe("inviteToApiService", () => {
         deadline: "2099-01-01",
         action: "submit",
         response: "submit",
-        type: "I2A",
+        type: INVITE_TO_X.APPLY,
       }
       await recordResponse(record)
       expect(post).toHaveBeenCalled()

app/javascript/__tests__/pages/invite-to-apply.test.tsx

@@ -9,6 +9,7 @@ import { localizedFormat } from "../../util/languageUtil"
 import { getListing } from "../../api/listingApiService"
 import { recordResponse } from "../../api/inviteToApiService"
 import { ConfigContext } from "../../lib/ConfigContext"
+import { INVITE_TO_X } from "../../modules/constants"
 
 jest.mock("../../api/listingApiService")
 jest.mock("../../api/inviteToApiService", () => ({
@@ -98,7 +99,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             act: "contact",
             deadline: mockPastDeadline,
           }}
@@ -117,7 +118,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockFutureDeadline,
             act: "no",
             appId: "0000",
@@ -145,7 +146,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockFutureDeadline,
             act: "contact",
             appId: "0000",
@@ -182,7 +183,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockPastDeadline,
             act: "yes",
             appId: "0000",
@@ -197,7 +198,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockFutureDeadline,
             act: "yes",
           }}
@@ -217,7 +218,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockFutureDeadline,
             act: "yes",
             appId: "a0o123",
@@ -242,7 +243,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockFutureDeadline,
             act: "yes",
             appId: "a0o123",
@@ -264,7 +265,7 @@ describe("Invite to Apply", () => {
         <InviteToPage
           assetPaths={"/"}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
             deadline: mockFutureDeadline,
             act: "yes",
           }}
@@ -285,7 +286,7 @@ describe("Invite to Apply", () => {
           assetPaths={"/"}
           documentsPath={true}
           urlParams={{
-            type: "I2A",
+            type: INVITE_TO_X.APPLY,
           }}
         />
       )

app/javascript/__tests__/pages/invite-to-interview.test.tsx

@@ -8,6 +8,7 @@ import { renderAndLoadAsync } from "../__util__/renderUtils"
 import { ConfigContext } from "../../lib/ConfigContext"
 import { getListing } from "../../api/listingApiService"
 import { recordResponse } from "../../api/inviteToApiService"
+import { INVITE_TO_X } from "../../modules/constants"
 
 jest.mock("../../api/listingApiService")
 jest.mock("../../api/inviteToApiService", () => ({
@@ -89,7 +90,7 @@ describe("Invite to Interview", () => {
       <InviteToPage
         assetPaths={"/"}
         urlParams={{
-          type: "I2I",
+          type: INVITE_TO_X.INTERVIEW,
         }}
         documentsPath={true}
       />
@@ -104,7 +105,7 @@ describe("Invite to Interview", () => {
       <InviteToPage
         assetPaths={"/"}
         urlParams={{
-          type: "I2I",
+          type: INVITE_TO_X.INTERVIEW,
           act: "yes",
           deadline: "2030-10-10",
           appId: "test-id",
@@ -120,7 +121,7 @@ describe("Invite to Interview", () => {
       <InviteToPage
         assetPaths={"/"}
         urlParams={{
-          type: "I2I",
+          type: INVITE_TO_X.INTERVIEW,
           act: "yes",
           deadline: "2020-10-10",
           appId: "test-id",
@@ -135,7 +136,7 @@ describe("Invite to Interview", () => {
       <InviteToPage
         assetPaths={"/"}
         urlParams={{
-          type: "I2I",
+          type: INVITE_TO_X.INTERVIEW,
           act: "yes",
           deadline: "2030-10-10",
           appId: "test-id",
@@ -150,7 +151,7 @@ describe("Invite to Interview", () => {
       <InviteToPage
         assetPaths={"/"}
         urlParams={{
-          type: "I2I",
+          type: INVITE_TO_X.INTERVIEW,
           deadline: "2030-10-10",
           act: "yes",
           appId: "test-id",
@@ -163,4 +164,47 @@ describe("Invite to Interview", () => {
     await userEvent.click(button)
     expect(recordResponse).toHaveBeenCalled()
   })
+
+  it("shows the withdrawn page when the action is no", async () => {
+    await renderWithContext(
+      <InviteToPage
+        assetPaths={"/"}
+        urlParams={{
+          type: INVITE_TO_X.INTERVIEW,
+          act: "no",
+          deadline: "2030-10-10",
+          appId: "test-id",
+        }}
+      />
+    )
+    expect(screen.getByText(t("inviteToInterviewPage.withdrawn.title"))).toBeInTheDocument()
+  })
+  it("shows the withdrawn page without the body when the deadline is passed", async () => {
+    await renderWithContext(
+      <InviteToPage
+        assetPaths={"/"}
+        urlParams={{
+          type: INVITE_TO_X.INTERVIEW,
+          act: "no",
+          deadline: "2020-10-10",
+          appId: "test-id",
+        }}
+      />
+    )
+    expect(screen.queryByText(t("inviteToInterviewPage.withdrawn.body"))).not.toBeInTheDocument()
+  })
+  it("shows the waitlist page when the action is contact", async () => {
+    await renderWithContext(
+      <InviteToPage
+        assetPaths={"/"}
+        urlParams={{
+          type: INVITE_TO_X.INTERVIEW,
+          act: "contact",
+          deadline: "2030-10-10",
+          appId: "test-id",
+        }}
+      />
+    )
+    expect(screen.getByText(t("inviteToInterviewPage.waitlist.title"))).toBeInTheDocument()
+  })
 })

app/javascript/modules/constants.tsx

@@ -288,3 +288,8 @@ export const RELATIONSHIP_OPTIONS = [
   { value: "Friend", label: "label.friend" },
   { value: "Other", label: "label.Other" },
 ]
+
+export enum INVITE_TO_X {
+  APPLY = "I2A",
+  INTERVIEW = "I2I",
+}

app/javascript/pages/inviteTo/InviteToContactMeLater.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import { t, LoadingOverlay } from "@bloom-housing/ui-components"
+import { Card, Heading } from "@bloom-housing/ui-seeds"
+import styles from "./invite-to.module.scss"
+import { renderMarkup, localizedFormat } from "../../util/languageUtil"
+import RailsSaleListing from "../../api/types/rails/listings/RailsSaleListing"
+import FormLayout from "../../layouts/FormLayout"
+import InviteToApplyHeader from "./InviteToHeader"
+import InviteToLeasingAgentInfo from "./InviteToLeasingAgentInfo"
+import { INVITE_TO_X } from "../../modules/constants"
+
+interface InviteToContactMeLaterProps {
+  type: INVITE_TO_X
+  listing: RailsSaleListing | null
+  deadline: string
+  submitPreviewLink: string
+}
+
+const InviteToContactMeLater = ({
+  type,
+  listing,
+  deadline,
+  submitPreviewLink,
+}: InviteToContactMeLaterProps) => {
+  return (
+    <FormLayout>
+      <LoadingOverlay isLoading={!listing}>
+        <InviteToApplyHeader listing={listing} />
+        <Card className={styles.responseCard}>
+          <Card.Header className={styles.responseHeader} divider="flush">
+            <Heading priority={2} size="2xl" className={styles.responseHeading}>
+              {type === INVITE_TO_X.APPLY
+                ? t("inviteToApplyPage.contact.title", {
+                    listingName: listing?.Building_Name_for_Process,
+                  })
+                : t("inviteToInterviewPage.waitlist.title")}
+            </Heading>
+            <p className={styles.responseSubtitle}>
+              {type === INVITE_TO_X.APPLY && t("inviteToApplyPage.contact.subtitle")}
+              {type === INVITE_TO_X.INTERVIEW &&
+                renderMarkup(
+                  `${t("inviteToInterviewPage.waitlist.subtitle", {
+                    listingName: listing?.Building_Name_for_Process,
+                    link: `/listings/${listing?.Id}`,
+                  })}\n\n${t("inviteToInterviewPage.waitlist.p1")}`,
+                  "<strong></strong><a></a>"
+                )}
+            </p>
+          </Card.Header>
+          <Card.Section className={styles.responseSection}>
+            <Heading priority={3} size="xl" className={styles.responseHeading}>
+              {t("inviteToApplyPage.leasingAgent.p1")}
+            </Heading>
+            <p>{t("inviteToApplyPage.leasingAgent.p2")}</p>
+            <p>{t("inviteToApplyPage.leasingAgent.p3")}</p>
+            <InviteToLeasingAgentInfo listing={listing} />
+            {type === INVITE_TO_X.APPLY &&
+              renderMarkup(
+                t("inviteToApplyPage.submitYourInfo", {
+                  listingName: listing?.Building_Name_for_Process,
+                  link: submitPreviewLink,
+                  deadline: localizedFormat(deadline, "ll"),
+                }),
+                "<strong></strong><a></a>"
+              )}
+            {type === INVITE_TO_X.INTERVIEW &&
+              renderMarkup(
+                t("inviteToInterviewPage.waitlist.body", {
+                  listingName: listing?.Building_Name_for_Process,
+                  link: submitPreviewLink,
+                  deadline: localizedFormat(deadline, "ll"),
+                }),
+                "<strong></strong><a></a>"
+              )}
+          </Card.Section>
+        </Card>
+      </LoadingOverlay>
+    </FormLayout>
+  )
+}
+
+export default InviteToContactMeLater

app/javascript/pages/inviteTo/InviteToLayout.tsx

@@ -12,6 +12,7 @@ import {
 import styles from "./invite-to.module.scss"
 import InviteToLeasingAgentInfo from "./InviteToLeasingAgentInfo"
 import Layout from "../../layouts/Layout"
+import { INVITE_TO_X } from "../../modules/constants"
 
 const InviteToHeader = ({
   listing,
@@ -40,9 +41,9 @@ const DeadlineBanner = ({
 }: {
   deadline: string
   listing: RailsSaleListing
-  type: string
+  type: INVITE_TO_X
 }) => {
-  if (type === "I2A") {
+  if (type === INVITE_TO_X.APPLY) {
     return (
       <Message
         fullwidth
@@ -110,7 +111,7 @@ const InviteToSidebarBlock = ({
 
 interface InviteToLayoutProps {
   listing: RailsSaleListing
-  type: "I2I" | "I2A"
+  type: INVITE_TO_X
   title?: string
   subtitle?: string
   children: React.ReactNode