@saasquatch/mint-components 1.6.1-9 → 1.6.2-0

package/dist/esm/sqm-stencilbook.entry.js

@@ -1,29 +1,30 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { a as commonjsGlobal, i as useMemo, k as useState, e as useEffect, c as createCommonjsModule, m as h$1 } from './stencil-hooks.module-acc8a613.js';
-import './global-5c84f57f.js';
-import './use-callback-7e0bfd3b.js';
-import { c as dn, l as ln, e as ae$1, d as dist, _ as _e, f as A$1 } from './index.module-f5e17a4e.js';
+import { a as commonjsGlobal, j as useMemo, k as useState, e as useEffect, c as createCommonjsModule, m as h$1 } from './stencil-hooks.module-e39af977.js';
+import './global-59aa17be.js';
+import './use-callback-697e2ff0.js';
+import { c as Ft, R as Rt, n as ne$1, d as dist, l as lt, h as R$1 } from './index.module-c6c6943f.js';
 import './extends-c31f1eff.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-f00f9536.js';
-import { G as GenericTableView } from './GenericTableView-ebc09be0.js';
-import { l as luxon } from './luxon-f44215d9.js';
+import { G as GenericTableView } from './GenericTableView-59c5d47c.js';
+import './useChildElements-31287783.js';
+import { l as luxon } from './luxon-578505e2.js';
 import './utils-334c1e34.js';
 import './sqm-text-span-view-0ba1484d.js';
 import { A as AssetCardView } from './sqm-asset-card-view-08e68656.js';
