diff --git a/src/components/DPASurvey.js b/src/components/DPASurvey.js index dd82186..ff7286f 100644 --- a/src/components/DPASurvey.js +++ b/src/components/DPASurvey.js @@ -1,292 +1,340 @@ -import bootstrap from "!!raw-loader!bootstrap/dist/css/bootstrap.min.css"; -import styles from "!!raw-loader!./DPASurvey.css"; -export default class DPASurvey extends HTMLElement { - static get observedAttributes() { - return ["data-step"]; - } - - constructor() { - // Always call super first in constructor - super(); - - // Create a shadow root - const shadow = this.attachShadow({ mode: "open" }); - - // Adding styles - const bStyles = document.createElement("style"); - bStyles.textContent = bootstrap; - const rcStyles = document.createElement("style"); - rcStyles.textContent = styles; - shadow.appendChild(bStyles); - shadow.appendChild(rcStyles); - - // Create result section - this.appContent = document.createElement("div"); - this.appContent.id = "app-content"; - this.appContent.className = "col-xs-12 col-sm-12 col-md-8 m-auto"; - let row = document.createElement("div"); - row.className = "row"; - row.appendChild(this.appContent); - shadow.appendChild(row); - - // Track answers - this.answers = []; - } - - attributeChangedCallback(name, oldValue, newValue) { - this.loadSteps(newValue); - } - - loadSteps(step) { - let rc = this; - let qBtns = null; - let shadow = this.shadowRoot; - switch (step) { - case "0": - this.appContent.innerHTML = ` -
-

Welcome to the elegibility checker for the Detroit Down Payment Assistance Program

-

You will need to answer a few questions before you can apply for the program.

-
-
-
- -
-
- `; - shadow.querySelector("cod-button").addEventListener("click", (e) => { - this.setAttribute("data-step", "1"); - }); - break; - - case "1": - this.appContent.innerHTML = ` -
-

Have you lived in the City of Detroit for the last 12 months or lost a home to property tax foreclosure in the City of Detroit between 2010-2016?

-
-
-
- - -
-
- `; - qBtns = shadow.querySelectorAll("cod-button"); - qBtns.forEach((btn) => { - btn.addEventListener("click", (e) => { - if (e.target.getAttribute("data-label") != null) { - if (e.target.getAttribute("data-label") == "Yes") { - rc.answers.push("pass"); - rc.setAttribute("data-step", "3"); - } else { - rc.setAttribute("data-step", "2"); - } - } - }); - }); - break; - - case "2": - this.appContent.innerHTML = ` -
-

Unfortunately, you may not qualify for the Detroit Downpayment Assistance program because you do not meet the residency requirements.

-

In order to receive this assistance, you must have lived in the City of Detroit for the last 12 months or lost property to tax foreclosure in the City of Detroit between 2010 – 2016.

-

If your circumstances change you may qualify in the future.

-
- `; - qBtns = shadow.querySelectorAll("cod-button"); - qBtns.forEach((btn) => { - btn.addEventListener("click", (e) => { - if (e.target.getAttribute("data-label") == "Next") { - rc.setAttribute("data-step", "4"); - } - }); - }); - break; - - case "3": - this.appContent.innerHTML = ` -
-

Do you make equal to or less than the income for your household size according to this chart?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PeopleIncome
1$43,740
2$59,160
3$74,580
4$90,000
5$105,420
6$120,840
7$136,260
8$151,680
-
-
-
- - -
-
- `; - qBtns = shadow.querySelectorAll("cod-button"); - qBtns.forEach((btn) => { - btn.addEventListener("click", (e) => { - if (e.target.getAttribute("data-label") != null) { - if (e.target.getAttribute("data-label") == "Yes") { - rc.answers.push("pass"); - rc.setAttribute("data-step", "5"); - } else { - rc.setAttribute("data-step", "4"); - } - } - }); - }); - break; - - case "4": - this.appContent.innerHTML = ` -
-

Unfortunately, you may not qualify for the Detroit Downpayment Assistance program because you do not meet income requirements.

-

In order to receive this assistance, you must fall within the income guidelines.

-

If your circumstances change you may qualify in the future.

-
- `; - break; - - case "5": - this.appContent.innerHTML = ` -
-

Are you pre-approved by a lender to purchase the property?

-
-
-
- - -
-
- `; - qBtns = shadow.querySelectorAll("cod-button"); - qBtns.forEach((btn) => { - btn.addEventListener("click", (e) => { - if (e.target.getAttribute("data-label") != null) { - if (e.target.getAttribute("data-label") == "Yes") { - rc.answers.push("pass"); - rc.setAttribute("data-step", "7"); - } else { - rc.setAttribute("data-step", "6"); - } - } - }); - }); - break; - - case "6": - this.appContent.innerHTML = ` -
-

Unfortunately, you have not completed all the requirements to apply.

-

Please visit our "Am I Ready? page to complete all the pre-requisites.

-
- `; - break; - - case "7": - this.appContent.innerHTML = ` -
-

Have you attended a homebuyer education course and received a certificate of completion?

-
-
-
- - -
-
- `; - qBtns = shadow.querySelectorAll("cod-button"); - qBtns.forEach((btn) => { - btn.addEventListener("click", (e) => { - if (e.target.getAttribute("data-label") != null) { - if (e.target.getAttribute("data-label") == "Yes") { - rc.answers.push("pass"); - rc.setAttribute("data-step", "8"); - } else { - rc.setAttribute("data-step", "6"); - } - } - }); - }); - break; - - case "8": - this.appContent.innerHTML = ` -
-

Have you identified the property you want to receive down payment assistance to purchase?

-
-
-
- - -
-
- `; - qBtns = shadow.querySelectorAll("cod-button"); - qBtns.forEach((btn) => { - btn.addEventListener("click", (e) => { - if (e.target.getAttribute("data-label") != null) { - if (e.target.getAttribute("data-label") == "Yes") { - rc.answers.push("pass"); - rc.setAttribute("data-step", "9"); - } else { - rc.setAttribute("data-step", "6"); - } - } - }); - }); - break; - - case "9": - this.appContent.innerHTML = ` -
-

You are ready to go!

-

Please use the link provided to fill out the application form.

-

Note: All incomplete applications would not be process.

-
-
-
- -
-
- `; - break; - } - } -} +import bootstrap from "!!raw-loader!bootstrap/dist/css/bootstrap.min.css"; +import styles from "!!raw-loader!./DPASurvey.css"; +export default class DPASurvey extends HTMLElement { + static get observedAttributes() { + return ["data-step"]; + } + + constructor() { + // Always call super first in constructor + super(); + + // Create a shadow root + const shadow = this.attachShadow({ mode: "open" }); + + // Adding styles + const bStyles = document.createElement("style"); + bStyles.textContent = bootstrap; + const rcStyles = document.createElement("style"); + rcStyles.textContent = styles; + shadow.appendChild(bStyles); + shadow.appendChild(rcStyles); + + // Create result section + this.appContent = document.createElement("div"); + this.appContent.id = "app-content"; + this.appContent.className = "col-xs-12 col-sm-12 col-md-8 m-auto"; + let row = document.createElement("div"); + row.className = "row"; + row.appendChild(this.appContent); + shadow.appendChild(row); + + // Track answers + this.answers = []; + } + + attributeChangedCallback(name, oldValue, newValue) { + this.loadSteps(newValue); + } + + loadSteps(step) { + let rc = this; + let qBtns = null; + let shadow = this.shadowRoot; + switch (step) { + case "0": + this.appContent.innerHTML = ` +
+

Welcome to the elegibility checker for the Detroit Down Payment Assistance Program

+

You will need to answer a few questions before you can apply for the program.

+
+
+
+ +
+
+ `; + shadow.querySelector("cod-button").addEventListener("click", (e) => { + this.setAttribute("data-step", "1"); + }); + break; + + case "1": + this.appContent.innerHTML = ` +
+

Have you lived in the City of Detroit for the last 12 months or lost a home to property tax foreclosure in the City of Detroit between 2010-2016?

+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + rc.answers.push("pass"); + rc.setAttribute("data-step", "3"); + } else { + rc.setAttribute("data-step", "2"); + } + } + }); + }); + break; + + case "2": + this.appContent.innerHTML = ` +
+

Unfortunately, you may not qualify for the Detroit Downpayment Assistance program because you do not meet the residency requirements.

+

In order to receive this assistance, you must have residency verification documents showing you lived in the City of Detroit for the last 12 months or lost property to tax foreclosure in the City of Detroit between 2010 – 2016.

+

If your circumstances change you may qualify in the future.

+
+ `; + break; + + case "3": + this.appContent.innerHTML = ` +
+

Can you produce residency verification documents such as an ID issued at least 12-months prior at a Detroit address, signed lease agreement, 12 months of bill statements with a strong preference for utility bills, etc?

+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + rc.answers.push("pass"); + rc.setAttribute("data-step", "4"); + } else { + rc.setAttribute("data-step", "2"); + } + } + }); + }); + break; + + case "4": + this.appContent.innerHTML = ` +
+

