merge in main and rebuild

dist/engrid.css

@@ -19,10 +19,10 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Tuesday, April 2, 2024 @ 13:14:06 ET
+ *  Date: Wednesday, April 3, 2024 @ 07:51:18 ET
  *  By: michael
- *  ENGrid styles: v0.17.19
- *  ENGrid scripts: v0.17.20
+ *  ENGrid styles: v0.18.1
+ *  ENGrid scripts: v0.18.4
  *
  *  Created by 4Site Studios
  *  Come work with us or join our team, we would love to hear from you

src/index.ts

@@ -18,6 +18,7 @@ import { customScript } from "./scripts/main";
 
 const options: Options = {
   applePay: false,
+  AutoYear: true,
   CapitalizeFields: true,
   ClickToExpand: true,
   CurrencySymbol: "$",
@@ -116,7 +117,7 @@ const options: Options = {
   },
   onLoad: () => {
     (<any>window).DonationLightboxForm = DonationLightboxForm;
-    new DonationLightboxForm(DonationAmount, DonationFrequency);
+    new DonationLightboxForm(App, DonationAmount, DonationFrequency);
     customScript(App, EnForm);
   },
   onResize: () => console.log("Starter Theme Window Resized"),

src/scripts/donation-lightbox-form.js

@@ -5,7 +5,7 @@ if (isSafari) {
 import smoothscroll from "smoothscroll-polyfill";
 smoothscroll.polyfill();
 export default class DonationLightboxForm {
-  constructor(DonationAmount, DonationFrequency) {
+  constructor(App, DonationAmount, DonationFrequency) {
     if (!this.isIframe()) return;
     this.amount = DonationAmount;
     this.frequency = DonationFrequency;
@@ -97,10 +97,8 @@ export default class DonationLightboxForm {
           // Front-End Validation Passed, get first Error Message
           const error = document.querySelector("li.en__error");
           if (error) {
-            // Check if error contains "problem processing" to send a smaller message
-            if (
-              error.innerHTML.toLowerCase().indexOf("problem processing") > -1
-            ) {
+            // Check if error contains "processing" to send a smaller message
+            if (error.innerHTML.toLowerCase().indexOf("processing") > -1) {
               this.sendMessage(
                 "error",
                 "Sorry! There's a problem processing your donation."
@@ -114,7 +112,8 @@ export default class DonationLightboxForm {
             // Check if error contains "payment" or "account" and scroll to the right section
             if (
               error.innerHTML.toLowerCase().indexOf("payment") > -1 ||
-              error.innerHTML.toLowerCase().indexOf("account") > -1
+              error.innerHTML.toLowerCase().indexOf("account") > -1 ||
+              error.innerHTML.toLowerCase().indexOf("card") > -1
             ) {
               this.scrollToElement(
                 document.querySelector(".en__field--ccnumber")
@@ -182,6 +181,37 @@ export default class DonationLightboxForm {
         this.canadaOnly();
       });
     }
+    App.watchForError(() => {
+      this.sendMessage("status", "loaded");
+      if (this.validateForm(false, false)) {
+        // Front-End Validation Passed, get first Error Message
+        const error = document.querySelector("li.en__error");
+        if (error) {
+          // Check if error contains "processing" to send a smaller message
+          if (error.innerHTML.toLowerCase().indexOf("processing") > -1) {
+            this.sendMessage(
+              "error",
+              "Sorry! There's a problem processing your donation."
+            );
+            this.scrollToElement(
+              document.querySelector(".en__field--ccnumber")
+            );
+          } else {
+            this.sendMessage("error", error.textContent);
+          }
+          // Check if error contains "payment" or "account" and scroll to the right section
+          if (
+            error.innerHTML.toLowerCase().indexOf("payment") > -1 ||
+            error.innerHTML.toLowerCase().indexOf("account") > -1 ||
+            error.innerHTML.toLowerCase().indexOf("card") > -1
+          ) {
+            this.scrollToElement(
+              document.querySelector(".en__field--ccnumber")
+            );
+          }
+        }
+      }
+    });
   }
   // Send iframe message to parent
   sendMessage(key, value) {