From 2bb9b8ead958dc4674f7646ac4668d2a4067dfc5 Mon Sep 17 00:00:00 2001 From: ayangster Date: Tue, 19 Sep 2023 11:27:27 -0700 Subject: [PATCH] Update incentive functionality to expect multiple selected projects --- src/calculator-form.ts | 237 +++++++++++++++++---------------- src/calculator.ts | 9 +- src/state-calculator.ts | 19 ++- src/state-incentive-details.ts | 18 +-- 4 files changed, 144 insertions(+), 139 deletions(-) diff --git a/src/calculator-form.ts b/src/calculator-form.ts index 7a034e1..c074310 100644 --- a/src/calculator-form.ts +++ b/src/calculator-form.ts @@ -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'; @@ -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' }, @@ -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, projects: Array, + showProjectField: boolean, onSubmit: (e: SubmitEvent) => void, gridClass: string = 'grid-3-2', -) => html` -
-
-
-
- -`; + + `; +}; diff --git a/src/calculator.ts b/src/calculator.ts index 1bebb5a..2c62ed1 100644 --- a/src/calculator.ts +++ b/src/calculator.ts @@ -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'; @@ -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) || ''; @@ -101,7 +97,6 @@ export class RewiringAmericaCalculator extends LitElement { return !( this.zip && this.ownerStatus && - this.projects && this.taxFiling && this.householdIncome && this.householdSize @@ -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), )}
diff --git a/src/state-calculator.ts b/src/state-calculator.ts index df23cc7..b13b1f7 100644 --- a/src/state-calculator.ts +++ b/src/state-calculator.ts @@ -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(); @@ -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 @@ -137,7 +140,7 @@ export class RewiringAmericaStateCalculator extends LitElement { this.taxFiling && this.householdIncome && this.householdSize && - this.selectedProject + this.projects ); } @@ -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', @@ -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, })} diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts index 31d11ef..a332b4f 100644 --- a/src/state-incentive-details.ts +++ b/src/state-incentive-details.ts @@ -370,7 +370,7 @@ const gridTemplate = ( selectedTab: Project, onTabSelected: (newSelection: Project) => void, ) => - incentives.length > 0 + tabs.length > 0 && incentives.length > 0 ? html`

${heading}

@@ -393,9 +393,11 @@ const gridTemplate = ( */ export const stateIncentivesTemplate = ( response: APIResponse, - selectedProject: Project, + selectedProjects: Project[], + selectedProjectTab: Project, selectedOtherTab: Project, onTabSelected: (newSelection: Project) => void, + onOtherTabSelected: (newOtherSelection: Project) => void, ) => { const allEligible = response.incentives.filter(i => i.eligible); @@ -412,7 +414,7 @@ export const stateIncentivesTemplate = ( ) .filter( ([project, incentives]) => - project !== selectedProject && incentives.length > 0, + !selectedProjects.includes(project) && incentives.length > 0, ) .sort(([a], [b]) => shortLabel(a).localeCompare(shortLabel(b))) .map(([project]) => project); @@ -420,10 +422,10 @@ export const stateIncentivesTemplate = ( return html` ${atAGlanceTemplate(response)} ${gridTemplate( "Incentives you're interested in", - incentivesByProject[selectedProject] ?? [], - [selectedProject], - selectedProject, - () => {}, + incentivesByProject[selectedProjectTab] ?? [], + selectedProjects, + selectedProjects.includes(selectedProjectTab) ? selectedProjectTab : selectedProjects[0], + onTabSelected, )} ${gridTemplate( 'Other incentives available to you', @@ -431,6 +433,6 @@ export const stateIncentivesTemplate = ( otherTabs, // If a nonexistent tab is selected, pretend the first one is selected. otherTabs.includes(selectedOtherTab) ? selectedOtherTab : otherTabs[0], - onTabSelected, + onOtherTabSelected, )}`; };