{new-amount} monthly gift", + noLabel: "No, thanks. Continue with my
{old-amount} one-time gift", + otherAmount: true, + otherLabel: "Or enter a different monthly amount:", + upsellOriginalGiftAmountFieldName: "", + amountRange: [ + { max: 10, suggestion: 5 }, + { max: 15, suggestion: 7 }, + { max: 20, suggestion: 8 }, + { max: 25, suggestion: 9 }, + { max: 30, suggestion: 10 }, + { max: 35, suggestion: 11 }, + { max: 40, suggestion: 12 }, + { max: 50, suggestion: 14 }, + { max: 100, suggestion: 15 }, + { max: 200, suggestion: 19 }, + { max: 300, suggestion: 29 }, + { max: 500, suggestion: "Math.ceil((amount / 12)/5)*5" }, + ], + minAmount: 0, + canClose: true, + submitOnClose: false, + oneTime: true, + annual: false, + disablePaymentMethods: [], + skipUpsell: false, + conversionField: "", + upsellCheckbox: false, +}; + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/interfaces/translate-options.js +const ptbrTranslation = [ + { field: "supporter.firstName", translation: "Nome" }, + { field: "supporter.lastName", translation: "Sobrenome" }, + { field: "supporter.phoneNumber", translation: "Celular" }, + { field: "supporter.address1", translation: "EndereΓ§o" }, + { field: "supporter.address2", translation: "Complemento" }, + { field: "supporter.postcode", translation: "CEP" }, + { field: "supporter.city", translation: "Cidade" }, + { field: "supporter.region", translation: "Estado" }, + { field: "supporter.country", translation: "PaΓs" }, +]; +const deTranslation = [ + { field: "supporter.address1", translation: "StraΓe, Hausnummer" }, + { field: "supporter.postcode", translation: "Postleitzahl" }, + { field: "supporter.city", translation: "Ort" }, + { field: "supporter.region", translation: "Bundesland" }, + { field: "supporter.country", translation: "Land" }, +]; +const frTranslation = [ + { field: "supporter.address1", translation: "Adresse" }, + { field: "supporter.postcode", translation: "Code Postal" }, + { field: "supporter.city", translation: "Ville" }, + { field: "supporter.region", translation: "RΓ©gion" }, + { field: "supporter.country", translation: "Country" }, +]; +const nlTranslation = [ + { field: "supporter.address1", translation: "Adres" }, + { field: "supporter.postcode", translation: "Postcode" }, + { field: "supporter.city", translation: "Woonplaats" }, + { field: "supporter.region", translation: "Provincie" }, + { field: "supporter.country", translation: "Country" }, +]; +const TranslateOptionsDefaults = { + BR: ptbrTranslation, + BRA: ptbrTranslation, + DE: deTranslation, + DEU: deTranslation, + FR: frTranslation, + FRA: frTranslation, + NL: nlTranslation, + NLD: nlTranslation, +}; + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/interfaces/exit-intent-options.js +const ExitIntentOptionsDefaults = { + enabled: false, + title: "We are sad that you are leaving", + text: "Would you mind telling us why you are leaving this page?", + buttonText: "Send us your comments", + buttonLink: "https://www.4sitestudios.com/", + cookieName: "engrid-exit-intent-lightbox", + cookieDuration: 30, + triggers: { + visibilityState: true, + mousePosition: true, + }, +}; + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/interfaces/frequency-upsell-options.js +const FrequencyUpsellOptionsDefaults = { + title: "Before we process your donation...", + paragraph: "Would you like to make it an annual gift?", + yesButton: "YES! Process my gift as an annual gift of ${upsell_amount}", + noButton: "NO! Process my gift as a one-time gift of ${current_amount}", + upsellFrequency: "annual", + upsellFromFrequency: ["onetime"], + customClass: "", + upsellAmount: (currentAmount) => currentAmount, + onOpen: () => { }, + onAccept: () => { }, + onDecline: () => { }, +}; + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/interfaces/iframe-queue-options.js +/** + * Configuration interfaces for the Iframe Queue component. + * + * The Iframe Queue loads a sequence of embedded Engaging Networks pages + * one at a time, passes field values into them via `postMessage`, and + * exposes a global `IframeQueueEvents` instance so external code can + * subscribe to chain-completion. See iframe-queue.ts for the component. + * + * Configuration may be supplied either programmatically (via + * `IframeQueue.getInstance().enqueue(...).process()`) or declaratively + * by setting `window.EngridIframeQueue` on the host EN page before + * the ENgrid bundle loads. + */ +const iframe_queue_options_IframeQueueOptionsDefaults = { + items: [], + autoStart: true, +}; + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/loader.js +// Ref: https://app.getguru.com/card/iMgx968T/ENgrid-Loader + +class Loader { + constructor() { + this.logger = new logger_EngridLogger("Loader", "gold", "black", "π"); + this.cssElement = document.querySelector('link[href*="engrid."][rel="stylesheet"]'); + this.jsElement = document.querySelector('script[src*="engrid."]'); + } + // Returns true if ENgrid should reload (that means the current ENgrid is not the right one) + // Returns false if ENgrid should not reload (that means the current ENgrid is the right one) + reload() { + var _a, _b, _c; + const assets = this.getOption("assets"); + const isLoaded = engrid_ENGrid.getBodyData("loaded"); + let shouldSkipCss = this.getOption("engridcss") === "false"; + let shouldSkipJs = this.getOption("engridjs") === "false"; + if (isLoaded || !assets) { + if (shouldSkipCss && this.cssElement) { + this.logger.log("engridcss=false | Removing original stylesheet:", this.cssElement); + this.cssElement.remove(); + } + if (shouldSkipJs && this.jsElement) { + this.logger.log("engridjs=false | Removing original script:", this.jsElement); + this.jsElement.remove(); + } + if (shouldSkipCss) { + this.logger.log("engridcss=false | adding top banner CSS"); + this.addENgridCSSUnloadedCSS(); + } + if (shouldSkipJs) { + this.logger.log("engridjs=false | Skipping JS load."); + this.logger.success("LOADED"); + return true; + } + this.logger.success("LOADED"); + return false; + } + // Load the right ENgrid + this.logger.log("RELOADING"); + engrid_ENGrid.setBodyData("loaded", "true"); // Set the loaded flag, so the next time we don't reload + // Fetch the desired repo, assets location, and override JS/CSS + const theme = engrid_ENGrid.getBodyData("theme"); + const engrid_repo = (_a = this.getOption("repo-name")) !== null && _a !== void 0 ? _a : `engrid-${theme}`; + let engrid_js_url = ""; + let engrid_css_url = ""; + switch (assets) { + case "local": + this.logger.log("LOADING LOCAL"); + engrid_ENGrid.setBodyData("assets", "local"); + engrid_js_url = `https://${engrid_repo}.test/dist/engrid.js`; + engrid_css_url = `https://${engrid_repo}.test/dist/engrid.css`; + break; + case "flush": + this.logger.log("FLUSHING CACHE"); + const timestamp = Date.now(); + const jsCurrentURL = new URL(((_b = this.jsElement) === null || _b === void 0 ? void 0 : _b.getAttribute("src")) || ""); + jsCurrentURL.searchParams.set("v", timestamp.toString()); + engrid_js_url = jsCurrentURL.toString(); + const cssCurrentURL = new URL(((_c = this.cssElement) === null || _c === void 0 ? void 0 : _c.getAttribute("href")) || ""); + cssCurrentURL.searchParams.set("v", timestamp.toString()); + engrid_css_url = cssCurrentURL.toString(); + break; + default: + this.logger.log("LOADING EXTERNAL"); + engrid_js_url = `https://s3.amazonaws.com/engrid-dev.4sitestudios.com/${engrid_repo}/${assets}/engrid.js`; + engrid_css_url = `https://s3.amazonaws.com/engrid-dev.4sitestudios.com/${engrid_repo}/${assets}/engrid.css`; + } + if (shouldSkipCss && this.cssElement) { + this.logger.log("engridcss=false | Removing original stylesheet:", this.cssElement); + this.cssElement.remove(); + } + if (shouldSkipCss && engrid_css_url && engrid_css_url !== "") { + this.logger.log("engridcss=false | Skipping injection of stylesheet:", engrid_css_url); + } + if (shouldSkipCss) { + this.logger.log("engridcss=false | adding top banner CSS"); + this.addENgridCSSUnloadedCSS(); + } + else { + this.setCssFile(engrid_css_url); + } + if (shouldSkipJs && this.jsElement) { + this.logger.log("engridjs=false | Removing original script:", this.jsElement); + this.jsElement.remove(); + } + if (shouldSkipJs && engrid_js_url && engrid_js_url !== "") { + this.logger.log("engridjs=false | Skipping injection of script:", engrid_js_url); + } + if (!shouldSkipJs) { + this.setJsFile(engrid_js_url); + } + // If custom assets aren't defined, we don't need to reload. + if (!assets) { + return false; + } + return true; + } + getOption(key) { + const urlParam = engrid_ENGrid.getUrlParameter(key); + if (urlParam && ["assets", "engridcss", "engridjs"].includes(key)) { + return urlParam; + } + else if (window.EngridLoader && window.EngridLoader.hasOwnProperty(key)) { + return window.EngridLoader[key]; + } + else if (this.jsElement && this.jsElement.hasAttribute("data-" + key)) { + return this.jsElement.getAttribute("data-" + key); + } + return null; + } + setCssFile(url) { + if (url === "") { + return; + } + if (this.cssElement) { + this.logger.log("Replacing stylesheet:", url); + this.cssElement.setAttribute("href", url); + } + else { + this.logger.log("Injecting stylesheet:", url); + const link = document.createElement("link"); + link.setAttribute("rel", "stylesheet"); + link.setAttribute("type", "text/css"); + link.setAttribute("media", "all"); + link.setAttribute("href", url); + document.head.appendChild(link); + } + } + setJsFile(url) { + if (url === "") { + return; + } + this.logger.log("Injecting script:", url); + const script = document.createElement("script"); + script.setAttribute("src", url); + document.head.appendChild(script); + } + addENgridCSSUnloadedCSS() { + document.body.insertAdjacentHTML("beforeend", ``); + } +} + +// EXTERNAL MODULE: ./node_modules/@4site/engrid-scripts/node_modules/strongly-typed-events/dist/index.js +var dist = __webpack_require__(3199); +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/events/en-form.js + + +class en_form_EnForm { + constructor() { + this.logger = new logger_EngridLogger("EnForm"); + this._onIntentSubmit = new dist/* SignalDispatcher */.UD(); + this._onSubmit = new dist/* SignalDispatcher */.UD(); + this._onValidate = new dist/* SignalDispatcher */.UD(); + this._onError = new dist/* SignalDispatcher */.UD(); + this.submit = true; + this.submitPromise = false; + this.validate = true; + this.validatePromise = false; + } + static getInstance() { + if (!en_form_EnForm.instance) { + en_form_EnForm.instance = new en_form_EnForm(); + } + return en_form_EnForm.instance; + } + dispatchIntentSubmit() { + this._onIntentSubmit.dispatch(); + this.logger.log("dispatchIntentSubmit"); + } + dispatchSubmit() { + this._onSubmit.dispatch(); + this.logger.log("dispatchSubmit"); + } + dispatchValidate() { + this._onValidate.dispatch(); + this.logger.log("dispatchValidate"); + } + dispatchError() { + this._onError.dispatch(); + this.logger.log("dispatchError"); + } + submitForm() { + const enForm = document.querySelector("form .en__submit button"); + if (enForm) { + // Add submitting class to modal + const enModal = document.getElementById("enModal"); + if (enModal) + enModal.classList.add("is-submitting"); + enForm.click(); + this.logger.log("submitForm"); + } + } + /** + * onIntentSubmit is dispatched when a submit button is clicked, + * or a digital wallet submission is initiated, + * but before server-side validation or the actual submit event. + * This allows you to run code at the moment the user intends to submit, + * such as triggering data formatting, analytics events, or other pre-submit actions. + * Actions that rely on fully processed form data or validation results should use the onSubmit event instead. + * Note: onSubmit will also dispatch onIntentSubmit, so do not repeat actions in both events. + */ + get onIntentSubmit() { + return this._onIntentSubmit.asEvent(); + } + /** + * onSubmit is dispatched when the form is submitted, after validation has passed. + * This is the main event to listen to for form submissions, as it indicates that the user has successfully submitted the form and all validation checks have been passed. + * This event uses window.enOnSubmit, which is called by Engaging Networks' JavaScript when the form is submitted. + * At the time of writing, enOnSubmit does not trigger when a user submits via a digital wallet, use onIntentSubmit to listen for those submission attempts. + * Note: onSubmit will also dispatch onIntentSubmit, so do not repeat actions in both events. + */ + get onSubmit() { + return this._onSubmit.asEvent(); + } + /** + * onValidate is dispatched using window.enOnValidate, which is called by Engaging Networks' JavaScript + * when the form is being validated, before submission. This only occurs after ENgrid's client-side validation has passed, but before server-side validation. + */ + get onValidate() { + return this._onValidate.asEvent(); + } + /** + * onError is dispatched using window.enOnError, which is called by Engaging Networks' JavaScript when a server-side validation error occurs on form submission. + * This allows you to listen for validation errors and respond accordingly, such as displaying custom error messages or triggering analytics events. + */ + get onError() { + return this._onError.asEvent(); + } +} + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/events/donation-amount.js + + +class DonationAmount { + constructor(radios = "transaction.donationAmt", other = "transaction.donationAmt.other") { + this._onAmountChange = new dist/* SimpleEventDispatcher */.IL(); + this._amount = 0; + this._radios = ""; + this._other = ""; + this._dispatch = true; + this._other = other; + this._radios = radios; + // Watch Radios Inputs for Changes + document.addEventListener("change", (e) => { + const element = e.target; + if (element) { + if (element.name == radios) { + this.amount = parseFloat(element.value); + } + else if (element.name == other) { + const cleanedAmount = engrid_ENGrid.cleanAmount(element.value); + element.value = + cleanedAmount % 1 != 0 + ? cleanedAmount.toFixed(2) + : cleanedAmount.toString(); + this.amount = cleanedAmount; + } + } + }); + // Watch Other Amount Field + const otherField = document.querySelector(`[name='${this._other}']`); + if (otherField) { + otherField.addEventListener("keyup", (e) => { + this.amount = engrid_ENGrid.cleanAmount(otherField.value); + }); + } + // Load the current amount + this.load(); + } + static getInstance(radios = "transaction.donationAmt", other = "transaction.donationAmt.other") { + if (!DonationAmount.instance) { + DonationAmount.instance = new DonationAmount(radios, other); + } + return DonationAmount.instance; + } + get amount() { + return this._amount; + } + // Every time we set an amount, trigger the onAmountChange event + set amount(value) { + this._amount = value || 0; + if (this._dispatch) + this._onAmountChange.dispatch(this._amount); + } + get onAmountChange() { + return this._onAmountChange.asEvent(); + } + // Set amount var with currently selected amount + load() { + const currentAmountField = document.querySelector('input[name="' + this._radios + '"]:checked'); + if (currentAmountField) { + let currentAmountValue = parseFloat(currentAmountField.value || ""); + if (currentAmountValue > 0) { + this.amount = parseFloat(currentAmountField.value); + } + else { + const otherField = document.querySelector('input[name="' + this._other + '"]'); + currentAmountValue = engrid_ENGrid.cleanAmount(otherField.value); + this.amount = currentAmountValue; + } + } + else if (engrid_ENGrid.checkNested(window.EngagingNetworks, "require", "_defined", "enjs", "getDonationTotal") && + engrid_ENGrid.checkNested(window.EngagingNetworks, "require", "_defined", "enjs", "getDonationFee")) { + const total = window.EngagingNetworks.require._defined.enjs.getDonationTotal() - + window.EngagingNetworks.require._defined.enjs.getDonationFee(); + if (total) { + this.amount = total; + } + } + } + // Force a new amount + setAmount(amount, dispatch = true) { + // Run only if it is a Donation Page with a Donation Amount field + if (!document.getElementsByName(this._radios).length) { + return; + } + // Set dispatch to be checked by the SET method + this._dispatch = dispatch; + // Search for the current amount on radio boxes + let found = Array.from(document.querySelectorAll('input[name="' + this._radios + '"]')).filter((el) => el instanceof HTMLInputElement && parseInt(el.value) == amount); + // We found the amount on the radio boxes, so check it + if (found.length) { + const amountField = found[0]; + amountField.checked = true; + // Change Event + const event = new Event("change", { + bubbles: true, + cancelable: true, + }); + amountField.dispatchEvent(event); + // Clear OTHER text field + this.clearOther(); + } + else { + const otherField = document.querySelector('input[name="' + this._other + '"]'); + if (otherField) { + const enFieldOtherAmountRadio = document.querySelector(`.en__field--donationAmt.en__field--withOther .en__field__item:nth-last-child(2) input[name="${this._radios}"]`); + if (enFieldOtherAmountRadio) { + enFieldOtherAmountRadio.checked = true; + } + otherField.value = parseFloat(amount.toString()).toFixed(2); + // Change Event + const event = new Event("change", { + bubbles: true, + cancelable: true, + }); + otherField.dispatchEvent(event); + const otherWrapper = otherField.parentNode; + otherWrapper.classList.remove("en__field__item--hidden"); + } + } + // Set the new amount and trigger all live variables + this.amount = amount; + // Revert dispatch to default value (true) + this._dispatch = true; + } + // Clear Other Field + clearOther() { + const otherField = document.querySelector('input[name="' + this._other + '"]'); + otherField.value = ""; + const otherWrapper = otherField.parentNode; + otherWrapper.classList.add("en__field__item--hidden"); + } +} + +;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/engrid.js +class engrid_ENGrid { + constructor() { + if (!engrid_ENGrid.enForm) { + throw new Error("Engaging Networks Form Not Found!"); + } + } + static get enForm() { + return document.querySelector("form.en__component"); + } + static get debug() { + return !!this.getOption("Debug"); + } + static get demo() { + return this.getUrlParameter("mode") === "DEMO"; + } + // Return any parameter from the URL + static getUrlParameter(name) { + const searchParams = new URLSearchParams(window.location.search); + // Add support for array on the name ending with [] + if (name.endsWith("[]")) { + let values = []; + searchParams.forEach((value, key) => { + if (key.startsWith(name.replace("[]", ""))) { + values.push(new Object({ [key]: value })); + } + }); + return values.length > 0 ? values : null; + } + if (searchParams.has(name)) { + return searchParams.get(name) || true; + } + return null; + } + static getField(name) { + // Get the field by name + return document.querySelector(`[name="${name}"]`); + } + // Return the field value from its name. It works on any field type. + // Multiple values (from checkboxes or multi-select) are returned as single string + // Separated by , + static getFieldValue(name) { + return new FormData(this.enForm).getAll(name).join(","); + } + // Set a value to any field. If it's a dropdown, radio or checkbox, it selects the proper option matching the value + static setFieldValue(name, value, parseENDependencies = true, dispatchEvents = false) { + if (value === engrid_ENGrid.getFieldValue(name)) + return; + document.getElementsByName(name).forEach((field) => { + if ("type" in field) { + switch (field.type) { + case "select-one": + case "select-multiple": + for (const option of field.options) { + if (option.value == value) { + option.selected = true; + if (dispatchEvents) { + field.dispatchEvent(new Event("change", { bubbles: true })); + } + } + } + break; + case "checkbox": + case "radio": + if (field.value == value) { + field.checked = true; + if (dispatchEvents) { + field.dispatchEvent(new Event("change", { bubbles: true })); + } + } + break; + case "textarea": + case "text": + default: + field.value = value; + if (dispatchEvents) { + field.dispatchEvent(new Event("change", { bubbles: true })); + field.dispatchEvent(new Event("blur", { bubbles: true })); + } + } + field.setAttribute("engrid-value-changed", ""); + } + }); + if (parseENDependencies) + this.enParseDependencies(); + return; + } + // Create a hidden input field + static createHiddenInput(name, value = "") { + var _a; + const formBlock = document.createElement("div"); + formBlock.classList.add("en__component", "en__component--formblock", "hide"); + const textField = document.createElement("div"); + textField.classList.add("en__field", "en__field--text"); + const textElement = document.createElement("div"); + textElement.classList.add("en__field__element", "en__field__element--text"); + const inputField = document.createElement("input"); + inputField.classList.add("en__field__input", "en__field__input--text", "engrid-added-input"); + inputField.setAttribute("name", name); + inputField.setAttribute("type", "hidden"); + inputField.setAttribute("value", value); + textElement.appendChild(inputField); + textField.appendChild(textElement); + formBlock.appendChild(textField); + const submitElement = document.querySelector(".en__submit"); + if (submitElement) { + const lastFormComponent = submitElement.closest(".en__component"); + if (lastFormComponent) { + // Insert the new field after the submit button + (_a = lastFormComponent.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(formBlock, lastFormComponent.nextSibling); + } + } + else { + engrid_ENGrid.enForm.appendChild(formBlock); + } + return inputField; + } + // Trigger EN Dependencies + static enParseDependencies() { + var _a, _b, _c, _d, _e, _f; + if (window.EngagingNetworks && + typeof ((_e = (_d = (_c = (_b = (_a = window.EngagingNetworks) === null || _a === void 0 ? void 0 : _a.require) === null || _b === void 0 ? void 0 : _b._defined) === null || _c === void 0 ? void 0 : _c.enDependencies) === null || _d === void 0 ? void 0 : _d.dependencies) === null || _e === void 0 ? void 0 : _e.parseDependencies) === "function") { + const customDependencies = []; + if ("dependencies" in window.EngagingNetworks) { + const amountContainer = document.querySelector(".en__field--donationAmt"); + if (amountContainer) { + let amountID = ((_f = [...amountContainer.classList.values()] + .filter((v) => v.startsWith("en__field--") && Number(v.substring(11)) > 0) + .toString() + .match(/\d/g)) === null || _f === void 0 ? void 0 : _f.join("")) || ""; + if (amountID) { + window.EngagingNetworks.dependencies.forEach((dependency) => { + if ("actions" in dependency && dependency.actions.length > 0) { + let amountIdFound = false; + dependency.actions.forEach((action) => { + if ("target" in action && action.target == amountID) { + amountIdFound = true; + } + }); + if (!amountIdFound) { + customDependencies.push(dependency); + } + } + }); + if (customDependencies.length > 0) { + window.EngagingNetworks.require._defined.enDependencies.dependencies.parseDependencies(customDependencies); + if (engrid_ENGrid.getOption("Debug")) + console.log("EN Dependencies Triggered", customDependencies); + } + } + } + } + } + } + // Return the status of the gift process (true if a donation has been made, otherwise false) + static getGiftProcess() { + if ("pageJson" in window) + return window.pageJson.giftProcess; + return null; + } + // Return the page count + static getPageCount() { + if ("pageJson" in window) + return window.pageJson.pageCount; + return null; + } + // Return the current page number + static getPageNumber() { + if ("pageJson" in window) + return window.pageJson.pageNumber; + return null; + } + static isThankYouPage() { + return this.getPageNumber() === this.getPageCount(); + } + // Return the current page ID + static getPageID() { + if ("pageJson" in window) return window.pageJson.campaignPageId; return 0; } /** - * Parse the numeric Page ID out of a Engaging Networks URL. - * EN page URLs follow the pattern `https://
+ // ${ENGrid.getFieldValue("supporter.firstName") ? `Giving as ${ENGrid.getFieldValue("supporter.firstName")} ${ENGrid.getFieldValue("supporter.lastName")}` : "Testing as "} + // with ${ENGrid.getFieldValue( + // "transaction.paymenttype" + // ).toUpperCase()} + // (change)
+
+
-class RememberMeEvents {
+ Example Video Input (Doesn't currently visually display)
+ @TODO Video tags are processed but their
+
+
+
+ `;
+ this.overlay.innerHTML = markup;
+ const closeButton = this.overlay.querySelector("#goMonthlyClose");
+ const yesButton = this.overlay.querySelector("#upsellYesButton a");
+ const noButton = this.overlay.querySelector("#upsellNoButton button");
+ yesButton.addEventListener("click", this.continue.bind(this));
+ noButton.addEventListener("click", this.continue.bind(this));
+ if (closeButton)
+ closeButton.addEventListener("click", this.close.bind(this));
+ this.overlay.addEventListener("click", (e) => {
+ if (e.target instanceof Element &&
+ e.target.id == this.overlay.id &&
+ this.options.canClose) {
+ this.close(e);
+ }
+ });
+ document.addEventListener("keyup", (e) => {
+ if (e.key === "Escape" && closeButton) {
+ closeButton.click();
+ }
+ });
+ document.body.appendChild(this.overlay);
+ const otherField = document.querySelector("#secondOtherField");
+ if (otherField) {
+ otherField.addEventListener("keyup", this.popupOtherField.bind(this));
+ }
+ this.logger.log("Upsell script rendered");
+ }
+ // Should we run the script?
+ shouldRun() {
+ // if it's a first page of a Donation page
+ return (
+ // !hideModal &&
+ !this.shouldSkip() &&
+ "EngridUpsell" in window &&
+ !!window.pageJson &&
+ window.pageJson.pageNumber == 1 &&
+ ["donation", "premiumgift"].includes(window.pageJson.pageType));
+ }
+ shouldSkip() {
+ if ("EngridUpsell" in window && window.EngridUpsell.skipUpsell) {
+ return true;
}
- // Document Load
- if (document.readyState !== "loading") {
- this.run();
+ return this.options.skipUpsell;
+ }
+ popupOtherField() {
+ var _a, _b;
+ const value = parseFloat((_b = (_a = this.overlay.querySelector("#secondOtherField")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+ const live_upsell_amount = document.querySelectorAll("#upsellYesButton .upsell_suggestion");
+ const upsellAmount = this.getUpsellAmount();
+ if (!isNaN(value) && value > 0) {
+ this.checkOtherAmount(value);
}
else {
- document.addEventListener("DOMContentLoaded", () => {
- this.run();
- });
+ this.checkOtherAmount(upsellAmount);
}
- // Window Resize
- window.onresize = () => {
- this.onResize();
- };
+ live_upsell_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(upsellAmount + this._fees.calculateFees(upsellAmount))));
}
- run() {
- if (!engrid_ENGrid.checkNested(window.EngagingNetworks, "require", "_defined", "enjs")) {
- this.logger.danger("Engaging Networks JS Framework NOT FOUND");
- setTimeout(() => {
- this.run();
- }, 100);
- return;
+ liveAmounts() {
+ const live_upsell_amount = document.querySelectorAll(".upsell_suggestion");
+ const live_amount = document.querySelectorAll(".upsell_amount");
+ const upsellAmount = this.getUpsellAmount();
+ const suggestedAmount = upsellAmount + this._fees.calculateFees(upsellAmount);
+ live_upsell_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(suggestedAmount)));
+ live_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(this._amount.amount + this._fees.fee)));
+ }
+ liveFrequency() {
+ const live_upsell_frequency = document.querySelectorAll(".upsell_frequency");
+ live_upsell_frequency.forEach((elem) => (elem.innerHTML = this.getFrequencyTxt()));
+ }
+ // Return the Suggested Upsell Amount
+ getUpsellAmount() {
+ var _a, _b;
+ const amount = this._amount.amount;
+ const otherAmount = parseFloat((_b = (_a = this.overlay.querySelector("#secondOtherField")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+ if (otherAmount > 0) {
+ return otherAmount > this.options.minAmount
+ ? otherAmount
+ : this.options.minAmount;
}
- // If there's an option object on the page, override the defaults
- if (window.hasOwnProperty("EngridPageOptions")) {
- this.options = Object.assign(Object.assign({}, this.options), window.EngridPageOptions);
- // Add Options to window
- window.EngridOptions = this.options;
+ let upsellAmount = 0;
+ for (let i = 0; i < this.options.amountRange.length; i++) {
+ let val = this.options.amountRange[i];
+ if (upsellAmount == 0 && amount <= val.max) {
+ upsellAmount = val.suggestion;
+ if (upsellAmount === 0)
+ return 0;
+ if (typeof upsellAmount !== "number") {
+ const suggestionMath = upsellAmount.replace("amount", amount.toFixed(2));
+ upsellAmount = parseFloat(Function('"use strict";return (' + suggestionMath + ")")());
+ }
+ break;
+ }
}
- // If there's no pageJson.pageType, add a big red warning to the console
- if (!engrid_ENGrid.checkNested(window, "pageJson", "pageType")) {
- window.setTimeout(() => {
- console.log("%c βοΈ pageJson.pageType NOT FOUND - Go to the Account Settings and Expose the Transaction Details %s", "background-color: red; color: white; font-size: 22px; font-weight: bold;", "https://knowledge.engagingnetworks.net/datareports/expose-transaction-details-pagejson");
- }, 2000);
+ return upsellAmount > this.options.minAmount
+ ? upsellAmount
+ : this.options.minAmount;
+ }
+ shouldOpen() {
+ const upsellAmount = this.getUpsellAmount();
+ const paymenttype = engrid_ENGrid.getFieldValue("transaction.paymenttype") || "";
+ this._suggestAmount = upsellAmount;
+ // If frequency is not onetime or
+ // the modal is already opened or
+ // there's no suggestion for this donation amount,
+ // we should not open
+ if (this.freqAllowed() &&
+ !this.shouldSkip() &&
+ !this.options.disablePaymentMethods.includes(paymenttype.toLowerCase()) &&
+ !this.overlay.classList.contains("is-submitting") &&
+ upsellAmount > 0) {
+ this.logger.log("Upsell Frequency " + this._frequency.frequency);
+ this.logger.log("Upsell Amount " + this._amount.amount);
+ this.logger.log("Upsell Suggested Amount " + upsellAmount);
+ return true;
}
- if (this.options.Debug || App.getUrlParameter("debug") == "true")
- // Enable debug if available is the first thing
- App.setBodyData("debug", "");
- 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-");
- new ShowHideRadioCheckboxes("transaction.shipenabled", "shipenabled-");
- // Automatically show/hide all radios
- let radioFields = [];
- const allRadios = document.querySelectorAll("input[type=radio]");
- allRadios.forEach((radio) => {
- if ("name" in radio && radioFields.includes(radio.name) === false) {
- radioFields.push(radio.name);
- }
- });
- radioFields.forEach((field) => {
- new ShowHideRadioCheckboxes(field, "engrid__" + field.replace(/\./g, "") + "-");
- });
- // Automatically show/hide all checkboxes
- const allCheckboxes = document.querySelectorAll("input[type=checkbox]");
- allCheckboxes.forEach((checkbox) => {
- if ("name" in checkbox) {
- new ShowHideRadioCheckboxes(checkbox.name, "engrid__" + checkbox.name.replace(/\./g, "") + "-");
+ return false;
+ }
+ // Return true if the current frequency is allowed by the options
+ freqAllowed() {
+ const freq = this._frequency.frequency;
+ const allowed = [];
+ if (this.options.oneTime)
+ allowed.push("onetime");
+ if (this.options.annual)
+ allowed.push("annual");
+ return allowed.includes(freq);
+ }
+ open() {
+ this.logger.log("Upsell script opened");
+ if (!this.shouldOpen()) {
+ // In the circumstance when the form fails to validate via server-side validation, the page will reload
+ // When that happens, we should place the original amount saved in sessionStorage into the upsell original amount field
+ let original = window.sessionStorage.getItem("original");
+ if (original &&
+ document.querySelectorAll(".en__errorList .en__error").length > 0) {
+ this.setOriginalAmount(original);
}
- });
- // Client onSubmit and onError functions
- this._form.onIntentSubmit.subscribe(() => this.onIntentSubmit());
- this._form.onSubmit.subscribe(() => this.onSubmit());
- this._form.onError.subscribe(() => this.onError());
- this._form.onValidate.subscribe(() => this.onValidate());
- // Event Listener Examples
- this._amount.onAmountChange.subscribe((s) => this.logger.success(`Live Amount: ${s}`));
- this._frequency.onFrequencyChange.subscribe((s) => {
- this.logger.success(`Live Frequency: ${s}`);
- setTimeout(() => {
- this._amount.load();
- }, 150);
- });
- this._form.onSubmit.subscribe((s) => this.logger.success("Submit: " + JSON.stringify(s)));
- this._form.onError.subscribe((s) => this.logger.danger("Error: " + JSON.stringify(s)));
- this._country.onCountryChange.subscribe((s) => this.logger.success(`Country: ${s}`));
- window.enOnSubmit = () => {
+ // Returning true will give the "go ahead" to submit the form
this._form.submit = true;
- this._form.submitPromise = false;
- this._form.dispatchIntentSubmit();
- this._form.dispatchSubmit();
- engrid_ENGrid.watchForError(engrid_ENGrid.enableSubmit);
- if (!this._form.submit)
- return false;
- if (this._form.submitPromise)
- return this._form.submitPromise;
- this.logger.success("enOnSubmit Success");
- // If all validation passes, we'll watch for Digital Wallets Errors, which
- // will not reload the page (thanks EN), so we will enable the submit button if
- // an error is programmatically thrown by the Digital Wallets
- return true;
- };
- window.enOnError = () => {
- this._form.dispatchError();
- };
- window.enOnValidate = () => {
- this._form.validate = true;
- this._form.validatePromise = false;
- this._form.dispatchValidate();
- if (!this._form.validate)
- return false;
- if (this._form.validatePromise)
- return this._form.validatePromise;
- this.logger.success("Validation Passed");
return true;
- };
- new DataAttributes();
- // Country Redirect
- new CountryRedirect();
- // iFrame Logic
- new iFrame();
- // Live Variables
- new LiveVariables(this.options);
- // Dynamically set Recurrency Frequency
- new setRecurrFreq();
- // Upsell Checkbox
- new UpsellCheckbox();
- // Upsell Lightbox
- new UpsellLightbox();
- // Amount Labels
- new AmountLabel();
- // Engrid Data Replacement
- new DataReplace();
- // ENgrid Hide Script
- new DataHide();
- // Autosubmit script
- new Autosubmit();
- // Adjust display of event tickets.
- new EventTickets();
- // StickyNSG - Must load before SwapAmounts
- new StickyNSG();
- // Swap Amounts
- new SwapAmounts();
- // On the end of the script, after all subscribers defined, let's load the current frequency
- // The amount will be loaded by the frequency change event
- // This timeout is needed because when you have alternative amounts, EN is slower than Engrid
- // about 20% of the time and we get a race condition if the client is also using the SwapAmounts feature
- window.setTimeout(() => {
- this._frequency.load();
- }, 1000);
- // Fast Form Fill
- new FastFormFill();
- // Currency Related Components
- new LiveCurrency();
- new CustomCurrency();
- // Auto Country Select
- new AutoCountrySelect();
- // Add Image Attribution
- if (this.options.MediaAttribution)
- new MediaAttribution();
- // Apple Pay
- if (this.options.applePay)
- new ApplePay();
- // Capitalize Fields
- if (this.options.CapitalizeFields)
- new CapitalizeFields();
- // Auto Year Class
- if (this.options.AutoYear)
- new AutoYear();
- // Autocomplete Class
- new Autocomplete();
- // Ecard Class
- new Ecard();
- // Click To Expand
- if (this.options.ClickToExpand)
- new ClickToExpand();
- if (this.options.SkipToMainContentLink)
- new SkipToMainContentLink();
- if (this.options.SrcDefer)
- new SrcDefer();
- // Progress Bar
- if (this.options.ProgressBar)
- new ProgressBar();
- // RememberMe
- try {
- // Accessing window.localStorage will throw an exception if it isn't permitted due to security reasons
- // For example, this happens in Firefox when cookies are disabled. If it isn't available, we shouldn't
- // bother with enabling RememberMe
- if (this.options.RememberMe &&
- typeof this.options.RememberMe === "object" &&
- window.localStorage) {
- new RememberMe(this.options.RememberMe);
- }
- }
- catch (e) { }
- if (this.options.NeverBounceAPI)
- new NeverBounce(this.options.NeverBounceAPI, this.options.NeverBounceDateField, this.options.NeverBounceStatusField, this.options.NeverBounceDateFormat);
- // FreshAddress
- if (this.options.FreshAddress)
- new FreshAddress();
- new ShowIfAmount();
- new OtherAmount();
- new MinMaxAmount();
- new Ticker();
- new A11y();
- new AddNameToMessage();
- new ExpandRegionName();
- // Page Background
- new PageBackground();
- // Url Params to Form Fields
- new UrlToForm();
- // Required if Visible Fields
- new RequiredIfVisible();
- // EN Custom Validators (behind a feature flag, off by default)
- new ENValidators();
- //Debug hidden fields
- if (this.options.Debug)
- new DebugHiddenFields();
- // TidyContact
- if (this.options.TidyContact)
- new TidyContact();
- // Translate Fields
- if (this.options.TranslateFields)
- new TranslateFields();
- // Country Disable
- new CountryDisable();
- // Premium Gift Features
- new PremiumGift();
- // Custom Premium filtering (frequency/amount-based visibility)
- new CustomPremium();
- // Supporter Hub Features
- new SupporterHub();
- // Digital Wallets Features
- if (engrid_ENGrid.getPageType() === "DONATION") {
- new DigitalWallets();
- new PreferredPaymentMethod();
}
- // Mobile CTA
- new MobileCTA();
- // Live Frequency
- new LiveFrequency();
- // Universal Opt In
- new UniversalOptIn();
- new StripeFinancialConnections();
- //Exit Intent Lightbox
- new ExitIntentLightbox();
- new UrlParamsToBodyAttrs();
- new SetAttr();
- new ShowIfPresent();
- new PostalCodeValidator();
- // Very Good Security
- new VGS();
- new WelcomeBack();
- new EcardToTarget();
- new UsOnlyForm();
- new ThankYouPageConditionalContent();
- new EmbeddedEcard();
- new CheckboxLabel();
- new PostDonationEmbed();
- new FrequencyUpsell();
- new StickyPrepopulation();
- //Debug panel
- let showDebugPanel = this.options.Debug;
- try {
- // accessing storage can throw an exception if it isn't available in Firefox
- if (!showDebugPanel &&
- window.sessionStorage.hasOwnProperty(DebugPanel.debugSessionStorageKey)) {
- showDebugPanel = true;
+ this.liveAmounts();
+ this.liveFrequency();
+ this.overlay.classList.remove("is-hidden");
+ this._form.submit = false;
+ engrid_ENGrid.setBodyData("has-lightbox", "");
+ return false;
+ }
+ // Set the original amount into a hidden field using the upsellOriginalGiftAmountFieldName, if provided
+ setOriginalAmount(original) {
+ if (this.options.upsellOriginalGiftAmountFieldName) {
+ let enFieldUpsellOriginalAmount = document.querySelector(".en__field__input.en__field__input--hidden[name='" +
+ this.options.upsellOriginalGiftAmountFieldName +
+ "']");
+ if (!enFieldUpsellOriginalAmount) {
+ let pageform = document.querySelector("form.en__component--page");
+ if (pageform) {
+ let input = document.createElement("input");
+ input.setAttribute("type", "hidden");
+ input.setAttribute("name", this.options.upsellOriginalGiftAmountFieldName);
+ input.classList.add("en__field__input", "en__field__input--hidden");
+ pageform.appendChild(input);
+ enFieldUpsellOriginalAmount = document.querySelector('.en__field__input.en__field__input--hidden[name="' +
+ this.options.upsellOriginalGiftAmountFieldName +
+ '"]');
+ }
+ }
+ if (enFieldUpsellOriginalAmount) {
+ // save it to a session variable just in case this page reloaded due to server-side validation error
+ window.sessionStorage.setItem("original", original);
+ enFieldUpsellOriginalAmount.setAttribute("value", original);
}
}
- catch (e) { }
- if (showDebugPanel) {
- new DebugPanel(this.options.PageLayouts);
- }
- if (engrid_ENGrid.getUrlParameter("development") === "branding") {
- new BrandingHtml().show();
- }
- engrid_ENGrid.setBodyData("js-loading", "finished");
- window.EngridVersion = AppVersion;
- this.logger.success(`VERSION: ${AppVersion}`);
- // Window Load
- let onLoad = typeof window.onload === "function" ? window.onload : null;
- if (document.readyState !== "loading") {
- this.onLoad();
+ }
+ // Proceed to the next page (upsold or not)
+ continue(e) {
+ var _a;
+ e.preventDefault();
+ if (e.target instanceof Element &&
+ ((_a = document.querySelector("#upsellYesButton")) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+ this.logger.success("Upsold");
+ this.setOriginalAmount(this._amount.amount.toString());
+ const upsoldAmount = this.getUpsellAmount();
+ const originalAmount = this._amount.amount;
+ this._frequency.setFrequency("monthly");
+ this._amount.setAmount(upsoldAmount);
+ this._dataLayer.addEndOfGiftProcessEvent("ENGRID_UPSELL", {
+ eventValue: true,
+ originalAmount: originalAmount,
+ upsoldAmount: upsoldAmount,
+ frequency: "monthly",
+ });
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL", true);
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_ORIGINAL_AMOUNT", originalAmount);
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_DONATION_FREQUENCY", "MONTHLY");
+ this.renderConversionField("upsellSuccess", "onetime", originalAmount, "monthly", this._suggestAmount, "monthly", upsoldAmount);
}
else {
- window.onload = (e) => {
- this.onLoad();
- if (onLoad) {
- onLoad.bind(window, e);
- }
- };
+ this.setOriginalAmount("");
+ window.sessionStorage.removeItem("original");
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL", false);
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_DONATION_FREQUENCY", "ONE-TIME");
+ this.renderConversionField("upsellFail", this._frequency.frequency, this._amount.amount, "monthly", this._suggestAmount, this._frequency.frequency, this._amount.amount);
}
+ this._form.submitForm();
}
- onLoad() {
- if (this.options.onLoad) {
- this.options.onLoad();
+ // Close the lightbox
+ close(e) {
+ e.preventDefault();
+ this.overlay.classList.add("is-hidden");
+ engrid_ENGrid.setBodyData("has-lightbox", false);
+ if (this.options.submitOnClose) {
+ this.renderConversionField("upsellFail", this._frequency.frequency, this._amount.amount, "monthly", this._suggestAmount, this._frequency.frequency, this._amount.amount);
+ this._form.submitForm();
}
- }
- onResize() {
- if (this.options.onResize) {
- this.options.onResize();
+ else {
+ this._form.dispatchError();
}
}
- onValidate() {
- if (this.options.onValidate) {
- this.logger.log("Client onValidate Triggered");
- this.options.onValidate();
- }
+ getAmountTxt(amount = 0) {
+ var _a, _b, _c, _d;
+ const symbol = (_a = engrid_ENGrid.getCurrencySymbol()) !== null && _a !== void 0 ? _a : "$";
+ const dec_separator = (_b = engrid_ENGrid.getOption("DecimalSeparator")) !== null && _b !== void 0 ? _b : ".";
+ const thousands_separator = (_c = engrid_ENGrid.getOption("ThousandsSeparator")) !== null && _c !== void 0 ? _c : "";
+ const dec_places = amount % 1 == 0 ? 0 : (_d = engrid_ENGrid.getOption("DecimalPlaces")) !== null && _d !== void 0 ? _d : 2;
+ const amountTxt = engrid_ENGrid.formatNumber(amount, dec_places, dec_separator, thousands_separator);
+ return amount > 0 ? symbol + amountTxt : "";
}
- onIntentSubmit() {
- if (this.options.onIntentSubmit) {
- this.logger.log("Client onIntentSubmit Triggered");
- this.options.onIntentSubmit();
- }
+ getFrequencyTxt() {
+ const freqTxt = {
+ onetime: "one-time",
+ monthly: "monthly",
+ annual: "annual",
+ };
+ const frequency = this._frequency.frequency;
+ return frequency in freqTxt ? freqTxt[frequency] : frequency;
}
- onSubmit() {
- if (this.options.onSubmit) {
- this.logger.log("Client onSubmit Triggered");
- this.options.onSubmit();
+ checkOtherAmount(value) {
+ const otherInput = document.querySelector(".upsellOtherAmountInput");
+ if (otherInput) {
+ if (value >= this.options.minAmount) {
+ otherInput.classList.remove("is-invalid");
+ }
+ else {
+ otherInput.classList.add("is-invalid");
+ }
}
}
- onError() {
- if (this.options.onError) {
- this.logger.danger("Client onError Triggered");
- this.options.onError();
+ renderConversionField(event, // The event that triggered the conversion
+ freq, // The frequency of the donation (onetime, monthly, annual)
+ amt, // The original amount of the donation (before the upsell)
+ sugFreq, // The suggested frequency of the upsell (monthly)
+ sugAmt, // The suggested amount of the upsell
+ subFreq, // The submitted frequency of the upsell (onetime, monthly, annual)
+ subAmt // The submitted amount of the upsell
+ ) {
+ if (this.options.conversionField === "")
+ return;
+ const conversionField = document.querySelector("input[name='" + this.options.conversionField + "']") ||
+ engrid_ENGrid.createHiddenInput(this.options.conversionField);
+ if (!conversionField) {
+ this.logger.error("Could not find or create the conversion field");
+ return;
}
- }
- static log(message) {
- const logger = new logger_EngridLogger("Client", "brown", "aliceblue", "πͺ");
- logger.log(message);
+ const conversionValue = `event:${event},freq:${freq},amt:${amt},sugFreq:${sugFreq},sugAmt:${sugAmt},subFreq:${subFreq},subAmt:${subAmt}`;
+ conversionField.value = conversionValue;
+ this.logger.log(`Conversion Field ${event}`, conversionValue);
}
}
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/amount-label.js
-// This script checks if the donations amounts are numbers and if they are, appends the correct currency symbol
+;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/upsell-checkbox.js
+// This component will add a checkbox to the donation form that will allow the user to upgrade their donation to a monthly donation.
-class AmountLabel {
+
+class UpsellCheckbox {
constructor() {
+ this.checkboxOptions = false;
+ this.checkboxOptionsDefaults = {
+ label: "Make my gift a monthly gift of {new-amount}/mo",
+ location: "before .en__component .en__submit",
+ cssClass: "",
+ };
+ this._amount = DonationAmount.getInstance();
+ this._fees = ProcessingFees.getInstance();
this._frequency = DonationFrequency.getInstance();
+ this._dataLayer = DataLayer.getInstance();
+ this.checkboxContainer = null;
+ this.oldAmount = 0;
+ this.oldFrequency = "one-time";
+ this.resetCheckbox = false;
+ this.logger = new logger_EngridLogger("UpsellCheckbox", "black", "LemonChiffon", "β
");
+ let options = "EngridUpsell" in window ? window.EngridUpsell : {};
+ this.options = Object.assign(Object.assign({}, UpsellOptionsDefaults), options);
+ if (this.options.upsellCheckbox === false) {
+ this.logger.log("Skipped");
+ return;
+ }
+ // To avoid using both UpsellLightbox and UpsellCheckbox at the same time, set window.EngridUpsell.skipUpsell to true if there's an upsellCheckbox
+ if ("upsellCheckbox" in options && options.upsellCheckbox !== false) {
+ window.EngridUpsell.skipUpsell = true; // Skip the upsell lightbox
+ }
+ this.checkboxOptions = Object.assign(Object.assign({}, this.checkboxOptionsDefaults), this.options.upsellCheckbox);
if (!this.shouldRun()) {
+ this.logger.log("should NOT run");
// If we're not on a Donation Page, get out
return;
}
- this._frequency.onFrequencyChange.subscribe((s) => window.setTimeout(this.fixAmountLabels.bind(this), 100));
- // Run the main function on page load so we can analyze the amounts of the current frequency
- window.setTimeout(this.fixAmountLabels.bind(this), 300);
- }
- // Should we run the script?
- shouldRun() {
- return !!(engrid_ENGrid.getPageType() === "DONATION" &&
- engrid_ENGrid.getOption("AddCurrencySymbol"));
+ this.renderCheckbox();
+ this.updateLiveData();
+ this._frequency.onFrequencyChange.subscribe(() => this.updateLiveData());
+ this._frequency.onFrequencyChange.subscribe(() => this.resetUpsellCheckbox());
+ this._amount.onAmountChange.subscribe(() => this.updateLiveData());
+ this._amount.onAmountChange.subscribe(() => this.resetUpsellCheckbox());
+ this._fees.onFeeChange.subscribe(() => this.updateLiveData());
}
- // Fix Amount Labels
- fixAmountLabels() {
- let amounts = document.querySelectorAll(".en__field--donationAmt label");
- const currencySymbol = engrid_ENGrid.getCurrencySymbol() || "";
- amounts.forEach((element) => {
- const amountText = element.innerText.replace(/,/g, "").replace(/\./g, "");
- if (!isNaN(amountText)) {
- element.innerText = currencySymbol + element.innerText;
- }
- });
+ updateLiveData() {
+ this.liveAmounts();
+ this.liveFrequency();
}
-}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/apple-pay.js
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
- return new (P || (P = Promise))(function (resolve, reject) {
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
-};
-
-/*global window */
-const ApplePaySession = window.ApplePaySession;
-const merchantIdentifier = window.merchantIdentifier;
-const merchantDomainName = window.merchantDomainName;
-const merchantDisplayName = window.merchantDisplayName;
-const merchantSessionIdentifier = window.merchantSessionIdentifier;
-const merchantNonce = window.merchantNonce;
-const merchantEpochTimestamp = window.merchantEpochTimestamp;
-const merchantSignature = window.merchantSignature;
-const merchantCountryCode = window.merchantCountryCode;
-const merchantCurrencyCode = window.merchantCurrencyCode;
-const merchantSupportedNetworks = window.merchantSupportedNetworks;
-const merchantCapabilities = window.merchantCapabilities;
-const merchantTotalLabel = window.merchantTotalLabel;
-class ApplePay {
- constructor() {
- this.applePay = document.querySelector('.en__field__input.en__field__input--radio[value="applepay"]');
- this._amount = DonationAmount.getInstance();
- this._fees = ProcessingFees.getInstance();
- this._form = en_form_EnForm.getInstance();
- this.checkApplePay();
+ resetUpsellCheckbox() {
+ var _a, _b;
+ // Only reset the upsell checkbox if it has been checked
+ if (!this.resetCheckbox)
+ return;
+ this.logger.log("Reset");
+ // Uncheck the upsell checkbox
+ const checkbox = (_a = this.checkboxContainer) === null || _a === void 0 ? void 0 : _a.querySelector("#upsellCheckbox");
+ if (checkbox) {
+ checkbox.checked = false;
+ }
+ // Hide the upsell checkbox
+ (_b = this.checkboxContainer) === null || _b === void 0 ? void 0 : _b.classList.add("recurring-frequency-y-hide");
+ this.oldAmount = 0;
+ this.oldFrequency = "one-time";
+ this.resetCheckbox = false;
}
- checkApplePay() {
- return __awaiter(this, void 0, void 0, function* () {
- const pageform = document.querySelector("form.en__component--page");
- if (!this.applePay || !window.hasOwnProperty("ApplePaySession")) {
- const applePayContainer = document.querySelector(".en__field__item.applepay");
- if (applePayContainer)
- applePayContainer.remove();
- if (engrid_ENGrid.debug)
- console.log("Apple Pay DISABLED");
- return false;
- }
- const promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
- let applePayEnabled = false;
- yield promise.then((canMakePayments) => {
- applePayEnabled = canMakePayments;
- if (canMakePayments) {
- let input = document.createElement("input");
- input.setAttribute("type", "hidden");
- input.setAttribute("name", "PkPaymentToken");
- input.setAttribute("id", "applePayToken");
- pageform.appendChild(input);
- this._form.onSubmit.subscribe(() => this.onPayClicked());
- }
- });
- if (engrid_ENGrid.debug)
- console.log("applePayEnabled", applePayEnabled);
- let applePayWrapper = this.applePay.closest(".en__field__item");
- if (applePayEnabled) {
- // Set Apple Pay Class
- applePayWrapper === null || applePayWrapper === void 0 ? void 0 : applePayWrapper.classList.add("applePayWrapper");
+ renderCheckbox() {
+ if (this.checkboxOptions === false)
+ return;
+ const label = this.checkboxOptions.label
+ .replace("{new-amount}", " ")
+ .replace("{old-amount}", " ")
+ .replace("{old-frequency}", " ");
+ const formBlock = document.createElement("div");
+ formBlock.classList.add("en__component", "en__component--formblock", "recurring-frequency-y-hide", "engrid-upsell-checkbox");
+ if (this.checkboxOptions.cssClass)
+ formBlock.classList.add(this.checkboxOptions.cssClass);
+ formBlock.innerHTML = `
+
+ ${this.options.canClose ? `` : ``}
+
+ + ${title} +
+ ${this.options.otherAmount + ? ` +
+
+ `
+ : ``}
+
+
+
+ + ${this.options.otherLabel} +
+
+
+ Minimum ${this.getAmountTxt(this.options.minAmount)}
+
+ + ${paragraph} +
+ +
+
+
+
+
+
+ ${yes}
+
+
+
+
+
+
+
`;
+ const checkbox = formBlock.querySelector("#upsellCheckbox");
+ if (checkbox)
+ checkbox.addEventListener("change", this.toggleCheck.bind(this));
+ const position = this.checkboxOptions.location.split(" ")[0];
+ // Location is everything after the first space
+ const location = this.checkboxOptions.location
+ .split(" ")
+ .slice(1)
+ .join(" ")
+ .trim();
+ const target = document.querySelector(location);
+ this.checkboxContainer = formBlock;
+ if (target) {
+ if (position === "before") {
+ this.logger.log("rendered before");
+ target.before(formBlock);
}
else {
- // Hide Apple Pay Wrapper
- if (applePayWrapper)
- applePayWrapper.style.display = "none";
+ this.logger.log("rendered after");
+ target.after(formBlock);
}
- return applePayEnabled;
- });
+ }
+ else {
+ this.logger.error("could not render - target not found");
+ }
}
- performValidation(url) {
- return new Promise(function (resolve, reject) {
- var merchantSession = {};
- merchantSession.merchantIdentifier = merchantIdentifier;
- merchantSession.merchantSessionIdentifier = merchantSessionIdentifier;
- merchantSession.nonce = merchantNonce;
- merchantSession.domainName = merchantDomainName;
- merchantSession.epochTimestamp = merchantEpochTimestamp;
- merchantSession.signature = merchantSignature;
- var validationData = "&merchantIdentifier=" +
- merchantIdentifier +
- "&merchantDomain=" +
- merchantDomainName +
- "&displayName=" +
- merchantDisplayName;
- var validationUrl = "/ea-dataservice/rest/applepay/validateurl?url=" + url + validationData;
- var xhr = new XMLHttpRequest();
- xhr.onload = function () {
- var data = JSON.parse(this.responseText);
- if (engrid_ENGrid.debug)
- console.log("Apple Pay Validation", data);
- resolve(data);
- };
- xhr.onerror = reject;
- xhr.open("GET", validationUrl);
- xhr.send();
- });
+ // Should we run the script?
+ shouldRun() {
+ // if it's a first page of a Donation page
+ return engrid_ENGrid.getPageNumber() === 1 && engrid_ENGrid.getPageType() === "DONATION";
}
- log(name, msg) {
- var xhr = new XMLHttpRequest();
- xhr.open("GET", "/ea-dataservice/rest/applepay/log?name=" + name + "&msg=" + msg);
- xhr.send();
+ showCheckbox() {
+ if (this.checkboxContainer)
+ this.checkboxContainer.classList.remove("hide");
}
- sendPaymentToken(token) {
- return new Promise(function (resolve, reject) {
- resolve(true);
- });
+ hideCheckbox() {
+ if (this.checkboxContainer)
+ this.checkboxContainer.classList.add("hide");
}
- onPayClicked() {
- if (!this._form.submit)
+ liveAmounts() {
+ // Only update live data if the current frequency is one-time
+ if (this._frequency.frequency !== "onetime")
return;
- const enFieldPaymentType = document.querySelector("#en__field_transaction_paymenttype");
- const applePayToken = document.getElementById("applePayToken");
- const formClass = this._form;
- // Only work if Payment Type is Apple Pay
- if (enFieldPaymentType.value == "applepay" && applePayToken.value == "") {
- try {
- let donationAmount = this._amount.amount + this._fees.fee;
- var request = {
- supportedNetworks: merchantSupportedNetworks,
- merchantCapabilities: merchantCapabilities,
- countryCode: merchantCountryCode,
- currencyCode: merchantCurrencyCode,
- total: {
- label: merchantTotalLabel,
- amount: donationAmount,
- },
- };
- var session = new ApplePaySession(1, request);
- var thisClass = this;
- session.onvalidatemerchant = function (event) {
- thisClass
- .performValidation(event.validationURL)
- .then(function (merchantSession) {
- if (engrid_ENGrid.debug)
- console.log("Apple Pay merchantSession", merchantSession);
- session.completeMerchantValidation(merchantSession);
- });
- };
- session.onpaymentauthorized = function (event) {
- thisClass
- .sendPaymentToken(event.payment.token)
- .then(function (success) {
- if (engrid_ENGrid.debug)
- console.log("Apple Pay Token", event.payment.token);
- document.getElementById("applePayToken").value = JSON.stringify(event.payment.token);
- formClass.submitForm();
- });
- };
- session.oncancel = function (event) {
- if (engrid_ENGrid.debug)
- console.log("Cancelled", event);
- alert("You cancelled. Sorry it didn't work out.");
- formClass.dispatchError();
- };
- session.begin();
- this._form.submit = false;
- return false;
- }
- catch (e) {
- alert("Developer mistake: '" + e.message + "'");
- formClass.dispatchError();
- }
+ const live_upsell_amount = document.querySelectorAll(".upsell_suggestion");
+ const live_amount = document.querySelectorAll(".upsell_amount");
+ const upsellAmount = this.getUpsellAmount();
+ const suggestedAmount = upsellAmount + this._fees.calculateFees(upsellAmount);
+ if (suggestedAmount > 0) {
+ this.showCheckbox();
}
- this._form.submit = true;
- return true;
+ else {
+ this.hideCheckbox();
+ }
+ live_upsell_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(suggestedAmount)));
+ live_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(this._amount.amount + this._fees.fee)));
}
-}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/a11y.js
-// a11y means accessibility
-// This Component is supposed to be used as a helper for Aria Attributes & Other Accessibility Features
-class A11y {
- constructor() {
- this.addRequired();
- this.addLabel();
- this.addGroupRole();
- this.updateFrequencyLabel();
- const ecardImages = document.querySelectorAll('.en__ecarditems__list img');
- this.setAutoGeneratedAltTags(ecardImages);
- this.manageErrorListAlertRole();
+ liveFrequency() {
+ const live_upsell_frequency = document.querySelectorAll(".upsell_frequency");
+ live_upsell_frequency.forEach((elem) => (elem.innerHTML = this.getFrequencyTxt()));
}
- addGroupRole() {
- // Add role="group" to all EN Radio fields
- const radioFields = document.querySelectorAll(".en__field--radio");
- radioFields.forEach((field) => {
- field.setAttribute("role", "group");
- // Add random ID to the label
- const label = field.querySelector("label");
- if (label) {
- label.setAttribute("id", `en__field__label--${Math.random().toString(36).slice(2, 7)}`);
- field.setAttribute("aria-labelledby", label.id);
+ // Return the Suggested Upsell Amount
+ getUpsellAmount() {
+ const amount = this._amount.amount;
+ let upsellAmount = 0;
+ for (let i = 0; i < this.options.amountRange.length; i++) {
+ let val = this.options.amountRange[i];
+ if (upsellAmount == 0 && amount <= val.max) {
+ upsellAmount = val.suggestion;
+ if (upsellAmount === 0)
+ return 0;
+ if (typeof upsellAmount !== "number") {
+ const suggestionMath = upsellAmount.replace("amount", amount.toFixed(2));
+ upsellAmount = parseFloat(Function('"use strict";return (' + suggestionMath + ")")());
+ }
+ break;
}
- });
- }
- addRequired() {
- const mandatoryFields = document.querySelectorAll(".en__mandatory .en__field__input");
- mandatoryFields.forEach((field) => {
- field.setAttribute("aria-required", "true");
- });
+ }
+ return upsellAmount > this.options.minAmount
+ ? upsellAmount
+ : this.options.minAmount;
}
- addLabel() {
- const otherAmount = document.querySelector(".en__field__input--otheramount");
- if (otherAmount) {
- otherAmount.setAttribute("aria-label", "Enter your custom donation amount");
+ // Proceed to the next page (upsold or not)
+ toggleCheck(e) {
+ var _a, _b;
+ e.preventDefault();
+ if (e.target.checked) {
+ this.logger.success("Upsold");
+ const upsoldAmount = this.getUpsellAmount();
+ const originalAmount = this._amount.amount;
+ this.oldAmount = originalAmount;
+ this.oldFrequency = this._frequency.frequency;
+ // If we're checking the upsell checkbox, remove the class that hides it on different frequencies
+ (_a = this.checkboxContainer) === null || _a === void 0 ? void 0 : _a.classList.remove("recurring-frequency-y-hide");
+ this._frequency.setFrequency("monthly");
+ this._amount.setAmount(upsoldAmount);
+ this._dataLayer.addEndOfGiftProcessEvent("ENGRID_UPSELL_CHECKBOX", {
+ eventValue: true,
+ originalAmount: originalAmount,
+ upsoldAmount: upsoldAmount,
+ frequency: "monthly",
+ });
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_CHECKBOX", true);
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_ORIGINAL_AMOUNT", originalAmount);
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_DONATION_FREQUENCY", "MONTHLY");
+ this.renderConversionField("upsellSuccess", "onetime", originalAmount, "monthly", upsoldAmount, "monthly", upsoldAmount);
+ // Set the resetCheckbox flag to true so it will reset if the user changes the amount or frequency
+ window.setTimeout(() => {
+ this.resetCheckbox = true;
+ }, 500);
+ }
+ else {
+ this.resetCheckbox = false;
+ this.logger.success("Not Upsold");
+ this._amount.setAmount(this.oldAmount);
+ this._frequency.setFrequency(this.oldFrequency);
+ (_b = this.checkboxContainer) === null || _b === void 0 ? void 0 : _b.classList.add("recurring-frequency-y-hide");
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_CHECKBOX", false);
+ this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_DONATION_FREQUENCY", "ONE-TIME");
+ this.renderConversionField("upsellFail", this._frequency.frequency, this._amount.amount, "monthly", this._amount.amount, this._frequency.frequency, this._amount.amount);
}
- // Split selects usually don't have a label, so let's make the first option the label
- const splitSelects = document.querySelectorAll(".en__field__input--splitselect");
- splitSelects.forEach((select) => {
- var _a, _b, _c, _d;
- const firstOption = select.querySelector("option");
- if (firstOption &&
- firstOption.value === "" &&
- !((_b = (_a = firstOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes("select")) &&
- !((_d = (_c = firstOption.textContent) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes("choose"))) {
- select.setAttribute("aria-label", firstOption.textContent || "");
- }
- });
}
- // Update the label for the frequency field based on the selected radio button
- updateFrequencyLabel() {
- const frequencyLabels = document.querySelectorAll('div.en__field__item input[id^="en__field_transaction_recurrfreq"]');
- const frequencyMainLabel = document.querySelector('label[for="en__field_transaction_recurrfreq"]');
- frequencyLabels.forEach((item) => {
- if (item) {
- // Set the label for the checked item on load
- if (item.checked) {
- frequencyMainLabel === null || frequencyMainLabel === void 0 ? void 0 : frequencyMainLabel.setAttribute('for', item.id);
- }
- // Then, detect if it changes with the click event
- item.addEventListener('click', () => {
- let frequencyId = item.id;
- frequencyMainLabel === null || frequencyMainLabel === void 0 ? void 0 : frequencyMainLabel.setAttribute('for', frequencyId);
- });
- }
- });
+ getAmountTxt(amount = 0) {
+ var _a, _b, _c, _d;
+ const symbol = (_a = engrid_ENGrid.getCurrencySymbol()) !== null && _a !== void 0 ? _a : "$";
+ const dec_separator = (_b = engrid_ENGrid.getOption("DecimalSeparator")) !== null && _b !== void 0 ? _b : ".";
+ const thousands_separator = (_c = engrid_ENGrid.getOption("ThousandsSeparator")) !== null && _c !== void 0 ? _c : "";
+ const dec_places = amount % 1 == 0 ? 0 : (_d = engrid_ENGrid.getOption("DecimalPlaces")) !== null && _d !== void 0 ? _d : 2;
+ const amountTxt = engrid_ENGrid.formatNumber(amount, dec_places, dec_separator, thousands_separator);
+ return amount > 0 ? symbol + amountTxt : "";
}
- setAutoGeneratedAltTags(images) {
- images.forEach((img) => {
- var _a;
- // Skip if the alt tag is already set
- if (img.alt)
- return;
- try {
- // Extract the filename from the `src` attribute
- const src = img.src;
- if (!src)
- throw new Error("Image src is null or undefined");
- const url = new URL(src);
- const fileNameWithExtension = url.pathname.split('/').pop();
- if (!fileNameWithExtension)
- throw new Error("No filename found in src");
- // Remove the file extension and replace `-` and `_` with spaces
- let altText = ((_a = fileNameWithExtension.split('.').shift()) === null || _a === void 0 ? void 0 : _a.replace(/[-_]/g, ' ')) || '';
- // Remove dimensions (#x#) and anything that follows
- altText = altText.replace(/\d+x\d+.*$/, '').trim();
- // Wrap in the disclaimer
- altText = `This is an auto-generated alt tag from the filename: ${altText}`;
- // Set the generated alt text on the image
- img.alt = altText;
- }
- catch (error) {
- console.error(`Error processing image: ${img.src}`, error);
- }
- });
+ getFrequencyTxt() {
+ const freqTxt = {
+ onetime: "one-time",
+ monthly: "monthly",
+ annual: "annual",
+ };
+ const frequency = this._frequency.frequency;
+ return frequency in freqTxt ? freqTxt[frequency] : frequency;
}
- manageErrorListAlertRole() {
- const errorList = document.querySelector('ul.en__errorList');
- if (!errorList)
+ renderConversionField(event, // The event that triggered the conversion
+ freq, // The frequency of the donation (onetime, monthly, annual)
+ amt, // The original amount of the donation (before the upsell)
+ sugFreq, // The suggested frequency of the upsell (monthly)
+ sugAmt, // The suggested amount of the upsell
+ subFreq, // The submitted frequency of the upsell (onetime, monthly, annual)
+ subAmt // The submitted amount of the upsell
+ ) {
+ if (this.options.conversionField === "")
return;
- const hasErrorItems = () => Boolean(errorList.querySelector('li'));
- const enableAlert = () => {
- if (!errorList.hasAttribute('role')) {
- errorList.setAttribute('role', 'alert');
- }
- };
- const disableAlert = () => {
- if (errorList.hasAttribute('role')) {
- errorList.removeAttribute('role');
- }
- };
- hasErrorItems() ? enableAlert() : disableAlert();
- new MutationObserver(records => {
- for (const record of records) {
- if (record.type === 'childList') {
- hasErrorItems() ? enableAlert() : disableAlert();
- break;
- }
- }
- }).observe(errorList, { childList: true });
+ const conversionField = document.querySelector("input[name='" + this.options.conversionField + "']") ||
+ engrid_ENGrid.createHiddenInput(this.options.conversionField);
+ if (!conversionField) {
+ this.logger.error("Could not find or create the conversion field");
+ return;
+ }
+ const conversionValue = `event:${event},freq:${freq},amt:${amt},sugFreq:${sugFreq},sugAmt:${sugAmt},subFreq:${subFreq},subAmt:${subAmt}`;
+ conversionField.value = conversionValue;
+ this.logger.log(`Conversion Field ${event}`, conversionValue);
}
}
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/capitalize-fields.js
-// CapitalizeFields is a class that capitalizes the first letter of the fields passed to it.
-// It subscribes to the onSubmit event of the EnForm class and capitalizes the fields on submit.
-
+;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/show-hide-radio-checkboxes.js
-class CapitalizeFields {
- constructor() {
- this._form = en_form_EnForm.getInstance();
- this._form.onSubmit.subscribe(() => this.capitalizeFields("en__field_supporter_firstName", "en__field_supporter_lastName", "en__field_supporter_address1", "en__field_supporter_city"));
+class ShowHideRadioCheckboxes {
+ // Create default data attributes on all fields
+ createDataAttributes() {
+ this.elements.forEach((item) => {
+ if (item instanceof HTMLInputElement) {
+ let inputValue = item.value.replace(/\W/g, "");
+ document
+ .querySelectorAll("." + this.classes + inputValue)
+ .forEach((el) => {
+ // Consider toggling "hide" class so these fields can be displayed when in a debug state
+ if (el instanceof HTMLElement) {
+ const fields = el.querySelectorAll("input[type='text'], input[type='number'], input[type='email'], select, textarea");
+ if (fields.length > 0) {
+ fields.forEach((field) => {
+ if (field instanceof HTMLInputElement ||
+ field instanceof HTMLSelectElement) {
+ if (!field.hasAttribute("data-original-value")) {
+ field.setAttribute("data-original-value", field.value);
+ }
+ if (!field.hasAttribute("data-value")) {
+ field.setAttribute("data-value", field.value);
+ }
+ }
+ });
+ }
+ }
+ });
+ }
+ });
}
- capitalizeFields(...fields) {
- fields.forEach((f) => this.capitalize(f));
+ // Hide All Divs
+ hideAll() {
+ this.elements.forEach((item, index) => {
+ if (item instanceof HTMLInputElement)
+ this.hide(item);
+ });
}
- capitalize(f) {
- let field = document.getElementById(f);
- if (field) {
- field.value = field.value.replace(/\w\S*/g, (w) => w.replace(/^\w/, (c) => c.toUpperCase()));
- if (engrid_ENGrid.debug)
- console.log("Capitalized", field.value);
- }
- return true;
+ // Hide Single Element Div
+ hide(item) {
+ let inputValue = item.value.replace(/\W/g, "");
+ document.querySelectorAll("." + this.classes + inputValue).forEach((el) => {
+ // Consider toggling "hide" class so these fields can be displayed when in a debug state
+ if (el instanceof HTMLElement) {
+ this.toggleValue(el, "hide");
+ el.style.display = "none";
+ this.logger.log("Hiding", el);
+ const input = el.querySelector("input");
+ if (input instanceof HTMLInputElement) {
+ input.setAttribute("aria-required", "false");
+ this.logger.log("aria-required set to FALSE", input);
+ }
+ }
+ });
}
-}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/auto-year.js
-// This class changes the Credit Card Expiration Year Field Options to
-// include the current year and the next 19 years.
-class AutoYear {
- constructor() {
- this.yearField = document.querySelector("select[name='transaction.ccexpire']:not(#en__field_transaction_ccexpire)");
- this.years = 20;
- this.yearLength = 2;
- if (this.yearField) {
- this.clearFieldOptions();
- for (let i = 0; i < this.years; i++) {
- const year = new Date().getFullYear() + i;
- const newOption = document.createElement("option");
- const optionText = document.createTextNode(year.toString());
- newOption.appendChild(optionText);
- newOption.value =
- this.yearLength == 2 ? year.toString().substr(-2) : year.toString();
- this.yearField.appendChild(newOption);
+ // Show Single Element Div
+ show(item) {
+ let inputValue = item.value.replace(/\W/g, "");
+ document.querySelectorAll("." + this.classes + inputValue).forEach((el) => {
+ // Consider toggling "hide" class so these fields can be displayed when in a debug state
+ if (el instanceof HTMLElement) {
+ this.toggleValue(el, "show");
+ el.style.display = "";
+ this.logger.log("Showing", el);
+ const input = el.querySelector("input");
+ if (input instanceof HTMLInputElement) {
+ input.setAttribute("aria-required", "true");
+ this.logger.log("aria-required set to TRUE", input);
+ }
}
+ });
+ if (item.type == "checkbox" && !item.checked) {
+ this.hide(item);
}
}
- clearFieldOptions() {
- if (this.yearField) {
- this.yearLength =
- this.yearField.options[this.yearField.options.length - 1].value.length;
- [...this.yearField.options].forEach((option) => {
+ // Take the field values and add to a data attribute on the field
+ toggleValue(item, type) {
+ if (type == "hide" && !engrid_ENGrid.isVisible(item))
+ return;
+ this.logger.log(`toggleValue: ${type}`);
+ const fields = item.querySelectorAll("input[type='text'], input[type='number'], input[type='email'], select, textarea");
+ if (fields.length > 0) {
+ fields.forEach((field) => {
var _a;
- if (option.value !== "" && !isNaN(Number(option.value))) {
- // @ts-ignore
- const index = [...this.yearField.options].findIndex((i) => i.value === option.value);
- (_a = this.yearField) === null || _a === void 0 ? void 0 : _a.remove(index);
+ if (field instanceof HTMLInputElement ||
+ field instanceof HTMLSelectElement) {
+ if (field.name) {
+ const fieldValue = engrid_ENGrid.getFieldValue(field.name);
+ const originalValue = field.getAttribute("data-original-value");
+ const dataValue = (_a = field.getAttribute("data-value")) !== null && _a !== void 0 ? _a : "";
+ if (type === "hide") {
+ field.setAttribute("data-value", fieldValue);
+ engrid_ENGrid.setFieldValue(field.name, originalValue);
+ }
+ else {
+ engrid_ENGrid.setFieldValue(field.name, dataValue);
+ }
+ }
}
});
}
}
-}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/autocomplete.js
-// This class adds the autocomplete attribute to
-// the most common input elements
-
-class Autocomplete {
- constructor() {
- this.logger = new logger_EngridLogger("Autocomplete", "#330033", "#f0f0f0", "π");
- this.autoCompleteField('[name="supporter.firstName"]', "given-name");
- this.autoCompleteField('[name="supporter.lastName"]', "family-name");
- this.autoCompleteField("#en__field_transaction_ccexpire", "cc-exp-month");
- this.autoCompleteField('[name="transaction.ccexpire"]:not(#en__field_transaction_ccexpire)', "cc-exp-year");
- this.autoCompleteField('[name="supporter.emailAddress"]', "email");
- this.autoCompleteField('[name="supporter.phoneNumber"]', "tel");
- this.autoCompleteField('[name="supporter.country"]', "country");
- this.autoCompleteField('[name="supporter.address1"]', "address-line1");
- this.autoCompleteField('[name="supporter.address2"]', "address-line2");
- this.autoCompleteField('[name="supporter.city"]', "address-level2");
- this.autoCompleteField('[name="supporter.region"]', "address-level1");
- this.autoCompleteField('[name="supporter.postcode"]', "postal-code");
- // Ignore Autocomplete on the Recipient Email Field & Address ("none" is intentional because "off" doesn't work)
- this.autoCompleteField('[name="transaction.honname"]', "none");
- this.autoCompleteField('[name="transaction.infemail"]', "none");
- this.autoCompleteField('[name="transaction.infname"]', "none");
- this.autoCompleteField('[name="transaction.infadd1"]', "none");
- this.autoCompleteField('[name="transaction.infadd2"]', "none");
- this.autoCompleteField('[name="transaction.infcity"]', "none");
- this.autoCompleteField('[name="transaction.infpostcd"]', "none");
- }
- autoCompleteField(querySelector, autoCompleteValue) {
- let field = document.querySelector(querySelector);
- if (field) {
- field.autocomplete = autoCompleteValue;
- return true;
- }
- if (autoCompleteValue !== "none")
- this.logger.log("Field Not Found", querySelector);
- return false;
- }
-}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/ecard.js
-
-class Ecard {
- constructor() {
- this._form = en_form_EnForm.getInstance();
- this.logger = new logger_EngridLogger("Ecard", "red", "#f5f5f5", "πͺͺ");
- if (!this.shouldRun())
- return;
- this._form.onValidate.subscribe(() => this.checkRecipientFields());
- const schedule = engrid_ENGrid.getUrlParameter("engrid_ecard.schedule");
- const scheduleField = engrid_ENGrid.getField("ecard.schedule");
- const name = engrid_ENGrid.getUrlParameter("engrid_ecard.name");
- const nameField = document.querySelector(".en__ecardrecipients__name input");
- const email = engrid_ENGrid.getUrlParameter("engrid_ecard.email");
- const emailField = document.querySelector(".en__ecardrecipients__email input");
- if (schedule && scheduleField) {
- // Check if chedule date is in the past
- const scheduleDate = new Date(schedule.toString());
- const today = new Date();
- if (scheduleDate.setHours(0, 0, 0, 0) < today.setHours(0, 0, 0, 0)) {
- // If it is, set the schedule to today
- scheduleField.value = engrid_ENGrid.formatDate(today, "YYYY-MM-DD");
- }
- else {
- // Otherwise, set the schedule to the date provided
- scheduleField.value = schedule.toString();
- }
- this.logger.log("Schedule set to " + scheduleField.value);
- }
- if (name && nameField) {
- nameField.value = name.toString();
- this.logger.log("Name set to " + nameField.value);
- }
- if (email && emailField) {
- emailField.value = email.toString();
- this.logger.log("Email set to " + emailField.value);
- }
- // Replace the Future Delivery Label with a H2
- const futureDeliveryLabel = document.querySelector(".en__ecardrecipients__futureDelivery label");
- if (futureDeliveryLabel) {
- const futureDeliveryH2 = document.createElement("h2");
- futureDeliveryH2.innerText = futureDeliveryLabel.innerText;
- futureDeliveryLabel.replaceWith(futureDeliveryH2);
- }
- if (emailField) {
- emailField.setAttribute("type", "email");
- emailField.setAttribute("autocomplete", "off");
+ getSessionState() {
+ var _a;
+ try {
+ const plainState = (_a = window.sessionStorage.getItem(`engrid_ShowHideRadioCheckboxesState`)) !== null && _a !== void 0 ? _a : "";
+ return JSON.parse(plainState);
}
- }
- shouldRun() {
- return engrid_ENGrid.getPageType() === "ECARD";
- }
- checkRecipientFields() {
- const addRecipientButton = document.querySelector(".en__ecarditems__addrecipient");
- // If we find the "+" button and there's no hidden recipient field, click on the button
- if (addRecipientButton &&
- !document.querySelector(".ecardrecipient__email")) {
- addRecipientButton.click();
+ catch (err) {
+ return [];
}
- return true;
}
-}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/click-to-expand.js
-// This class is used to expand content when a user clicks on a div with the class "click-to-expand".
-// The content is shortened by default and will expand when clicked.
-
-// Works when the user has adds ".click-to-expand" as a class to any field
-class ClickToExpand {
- constructor() {
- this.clickToExpandWrapper = document.querySelectorAll("div.click-to-expand");
- if (this.clickToExpandWrapper.length) {
- this.clickToExpandWrapper.forEach((element) => {
- const content = element.innerHTML;
- const wrapper_html = '";
- element.innerHTML = wrapper_html;
- element.addEventListener("click", (event) => {
- if (event) {
- if (engrid_ENGrid.debug)
- console.log("A click-to-expand div was clicked");
- element.classList.add("expanded");
+ storeSessionState() {
+ const state = this.getSessionState();
+ [...this.elements].forEach((element) => {
+ var _a, _b;
+ if (!(element instanceof HTMLInputElement))
+ return;
+ if (element.type == "radio" && element.checked) {
+ //remove other items that have the same "class" property
+ state.forEach((item, index) => {
+ if (item.class == this.classes) {
+ state.splice(index, 1);
}
});
- element.addEventListener("keydown", (event) => {
- if (event.key === "Enter") {
- if (engrid_ENGrid.debug)
- console.log("A click-to-expand div had the 'Enter' key pressed on it");
- element.classList.add("expanded");
- }
- else if (event.key === " ") {
- if (engrid_ENGrid.debug)
- console.log("A click-to-expand div had the 'Spacebar' key pressed on it");
- element.classList.add("expanded");
- event.preventDefault(); // Prevents the page from scrolling
- event.stopPropagation(); // Prevent a console error generated by LastPass https://github.com/KillerCodeMonkey/ngx-quill/issues/351#issuecomment-476017960
+ //add the current item, with the currently active value
+ state.push({
+ page: engrid_ENGrid.getPageID(),
+ class: this.classes,
+ value: element.value,
+ });
+ this.logger.log("storing radio state", state[state.length - 1]);
+ }
+ if (element.type == "checkbox") {
+ //remove other items that have the same "class" property
+ state.forEach((item, index) => {
+ if (item.class == this.classes) {
+ state.splice(index, 1);
}
});
+ //add the current item, with the first checked value or "N" if none are checked
+ state.push({
+ page: engrid_ENGrid.getPageID(),
+ class: this.classes,
+ value: (_b = (_a = [...this.elements].find((el) => el.checked)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "N", // First checked value or "N" if none
+ });
+ this.logger.log("storing checkbox state", state[state.length - 1]);
+ }
+ });
+ window.sessionStorage.setItem(`engrid_ShowHideRadioCheckboxesState`, JSON.stringify(state));
+ }
+ constructor(elements, classes) {
+ this.logger = new logger_EngridLogger("ShowHideRadioCheckboxes", "black", "lightblue", "π");
+ this.elements = document.getElementsByName(elements);
+ this.classes = classes;
+ this.createDataAttributes();
+ this.hideAll();
+ this.storeSessionState();
+ for (let i = 0; i < this.elements.length; i++) {
+ let element = this.elements[i];
+ if (element.checked) {
+ this.show(element);
+ }
+ element.addEventListener("change", (e) => {
+ this.hideAll();
+ this.show(element);
+ this.storeSessionState();
});
}
}
}
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/advocacy.js
-// Component to handle advocacy features
-// 1 - Adds EN Polyfill to support "label" clicking on Advocacy Recipient "labels"
+;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/cookie.js
+/**
+Example:
+import * as cookie from "./cookie";
-class Advocacy {
- constructor() {
- this.logger = new logger_EngridLogger("Advocacy", "#232323", "#f7b500", "π¨ββοΈ");
- if (!this.shoudRun())
- return;
- this.setClickableLabels();
- }
- shoudRun() {
- return ["ADVOCACY", "EMAILTOTARGET"].includes(engrid_ENGrid.getPageType());
- }
- setClickableLabels() {
- const contactItems = document.querySelectorAll(".en__contactDetails__rows");
- if (!contactItems)
- return;
- contactItems.forEach((contact) => {
- contact.addEventListener("click", (e) => {
- this.toggleCheckbox(contact);
- });
- });
+cookie.set('name', 'value');
+cookie.get('name'); // => 'value'
+cookie.remove('name');
+cookie.set('name', 'value', { expires: 7 }); // 7 Days cookie
+cookie.set('name', 'value', { expires: 7, path: '' }); // Set Path
+cookie.remove('name', { path: '' });
+ */
+function stringifyAttribute(name, value) {
+ if (!value) {
+ return "";
}
- toggleCheckbox(contact) {
- const wrapper = contact.closest(".en__contactDetails");
- if (!wrapper)
- return;
- const checkbox = wrapper.querySelector("input[type='checkbox']");
- if (!checkbox)
- return;
- this.logger.log("toggleCheckbox", checkbox.checked);
- checkbox.checked = !checkbox.checked;
+ let stringified = "; " + name;
+ if (value === true) {
+ return stringified; // boolean attributes shouldn't have a value
}
+ return stringified + "=" + value;
}
-
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/data-attributes.js
-// Component that adds data attributes to the Body
-
-class DataAttributes {
- constructor() {
- this.logger = new logger_EngridLogger("Data Attribute Changed", "#FFFFFF", "#4d9068", "π οΈ");
- this._country = Country.getInstance();
- this._frequency = DonationFrequency.getInstance();
- this.setDataAttributes();
+function stringifyAttributes(attributes) {
+ if (typeof attributes.expires === "number") {
+ let expires = new Date();
+ expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e5);
+ attributes.expires = expires;
}
- setDataAttributes() {
- // Apple Pay Availability
- if (window.hasOwnProperty("ApplePaySession")) {
- engrid_ENGrid.setBodyData("apple-pay-available", "true");
- }
- else {
- engrid_ENGrid.setBodyData("apple-pay-available", "false");
- }
- // Add the Page Type as a Data Attribute on the Body Tag
- if (engrid_ENGrid.checkNested(window, "pageJson", "pageType")) {
- engrid_ENGrid.setBodyData("page-type", window.pageJson.pageType);
- }
- // Add the currency code as a Data Attribute on the Body Tag
- engrid_ENGrid.setBodyData("currency-code", engrid_ENGrid.getCurrencyCode());
- // Add a body banner data attribute if the banner contains no image or video
- if (!document.querySelector(".body-banner img, .body-banner video")) {
- engrid_ENGrid.setBodyData("body-banner", "empty");
- }
- // Add a page-alert data attribute if it is empty
- if (!document.querySelector(".page-alert *")) {
- engrid_ENGrid.setBodyData("no-page-alert", "");
- }
- // Add a content-header data attribute if it is empty
- if (!document.querySelector(".content-header *")) {
- engrid_ENGrid.setBodyData("no-content-header", "");
- }
- // Add a body-headerOutside data attribute if it is empty
- if (!document.querySelector(".body-headerOutside *")) {
- engrid_ENGrid.setBodyData("no-body-headerOutside", "");
- }
- // Add a body-header data attribute if it is empty
- if (!document.querySelector(".body-header *")) {
- engrid_ENGrid.setBodyData("no-body-header", "");
- }
- // Add a body-title data attribute if it is empty
- if (!document.querySelector(".body-title *")) {
- engrid_ENGrid.setBodyData("no-body-title", "");
- }
- // Add a body-banner data attribute if it is empty
- if (!document.querySelector(".body-banner *")) {
- engrid_ENGrid.setBodyData("no-body-banner", "");
- }
- // Add a body-bannerOverlay data attribute if it is empty
- if (!document.querySelector(".body-bannerOverlay *")) {
- engrid_ENGrid.setBodyData("no-body-bannerOverlay", "");
- }
- // Add a body-top data attribute if it is empty
- if (!document.querySelector(".body-top *")) {
- engrid_ENGrid.setBodyData("no-body-top", "");
- }
- // Add a body-main data attribute if it is empty
- if (!document.querySelector(".body-main *")) {
- engrid_ENGrid.setBodyData("no-body-main", "");
- }
- // Add a body-bottom data attribute if it is empty
- if (!document.querySelector(".body-bottom *")) {
- engrid_ENGrid.setBodyData("no-body-bottom", "");
- }
- // Add a body-footer data attribute if it is empty
- if (!document.querySelector(".body-footer *")) {
- engrid_ENGrid.setBodyData("no-body-footer", "");
- }
- // Add a body-footerOutside data attribute if it is empty
- if (!document.querySelector(".body-footerOutside *")) {
- engrid_ENGrid.setBodyData("no-body-footerOutside", "");
- }
- // Add a content-footerSpacer data attribute if it is empty
- if (!document.querySelector(".content-footerSpacer *")) {
- engrid_ENGrid.setBodyData("no-content-footerSpacer", "");
- }
- // Add a content-preFooter data attribute if it is empty
- if (!document.querySelector(".content-preFooter *")) {
- engrid_ENGrid.setBodyData("no-content-preFooter", "");
- }
- // Add a content-footer data attribute if it is empty
- if (!document.querySelector(".content-footer *")) {
- engrid_ENGrid.setBodyData("no-content-footer", "");
- }
- // Add a page-backgroundImage banner data attribute if the page background image contains no image or video
- if (!document.querySelector(".page-backgroundImage img, .page-backgroundImage video")) {
- engrid_ENGrid.setBodyData("no-page-backgroundImage", "");
- }
- // Add a page-backgroundImageOverlay data attribute if it is empty
- if (!document.querySelector(".page-backgroundImageOverlay *")) {
- engrid_ENGrid.setBodyData("no-page-backgroundImageOverlay", "");
- }
- // Add a page-customCode data attribute if it is empty
- if (!document.querySelector(".page-customCode *")) {
- engrid_ENGrid.setBodyData("no-page-customCode", "");
- }
- // Add a country data attribute
- if (this._country.country) {
- engrid_ENGrid.setBodyData("country", this._country.country);
- this._country.onCountryChange.subscribe((country) => {
- engrid_ENGrid.setBodyData("country", country);
- });
+ return (stringifyAttribute("Expires", attributes.expires ? attributes.expires.toUTCString() : "") +
+ stringifyAttribute("Domain", attributes.domain) +
+ stringifyAttribute("Path", attributes.path) +
+ stringifyAttribute("Secure", attributes.secure) +
+ stringifyAttribute("SameSite", attributes.sameSite));
+}
+function encode(name, value, attributes) {
+ return (encodeURIComponent(name)
+ .replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent) // allowed special characters
+ .replace(/\(/g, "%28")
+ .replace(/\)/g, "%29") + // replace opening and closing parens
+ "=" +
+ encodeURIComponent(value)
+ // allowed special characters
+ .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent) +
+ stringifyAttributes(attributes));
+}
+function parse(cookieString) {
+ let result = {};
+ let cookies = cookieString ? cookieString.split("; ") : [];
+ let rdecode = /(%[\dA-F]{2})+/gi;
+ for (let i = 0; i < cookies.length; i++) {
+ let parts = cookies[i].split("=");
+ let cookie = parts.slice(1).join("=");
+ if (cookie.charAt(0) === '"') {
+ cookie = cookie.slice(1, -1);
}
- const otherAmountDiv = document.querySelector(".en__field--donationAmt .en__field__item--other");
- if (otherAmountDiv) {
- otherAmountDiv.setAttribute("data-currency-symbol", engrid_ENGrid.getCurrencySymbol());
+ try {
+ let name = parts[0].replace(rdecode, decodeURIComponent);
+ result[name] = cookie.replace(rdecode, decodeURIComponent);
}
- // Add a payment type data attribute
- const paymentTypeSelect = engrid_ENGrid.getField("transaction.paymenttype");
- if (paymentTypeSelect) {
- engrid_ENGrid.setBodyData("payment-type", paymentTypeSelect.value);
- paymentTypeSelect.addEventListener("change", () => {
- engrid_ENGrid.setBodyData("payment-type", paymentTypeSelect.value);
- });
+ catch (e) {
+ // ignore cookies with invalid name/value encoding
}
- // Footer in Viewport Check
- const contentFooter = document.querySelector(".content-footer");
- if (contentFooter && engrid_ENGrid.isInViewport(contentFooter)) {
- engrid_ENGrid.setBodyData("footer-above-fold", "");
+ }
+ return result;
+}
+function getAll() {
+ return parse(document.cookie);
+}
+function get(name) {
+ return getAll()[name];
+}
+function set(name, value, attributes) {
+ document.cookie = encode(name, value, Object.assign({ path: "/" }, attributes));
+}
+function remove(name, attributes) {
+ set(name, "", Object.assign(Object.assign({}, attributes), { expires: -1 }));
+}
+
+;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/translate-fields.js
+// Component to translate fields based on the country selected
+// It will also adapt the state field to the country selected
+
+
+class TranslateFields {
+ constructor() {
+ this.countryToStateFields = {
+ "supporter.country": "supporter.region",
+ "transaction.shipcountry": "transaction.shipregion",
+ "supporter.billingCountry": "supporter.billingRegion",
+ "transaction.infcountry": "transaction.infreg",
+ };
+ this.countriesSelect = document.querySelectorAll('select[name="supporter.country"], select[name="transaction.shipcountry"], select[name="supporter.billingCountry"], select[name="transaction.infcountry"]');
+ let options = "EngridTranslate" in window ? window.EngridTranslate : {};
+ this.options = TranslateOptionsDefaults;
+ // Don't run this for US-only forms.
+ if (document.querySelector(".en__component--formblock.us-only-form .en__field--country")) {
+ return;
}
- else {
- engrid_ENGrid.setBodyData("footer-below-fold", "");
+ if (options) {
+ for (let key in options) {
+ this.options[key] = this.options[key]
+ ? [...this.options[key], ...options[key]]
+ : options[key];
+ }
}
- // Add demo data attribute
- if (engrid_ENGrid.demo)
- engrid_ENGrid.setBodyData("demo", "");
- // Add data-first-page and data-last-page
- if (engrid_ENGrid.getPageNumber() === 1) {
- engrid_ENGrid.setBodyData("first-page", "");
+ //Storing these values on load so we can set them back after the translation/swap.
+ let countryAndStateValuesOnLoad = {};
+ if (this.countriesSelect && this.countriesSelect.length > 0) {
+ this.countriesSelect.forEach((select) => {
+ select.addEventListener("change", this.translateFields.bind(this, select.name));
+ if (select.value) {
+ countryAndStateValuesOnLoad[select.name] = select.value;
+ }
+ const stateField = document.querySelector(`select[name="${this.countryToStateFields[select.name]}"]`);
+ if (stateField) {
+ stateField.addEventListener("change", this.rememberState.bind(this, select.name));
+ if (stateField.value) {
+ countryAndStateValuesOnLoad[stateField.name] = stateField.value;
+ }
+ }
+ });
+ this.translateFields("supporter.country");
+ //dont set these back if submission failed. EN / cookie will handle it.
+ const submissionFailed = !!(engrid_ENGrid.checkNested(window.EngagingNetworks, "require", "_defined", "enjs", "checkSubmissionFailed") &&
+ window.EngagingNetworks.require._defined.enjs.checkSubmissionFailed());
+ if (!submissionFailed) {
+ for (let field in countryAndStateValuesOnLoad) {
+ engrid_ENGrid.setFieldValue(field, countryAndStateValuesOnLoad[field], false);
+ }
+ }
}
- if (engrid_ENGrid.getPageNumber() === engrid_ENGrid.getPageCount()) {
- engrid_ENGrid.setBodyData("last-page", "");
+ }
+ translateFields(countryName = "supporter.country") {
+ this.resetTranslatedFields();
+ const countryValue = engrid_ENGrid.getFieldValue(countryName);
+ // Translate the State Field
+ this.setStateField(countryValue, this.countryToStateFields[countryName]);
+ if (countryName === "supporter.country") {
+ if (countryValue in this.options) {
+ this.options[countryValue].forEach((field) => {
+ // console.log(field);
+ this.translateField(field.field, field.translation);
+ });
+ }
+ // Translate the "To:"
+ const recipient_block = document.querySelectorAll(".recipient-block");
+ if (!!recipient_block.length) {
+ switch (countryValue) {
+ case "FR":
+ case "FRA":
+ case "France":
+ recipient_block.forEach((elem) => (elem.innerHTML = "Γ:"));
+ break;
+ case "DE":
+ case "DEU":
+ case "Germany":
+ recipient_block.forEach((elem) => (elem.innerHTML = "Zu:"));
+ break;
+ case "NL":
+ case "NLD":
+ case "Netherlands":
+ recipient_block.forEach((elem) => (elem.innerHTML = "Aan:"));
+ break;
+ }
+ }
}
- // "Temporary solutions are forever, you know..."
- // - Fernando Santos
- // "I know, but what if we just..."
- // - Bryan Casler
- // Add data attribute if browser does not support :has selector
- if (!CSS.supports("selector(:has(*))")) {
- engrid_ENGrid.setBodyData("css-has-selector", "false");
+ }
+ translateField(name, translation) {
+ const field = document.querySelector(`[name="${name}"]`);
+ if (field) {
+ const fieldWrapper = field.closest(".en__field");
+ if (fieldWrapper) {
+ const fieldLabel = fieldWrapper.querySelector(".en__field__label");
+ // Check if there's the simple country select class
+ const simplecountriesSelect = fieldLabel.querySelector(".engrid-simple-country");
+ let simplecountriesSelectClone = simplecountriesSelect
+ ? simplecountriesSelect.cloneNode(true)
+ : null;
+ if (field instanceof HTMLInputElement && field.placeholder != "") {
+ if (!fieldLabel || fieldLabel.innerHTML == field.placeholder) {
+ field.dataset.original = field.placeholder;
+ field.placeholder = translation;
+ }
+ }
+ if (fieldLabel) {
+ fieldLabel.dataset.original = fieldLabel.innerHTML;
+ fieldLabel.innerHTML = translation;
+ if (simplecountriesSelectClone) {
+ fieldLabel.appendChild(simplecountriesSelectClone);
+ }
+ }
+ }
}
- if (engrid_ENGrid.getPageType() === "DONATION") {
- this.addFrequencyDataAttribute();
- this.addGiftAmountDataAttribute();
+ }
+ resetTranslatedFields() {
+ const fields = document.querySelectorAll("[data-original]");
+ fields.forEach((field) => {
+ if (field instanceof HTMLInputElement && field.dataset.original) {
+ field.placeholder = field.dataset.original;
+ }
+ else {
+ // Check if there's the simple country select class
+ const simplecountriesSelect = field.querySelector(".engrid-simple-country");
+ let simplecountriesSelectClone = simplecountriesSelect
+ ? simplecountriesSelect.cloneNode(true)
+ : null;
+ field.innerHTML = field.dataset.original;
+ if (simplecountriesSelectClone) {
+ field.appendChild(simplecountriesSelectClone);
+ }
+ }
+ field.removeAttribute("data-original");
+ });
+ }
+ setStateField(country, state) {
+ switch (country) {
+ case "ES":
+ case "ESP":
+ case "Spain":
+ this.setStateValues(state, "Provincia", null);
+ break;
+ case "BR":
+ case "BRA":
+ case "Brazil":
+ this.setStateValues(state, "Estado", null);
+ break;
+ case "FR":
+ case "FRA":
+ case "France":
+ this.setStateValues(state, "RΓ©gion", null);
+ break;
+ case "GB":
+ case "GBR":
+ case "United Kingdom":
+ this.setStateValues(state, "State/Region", null);
+ break;
+ case "DE":
+ case "DEU":
+ case "Germany":
+ this.setStateValues(state, "Bundesland", null);
+ break;
+ case "NL":
+ case "NLD":
+ case "Netherlands":
+ this.setStateValues(state, "Provincie", null);
+ break;
+ case "AU":
+ case "AUS":
+ this.setStateValues(state, "Province / State", [
+ { label: "Select", value: "" },
+ { label: "New South Wales", value: "NSW" },
+ { label: "Victoria", value: "VIC" },
+ { label: "Queensland", value: "QLD" },
+ { label: "South Australia", value: "SA" },
+ { label: "Western Australia", value: "WA" },
+ { label: "Tasmania", value: "TAS" },
+ { label: "Northern Territory", value: "NT" },
+ { label: "Australian Capital Territory", value: "ACT" },
+ ]);
+ break;
+ case "Australia":
+ this.setStateValues(state, "Province / State", [
+ { label: "Select", value: "" },
+ { label: "New South Wales", value: "New South Wales" },
+ { label: "Victoria", value: "Victoria" },
+ { label: "Queensland", value: "Queensland" },
+ { label: "South Australia", value: "South Australia" },
+ { label: "Western Australia", value: "Western Australia" },
+ { label: "Tasmania", value: "Tasmania" },
+ { label: "Northern Territory", value: "Northern Territory" },
+ {
+ label: "Australian Capital Territory",
+ value: "Australian Capital Territory",
+ },
+ ]);
+ break;
+ case "US":
+ case "USA":
+ this.setStateValues(state, "State", [
+ { label: "Select State", value: "" },
+ { label: "Alabama", value: "AL" },
+ { label: "Alaska", value: "AK" },
+ { label: "Arizona", value: "AZ" },
+ { label: "Arkansas", value: "AR" },
+ { label: "California", value: "CA" },
+ { label: "Colorado", value: "CO" },
+ { label: "Connecticut", value: "CT" },
+ { label: "Delaware", value: "DE" },
+ { label: "District of Columbia", value: "DC" },
+ { label: "Florida", value: "FL" },
+ { label: "Georgia", value: "GA" },
+ { label: "Hawaii", value: "HI" },
+ { label: "Idaho", value: "ID" },
+ { label: "Illinois", value: "IL" },
+ { label: "Indiana", value: "IN" },
+ { label: "Iowa", value: "IA" },
+ { label: "Kansas", value: "KS" },
+ { label: "Kentucky", value: "KY" },
+ { label: "Louisiana", value: "LA" },
+ { label: "Maine", value: "ME" },
+ { label: "Maryland", value: "MD" },
+ { label: "Massachusetts", value: "MA" },
+ { label: "Michigan", value: "MI" },
+ { label: "Minnesota", value: "MN" },
+ { label: "Mississippi", value: "MS" },
+ { label: "Missouri", value: "MO" },
+ { label: "Montana", value: "MT" },
+ { label: "Nebraska", value: "NE" },
+ { label: "Nevada", value: "NV" },
+ { label: "New Hampshire", value: "NH" },
+ { label: "New Jersey", value: "NJ" },
+ { label: "New Mexico", value: "NM" },
+ { label: "New York", value: "NY" },
+ { label: "North Carolina", value: "NC" },
+ { label: "North Dakota", value: "ND" },
+ { label: "Ohio", value: "OH" },
+ { label: "Oklahoma", value: "OK" },
+ { label: "Oregon", value: "OR" },
+ { label: "Pennsylvania", value: "PA" },
+ { label: "Rhode Island", value: "RI" },
+ { label: "South Carolina", value: "SC" },
+ { label: "South Dakota", value: "SD" },
+ { label: "Tennessee", value: "TN" },
+ { label: "Texas", value: "TX" },
+ { label: "Utah", value: "UT" },
+ { label: "Vermont", value: "VT" },
+ { label: "Virginia", value: "VA" },
+ { label: "Washington", value: "WA" },
+ { label: "West Virginia", value: "WV" },
+ { label: "Wisconsin", value: "WI" },
+ { label: "Wyoming", value: "WY" },
+ {
+ label: "── US Territories ──",
+ value: "",
+ disabled: true,
+ },
+ { label: "American Samoa", value: "AS" },
+ { label: "Guam", value: "GU" },
+ { label: "Northern Mariana Islands", value: "MP" },
+ { label: "Puerto Rico", value: "PR" },
+ { label: "US Minor Outlying Islands", value: "UM" },
+ { label: "Virgin Islands", value: "VI" },
+ {
+ label: "── Armed Forces ──",
+ value: "",
+ disabled: true,
+ },
+ { label: "Armed Forces Americas", value: "AA" },
+ { label: "Armed Forces Africa", value: "AE" },
+ { label: "Armed Forces Canada", value: "AE" },
+ { label: "Armed Forces Europe", value: "AE" },
+ { label: "Armed Forces Middle East", value: "AE" },
+ { label: "Armed Forces Pacific", value: "AP" },
+ ]);
+ break;
+ case "United States":
+ this.setStateValues(state, "State", [
+ { label: "Select State", value: "" },
+ { label: "Alabama", value: "Alabama" },
+ { label: "Alaska", value: "Alaska" },
+ { label: "Arizona", value: "Arizona" },
+ { label: "Arkansas", value: "Arkansas" },
+ { label: "California", value: "California" },
+ { label: "Colorado", value: "Colorado" },
+ { label: "Connecticut", value: "Connecticut" },
+ { label: "Delaware", value: "Delaware" },
+ { label: "District of Columbia", value: "District of Columbia" },
+ { label: "Florida", value: "Florida" },
+ { label: "Georgia", value: "Georgia" },
+ { label: "Hawaii", value: "Hawaii" },
+ { label: "Idaho", value: "Idaho" },
+ { label: "Illinois", value: "Illinois" },
+ { label: "Indiana", value: "Indiana" },
+ { label: "Iowa", value: "Iowa" },
+ { label: "Kansas", value: "Kansas" },
+ { label: "Kentucky", value: "Kentucky" },
+ { label: "Louisiana", value: "Louisiana" },
+ { label: "Maine", value: "Maine" },
+ { label: "Maryland", value: "Maryland" },
+ { label: "Massachusetts", value: "Massachusetts" },
+ { label: "Michigan", value: "Michigan" },
+ { label: "Minnesota", value: "Minnesota" },
+ { label: "Mississippi", value: "Mississippi" },
+ { label: "Missouri", value: "Missouri" },
+ { label: "Montana", value: "Montana" },
+ { label: "Nebraska", value: "Nebraska" },
+ { label: "Nevada", value: "Nevada" },
+ { label: "New Hampshire", value: "New Hampshire" },
+ { label: "New Jersey", value: "New Jersey" },
+ { label: "New Mexico", value: "New Mexico" },
+ { label: "New York", value: "New York" },
+ { label: "North Carolina", value: "North Carolina" },
+ { label: "North Dakota", value: "North Dakota" },
+ { label: "Ohio", value: "Ohio" },
+ { label: "Oklahoma", value: "Oklahoma" },
+ { label: "Oregon", value: "Oregon" },
+ { label: "Pennsylvania", value: "Pennsylvania" },
+ { label: "Rhode Island", value: "Rhode Island" },
+ { label: "South Carolina", value: "South Carolina" },
+ { label: "South Dakota", value: "South Dakota" },
+ { label: "Tennessee", value: "Tennessee" },
+ { label: "Texas", value: "Texas" },
+ { label: "Utah", value: "Utah" },
+ { label: "Vermont", value: "Vermont" },
+ { label: "Virginia", value: "Virginia" },
+ { label: "Washington", value: "Washington" },
+ { label: "West Virginia", value: "West Virginia" },
+ { label: "Wisconsin", value: "Wisconsin" },
+ { label: "Wyoming", value: "Wyoming" },
+ {
+ label: "── US Territories ──",
+ value: "",
+ disabled: true,
+ },
+ { label: "American Samoa", value: "American Samoa" },
+ { label: "Guam", value: "Guam" },
+ {
+ label: "Northern Mariana Islands",
+ value: "Northern Mariana Islands",
+ },
+ { label: "Puerto Rico", value: "Puerto Rico" },
+ {
+ label: "US Minor Outlying Islands",
+ value: "US Minor Outlying Islands",
+ },
+ { label: "Virgin Islands", value: "Virgin Islands" },
+ {
+ label: "── Armed Forces ──",
+ value: "",
+ disabled: true,
+ },
+ { label: "Armed Forces Americas", value: "Armed Forces Americas" },
+ { label: "Armed Forces Africa", value: "Armed Forces Africa" },
+ { label: "Armed Forces Canada", value: "Armed Forces Canada" },
+ { label: "Armed Forces Europe", value: "Armed Forces Europe" },
+ {
+ label: "Armed Forces Middle East",
+ value: "Armed Forces Middle East",
+ },
+ { label: "Armed Forces Pacific", value: "Armed Forces Pacific" },
+ ]);
+ break;
+ case "CA":
+ case "CAN":
+ this.setStateValues(state, "Province / Territory", [
+ { label: "Select", value: "" },
+ { label: "Alberta", value: "AB" },
+ { label: "British Columbia", value: "BC" },
+ { label: "Manitoba", value: "MB" },
+ { label: "New Brunswick", value: "NB" },
+ { label: "Newfoundland and Labrador", value: "NL" },
+ { label: "Northwest Territories", value: "NT" },
+ { label: "Nova Scotia", value: "NS" },
+ { label: "Nunavut", value: "NU" },
+ { label: "Ontario", value: "ON" },
+ { label: "Prince Edward Island", value: "PE" },
+ { label: "Quebec", value: "QC" },
+ { label: "Saskatchewan", value: "SK" },
+ { label: "Yukon", value: "YT" },
+ ]);
+ break;
+ case "Canada":
+ this.setStateValues(state, "Province / Territory", [
+ { label: "Select", value: "" },
+ { label: "Alberta", value: "Alberta" },
+ { label: "British Columbia", value: "British Columbia" },
+ { label: "Manitoba", value: "Manitoba" },
+ { label: "New Brunswick", value: "New Brunswick" },
+ {
+ label: "Newfoundland and Labrador",
+ value: "Newfoundland and Labrador",
+ },
+ { label: "Northwest Territories", value: "Northwest Territories" },
+ { label: "Nova Scotia", value: "Nova Scotia" },
+ { label: "Nunavut", value: "Nunavut" },
+ { label: "Ontario", value: "Ontario" },
+ { label: "Prince Edward Island", value: "Prince Edward Island" },
+ { label: "Quebec", value: "Quebec" },
+ { label: "Saskatchewan", value: "Saskatchewan" },
+ { label: "Yukon", value: "Yukon" },
+ ]);
+ break;
+ case "MX":
+ case "MEX":
+ this.setStateValues(state, "Estado", [
+ { label: "Seleccione Estado", value: "" },
+ { label: "Aguascalientes", value: "AGU" },
+ { label: "Baja California", value: "BCN" },
+ { label: "Baja California Sur", value: "BCS" },
+ { label: "Campeche", value: "CAM" },
+ { label: "Chiapas", value: "CHP" },
+ { label: "Ciudad de Mexico", value: "CMX" },
+ { label: "Chihuahua", value: "CHH" },
+ { label: "Coahuila", value: "COA" },
+ { label: "Colima", value: "COL" },
+ { label: "Durango", value: "DUR" },
+ { label: "Guanajuato", value: "GUA" },
+ { label: "Guerrero", value: "GRO" },
+ { label: "Hidalgo", value: "HID" },
+ { label: "Jalisco", value: "JAL" },
+ { label: "Michoacan", value: "MIC" },
+ { label: "Morelos", value: "MOR" },
+ { label: "Nayarit", value: "NAY" },
+ { label: "Nuevo Leon", value: "NLE" },
+ { label: "Oaxaca", value: "OAX" },
+ { label: "Puebla", value: "PUE" },
+ { label: "Queretaro", value: "QUE" },
+ { label: "Quintana Roo", value: "ROO" },
+ { label: "San Luis Potosi", value: "SLP" },
+ { label: "Sinaloa", value: "SIN" },
+ { label: "Sonora", value: "SON" },
+ { label: "Tabasco", value: "TAB" },
+ { label: "Tamaulipas", value: "TAM" },
+ { label: "Tlaxcala", value: "TLA" },
+ { label: "Veracruz", value: "VER" },
+ { label: "Yucatan", value: "YUC" },
+ { label: "Zacatecas", value: "ZAC" },
+ ]);
+ break;
+ case "Mexico":
+ this.setStateValues(state, "Estado", [
+ { label: "Seleccione Estado", value: "" },
+ { label: "Aguascalientes", value: "Aguascalientes" },
+ { label: "Baja California", value: "Baja California" },
+ { label: "Baja California Sur", value: "Baja California Sur" },
+ { label: "Campeche", value: "Campeche" },
+ { label: "Chiapas", value: "Chiapas" },
+ { label: "Ciudad de Mexico", value: "Ciudad de Mexico" },
+ { label: "Chihuahua", value: "Chihuahua" },
+ { label: "Coahuila", value: "Coahuila" },
+ { label: "Colima", value: "Colima" },
+ { label: "Durango", value: "Durango" },
+ { label: "Guanajuato", value: "Guanajuato" },
+ { label: "Guerrero", value: "Guerrero" },
+ { label: "Hidalgo", value: "Hidalgo" },
+ { label: "Jalisco", value: "Jalisco" },
+ { label: "Michoacan", value: "Michoacan" },
+ { label: "Morelos", value: "Morelos" },
+ { label: "Nayarit", value: "Nayarit" },
+ { label: "Nuevo Leon", value: "Nuevo Leon" },
+ { label: "Oaxaca", value: "Oaxaca" },
+ { label: "Puebla", value: "Puebla" },
+ { label: "Queretaro", value: "Queretaro" },
+ { label: "Quintana Roo", value: "Quintana Roo" },
+ { label: "San Luis Potosi", value: "San Luis Potosi" },
+ { label: "Sinaloa", value: "Sinaloa" },
+ { label: "Sonora", value: "Sonora" },
+ { label: "Tabasco", value: "Tabasco" },
+ { label: "Tamaulipas", value: "Tamaulipas" },
+ { label: "Tlaxcala", value: "Tlaxcala" },
+ { label: "Veracruz", value: "Veracruz" },
+ { label: "Yucatan", value: "Yucatan" },
+ { label: "Zacatecas", value: "Zacatecas" },
+ ]);
+ break;
+ default:
+ this.setStateValues(state, "Province / State", null);
+ break;
}
}
- // Add a data attribute to the body tag with how many visible frequency options there are
- addFrequencyDataAttribute() {
- const frequencyOptions = document.querySelectorAll(".en__field--recurrfreq .en__field__item label.en__field__label");
- let visibleFrequencyOptions = 0;
- frequencyOptions.forEach((option) => {
- if (engrid_ENGrid.isVisible(option)) {
- visibleFrequencyOptions++;
+ setStateValues(state, label, values) {
+ const stateField = engrid_ENGrid.getField(state);
+ const stateWrapper = stateField ? stateField.closest(".en__field") : null;
+ if (stateWrapper) {
+ const stateLabel = stateWrapper.querySelector(".en__field__label");
+ const elementWrapper = stateWrapper.querySelector(".en__field__element");
+ if (stateLabel) {
+ stateLabel.innerHTML = label;
}
- });
- engrid_ENGrid.setBodyData("visible-frequency", visibleFrequencyOptions.toString());
- }
- // Add a data attribute to the body tag with how many visible gift amount options there are
- addGiftAmountDataAttribute() {
- const updateGiftAmountData = () => {
- const giftAmountOptions = document.querySelectorAll(".en__field--donationAmt .en__field__element .en__field__item");
- let visibleGiftAmountOptions = 0;
- giftAmountOptions.forEach((option) => {
- if (engrid_ENGrid.isVisible(option)) {
- visibleGiftAmountOptions++;
+ if (elementWrapper) {
+ const selectedState = get(`engrid-state-${state}`);
+ if (values === null || values === void 0 ? void 0 : values.length) {
+ const select = document.createElement("select");
+ select.name = state;
+ select.id = "en__field_" + state.toLowerCase().replace(".", "_");
+ select.classList.add("en__field__input");
+ select.classList.add("en__field__input--select");
+ select.autocomplete = "address-level1";
+ let valueSelected = false;
+ values.forEach((value) => {
+ const option = document.createElement("option");
+ option.value = value.value;
+ option.innerHTML = value.label;
+ if (selectedState === value.value && !valueSelected) {
+ option.selected = true;
+ valueSelected = true;
+ }
+ if (value.disabled) {
+ option.disabled = true;
+ }
+ select.appendChild(option);
+ });
+ elementWrapper.innerHTML = "";
+ elementWrapper.appendChild(select);
+ select.addEventListener("change", this.rememberState.bind(this, state));
+ select.dispatchEvent(new Event("change", { bubbles: true }));
}
- });
- engrid_ENGrid.setBodyData("visible-gift-amount", visibleGiftAmountOptions.toString());
- this.logger.log("Visible Gift Amount Changed to: " + visibleGiftAmountOptions.toString());
- };
- // Initial update
- updateGiftAmountData();
- // Observe changes in the donation amount section
- const observer = new MutationObserver(updateGiftAmountData);
- const targetNode = document.querySelector(".en__field--donationAmt");
- if (targetNode) {
- observer.observe(targetNode, {
- childList: true,
- subtree: true,
- attributes: true,
+ else {
+ elementWrapper.innerHTML = "";
+ const input = document.createElement("input");
+ input.type = "text";
+ input.name = state;
+ input.placeholder = label;
+ input.id = "en__field_" + state.toLowerCase().replace(".", "_");
+ input.classList.add("en__field__input");
+ input.classList.add("en__field__input--text");
+ input.autocomplete = "address-level1";
+ if (selectedState) {
+ input.value = selectedState;
+ }
+ elementWrapper.appendChild(input);
+ input.addEventListener("change", this.rememberState.bind(this, state));
+ }
+ }
+ }
+ }
+ rememberState(state) {
+ const stateField = engrid_ENGrid.getField(state);
+ if (stateField) {
+ set(`engrid-state-${stateField.name}`, stateField.value, {
+ expires: 1,
+ sameSite: "none",
+ secure: true,
});
}
- // Run update updateGiftAmountData when frequency changes
- this._frequency.onFrequencyChange.subscribe(() => {
- setTimeout(() => {
- updateGiftAmountData();
- }, 10);
- });
}
}
-;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/iframe.js
+;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/auto-country-select.js
+// This class works when the user has added ".simple_country_select" as a class in page builder for the Country select
-class iFrame {
+class AutoCountrySelect {
constructor() {
- this._form = en_form_EnForm.getInstance();
- this.logger = new logger_EngridLogger("iFrame", "brown", "gray", "π‘");
- if (this.inIframe()) {
- // Add the data-engrid-embedded attribute when inside an iFrame if it wasn't already added by a script in the Page Template
- engrid_ENGrid.setBodyData("embedded", "");
- // Check if the parent page URL matches the criteria for a thank you page donation
- const getParentUrl = () => {
- try {
- return window.parent.location.href;
- }
- catch (e) {
- // If we can't access parent location due to same-origin policy, fall back to referrer
- return document.referrer;
- }
- };
- const parentUrl = getParentUrl();
- const thankYouPageRegex = /\/page\/\d+\/[^\/]+\/(\d+)(\?|$)/;
- const match = parentUrl.match(thankYouPageRegex);
- if (match) {
- const pageNumber = parseInt(match[1], 10);
- if (pageNumber > 1) {
- engrid_ENGrid.setBodyData("embedded", "thank-you-page-donation");
- this.hideFormComponents();
- this.logger.log("iFrame Event - Set embedded attribute to thank-you-page-donation");
- }
- }
- // Fire the resize event
- this.logger.log("iFrame Event - Begin Resizing");
- // Run onLoaded function
- console.log("document.readyState", document.readyState);
- // Document Load
- if (document.readyState !== "loading") {
- this.onLoaded();
- }
- else {
- document.addEventListener("DOMContentLoaded", () => {
- this.onLoaded();
- });
- }
- window.setTimeout(() => {
- this.sendIframeHeight();
- }, 300);
- window.addEventListener("resize", this.debounceWithImmediate(() => {
- this.logger.log("iFrame Event - window resized");
- this.sendIframeHeight();
- }));
- // Listen for the form submit event
- this._form.onSubmit.subscribe((e) => {
- this.logger.log("iFrame Event - onSubmit");
- this.sendIframeFormStatus("submit");
- });
- // If the iFrame is Chained, check if the form has data
- if (this.isChained() && engrid_ENGrid.getPaymentType()) {
- this.logger.log("iFrame Event - Chained iFrame");
- this.sendIframeFormStatus("chained");
- // this.addChainedBanner();
- }
- // Remove the skip link markup when inside an iFrame
- const skipLink = document.querySelector(".skip-link");
- if (skipLink) {
- skipLink.remove();
- }
- this._form.onError.subscribe(() => {
- // Get the first .en__field--validationFailed element
- const firstError = document.querySelector(".en__field--validationFailed");
- // Send scrollTo message
- // Parent pages listens for this message and scrolls to the correct position
- const scrollTo = firstError
- ? firstError.getBoundingClientRect().top
- : 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);
+ this._countryEvent = Country.getInstance();
+ this.countryWrapper = document.querySelector(".simple_country_select");
+ this.countrySelect = this._countryEvent
+ .countryField;
+ this.country = null;
+ const engridAutofill = get("engrid-autofill");
+ const submissionFailed = !!(engrid_ENGrid.checkNested(window.EngagingNetworks, "require", "_defined", "enjs", "checkSubmissionFailed") && window.EngagingNetworks.require._defined.enjs.checkSubmissionFailed());
+ const hasIntlSupport = !!engrid_ENGrid.checkNested(window.Intl, "DisplayNames");
+ // Only run if there's no engrid-autofill cookie && if it has Intl support && no country data in url
+ const locationDataInUrl = engrid_ENGrid.getUrlParameter("supporter.country") ||
+ engrid_ENGrid.getUrlParameter("supporter.region") ||
+ (engrid_ENGrid.getUrlParameter("ea.url.id") &&
+ !engrid_ENGrid.getUrlParameter("forwarded"));
+ // If fast form is active, then personal details have already been filled somehow and we should not override the country selection
+ // The client is also likely using WelcomeBack.
+ const fastFormActive = engrid_ENGrid.getBodyData("hide-fast-address-details") ||
+ engrid_ENGrid.getBodyData("hide-fast-personal-details");
+ if (!engridAutofill &&
+ !submissionFailed &&
+ hasIntlSupport &&
+ !locationDataInUrl &&
+ !fastFormActive) {
+ fetch(`https://${window.location.hostname}/cdn-cgi/trace`)
+ .then((res) => res.text())
+ .then((t) => {
+ let data = t.replace(/[\r\n]+/g, '","').replace(/\=+/g, '":"');
+ data = '{"' + data.slice(0, data.lastIndexOf('","')) + '"}';
+ const jsondata = JSON.parse(data);
+ this.country = jsondata.loc;
+ this.init();
+ // console.log("Country:", this.country);
});
}
else {
- // When not in iframe, default behaviour, smooth scroll to first error
- this._form.onError.subscribe(() => {
- // Smooth Scroll to the first .en__field--validationFailed element
- const firstError = document.querySelector(".en__field--validationFailed");
- if (firstError) {
- firstError.scrollIntoView({ behavior: "smooth" });
- }
- });
- // Parent Page Logic (when an ENgrid form is embedded in an ENgrid page)
- window.addEventListener("message", (event) => {
- const iframe = this.getIFrameByEvent(event);
- 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") &&
- event.data.scroll > 0) {
- const elDistanceToTop = window.pageYOffset + iframe.getBoundingClientRect().top;
- let scrollTo = elDistanceToTop + event.data.scroll;
- window.scrollTo({
- top: scrollTo,
- left: 0,
- behavior: "smooth",
- });
- this.logger.log("iFrame Event - Scrolling Window to " + scrollTo);
- }
- // New scroll event logic "scrollTo", scrolls to the first error
- else if (event.data.hasOwnProperty("scrollTo")) {
- const scrollToPosition = event.data.scrollTo +
- window.scrollY +
- iframe.getBoundingClientRect().top;
- window.scrollTo({
- top: scrollToPosition,
- left: 0,
- behavior: "smooth",
- });
- this.logger.log("iFrame Event - Scrolling Window to " + scrollToPosition);
- }
- }
- });
+ this.init();
}
}
- onLoaded() {
- // Scroll to top of iFrame
- this.logger.log("iFrame Event - window.onload");
- this.sendIframeHeight();
- window.parent.postMessage({
- scroll: this.shouldScroll(),
- }, "*");
- // Iframe Queue: signal Thank-You-page completion to the parent window.
- // The IframeQueue component (in parent mode) listens for this ping and
- // matches it by Page ID to advance to the next queued iframe. Fires
- // exactly once per Thank-You-page load. See iframe-queue.ts.
- this.sendIframeQueueThankYouPing();
- // On click fire the resize event
- document.addEventListener("click", (e) => {
- this.logger.log("iFrame Event - click");
- setTimeout(() => {
- this.sendIframeHeight();
- }, 100);
- });
- // Watch for errors and send the height
- engrid_ENGrid.watchForError(this.sendIframeHeight.bind(this));
- }
- /**
- * Posts a `engrid-iframe-queue:thank-you` message to the parent window
- * when the embedded EN page reaches its Thank You page (the last page
- * in the page sequence). Carries the Page ID of the submitting form so
- * the IframeQueue parent can match the ping against the queued item it
- * is waiting on, ignoring pings from unrelated EN iframes that may exist
- * on the same parent page (e.g. an Embedded Ecard iframe).
- *
- * Only fires when:
- * - the script is running inside an iframe (already guaranteed by the
- * code path that calls onLoaded()), AND
- * - the embedded page is a Thank You page (ENGrid.isThankYouPage()).
- *
- * Consumed by: IframeQueue (engrid/packages/scripts/src/iframe-queue.ts).
- */
- sendIframeQueueThankYouPing() {
- if (!engrid_ENGrid.isThankYouPage())
- return;
- const pageId = engrid_ENGrid.getPageID();
- const message = {
- type: "engrid-iframe-queue:thank-you",
- pageId,
- pageNumber: engrid_ENGrid.getPageNumber(),
- pageCount: engrid_ENGrid.getPageCount(),
- url: window.location.href,
- };
- this.logger.log(`iFrame Event - Iframe Queue thank-you ping (pageId=${pageId})`);
- window.parent.postMessage(message, "*");
- }
- sendIframeHeight() {
- let height = document.body.offsetHeight;
- this.logger.log("iFrame Event - Sending iFrame height of: " + height + "px"); // check the message is being sent correctly
- window.parent.postMessage({
- frameHeight: height,
- pageNumber: engrid_ENGrid.getPageNumber(),
- pageCount: engrid_ENGrid.getPageCount(),
- giftProcess: engrid_ENGrid.getGiftProcess(),
- }, "*");
- }
- sendIframeFormStatus(status) {
- window.parent.postMessage({
- status: status,
- pageNumber: engrid_ENGrid.getPageNumber(),
- pageCount: engrid_ENGrid.getPageCount(),
- giftProcess: engrid_ENGrid.getGiftProcess(),
- }, "*");
+ init() {
+ if (this.countrySelect) {
+ if (this.country) {
+ const countriesNames = new Intl.DisplayNames(["en"], {
+ type: "region",
+ });
+ // We are setting the country by Name because the ISO code is not always the same. They have 2 and 3 letter codes.
+ this.setCountryByName(countriesNames.of(this.country), this.country);
+ }
+ }
}
- getIFrameByEvent(event) {
- return [].slice
- .call(document.getElementsByTagName("iframe"))
- .filter((iframe) => {
- return iframe.contentWindow === event.source;
- })[0];
+ setCountryByName(countryName, countryCode) {
+ if (this.countrySelect) {
+ let countrySelectOptions = this.countrySelect.options;
+ for (let i = 0; i < countrySelectOptions.length; i++) {
+ if (countrySelectOptions[i].innerHTML.toLowerCase() ==
+ countryName.toLowerCase() ||
+ countrySelectOptions[i].value.toLowerCase() ==
+ countryCode.toLowerCase()) {
+ this.countrySelect.selectedIndex = i;
+ break;
+ }
+ }
+ const event = new Event("change", { bubbles: true });
+ this.countrySelect.dispatchEvent(event);
+ }
}
- shouldScroll() {
- // If you find a error, scroll
- if (document.querySelector(".en__errorHeader")) {
- return true;
+}
+
+;// CONCATENATED MODULE: ./node_modules/@4site/engrid-scripts/dist/skip-link.js
+// Javascript that adds an accessible "Skip Link" button after the opening that jumps to
+// the first
+
+
+
+
+
+