@saasquatch/mint-components 1.12.0-8 → 1.12.0

package/dist/esm/sqm-big-stat_39.entry.js

@@ -1,22 +1,24 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-ac12ca1c.js';
-import { i as intl } from './global-6306a9b8.js';
-import { i as isDemo, T, d as dist, K, z, c as xe, E as En, n as ne, Q, w as wn, x as xn, g as getEnvironmentSDK, q as ze, W as We, U as Ue, b as useCallback, r as Ye, j as jn } from './index.module-6c840c4e.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-014ddfa3.js';
+import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-576d7f01.js';
+import { i as intl } from './global-9832e13a.js';
+import { i as isDemo, _, d as dist, Q, H, $ as $e, y as yn, B, L, g as gn, f as $n, q as Ue, r as qe, x as xe, u as useCallback, z as ze, S as Sn } from './index.module-32d2bf62.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { a as useRequestRerender } from './re-render-1bcfd0de.js';
-import { u as useChildElements } from './useChildElements-fc84e640.js';
-import './luxon-7600be8d.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
-import './sqm-text-span-view-8d140661.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { C as CopyTextView } from './copy-text-view-200d6958.js';
+import './mixins-f60a614c.js';
+import { a as useRequestRerender } from './re-render-6977623c.js';
+import { u as useChildElements } from './useChildElements-dd86d4a4.js';
+import './luxon-12195d94.js';
+import './sqm-text-span-view-d6e03f93.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-849e27f7.js';
-import { i as isEmpty } from './utilities-443732be.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-6e89095a.js';
+import { i as isEmpty } from './utilities-34fdb9e3.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-69b61037.js';
-import './sqm-portal-container-view-6c582684.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, C as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-a0cff36f.js';
+import './sqm-portal-container-view-83df005d.js';
+import { u as usePayoutStatus } from './usePayoutStatus-a7510912.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -35,7 +37,7 @@ const BigStat = class {
   render() {
     var _a;
     const { props, label } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const host = T();
+    const host = _();
     const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = h$1("slot", { name: "label" }, hasLabel ? h$1("slot", null) : label);
     return h$1(BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
@@ -156,7 +158,7 @@ const styleString = sheet.toString();
 function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
   if (!missingProps)
     return false;
-  const host = T();
+  const host = _();
   const [detailsOpen, setDetailsOpen] = useState(false);
   return (h$1("sl-alert", { type: "danger", open: true },
     h$1("style", { type: "text/css" }, styleString),
@@ -298,11 +300,11 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 `;
 function useCouponCode(props) {
   var _a, _b, _c;
-  const user = K();
-  const programId = z();
-  const engagementMedium = ne();
-  const [sendLoadEvent] = xe(WIDGET_ENGAGEMENT_EVENT);
-  const { data, loading, refetch, errors } = En(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = Q();
+  const programId = H();
+  const engagementMedium = B();
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const { data, loading, refetch, errors } = yn(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const getStatus = (reward) => {
     if (!reward || !reward.statuses)
       return "ERROR";
@@ -692,13 +694,13 @@ const defaultFormState = {
   error: "",
 };
 function useEditProfile(props) {
-  const userIdent = K();
+  const userIdent = Q();
   const [showEdit, setShowEdit] = useState(false);
   const [error, setError] = useState("");
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = En(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = xe(UPSERT_USER);
+  const userDataResponse = yn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = $e(UPSERT_USER);
   useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
@@ -1337,11 +1339,11 @@ const GET_RANK_WITHOUT_NAMES = dist.gql `
 `;
 function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  const programIdContext = z();
+  const programIdContext = H();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = K();
-  const locale = Q();
+  const user = Q();
+  const locale = L();
   const variables = programId
     ? {
       type: props.leaderboardType,
@@ -1360,8 +1362,8 @@ function useLeaderboard(props) {
   if (props.maxRows > 0) {
     variables["limit"] = props.maxRows;
   }
-  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = En(props.hideNames ? GET_LEADERBOARD_WITHOUT_NAMES : GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
-  const { data: rankData } = En(props.hideNames ? GET_RANK_WITHOUT_NAMES : GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = yn(props.hideNames ? GET_LEADERBOARD_WITHOUT_NAMES : GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
+  const { data: rankData } = yn(props.hideNames ? GET_RANK_WITHOUT_NAMES : GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const leaderboardRows = (_b = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _b === void 0 ? void 0 : _b.rows;
   const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
   const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
@@ -1659,12 +1661,12 @@ function NavigationMenuView(props) {
 }
 
 function handleMenu(e) {
-  xn.push(e.detail.item.value);
+  $n.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
   const ref = useRef();
-  const [, rerender] = wn();
-  const user = K();
+  const [, rerender] = gn();
+  const user = Q();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
@@ -1719,6 +1721,7 @@ NavigationMenu.style = sqmNavigationMenuCss;
 const style$2 = {
   Wrapper: {
     maxWidth: "200px",
+    marginLeft: "auto",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -1732,12 +1735,47 @@ function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return h$1("div", null);
-  return (h$1("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
+  return (h$1("div", { class: sheet$2.classes.Wrapper },
     h$1("style", { type: "text/css" }, styleString$2),
     h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
     h$1("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
+const GET_PAYOUT_DETAILS = dist.gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutButton(props) {
+  var _a, _b, _c;
+  const { data, refetch } = yn(GET_PAYOUT_DETAILS, {});
+  useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
+    },
+    text: props.getTextProps(),
+  };
+}
+
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1758,7 +1796,9 @@ const PayoutButtonScroll = class {
     return getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return h$1(PayoutButtonScrollView, Object.assign({}, props));
   }
 };
@@ -1807,18 +1847,25 @@ const style$3 = {
       color: "var(--sl-color-blue-500)",
     },
   },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
 };
 const sheet$3 = createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
-  var _a, _b, _c, _d, _e;
   const { text, states, data, callbacks } = props;
-  if (states.loading) {
-    return h$1("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
-  }
-  if (states.status === "DONE") {
-    return h$1("div", null);
-  }
   function getAlert(status) {
     if (states.error)
       return {
@@ -1839,19 +1886,68 @@ function PayoutStatusAlertView(props) {
           icon: "info-circle",
           class: sheet$3.classes.InfoAlertContainer,
         };
-      case "VERIFICATION_NEEDED":
+      case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
+          description: intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet$3.classes.WarningAlertContainer,
         };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$3.classes.ErrorAlertContainer,
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
-          description: text.holdDescription,
+          description: intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
@@ -1861,92 +1957,32 @@ function PayoutStatusAlertView(props) {
         return;
     }
   }
-  //AL: TODO hookup ID
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (h$1("sl-button", { type: "default" }, text.informationRequiredButtonText));
-      case "VERIFICATION_NEEDED":
-        return (h$1("sl-button", { type: "default", loading: states.loading, 
-          //AL: TODO callback to open verification form
-          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
+        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        // Demo case
+        h$1("sl-button", { type: "default" }, text.informationRequiredButtonText));
+      case "VERIFICATION:REQUIRED":
+        return (h$1("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
   }
+  if (states.loading) {
+    return h$1("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+  }
+  const alertDetails = getAlert(states.status);
+  if (states.status === "DONE" || !alertDetails) {
+    return h$1("div", null);
+  }
   return (h$1("div", { part: "sqm-base" },
     h$1("style", { type: "text/css" }, styleString$3),
-    h$1("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType, class: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.class, open: true },
-      h$1("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
-      h$1("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
-      h$1("p", { class: sheet$3.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
-      getButton(states.status)),
-    h$1("sl-dialog", { 
-      // class={sheet.classes.Dialog}
-      open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel }, "AL: TODO add IFRAME URL")));
-}
-
-const GET_USER_STATUS = dist.gql `
-  query getUserStatus {
-    user: viewer {
-      ... on User {
-        id
-        impactConnection {
-          connected
-          publisher {
-            id
-            payoutsAccount {
-              hold
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function usePayoutStatus(props) {
-  const { type } = getEnvironmentSDK();
-  const { loading, data, errors, refetch } = En(GET_USER_STATUS, {});
-  const [status, setStatus] = useState(undefined);
-  const [showDialog, setShowDialog] = useState(false);
-  useEffect(() => {
-    if (!data)
-      return;
-    function getStatus(data) {
-      var _a, _b;
-      const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
-      if (!account)
-        return "INFORMATION_REQUIRED";
-      if (account.hold)
-        return "HOLD";
-      // @ts-ignore, TODO: add check for account verification
-      if (!account.verified)
-        return "VERIFICATION_NEEDED";
-      return "DONE";
-    }
-    const s = getStatus(data);
-    setStatus(s);
-  }, [data]);
-  useEffect(() => {
-    const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
-  }, []);
-  return {
-    states: {
-      loading,
-      status,
-      showVerifyIdentity: showDialog,
-      error: !!errors,
-    },
-    data: { type },
-    text: props.getTextProps(),
-    callbacks: {
-      onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
-      onClick: () => setShowDialog(true),
-      onCancel: () => setShowDialog(false),
-    },
-  };
+    h$1("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
+      h$1("sl-icon", { slot: "icon", name: alertDetails.icon }),
+      h$1("strong", null, alertDetails.header),
+      h$1("p", { class: sheet$3.classes.AlertDescriptionText }, alertDetails.description),
+      getButton(states.status))));
 }
 
 const PayoutStatusAlert = class {
@@ -1971,11 +2007,35 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required alert description
      */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredDescription = "It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
     /**
      * @uiName Verification required alert button text
      */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Verification required internal alert header
+     */
+    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    /**
+     * @uiName Verification required internal alert description
+     */
+    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification review internal alert header
+     */
+    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    /**
+     * @uiName Verification review internal alert description
+     */
+    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification failed internal alert header
+     */
+    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    /**
+     * @uiName Verification failed internal alert description
+     */
+    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Payout on hold alert header
      */
@@ -1983,11 +2043,15 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Payout on hold alert description
      */
-    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
+    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to our {supportLink}.";
     /**
-     * @uiName Cash & Payouts Terms and Conditions url
+     * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
      */
-    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
+    this.cashPayoutsPageUrl = "/cash";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Error header
      */
@@ -2006,7 +2070,6 @@ const PayoutStatusAlert = class {
     const props = isDemo()
       ? useDemoPayoutStatusAlert(this)
       : usePayoutStatus(this);
-    console.log({ props });
     return h$1(PayoutStatusAlertView, Object.assign({}, props));
   }
 };
@@ -2023,18 +2086,17 @@ function useDemoPayoutStatusAlert(props) {
     callbacks: {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
-      onCancel: () => console.log("hide"),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [request, { loading, errors, data }] = ze();
+  const [request, { loading, errors, data }] = Ue();
   const [open, setOpen] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
-  const user = K();
+  const user = Q();
   const submit = async (event) => {
     var _a, _b;
     setSuccess(false);
@@ -2276,7 +2338,7 @@ const PortalFooter = class {
 };
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = wn();
+  const [, rerender] = gn();
   return {
     data: {
       footer: footerContent,
@@ -2326,9 +2388,9 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [request, { loading, errors, data }] = We();
+  const [request, { loading, errors, data }] = qe();
   const [error, setError] = useState("");
-  const urlParams = new URLSearchParams(xn.location.search);
+  const urlParams = new URLSearchParams($n.location.search);
   const nextPageOverride = urlParams.get("nextPage");
   const submit = async (event) => {
     var _a, _b;
@@ -2347,7 +2409,7 @@ function usePortalLogin(props) {
     if ((_b = result.authenticateManagedIdentityWithEmailAndPassword) === null || _b === void 0 ? void 0 : _b.token) {
       urlParams.delete("nextPage");
       const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
-      xn.push(url.href);
+      $n.push(url.href);
     }
   };
   const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
@@ -2426,8 +2488,8 @@ const PortalLogin = class {
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => xn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => xn.push(states.registerPath) }, this.registerLabel))),
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => $n.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => $n.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -2456,7 +2518,7 @@ function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const formRef = useRef(null);
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState({});
-  const [request, { loading, errors, data }] = Ue();
+  const [request, { loading, errors, data }] = xe();
   useEffect(() => {
     if (!formRef.current)
       return;
@@ -2529,7 +2591,7 @@ function usePortalRegister(props) {
         validationErrors: {},
       });
       if ((_a = result.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-        xn.push(props.nextPage);
+        $n.push(props.nextPage);
       }
     }
     catch (error) {
@@ -2703,7 +2765,7 @@ const PortalRegister = class {
       : usePortalRegister(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => xn.push(states.loginPath) }, this.loginLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => $n.push(states.loginPath) }, this.loginLabel))),
       terms: h$1("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
@@ -2874,11 +2936,11 @@ const ProgramExplainerStep = class {
 const debug = browser("sq:useProgramMenu");
 const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
 function useProgramMenu(props) {
-  const programId = z();
-  const host = T();
+  const programId = H();
+  const host = _();
   debug({ programId, props });
   const ref = useRef();
-  const [, rerender] = wn();
+  const [, rerender] = gn();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => {
@@ -3056,9 +3118,9 @@ const GET_USER_DETAILS = dist.gql `
 `;
 function useReferralIframe(props) {
   var _a;
-  const programId = z();
-  const user = K();
-  const { data } = En(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const programId = H();
+  const user = Q();
+  const { data } = yn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -3783,9 +3845,9 @@ function useRewardExchangeList(props) {
   });
   const [open, setOpen] = useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = K();
-  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = xe(EXCHANGE);
-  const { data, loading, refetch, errors: queryError, } = En(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = Q();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = $e(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = yn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
@@ -3804,7 +3866,7 @@ function useRewardExchangeList(props) {
       canvas.confetti || confetti.create(canvas, { resize: true });
     canvas.confetti();
   }, [canvasRef.current]);
-  const { refresh } = Ye();
+  const { refresh } = ze();
   async function exchangeReward() {
     if (!selectedItem)
       return;
@@ -4112,8 +4174,8 @@ function matchPath(pattern, page) {
   return regexp.exec(page);
 }
 function useRouter() {
-  const location = jn();
-  const host = T();
+  const location = Sn();
+  const host = _();
   const [slot, setSlot] = useState(undefined);
   const [container, setContainer] = useState(undefined);
   const page = location.pathname;
@@ -4274,11 +4336,11 @@ const WIDGET_ENGAGEMENT_EVENT$1 = dist.gql `
 `;
 function useShareCode(props) {
   var _a, _b;
-  const { programId = z() } = props;
-  const user = K();
-  const engagementMedium = ne();
-  const { data } = En(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = xe(WIDGET_ENGAGEMENT_EVENT$1);
+  const { programId = H() } = props;
+  const user = Q();
+  const engagementMedium = B();
+  const { data } = yn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT$1);
   const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -4477,10 +4539,10 @@ const SEND_EVENT = dist.gql `
   }
 `;
 function useTaskCard(props) {
-  const user = K();
-  const locale = Q();
-  const [sendUserEvent, { data, loading: loadingEvent }] = xe(SEND_EVENT);
-  const { refresh } = Ye();
+  const user = Q();
+  const locale = L();
+  const [sendUserEvent, { data, loading: loadingEvent }] = $e(SEND_EVENT);
+  const { refresh } = ze();
   useEffect(() => {
     if (data) {
       refresh();
@@ -4801,8 +4863,8 @@ const GET_USER_NAME = dist.gql `
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const user = K();
-  const res = En(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = Q();
+  const res = yn(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const loading = res.loading;
   const username = ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.firstName) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.lastName)
     ? `${(_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.firstName} ${(_h = (_g = res.data) === null || _g === void 0 ? void 0 : _g.viewer) === null || _h === void 0 ? void 0 : _h.lastName}`