From f09e9df16f4b87ec7c18bc3bf7f2afcc683e2dbb Mon Sep 17 00:00:00 2001
From: Owen Yamauchi <owen@rewiringamerica.org>
Date: Tue, 8 Aug 2023 17:58:54 -0400
Subject: [PATCH] Incentive-type chips instead of separate sections

---
 src/state-incentive-details.ts | 50 +++++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
index ec23a80..0d03e76 100644
--- a/src/state-incentive-details.ts
+++ b/src/state-incentive-details.ts
@@ -18,6 +18,18 @@ export const stateIncentivesStyles = css`
     border: 1px solid rgb(240, 240, 240);
   }
 
+  .incentive__type-chip {
+    margin-bottom: 1em;
+  }
+
+  .incentive__type-chip span {
+    background-color: rgb(240, 237, 247);
+    border-radius: 3px;
+    font-weight: bold;
+    font-size: 0.8em;
+    padding: 0.3em 1em 0.3em 1em;
+  }
+
   .incentive__title {
     font-weight: bold;
   }
@@ -56,8 +68,22 @@ const amountTemplate = (amount: Amount) =>
       : `$${amount.number.toLocaleString()} per ${amount.unit}`
     : nothing;
 
+const formatIncentiveType = (incentive: Incentive) =>
+  incentive.type === 'tax_credit'
+    ? 'TAX CREDIT'
+    : incentive.amount.type === 'dollar_amount'
+    ? 'FLAT-RATE REBATE'
+    : incentive.amount.type === 'percent'
+    ? 'COST REBATE'
+    : incentive.amount.type === 'dollars_per_unit'
+    ? 'CAPACITY REBATE'
+    : 'REBATE';
+
 const incentiveBoxTemplate = (incentive: Incentive) => html`
   <div class="incentive ${incentive.eligible ? '' : 'incentive--dimmed'}">
+    <div class="incentive__type-chip">
+      <span> ${formatIncentiveType(incentive)}</span>
+    </div>
     <div class="incentive__title">
       ${incentive.authority_name
         ? html`${incentive.authority_name}<br />`
@@ -81,19 +107,11 @@ const gridTemplate = (incentives: Incentive[]) => html` <div class="grid-3-2">
 </div>`;
 
 export const stateIncentivesTemplate = (response: APIResponse) =>
-  html` ${response.pos_rebate_incentives.length > 0
-    ? html` <div class="card">
-        <h1 class="card__heading">Rebates</h1>
-        <div class="card-content">
-          ${gridTemplate(response.pos_rebate_incentives)}
-        </div>
-      </div>`
-    : nothing}
-  ${response.tax_credit_incentives.length > 0
-    ? html` <div class="card">
-        <h1 class="card__heading">Tax Credits</h1>
-        <div class="card-content">
-          ${gridTemplate(response.tax_credit_incentives)}
-        </div>
-      </div>`
-    : nothing}`;
+  html` <div class="card">
+    <div class="card-content">
+      ${gridTemplate([
+        ...response.pos_rebate_incentives,
+        ...response.tax_credit_incentives,
+      ])}
+    </div>
+  </div>`;