-import { H as HeroView } from './sqm-hero-view-71d1202f.js';
+import { H as HeroView } from './sqm-hero-view-b54265df.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-06d444ca.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-51714c31.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-ac38b167.js';
-import { a as PoweredByImg$1, P as PortalFooterView } from './sqm-portal-footer-view-a6d09022.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-4181f286.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-5b888e5c.js';
+import { a as PoweredByImg$1, P as PortalFooterView } from './sqm-portal-footer-view-56689d55.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-86d13eef.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-ca454627.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-419d1eb9.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-148efa76.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-213b3af6.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c32dfd7e.js';
-import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-e2996624.js';
+import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-82a3c62b.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-6c249c74.js';
 
 /**
@@ -1848,6 +1849,78 @@ const users = [
     rowNumber: 10,
   },
 ];
+const pointsUsers = [
+  {
+    firstName: "",
+    lastInitial: "",
+    textValue: "82 Points",
+    rank: 1,
+    rowNumber: 1,
+  },
+  {
+    firstName: "MF",
+    lastInitial: "D",
+    textValue: "73 Points",
+    rank: 2,
+    rowNumber: 2,
+  },
+  {
+    firstName: "Freddie",
+    lastInitial: "G",
+    textValue: "64 Points",
+    rank: 3,
+    rowNumber: 3,
+  },
+  {
+    firstName: "Benny",
+    lastInitial: "B",
+    textValue: "55 Points",
+    rank: 4,
+    rowNumber: 4,
+  },
+  {
+    firstName: "Mos",
+    lastInitial: "D",
+    textValue: "46 Points",
+    rank: 5,
+    rowNumber: 5,
+  },
+  {
+    firstName: "Joe",
+    lastInitial: "S",
+    textValue: "42 Points",
+    rank: 6,
+    rowNumber: 6,
+  },
+  {
+    firstName: "Zach",
+    lastInitial: "H",
+    textValue: "41 Points",
+    rank: 7,
+    rowNumber: 7,
+  },
+  {
+    firstName: "Sarah",
+    lastInitial: "S",
+    textValue: "39 Points",
+    rank: 8,
+    rowNumber: 8,
+  },
+  {
+    firstName: "James",
+    lastInitial: "",
+    textValue: "33 Points",
+    rank: 9,
+    rowNumber: 9,
+  },
+  {
+    firstName: "",
+    lastInitial: "J",
+    textValue: "29 Points",
+    rank: 10,
+    rowNumber: 10,
+  },
+];
 const defaultStyles$1 = {
   usersheading: "User",
   statsheading: "Referrals",
@@ -2054,12 +2127,12 @@ const PointsLeaderboard = () => {
     },
     data: {
       rankType: "rowNumber",
-      leaderboard: users,
+      leaderboard: pointsUsers,
       rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        textValue: "82",
+        textValue: "82 Points",
         rank: 1,
         rowNumber: 1,
       },
@@ -2281,36 +2354,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => dn.push("/") }, "/"),
-    h("button", { onClick: () => dn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => dn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => dn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => dn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => dn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => dn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => dn.back() }, "Back"),
-    h("button", { onClick: () => dn.forward() }, "Forward"),
+    h("button", { onClick: () => Ft.push("/") }, "/"),
+    h("button", { onClick: () => Ft.push("/foo") }, "/foo"),
+    h("button", { onClick: () => Ft.push("/bar") }, "/bar"),
+    h("button", { onClick: () => Ft.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => Ft.push("/refer") }, "/refer"),
+    h("button", { onClick: () => Ft.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => Ft.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => Ft.back() }, "Back"),
+    h("button", { onClick: () => Ft.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => dn.push("/") }, "/"),
-    h("button", { onClick: () => dn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => dn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => dn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => dn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => dn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => dn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => dn.back() }, "Back"),
-    h("button", { onClick: () => dn.forward() }, "Forward"),
+    h("button", { onClick: () => Ft.push("/") }, "/"),
+    h("button", { onClick: () => Ft.push("/foo") }, "/foo"),
+    h("button", { onClick: () => Ft.push("/bar") }, "/bar"),
+    h("button", { onClick: () => Ft.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => Ft.push("/refer") }, "/refer"),
+    h("button", { onClick: () => Ft.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => Ft.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => Ft.back() }, "Back"),
+    h("button", { onClick: () => Ft.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => dn.push("/") }, "/"),
-    h("button", { onClick: () => dn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => Ft.push("/") }, "/"),
+    h("button", { onClick: () => Ft.push("/foo") }, "/foo"),
     h("hr", null),
     h("div", { style: { display: "flex", justifyContent: "space-around" } },
       h("sqm-router", { innerHTML: `<template path="/">
@@ -2324,7 +2397,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    dn.push(e.target.value);
+    Ft.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2488,8 +2561,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = ln()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: dn.back }, "Go Back")));
+        h("strong", null, (_a = Rt()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: Ft.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2513,8 +2586,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = ln()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: dn.back }, "Go Back")));
+        h("strong", null, (_a = Rt()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: Ft.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -2608,14 +2681,14 @@ function setupGraphQL$1() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
 }
@@ -2670,14 +2743,14 @@ function setupGraphQL$2() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
 }
@@ -2732,14 +2805,14 @@ function setupGraphQL$3() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
 }
@@ -2873,14 +2946,14 @@ function setupGraphQL$4() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
 }
@@ -2920,14 +2993,14 @@ function setupGraphQL$5() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
 }
@@ -2943,14 +3016,14 @@ function setupOtherGraphQL() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3184,14 +3257,14 @@ function setupGraphQL$6() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3200,7 +3273,7 @@ function useExchangeButton() {
   const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = useState(10);
   const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = _e(EXCHANGE);
+  const [exchange, { data, errors }] = lt(EXCHANGE);
   return {
     states: {
       points,
@@ -3315,14 +3388,14 @@ function setupGraphQL$7() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3336,14 +3409,14 @@ function setupGraphQLKlip({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3357,7 +3430,7 @@ const RewardTableDemoHook = createHookStory(() => {
 });
 const RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL$7();
-  A$1("sam-partner-test-2");
+  R$1("sam-partner-test-2");
   return (h("sqm-rewards-table", null,
     h("sqm-rewards-table-reward-column", null),
     h("sqm-rewards-table-status-column", null),
@@ -3366,7 +3439,7 @@ const RewardsTableWithProgram = createHookStory(() => {
 });
 const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL$7();
-  A$1(undefined);
+  R$1(undefined);
   return (h("sqm-rewards-table", null,
     h("sqm-rewards-table-reward-column", null),
     h("sqm-rewards-table-status-column", null),
@@ -3378,7 +3451,7 @@ const RewardsTableEn = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
-  A$1(undefined);
+  R$1(undefined);
   return (h("sqm-rewards-table", { "per-page": "4" },
     h("sqm-rewards-table-reward-column", null),
     h("sqm-rewards-table-status-column", null),
@@ -3390,7 +3463,7 @@ const RewardsTableTr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
-  A$1(undefined);
+  R$1(undefined);
   return (h("sqm-rewards-table", { "per-page": "4", "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz Referans Yok" },
     h("sqm-rewards-table-reward-column", { "column-title": "\u00D6d\u00FCller", "redeemed-text": "{redeemedAmount} kullan\u0131ld\u0131", "available-text": "{availableAmount} mevcut" }),
     h("sqm-rewards-table-source-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131", "reward-exchange-text": "\u00D6d\u00FClleri Kulann\u0131n", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {Referans} REFERRED {Y\u00F6nlendiren} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Otomatik} other {}}" }),
@@ -3402,7 +3475,7 @@ const RewardsTableFr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
-  A$1(undefined);
+  R$1(undefined);
   return (h("sqm-rewards-table", { "per-page": "4", "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9compenses Maintenant" },
     h("sqm-rewards-table-reward-column", { "column-title": "R\u00E9compenses", "redeemed-text": "{redeemedAmount} rachet\u00E9e", "available-text": "{availableAmount} disponible" }),
     h("sqm-rewards-table-source-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9", "reward-exchange-text": "\u00C9change de R\u00E9compenses", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {R\u00E9f\u00E9rence \u00E0} REFERRED {R\u00E9f\u00E9renc\u00E9 par} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Automatique} other {}}" }),
@@ -3436,14 +3509,14 @@ function setupGraphQL$8() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3781,11 +3854,11 @@ const NewPortal = /*#__PURE__*/Object.freeze({
   Activity: Activity
 });
 
