Skip to content

Adds a configuration flag for opt-in ladders to always show Thank You page #387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fernanDOTdo merged 3 commits into from
Mar 19, 2026
Merged

Adds a configuration flag for opt-in ladders to always show Thank You page #387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fccd795
Adds a configuration flag for opt-in ladders to always show TY page
StoneMoney Mar 18, 2026
27cb890
Merge branch 'main' into opt-in-persist
fernanDOTdo Mar 19, 2026
90d8251
Refactor OptInLadder URL handling and fixes
fernanDOTdo Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/scripts/dist/optin-ladder.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ export declare class OptInLadder {
private runAsChildThankYou;
private inIframe;
private saveStepToSessionStorage;
private getFirstPageUrl;
private saveOptInsToSessionStorage;
private isEmbeddedThankYouPage;
private getPageUrl;
private getFirstPageUrl;
private hidePage;
private clearSessionStorage;
}
63 changes: 43 additions & 20 deletions packages/scripts/dist/optin-ladder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
// This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
// If the page is not embedded in an iframe, and there are EN's Opt-In fields on the page, we will store the values to sessionStorage upon Form Submit.
// If the page is embedded in an iframe and on a Thank You Page, we will look for .optin-ladder elements, compare the values to sessionStorage, and show the next checkbox in the ladder, removing all but the first match.
// If the page is embedded in an iframe and on a Thank You Page, and the child iFrame is also a Thank You Page, we will look for a sessionStorage that has the current ladder step and the total number of steps.
// If the current step is less than the total number of steps, we will redirect to the first page. If the current step is equal to the total number of steps, we will show the Thank You Page.
/**
* Docs: https://engrid.4sitestudios.com/component/optin-ladder
* This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
* If the page is not embedded in an iframe, and there are EN's Opt-In fields on the page, we will store the values to sessionStorage upon Form Submit.
* If the page is embedded in an iframe and on a Thank You Page, we will look for .optin-ladder elements, compare the values to sessionStorage, and show the next checkbox in the ladder, removing all but the first match.
* If the page is embedded in an iframe and on a Thank You Page, and the child iFrame is also a Thank You Page, we will look for a sessionStorage that has the current ladder step and the total number of steps.
* If the current step is less than the total number of steps, we will redirect to the first page. If the current step is equal to the total number of steps, we will show the Thank You Page.
*/
import { EngridLogger, ENGrid, EnForm } from ".";
export class OptInLadder {
constructor() {
Expand Down Expand Up @@ -95,7 +98,7 @@ export class OptInLadder {
if (!emailField || !emailField.value) {
this.logger.log("Email field is empty");
// Since this is a OptInLadder page with no e-mail address, hide the page
this.hidePage();
this.hidePage(true);
return;
}
const sessionStorageCheckboxValues = JSON.parse(sessionStorage.getItem("engrid.supporter.questions") || "{}");
Expand Down Expand Up @@ -179,16 +182,27 @@ export class OptInLadder {
return;
}
const hasOptInLadderStop = sessionStorage.getItem("engrid.optin-ladder-stop");
const hasOptInLadderPersistStop = sessionStorage.getItem("engrid.optin-ladder-persist-stop");
if (hasOptInLadderPersistStop) {
this.logger.log("OptInLadder has been stopped with persist flag, showing the thank-you page");
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
return;
}
if (hasOptInLadderStop) {
this.logger.log("OptInLadder has been stopped");
return;
}
const sessionStorageOptInLadder = JSON.parse(sessionStorage.getItem("engrid.optin-ladder") || "{}");
const currentStep = sessionStorageOptInLadder.step || 0;
const totalSteps = sessionStorageOptInLadder.totalSteps || 0;
if (currentStep <= totalSteps) {
this.logger.log(`Current step ${currentStep} is less or equal to total steps ${totalSteps}`);
if (totalSteps === 0) {
this.logger.log("No total steps found in sessionStorage");
this.hidePage();
return;
}
else if (currentStep <= totalSteps) {
this.logger.log(`Current step ${currentStep} is less or equal to total steps ${totalSteps}`);
this.hidePage(true);
// Redirect to the first page
window.location.href = this.getFirstPageUrl();
return;
Expand All @@ -211,14 +225,6 @@ export class OptInLadder {
sessionStorage.setItem("engrid.optin-ladder", JSON.stringify({ step, totalSteps }));
this.logger.log(`Saved step ${step} of ${totalSteps} to sessionStorage`);
}
getFirstPageUrl() {
// Get the current URL and replace the last path with 1?chain
const url = new URL(window.location.href);
const path = url.pathname.split("/");
path.pop();
path.push("1");
return url.origin + path.join("/") + "?chain";
}
saveOptInsToSessionStorage(type = "parent") {
// Grab all the checkboxes with the name starting with "supporter.questions"
const checkboxes = document.querySelectorAll('input[name^="supporter.questions"]');
Expand Down Expand Up @@ -248,15 +254,32 @@ export class OptInLadder {
isEmbeddedThankYouPage() {
return ENGrid.getBodyData("embedded") === "thank-you-page-donation";
}
hidePage() {
const engridPage = document.querySelector("#engrid");
if (engridPage) {
engridPage.classList.add("hide");
getPageUrl(page, chain = false) {
const url = new URL(window.location.href);
const path = url.pathname.split("/");
path[path.length - 1] = String(page);
return url.origin + path.join("/") + (chain ? "?chain" : "");
}
getFirstPageUrl() {
return this.getPageUrl(1, true);
}
hidePage(forceHide = false) {
if (ENGrid.getBodyData("opt-in-ladder-persist") === "true" && !forceHide) {
this.logger.log("Hide activated, but opt-in ladder persist is enabled, showing the thank-you page");
sessionStorage.setItem("engrid.optin-ladder-persist-stop", "Y");
window.location.href = this.getPageUrl(2);
}
else {
const engridPage = document.querySelector("#engrid");
if (engridPage) {
engridPage.classList.add("hide");
}
}
}
clearSessionStorage() {
sessionStorage.removeItem("engrid.supporter.questions");
sessionStorage.removeItem("engrid.optin-ladder");
sessionStorage.removeItem("engrid.optin-ladder-stop");
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
}
}
70 changes: 49 additions & 21 deletions packages/scripts/src/optin-ladder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
// This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
// If the page is not embedded in an iframe, and there are EN's Opt-In fields on the page, we will store the values to sessionStorage upon Form Submit.
// If the page is embedded in an iframe and on a Thank You Page, we will look for .optin-ladder elements, compare the values to sessionStorage, and show the next checkbox in the ladder, removing all but the first match.
// If the page is embedded in an iframe and on a Thank You Page, and the child iFrame is also a Thank You Page, we will look for a sessionStorage that has the current ladder step and the total number of steps.
// If the current step is less than the total number of steps, we will redirect to the first page. If the current step is equal to the total number of steps, we will show the Thank You Page.
/**
* Docs: https://engrid.4sitestudios.com/component/optin-ladder
* This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
* If the page is not embedded in an iframe, and there are EN's Opt-In fields on the page, we will store the values to sessionStorage upon Form Submit.
* If the page is embedded in an iframe and on a Thank You Page, we will look for .optin-ladder elements, compare the values to sessionStorage, and show the next checkbox in the ladder, removing all but the first match.
* If the page is embedded in an iframe and on a Thank You Page, and the child iFrame is also a Thank You Page, we will look for a sessionStorage that has the current ladder step and the total number of steps.
* If the current step is less than the total number of steps, we will redirect to the first page. If the current step is equal to the total number of steps, we will show the Thank You Page.
*/
import { EngridLogger, ENGrid, EnForm } from ".";

export class OptInLadder {
Expand Down Expand Up @@ -114,7 +117,7 @@ export class OptInLadder {
if (!emailField || !emailField.value) {
this.logger.log("Email field is empty");
// Since this is a OptInLadder page with no e-mail address, hide the page
this.hidePage();
this.hidePage(true);
return;
}
const sessionStorageCheckboxValues = JSON.parse(
Expand Down Expand Up @@ -206,6 +209,16 @@ export class OptInLadder {
const hasOptInLadderStop = sessionStorage.getItem(
"engrid.optin-ladder-stop"
);
const hasOptInLadderPersistStop = sessionStorage.getItem(
"engrid.optin-ladder-persist-stop"
);
if (hasOptInLadderPersistStop) {
this.logger.log(
"OptInLadder has been stopped with persist flag, showing the thank-you page"
);
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
return;
}
if (hasOptInLadderStop) {
this.logger.log("OptInLadder has been stopped");
return;
Expand All @@ -215,11 +228,15 @@ export class OptInLadder {
);
const currentStep = sessionStorageOptInLadder.step || 0;
const totalSteps = sessionStorageOptInLadder.totalSteps || 0;
if (currentStep <= totalSteps) {
if (totalSteps === 0) {
this.logger.log("No total steps found in sessionStorage");
this.hidePage();
return;
} else if (currentStep <= totalSteps) {
this.logger.log(
`Current step ${currentStep} is less or equal to total steps ${totalSteps}`
);
this.hidePage();
this.hidePage(true);
// Redirect to the first page
window.location.href = this.getFirstPageUrl();
return;
Expand Down Expand Up @@ -248,15 +265,6 @@ export class OptInLadder {
this.logger.log(`Saved step ${step} of ${totalSteps} to sessionStorage`);
}

private getFirstPageUrl() {
// Get the current URL and replace the last path with 1?chain
const url = new URL(window.location.href);
const path = url.pathname.split("/");
path.pop();
path.push("1");
return url.origin + path.join("/") + "?chain";
}

private saveOptInsToSessionStorage(type: "parent" | "child" = "parent") {
// Grab all the checkboxes with the name starting with "supporter.questions"
const checkboxes = document.querySelectorAll(
Expand Down Expand Up @@ -296,15 +304,35 @@ export class OptInLadder {
private isEmbeddedThankYouPage() {
return ENGrid.getBodyData("embedded") === "thank-you-page-donation";
}
private hidePage() {
const engridPage = document.querySelector("#engrid") as HTMLElement;
if (engridPage) {
engridPage.classList.add("hide");
private getPageUrl(page: number, chain: boolean = false): string {
const url = new URL(window.location.href);
const path = url.pathname.split("/");
path[path.length - 1] = String(page);
return url.origin + path.join("/") + (chain ? "?chain" : "");
}

private getFirstPageUrl(): string {
return this.getPageUrl(1, true);
}

private hidePage(forceHide: boolean = false) {
if (ENGrid.getBodyData("opt-in-ladder-persist") === "true" && !forceHide) {
this.logger.log(
"Hide activated, but opt-in ladder persist is enabled, showing the thank-you page"
);
sessionStorage.setItem("engrid.optin-ladder-persist-stop", "Y");
window.location.href = this.getPageUrl(2);
} else {
const engridPage = document.querySelector("#engrid") as HTMLElement;
if (engridPage) {
engridPage.classList.add("hide");
}
}
}
private clearSessionStorage() {
sessionStorage.removeItem("engrid.supporter.questions");
sessionStorage.removeItem("engrid.optin-ladder");
sessionStorage.removeItem("engrid.optin-ladder-stop");
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
}
}
Loading