"Coming soon" card

## Description In states where we don't have SLU coverage, show this card at the bottom of the results to let people know there may be more incentives available that we haven't returned. ### Next steps Wait for Spanish translation of copy. (Request is already submitted.) ## Test Plan Search for zip 57104 (SD), select a project, and see the card at the bottom of the results. This is encoded in a new Cypress test.
rewiringamerica · Jul 25, 2024 · 9a68608 · 9a68608
1 parent 44af40f
commit 9a68608
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/cypress/e2e/state-calculator.cy.ts b/cypress/e2e/state-calculator.cy.ts
@@ -109,4 +109,27 @@ describe('rewiring-america-state-calculator', () => {
       .find('#error-msg')
       .should('contain.text', 'That ZIP code is not in Rhode Island.');
   });
+
+  it('shows "coming soon" banner', () => {
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .find('#zip')
+      .type('57104'); // South Dakota
+
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .find('button#calculate')
+      .click();
+
+    // Don't show it until a project is selected and results are displayed
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .should('not.contain.text', 'More money coming soon!');
+
+    cy.selectProjects(['hvac']);
+
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .should('contain.text', 'More money coming soon!');
+  });
 });
diff --git a/src/state-incentive-details.tsx b/src/state-incentive-details.tsx
@@ -103,6 +103,24 @@ const getStartYearIfInFuture = (incentive: Incentive) =>
     ? getYear(incentive.start_date)
     : null;
 
+const ComingSoonCard = () => {
+  const { msg } = useTranslated();
+  return (
+    <Card theme="yellow" padding="medium">
+      <h3 className="text-color-text-primary text-center text-xl font-medium leading-tight">
+        {msg('More money coming soon!')}
+      </h3>
+      <p className="text-color-text-primary text-center text-base leading-normal">
+        {msg(
+          `You can take advantage of federal incentives now, but your state, \
+city, and utility may also provide incentives for this project. We’re working \
+hard to identify each one!`,
+        )}
+      </p>
+    </Card>
+  );
+};
+
 const renderSelectProjectCard = () => {
   const { msg } = useTranslated();
   return (
@@ -126,6 +144,7 @@ const renderSelectProjectCard = () => {
 const renderCardCollection = (
   incentives: Incentive[],
   iraRebates: IRARebate[],
+  showComingSoon: boolean,
 ) => {
   const { msg } = useTranslated();
   return (
@@ -197,6 +216,7 @@ const renderCardCollection = (
             />
           )),
         )}
+      {showComingSoon && <ComingSoonCard />}
     </div>
   );
 };
@@ -205,14 +225,23 @@ type IncentiveGridProps = {
   heading: string;
   incentives: Incentive[];
   iraRebates: IRARebate[];
+  hasStateCoverage: boolean;
   tabs: { project: Project; count: number }[];
   selectedTab: Project | null;
   onTabSelected: (newSelection: Project) => void;
 };
 
 const IncentiveGrid = forwardRef<HTMLDivElement, IncentiveGridProps>(
   (
-    { heading, incentives, iraRebates, tabs, selectedTab, onTabSelected },
+    {
+      heading,
+      incentives,
+      iraRebates,
+      hasStateCoverage,
+      tabs,
+      selectedTab,
+      onTabSelected,
+    },
     ref,
   ) => {
     const { msg } = useTranslated();
@@ -242,7 +271,7 @@ const IncentiveGrid = forwardRef<HTMLDivElement, IncentiveGridProps>(
           />
         </div>
         {selectedTab !== null
-          ? renderCardCollection(incentives, iraRebates)
+          ? renderCardCollection(incentives, iraRebates, !hasStateCoverage)
           : renderSelectProjectCard()}
       </>
     );
@@ -343,6 +372,7 @@ ${countOfProjects} projects.`,
         )}
         incentives={selectedIncentives}
         iraRebates={selectedIraRebates}
+        hasStateCoverage={response.coverage.state !== null}
         tabs={projectOptions}
         selectedTab={projectTab}
         onTabSelected={tab => {

diff --git a/translations/es.xlf b/translations/es.xlf
@@ -781,6 +781,12 @@
   <source>To view your eligible savings programs, select a project above.</source>
   <target>Para ver los programas de ahorro en los que puede participar, seleccione un proyecto más arriba.</target>
 </trans-unit>
+<trans-unit id="s084d252e989bd0d1">
+  <source>More money coming soon!</source>
+</trans-unit>
+<trans-unit id="s60361aefb7d94a79">
+  <source>You can take advantage of federal incentives now, but your state, city, and utility may also provide incentives for this project. We’re working hard to identify each one!</source>
+</trans-unit>
 </body>
 </file>
 </xliff>