feat: open modal when selecting paper app download language (#3642)

shared-helpers/src/locales/es.json

@@ -497,6 +497,7 @@
   "listings.buildingSelectionCriteria": "Selección de criterios de Edificio",
   "listings.cc&rDescription": "Los CC&R's explican las reglas de la asociación de propietarios de viviendas, y limitan la manera en que usted puede modificar la propiedad.",
   "listings.cc&r": "Convenios, Condiciones y Restricciones (CC&R's)",
+  "listings.chooseALanguage": "Elige un idioma",
   "listings.closedListings": "Listados cerrados",
   "listings.closed": "Cerrado",
   "listings.comingSoon": "Próximamente",
@@ -701,6 +702,7 @@
   "t.delete": "Borrar",
   "t.deposit": "Depósito",
   "t.description": "Ingrese descripción",
+  "t.download": "Descargar",
   "t.dragFilesHere": "Arrastre los archivos aquí",
   "t.dropFilesHere": "Suelta los archivos aquí...",
   "t.edit": "Editar",

shared-helpers/src/locales/general.json

@@ -641,6 +641,7 @@
   "listings.buildingSelectionCriteria": "Building Criteria Selection",
   "listings.cc&r": "Covenants, Conditions and Restrictions (CC&R's)",
   "listings.cc&rDescription": "The CC&R's explain the rules of the homeowners' association, and restrict how you can modify the property.",
+  "listings.chooseALanguage": "Choose a language",
   "listings.closed": "Closed",
   "listings.closedListings": "Closed Listings",
   "listings.comingSoon": "Coming Soon",
@@ -885,6 +886,7 @@
   "t.delete": "Delete",
   "t.deposit": "Deposit",
   "t.description": "Enter Description",
+  "t.download": "Download",
   "t.dragFilesHere": "Drag files here",
   "t.dropFilesHere": "Drop files here…",
   "t.edit": "Edit",

shared-helpers/src/locales/tl.json

@@ -432,6 +432,7 @@
   "listings.buildingSelectionCriteria": "Pagpili sa Criteria ng Gusali",
   "listings.cc&rDescription": "Ipinapaliwanag ng CC&R ang mga patakaran ng samahan ng mga may-ari ng bahay_ at pinaghihigpitan kung paano mo mababago ang ari-arian.",
   "listings.cc&r": "Mga Kasunduan_ Kundisyon at Pagbabawal o Covenants_ Conditions and Restrictions (CC&R's)",
+  "listings.chooseALanguage": "Pumili ng wika",
   "listings.closedListings": "Sarado nang mga Listahan",
   "listings.closed": "Sarado na",
   "listings.comingSoon": "Malapit Na",
@@ -571,6 +572,7 @@
   "t.delete": "Tanggalin",
   "t.deposit": "Deposito",
   "t.description": "Ilagay ang Deskripsyon",
+  "t.download": "I-download",
   "t.dragFilesHere": "Hilahin ang mga file dito",
   "t.dropFilesHere": "I-drop ang mga file dito…",
   "t.edit": "I-edit",

shared-helpers/src/locales/vi.json

@@ -474,6 +474,7 @@
   "listings.buildingSelectionCriteria": "Lựa chọn tiêu chí xây dựng",
   "listings.cc&rDescription": "CC&R's giải thích các quy tắc của hiệp hội chủ nhà và hạn chế cách quý vị có thể sửa chữa bất động sản.",
   "listings.cc&r": "Giao ước, Điều kiện và Hạn chế (CC&R's)",
+  "listings.chooseALanguage": "Chọn một ngôn ngữ",
   "listings.closedListings": "Các Danh sách nhà đã Đóng",
   "listings.closed": "Đã đóng",
   "listings.comingSoon": "Sắp có",
@@ -678,6 +679,7 @@
   "t.delete": "Xóa",
   "t.deposit": "Đặt cọc",
   "t.description": "Nhập mô tả",
+  "t.download": "Tải xuống",
   "t.dragFilesHere": "Kéo tệp vào đây",
   "t.dropFilesHere": "Thả tệp vào đây...",
   "t.edit": "Hiệu đính",

shared-helpers/src/locales/zh.json

@@ -479,6 +479,7 @@
   "listings.buildingSelectionCriteria": "建物標準選擇",
   "listings.cc&rDescription": "CC&R's 旨在說明業主協會的規則，以及您可如何改裝物業的限制。",
   "listings.cc&r": "契約、條件及限制 (Covenants, Conditions and Restrictions，簡稱 CC&R's)",
+  "listings.chooseALanguage": "选择语言",
   "listings.closedListings": "已截止申請的上市名單",
   "listings.closed": "已關閉",
   "listings.comingSoon": "即將上市！",
@@ -683,6 +684,7 @@
   "t.delete": "刪除",
   "t.deposit": "訂金",
   "t.description": "輸入說明",
+  "t.download": "下載",
   "t.dragFilesHere": "拖曳檔案到這裡",
   "t.dropFilesHere": "將檔案放置在這裡…",
   "t.edit": "編輯",

sites/public/__tests__/components/listing/GetApplication.test.tsx

@@ -26,6 +26,7 @@ describe("<Applications>", () => {
           zipCode: "90210",
         }}
         preview={false}
+        listingName={"Listing name"}
       />
     )
     expect(getByText("How to Apply")).toBeTruthy()