-const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          padding=\"none\"\n          text-align=\"center\"\n          label-margin=\"xx-small\"\n        >\n          <h3 slot=\"label\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          show-labels\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          padding=\"none\"\n          text-align=\"center\"\n          label-margin=\"xx-small\"\n        >\n          <h3 slot=\"label\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          show-labels\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n        >\n          <p>Points Balance</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Share $50 with friends</h3>\n          <p slot=\"content\">\n            They’ll get a $50 credit towards a new account and you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share:\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n        >\n          <p>Points Balance</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Share $50 with friends</h3>\n          <p slot=\"content\">\n            They’ll get a $50 credit towards a new account and you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share:\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n          <sqm-scroll\n            scroll-id=\"tab-2\"\n            outline\n            button-type=\"primary\"\n            button-text=\"Redeem your rewards\"\n            mobile\n            size=\"medium\"\n          >\n          </sqm-scroll>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"center\"\n          >\n            <h3 slot=\"label\">Earn points</h3>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-titled-section\n              padding=\"none\"\n              text-align=\"center\"\n              label-margin=\"xx-small\"\n            >\n              <h3 slot=\"label\">Reward History</h3>\n            </sqm-titled-section>\n            <sqm-rewards-table\n              per-page=\"4\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-portal-container>\n        </sqm-portal-container>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"center\"\n          >\n            <h3 slot=\"label\">Earn points</h3>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-titled-section\n              padding=\"none\"\n              text-align=\"center\"\n              label-margin=\"xx-small\"\n            >\n              <h3 slot=\"label\">Reward History</h3>\n            </sqm-titled-section>\n            <sqm-rewards-table\n              per-page=\"4\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-portal-container>\n        </sqm-portal-container>\n        <sqm-portal-footer\n          support-email=\"support@example.com\"\n          terms-link=\"https://example.com\"\n          faq-link=\"https://example.com\"\n          terms-text=\"Terms And Conditions\"\n          faq-text=\"FAQ\"\n          show-powered-by=\"true\"\n          padding-bottom=\"none\"\n          padding-left=\"none\"\n          padding-right=\"none\"\n          padding-top=\"none\"\n        ></sqm-portal-footer>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
 const Widget_stories = {
   title: "Templates / Widgets",
@@ -4258,7 +4331,7 @@ const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   EmailVerificationSuccess: EmailVerificationSuccess
 });
 
