@saasquatch/mint-components 1.8.0-99 → 1.8.0

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

@@ -1,32 +1,32 @@
-import { h, r as registerInstance, c as Host } from './index-f16aa635.js';
-import { a as commonjsGlobal, u as useMemo, j as useState, f as useEffect, c as createCommonjsModule, m as h$1 } from './stencil-hooks.module-aa42e74f.js';
-import './global-2d34c7d9.js';
-import { y as yn, p as pn, e as setUserIdentity, d as dist, B as Be, o as setProgramId } from './index.module-a46df001.js';
+import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
+import { a as commonjsGlobal, u as useMemo, k as useState, f as useEffect, c as createCommonjsModule, n as h$1 } from './stencil-hooks.module-8032b139.js';
+import './global-35b8d91c.js';
+import { $ as $n, S as Sn, b as setUserIdentity, d as dist, X as Xe, o as setProgramId } from './index.module-6242dccd.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { G as GenericTableView } from './GenericTableView-a2b0ba19.js';
-import './useChildElements-b6d750df.js';
-import { l as luxon } from './luxon-01b10a1d.js';
+import { G as GenericTableView } from './GenericTableView-d59d8ab4.js';
+import './useChildElements-92ae8069.js';
+import { l as luxon } from './luxon-4706d11b.js';
 import './utils-334c1e34.js';
-import './sqm-text-span-view-d776bd9c.js';
-import { A as AssetCardView } from './sqm-asset-card-view-24845a25.js';
-import { C as CloseButtonView } from './sqm-close-button-view-233e2434.js';
+import './sqm-text-span-view-8d140661.js';
+import { A as AssetCardView } from './sqm-asset-card-view-9d93fbdd.js';
+import { C as CloseButtonView } from './sqm-close-button-view-dc65b4e3.js';
 import './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-f48adc22.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-d704f03c.js';
