Add utility selector

src/calculator-form.ts

@@ -73,8 +73,41 @@ const HOUSEHOLD_SIZE_OPTIONS: OptionParam[] = [1, 2, 3, 4, 5, 6, 7, 8].map(
   },
 );
 
+export const utilityFormTemplate = (
+  utilityId: string,
+  utilityOptions: OptionParam[],
+  onChange: (utilityId: string) => void,
+) => {
+  return html`
+    <form>
+      <div>
+        <label for="utility">
+          Electric Utility
+          <sl-tooltip
+            content="Choose the company you pay your electric bill to."
+            hoist
+          >
+            ${questionIcon(18, 18)}
+          </sl-tooltip>
+          <br />
+          ${select({
+            id: 'utility',
+            required: true,
+            options: utilityOptions,
+            currentValue: utilityId,
+            tabIndex: 0,
+            onChange: event =>
+              onChange((event.target as HTMLInputElement).value),
+          })}
+        </label>
+      </div>
+    </form>
+  `;
+};
+
 export const formTemplate = (
   [zip, ownerStatus, householdIncome, taxFiling, householdSize]: Array<string>,
+  onZipChange: (e: InputEvent) => void,
   onSubmit: (e: SubmitEvent) => void,
 ) => html`
   <form @submit=${onSubmit}>
@@ -99,6 +132,7 @@ export const formTemplate = (
             maxlength="5"
             inputmode="numeric"
             pattern="[0-9]{5}"
+            @change=${onZipChange}
           />
         </label>
       </div>

src/calculator.ts

@@ -156,6 +156,7 @@ export class RewiringAmericaCalculator extends LitElement {
                   this.taxFiling,
                   this.householdSize,
                 ],
+                () => {}, // do nothing on zip change
                 (event: SubmitEvent) => this.submit(event),
               )}
         </div>

src/rhode-island.html

@@ -64,7 +64,8 @@
       <h1>Rewiring America Incentives Calculator</h1>
       <h2>Rhode Island</h2>
       <rewiring-america-state-calculator
-        api-key="{{ apiKey }}"
+        api-host="https://api-main-4ba10f3.d2.zuplo.dev"
+        api-key="zpka_4df73ab685fd49acb621101c39927bac_146bd4cc"
         state="RI"
         zip="02807"
         household-income="80000"

src/select.ts

@@ -12,6 +12,7 @@ export interface SelectParam {
   options: OptionParam[];
   currentValue: string;
   tabIndex?: number;
+  onChange?: (event: InputEvent) => void;
 }
 
 export const option = ({ label, value }: OptionParam, selected: boolean) =>
@@ -23,6 +24,7 @@ export const select = ({
   options,
   currentValue,
   tabIndex,
+  onChange,
 }: SelectParam) => {
   return html`
     <div class="select">
@@ -31,6 +33,7 @@ export const select = ({
         name="${id}"
         ?required=${required}
         tabindex="${ifDefined(tabIndex)}"
+        @change=${onChange}
       >
         ${options.map(o => option(o, o.value === currentValue))}
       </select>

src/state-calculator.ts

@@ -2,7 +2,11 @@ import { LitElement, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Task, initialState } from '@lit-labs/task';
 import { baseStyles, gridStyles } from './styles';
-import { formTemplate, formStyles } from './calculator-form';
+import {
+  formTemplate,
+  formStyles,
+  utilityFormTemplate,
+} from './calculator-form';
 import { FilingStatus, OwnerStatus } from './calculator-types';
 import { CALCULATOR_FOOTER } from './calculator-footer';
 import { fetchApi } from './api/fetch';
@@ -11,6 +15,7 @@ import {
   stateIncentivesStyles,
   cardStyles,
 } from './state-incentive-details';
+import { OptionParam } from './select';
 
 const loadingTemplate = () => html`
   <div class="card card-content">Loading...</div>
@@ -80,6 +85,9 @@ export class RewiringAmericaStateCalculator extends LitElement {
   @property({ type: String, attribute: 'household-size' })
   householdSize: string = '1';
 
+  @property({ type: String })
+  utility: string = '';
+
   submit(e: SubmitEvent) {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
@@ -109,6 +117,7 @@ export class RewiringAmericaStateCalculator extends LitElement {
       household_income,
       tax_filing,
       household_size,
+      utility,
     ]) => {
       if (this.hideResult) {
         // this is a special response type provided by Task to keep it in the INITIAL state
@@ -123,6 +132,10 @@ export class RewiringAmericaStateCalculator extends LitElement {
       });
       query.append('authority_types', 'federal');
       query.append('authority_types', 'state');
+      if (utility) {
+        query.append('authority_types', 'utility');
+        query.set('utility', utility);
+      }
 
       return await fetchApi(
         this.apiKey,
@@ -138,9 +151,38 @@ export class RewiringAmericaStateCalculator extends LitElement {
       this.householdIncome,
       this.taxFiling,
       this.householdSize,
+      this.utility,
     ],
   });
 
+  private _utilityOptionsTask = new Task<string[], OptionParam[]>(this, {
+    task: async ([zip]) => {
+      const query = new URLSearchParams({
+        'location[zip]': zip,
+      });
+      const url = `${this.apiHost}/api/v1/utilities?${query}`;
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.apiKey}`,
+        },
+      });
+
+      const utilityMap = await response.json();
+      return Object.keys(utilityMap).map(id => ({
+        value: id,
+        label: utilityMap[id].name,
+      }));
+    },
+    onComplete: utilities => {
+      // Automatically select the first utility in the list
+      if (utilities.length > 0) {
+        this.utility = utilities[0].value;
+      }
+    },
+    args: () => [this.zip],
+  });
+
   override render() {
     return html`
       <div class="calculator">
@@ -156,9 +198,25 @@ export class RewiringAmericaStateCalculator extends LitElement {
                   this.taxFiling,
                   this.householdSize,
                 ],
+                (event: InputEvent) => {
+                  this.zip = (event.target as HTMLInputElement).value;
+                  this.utility = '';
+                },
                 (event: SubmitEvent) => this.submit(event),
               )}
         </div>
+        <div class="card card-content">
+          ${utilityFormTemplate(
+            this.utility,
+            this._utilityOptionsTask.render({
+              initial: () => [],
+              pending: () => [],
+              complete: utils => utils,
+              error: () => [],
+            }) as OptionParam[],
+            newUtility => (this.utility = newUtility),
+          )}
+        </div>
         ${this.hideResult
           ? nothing
           : html`