Skip to content

Commit 45f43e9

Browse files
fernanDOTdofernanDOTdo
authored
Merge pull request #387 from 4site-interactive-studios/opt-in-persist
Adds a configuration flag for opt-in ladders to always show Thank You page
2 parents 895924e + 90d8251 commit 45f43e9

3 files changed

Lines changed: 94 additions & 42 deletions

File tree

‎packages/scripts/dist/optin-ladder.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ export declare class OptInLadder {
77
private runAsChildThankYou;
88
private inIframe;
99
private saveStepToSessionStorage;
10-
private getFirstPageUrl;
1110
private saveOptInsToSessionStorage;
1211
private isEmbeddedThankYouPage;
12+
private getPageUrl;
13+
private getFirstPageUrl;
1314
private hidePage;
1415
private clearSessionStorage;
1516
}

‎packages/scripts/dist/optin-ladder.js‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
// This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
2-
// 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.
3-
// 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.
4-
// 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.
5-
// 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.
1+
/**
2+
* Docs: https://engrid.4sitestudios.com/component/optin-ladder
3+
* This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
4+
* 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.
5+
* 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.
6+
* 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.
7+
* 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.
8+
*/
69
import { EngridLogger, ENGrid, EnForm } from ".";
710
export class OptInLadder {
811
constructor() {
@@ -95,7 +98,7 @@ export class OptInLadder {
9598
if (!emailField || !emailField.value) {
9699
this.logger.log("Email field is empty");
97100
// Since this is a OptInLadder page with no e-mail address, hide the page
98-
this.hidePage();
101+
this.hidePage(true);
99102
return;
100103
}
101104
const sessionStorageCheckboxValues = JSON.parse(sessionStorage.getItem("engrid.supporter.questions") || "{}");
@@ -179,16 +182,27 @@ export class OptInLadder {
179182
return;
180183
}
181184
const hasOptInLadderStop = sessionStorage.getItem("engrid.optin-ladder-stop");
185+
const hasOptInLadderPersistStop = sessionStorage.getItem("engrid.optin-ladder-persist-stop");
186+
if (hasOptInLadderPersistStop) {
187+
this.logger.log("OptInLadder has been stopped with persist flag, showing the thank-you page");
188+
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
189+
return;
190+
}
182191
if (hasOptInLadderStop) {
183192
this.logger.log("OptInLadder has been stopped");
184193
return;
185194
}
186195
const sessionStorageOptInLadder = JSON.parse(sessionStorage.getItem("engrid.optin-ladder") || "{}");
187196
const currentStep = sessionStorageOptInLadder.step || 0;
188197
const totalSteps = sessionStorageOptInLadder.totalSteps || 0;
189-
if (currentStep <= totalSteps) {
190-
this.logger.log(`Current step ${currentStep} is less or equal to total steps ${totalSteps}`);
198+
if (totalSteps === 0) {
199+
this.logger.log("No total steps found in sessionStorage");
191200
this.hidePage();
201+
return;
202+
}
203+
else if (currentStep <= totalSteps) {
204+
this.logger.log(`Current step ${currentStep} is less or equal to total steps ${totalSteps}`);
205+
this.hidePage(true);
192206
// Redirect to the first page
193207
window.location.href = this.getFirstPageUrl();
194208
return;
@@ -211,14 +225,6 @@ export class OptInLadder {
211225
sessionStorage.setItem("engrid.optin-ladder", JSON.stringify({ step, totalSteps }));
212226
this.logger.log(`Saved step ${step} of ${totalSteps} to sessionStorage`);
213227
}
214-
getFirstPageUrl() {
215-
// Get the current URL and replace the last path with 1?chain
216-
const url = new URL(window.location.href);
217-
const path = url.pathname.split("/");
218-
path.pop();
219-
path.push("1");
220-
return url.origin + path.join("/") + "?chain";
221-
}
222228
saveOptInsToSessionStorage(type = "parent") {
223229
// Grab all the checkboxes with the name starting with "supporter.questions"
224230
const checkboxes = document.querySelectorAll('input[name^="supporter.questions"]');
@@ -248,15 +254,32 @@ export class OptInLadder {
248254
isEmbeddedThankYouPage() {
249255
return ENGrid.getBodyData("embedded") === "thank-you-page-donation";
250256
}
251-
hidePage() {
252-
const engridPage = document.querySelector("#engrid");
253-
if (engridPage) {
254-
engridPage.classList.add("hide");
257+
getPageUrl(page, chain = false) {
258+
const url = new URL(window.location.href);
259+
const path = url.pathname.split("/");
260+
path[path.length - 1] = String(page);
261+
return url.origin + path.join("/") + (chain ? "?chain" : "");
262+
}
263+
getFirstPageUrl() {
264+
return this.getPageUrl(1, true);
265+
}
266+
hidePage(forceHide = false) {
267+
if (ENGrid.getBodyData("opt-in-ladder-persist") === "true" && !forceHide) {
268+
this.logger.log("Hide activated, but opt-in ladder persist is enabled, showing the thank-you page");
269+
sessionStorage.setItem("engrid.optin-ladder-persist-stop", "Y");
270+
window.location.href = this.getPageUrl(2);
271+
}
272+
else {
273+
const engridPage = document.querySelector("#engrid");
274+
if (engridPage) {
275+
engridPage.classList.add("hide");
276+
}
255277
}
256278
}
257279
clearSessionStorage() {
258280
sessionStorage.removeItem("engrid.supporter.questions");
259281
sessionStorage.removeItem("engrid.optin-ladder");
260282
sessionStorage.removeItem("engrid.optin-ladder-stop");
283+
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
261284
}
262285
}

‎packages/scripts/src/optin-ladder.ts‎

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
// This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
2-
// 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.
3-
// 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.
4-
// 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.
5-
// 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.
1+
/**
2+
* Docs: https://engrid.4sitestudios.com/component/optin-ladder
3+
* This component is responsible for showing a ladder of checkboxes, one at a time, to the user.
4+
* 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.
5+
* 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.
6+
* 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.
7+
* 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.
8+
*/
69
import { EngridLogger, ENGrid, EnForm } from ".";
710

811
export class OptInLadder {
@@ -114,7 +117,7 @@ export class OptInLadder {
114117
if (!emailField || !emailField.value) {
115118
this.logger.log("Email field is empty");
116119
// Since this is a OptInLadder page with no e-mail address, hide the page
117-
this.hidePage();
120+
this.hidePage(true);
118121
return;
119122
}
120123
const sessionStorageCheckboxValues = JSON.parse(
@@ -206,6 +209,16 @@ export class OptInLadder {
206209
const hasOptInLadderStop = sessionStorage.getItem(
207210
"engrid.optin-ladder-stop"
208211
);
212+
const hasOptInLadderPersistStop = sessionStorage.getItem(
213+
"engrid.optin-ladder-persist-stop"
214+
);
215+
if (hasOptInLadderPersistStop) {
216+
this.logger.log(
217+
"OptInLadder has been stopped with persist flag, showing the thank-you page"
218+
);
219+
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
220+
return;
221+
}
209222
if (hasOptInLadderStop) {
210223
this.logger.log("OptInLadder has been stopped");
211224
return;
@@ -215,11 +228,15 @@ export class OptInLadder {
215228
);
216229
const currentStep = sessionStorageOptInLadder.step || 0;
217230
const totalSteps = sessionStorageOptInLadder.totalSteps || 0;
218-
if (currentStep <= totalSteps) {
231+
if (totalSteps === 0) {
232+
this.logger.log("No total steps found in sessionStorage");
233+
this.hidePage();
234+
return;
235+
} else if (currentStep <= totalSteps) {
219236
this.logger.log(
220237
`Current step ${currentStep} is less or equal to total steps ${totalSteps}`
221238
);
222-
this.hidePage();
239+
this.hidePage(true);
223240
// Redirect to the first page
224241
window.location.href = this.getFirstPageUrl();
225242
return;
@@ -248,15 +265,6 @@ export class OptInLadder {
248265
this.logger.log(`Saved step ${step} of ${totalSteps} to sessionStorage`);
249266
}
250267

251-
private getFirstPageUrl() {
252-
// Get the current URL and replace the last path with 1?chain
253-
const url = new URL(window.location.href);
254-
const path = url.pathname.split("/");
255-
path.pop();
256-
path.push("1");
257-
return url.origin + path.join("/") + "?chain";
258-
}
259-
260268
private saveOptInsToSessionStorage(type: "parent" | "child" = "parent") {
261269
// Grab all the checkboxes with the name starting with "supporter.questions"
262270
const checkboxes = document.querySelectorAll(
@@ -296,15 +304,35 @@ export class OptInLadder {
296304
private isEmbeddedThankYouPage() {
297305
return ENGrid.getBodyData("embedded") === "thank-you-page-donation";
298306
}
299-
private hidePage() {
300-
const engridPage = document.querySelector("#engrid") as HTMLElement;
301-
if (engridPage) {
302-
engridPage.classList.add("hide");
307+
private getPageUrl(page: number, chain: boolean = false): string {
308+
const url = new URL(window.location.href);
309+
const path = url.pathname.split("/");
310+
path[path.length - 1] = String(page);
311+
return url.origin + path.join("/") + (chain ? "?chain" : "");
312+
}
313+
314+
private getFirstPageUrl(): string {
315+
return this.getPageUrl(1, true);
316+
}
317+
318+
private hidePage(forceHide: boolean = false) {
319+
if (ENGrid.getBodyData("opt-in-ladder-persist") === "true" && !forceHide) {
320+
this.logger.log(
321+
"Hide activated, but opt-in ladder persist is enabled, showing the thank-you page"
322+
);
323+
sessionStorage.setItem("engrid.optin-ladder-persist-stop", "Y");
324+
window.location.href = this.getPageUrl(2);
325+
} else {
326+
const engridPage = document.querySelector("#engrid") as HTMLElement;
327+
if (engridPage) {
328+
engridPage.classList.add("hide");
329+
}
303330
}
304331
}
305332
private clearSessionStorage() {
306333
sessionStorage.removeItem("engrid.supporter.questions");
307334
sessionStorage.removeItem("engrid.optin-ladder");
308335
sessionStorage.removeItem("engrid.optin-ladder-stop");
336+
sessionStorage.removeItem("engrid.optin-ladder-persist-stop");
309337
}
310338
}

0 commit comments

Comments
 (0)