From 8475d50f97340d641fe69ba04f308413d5e0db27 Mon Sep 17 00:00:00 2001
From: Tom Carden <tomc@rewiringamerica.org>
Date: Wed, 24 Jul 2024 16:35:15 -0600
Subject: [PATCH] add a slot to customize email helper text (#179)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Allow overriding the helper text on the email field using a slot, if
needed. This allows partners using advanced functionality
(`show-email="true"` and event handlers to facilitate signing up users
to their own email list) to customize the email label so it explains
what's going on. This could be used in conjunction with customizing the
footer as well to further clarify which terms and privacy policy apply.

This is a prototype - seeking feedback to see if this makes sense to
others, pending legal input on the approach as well.

## Test Plan

I'm running `yarn cypress:open` and inspecting that the calculator looks
reasonable when the last of the new email tests runs. The preview build
for this PR should be unchanged from production.

This is a screenshot from the Cypress test:
![Screenshot 2024-07-19 at 5 35
03 PM](https://github.com/user-attachments/assets/741178b9-1ba4-4d36-bd85-0f3f9939b6d7)
---
 cypress/e2e/state-calculator-email.cy.ts | 47 ++++++++++++++++++++++++
 src/state-calculator-form.tsx            | 26 +++++++------
 2 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 cypress/e2e/state-calculator-email.cy.ts

diff --git a/cypress/e2e/state-calculator-email.cy.ts b/cypress/e2e/state-calculator-email.cy.ts
new file mode 100644
index 0000000..c118200
--- /dev/null
+++ b/cypress/e2e/state-calculator-email.cy.ts
@@ -0,0 +1,47 @@
+/// <reference types="cypress" />
+/// <reference types="cypress-axe" />
+
+describe('rewiring-america-state-calculator email field', () => {
+  beforeEach(function () {
+    cy.visit('http://localhost:1234');
+  });
+
+  it('does not show the email field by default', () => {
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .find('#email')
+      .should('not.exist');
+  });
+
+  it('shows the email field if requested', () => {
+    cy.get('rewiring-america-state-calculator').invoke(
+      'attr',
+      'show-email',
+      'true',
+    );
+
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .find('#email')
+      .should('exist');
+  });
+
+  it('allows overriding the email field helper if a slot is provided', () => {
+    cy.get('rewiring-america-state-calculator').invoke(
+      'attr',
+      'show-email',
+      'true',
+    );
+
+    cy.get('rewiring-america-state-calculator').then($el => {
+      $el.append(
+        '<span id="test-email-helper" slot="email-helper">Get updates from Rewiring America and our partners.</span>',
+      );
+    });
+
+    cy.get('rewiring-america-state-calculator')
+      .find('#test-email-helper')
+      .should('contain', 'Get updates from Rewiring America and our partners.')
+      .should('be.visible');
+  });
+});
diff --git a/src/state-calculator-form.tsx b/src/state-calculator-form.tsx
index 47b5790..7dbdd76 100644
--- a/src/state-calculator-form.tsx
+++ b/src/state-calculator-form.tsx
@@ -109,18 +109,20 @@ const renderEmailField = (
       required={emailRequired}
     />
     <div className="mt-1 mx-3 text-color-text-secondary text-xsm leading-normal">
-      {msg(
-        'Get updates on incentives, rebates, and more from Rewiring America.',
-      )}{' '}
-      {msg('View our')}{' '}
-      <a
-        className="text-color-action-primary font-medium"
-        href="https://rewiringamerica.org/terms-of-use"
-        target="_blank"
-      >
-        {msg('terms')}
-      </a>
-      .
+      <slot name="email-helper">
+        {msg(
+          'Get updates on incentives, rebates, and more from Rewiring America.',
+        )}{' '}
+        {msg('View our')}{' '}
+        <a
+          className="text-color-action-primary font-medium"
+          href="https://rewiringamerica.org/terms-of-use"
+          target="_blank"
+        >
+          {msg('terms')}
+        </a>
+        .
+      </slot>
     </div>
   </div>
 );