Default to state/local calculator (#154)

## Description This makes the default embed.rewiringamerica.org homepage be the new "state" calculator, to guide new developers toward the latest and greatest. Steps taken: - make index.html be ira-calculator.html - make state-calculator.html be index.html - redirect state-calculator.html to index.html These are separate commits to hopefully make the diffs clearer. ## Test Plan - [x] ensure the test build homepage is the state calculator - [x] ensure that visiting /state-calculator.html redirects to the homepage - [x] ensure that ira-calculator.html still works for now - [x] ensure that calculator.js is still built and is not different from main - [x] ensure that state-calculator.js is still built and is not different from main
rewiringamerica · Apr 4, 2024 · 0d67e71 · 0d67e71
1 parent 9c41646
commit 0d67e71
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 147 deletions.
diff --git a/cypress/e2e/calculator.cy.ts b/cypress/e2e/calculator.cy.ts
@@ -1,6 +1,6 @@
 describe('rewiring-america-calculator', () => {
   it('passes', () => {
-    cy.visit('http://localhost:1234');
+    cy.visit('http://localhost:1234/ira-calculator.html');
     cy.get('rewiring-america-calculator').should('exist');
     // FIXME: is there a way to do this less repetitively?
     // Doing const shadow = cy.get(...).shadow() didn't seem to work.

diff --git a/cypress/e2e/state-calculator-events.cy.ts b/cypress/e2e/state-calculator-events.cy.ts
@@ -4,7 +4,7 @@
 describe('rewiring-america-state-calculator events', () => {
   beforeEach(() => {
     cy.clearAllLocalStorage();
-    cy.visit('http://localhost:1234/state-calculator.html');
+    cy.visit('http://localhost:1234');
   });
 
   it('dispatches the calculator-submitted event', () => {

diff --git a/cypress/e2e/state-calculator.cy.ts b/cypress/e2e/state-calculator.cy.ts
@@ -3,7 +3,7 @@
 
 describe('rewiring-america-state-calculator', () => {
   beforeEach(function () {
-    cy.visit('http://localhost:1234/state-calculator.html');
+    cy.visit('http://localhost:1234');
 
     // Inject the axe-core library
     cy.injectAxe();

diff --git a/package.json b/package.json
@@ -79,8 +79,8 @@
         "src/calculator.tsx",
         "src/state-calculator.tsx",
         "src/rewiring-fonts.css",
-        "src/index.html",
-        "src/state-calculator.html"
+        "src/ira-calculator.html",
+        "src/index.html"
       ],
       "outputFormat": "global",
       "context": "browser",

diff --git a/src/index.html b/src/index.html
@@ -8,15 +8,15 @@
       content="Demo Rewiring America calculator widget."
     />
     <meta name="robots" content="noindex" />
-    <title>Rewiring America Calculator Widget</title>
-    <script type="module" src="./calculator.tsx"></script>
+    <title>Rewiring America Incentives Calculator Demo</title>
+    <script type="module" src="./state-calculator.tsx"></script>
     <link rel="stylesheet" type="text/css" href="./rewiring-fonts.css" />
     <style>
       html,
       body {
         margin: 0;
         padding: 0;
-        background: white;
+        background: #fffae7;
         color: #222;
         box-sizing: border-box;
       }
@@ -33,67 +33,66 @@
         font-weight: 400;
         margin: 32px auto;
         max-width: 1024px;
-        padding: 32px;
+        padding: 24px;
       }
 
-      h1,
-      h2,
-      h3,
-      p {
-        padding: 0;
-      }
+      .checkbox-and-label {
+        display: flex;
+        align-items: baseline;
+        column-gap: 8px;
 
-      /* Extra small devices */
-      @media only screen and (max-width: 600px) {
-        main {
-          padding: 0;
-        }
+        margin-bottom: 16px;
+      }
 
-        h1,
-        h2,
-        h3,
-        p {
-          padding: 32px;
-        }
+      .separator {
+        background-color: #e2e2e2;
+        height: 1px;
+        margin-bottom: 16px;
       }
     </style>
   </head>
 
   <body>
     <main>
-      <h1>Rewiring America Embeddable IRA Calculator</h1>
+      <h1>Rewiring America Incentives Calculator Demo</h1>
       <p>
-        This page is a demonstration of our embeddable calculator, intended for
-        website owners to add to their own page to help their visitors
-        understand the electrification incentives offered as part of the
-        Inflation Reduction Act (IRA). If you’re looking to evaluate the impact
-        of IRA electrification incentives for your own home, please use
-        <a href="https://www.rewiringamerica.org/app/ira-calculator"
-          >our official IRA Calculator</a
+        This page is a demonstration of our embeddable calculator, which
+        estimates the electrification incentives that a user is eligible for.
+        Website owners can add it to their own pages to help inform their
+        visitors. If you’re looking to evaluate the impact of electrification
+        incentives for your own home, please use
+        <a href="https://homes.rewiringamerica.org/calculator"
+          >our official calculator</a
         >.
       </p>
       <p>
-        <a href="https://www.rewiringamerica.org/api"
-          >Register for an API key</a
-        >
-        •
-        <a href="https://api.rewiringamerica.org/docs"
-          >View full documentation</a
-        >
-        •
-        <a href="https://rewiring-america-calculator-widget.glitch.me"
-          >View examples</a
-        >
+        This uses the
+        <a href="https://www.rewiringamerica.org/api">Rewiring America API</a>.
+        It includes incentives from the Inflation Reduction Act, as well as
+        those from a limited set of states and utilities. We are actively
+        working on adding coverage of more states, utilities, and localities
+        nationwide.
       </p>
-      <h2>Example</h2>
-      <rewiring-america-calculator
+      <div class="checkbox-and-label">
+        <input
+          type="checkbox"
+          id="includeBeta"
+          onChange="this.checked ? document.getElementById('calculator').setAttribute('include-beta-states', '') : document.getElementById('calculator').removeAttribute('include-beta-states')"
+        />
+        <label for="includeBeta">
+          Include incentives from states that are not yet ready for full launch.
+          This information may not be accurate.
+        </label>
+      </div>
+      <div class="separator"></div>
+      <rewiring-america-state-calculator
+        id="calculator"
         api-key="{{ apiKey }}"
-        zip="80212"
         household-income="80000"
         household-size="1"
         tax-filing="single"
         owner-status="homeowner"
-      ></rewiring-america-calculator>
+      ></rewiring-america-state-calculator>
     </main>
   </body>
 </html>
diff --git a/src/ira-calculator.html b/src/ira-calculator.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Demo Rewiring America calculator widget."
+    />
+    <meta name="robots" content="noindex" />
+    <title>Rewiring America Calculator Widget</title>
+    <script type="module" src="./calculator.tsx"></script>
+    <link rel="stylesheet" type="text/css" href="./rewiring-fonts.css" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: white;
+        color: #222;
+        box-sizing: border-box;
+      }
+
+      main {
+        font-smoothing: antialiased;
+        -webkit-font-smoothing: antialiased;
+        font-family: 'GT America', system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+          'Segoe UI Symbol', 'Noto Color Emoji';
+        font-size: 16px;
+        line-height: 28px;
+        font-weight: 400;
+        margin: 32px auto;
+        max-width: 1024px;
+        padding: 32px;
+      }
+
+      h1,
+      h2,
+      h3,
+      p {
+        padding: 0;
+      }
+
+      /* Extra small devices */
+      @media only screen and (max-width: 600px) {
+        main {
+          padding: 0;
+        }
+
+        h1,
+        h2,
+        h3,
+        p {
+          padding: 32px;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <main>
+      <h1>Rewiring America Embeddable IRA Calculator</h1>
+      <p>
+        This page is a demonstration of our embeddable calculator, intended for
+        website owners to add to their own page to help their visitors
+        understand the electrification incentives offered as part of the
+        Inflation Reduction Act (IRA). If you’re looking to evaluate the impact
+        of IRA electrification incentives for your own home, please use
+        <a href="https://www.rewiringamerica.org/app/ira-calculator"
+          >our official IRA Calculator</a
+        >.
+      </p>
+      <p>
+        <a href="https://www.rewiringamerica.org/api"
+          >Register for an API key</a
+        >
+        •
+        <a href="https://api.rewiringamerica.org/docs"
+          >View full documentation</a
+        >
+        •
+        <a href="https://rewiring-america-calculator-widget.glitch.me"
+          >View examples</a
+        >
+      </p>
+      <h2>Example</h2>
+      <rewiring-america-calculator
+        api-key="{{ apiKey }}"
+        zip="80212"
+        household-income="80000"
+        household-size="1"
+        tax-filing="single"
+        owner-status="homeowner"
+      ></rewiring-america-calculator>
+    </main>
+  </body>
+</html>
diff --git a/src/state-calculator.html b/src/state-calculator.html
diff --git a/vercel.json b/vercel.json
@@ -0,0 +1,9 @@
+{
+  "redirects": [
+    {
+      "source": "/state-calculator.html",
+      "destination": "/",
+      "permanent": true
+    }
+  ]
+}