rewiringamerica · oyamauchi · Aug 4, 2023 · Aug 25, 2023 · Aug 25, 2023 · Aug 28, 2023
diff --git a/package.json b/package.json
@@ -49,7 +49,8 @@
       "source": [
         "src/calculator.ts",
         "src/rewiring-fonts.css",
-        "src/index.html"
+        "src/index.html",
+        "src/rhode-island.html"
       ],
       "outputFormat": "global",
       "context": "browser",

diff --git a/src/api/calculator-types-v1.ts b/src/api/calculator-types-v1.ts
@@ -0,0 +1,63 @@
+export type IncentiveType =
+  | 'tax_credit'
+  | 'pos_rebate'
+  | 'rebate'
+  | 'account_credit'
+  | 'performance_rebate';
+export type AuthorityType = 'federal' | 'state' | 'utility';
+
+export type AmountType = 'dollar_amount' | 'percent' | 'dollars_per_unit';
+export interface Amount {
+  type: AmountType;
+  number: number;
+  maximum?: number;
+  representative?: number;
+  unit?: string;
+}
+
+export type ItemType =
+  | 'battery_storage_installation'
+  | 'efficiency_rebates'
+  | 'electric_panel'
+  | 'electric_stove'
+  | 'electric_vehicle_charger'
+  | 'electric_wiring'
+  | 'geothermal_heating_installation'
+  | 'heat_pump_air_conditioner_heater'
+  | 'heat_pump_clothes_dryer'
+  | 'heat_pump_water_heater'
+  | 'new_electric_vehicle'
+  | 'rooftop_solar_installation'
+  | 'used_electric_vehicle'
+  | 'weatherization';
+
+export interface Item {
+  type: ItemType;
+  name: string;
+  url: string;
+}
+
+export interface Incentive {
+  type: IncentiveType;
+  authority_type: AuthorityType;
+  authority_name: string | null;
+  program: string;
+  program_url?: string;
+  item: Item;
+  amount: Amount;
+  start_date: number;
+  end_date: number;
+  short_description?: string;
+
+  eligible: boolean;
+}
+
+export interface APIResponse {
+  savings: {
+    tax_credit: number;
+    pos_rebate: number;
+    rebate: number;
+    account_credit: number;
+  };
+  incentives: Incentive[];
+}
diff --git a/src/calculator-form.ts b/src/calculator-form.ts
@@ -1,13 +1,14 @@
-import { html, css } from 'lit';
+import { html, css, nothing } from 'lit';
 import { downIcon, questionIcon } from './icons';
 import { select, selectStyles, OptionParam } from './select';
 import { inputStyles } from './styles/input';
 import './currency-input';
 import '@shoelace-style/shoelace/dist/themes/light.css';
 import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import { PROJECTS } from './projects';
 
 const buttonStyles = css`
-  button {
+  button.calculate {
     appearance: none;
     font-family: inherit;
     font-size: 16px;
@@ -24,7 +25,7 @@ const buttonStyles = css`
     width: 100%;
   }
 
-  button:hover {
+  button.calculate:hover {
     background-color: var(--ra-embed-primary-button-background-hover-color);
   }
 
@@ -74,110 +75,147 @@ const HOUSEHOLD_SIZE_OPTIONS: OptionParam[] = [1, 2, 3, 4, 5, 6, 7, 8].map(
 );
 
 export const formTemplate = (
-  [zip, ownerStatus, householdIncome, taxFiling, householdSize]: Array<string>,
+  [
+    project,
+    zip,
+    ownerStatus,
+    householdIncome,
+    taxFiling,
+    householdSize,
+  ]: Array<string>,
+  showProjectField: boolean,
   onSubmit: (e: SubmitEvent) => void,
-) => html`
-  <form @submit=${onSubmit}>
-    <div class="grid-3-2">
-      <div>
-        <label for="zip">
-          Zip
+  gridClass: string = 'grid-3-2',
+) => {
+  const projectField = showProjectField
+    ? html`<div>
+        <label for="project">
+          Project you're most interested in
           <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."
+            content="Select the project you're most interested in."
             hoist
             >${questionIcon(18, 18)}</sl-tooltip
           ><br />
           ${select({
-            id: 'household_size',
+            id: 'project',
             required: true,
-            options: HOUSEHOLD_SIZE_OPTIONS,
-            currentValue: householdSize,
+            options: Object.entries(PROJECTS)
+              .map(([value, data]) => ({ value, label: data.label }))
+              .sort((a, b) => a.label.localeCompare(b.label)),
+            currentValue: project,
             tabIndex: 0,
           })}
         </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>
-        <button type="submit">Calculate! ${downIcon(18, 18)}</button>
-      </div>
-    </div>
-  </form>
-`;
+    </form>
+  `;
+};
diff --git a/src/calculator.ts b/src/calculator.ts
@@ -150,12 +150,14 @@ export class RewiringAmericaCalculator extends LitElement {
             ? nothing
             : formTemplate(
                 [
+                  '',
                   this.zip,
                   this.ownerStatus,
                   this.householdIncome,
                   this.taxFiling,
                   this.householdSize,
                 ],
+                false,
                 (event: SubmitEvent) => this.submit(event),
               )}
         </div>