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
department-of-veterans-affairs · Nov 5, 2024 · 3fb0ab5 · 3fb0ab5
1 parent 75b5d7f
commit 3fb0ab5
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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>