feat: DAH-4006 I2I Next steps page and refactor with I2A

app/assets/json/translations/react/en.json

@@ -903,7 +903,7 @@
   "inviteToInterviewPage.leasingAgent.p2": "We sent you an email confirming your answer. Follow the link in your email if you need to change it.",
   "inviteToInterviewPage.leasingAgent.p3": "Or, contact the leasing agent:",
   "inviteToInterviewPage.submitYourInfo.deadline": "%{day} at 11:59 pm Pacific Time",
-  "inviteToInterviewPage.submitYourInfo.deadlineInfo": "<strong>The deadline to schedule your appointment has passed:</strong> %{day} at 11:59 pm Pacific Time. If you are still interested in an apartment at %{listingName}, contact the leasing agent.",
+  "inviteToInterviewPage.submitYourInfo.deadlineInfo": "<strong>The deadline to schedule your appointment has passed:</strong> %{day} at 11:59 pm Pacific Time.\n\nIf you are still interested in an apartment at %{listingName}, contact the leasing agent.",
   "inviteToInterviewPage.submitYourInfo.deadlinePassed": "The deadline to schedule your appointment has passed: ",
   "inviteToInterviewPage.submitYourInfo.prepare.p1": "If you already work with a housing counselor, contact them for help with your application.",
   "inviteToInterviewPage.submitYourInfo.prepare.p2": "Otherwise, <a target='_blank' href='https://www.homesanfrancisco.org'>HomeSF</a> can connect you with someone who can help.",

app/controllers/invite_to_controller.rb

@@ -1,24 +1,25 @@
 # Invite to X controller
 class InviteToController < ApplicationController
   def index
-    decoded_params = decode_token(params[:t])
-    if decoded_params.is_a?(String)
-      redirect_to decoded_params
-      return
-    end
+    # 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 ||= params
     @invite_to_props = props(decoded_params)
     # Get file upload URL for application
     if decoded_params['appId'].present?
       application = Force::ShortFormService.get(decoded_params['appId'])
       @invite_to_props = @invite_to_props.merge(
-        fileUploadUrl: application['uploadURL'],
+        url: application['uploadURL'],
       )
     end
     if decoded_params['applicationNumber'].present?
       application = Force::ShortFormService.get(decoded_params['applicationNumber'])
       @invite_to_props = @invite_to_props.merge(
-        fileUploadUrl: application['uploadURL'],
+        url: application['uploadURL'],
       )
     end
     record_response(decoded_params)
@@ -37,31 +38,31 @@ def props(decoded_params = params)
     url_params = {
       type: decoded_params['type'],
       deadline: decoded_params['deadline'],
-      action: decoded_params['action'] || decoded_params['response'],
+      act: decoded_params['act'] || decoded_params['response'],
       appId: decoded_params['appId'] || decoded_params['applicationNumber'],
     }
 
     {
       assetPaths: static_asset_paths,
       urlParams: url_params,
-      submitPreviewLinkTokenParam: encode_token(url_params.except(:action, :response)),
+      submitPreviewLinkTokenParam: encode_token(url_params.except(:act, :response)),
     }.compact
   end
 
   def record_response(decoded_params)
     deadline = decoded_params['deadline']
     response = decoded_params['response']
     application_number = decoded_params['applicationNumber']
-    action = decoded_params['action']
+    invite_action = decoded_params['act']
     app_id = decoded_params['appId']
 
-    if (action.blank? && response.blank?) || (deadline && deadline_has_passed?(deadline)) || language_change?
+    if (invite_action.blank? && response.blank?) || (deadline && deadline_has_passed?(deadline)) || language_change?
       Rails.logger.info(
         'InviteToController#record_response: *NOT* recording ' \
         "deadline=#{deadline}, " \
         "app_id=#{app_id}, " \
         "application_number=#{application_number}, " \
-        "action=#{action.inspect}, " \
+        "act=#{invite_action.inspect}, " \
         "response=#{response.inspect}",
       )
       return
@@ -72,7 +73,7 @@ def record_response(decoded_params)
       "deadline=#{deadline}, " \
       "app_id=#{app_id}, " \
       "application_number=#{application_number}, " \
-      "action=#{action}, " \
+      "act=#{invite_action}, " \
       "response=#{response}",
     )
 
@@ -81,7 +82,7 @@ def record_response(decoded_params)
       app_id,
       application_number,
       response,
-      action,
+      invite_action,
       params['id'], # listing_id
     )
   end
@@ -99,7 +100,7 @@ def decode_token(token)
     #     "data" => {
     #       "type" => "I2I",
     #       "deadline" => "1999-12-31",
-    #       "action" => "yes",
+    #       "act" => "yes",
     #       "appId" => "12345678"
     #     },
     #     "iat" => 946512000

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

@@ -1,11 +1,11 @@
 import { post } from "../../api/apiService"
