3032/new what to expect core (#3087)

* feat: bring over What to Expect and update Markdown styles

* feat: show dedicated content on the What to Expect form step

* feat: add additional text to terms and confirmation

* feat: update form conditionals to use waitlist enum

* fix: remove stray import

* fix: typos and improved switch statements

* fix: confirmation text and remove lottery date

sites/public/pages/applications/review/confirmation.tsx

@@ -14,7 +14,7 @@ import {
   FormCard,
   t,
 } from "@bloom-housing/ui-components"
-import { ListingReviewOrder } from "@bloom-housing/backend-core/types"
+import { ListingEvent, ListingReviewOrder } from "@bloom-housing/backend-core/types"
 import {
   imageUrlFromListing,
   PageView,
@@ -33,25 +33,22 @@ const ApplicationConfirmation = () => {
 
   const imageUrl = imageUrlFromListing(listing, parseInt(process.env.listingPhotoSize))
 
-  const reviewOrder = useMemo(() => {
-    if (listing) {
-      if (listing.reviewOrderType == ListingReviewOrder.lottery) {
-        const lotteryEvent = getLotteryEvent(listing)
-        const lotteryText = []
-        if (lotteryEvent?.startTime) {
-          lotteryText.push(
-            t("application.review.confirmation.eligibleApplicants.lotteryDate", {
-              lotteryDate: dayjs(lotteryEvent?.startTime).format("MMMM D, YYYY"),
-            })
-          )
+  const content = useMemo(() => {
+    switch (listing?.reviewOrderType) {
+      case ListingReviewOrder.firstComeFirstServe:
+        return {
+          text: t("application.review.confirmation.whatHappensNext.fcfs"),
         }
-        lotteryText.push(t("application.review.confirmation.eligibleApplicants.lottery"))
-        return lotteryText.join(" ")
-      } else {
-        return t("application.review.confirmation.eligibleApplicants.FCFS")
-      }
-    } else {
-      return ""
+      case ListingReviewOrder.lottery:
+        return {
+          text: t("application.review.confirmation.whatHappensNext.lottery"),
+        }
+      case ListingReviewOrder.waitlist:
+        return {
+          text: t("application.review.confirmation.whatHappensNext.waitlist"),
+        }
+      default:
+        return { text: "" }
     }
   }, [listing, router.locale])
 
@@ -93,9 +90,7 @@ const ApplicationConfirmation = () => {
         <div className="form-card__group border-b markdown markdown-informational">
           <ApplicationTimeline />
 
-          <Markdown options={{ disableParsingRawHTML: true }}>
-            {t("application.review.confirmation.whatHappensNext", { reviewOrder })}
-          </Markdown>
+          <Markdown options={{ disableParsingRawHTML: true }}>{content.text}</Markdown>
         </div>
 
         <div className="form-card__group border-b markdown markdown-informational">

sites/public/pages/applications/review/terms.tsx

@@ -2,7 +2,7 @@
 5.3 Terms
 View of application terms with checkbox
 */
-import React, { useContext, useEffect, useState } from "react"
+import React, { useContext, useEffect, useMemo, useState } from "react"
 import { useRouter } from "next/router"
 import {
   AppearanceStyleType,
@@ -14,7 +14,7 @@ import {
   AlertBox,
   ProgressNav,
 } from "@bloom-housing/ui-components"
-import { ApplicationSection } from "@bloom-housing/backend-core"
+import { ApplicationSection, ListingReviewOrder } from "@bloom-housing/backend-core/types"
 import { useForm } from "react-hook-form"
 import Markdown from "markdown-to-jsx"
 import {
@@ -87,6 +87,25 @@ const ApplicationTerms = () => {
     },
   ]
 
+  const content = useMemo(() => {
+    switch (listing?.reviewOrderType) {
+      case ListingReviewOrder.firstComeFirstServe:
+        return {
+          text: t("application.review.terms.fcfs.text"),
+        }
+      case ListingReviewOrder.lottery:
+        return {
+          text: t("application.review.terms.lottery.text"),
+        }
+      case ListingReviewOrder.waitlist:
+        return {
+          text: t("application.review.terms.waitlist.text"),
+        }
+      default:
+        return { text: "" }
+    }
+  }, [listing, router.locale])
+
   useEffect(() => {
     pushGtmEvent<PageView>({
       event: "pageView",
@@ -122,20 +141,37 @@ const ApplicationTerms = () => {
         )}
 
         <Form id="review-terms" className="mt-4" onSubmit={handleSubmit(onSubmit)}>
-          <div className="form-card__pager-row">
+          <div className="form-card__pager-row markdown">
             {listing?.applicationDueDate && (
-              <Markdown options={{ disableParsingRawHTML: false }}>
-                {t("application.review.terms.textSubmissionDate", {
-                  applicationDueDate: applicationDueDate,
-                })}
-              </Markdown>
+              <>
+                <Markdown options={{ disableParsingRawHTML: true }}>
+                  {t("application.review.terms.textSubmissionDate", {
+                    applicationDueDate: applicationDueDate,
+                  })}
+                </Markdown>
+                <br />
+                <br />
+              </>
             )}
 
-            <Markdown options={{ disableParsingRawHTML: false }}>
-              {t("application.review.terms.text")}
+            <Markdown
+              options={{
+                disableParsingRawHTML: true,
+                overrides: {
+                  li: {
+                    component: ({ children, ...props }) => (
+                      <li {...props} className="mb-5">
+                        {children}
+                      </li>
+                    ),
+                  },
+                },
+              }}
+            >
+              {content.text}
             </Markdown>
 
-            <div className="mt-4">
+            <div className="mt-6">
               <FieldGroup
                 name="agree"
                 type="checkbox"

sites/public/pages/applications/start/what-to-expect.tsx

@@ -2,7 +2,7 @@
 0.2 - What To Expect
 A notice regarding application process and rules
 */
-import React, { useEffect, useContext } from "react"
+import React, { useEffect, useContext, useMemo } from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -12,14 +12,18 @@ import {
   Form,
 } from "@bloom-housing/ui-components"
 import FormsLayout from "../../../layouts/forms"
+import { useRouter } from "next/router"
 import { useForm } from "react-hook-form"
 import { useFormConductor } from "../../../lib/hooks"
 import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../../../lib/constants"
+import Markdown from "markdown-to-jsx"
+import { ListingReviewOrder } from "@bloom-housing/backend-core/types"
 
 const ApplicationWhatToExpect = () => {
   const { profile } = useContext(AuthContext)
   const { conductor, application, listing } = useFormConductor("whatToExpect")
+  const router = useRouter()
   const currentPageSection = 1
 
   /* Form Handler */
@@ -28,6 +32,28 @@ const ApplicationWhatToExpect = () => {
     conductor.routeToNextOrReturnUrl()
   }
 
+  const content = useMemo(() => {
+    switch (listing?.reviewOrderType) {
+      case ListingReviewOrder.firstComeFirstServe:
+        return {
+          steps: t("application.start.whatToExpect.fcfs.steps"),
+          finePrint: t("application.start.whatToExpect.fcfs.finePrint"),
+        }
+      case ListingReviewOrder.lottery:
+        return {
+          steps: t("application.start.whatToExpect.lottery.steps"),
+          finePrint: t("application.start.whatToExpect.lottery.finePrint"),
+        }
+      case ListingReviewOrder.waitlist:
+        return {
+          steps: t("application.start.whatToExpect.waitlist.steps"),
+          finePrint: t("application.start.whatToExpect.waitlist.finePrint"),
+        }
+      default:
+        return { steps: "", finePrint: "" }
+    }
+  }, [listing, router.locale])
+
   useEffect(() => {
     pushGtmEvent<PageView>({
       event: "pageView",
@@ -58,9 +84,41 @@ const ApplicationWhatToExpect = () => {
           </h2>
         </div>
         <div className="form-card__pager-row px-16">
-          <p className="field-note py-2">{t("application.start.whatToExpect.info1")}</p>
-          <p className="field-note py-2">{t("application.start.whatToExpect.info2")}</p>
-          <p className="field-note py-2">{t("application.start.whatToExpect.info3")}</p>
+          <div className="markdown mt-4">
+            <Markdown
+              options={{
+                disableParsingRawHTML: true,
+                overrides: {
+                  ol: {
+                    component: ({ children, ...props }) => (
+                      <ol {...props} className="large-numbers">
+                        {children}
+                      </ol>
+                    ),
+                  },
+                },
+              }}
+            >
+              {content.steps}
+            </Markdown>
+
+            <Markdown
+              options={{
+                disableParsingRawHTML: true,
+                overrides: {
+                  li: {
+                    component: ({ children, ...props }) => (
+                      <li {...props} className="mb-5">
+                        {children}
+                      </li>
+                    ),
+                  },
+                },
+              }}
+            >
+              {content.finePrint}
+            </Markdown>
+          </div>
         </div>
         <Form onSubmit={handleSubmit(onSubmit)}>
           <div className="form-card__pager">