feat: before app submission refresh access token (#1006)

Co-authored-by: Morgan Ludtke <[email protected]>

shared-helpers/src/auth/Timeout.tsx

@@ -12,7 +12,7 @@ import { Button, Dialog } from "@bloom-housing/ui-seeds"
 import { t } from "@bloom-housing/ui-components"
 import { NavigationContext } from "@bloom-housing/doorway-ui-components"
 import { MessageContext } from "../utilities/MessageContext"
-        
+
 const PROMPT_TIMEOUT = 60000
 const events = ["mousemove", "keypress", "scroll"]
 

shared-helpers/src/locales/es.json

@@ -1146,6 +1146,11 @@
   "region.name": "Región local",
   "search.filters": "Filtros",
   "search.totalResults": "Resultados totales",
+  "session.voided.header": "La sesión expiró",
+  "session.voided.context1": "Has cerrado sesión y tu solicitud de ",
+  "session.voided.context2": " no fue presentado. Inicie sesión nuevamente para enviar su solicitud.",
+  "session.voided.context3": "Serás redirigido a la página de inicio de sesión.",
+  "session.voided.ok": "DE ACUERDO",
   "states.AK": "Alaska",
   "states.AL": "Alabama",
   "states.AR": "Arkansas",

shared-helpers/src/locales/general.json

@@ -1099,6 +1099,11 @@
   "region.name": "Local Region",
   "search.filters": "Filters",
   "search.totalResults": "Total results",
+  "session.voided.header": "Session expired",
+  "session.voided.context1": "You've been signed out and your application for ",
+  "session.voided.context2": " was not submitted. Please sign in again to submit your application.",
+  "session.voided.context3": "You will be redirected to the sign in page.",
+  "session.voided.ok": "OK",
   "states.AK": "Alaska",
   "states.AL": "Alabama",
   "states.AR": "Arkansas",

shared-helpers/src/locales/tl.json

@@ -1111,6 +1111,11 @@
   "region.name": "Lokal na rehiyon",
   "search.filters": "Mga filter",
   "search.totalResults": "Kabuuang mga resulta",
+  "session.voided.header": "Nag-expire na ang session",
+  "session.voided.context1": "Na-sign out ka at ang iyong aplikasyon para sa ",
+  "session.voided.context2": " ay hindi naisumite. Mangyaring mag-sign in muli upang isumite ang iyong aplikasyon.",
+  "session.voided.context3": "Ire-redirect ka sa pahina ng pag-sign in.",
+  "session.voided.ok": "OK",
   "states.AK": "Alaska",
   "states.AL": "Alabama",
   "states.AR": "Arkansas",

shared-helpers/src/locales/vi.json

@@ -1149,6 +1149,11 @@
   "region.name": "Địa phương",
   "search.filters": "Bộ lọc",
   "search.totalResults": "Tổng kết quả",
+  "session.voided.header": "Phiên đã hết hạn",
+  "session.voided.context1": "Bạn đã đăng xuất và đơn đăng ký của bạn ",
+  "session.voided.context2": " đã không được nộp. Vui lòng đăng nhập lại để gửi đơn đăng ký của bạn.",
+  "session.voided.context3": "Bạn sẽ được chuyển hướng đến trang đăng nhập.",
+  "session.voided.ok": "ĐƯỢC RỒI",
   "states.AK": "Alaska",
   "states.AL": "Alabama",
   "states.AR": "Arkansas",

shared-helpers/src/locales/zh.json

@@ -1149,6 +1149,11 @@
   "region.name": "當地地區",
   "search.filters": "筛选器",
   "search.totalResults": "總結果",
+  "session.voided.header": "會話已過期",
+  "session.voided.context1": "您已退出並且您的申請 ",
+  "session.voided.context2": " 沒有提交。請重新登入以提交您的申請。",
+  "session.voided.context3": "您將被重新導向到登入頁面。",
+  "session.voided.ok": "好的",
   "states.AK": "Alaska（阿拉斯加州）",
   "states.AL": "Alabama（阿拉巴馬州）",
   "states.AR": "Arkansas（阿肯色州）",

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react"
+import React, { useCallback, useContext, useEffect, useState } from "react"
 import { useRouter } from "next/router"
 import { useForm } from "react-hook-form"
 import Markdown from "markdown-to-jsx"
@@ -20,14 +20,20 @@ import {
   MultiselectQuestionsApplicationSectionEnum,
 } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import ApplicationFormLayout from "../../../layouts/application-form"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Dialog } from "@bloom-housing/ui-seeds"
 
 const ApplicationTerms = () => {
   const router = useRouter()
   const { conductor, application, listing } = useFormConductor("terms")
-  const { applicationsService, profile } = useContext(AuthContext)
+  const { applicationsService, authService, loadProfile, profile } = useContext(AuthContext)
   const [apiError, setApiError] = useState(false)
   const [submitting, setSubmitting] = useState(false)
+  const [sessionVoided, setSessionVoided] = useState(false)
+
+  const closeCallback = useCallback(async () => {
+    await router.push("/sign-in")
+    void loadProfile()
+  }, [router, loadProfile])
 
   let currentPageSection = 4
   if (listingSectionQuestions(listing, MultiselectQuestionsApplicationSectionEnum.programs)?.length)
@@ -63,33 +69,44 @@ const ApplicationTerms = () => {
     // @ts-ignore
     delete application.demographics.spokenLanguageNotListed
 
-    applicationsService
-      .submit({
-        body: {
-          ...application,
-          reviewStatus: ApplicationReviewStatusEnum.pending,
-          listings: {
-            id: listing.id,
-          },
-          appUrl: window.location.origin,
-          ...(profile && {
-            user: {
-              id: profile.id,
+    authService
+      .requestNewToken()
+      .then(() => {
+        applicationsService
+          .submit({
+            body: {
+              ...application,
+              reviewStatus: ApplicationReviewStatusEnum.pending,
+              listings: {
+                id: listing.id,
+              },
+              appUrl: window.location.origin,
+              ...(profile && {
+                user: {
+                  id: profile.id,
+                },
+              }),
+              // TODO remove this once this call is changed to the new backend
             },
-          }),
-          // TODO remove this once this call is changed to the new backend
-        },
-      })
-      .then((result) => {
-        conductor.currentStep.save({ confirmationCode: result.confirmationCode })
-        return router.push("/applications/review/confirmation")
+          })
+          .then((result) => {
+            conductor.currentStep.save({ confirmationCode: result.confirmationCode })
+            return router.push("/applications/review/confirmation")
+          })
+          .catch((err) => {
+            setSubmitting(false)
+            setApiError(true)
+            window.scrollTo(0, 0)
+            console.error(`Error creating application: ${err}`)
+            throw err
+          })
       })
-      .catch((err) => {
-        setSubmitting(false)
-        setApiError(true)
-        window.scrollTo(0, 0)
-        console.error(`Error creating application: ${err}`)
-        throw err
+      .catch((e) => {
+        // We need to have a valid user when submitting an application.
+        // If their session is no longer valid we should send them back to login
+        // This can happen either by auth token being too old or the user logged in a different session and voided this one
+        console.error(e)
+        setSessionVoided(true)
       })
   }
 
@@ -103,6 +120,29 @@ const ApplicationTerms = () => {
 
   return (
     <FormsLayout>
+      <Dialog
+        isOpen={sessionVoided}
+        onClose={closeCallback}
+        ariaLabelledBy="session-voided-dialog-header"
+        ariaDescribedBy="session-voided-dialog-content"
+      >
+        <Dialog.Header id="session-voided-dialog-header">
+          {t("session.voided.header")}
+        </Dialog.Header>
+        <Dialog.Content id="session-voided-dialog-content">
+          <p>
+            {t("session.voided.context1")}
+            {listing.name}
+            {t("session.voided.context2")}
+          </p>
+          <p>{t("session.voided.context3")}</p>
+        </Dialog.Content>
+        <Dialog.Footer>
+          <Button variant="primary" onClick={closeCallback} size="sm">
+            {t("session.voided.ok")}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
       <Form id="review-terms" onSubmit={handleSubmit(onSubmit)}>
         <ApplicationFormLayout
           listingName={listing?.name}