OptIn Ladder QA

4site-interactive-studios · Nov 18, 2024 · 410372b · 410372b
1 parent ca583db
commit 410372b
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 37 deletions.
diff --git a/dist/engrid.css b/dist/engrid.css
@@ -19,10 +19,10 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Wednesday, November 13, 2024 @ 22:22:11 ET
+ *  Date: Sunday, November 17, 2024 @ 21:43:18 ET
  *  By: fernando
- *  ENGrid styles: v0.19.16
- *  ENGrid scripts: v0.19.18
+ *  ENGrid styles: v0.19.20
+ *  ENGrid scripts: v0.19.21
  *
  *  Created by 4Site Studios
  *  Come work with us or join our team, we would love to hear from you
@@ -4420,12 +4420,10 @@ button.en__eventOccurrence__select>label{
 }
 @keyframes spin{
   0%{
-    tranform:rotate(0deg);
-    -webkit-transform:rotate(0deg);
+    transform:rotate(0deg);
   }
   to{
-    tranform:rotate(1turn);
-    -webkit-transform:rotate(1turn);
+    transform:rotate(1turn);
   }
 }
 [data-engrid-theme]{
@@ -8970,9 +8968,11 @@ body[data-engrid-debug]:before{
 [data-engrid-theme=engrid-ran3] iframe.thank-you-page-donation{
   left:calc(-1rem + -5px);
   margin:calc(1rem + 5px);
+  position:relative;
+}
+[data-engrid-theme=engrid-ran3] iframe.thank-you-page-donation.loaded{
   outline:5px dashed #395a4c;
   outline-offset:1rem;
-  position:relative;
 }
 [data-engrid-theme=engrid-ran3] .highlight-style2{
   background-color:#eff520;
@@ -8985,6 +8985,10 @@ body[data-engrid-debug]:before{
 [data-engrid-theme=engrid-ran3][data-engrid-embedded] .cky-consent-container,[data-engrid-theme=engrid-ran3][data-engrid-embedded] .cky-overlay{
   display:none !important;
 }
+[data-engrid-theme=engrid-ran3][data-engrid-embedded=thank-you-page-donation] form>.en__component--row.en__component--advrow{
+  margin:0 auto;
+  max-width:97vw;
+}
 [data-engrid-theme=engrid-ran3][data-engrid-embedded=thank-you-page-donation] .body-headerOutside,[data-engrid-theme=engrid-ran3][data-engrid-embedded=thank-you-page-donation] .content-footer{
   display:none !important;
 }

diff --git a/dist/engrid.js b/dist/engrid.js
@@ -17,10 +17,10 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Wednesday, November 13, 2024 @ 22:22:11 ET
+ *  Date: Sunday, November 17, 2024 @ 21:43:18 ET
  *  By: fernando
- *  ENGrid styles: v0.19.16
- *  ENGrid scripts: v0.19.18
+ *  ENGrid styles: v0.19.20
+ *  ENGrid scripts: v0.19.21
  *
  *  Created by 4Site Studios
  *  Come work with us or join our team, we would love to hear from you
@@ -12163,6 +12163,8 @@ class App extends engrid_ENGrid {
         new Advocacy();
         new InputPlaceholders();
         new InputHasValueAndFocus();
+        // Give By Select
+        new GiveBySelect();
         new ShowHideRadioCheckboxes("transaction.giveBySelect", "giveBySelect-");
         new ShowHideRadioCheckboxes("transaction.inmem", "inmem-");
         new ShowHideRadioCheckboxes("transaction.recurrpay", "recurrpay-");
@@ -12353,8 +12355,6 @@ class App extends engrid_ENGrid {
         // Plaid
         if (this.options.Plaid)
             new Plaid();
-        // Give By Select
-        new GiveBySelect();
         //Exit Intent Lightbox
         new ExitIntentLightbox();
         new UrlParamsToBodyAttrs();
@@ -13157,6 +13157,10 @@ class iFrame {
                     : 0;
                 this.logger.log(`iFrame Event 'scrollTo' - Position of top of first error ${scrollTo} px`); // check the message is being sent correctly
                 window.parent.postMessage({ scrollTo }, "*");
+                // Send the height of the iFrame
+                window.setTimeout(() => {
+                    this.sendIframeHeight();
+                }, 100);
             });
         }
         else {
@@ -13174,6 +13178,12 @@ class iFrame {
                 if (iframe) {
                     if (event.data.hasOwnProperty("frameHeight")) {
                         iframe.style.height = event.data.frameHeight + "px";
+                        if (event.data.frameHeight > 0) {
+                            iframe.classList.add("loaded");
+                        }
+                        else {
+                            iframe.classList.remove("loaded");
+                        }
                     }
                     // Old scroll event logic "scroll", scrolls to correct iframe?
                     else if (event.data.hasOwnProperty("scroll") &&
@@ -17257,7 +17267,8 @@ class UrlToForm {
         this.urlParams.forEach((value, key) => {
             const field = document.getElementsByName(key)[0];
             if (field) {
-                if (!["text", "textarea"].includes(field.type) || !field.value) {
+                if (!["text", "textarea", "email"].includes(field.type) ||
+                    !field.value) {
                     engrid_ENGrid.setFieldValue(key, value);
                     this.logger.log(`Set: ${key} to ${value}`);
                 }
@@ -18808,6 +18819,8 @@ class Autosubmit {
             !window.EngagingNetworks.require._defined.enjs.checkSubmissionFailed() &&
             engrid_ENGrid.getUrlParameter("autosubmit") === "Y") {
             this.logger.log("Autosubmitting Form");
+            // Fix EN ?chain parameter not working with email addresses with + in them
+            engrid_ENGrid.setFieldValue("supporter.emailAddress", engrid_ENGrid.getFieldValue("supporter.emailAddress").replace(/\s/g, "+"));
             this._form.submitForm();
         }
     }
@@ -21811,7 +21824,7 @@ class CheckboxLabel {
 }
 
 ;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/version.js
-const AppVersion = "0.19.18";
+const AppVersion = "0.19.21";
 
 ;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/index.js
  // Runs first so it can change the DOM markup before any markup dependent code fires
@@ -23078,6 +23091,16 @@ class OptInLadder {
     if (optInHeaders.length === 0 && optInFormBlocks.length === 0) {
       this.logger.log("No optin-ladder elements found");
       return;
+    } // Check if the e-mail field exist and is not empty
+
+
+    const emailField = engrid_ENGrid.getField("supporter.emailAddress");
+
+    if (!emailField || !emailField.value) {
+      this.logger.log("Email field is empty"); // Since this is a OptInLadder page with no e-mail address, hide the page
+
+      this.hidePage();
+      return;
     }
 
     const sessionStorageCheckboxValues = JSON.parse(sessionStorage.getItem("engrid.supporter.questions") || "{}");
@@ -23130,10 +23153,9 @@ class OptInLadder {
       this.logger.log("No optin-ladder elements found"); // Set the current step to the total steps to avoid redirecting to the first page
 
       currentStep = totalSteps;
-      this.saveStepToSessionStorage(currentStep, totalSteps); // Submit the form
-
-      this._form.submitForm();
+      this.saveStepToSessionStorage(currentStep, totalSteps); // hide the page
 
+      this.hidePage();
       return;
     } // Show the current header and form block, while removing the rest
 
@@ -23233,6 +23255,14 @@ class OptInLadder {
     return engrid_ENGrid.getBodyData("embedded") === "thank-you-page-donation";
   }
 
+  hidePage() {
+    const engridPage = document.querySelector("#engrid");
+
+    if (engridPage) {
+      engridPage.classList.add("hide");
+    }
+  }
+
 }
 ;// CONCATENATED MODULE: ./src/index.ts
  // Uses ENGrid via NPM

diff --git a/dist/engrid.min.css b/dist/engrid.min.css
diff --git a/dist/engrid.min.js b/dist/engrid.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/sass/themes/ran3.scss b/src/sass/themes/ran3.scss
@@ -1602,11 +1602,13 @@
 
   /* Styles the iFrame of the embedded donation page that is displayed on the thank you page */
   iframe.thank-you-page-donation {
-    outline: 5px dashed #395a4c;
     margin: calc(1rem + 5px);
-    outline-offset: 1rem;
     position: relative;
     left: calc(((1rem + 5px) * -1));
+    &.loaded {
+      outline: 5px dashed #395a4c;
+      outline-offset: 1rem;
+    }
   }
 
   .highlight-style2 {
@@ -1626,6 +1628,10 @@
 
   /* This are temporary stylings that will be moved into the theme once complete */
   &[data-engrid-embedded="thank-you-page-donation"] {
+    form > .en__component--row.en__component--advrow {
+      max-width: 97vw;
+      margin: 0 auto;
+    }
     /* Hide the header and footer */
     .body-headerOutside,
     .content-footer {

diff --git a/src/scripts/optin-ladder.ts b/src/scripts/optin-ladder.ts
@@ -59,6 +59,16 @@ export class OptInLadder {
       this.logger.log("No optin-ladder elements found");
       return;
     }
+    // Check if the e-mail field exist and is not empty
+    const emailField = ENGrid.getField(
+      "supporter.emailAddress"
+    ) as HTMLInputElement;
+    if (!emailField || !emailField.value) {
+      this.logger.log("Email field is empty");
+      // Since this is a OptInLadder page with no e-mail address, hide the page
+      this.hidePage();
+      return;
+    }
     const sessionStorageCheckboxValues = JSON.parse(
       sessionStorage.getItem("engrid.supporter.questions") || "{}"
     );
@@ -109,8 +119,8 @@ export class OptInLadder {
       // Set the current step to the total steps to avoid redirecting to the first page
       currentStep = totalSteps;
       this.saveStepToSessionStorage(currentStep, totalSteps);
-      // Submit the form
-      this._form.submitForm();
+      // hide the page
+      this.hidePage();
       return;
     }
     // Show the current header and form block, while removing the rest
@@ -220,4 +230,10 @@ export class OptInLadder {
   private isEmbeddedThankYouPage() {
     return ENGrid.getBodyData("embedded") === "thank-you-page-donation";
   }
+  private hidePage() {
+    const engridPage = document.querySelector("#engrid") as HTMLElement;
+    if (engridPage) {
+      engridPage.classList.add("hide");
+    }
+  }
 }