-const scenario$8 = "@author:derek\n@owner:ian\nFeature: Reset Password\n\n    Background: A user in on the password reset page\n        Given a user who has been redirected to the password reset page\n\n    @motivating\n    Scenario: Users can reset their password\n        Given a user has a valid oob code as a url query parameter\n        When they enter their password twice\n        And they click \"Update\"\n        Then their password is updated\n        And a banner with a success message is displayed\n        And they can log in with their new password\n\n    @motivating\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\n        Given a user has a <oobCode> as a url query parameter\n        And the component <mayHave> \"failed-page\" with <value>\n        Then they see an error message saying that their password reset code is invalid/expired\n        When they click \"Continue\"\n        Then they are redirected to <redirectPath>\n        Examples:\n            | oobCode               | mayHave      | value  | redirectPath |\n            | invalid oob code      | doesn't have | N/A    | /            |\n            | non existant oob code | doesn't have | N/A    | /            |\n            | invalid oob code      | has          | /login | /login       |\n            | non existant oob code | has          | /login | /login       |\n\n    @motivating\n    Scenario: Users must enter the same password twice to successfully reset their password\n        Given a user has been redirected to the password reset page\n        And they have a valid oob code as a url query parameter\n        When they enter two different passwords into the password reset form\n        And they click \"Update\"\n        Then their password is not be reset\n        And an error banner stating the input passwords must match appears\n        And their password is not be reset\n        When they enter the same password twice\n        And they click \"Update\"\n        Then a banner appears with a success message\n        And they can log in with their new password\n\n    @motivating\n    Scenario: Users are redirected to \"/\" by default\n        Given the component does not have prop \"nextPage\"\n        And the users url does not contain a \"nextPage\" query parameter\n        And a user has entered their password twice\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to \"/\"\n\n    @motivating\n    Scenario: Custom redirection can be configured\n        Given the component has prop \"nextPage\" with value \"/activity\"\n        And the users url does not contain a \"nextPage\" query parameter\n        And a user has entered their password twice\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to \"/activity\"\n\n    @motivating\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n        Given the component is loaded at <currentUrl>\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to <url>\n        Examples:\n            | currentUrl                                                                 | url                                           |\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\n\n    @landmine\n    Scenario Outline: Username and password are not persisted on redirects\n        Given the component is loaded at <currentUrl>\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to <url>\n        Examples:\n            | currentUrl                                              | url                                  |\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
+const scenario$8 = "@author:derek\n@owner:ian\nFeature: Reset Password\n\n    Background: A user in on the password reset page\n        Given a user who has been redirected to the password reset page\n\n    @motivating\n    Scenario: Users can reset their password\n        Given a user has a valid oob code as a url query parameter\n        When they enter their password twice\n        And they click \"Update\"\n        Then their password is updated\n        And a banner with a success message is displayed\n        And they can log in with their new password\n\n    @motivating\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\n        Given a user has a <oobCode> as a url query parameter\n        And the component <mayHave> \"failed-page\" with <value>\n        Then they see an error message saying that their password reset code is invalid/expired\n        When they click \"Continue\"\n        Then they are redirected to <redirectPath>\n        Examples:\n            | oobCode               | mayHave      | value  | redirectPath |\n            | invalid oob code      | doesn't have | N/A    | /            |\n            | non existant oob code | doesn't have | N/A    | /            |\n            | invalid oob code      | has          | /login | /login       |\n            | non existant oob code | has          | /login | /login       |\n\n    @motivating\n    Scenario: Users must enter the same password twice to successfully reset their password\n        Given a user has been redirected to the password reset page\n        And they have a valid oob code as a url query parameter\n        When they enter two different passwords into the password reset form\n        And they click \"Update\"\n        Then their password is not be reset\n        And an error banner stating the input passwords must match appears\n        And their password is not be reset\n        When they enter the same password twice\n        And they click \"Update\"\n        Then a banner appears with a success message\n        And they can log in with their new password\n\n    @motivating\n    Scenario: Users are notified if resetting their password fails\n        Given a user has a valid oob code as a url query parameter\n        When they enter their password twice\n        And they click \"Update\"\n        But the password reset fails\n        Then the user's password does not reset\n        And an error banner is shown\n\n    @motivating\n    Scenario: Users are redirected to \"/\" by default\n        Given the component does not have prop \"nextPage\"\n        And the users url does not contain a \"nextPage\" query parameter\n        And a user has entered their password twice\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to \"/\"\n\n    @motivating\n    Scenario: Custom redirection can be configured\n        Given the component has prop \"nextPage\" with value \"/activity\"\n        And the users url does not contain a \"nextPage\" query parameter\n        And a user has entered their password twice\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to \"/activity\"\n\n    @motivating\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n        Given the component is loaded at <currentUrl>\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to <url>\n        Examples:\n            | currentUrl                                                                 | url                                           |\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\n\n    @landmine\n    Scenario Outline: Username and password are not persisted on redirects\n        Given the component is loaded at <currentUrl>\n        When they click \"Update\"\n        Then their password is updated\n        And they are redirected to <url>\n        Examples:\n            | currentUrl                                              | url                                  |\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
 
 const PortalResetPassword_stories = {
   title: "Components/Portal Reset Password",
@@ -6495,23 +6568,23 @@ const TaskCard$2 = /*#__PURE__*/Object.freeze({
   ProgressBarStepsFinite: ProgressBarStepsFinite
 });
 
-const portalTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-graphql-client-provider\n          domain=\"https://managed-identity.saasquatch.com\"\n        >\n          <sqm-hero\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n          >\n            <sqm-router>\n              <template path=\"/register\">\n                <sqm-portal-register>\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n                </sqm-portal-register>\n              </template>\n\n              <template path=\"/emailVerification\">\n                <sqm-portal-protected-route\n                  redirect-to=\"/login\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-email-verification></sqm-portal-email-verification>\n              </template>\n\n              <template path=\"/login\">\n                <sqm-portal-login></sqm-portal-login>\n              </template>\n\n              <template path=\"/verifyEmail\">\n                <sqm-portal-verify-email></sqm-portal-verify-email>\n              </template>\n\n              <template path=\"/forgotPassword\">\n                <sqm-portal-forgot-password\n                  email-label=\"Business Email\"\n                ></sqm-portal-forgot-password>\n              </template>\n\n              <template path=\"/resetPassword\">\n                <sqm-portal-reset-password\n                  confirm-password=\"true\"\n                ></sqm-portal-reset-password>\n              </template>\n              <template path=\"/logout\">\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n              </template>\n            </sqm-router>\n          </sqm-hero>\n        </sqm-graphql-client-provider>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-graphql-client-provider\n                    domain=\"https://managed-identity.saasquatch.com\"\n                  >\n                    <sqm-portal-change-password></sqm-portal-change-password>\n                  </sqm-graphql-client-provider>\n                </sqm-portal-container>\n              </template>\n\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const portalTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
-const portalLeadSubmitTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-graphql-client-provider\n          domain=\"https://managed-identity.saasquatch.com\"\n        >\n          <sqm-hero\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n          >\n            <sqm-router>\n              <template path=\"/register\">\n                <sqm-portal-register>\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n                </sqm-portal-register>\n              </template>\n\n              <template path=\"/emailVerification\">\n                <sqm-portal-protected-route\n                  redirect-to=\"/login\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-email-verification></sqm-portal-email-verification>\n              </template>\n\n              <template path=\"/login\">\n                <sqm-portal-login></sqm-portal-login>\n              </template>\n\n              <template path=\"/verifyEmail\">\n                <sqm-portal-verify-email></sqm-portal-verify-email>\n              </template>\n\n              <template path=\"/forgotPassword\">\n                <sqm-portal-forgot-password\n                  email-label=\"Business Email\"\n                ></sqm-portal-forgot-password>\n              </template>\n\n              <template path=\"/resetPassword\">\n                <sqm-portal-reset-password\n                  confirm-password=\"true\"\n                ></sqm-portal-reset-password>\n              </template>\n              <template path=\"/logout\">\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n              </template>\n            </sqm-router>\n          </sqm-hero>\n        </sqm-graphql-client-provider>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-graphql-client-provider\n                    domain=\"https://managed-identity.saasquatch.com\"\n                  >\n                    <sqm-portal-change-password></sqm-portal-change-password>\n                  </sqm-graphql-client-provider>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const portalLeadSubmitTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
-const portalLeadSubmitTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-graphql-client-provider\n          domain=\"https://managed-identity.saasquatch.com\"\n        >\n          <sqm-hero\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n          >\n            <sqm-router>\n              <template path=\"/register\">\n                <sqm-portal-register>\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n                </sqm-portal-register>\n              </template>\n\n              <template path=\"/emailVerification\">\n                <sqm-portal-protected-route\n                  redirect-to=\"/login\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-email-verification></sqm-portal-email-verification>\n              </template>\n\n              <template path=\"/login\">\n                <sqm-portal-login></sqm-portal-login>\n              </template>\n\n              <template path=\"/verifyEmail\">\n                <sqm-portal-verify-email></sqm-portal-verify-email>\n              </template>\n\n              <template path=\"/forgotPassword\">\n                <sqm-portal-forgot-password\n                  email-label=\"Business Email\"\n                ></sqm-portal-forgot-password>\n              </template>\n\n              <template path=\"/resetPassword\">\n                <sqm-portal-reset-password\n                  confirm-password=\"true\"\n                ></sqm-portal-reset-password>\n              </template>\n              <template path=\"/logout\">\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n              </template>\n            </sqm-router>\n          </sqm-hero>\n        </sqm-graphql-client-provider>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Tweet about us</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-graphql-client-provider\n                    domain=\"https://managed-identity.saasquatch.com\"\n                  >\n                    <sqm-portal-change-password></sqm-portal-change-password>\n                  </sqm-graphql-client-provider>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const portalLeadSubmitTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Tweet about us</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
-const portalTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-graphql-client-provider\n          domain=\"https://managed-identity.saasquatch.com\"\n        >\n          <sqm-hero\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n          >\n            <sqm-router>\n              <template path=\"/register\">\n                <sqm-portal-register>\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n                </sqm-portal-register>\n              </template>\n\n              <template path=\"/emailVerification\">\n                <sqm-portal-protected-route\n                  redirect-to=\"/login\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-email-verification></sqm-portal-email-verification>\n              </template>\n\n              <template path=\"/login\">\n                <sqm-portal-login></sqm-portal-login>\n              </template>\n\n              <template path=\"/verifyEmail\">\n                <sqm-portal-verify-email></sqm-portal-verify-email>\n              </template>\n\n              <template path=\"/forgotPassword\">\n                <sqm-portal-forgot-password\n                  email-label=\"Business Email\"\n                ></sqm-portal-forgot-password>\n              </template>\n\n              <template path=\"/resetPassword\">\n                <sqm-portal-reset-password\n                  confirm-password=\"true\"\n                ></sqm-portal-reset-password>\n              </template>\n              <template path=\"/logout\">\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n              </template>\n            </sqm-router>\n          </sqm-hero>\n        </sqm-graphql-client-provider>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Tweet about us</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-graphql-client-provider\n                    domain=\"https://managed-identity.saasquatch.com\"\n                  >\n                    <sqm-portal-change-password></sqm-portal-change-password>\n                  </sqm-graphql-client-provider>\n                </sqm-portal-container>\n              </template>\n\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const portalTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Tweet about us</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
-const multiProgramTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program-1\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-graphql-client-provider\n          domain=\"https://managed-identity.saasquatch.com\"\n        >\n          <sqm-hero\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n          >\n            <sqm-router>\n              <template path=\"/register\">\n                <sqm-portal-register>\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n                </sqm-portal-register>\n              </template>\n\n              <template path=\"/emailVerification\">\n                <sqm-portal-protected-route\n                  redirect-to=\"/login\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-email-verification></sqm-portal-email-verification>\n              </template>\n\n              <template path=\"/login\">\n                <sqm-portal-login></sqm-portal-login>\n              </template>\n\n              <template path=\"/verifyEmail\">\n                <sqm-portal-verify-email></sqm-portal-verify-email>\n              </template>\n\n              <template path=\"/forgotPassword\">\n                <sqm-portal-forgot-password\n                  email-label=\"Business Email\"\n                ></sqm-portal-forgot-password>\n              </template>\n\n              <template path=\"/resetPassword\">\n                <sqm-portal-reset-password\n                  confirm-password=\"true\"\n                ></sqm-portal-reset-password>\n              </template>\n              <template path=\"/logout\">\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n              </template>\n            </sqm-router>\n          </sqm-hero>\n        </sqm-graphql-client-provider>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-program-switch>\n                  <template program-id=\"referral-program-1\">\n                    <sqb-widget\n                      widget-type=\"p/referral-program-1/w/referrerWidget\"\n                      track-loads=\"true\"\n                    ></sqb-widget>\n                  </template>\n                  <template program-id=\"referral-program-2\">\n                    <sqb-widget\n                      widget-type=\"p/referral-program-2/w/referrerWidget\"\n                      track-loads=\"true\"\n                    ></sqb-widget>\n                  </template>\n                </sqb-program-switch>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile></sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-graphql-client-provider\n                    domain=\"https://managed-identity.saasquatch.com\"\n                  >\n                    <sqm-portal-change-password></sqm-portal-change-password>\n                  </sqm-graphql-client-provider>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const multiProgramTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program-1\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-program-switch>\n                  <template program-id=\"referral-program-1\">\n                    <sqb-widget\n                      widget-type=\"p/referral-program-1/w/referrerWidget\"\n                      track-loads=\"true\"\n                    ></sqb-widget>\n                  </template>\n                  <template program-id=\"referral-program-2\">\n                    <sqb-widget\n                      widget-type=\"p/referral-program-2/w/referrerWidget\"\n                      track-loads=\"true\"\n                    ></sqb-widget>\n                  </template>\n                </sqb-program-switch>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile></sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
-const multiProgramTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program-1\">\n    <sqm-graphql-client-provider\n      domain=\"https://managed-identity.saasquatch.com\"\n    >\n      <sqm-hero\n        background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n      >\n        <sqm-router>\n          <template path=\"/register\">\n            <sqm-portal-register>\n              <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n            </sqm-portal-register>\n          </template>\n\n          <template path=\"/emailVerification\">\n            <sqm-portal-protected-route\n              redirect-to=\"/login\"\n            ></sqm-portal-protected-route>\n            <sqm-portal-email-verification></sqm-portal-email-verification>\n          </template>\n\n          <template path=\"/login\">\n            <sqm-portal-login></sqm-portal-login>\n          </template>\n\n          <template path=\"/verifyEmail\">\n            <sqm-portal-verify-email></sqm-portal-verify-email>\n          </template>\n\n          <template path=\"/forgotPassword\">\n            <sqm-portal-forgot-password\n              email-label=\"Business Email\"\n            ></sqm-portal-forgot-password>\n          </template>\n\n          <template path=\"/resetPassword\">\n            <sqm-portal-reset-password\n              confirm-password=\"true\"\n            ></sqm-portal-reset-password>\n          </template>\n          <template path=\"/logout\">\n            <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n          </template>\n        </sqm-router>\n      </sqm-hero>\n    </sqm-graphql-client-provider>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Tweet about us</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-graphql-client-provider\n                    domain=\"https://managed-identity.saasquatch.com\"\n                  >\n                    <sqm-portal-change-password></sqm-portal-change-password>\n                  </sqm-graphql-client-provider>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const multiProgramTemplateWithDashboard = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program-1\">\n    <sqm-hero\n      background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n    >\n      <sqm-router>\n        <template path=\"/register\">\n          <sqm-portal-register>\n            <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n          </sqm-portal-register>\n        </template>\n\n        <template path=\"/emailVerification\">\n          <sqm-portal-protected-route\n            redirect-to=\"/login\"\n          ></sqm-portal-protected-route>\n          <sqm-portal-email-verification></sqm-portal-email-verification>\n        </template>\n\n        <template path=\"/login\">\n          <sqm-portal-login></sqm-portal-login>\n        </template>\n\n        <template path=\"/verifyEmail\">\n          <sqm-portal-verify-email></sqm-portal-verify-email>\n        </template>\n\n        <template path=\"/forgotPassword\">\n          <sqm-portal-forgot-password\n            email-label=\"Business Email\"\n          ></sqm-portal-forgot-password>\n        </template>\n\n        <template path=\"/resetPassword\">\n          <sqm-portal-reset-password\n            confirm-password=\"true\"\n          ></sqm-portal-reset-password>\n        </template>\n        <template path=\"/logout\">\n          <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n        </template>\n      </sqm-router>\n    </sqm-hero>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-program-menu>\n              <sl-menu-item value=\"referral-program-1\"\n                >Referral Program 1</sl-menu-item\n              >\n              <sl-menu-item value=\"referral-program-2\"\n                >Referral Program 2</sl-menu-item\n              >\n            </sqm-program-menu>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Tweet about us</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
 const dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\"\n  ><sqm-titled-section label-margin=\"xx-small\"\n    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n    ><sqm-text slot=\"content\">\n      <h1>\n        <sqm-user-name fallback=\"Anonymous User\"></sqm-user-name>\n      </h1> </sqm-text\n  ></sqm-titled-section>\n  <sqm-stat-container space=\"xxxx-large\"\n    ><sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/referralsCount\"\n      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n    >\n  </sqm-stat-container> </sqm-portal-container\n><sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n    ><sqm-text slot=\"label\"> <h2>Partner and Profit</h2> </sqm-text\n    ><sqm-text slot=\"content\">\n      <p>\n        Get rewarded for referring potential customers to SaaSquatch. Earn\n        commission for each successful lead you send our way\n      </p>\n    </sqm-text></sqm-titled-section\n  >\n  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n    ><sqm-text slot=\"label\"> <h3>Share your referral link</h3> </sqm-text\n    ><sqm-share-link slot=\"content\"></sqm-share-link\n  ></sqm-titled-section>\n  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n    <sqm-text slot=\"label\"> <h3>Share your referral code</h3> </sqm-text\n    ><sqm-share-code slot=\"content\"></sqm-share-code>\n  </sqm-titled-section>\n  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n    ><sqm-text slot=\"label\"> <h3>Share via social media</h3> </sqm-text\n    ><sqm-portal-container\n      slot=\"content\"\n      direction=\"row\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      min-width=\"160px\"\n      ><sqm-share-button\n        icon=\"envelope\"\n        medium=\"email\"\n        size=\"medium\"\n        pill=\"true\"\n        >Email a friend</sqm-share-button\n      ><sqm-share-button medium=\"twitter\" size=\"medium\" pill=\"true\"\n        >Tweet about us</sqm-share-button\n      ><sqm-share-button medium=\"facebook\" size=\"medium\" pill=\"true\"\n        >Share on Facebook</sqm-share-button\n      ></sqm-portal-container\n    ></sqm-titled-section\n  ></sqm-portal-container\n>\n";
 
 const leadSubmitTemplate = "<sqm-referral-iframe></sqm-referral-iframe>\n";
 
-const editProfileTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-graphql-client-provider domain=\"https://managed-identity.saasquatch.com\">\n    <sqm-portal-change-password></sqm-portal-change-password>\n  </sqm-graphql-client-provider>\n</sqm-portal-container>\n";
+const editProfileTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n";
 
 const activityTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n  <sqm-text> <h1>Activity</h1></sqm-text>\n  <sqm-stat-container space=\"xxxx-large\"\n    ><sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/referralsCount\"\n      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n    >\n  </sqm-stat-container>\n  <sqm-referral-table>\n    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n    <sqm-referral-table-date-column\n      column-title=\"Referred\"\n      date-shown=\"dateReferralStarted\"\n    ></sqm-referral-table-date-column> </sqm-referral-table\n></sqm-portal-container>\n";
 
@@ -9555,16 +9628,16 @@ function DefaultTemplateView$1(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      h("button", { onClick: () => dn.push("/") }, "Dashboard"),
-      props.leadSubmit && (h("button", { onClick: () => dn.push("/refer") }, "Submit a Referral")),
-      h("button", { onClick: () => dn.push("/activity") }, "Activity"),
-      h("button", { onClick: () => dn.push("/editProfile") }, "Edit Profile"),
-      h("button", { onClick: () => dn.push("/login") }, "Login"),
-      h("button", { onClick: () => dn.push("/register") }, "Register"),
-      h("button", { onClick: () => dn.push("/emailVerification") }, "Email Verification"),
-      h("button", { onClick: () => dn.push("/verifyEmail") }, "Verify Email"),
-      h("button", { onClick: () => dn.push("/forgotPassword") }, "Forgot Password"),
-      h("button", { onClick: () => dn.push("/resetPassword") }, "Reset Password")),
+      h("button", { onClick: () => Ft.push("/") }, "Dashboard"),
+      props.leadSubmit && (h("button", { onClick: () => Ft.push("/refer") }, "Submit a Referral")),
+      h("button", { onClick: () => Ft.push("/activity") }, "Activity"),
+      h("button", { onClick: () => Ft.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => Ft.push("/login") }, "Login"),
+      h("button", { onClick: () => Ft.push("/register") }, "Register"),
+      h("button", { onClick: () => Ft.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => Ft.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => Ft.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => Ft.push("/resetPassword") }, "Reset Password")),
     h("br", null),
     h("div", { innerHTML: states.previewTemplate })));
 }
