From 3fb0ab56d7a04c11bba1d2f1c0148e289c49c74d Mon Sep 17 00:00:00 2001
From: Randi Mays <19175324+randimays@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:32:04 -0600
Subject: [PATCH] VACMS-19516 Add container and toggle for Email Signup React
 widget (#2342)

* VACMS-19516 Add container and toggle for Email Signup React widget

* Adjust to not include the veteran banner in the toggle

* Removing test code

* Remove line break
---
 src/site/assets/sass/style.scss               |   7 ++
 src/site/filters/liquid.js                    |   4 +
 .../email-update-signup.drupal.liquid         | 112 +++++++++---------
 3 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss
index 97093a4668..fe5771a825 100644
--- a/src/site/assets/sass/style.scss
+++ b/src/site/assets/sass/style.scss
@@ -80,6 +80,13 @@
   }
 }
 
+.homepage-email-update-wrapper {
+  .veteran-banner-container {
+    max-width: 80rem;
+    margin: 0 auto;
+  }
+}
+
 // START: Styles for mobile app promo banner
 #alert-with-additional-info {
 
diff --git a/src/site/filters/liquid.js b/src/site/filters/liquid.js
index 205a3ed647..c4c5771a32 100644
--- a/src/site/filters/liquid.js
+++ b/src/site/filters/liquid.js
@@ -2241,4 +2241,8 @@ module.exports = function registerFilters() {
     }
     return null;
   };
+
+  liquid.filters.showExistingEmailForm = () => {
+    return cmsFeatureFlags.FEATURE_EMAIL_UPDATE_WIDGET;
+  };
 };
diff --git a/src/site/includes/email-update-signup.drupal.liquid b/src/site/includes/email-update-signup.drupal.liquid
index ed308d0b75..2c31ec7d9f 100644
--- a/src/site/includes/email-update-signup.drupal.liquid
+++ b/src/site/includes/email-update-signup.drupal.liquid
@@ -1,59 +1,61 @@
-<div class="homepage-email-update-wrapper vads-u-background-color--primary-alt-lightest">
-  <div class="vads-u-padding-x--2p5 vads-u-padding-top--2p5">
-    <div class="vads-u-display--flex vads-u-justify-content--center">
-      <div>
-        <div class="vads-u-margin-top--2p5 medium-screen:vads-u-margin-top--0">
-          <form
-            action="https://public.govdelivery.com/accounts/USVACHOOSE/subscribers/qualify"
-            accept-charset="UTF-8"
-            method="post"
-          >
-            <input type="hidden" name="utf8" value="✓">
-            <input type="hidden" name="category_id" id="category_id_top" value="USVACHOOSE_C1">
-            <input type="hidden" name="email" id="homepage-hidden-email" value="">
-            <va-text-input
-              autocomplete="email"
-              class="vads-u-width--full medium-screen:vads-u-width-auto homepage-email-input"
-              form-heading="Sign up to get the latest VA updates"
-              form-heading-level="2"
-              id="homepage-email-signup-input"
-              inputmode="email"
-              label="Email Address"
-              type="email"
-              use-forms-pattern="single"
-            /></va-text-input>
-            <button
-              onclick="recordMultipleEvents([
-                { 
-                  event: 'cta-button-click', 'button-type': 'primary', 'button-click-label': 'Sign up',  
-                },
-                { event: 'homepage-email-sign-up', action: 'Homepage email sign up' }
-                ]);"
-              type="submit"
-              class="vads-u-width--full
-                    medium-screen:vads-u-width--auto
-                    vads-u-display--block vads-u-margin-bottom--2">
-              Sign up
-            </button>
-          </form>
-        </div>
-      </div>
+<div class="homepage-email-update-wrapper vads-u-background-color--primary-alt-lightest vads-u-padding-x--2p5 vads-u-padding-top--2p5">
+  <div class="vads-u-display--flex vads-u-justify-content--center">
+    <div class="vads-u-margin-top--2p5 medium-screen:vads-u-margin-top--0">
+      {% assign shouldShowExistingEmailForm = '' | showExistingEmailForm %}
+
+      {% if shouldShowExistingEmailForm %}
+        <form
+          action="https://public.govdelivery.com/accounts/USVACHOOSE/subscribers/qualify"
+          accept-charset="UTF-8"
+          method="post"
+        >
+          <input type="hidden" name="utf8" value="✓">
+          <input type="hidden" name="category_id" id="category_id_top" value="USVACHOOSE_C1">
+          <input type="hidden" name="email" id="homepage-hidden-email" value="">
+          <va-text-input
+            autocomplete="email"
+            class="vads-u-width--full medium-screen:vads-u-width-auto homepage-email-input"
+            form-heading="Sign up to get the latest VA updates"
+            form-heading-level="2"
+            id="homepage-email-signup-input"
+            inputmode="email"
+            label="Email Address"
+            type="email"
+            use-forms-pattern="single"
+          /></va-text-input>
+          <button
+            onclick="recordMultipleEvents([
+              { 
+                event: 'cta-button-click', 'button-type': 'primary', 'button-click-label': 'Sign up',  
+              },
+              { event: 'homepage-email-sign-up', action: 'Homepage email sign up' }
+              ]);"
+            type="submit"
+            class="vads-u-width--full
+                  medium-screen:vads-u-width--auto
+                  vads-u-display--block vads-u-margin-bottom--2">
+            Sign up
+          </button>
+        </form>
+      {% else %}
+        <div data-widget-type="homepage-email-signup"></div>
+      {% endif %}
     </div>
-    <div id="vets-banner-1" class="vads-u-display--none medium-screen:vads-u-display--block">
-      <div class="veteran-banner-container vads-u-margin-y--0 vads-u-margin-x--auto">
-        <picture>
-          <source
-            srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-1.png 640w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-2.png 920w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-3.png 1316w"
-            media="(max-width: 767px)">
-          <source
-            srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-1.png 1008w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-2.png 1887w"
-            media="(max-width: 1008px)">
-          <img class="vads-u-width--full"
-            src="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png"
-            srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png 1280w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-2.png 2494w"
-            loading="lazy" alt="Veteran portraits">
-        </picture>
-      </div>
+  </div>
+  <div id="vets-banner-1" class="vads-u-display--none medium-screen:vads-u-display--block">
+    <div class="veteran-banner-container vads-u-margin-y--0 vads-u-margin-x--auto">
+      <picture>
+        <source
+          srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-1.png 640w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-2.png 920w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-3.png 1316w"
+          media="(max-width: 767px)">
+        <source
+          srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-1.png 1008w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-2.png 1887w"
+          media="(max-width: 1008px)">
+        <img class="vads-u-width--full"
+          src="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png"
+          srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png 1280w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-2.png 2494w"
+          loading="lazy" alt="Veteran portraits">
+      </picture>
     </div>
   </div>
 </div>