Skip to content

Commit

Permalink
Update incentive functionality to expect multiple selected projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayangster
ayangster committed Sep 19, 2023
1 parent 7c160df commit 2bb9b8e
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 139 deletions.
237 changes: 120 additions & 117 deletions src/calculator-form.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { html, css } from 'lit';
import { html, css, nothing } from 'lit';
import { downIcon, questionIcon } from './icons';
import { select, multiselect, selectStyles, OptionParam } from './select';
import { inputStyles } from './styles/input';
Expand Down Expand Up @@ -58,11 +58,6 @@ const OWNER_STATUS_OPTIONS: OptionParam[] = [
{ value: 'renter', label: 'Renter' },
];

const PROJECT_OPTIONS: OptionParam[] = [
{ value: 'heating', label: 'Heating' },
{ value: 'electrical', label: 'Electrical wiring' },
];

const TAX_FILING_OPTIONS: OptionParam[] = [
{ value: 'single', label: 'Single' },
{ value: 'joint', label: 'Married Filing Jointly' },
Expand All @@ -82,16 +77,16 @@ const HOUSEHOLD_SIZE_OPTIONS: OptionParam[] = [1, 2, 3, 4, 5, 6, 7, 8].map(
export const formTemplate = (
[zip, ownerStatus, householdIncome, taxFiling, householdSize]: Array<string>,
projects: Array<string>,
showProjectField: boolean,
onSubmit: (e: SubmitEvent) => void,
gridClass: string = 'grid-3-2',
) => html`
<form @submit=${onSubmit}>
<div class="${gridClass}">
<div>
<label for="project">
Project you're most interested in
) => {
const projectField = showProjectField
? html`<div>
<label for="projects">
Projects you're most interested in
<sl-tooltip
content="Select the project you're most interested in."
content="Select the projects you're most interested in."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
Expand All @@ -104,108 +99,116 @@ export const formTemplate = (
maxOptionsVisible: 1,
})}
</label>
</div> `
: nothing;

return html`
<form @submit=${onSubmit}>
<div class="${gridClass}">
${projectField}
<div>
<label for="zip">
Zip
<sl-tooltip
content="Your zip code helps determine the amount of discounts and tax credits you qualify for."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
<input
tabindex="0"
id="zip"
placeholder="12345"
name="zip"
required
type="text"
value="${zip}"
minlength="5"
maxlength="5"
inputmode="numeric"
pattern="[0-9]{5}"
/>
</label>
</div>
<div>
<label for="owner_status">
Homeowners Status
<sl-tooltip
content="Homeowners and renters qualify for different incentives."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
${select({
id: 'owner_status',
required: true,
options: OWNER_STATUS_OPTIONS,
currentValue: ownerStatus,
tabIndex: 0,
})}
</label>
</div>
<div>
<label for="household_income">
Household Income
<sl-tooltip
content="Enter your gross income (income before taxes). Include wages and salary plus other forms of income, including pensions, interest, dividends, and rental income. If you are married and file jointly, include your spouse's income"
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
<ra-currency-input
id="household_income"
placeholder="$60,000"
name="household_income"
required
value=${householdIncome}
min="0"
max="100000000"
></ra-currency-input>
</label>
</div>
<div>
<label for="tax_filing">
Tax Filing
<sl-tooltip hoist
><div slot="content">
Select "Head of Household" if you have a child or relative
living with you, and you pay more than half the costs of your
home. Select "Joint" if you file your taxes as a married
couple."
</div>
${questionIcon(18, 18)}</sl-tooltip
><br />
${select({
id: 'tax_filing',
required: true,
options: TAX_FILING_OPTIONS,
currentValue: taxFiling,
tabIndex: 0,
})}
</label>
</div>
<div>
<label for="household_size">
Household Size
<sl-tooltip
content="Include anyone you live with who you claim as a dependent on your taxes, and your spouse or partner if you file taxes together."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
${select({
id: 'household_size',
required: true,
options: HOUSEHOLD_SIZE_OPTIONS,
currentValue: householdSize,
tabIndex: 0,
})}
</label>
</div>
<div>
<button class="calculate" type="submit">
Calculate! ${downIcon(18, 18)}
</button>
</div>
</div>
<div>
<label for="zip">
Zip
<sl-tooltip
content="Your zip code helps determine the amount of discounts and tax credits you qualify for."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
<input
tabindex="0"
id="zip"
placeholder="12345"
name="zip"
required
type="text"
value="${zip}"
minlength="5"
maxlength="5"
inputmode="numeric"
pattern="[0-9]{5}"
/>
</label>
</div>
<div>
<label for="owner_status">
Homeowners Status
<sl-tooltip
content="Homeowners and renters qualify for different incentives."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
${select({
id: 'owner_status',
required: true,
options: OWNER_STATUS_OPTIONS,
currentValue: ownerStatus,
tabIndex: 0,
})}
</label>
</div>
<div>
<label for="household_income">
Household Income
<sl-tooltip
content="Enter your gross income (income before taxes). Include wages and salary plus other forms of income, including pensions, interest, dividends, and rental income. If you are married and file jointly, include your spouse's income"
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
<ra-currency-input
id="household_income"
placeholder="$60,000"
name="household_income"
required
value=${householdIncome}
min="0"
max="100000000"
></ra-currency-input>
</label>
</div>
<div>
<label for="tax_filing">
Tax Filing
<sl-tooltip hoist
><div slot="content">
Select "Head of Household" if you have a child or relative living
with you, and you pay more than half the costs of your home.
Select "Joint" if you file your taxes as a married couple."
</div>
${questionIcon(18, 18)}</sl-tooltip
><br />
${select({
id: 'tax_filing',
required: true,
options: TAX_FILING_OPTIONS,
currentValue: taxFiling,
tabIndex: 0,
})}
</label>
</div>
<div>
<label for="household_size">
Household Size
<sl-tooltip
content="Include anyone you live with who you claim as a dependent on your taxes, and your spouse or partner if you file taxes together."
hoist
>${questionIcon(18, 18)}</sl-tooltip
><br />
${select({
id: 'household_size',
required: true,
options: HOUSEHOLD_SIZE_OPTIONS,
currentValue: householdSize,
tabIndex: 0,
})}
</label>
</div>
<div>
<button class="calculate" type="submit">
Calculate! ${downIcon(18, 18)}
</button>
</div>
</div>
</form>
`;
</form>
`;
};
9 changes: 2 additions & 7 deletions src/calculator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,6 @@ export class RewiringAmericaCalculator extends LitElement {
@property({ type: String, attribute: 'owner-status' })
ownerStatus: OwnerStatus = 'homeowner';

@property({ type: Array, attribute: 'projects' })
projects: string[] = ['heating'];

@property({ type: String, attribute: 'household-income' })
householdIncome: string = '0';

Expand All @@ -91,7 +88,6 @@ export class RewiringAmericaCalculator extends LitElement {
const formData = new FormData(e.target as HTMLFormElement);
this.zip = (formData.get('zip') as string) || '';
this.ownerStatus = (formData.get('owner_status') as OwnerStatus) || '';
this.projects = (formData.get('projects') as string) || '';
this.householdIncome = (formData.get('household_income') as string) || '';
this.taxFiling = (formData.get('tax_filing') as FilingStatus) || '';
this.householdSize = (formData.get('household_size') as string) || '';
Expand All @@ -101,7 +97,6 @@ export class RewiringAmericaCalculator extends LitElement {
return !(
this.zip &&
this.ownerStatus &&
this.projects &&
this.taxFiling &&
this.householdIncome &&
this.householdSize
Expand Down Expand Up @@ -155,14 +150,14 @@ export class RewiringAmericaCalculator extends LitElement {
? nothing
: formTemplate(
[
'',
this.zip,
this.ownerStatus,
this.householdIncome,
this.taxFiling,
this.householdSize,
],
this.projects,
[],
false,
(event: SubmitEvent) => this.submit(event),
)}
</div>
Expand Down
19 changes: 12 additions & 7 deletions src/state-calculator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,14 @@ export class RewiringAmericaStateCalculator extends LitElement {
@property({ type: String })
utility: string = '';

@property({ type: Array })
projects: Project[] = ['battery'];

@property({ type: String })
selectedProject: Project = 'hvac';
selectedProjectTab: Project = 'battery';

@property({ type: String })
selectedOtherTab: Project = 'heat_pump_clothes_dryer';
selectedOtherTab: Project = 'battery';

submit(e: SubmitEvent) {
e.preventDefault();
Expand All @@ -114,7 +117,7 @@ export class RewiringAmericaStateCalculator extends LitElement {
this.householdIncome = (formData.get('household_income') as string) || '';
this.taxFiling = (formData.get('tax_filing') as FilingStatus) || '';
this.householdSize = (formData.get('household_size') as string) || '';
this.selectedProject = (formData.get('project') as Project) || '';
this.projects = (formData.getAll('projects') as Project[]) || '';

// Zip is the only thing that determines what utilities are available, so
// only fetch utilities if zip has changed since last calculation, or if
Expand All @@ -137,7 +140,7 @@ export class RewiringAmericaStateCalculator extends LitElement {
this.taxFiling &&
this.householdIncome &&
this.householdSize &&
this.selectedProject
this.projects
);
}

Expand Down Expand Up @@ -206,13 +209,13 @@ export class RewiringAmericaStateCalculator extends LitElement {
? nothing
: formTemplate(
[
this.selectedProject,
this.zip,
this.ownerStatus,
this.householdIncome,
this.taxFiling,
this.householdSize,
],
this.projects,
true,
(event: SubmitEvent) => this.submit(event),
'grid-3-2-1',
Expand Down Expand Up @@ -243,9 +246,11 @@ export class RewiringAmericaStateCalculator extends LitElement {
? nothing
: stateIncentivesTemplate(
results,
this.selectedProject,
this.projects,
this.selectedProjectTab,
this.selectedOtherTab,
newSelection => (this.selectedOtherTab = newSelection),
newSelection => (this.selectedProjectTab = newSelection),
newOtherSelection => (this.selectedOtherTab = newOtherSelection),
),
error: errorTemplate,
})}
Expand Down
Loading

0 comments on commit 2bb9b8e

Please sign in to comment.