@@ -10138,14 +10211,14 @@ function setupGraphQL$9() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10254,14 +10327,14 @@ function setupGraphQL$a() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10409,14 +10482,14 @@ function setupGraphQL$b() {
     programId,
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -11555,14 +11628,14 @@ function setupGraphQL$c() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
@@ -11576,21 +11649,21 @@ function setupGraphQLKlip$1({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   useEffect(() => {
-    ae$1({
+    ne$1({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      ae$1(undefined);
+      ne$1(undefined);
     };
   }, []);
   return { id, accountId };
 }
 const ReferralTable$1 = createHookStory(() => {
   setupGraphQL$c();
-  A$1("sam-partner-test-2");
+  R$1("sam-partner-test-2");
   return (h("sqm-referral-table", null,
     h("sqm-referral-table-user-column", null),
     h("sqm-referral-table-status-column", null),
@@ -11616,7 +11689,7 @@ const ReferralTableEn = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
-  A$1("klip-referral-program");
+  R$1("klip-referral-program");
   return (h("sqm-referral-table", { "per-page": "4" },
     h("sqm-referral-table-user-column", { "column-title": "User" }),
     h("sqm-referral-table-status-column", { "column-title": "Referral Status" }),
@@ -11628,7 +11701,7 @@ const ReferralTableTr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
-  A$1("klip-referral-program");
+  R$1("klip-referral-program");
   return (h("sqm-referral-table", { "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz \u00D6d\u00FCl Yok", "per-page": "4" },
     h("sqm-referral-table-user-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131" }),
     h("sqm-referral-table-status-column", { "column-title": "Durumu", "converted-status-text": "D\u00F6n\u00FC\u015Ft\u00FCr", "in-progress-status-text": "Devam etmekte" }),
@@ -11640,7 +11713,7 @@ const ReferralTableFr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
-  A$1("klip-referral-program");
+  R$1("klip-referral-program");
   return (h("sqm-referral-table", { "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9f\u00E9rence Maintenant", "per-page": "4" },
     h("sqm-referral-table-user-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9" }),
     h("sqm-referral-table-status-column", { "column-title": "Statut de Parrainage", "converted-status-text": "Converti", "in-progress-status-text": "En cours" }),