Do you make equal to or less than the income for your household size according to this chart?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PeopleIncome
1$43,740
2$59,160
3$74,580
4$90,000
5$105,420
6$120,840
7$136,260
8$151,680
+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + rc.answers.push("pass"); + rc.setAttribute("data-step", "6"); + } else { + rc.setAttribute("data-step", "5"); + } + } + }); + }); + break; + + case "5": + this.appContent.innerHTML = ` +
+

Unfortunately, you may not qualify for the Detroit Downpayment Assistance program because you do not meet income requirements.

+

In order to receive this assistance, you must fall within the income guidelines.

+

If your circumstances change you may qualify in the future.

+
+ `; + break; + + case "6": + this.appContent.innerHTML = ` +
+

Are you pre-approved by a lender to purchase the property?

+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + // TODO: Ask for lenders name as text input. + rc.answers.push("pass"); + rc.setAttribute("data-step", "8"); + } else { + rc.setAttribute("data-step", "7"); + } + } + }); + }); + break; + + case "7": + this.appContent.innerHTML = ` +
+

Unfortunately, you have not completed all the requirements to apply.

+

Please visit our "Am I Ready? page to complete all the pre-requisites.

+
+ `; + break; + + case "8": + this.appContent.innerHTML = ` +
+

Have you attended a homebuyer education course and received a certificate of completion?