-import { recordResponse } from "../../api/inviteToApplyApiService"
+import { recordResponse } from "../../api/inviteToApiService"
 
 jest.mock("../../api/apiService", () => ({
   post: jest.fn(),
 }))
 
-describe("inviteToApplyApiService", () => {
+describe("inviteToApiService", () => {
   describe("recordResponse", () => {
     it("calls apiService post", async () => {
       post as jest.Mock

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

@@ -7,11 +7,11 @@ import InviteToPage from "../../pages/inviteTo/invite-to"
 import { renderAndLoadAsync } from "../__util__/renderUtils"
 import { localizedFormat } from "../../util/languageUtil"
 import { getListing } from "../../api/listingApiService"
-import { recordResponse } from "../../api/inviteToApplyApiService"
+import { recordResponse } from "../../api/inviteToApiService"
 import { ConfigContext } from "../../lib/ConfigContext"
 
 jest.mock("../../api/listingApiService")
-jest.mock("../../api/inviteToApplyApiService", () => ({
+jest.mock("../../api/inviteToApiService", () => ({
   recordResponse: jest.fn(),
 }))
 jest.mock("../../hooks/useFeatureFlag", () => ({
@@ -99,7 +99,7 @@ describe("Invite to Apply", () => {
           assetPaths={"/"}
           urlParams={{
             type: "I2A",
-            action: "contact",
+            act: "contact",
             deadline: mockPastDeadline,
           }}
         />
@@ -119,12 +119,12 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockFutureDeadline,
-            action: "no",
+            act: "no",
             appId: "0000",
           }}
         />
       )
-      const submitPreviewLink = `/en/listings/${mockListing.Id}/next-steps?appId=0000&deadline=${mockFutureDeadline}`
+      const submitPreviewLink = `/en/listings/${mockListing.Id}/next-steps?appId=0000&deadline=${mockFutureDeadline}&type=I2A`
 
       expect(screen.getByText(t("inviteToApplyPage.withdrawn.title"))).toBeInTheDocument()
       expect(screen.getByText(mockListing.Building_Name_for_Process)).toBeInTheDocument()
@@ -147,13 +147,13 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockFutureDeadline,
-            action: "contact",
+            act: "contact",
             appId: "0000",
           }}
         />
       )
 
-      const submitPreviewLink = `/en/listings/${mockListing.Id}/next-steps?appId=0000&deadline=${mockFutureDeadline}`
+      const submitPreviewLink = `/en/listings/${mockListing.Id}/next-steps?appId=0000&deadline=${mockFutureDeadline}&type=I2A`
 
       expect(
         screen.getByText(
@@ -184,7 +184,7 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockPastDeadline,
-            action: "yes",
+            act: "yes",
             appId: "0000",
           }}
         />
@@ -199,7 +199,7 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockFutureDeadline,
-            action: "yes",
+            act: "yes",
           }}
         />
       )
@@ -219,7 +219,7 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockFutureDeadline,
-            action: "yes",
+            act: "yes",
             appId: "a0o123",
           }}
         />
@@ -244,7 +244,7 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockFutureDeadline,
-            action: "yes",
+            act: "yes",
             appId: "a0o123",
           }}
         />
@@ -266,7 +266,7 @@ describe("Invite to Apply", () => {
           urlParams={{
             type: "I2A",
             deadline: mockFutureDeadline,
-            action: "yes",
+            act: "yes",
           }}
         />
       )

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

@@ -2,13 +2,15 @@ import React from "react"
 import { screen } from "@testing-library/react"
 import "@testing-library/jest-dom"
 import { t } from "@bloom-housing/ui-components"
+import { userEvent } from "@testing-library/user-event"
 import InviteToPage from "../../pages/inviteTo/invite-to"
 import { renderAndLoadAsync } from "../__util__/renderUtils"
 import { ConfigContext } from "../../lib/ConfigContext"
 import { getListing } from "../../api/listingApiService"
+import { recordResponse } from "../../api/inviteToApiService"
 
 jest.mock("../../api/listingApiService")
-jest.mock("../../api/inviteToApplyApiService", () => ({
+jest.mock("../../api/inviteToApiService", () => ({
   recordResponse: jest.fn(),
 }))
 jest.mock("../../hooks/useFeatureFlag", () => ({
@@ -23,7 +25,7 @@ jest.mock("../../hooks/useFeatureFlag", () => ({
     unleashFlag: true,
     variant: {
       payload: {
-        value: "listing-id",
+        value: JSON.stringify({ enabled_listings: ["listing-id"] }),
       },
     },
   }),
@@ -33,16 +35,16 @@ const mockListing = {
   Id: "listing-id",
   Name: "Test Listing",
   Building_Name_for_Process: "Test Building",
+  Leaseup_Appointment_Scheduling_URL: "test-link",
   Leasing_Agent_Name: "test-agent",
   Leasing_Agent_Phone: "123-456-7890",
   Leasing_Agent_Email: "test-agent@test-agent.com",
   Office_Hours: "9-5 M-F",
-  File_Upload_URL: "https://example.com/upload",
   translations: {},
   Listing_Images: [
     {
-      Image_URL: "example-image-url",
-      Image_Description: "example-image-alt",
+      Image_URL: "image-url",
+      Image_Description: "image-alt",
     },
   ],
 }
@@ -82,7 +84,7 @@ describe("Invite to Interview", () => {
   afterEach(() => {
     jest.restoreAllMocks()
   })
-  it("renders the documents page when documentsPath is true", async () => {
+  it("renders the documents page", async () => {
     await renderWithContext(
       <InviteToPage
         assetPaths={"/"}
@@ -93,21 +95,72 @@ describe("Invite to Interview", () => {
       />
     )
     expect(
-      screen.getByText(t("inviteToInterviewPage.documents.checkWhatYouNeed.bringDocuments.title"))
+      screen.getByText(t("inviteToInterviewPage.documents.checkWhatYouNeed.title"))
     ).toBeInTheDocument()
   })
 
-  it("renders the deadline passed page if the deadline is passed", async () => {
+  it("renders the next steps page", async () => {
     await renderWithContext(
       <InviteToPage
         assetPaths={"/"}
         urlParams={{
           type: "I2I",
-          deadline: "2020-10-10",
+          act: "yes",
+          deadline: "2030-10-10",
+          appId: "test-id",
         }}
         documentsPath={false}
       />
     )
-    expect(screen.getByText(t("inviteToInterviewPage.deadlinePassed.title"))).toBeInTheDocument()
+    expect(screen.getByText(t("inviteToInterviewPage.submitYourInfo.subtitle"))).toBeInTheDocument()
+  })
+
+  it("shows the deadline passed banner if deadline is passed", async () => {
+    await renderWithContext(
+      <InviteToPage
+        assetPaths={"/"}
+        urlParams={{
+          type: "I2I",
+          act: "yes",
+          deadline: "2020-10-10",
+          appId: "test-id",
+        }}
+      />
+    )
+    expect(screen.getByTestId("deadline-passed-banner")).toBeInTheDocument()
+  })
+
+  it("shows the deadline banner when deadline is not passed", async () => {
+    await renderWithContext(
+      <InviteToPage
+        assetPaths={"/"}
+        urlParams={{
+          type: "I2I",
+          act: "yes",
+          deadline: "2030-10-10",
+          appId: "test-id",
+        }}
+      />
+    )
+    expect(screen.getByTestId("deadline-not-passed-banner")).toBeInTheDocument()
+  })
+
+  it("records the response when the scheduling button is clicked", async () => {
+    await renderWithContext(
+      <InviteToPage
+        assetPaths={"/"}
+        urlParams={{
+          type: "I2I",
+          deadline: "2030-10-10",
+          act: "yes",
+          appId: "test-id",
+        }}
+      />
+    )
+    const button = screen.getByRole("button", {
+      name: t("inviteToInterviewPage.submitYourInfo.whatToDo.step1.p2"),
+    })
+    await userEvent.click(button)
+    expect(recordResponse).toHaveBeenCalled()
   })
 })

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

@@ -3,7 +3,6 @@ import { post } from "./apiService"
 export const recordResponse = async (record: {
   listingId: string
   appId: string
-  // Deprecated I2A pilot - remove in DAH-4045
   applicationNumber: string
   deadline: string
   action: string

app/javascript/api/types/rails/listings/BaseRailsListing.d.ts

@@ -104,6 +104,7 @@ type BaseRailsListing = {
   In_Lottery: number
   Information_Sessions?: ListingEvent[]
   LastModifiedDate: string
+  Leaseup_Appointment_Scheduling_URL?: string
   Leasing_Agent_City?: string
   Leasing_Agent_Email?: string
   Leasing_Agent_Name?: string

app/javascript/pages/inviteTo/InviteToDeadlinePassed.tsx

@@ -4,7 +4,7 @@ import { Card, Heading } from "@bloom-housing/ui-seeds"
 import styles from "./invite-to.module.scss"
 import RailsSaleListing from "../../api/types/rails/listings/RailsSaleListing"
 import FormLayout from "../../layouts/FormLayout"
-import InviteToApplyLeasingAgentInfo from "./InviteToLeasingAgentInfo"
+import InviteToLeasingAgentInfo from "./InviteToLeasingAgentInfo"
 import InviteToApplyHeader from "./InviteToHeader"
 
 interface InviteToDeadlinePassedProps {
@@ -31,7 +31,7 @@ const InviteToDeadlinePassed = ({ listing }: InviteToDeadlinePassedProps) => {
                 listingName: listing?.Building_Name_for_Process,
               })}
             </Heading>
-            <InviteToApplyLeasingAgentInfo listing={listing} />
+            <InviteToLeasingAgentInfo listing={listing} />
           </Card.Section>
         </Card>
       </LoadingOverlay>