-import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ae8f259.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-6f66acc9.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-e06988b9.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-de885af1.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-c57e849c.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-1ec985ec.js';
-import './utilities-8d9fb379.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-e523c018.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-fb6875bb.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-8ab7e840.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-e42e3789.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-45e3b5c2.js';
+import { E as EmailRegistrationView } from './email-registration-view-4a4202e7.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-2c6122cd.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-414bcb19.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-058eba98.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-251945de.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-a764ad67.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-0294c422.js';
+import './utilities-94e1e2b4.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-d3e726a9.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-283bf637.js';
+import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-d9424229.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-ab89c6cc.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-1115795f.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -2392,36 +2392,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => yn.push("/") }, "/"),
-    h("button", { onClick: () => yn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => yn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => yn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => yn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => yn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => yn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => yn.back() }, "Back"),
-    h("button", { onClick: () => yn.forward() }, "Forward"),
+    h("button", { onClick: () => $n.push("/") }, "/"),
+    h("button", { onClick: () => $n.push("/foo") }, "/foo"),
+    h("button", { onClick: () => $n.push("/bar") }, "/bar"),
+    h("button", { onClick: () => $n.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => $n.push("/refer") }, "/refer"),
+    h("button", { onClick: () => $n.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => $n.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => $n.back() }, "Back"),
+    h("button", { onClick: () => $n.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => yn.push("/") }, "/"),
-    h("button", { onClick: () => yn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => yn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => yn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => yn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => yn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => yn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => yn.back() }, "Back"),
-    h("button", { onClick: () => yn.forward() }, "Forward"),
+    h("button", { onClick: () => $n.push("/") }, "/"),
+    h("button", { onClick: () => $n.push("/foo") }, "/foo"),
+    h("button", { onClick: () => $n.push("/bar") }, "/bar"),
+    h("button", { onClick: () => $n.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => $n.push("/refer") }, "/refer"),
+    h("button", { onClick: () => $n.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => $n.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => $n.back() }, "Back"),
+    h("button", { onClick: () => $n.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => yn.push("/") }, "/"),
-    h("button", { onClick: () => yn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => $n.push("/") }, "/"),
+    h("button", { onClick: () => $n.push("/foo") }, "/foo"),
     h("hr", null),
     h("div", { style: { display: "flex", justifyContent: "space-around" } },
       h("sqm-router", { innerHTML: `<template path="/">
@@ -2435,7 +2435,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    yn.push(e.target.value);
+    $n.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2599,8 +2599,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = pn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: yn.back }, "Go Back")));
+        h("strong", null, (_a = Sn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: $n.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2624,8 +2624,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = pn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: yn.back }, "Go Back")));
+        h("strong", null, (_a = Sn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: $n.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -3352,7 +3352,7 @@ function useExchangeButton() {
   const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = useState(10);
   const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = Be(EXCHANGE);
+  const [exchange, { data, errors }] = Xe(EXCHANGE);
   return {
     states: {
       points,
@@ -3953,16 +3953,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      h("button", { onClick: () => yn.push("/") }, "Dashboard"),
-      props.leadSubmit && (h("button", { onClick: () => yn.push("/refer") }, "Submit a Referral")),
-      h("button", { onClick: () => yn.push("/activity") }, "Activity"),
-      h("button", { onClick: () => yn.push("/editProfile") }, "Edit Profile"),
-      h("button", { onClick: () => yn.push("/login") }, "Login"),
-      h("button", { onClick: () => yn.push("/register") }, "Register"),
-      h("button", { onClick: () => yn.push("/emailVerification") }, "Email Verification"),
-      h("button", { onClick: () => yn.push("/verifyEmail") }, "Verify Email"),
-      h("button", { onClick: () => yn.push("/forgotPassword") }, "Forgot Password"),
-      h("button", { onClick: () => yn.push("/resetPassword") }, "Reset Password")),
+      h("button", { onClick: () => $n.push("/") }, "Dashboard"),
+      props.leadSubmit && (h("button", { onClick: () => $n.push("/refer") }, "Submit a Referral")),
+      h("button", { onClick: () => $n.push("/activity") }, "Activity"),
+      h("button", { onClick: () => $n.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => $n.push("/login") }, "Login"),
+      h("button", { onClick: () => $n.push("/register") }, "Register"),
+      h("button", { onClick: () => $n.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => $n.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => $n.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => $n.push("/resetPassword") }, "Reset Password")),
     h("br", null),
     h("div", { innerHTML: states.previewTemplate })));
 }
@@ -9901,7 +9901,7 @@ const portalTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\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 taxAndCashTemplate = "<sqm-portal-frame>\n    <a slot=\"header\" href=\"/\">\n        <sqm-text style=\"height: 60px\">\n            <img style=\"height: 60px\"\n                src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\" />\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                <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                    <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 redirect-to=\"/login\"></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 email-label=\"Business Email\"></sqm-portal-forgot-password>\n                        </template>\n\n                        <template path=\"/resetPassword\">\n                            <sqm-portal-reset-password confirm-password=\"true\"></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 direction=\"row\" style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \">\n                    <sqm-navigation-sidebar>\n                        <sqm-navigation-sidebar-item path=\"/\" icon=\"house\"\n                            label=\"Dashboard\"></sqm-navigation-sidebar-item>\n                        <sqm-navigation-sidebar-item path=\"/taxAndCash\" icon=\"file-earmark-text\"\n                            label=\"Tax and Cash\"></sqm-navigation-sidebar-item>\n                        <sqm-navigation-sidebar-item path=\"/activity\" icon=\"bar-chart\"\n                            label=\"Activity\"></sqm-navigation-sidebar-item>\n                        <sqm-navigation-sidebar-item path=\"/editProfile\" icon=\"person\"\n                            label=\"Edit Profile\"></sqm-navigation-sidebar-item>\n                        <sqm-navigation-sidebar-item path=\"/logout\" icon=\"box-arrow-right\"\n                            label=\"Logout\"></sqm-navigation-sidebar-item>\n                    </sqm-navigation-sidebar>\n                    <sqm-divided-layout direction=\"column\" content-area-width=\"1200px\">\n                        <sqm-router>\n                            <template path=\"/\">\n                                <sqm-portal-protected-route require-email-verification=\"true\" redirect-to=\"/login\"\n                                    redirect-to-unverified=\"/emailVerification\"></sqm-portal-protected-route>\n                                <sqb-widget widget-type=\"p/referral-program/w/referrerWidget\"\n                                    track-loads=\"true\"></sqb-widget>\n                            </template>\n                            <template path=\"/editProfile\">\n                                <sqm-portal-protected-route require-email-verification=\"true\" redirect-to=\"/login\"\n                                    redirect-to-unverified=\"/emailVerification\"></sqm-portal-protected-route>\n                                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                                    <sqm-portal-profile></sqm-portal-profile>\n                                </sqm-portal-container><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 require-email-verification=\"true\" redirect-to=\"/login\"\n                                    redirect-to-unverified=\"/emailVerification\"></sqm-portal-protected-route>\n                                <sqm-referral-iframe></sqm-referral-iframe>\n                            </template>\n                            <template path=\"/activity\">\n                                <sqm-portal-protected-route require-email-verification=\"true\" redirect-to=\"/login\"\n                                    redirect-to-unverified=\"/emailVerification\"></sqm-portal-protected-route>\n                                <sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n                                    <sqm-text>\n                                        <h1>Activity</h1>\n                                    </sqm-text>\n                                    <sqm-stat-container space=\"xxxx-large\"><sqm-big-stat flex-reverse=\"true\"\n                                            alignment=\"left\" stat-type=\"/referralsCount\"><sqm-text>\n                                                <p>Referrals</p>\n                                            </sqm-text></sqm-big-stat>\n                                        <sqm-big-stat flex-reverse=\"true\" alignment=\"left\"\n                                            stat-type=\"/rewardsCountFiltered/AVAILABLE\"><sqm-text>\n                                                <p>Rewards Earned</p>\n                                            </sqm-text></sqm-big-stat>\n                                        <sqm-big-stat flex-reverse=\"true\" alignment=\"left\"\n                                            stat-type=\"/rewardBalance/CREDIT/CENTS\"><sqm-text>\n                                                <p>Reward Balance</p>\n                                            </sqm-text></sqm-big-stat>\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 column-title=\"Referred\"\n                                            date-shown=\"dateReferralStarted\"></sqm-referral-table-date-column>\n                                    </sqm-referral-table></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 slot=\"footer\" support-email=\"support@example.com\" terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\" terms-text=\"Terms And Conditions\" faq-text=\"FAQ\"\n        show-powered-by=\"true\"></sqm-portal-footer>\n</sqm-portal-frame>";
+const taxAndCashTemplate = "<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=\"/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=\"/taxAndCash\"\n              icon=\"file-earmark-text\"\n              label=\"Tax & Payout Settings\"\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\" content-area-width=\"1200px\">\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>\n                    <h1>Activity</h1>\n                  </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>\n                        <p>Referrals</p>\n                      </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>\n                        <p>Rewards Earned</p>\n                      </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>\n                        <p>Reward Balance</p>\n                      </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              <template path=\"/taxAndCash\">\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-tax-and-cash\n                  step-1_first-name=\"First name\"\n                  step-1_last-name=\"Last name\"\n                  step-1_email=\"Email\"\n                  step-1_country=\"Country\"\n                  step-1_currency=\"Currency\"\n                  step-1_currency-help-text=\"Choose your preferred payout currency\"\n                  step-1_allow-banking-collection=\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\"\n                  step-1_personal-information=\"Personal Information\"\n                  step-1_terms-and-conditions-label=\"terms and conditions\"\n                  step-1_search-for-currency-text=\"Search for currency..\"\n                  step-2_indirect-tax=\"Indirect Tax\"\n                  step-2_indirect-tax-description=\"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments.\"\n                  step-2_indirect-tax-details=\"Indirect tax details\"\n                  step-2_other-region=\"Registered for indirect tax\"\n                  step-2_other-region-subtext=\"If you’ve registered with your tax authority, add your information to stay tax compliant.\"\n                  step-2_not-registered=\"Not registered for indirect tax\"\n                  step-2_not-registered-subtext=\"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered.\"\n                  step-2_selected-region=\"Country / region of indirect tax\"\n                  step-2_indirect-tax-number=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}\"\n                  step-2_province=\"Province\"\n                  step-2_indirect-tax-number-error=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required\"\n                  step-2_qst-number=\"QST number\"\n                  step-2_is-registered-q-s-t=\"I am registered for QST Tax\"\n                  step-2_is-registered-sub-region-income-tax=\"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.\"\n                  step-2_sub-region=\"Sub-region\"\n                  step-2_sub-region-tax-number-label=\"Income Tax Number\"\n                  step-2_cannot-change-info-alert=\"Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.\"\n                  step-3_tax-form=\"Tax form\"\n                  step-3_tax-form-label=\"{documentType} Tax Form\"\n                  step-3_participant-type=\"Participant type\"\n                  step-3_business-entity=\"I represent a business\"\n                  step-3_individual-participant=\"I am an individual participant\"\n                  step-3_tax-form-description=\"Participants based in the US need to submit a {documentType} form.\"\n                  step-3_tax-form-description-individual-participant=\"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.\"\n                  step-3_tax-form-description-business-entity=\"Participants residing outside of the US who represent a business entity need to submit a {documentType} form.\"\n                  step-3_docusign-expired=\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\"\n                  step-3_docusign-session-warning=\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\"\n                  step-3_docusign-error=\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\"\n                  step-3_refresh-button=\"Refresh Page\"\n                  step-4_tax-and-payouts=\"Payouts\"\n                  step-4_directly-to-bank-account=\"Directly to my bank account\"\n                  step-4_to-pay-pal-account=\"PayPal (2% processing fee capped to {feeCap})\"\n                  step-4_payment-schedule-balance-threshold=\"Pay me when my balance reaches a threshold\"\n                  step-4_payment-schedule-fixed-day=\"Pay me on a fixed day of the month\"\n                  step-4_payment-day-select-label=\"Payment Day\"\n                  step-4_payment-threshold-select-label=\"Payment threshold\"\n                  step-4_payment-day-first-of-month-label-text=\"1st of the month\"\n                  step-4_payment-day-fifteenth-of-month-label-text=\"15th of the month\"\n                  step-4_payment-method=\"Payment method\"\n                  step-4_payment-schedule=\"Payment schedule\"\n                  step-4_payment-method-subtext=\"Payouts will be sent from our referral program provider, impact.com.\"\n                  step-4_pay-pal-input-label=\"PayPal email\"\n                  step-4_bank-location-label=\"Bank country location\"\n                  step-4_beneficiary-account-name-label=\"Beneficiary account name\"\n                  step-4_bank-account-type-label=\"Bank account type\"\n                  step-4_checking-select-item-label=\"Checking\"\n                  step-4_savings-select-item-label=\"Savings\"\n                  step-4_bank-account-number-label=\"Bank account number\"\n                  step-4_iban-label=\"IBAN\"\n                  step-4_swift-code-label=\"SWIFT code\"\n                  step-4_routing-code-label=\"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }\"\n                  step-4_bank-name-label=\"Bank name\"\n                  step-4_classification-entity-label=\"Classification entity\"\n                  step-4_business-select-item-label=\"Business\"\n                  step-4_individual-select-item-label=\"Individual\"\n                  step-4_foreign-select-item-label=\"Foreign\"\n                  step-4_classification-c-p-f-label=\"Classification CPF\"\n                  step-4_patronymic-name-label=\"Patronymic name\"\n                  step-4_vo-code-label=\"VO code\"\n                  step-4_agency-code-label=\"Agency code\"\n                  step-4_branch-code-label=\"Branch code\"\n                  step-4_classification-label=\"Classification\"\n                  step-4_tax-payer-id-label=\"Beneficiary INN\"\n                  step-4-bank-address-label=\"Bank address\"\n                  step-4_bank-city-label=\"Bank city\"\n                  step-4_bank-state-label=\"Bank Province / State\"\n                  step-4_bank-postal-code-label=\"Bank postal code\"\n                  step-4_eft-withdrawal-label=\"EFT Withdrawal (free)\"\n                  step-4_fx-wire-processing-fee-label=\"FX Wire (Processing Fee {currency}{defaultFxFee}.00)\"\n                  dashboard_status-text-active=\"Active\"\n                  dashboard_status-text-not-active=\"Invalid Tax Form\"\n                  dashboard_status-text-not-verified=\"Not Verified\"\n                  dashboard_badge-text-submitted-on=\"Submitted on {dateSubmitted}.\"\n                  dashboard_badge-text-submitted-on-w-8=\"Submitted on {dateSubmitted}. Valid for three years after submission.\"\n                  dashboard_badge-text-awaiting-review=\"Awaiting review. Submitted on {dateSubmitted}.\"\n                  dashboard_tax-alert-header-not-active-w-9=\"Your W9 tax form has personal information that doesn’t match your profile\"\n                  dashboard_tax-alert-header-not-active-w-8=\"{documentType} tax form is invalid\"\n                  dashboard_tax-alert-not-active-message-w-9=\"Please resubmit a new {documentType} form.\"\n                  dashboard_tax-alert-not-active-message-w-8=\"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.\"\n                  dashboard_invalid-form=\"Make sure your information is correct and submit new form.\"\n                  dashboard_banking-information-section-header=\"Payout Information\"\n                  dashboard_tax-document-section-header=\"Tax documents\"\n                  dashboard_tax-document-section-sub-header=\"{documentType} tax form\"\n                  dashboard_no-form-needed-subtext=\"Tax documents are only required if you are based in the US or joining the referral program of a US based brand.\"\n                  dashboard_indirect-tax-info-section-header=\"Indirect tax\"\n                  dashboard_indirect-tax-info-spain=\"Registered in {country}, {subRegion}\"\n                  dashboard_indirect-tax-info-other-country=\"Registered in {country}\"\n                  dashboard_indirect-tax-info-canada=\"Registered in {province}, {country}\"\n                  dashboard_indirect-tax-tooltip-support=\"To make changes to your indirect tax information, please contact Support.\"\n                  dashboard_indirect-tax-details=\"{indirectTaxType} number: {indirectTaxNumber}\"\n                  dashboard_new-form-button=\"Submit new form\"\n                  dashboard_edit-payment-information-button=\"Edit Payout Information\"\n                  dashboard_not-registered-for-tax=\"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.\"\n                  dashboard_qst-number=\"QST number: {qstNumber}\"\n                  dashboard_sub-region-tax-number=\"Income tax number: {subRegionTaxNumber}\"\n                  dashboard_status-badge-text=\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }\"\n                  dashboard_threshold-payout-text=\"Next payout occurs when balance is {thresholdBalance}\"\n                  dashboard_account-text=\"Account\"\n                  dashboard_invoice-column-title=\"Invoice\"\n                  dashboard_date-column-title=\"Date\"\n                  dashboard_earnings-column-title=\"Earnings\"\n                  dashboard_indirect-tax-column-title=\"Indirect tax\"\n                  dashboard_payout-from-impact=\"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com.\"\n                  dashboard_earnings-after-tax-column-title=\"Earnings after tax\"\n                  dashboard_error-title-text=\"Your payout is on hold \"\n                  dashboard_error-description-text=\"If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\"\n                  dashboard_payout-missing-information-text=\"Missing banking information, go to Impact.com to resolve.\"\n                  dashboard_invoice-description=\"View and download your invoices to report your earnings and stay tax compliant.\"\n                  dashboard_invoice-prev-label=\"Prev\"\n                  dashboard_invoice-more-label=\"Next\"\n                  dashboard_invoice-header=\"Invoices\"\n                  dashboard_invoice-empty-state-header=\"View your invoice details\"\n                  dashboard_invoice-empty-state-text=\"Refer a friend to view the status of your invoices and rewards earned\"\n                  dashboard_replace-tax-form-modal-header=\"Replace existing tax form\"\n                  dashboard_replace-tax-form-modal-body-text=\"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.\"\n                  form-step=\"Step {step} of {count}\"\n                  general-error-title=\"There was a problem submitting your information\"\n                  general-error-description=\"Please review your information and try again. If this problem continues, contact Support.\"\n                  field-required-error=\"{fieldName} is required\"\n                  field-invalid-error=\"{fieldName} is invalid\"\n                  continue-button=\"Continue\"\n                  back-button=\"Back\"\n                  cancel-button=\"Cancel\"\n                  is-partner-alert-header=\"An account with this email already exists with our referral program provider, impact.com\"\n                  is-partner-alert-description=\"If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\"\n                  search-for-country-text=\"Search for country..\"\n                  loading-error-alert-header=\"There was a problem loading your form\"\n                  loading-error-alert-description=\"Please refresh the page and try again. If this problem continues, contact Support.\"\n                  tax-and-payouts-description=\"Submit your tax documents and add your banking information to receive your rewards.\"\n                ></sqm-tax-and-cash>\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";
 
@@ -9923,6 +9923,8 @@ const resetPasswordEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.
 
 const verifyEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n\n<html\n  xmlns=\"http://www.w3.org/1999/xhtml\"\n  xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n  xmlns:v=\"urn:schemas-microsoft-com:vml\"\n>\n  <head>\n    <!--[if gte mso 9\n      ]><xml\n        ><o:OfficeDocumentSettings\n          ><o:AllowPNG /><o:PixelsPerInch\n            >96</o:PixelsPerInch\n          ></o:OfficeDocumentSettings\n        ></xml\n      ><!\n    [endif]-->\n    <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />\n    <meta content=\"width=device-width\" name=\"viewport\" />\n    <!--[if !mso]><!-->\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\n    <!--<![endif]-->\n    <title></title>\n    <!--[if !mso]><!-->\n    <!--<![endif]-->\n    <style type=\"text/css\">\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      table,\n      td,\n      tr {\n        vertical-align: top;\n        border-collapse: collapse;\n      }\n\n      * {\n        line-height: inherit;\n      }\n\n      a[x-apple-data-detectors=\"true\"] {\n        color: inherit !important;\n        text-decoration: none !important;\n      }\n    </style>\n    <style id=\"media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .block-grid,\n        .col {\n          min-width: 320px !important;\n          max-width: 100% !important;\n          display: block !important;\n        }\n\n        .block-grid {\n          width: 100% !important;\n        }\n\n        .col {\n          width: 100% !important;\n        }\n\n        .col_cont {\n          margin: 0 auto;\n        }\n\n        img.fullwidth,\n        img.fullwidthOnMobile {\n          max-width: 100% !important;\n        }\n\n        .no-stack .col {\n          min-width: 0 !important;\n          display: table-cell !important;\n        }\n\n        .no-stack.two-up .col {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num2 {\n          width: 16.6% !important;\n        }\n\n        .no-stack .col.num3 {\n          width: 25% !important;\n        }\n\n        .no-stack .col.num4 {\n          width: 33% !important;\n        }\n\n        .no-stack .col.num5 {\n          width: 41.6% !important;\n        }\n\n        .no-stack .col.num6 {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num7 {\n          width: 58.3% !important;\n        }\n\n        .no-stack .col.num8 {\n          width: 66.6% !important;\n        }\n\n        .no-stack .col.num9 {\n          width: 75% !important;\n        }\n\n        .no-stack .col.num10 {\n          width: 83.3% !important;\n        }\n\n        .video-block {\n          max-width: none !important;\n        }\n\n        .mobile_hide {\n          min-height: 0px;\n          max-height: 0px;\n          max-width: 0px;\n          display: none;\n          overflow: hidden;\n          font-size: 0px;\n        }\n\n        .desktop_hide {\n          display: block !important;\n          max-height: none !important;\n        }\n      }\n    </style>\n    <style id=\"icon-media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .icons-inner {\n          text-align: center;\n        }\n\n        .icons-inner td {\n          margin: 0 auto;\n        }\n      }\n    </style>\n  </head>\n  <body\n    class=\"clean-body\"\n    style=\"\n      margin: 0;\n      padding: 0;\n      -webkit-text-size-adjust: 100%;\n      background-color: #ffffff;\n    \"\n  >\n    <!--[if IE]><div class=\"ie-browser\"><![endif]-->\n    <table\n      bgcolor=\"#FFFFFF\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      class=\"nl-container\"\n      role=\"presentation\"\n      style=\"\n        table-layout: fixed;\n        vertical-align: top;\n        min-width: 320px;\n        border-spacing: 0;\n        border-collapse: collapse;\n        mso-table-lspace: 0pt;\n        mso-table-rspace: 0pt;\n        background-color: #ffffff;\n        width: 100%;\n      \"\n      valign=\"top\"\n      width=\"100%\"\n    >\n      <tbody>\n        <tr style=\"vertical-align: top\" valign=\"top\">\n          <td style=\"word-break: break-word; vertical-align: top\" valign=\"top\">\n            <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n            <div style=\"background-color: transparent\">\n              <div\n                class=\"block-grid\"\n                style=\"\n                  min-width: 320px;\n                  max-width: 500px;\n                  overflow-wrap: break-word;\n                  word-wrap: break-word;\n                  word-break: break-word;\n                  margin: 0 auto;\n                  background-color: transparent;\n                \"\n              >\n                <div\n                  style=\"\n                    border-collapse: collapse;\n                    display: table;\n                    width: 100%;\n                    background-color: transparent;\n                  \"\n                >\n                  <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]-->\n                  <!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\n                  <div\n                    class=\"col num12\"\n                    style=\"\n                      min-width: 320px;\n                      max-width: 500px;\n                      display: table-cell;\n                      vertical-align: top;\n                      width: 500px;\n                    \"\n                  >\n                    <div class=\"col_cont\" style=\"width: 100% !important\">\n                      <!--[if (!mso)&(!IE)]><!-->\n                      <div\n                        style=\"\n                          border-top: 0px solid transparent;\n                          border-left: 0px solid transparent;\n                          border-bottom: 0px solid transparent;\n                          border-right: 0px solid transparent;\n                          padding-top: 5px;\n                          padding-bottom: 5px;\n                          padding-right: 0px;\n                          padding-left: 0px;\n                        \"\n                      >\n                        <!--<![endif]-->\n                        <table\n                          cellpadding=\"0\"\n                          cellspacing=\"0\"\n                          role=\"presentation\"\n                          style=\"\n                            table-layout: fixed;\n                            vertical-align: top;\n                            border-spacing: 0;\n                            border-collapse: collapse;\n                            mso-table-lspace: 0pt;\n                            mso-table-rspace: 0pt;\n                          \"\n                          valign=\"top\"\n                          width=\"100%\"\n                        >\n                          <tr style=\"vertical-align: top\" valign=\"top\">\n                            <td\n                              align=\"center\"\n                              style=\"\n                                word-break: break-word;\n                                vertical-align: top;\n                                padding-bottom: 20px;\n                                padding-left: 10px;\n                                padding-right: 10px;\n                                padding-top: 10px;\n                                text-align: center;\n                                width: 100%;\n                              \"\n                              valign=\"top\"\n                              width=\"100%\"\n                            >\n                              <h1\n                                style=\"\n                                  color: #444445;\n                                  direction: ltr;\n                                  font-family: 'Helvetica Neue', Helvetica,\n                                    Arial, sans-serif;\n                                  font-size: 20px;\n                                  font-weight: normal;\n                                  letter-spacing: normal;\n                                  line-height: 120%;\n                                  text-align: left;\n                                  margin-top: 0;\n                                  margin-bottom: 0;\n                                \"\n                              >\n                                <strong>Verify your email address</strong>\n                              </h1>\n                            </td>\n                          </tr>\n                        </table>\n                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif\"><![endif]-->\n                        <div\n                          style=\"\n                            color: #444445;\n                            font-family: Arial, Helvetica Neue, Helvetica,\n                              sans-serif;\n                            line-height: 1.8;\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <div\n                            class=\"txtTinyMce-wrapper\"\n                            style=\"\n                              font-size: 14px;\n                              line-height: 1.8;\n                              color: #444445;\n                              font-family: Arial, Helvetica Neue, Helvetica,\n                                sans-serif;\n                              mso-line-height-alt: 25px;\n                            \"\n                          >\n                            <p\n                              style=\"\n                                margin: 0;\n                                font-size: 14px;\n                                line-height: 1.8;\n                                word-break: break-word;\n                                mso-line-height-alt: 25px;\n                                margin-top: 0;\n                                margin-bottom: 0;\n                              \"\n                            >\n                              <span style=\"font-size: 14px\"\n                                >Thank you for signing up! Please click the button below\n                                to verify your email address.</span\n                              >\n                            </p>\n                          </div>\n                        </div>\n                        <!--[if mso]></td></tr></table><![endif]-->\n                        <div\n                          align=\"center\"\n                          class=\"button-container\"\n                          style=\"\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;\"><tr><td style=\"padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px\" align=\"center\"><v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" target=\"_blank\" href={{validationLink}} style=\"height:31.5pt;width:390pt;v-text-anchor:middle;\" arcsize=\"12%\" stroke=\"false\" fillcolor=\"#2270ee\"><w:anchorlock/><v:textbox inset=\"0,0,0,0\"><center style=\"color:#ffffff; font-family:Arial, sans-serif; font-size:14px\"><!\n                          [endif]--><a\n                            href={{validationLink}}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n                            style=\"\n                              -webkit-text-size-adjust: none;\n                              text-decoration: none;\n                              display: block;\n                              color: #ffffff;\n                              background-color: #2270ee;\n                              border-radius: 5px;\n                              -webkit-border-radius: 5px;\n                              -moz-border-radius: 5px;\n                              width: 100%;\n                              width: calc(100% - 2px);\n                              border-top: 1px solid #2270ee;\n                              border-right: 1px solid #2270ee;\n                              border-bottom: 1px solid #2270ee;\n                              border-left: 1px solid #2270ee;\n                              padding-top: 5px;\n                              padding-bottom: 5px;\n                              font-family: 'Helvetica Neue', Helvetica, Arial,\n                                sans-serif;\n                              text-align: center;\n                              mso-border-alt: none;\n                              word-break: keep-all;\n                            \"\n                            target=\"_blank\"\n                            ><span\n                              style=\"\n                                padding-left: 20px;\n                                padding-right: 20px;\n                                font-size: 14px;\n                                display: inline-block;\n                                letter-spacing: undefined;\n                              \"\n                              ><span\n                                style=\"\n                                  font-size: 16px;\n                                  line-height: 2;\n                                  word-break: break-word;\n                                  mso-line-height-alt: 32px;\n                                \"\n                                ><span\n                                  style=\"font-size: 14px; line-height: 28px\"\n                                  >Verify Email</span\n                                ></span\n                              ></span\n                            ></a\n                          >\n                          <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->\n                        </div>\n                      <!--<![endif]-->\n                    </div>\n                  </div>\n                  <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n                  <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\n                </div>\n              </div>\n            </div>\n            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--[if (IE)]></div><![endif]-->\n  </body>\n</html>";
 
+const taxPayoutReminderEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n\n<html\n  xmlns=\"http://www.w3.org/1999/xhtml\"\n  xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n  xmlns:v=\"urn:schemas-microsoft-com:vml\"\n>\n  <head>\n    <!--[if gte mso 9\n      ]><xml\n        ><o:OfficeDocumentSettings\n          ><o:AllowPNG /><o:PixelsPerInch\n            >96</o:PixelsPerInch\n          ></o:OfficeDocumentSettings\n        ></xml\n      ><!\n    [endif]-->\n    <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />\n    <meta content=\"width=device-width\" name=\"viewport\" />\n    <!--[if !mso]><!-->\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\n    <!--<![endif]-->\n    <title></title>\n    <!--[if !mso]><!-->\n    <!--<![endif]-->\n    <style type=\"text/css\">\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      table,\n      td,\n      tr {\n        vertical-align: top;\n        border-collapse: collapse;\n      }\n\n      * {\n        line-height: inherit;\n      }\n\n      a[x-apple-data-detectors=\"true\"] {\n        color: inherit !important;\n        text-decoration: none !important;\n      }\n    </style>\n    <style id=\"media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .block-grid,\n        .col {\n          min-width: 320px !important;\n          max-width: 100% !important;\n          display: block !important;\n        }\n\n        .block-grid {\n          width: 100% !important;\n        }\n\n        .col {\n          width: 100% !important;\n        }\n\n        .col_cont {\n          margin: 0 auto;\n        }\n\n        img.fullwidth,\n        img.fullwidthOnMobile {\n          max-width: 100% !important;\n        }\n\n        .no-stack .col {\n          min-width: 0 !important;\n          display: table-cell !important;\n        }\n\n        .no-stack.two-up .col {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num2 {\n          width: 16.6% !important;\n        }\n\n        .no-stack .col.num3 {\n          width: 25% !important;\n        }\n\n        .no-stack .col.num4 {\n          width: 33% !important;\n        }\n\n        .no-stack .col.num5 {\n          width: 41.6% !important;\n        }\n\n        .no-stack .col.num6 {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num7 {\n          width: 58.3% !important;\n        }\n\n        .no-stack .col.num8 {\n          width: 66.6% !important;\n        }\n\n        .no-stack .col.num9 {\n          width: 75% !important;\n        }\n\n        .no-stack .col.num10 {\n          width: 83.3% !important;\n        }\n\n        .video-block {\n          max-width: none !important;\n        }\n\n        .mobile_hide {\n          min-height: 0px;\n          max-height: 0px;\n          max-width: 0px;\n          display: none;\n          overflow: hidden;\n          font-size: 0px;\n        }\n\n        .desktop_hide {\n          display: block !important;\n          max-height: none !important;\n        }\n      }\n    </style>\n    <style id=\"icon-media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .icons-inner {\n          text-align: center;\n        }\n\n        .icons-inner td {\n          margin: 0 auto;\n        }\n      }\n    </style>\n  </head>\n  <body\n    class=\"clean-body\"\n    style=\"\n      margin: 0;\n      padding: 0;\n      -webkit-text-size-adjust: 100%;\n      background-color: #ffffff;\n    \"\n  >\n    <!--[if IE]><div class=\"ie-browser\"><![endif]-->\n    <table\n      bgcolor=\"#FFFFFF\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      class=\"nl-container\"\n      role=\"presentation\"\n      style=\"\n        table-layout: fixed;\n        vertical-align: top;\n        min-width: 320px;\n        border-spacing: 0;\n        border-collapse: collapse;\n        mso-table-lspace: 0pt;\n        mso-table-rspace: 0pt;\n        background-color: #ffffff;\n        width: 100%;\n      \"\n      valign=\"top\"\n      width=\"100%\"\n    >\n      <tbody>\n        <tr style=\"vertical-align: top\" valign=\"top\">\n          <td style=\"word-break: break-word; vertical-align: top\" valign=\"top\">\n            <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n            <div style=\"background-color: transparent\">\n              <div\n                class=\"block-grid\"\n                style=\"\n                  min-width: 320px;\n                  max-width: 500px;\n                  overflow-wrap: break-word;\n                  word-wrap: break-word;\n                  word-break: break-word;\n                  margin: 0 auto;\n                  background-color: transparent;\n                \"\n              >\n                <div\n                  style=\"\n                    border-collapse: collapse;\n                    display: table;\n                    width: 100%;\n                    background-color: transparent;\n                  \"\n                >\n                  <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]-->\n                  <!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\n                  <div\n                    class=\"col num12\"\n                    style=\"\n                      min-width: 320px;\n                      max-width: 500px;\n                      display: table-cell;\n                      vertical-align: top;\n                      width: 500px;\n                    \"\n                  >\n                    <div class=\"col_cont\" style=\"width: 100% !important\">\n                      <!--[if (!mso)&(!IE)]><!-->\n                      <div\n                        style=\"\n                          border-top: 0px solid transparent;\n                          border-left: 0px solid transparent;\n                          border-bottom: 0px solid transparent;\n                          border-right: 0px solid transparent;\n                          padding-top: 5px;\n                          padding-bottom: 5px;\n                          padding-right: 0px;\n                          padding-left: 0px;\n                        \"\n                      >\n                        <!--<![endif]-->\n                        <table\n                          cellpadding=\"0\"\n                          cellspacing=\"0\"\n                          role=\"presentation\"\n                          style=\"\n                            table-layout: fixed;\n                            vertical-align: top;\n                            border-spacing: 0;\n                            border-collapse: collapse;\n                            mso-table-lspace: 0pt;\n                            mso-table-rspace: 0pt;\n                          \"\n                          valign=\"top\"\n                          width=\"100%\"\n                        >\n                          <tr style=\"vertical-align: top\" valign=\"top\">\n                            <td\n                              align=\"center\"\n                              style=\"\n                                word-break: break-word;\n                                vertical-align: top;\n                                padding-bottom: 20px;\n                                padding-left: 10px;\n                                padding-right: 10px;\n                                padding-top: 10px;\n                                text-align: center;\n                                width: 100%;\n                              \"\n                              valign=\"top\"\n                              width=\"100%\"\n                            >\n                              <h1\n                                style=\"\n                                  color: #444445;\n                                  direction: ltr;\n                                  font-family: 'Helvetica Neue', Helvetica,\n                                    Arial, sans-serif;\n                                  font-size: 20px;\n                                  font-weight: normal;\n                                  letter-spacing: normal;\n                                  line-height: 120%;\n                                  text-align: left;\n                                  margin-top: 0;\n                                  margin-bottom: 0;\n                                \"\n                              >\n                                <strong>Submit your tax and payout info to receive your rewards</strong>\n                              </h1>\n                            </td>\n                          </tr>\n                        </table>\n                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif\"><![endif]-->\n                        <div\n                          style=\"\n                            color: #444445;\n                            font-family: Arial, Helvetica Neue, Helvetica,\n                              sans-serif;\n                            line-height: 1.8;\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <div\n                            class=\"txtTinyMce-wrapper\"\n                            style=\"\n                              font-size: 14px;\n                              line-height: 1.8;\n                              color: #444445;\n                              font-family: Arial, Helvetica Neue, Helvetica,\n                                sans-serif;\n                              mso-line-height-alt: 25px;\n                            \"\n                          >\n                            <p\n                              style=\"\n                                margin: 0;\n                                font-size: 14px;\n                                line-height: 1.8;\n                                word-break: break-word;\n                                mso-line-height-alt: 25px;\n                                margin-top: 0;\n                                margin-bottom: 0;\n                              \"\n                            >\n                              <span style=\"font-size: 14px\"\n                                >Congratulations! You earned a cash reward in our {{programName}}. To\n                                receive your reward payment, log in to your account and submit your\n                                tax and payout information.</span\n                              >\n                            </p>\n                          </div>\n                        </div>\n                        <!--[if mso]></td></tr></table><![endif]-->\n                        <div\n                          align=\"center\"\n                          class=\"button-container\"\n                          style=\"\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;\"><tr><td style=\"padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px\" align=\"center\"><v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" target=\"_blank\" href={{validationLink}} style=\"height:31.5pt;width:390pt;v-text-anchor:middle;\" arcsize=\"12%\" stroke=\"false\" fillcolor=\"#2270ee\"><w:anchorlock/><v:textbox inset=\"0,0,0,0\"><center style=\"color:#ffffff; font-family:Arial, sans-serif; font-size:14px\"><!\n                          [endif]--><a\n                            href={{loginLink}}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n                            style=\"\n                              -webkit-text-size-adjust: none;\n                              text-decoration: none;\n                              display: block;\n                              color: #ffffff;\n                              background-color: #2270ee;\n                              border-radius: 5px;\n                              -webkit-border-radius: 5px;\n                              -moz-border-radius: 5px;\n                              width: 100%;\n                              width: calc(100% - 2px);\n                              border-top: 1px solid #2270ee;\n                              border-right: 1px solid #2270ee;\n                              border-bottom: 1px solid #2270ee;\n                              border-left: 1px solid #2270ee;\n                              padding-top: 5px;\n                              padding-bottom: 5px;\n                              font-family: 'Helvetica Neue', Helvetica, Arial,\n                                sans-serif;\n                              text-align: center;\n                              mso-border-alt: none;\n                              word-break: keep-all;\n                            \"\n                            target=\"_blank\"\n                            ><span\n                              style=\"\n                                padding-left: 20px;\n                                padding-right: 20px;\n                                font-size: 14px;\n                                display: inline-block;\n                                letter-spacing: undefined;\n                              \"\n                              ><span\n                                style=\"\n                                  font-size: 16px;\n                                  line-height: 2;\n                                  word-break: break-word;\n                                  mso-line-height-alt: 32px;\n                                \"\n                                ><span\n                                  style=\"font-size: 14px; line-height: 28px\"\n                                  >Log In</span\n                                ></span\n                              ></span\n                            ></a\n                          >\n                          <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->\n                        </div>\n                      <!--<![endif]-->\n                    </div>\n                  </div>\n                  <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n                  <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\n                </div>\n              </div>\n            </div>\n            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--[if (IE)]></div><![endif]-->\n  </body>\n</html>";
+
 const loginTemplate = "<sqm-hero background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\">\n  <sqm-portal-login></sqm-portal-login>\n</sqm-hero>\n";
 
 const registerTemplate = "<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-portal-register>\n    <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n  </sqm-portal-register>\n</sqm-hero>\n";
@@ -10033,6 +10035,10 @@ const VerifyEmail = createHookStory(() => {
   const { states, callbacks } = useTemplate$2(verifyEmailTemplate);
   return h(TemplateView$1, { states: states, callbacks: callbacks });
 });
+const taxPayoutReminderEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate$2(taxPayoutReminderEmailTemplate);
+  return h(TemplateView$1, { states: states, callbacks: callbacks });
+});
 
 const PortalTemplates = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10053,7 +10059,8 @@ const PortalTemplates = /*#__PURE__*/Object.freeze({
   EmailVerified: EmailVerified,
   Widget: Widget$1,
   ResetPasswordEmail: ResetPasswordEmail,
-  VerifyEmail: VerifyEmail
+  VerifyEmail: VerifyEmail,
+  taxPayoutReminderEmail: taxPayoutReminderEmail
 });
 
 const ProgramMenu_stories = {
@@ -10135,7 +10142,7 @@ const defaultProps$9 = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   hidePoweredBy: false,
-  poweredByLink: "https://saasquatch.com",
+  poweredByLink: "https://impact.com/advocate/",
   paddingTop: "large",
   paddingRight: "large",
   paddingBottom: "large",
@@ -11585,7 +11592,7 @@ const scenario1 = "@author:derek\n@owner:derek\nFeature: Reward Table Date Colum
 
 const scenario2 = "@author:derek\n@owner:derek\nFeature: Reward Table reward Column\n\n    Shows the exact reward\n\n    Background:\n        Given the reward column is included in the reward table\n        And rewards with translations exist\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the reward column is configurable\n        Given the \"column-title\" prop is set to <value>\n        Then the reward column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Reward          |                 |\n            | My column title | My column title |\n\n    @motivating\n    Scenario: The reward column displays the prettyValue of the reward given\n        Given a user with a reward\n        When they view the rewards table\n        Then they see the name of their reward in the reward column\n        And the name is the prettyValue translated for the users locale\n\n    @motivating\n    @ui\n    Scenario: The reward column displays an availability bar if the reward is redeemable\n        Given a user with a <status> credit reward of <value>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <availabilityText>\n        Examples:\n            | status    | value     | percentage | availableAmount | availabilityText    |\n            | AVAILABLE | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | AVAILABLE | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | AVAILABLE | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n            | PENDING   | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | PENDING   | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | PENDING   | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column displays an availability bar if the reward was redeemable but had been cancelled or expired\n        Given a user with a credit reward of <value>\n        And the reward has <status>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <redeemedText>\n        Examples:\n            | status    | value     | percentage | redeemedAmount | redeemedText     |\n            | EXPIRED   | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | EXPIRED   | 10 Points | 80%        | 2 Point        | 2 Point redeemed |\n            | CANCELLED | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | CANCELLED | 10 Points | 20%        | 8 Point        | 8 Point redeemed |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn't display the availability bar if the reward is not redeemable\n        Given a user with a non credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column doesn't display the availability bar if the reward is only 1 reward unit\n        Given a user with a credit reward for 1 of a reward unit\n        And it has <status>\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n        Examples:\n            | status    |\n            | AVAILABLE |\n            | PENDING   |\n            | EXPIRED   |\n            | CANCELLED |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn't display the availability bar for redeemed credit rewards\n        Given a user with a \"REDEEMED\" credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario: Users can copy their fuel tank codes\n        Given a user with a fuel tank reward\n        When they view the rewards table\n        Then they see their fuel tank reward\n        And they see their fuel tank code bolded in blue\n        When they click on their code\n        Then a tool tip appears saying it has been copied to their clipboard\n        And their code is copied to their clipboard";
 
-const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background: \n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples: \n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending Review   | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples: \n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"PAYOUT_CONFIGURATION_MISSING\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status                   | text                      | pillColour |\n      | AVAILABLE                | Redeem me!                | Green      |\n      | CANCELLED                | Unavailable               | Red        |\n      | PENDING                  | Coming soon!              | Orange     |\n      | EXPIRED                  | Past due                  | Red        |\n      | REDEEMED                 | Spent                     | Blue       |\n      | PENDING_REVIEW           | Pending Review!           | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved!          | Blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved!          | Blue       |\n      | PAYOUT_OVERDUE           | Payout Failed!            | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled!         | Red        |\n      | PENDING_TAX_REVIEW       | Pending Tax Review!       | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending new tax form!     | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending tax submission!   | Orange     |\n      | PENDING_PARTNER_CREATION | Pending partner creation! | Orange     |\n      | DENIED                   | Unlucky!                  | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples: \n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
+const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background: \n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples: \n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples: \n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"PAYOUT_CONFIGURATION_MISSING\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples: \n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
 
 const scenario4 = "@author:derek\n@owner:derek\nFeature: Reward Table Source Column\n\n    Shows the source of each reward\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the source column is configurable\n        Given the \"column-title\" prop is set to <value>\n        Then the source column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Source          |                 |\n            | My column title | My column title |\n\n    @motivating\n    @ui\n    Scenario: The source column displays manual if the reward is caused by a manual action\n        Given a user with a \"MANUAL\" reward\n        When they view the rewards table\n        Then the source of their reward is displayed as \"Manual\"\n\n    @motivating\n    @ui\n    Scenario: The source column displays the program name if the reward is caused automatically by a program\n        Given a user with a \"AUTOMATED\" program reward\n        And the program has name \"Loyalty Program\"\n        When they view the rewards table\n        Then the source of their reward is displayed as \"Loyalty Program\"\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n        Given the \"reward-exchange-text\" prop is <propValue>\n        And a user with a \"MANUAL\" reward\n        But it was created by a reward exchange\n        Then they view the rewards table\n        Then the source displays <exchangeText>\n        And under it displays the following\n            | prettyRedeemedCredit → prettyValue |\n        Examples:\n            | propValue | exchangeText    |\n            |           | Reward Exchange |\n            | Exchanged | Exchanged       |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n        Given the \"reward-source-text\" prop is <propValue>\n        And a user with a referral reward\n        And that reward has <rewardSource>\n        When they view the rewards table\n        Then then source displays <referralText>\n        And under it displays the full name of the <referralUser>\n        Examples:\n            | propValue                                                                             | rewardSource  | referralText | referralUser  |\n            |                                                                                       | REFERRED      | Referred by  | referrer user |\n            |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n            | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n            | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n        Given a user with a referral reward\n        And referral user exists\n        And referral user has <name>\n        But referral user has no <otherName>\n        When they view the rewards table\n        Then referral user's name is displayed as <name>\n        Examples:\n            | name       | otherName  |\n            | first.name | last.name  |\n            | last.name  | first.name |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n        Given a user with a referral reward\n        And that reward has <rewardSource>\n        And the <referralUser> has no first name\n        And the <referralUser> has no last name\n        When they view the rewards table\n        Then then source displays <sourceText>\n        And under it displays \"Anonymous User\"\n        Examples:\n            | rewardSource  | referralUser  | sourceText  |\n            | FRIEND_SIGNUP | referrer      | Referral to |\n            | REFERRED      | referred user | Referred by |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n        Given a user with a referral reward\n        And that reward has <rewardSource>\n        But <referral> user was deleted\n        When they view the rewards table\n        Then the source displays <sourceText>\n        And under it displays \"Deleted User\"\n        Examples:\n            | rewardSource    | referral | sourceText  |\n            | \"FRIEND_SIGNUP\" | referrer | Referral to |\n            | \"REFERRED\"      | referred | Referred by |\n\n    @minutia\n    @ui\n    Scenario Outline: Name fallbacks for referral users without names are customizable\n        Given <prop> with <value>\n        And a user with a referral reward\n        But the referral user <hadAction>\n        When they view the rewards table\n        Then the source displays <value> as the referral user\n        Examples:\n            | prop           | value           | hadAction                       |\n            | deleted-user   | Former Customer | was deleted                     |\n            | anonymous-user | Nameless User   | had first and last name deleted |\n\n    @motivating\n    Scenario Outline: Source text can be customized\n        Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n        And a user with a <rewardSource> reward\n        When they view the rewards table\n        Then the source is <sourceText>\n        Examples:\n            | rewardSource | sourceText      |\n            | MANUAL       | Support         |\n            | AUTOMATED    | Loyalty Program |";
 
@@ -13969,34 +13976,6 @@ const DocusignExpiredView = (props) => {
       h("p", { style: { margin: "0" } }, text.docusignExpired))));
 };
 
-const style$2 = {
-  Container: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    padding: "20px",
-    gap: "10px",
-    maxWidth: "500px",
-    margin: "auto",
-    textAlign: "center",
-  },
-};
-const sheet$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
-const DocusignCompletedView = () => {
-  const { classes } = sheet$2;
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString$2),
-    h("div", { class: classes.Container },
-      h("sl-icon", { style: {
-          width: "50px",
-          height: "50px",
-          color: "var(--sl-color-success-600)",
-        }, name: "check2-circle" }),
-      h("p", { style: { margin: "0" } }, "Your document has been completed and submitted"))));
-};
-
 // @ts-nocheck
 const SlotViews_stories = {
   title: "Components/Tax Form Slot Views",
@@ -14063,9 +14042,6 @@ const RegisteredInCanadaWithErrors = () => {
 const DocusignExpired = () => {
   return h(DocusignExpiredView, null);
 };
-const DocusignCompleted = () => {
-  return h(DocusignCompletedView, null);
-};
 
 const TaxFormSlots = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14074,11 +14050,10 @@ const TaxFormSlots = /*#__PURE__*/Object.freeze({
   RegisteredInCanada: RegisteredInCanada,
   RegisteredInOtherRegionWithErrors: RegisteredInOtherRegionWithErrors,
   RegisteredInCanadaWithErrors: RegisteredInCanadaWithErrors,
-  DocusignExpired: DocusignExpired,
-  DocusignCompleted: DocusignCompleted
+  DocusignExpired: DocusignExpired
 });
 
-const style$3 = {
+const style$2 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -14097,8 +14072,8 @@ const style$3 = {
     gap: "var(--sl-spacing-small)",
   },
 };
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 const vanillaStyle = `
     :host{
       display: block;   
@@ -14122,14 +14097,14 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
     ? "1px solid var(--sl-color-primary-500)"
     : "1px solid #CACFD3";
-  return (h("div", { part: "sqm-base", class: sheet$3.classes.Container, style: {
+  return (h("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
       border,
     } },
     h("style", { type: "text/css" },
-      styleString$3,
+      styleString$2,
       vanillaStyle),
     h("sl-checkbox", { checked: selected }),
-    h("div", { part: "sqm-title-container", class: sheet$3.classes.TitleContainer },
+    h("div", { part: "sqm-title-container", class: sheet$2.classes.TitleContainer },
       h("sl-icon", { name: icon }),
       h("p", null, title)),
     h("p", null, description)));
@@ -14164,7 +14139,6 @@ const ProgressBar_stories = {
 const defaultProps$j = {
   progress: 2,
   goal: 4,
-  //   progressBarUnit: string,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
@@ -14259,6 +14233,7 @@ const bankingFormProps = {
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
+    setCountrySearch: () => { },
     onBack: async () => console.log("back"),
   },
   refs: { formRef: { current: null } },
@@ -14389,6 +14364,7 @@ const BankingInfoFormCountryUSCurrencyGBP = () => {
       states: {
         ...bankingFormProps.states,
         formState: {
+          ...bankingFormProps.states.formState,
           bankCountry: "US",
         },
         currency: "GBP",
@@ -14400,7 +14376,10 @@ const BankingInfoFormCountryCanadaCurrencyCAD = () => {
       ...bankingFormProps,
       states: {
         ...bankingFormProps.states,
-        formState: { bankCountry: "CA" },
+        formState: {
+          ...bankingFormProps.states.formState,
+          bankCountry: "CA",
+        },
         currency: "CAD",
       },
     } }));
@@ -14410,7 +14389,10 @@ const BankingInfoFormCountryCanadaCurrencyUSD = () => {
       ...bankingFormProps,
       states: {
         ...bankingFormProps.states,
-        formState: { bankCountry: "CA" },
+        formState: {
+          ...bankingFormProps.states.formState,
+          bankCountry: "CA",
+        },
         currency: "USD",
       },
     } }));
@@ -14420,7 +14402,10 @@ const BankingInfoFormCountrySpainCurrencyUSD = () => {
       ...bankingFormProps,
       states: {
         ...bankingFormProps.states,
-        formState: { bankCountry: "ES" },
+        formState: {
+          ...bankingFormProps.states.formState,
+          bankCountry: "ES",
+        },
         currency: "USD",
       },
     } }));
@@ -14598,11 +14583,11 @@ const EarningsCell = () => {
 const EarningsAfterTaxCell = () => {
   return (h("sqm-invoice-table-cell", { innerTemplate: "US$15.00" }));
 };
-const TaxedAmountCell = () => {
+const IndirectTaxCell = () => {
   return (h("sqm-invoice-table-cell", { innerTemplate: "US$5.00" }));
 };
 const DownloadCell = () => {
-  return (h("sqm-invoice-table-download-cell", { downloadURL: "https://www.example.com" }));
+  return (h("sqm-invoice-table-download-cell", { downloadUrl: "https://www.example.com" }));
 };
 const EmptyCell$3 = () => (h("sqm-sqm-invoice-table-cell", null, "-"));
 const DateCell$2 = () => {
@@ -14616,7 +14601,7 @@ const InvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceNumberCell: InvoiceNumberCell,
   EarningsCell: EarningsCell,
   EarningsAfterTaxCell: EarningsAfterTaxCell,
-  TaxedAmountCell: TaxedAmountCell,
+  IndirectTaxCell: IndirectTaxCell,
   DownloadCell: DownloadCell,
   EmptyCell: EmptyCell$3,
   DateCell: DateCell$2
@@ -14627,19 +14612,19 @@ const InvoiceTable_stories = {
 };
 const loadingElement$2 = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
+    h("sqm-table-cell", { colspan: 6 },
       h("sl-skeleton", null))),
   h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
+    h("sqm-table-cell", { colspan: 6 },
       h("sl-skeleton", null))),
   h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
+    h("sqm-table-cell", { colspan: 6 },
       h("sl-skeleton", null))),
   h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
+    h("sqm-table-cell", { colspan: 6 },
       h("sl-skeleton", null))),
   h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
+    h("sqm-table-cell", { colspan: 6 },
       h("sl-skeleton", null)))));
 const emptyElement$2 = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": "View your invoice details", "empty-state-text": "Track the status of your invoices and rewards earned by referring friends" }));
 // Reward Status Cases