+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + // TODO: Ask for agency name in dropdown list. + rc.answers.push("pass"); + rc.setAttribute("data-step", "9"); + } else { + rc.setAttribute("data-step", "7"); + } + } + }); + }); + break; + + case "9": + this.appContent.innerHTML = ` +
+

Have you identified the property you want to receive down payment assistance to purchase?

+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + rc.answers.push("pass"); + rc.setAttribute("data-step", "10"); + } else { + rc.setAttribute("data-step", "7"); + } + } + }); + }); + break; + + case "10": + this.appContent.innerHTML = ` +
+

Do you have a purchase agreement?

+
+
+
+ + +
+
+ `; + qBtns = shadow.querySelectorAll("cod-button"); + qBtns.forEach((btn) => { + btn.addEventListener("click", (e) => { + if (e.target.getAttribute("data-label") != null) { + if (e.target.getAttribute("data-label") == "Yes") { + rc.answers.push("pass"); + rc.setAttribute("data-step", "11"); + } else { + rc.setAttribute("data-step", "7"); + } + } + }); + }); + break; + + case "11": + this.appContent.innerHTML = ` +
+

You are ready to go!

+

Please use the link provided to fill out the application form.

+

Note: All incomplete applications would not be process.

+
+
+
+ +
+
+ `; + break; + } + } +}