@@ -55,11 +56,12 @@ describe("<Applications>", () => {
           zipCode: "90210",
         }}
         preview={false}
+        listingName={"Listing name"}
       />
     )
     expect(queryByTestId("get-application-section")).toBeNull()
   })
-  it("disables buttons in preview state", () => {
+  it("disables apply online button in preview state", () => {
     const { getByText } = render(
       <GetApplication
         onlineApplicationURL={"online-app-url"}
@@ -80,10 +82,10 @@ describe("<Applications>", () => {
           zipCode: "90210",
         }}
         preview={true}
+        listingName={"Listing name"}
       />
     )
     expect(getByText("Apply Online").closest("button")?.disabled).toBe(true)
-    expect(getByText("Download Application").closest("button")?.disabled).toBe(true)
   })
   it("hides buttons if application is not open", () => {
     const { getByText, queryByText } = render(
@@ -106,6 +108,7 @@ describe("<Applications>", () => {
           zipCode: "90210",
         }}
         preview={false}
+        listingName={"Listing name"}
       />
     )
     expect(queryByText("Apply Online")).toBe(null)

sites/public/src/components/listing/GetApplication.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import Markdown from "markdown-to-jsx"
+import { useForm } from "react-hook-form"
 import {
   Button,
   LinkButton,
@@ -9,7 +10,12 @@ import {
   t,
   OrDivider,
   ContactAddress,
+  Modal,
+  AppearanceSizeType,
+  Form,
+  FieldGroup,
 } from "@bloom-housing/ui-components"
+import { downloadExternalPDF } from "../../lib/helpers"
 
 export interface PaperApplication {
   fileURL: string
@@ -25,6 +31,8 @@ export interface ApplicationsProps {
   applicationsOpen: boolean
   /** The date applications open */
   applicationsOpenDate?: string
+  /** The name of the listing */
+  listingName: string
   /** The URL for an online applications */
   onlineApplicationURL?: string
   /** Any number of paper application objects, including their URL and language */
@@ -51,8 +59,14 @@ const GetApplication = (props: ApplicationsProps) => {
   const showSection =
     props.onlineApplicationURL ||
     (props.applicationsOpen && props.paperMethod && !!props.paperApplications?.length)
-  const [showDownload, setShowDownload] = useState(false)
-  const toggleDownload = () => setShowDownload(!showDownload)
+  const [showDownloadModal, setShowDownloadModal] = useState(false)
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { register, watch } = useForm()
+  const paperApplicationURL: string = watch(
+    "paperApplicationLanguage",
+    props.paperApplications?.length ? props.paperApplications[0].fileURL : undefined
+  )
 
   if (!showSection) return null
 
@@ -96,29 +110,18 @@ const GetApplication = (props: ApplicationsProps) => {
             {props.strings?.getAPaperApplication ?? t("listings.apply.getAPaperApplication")}
           </div>
           <Button
-            styleType={
-              !props.preview && props.onlineApplicationURL ? AppearanceStyleType.primary : undefined
-            }
-            className="w-full mb-2"
-            onClick={toggleDownload}
-            disabled={props.preview}
+            onClick={async () => {
+              props.paperApplications.length === 1
+                ? await downloadExternalPDF(props.paperApplications[0].fileURL, props.listingName)
+                : setShowDownloadModal(true)
+            }}
+            className={"w-full mb-2"}
+            styleType={AppearanceStyleType.primary}
           >
             {props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
           </Button>
         </>
       )}
-      {showDownload &&
-        props.paperApplications?.map((paperApplication: PaperApplication, index: number) => (
-          <p key={index} className="text-center mt-2 mb-4 text-xs">
-            <a
-              href={paperApplication.fileURL}
-              title={props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
-              target="_blank"
-            >
-              {paperApplication.languageString}
-            </a>
-          </p>
-        ))}
       {props.applicationPickUpAddress && (
         <>
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
@@ -146,6 +149,53 @@ const GetApplication = (props: ApplicationsProps) => {
           )}
         </>
       )}
+      <Modal
+        open={!!showDownloadModal}
+        title={t("listings.chooseALanguage")}
+        ariaDescription={t("listings.chooseALanguage")}
+        onClose={() => setShowDownloadModal(false)}
+        actions={[
+          <Button
+            size={AppearanceSizeType.small}
+            onClick={async () => {
+              await downloadExternalPDF(paperApplicationURL, props.listingName)
+              setShowDownloadModal(false)
+            }}
+            styleType={AppearanceStyleType.primary}
+          >
+            {t("t.download")}
+          </Button>,
+          <Button
+            onClick={() => {
+              setShowDownloadModal(false)
+            }}
+            size={AppearanceSizeType.small}
+          >
+            {t("t.cancel")}
+          </Button>,
+        ]}
+      >
+        <Form>
+          <fieldset>
+            <legend className="sr-only">{t("listings.chooseALanguage")}</legend>
+            <FieldGroup
+              name="paperApplicationLanguage"
+              fieldGroupClassName="grid grid-cols-1"
+              fieldClassName="ml-0"
+              type="radio"
+              register={register}
+              validation={{ required: true }}
+              fields={props.paperApplications?.map((app, index) => ({
+                id: app.languageString,
+                label: app.languageString,
+                value: app.fileURL,
+                defaultChecked: index === 0,
+              }))}
+              dataTestId={"paper-application-language"}
+            />
+          </fieldset>
+        </Form>
+      </Modal>
     </section>
   )
 }

sites/public/src/components/listing/ListingView.tsx

@@ -360,6 +360,7 @@ export const ListingView = (props: ListingProps) => {
         applicationPickUpAddressOfficeHours={listing.applicationPickUpAddressOfficeHours}
         applicationPickUpAddress={getAddress(listing.applicationPickUpAddressType, "pickUp")}
         preview={props.preview}
+        listingName={listing.name}
       />
       {!(
         listing.status === ListingStatus.closed ||

sites/public/src/lib/helpers.tsx

@@ -210,3 +210,27 @@ export const untranslateMultiselectQuestion = (
     }
   })
 }
+
+export const downloadExternalPDF = async (fileURL: string, fileName: string) => {
+  try {
+    await fetch(fileURL, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/pdf",
+      },
+    })
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]))
+        const link = document.createElement("a")
+        link.href = url
+        link.setAttribute("download", `${fileName}.pdf`)
+
+        document.body.appendChild(link)
+        link.click()
+        link.parentNode.removeChild(link)
+      })
+  } catch (err) {
+    console.log(err)
+  }
+}