@@ -14670,7 +14655,7 @@ const simpleInvoiceTableProps = {
       "Date created",
       "Invoice",
       "Earnings",
-      "Taxed Amount",
+      "Indirect tax",
       "Earnings after tax",
     ],
     rows: [
@@ -14679,7 +14664,7 @@ const simpleInvoiceTableProps = {
         h(DateCell$2, null),
         h(InvoiceNumberCell, null),
         h(EarningsCell, null),
-        h(TaxedAmountCell, null),
+        h(IndirectTaxCell, null),
         h(EarningsAfterTaxCell, null),
       ],
       [
@@ -14687,7 +14672,7 @@ const simpleInvoiceTableProps = {
         h(DateCell$2, null),
         h(InvoiceNumberCell, null),
         h(EarningsCell, null),
-        h(TaxedAmountCell, null),
+        h(IndirectTaxCell, null),
         h(EarningsAfterTaxCell, null),
       ],
       [
@@ -14695,7 +14680,7 @@ const simpleInvoiceTableProps = {
         h(DateCell$2, null),
         h(InvoiceNumberCell, null),
         h(EarningsCell, null),
-        h(TaxedAmountCell, null),
+        h(IndirectTaxCell, null),
         h(EarningsAfterTaxCell, null),
       ],
     ],
@@ -14757,7 +14742,7 @@ const LoadingTable$1 = () => {
           "Date created",
           "Invoice",
           "Earnings",
-          "Taxed Amount",
+          "Indirect tax",
           "Earnings after tax",
         ],
         rows: [],
@@ -14807,7 +14792,7 @@ const InvoiceTable$1 = createHookStory(() => {
     h("sqm-invoice-table-date-column", { "column-title": "Date" }),
     h("sqm-invoice-table-data-column", { "column-title": "Invoice", property: "invoiceId" }),
     h("sqm-invoice-table-data-column", { "column-title": "Earnings", property: "earnings" }),
-    h("sqm-invoice-table-data-column", { "column-title": "Taxed Amount", property: "taxedAmount" }),
+    h("sqm-invoice-table-data-column", { "column-title": "Indirect tax", property: "indirectTax" }),
     h("sqm-invoice-table-data-column", { "column-title": "Earnings after tax", property: "netEarnings" })));
 });
 const InvoiceTableDemoHook = createHookStory(() => {
@@ -14816,7 +14801,7 @@ const InvoiceTableDemoHook = createHookStory(() => {
     h("sqm-invoice-table-date-column", { "column-title": "Date" }),
     h("sqm-invoice-table-data-column", { "column-title": "Invoice", property: "invoiceId" }),
     h("sqm-invoice-table-data-column", { "column-title": "Earnings", property: "earnings" }),
-    h("sqm-invoice-table-data-column", { "column-title": "Taxed Amount", property: "taxedAmount" }),
+    h("sqm-invoice-table-data-column", { "column-title": "Indirect tax", property: "indirectTax" }),
     h("sqm-invoice-table-data-column", { "column-title": "Earnings after tax", property: "netEarnings" })));
 });