@saasquatch/mint-components 1.11.1-1 → 1.12.0-1

package/dist/cjs/{sqm-big-stat_38.cjs.entry.js → sqm-big-stat_39.cjs.entry.js}

@@ -4,23 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const global = require('./global-02e50f09.js');
-const index_module = require('./index.module-df530553.js');
+const global = require('./global-c3637175.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const utils = require('./utils-6847bc06.js');
-const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-a22ad7e7.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
+const JSS = require('./JSS-8503a151.js');
+const reRender = require('./re-render-5bde3d2e.js');
+const useChildElements = require('./useChildElements-410d2435.js');
 require('./luxon-05098e19.js');
+const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
 const index$1 = require('./index-8c6255f5.js');
-const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
-const utilities = require('./utilities-cec9dd36.js');
+const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
+const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-2c6026c3.js');
+const ShadowViewAddon = require('./ShadowViewAddon-88821c64.js');
 require('./sqm-portal-container-view-990a85a3.js');
 
 const BigStat = class {
@@ -40,7 +39,7 @@ const BigStat = class {
   render() {
     var _a;
     const { props, label } = index_module.isDemo() ? ShadowViewAddon.useDemoBigStat(this) : ShadowViewAddon.useBigStat(this);
-    const host = index_module._();
+    const host = index_module.T();
     const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = index.h("slot", { name: "label" }, hasLabel ? index.h("slot", null) : label);
     return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
@@ -161,7 +160,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 = index_module._();
+  const host = index_module.T();
   const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
   return (index.h("sl-alert", { type: "danger", open: true },
     index.h("style", { type: "text/css" }, styleString),
@@ -303,11 +302,11 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 `;
 function useCouponCode(props) {
   var _a, _b, _c;
-  const user = index_module.Q();
-  const programId = index_module.H();
-  const engagementMedium = index_module.B();
-  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
-  const { data, loading, refetch, errors } = index_module.yn(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = index_module.K();
+  const programId = index_module.z();
+  const engagementMedium = index_module.ne();
+  const [sendLoadEvent] = index_module.xe(WIDGET_ENGAGEMENT_EVENT);
+  const { data, loading, refetch, errors } = index_module.En(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const getStatus = (reward) => {
     if (!reward || !reward.statuses)
       return "ERROR";
@@ -697,13 +696,13 @@ const defaultFormState = {
   error: "",
 };
 function useEditProfile(props) {
-  const userIdent = index_module.Q();
+  const userIdent = index_module.K();
   const [showEdit, setShowEdit] = stencilHooks_module.useState(false);
   const [error, setError] = stencilHooks_module.useState("");
   const [userData, setUserData] = stencilHooks_module.useState(undefined);
   const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
-  const userDataResponse = index_module.yn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = index_module.$e(UPSERT_USER);
+  const userDataResponse = index_module.En(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = index_module.xe(UPSERT_USER);
   stencilHooks_module.useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
@@ -1342,11 +1341,11 @@ const GET_RANK_WITHOUT_NAMES = index_module.dist.gql `
 `;
 function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  const programIdContext = index_module.H();
+  const programIdContext = index_module.z();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = index_module.Q();
-  const locale = index_module.L();
+  const user = index_module.K();
+  const locale = index_module.Q();
   const variables = programId
     ? {
       type: props.leaderboardType,
@@ -1365,8 +1364,8 @@ function useLeaderboard(props) {
   if (props.maxRows > 0) {
     variables["limit"] = props.maxRows;
   }
-  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = index_module.yn(props.hideNames ? GET_LEADERBOARD_WITHOUT_NAMES : GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
-  const { data: rankData } = index_module.yn(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, } = index_module.En(props.hideNames ? GET_LEADERBOARD_WITHOUT_NAMES : GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
+  const { data: rankData } = index_module.En(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) {
@@ -1664,12 +1663,12 @@ function NavigationMenuView(props) {
 }
 
 function handleMenu(e) {
-  index_module.$n.push(e.detail.item.value);
+  index_module.xn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
   const ref = stencilHooks_module.useRef();
-  const [, rerender] = index_module.gn();
-  const user = index_module.Q();
+  const [, rerender] = index_module.wn();
+  const user = index_module.K();
   stencilHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
@@ -1721,13 +1720,213 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
+const style$2 = {
+  Wrapper: {
+    maxWidth: "200px",
+  },
+  PayoutButtonDescription: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-small)",
+  },
+};
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+function PayoutButtonScrollView(props) {
+  const { text, states } = props;
+  if (!states.payoutSettingsComplete)
+    return index.h("div", null);
+  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
+    index.h("style", { type: "text/css" }, styleString$2),
+    index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
+    index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+}
+
+const PayoutButtonScroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.payoutButtonText = "Payouts & Tax Settings";
+    this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = useDemoPayoutButtonScroll(this);
+    return index.h(PayoutButtonScrollView, Object.assign({}, props));
+  }
+};
+function useDemoPayoutButtonScroll(props) {
+  return cjs.cjs({
+    states: {
+      payoutSettingsComplete: false,
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const style$3 = {
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  AlertDescriptionText: {
+    margin: "0",
+    marginBottom: "var(--sl-spacing-small)",
+  },
+};
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+function PayoutStatusAlertView(props) {
+  var _a, _b, _c, _d;
+  const { text, states } = props;
+  if (states.loading) {
+    return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+  }
+  if (states.status === "DONE") {
+    return index.h("div", null);
+  }
+  function getAlert(status) {
+    switch (status) {
+      case "INFORMATION_REQUIRED":
+        return {
+          header: text.informationRequiredHeader,
+          description: text.informationRequiredDescription,
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "info",
+          icon: "exclamation-octagon",
+        };
+      case "VERIFICATION_NEEDED":
+        return {
+          header: text.verificationRequiredHeader,
+          description: text.verificationRequiredDescription,
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-octagon",
+        };
+      case "HOLD":
+        return {
+          header: text.holdHeader,
+          description: text.holdDescription,
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-octagon",
+        };
+      default:
+        return;
+    }
+  }
+  //AL: TODO hookup ID
+  function getButton(status) {
+    switch (status) {
+      case "INFORMATION_REQUIRED":
+        return (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
+      case "VERIFICATION_NEEDED":
+        return (index.h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+      default:
+        return;
+    }
+  }
+  return (index.h("div", { part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString$3),
+    index.h("sqm-form-message", { style: { display: "flex", gap: "2px" }, exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType },
+      index.h("sl-icon", { slot: "icon", name: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.icon }),
+      index.h("strong", null, (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.header),
+      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.description),
+      getButton(states.status))));
+}
+
+const GET_USER_STATUS = index_module.dist.gql `
+  query getUserStatus {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutStatus(props) {
+  const { loading, data, errors, refetch } = index_module.En(GET_USER_STATUS, {});
+  const [status, setStatus] = stencilHooks_module.useState(undefined);
+  stencilHooks_module.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]);
+  stencilHooks_module.useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  console.log({ data });
+  return { states: { loading, status }, text: props.getTextProps() };
+}
+
+const PayoutStatusAlert = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.informationRequiredHeader = "Payout and tax information required";
+    this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
+    this.informationRequiredButtonText = "Payouts & Tax Settings";
+    this.verificationRequiredHeader = "Verify your identity";
+    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredButtonText = "Start Verification";
+    this.holdHeader = "Your payouts and account are on hold";
+    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}.";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoPayoutStatusAlert(this)
+      : usePayoutStatus(this);
+    return index.h(PayoutStatusAlertView, Object.assign({}, props));
+  }
+};
+function useDemoPayoutStatusAlert(props) {
+  return cjs.cjs({
+    states: {
+      status: "INFORMATION_REQUIRED",
+      loading: false,
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [request, { loading, errors, data }] = index_module.Ue();
+  const [request, { loading, errors, data }] = index_module.ze();
   const [open, setOpen] = stencilHooks_module.useState(false);
   const [error, setError] = stencilHooks_module.useState("");
   const [success, setSuccess] = stencilHooks_module.useState(false);
-  const user = index_module.Q();
+  const user = index_module.K();
   const submit = async (event) => {
     var _a, _b;
     setSuccess(false);
@@ -1969,7 +2168,7 @@ const PortalFooter = class {
 };
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = index_module.gn();
+  const [, rerender] = index_module.wn();
   return {
     data: {
       footer: footerContent,
@@ -2019,9 +2218,9 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [request, { loading, errors, data }] = index_module.qe();
+  const [request, { loading, errors, data }] = index_module.We();
   const [error, setError] = stencilHooks_module.useState("");
-  const urlParams = new URLSearchParams(index_module.$n.location.search);
+  const urlParams = new URLSearchParams(index_module.xn.location.search);
   const nextPageOverride = urlParams.get("nextPage");
   const submit = async (event) => {
     var _a, _b;
@@ -2040,7 +2239,7 @@ function usePortalLogin(props) {
     if ((_b = result.authenticateManagedIdentityWithEmailAndPassword) === null || _b === void 0 ? void 0 : _b.token) {
       urlParams.delete("nextPage");
       const url = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
-      index_module.$n.push(url.href);
+      index_module.xn.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) ||
@@ -2119,8 +2318,8 @@ const PortalLogin = class {
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.$n.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.$n.push(states.registerPath) }, this.registerLabel))),
+      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.xn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.xn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -2149,7 +2348,7 @@ function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const formRef = stencilHooks_module.useRef(null);
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
-  const [request, { loading, errors, data }] = index_module.xe();
+  const [request, { loading, errors, data }] = index_module.Ue();
   stencilHooks_module.useEffect(() => {
     if (!formRef.current)
       return;
@@ -2222,7 +2421,7 @@ function usePortalRegister(props) {
         validationErrors: {},
       });
       if ((_a = result.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-        index_module.$n.push(props.nextPage);
+        index_module.xn.push(props.nextPage);
       }
     }
     catch (error) {
@@ -2396,7 +2595,7 @@ const PortalRegister = class {
       : usePortalRegister(this);
     const content = {
       formData: index.h("slot", { name: "formData" }),
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.$n.push(states.loginPath) }, this.loginLabel))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.xn.push(states.loginPath) }, this.loginLabel))),
       terms: index.h("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
@@ -2567,11 +2766,11 @@ const ProgramExplainerStep = class {
 const debug = stencilHooks_module.browser("sq:useProgramMenu");
 const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
 function useProgramMenu(props) {
-  const programId = index_module.H();
-  const host = index_module._();
+  const programId = index_module.z();
+  const host = index_module.T();
   debug({ programId, props });
   const ref = stencilHooks_module.useRef();
-  const [, rerender] = index_module.gn();
+  const [, rerender] = index_module.wn();
   stencilHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => {
@@ -2608,7 +2807,7 @@ const ProgramMenu = class {
   }
 };
 
-const style$2 = {
+const style$4 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -2636,15 +2835,15 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
@@ -2655,15 +2854,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      styleString$2,
+      styleString$4,
       vanillaStyle$1),
-    props.hasHeader && (index.h("div", { class: sheet$2.classes.EndContainer }, props.slots.header)),
-    index.h("div", { part: "sqm-column-container", class: sheet$2.classes.ColumnContainer, style: {
+    props.hasHeader && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet$2.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -2749,9 +2948,9 @@ const GET_USER_DETAILS = index_module.dist.gql `
 `;
 function useReferralIframe(props) {
   var _a;
-  const programId = index_module.H();
-  const user = index_module.Q();
-  const { data } = index_module.yn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const programId = index_module.z();
+  const user = index_module.K();
+  const { data } = index_module.En(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -3476,9 +3675,9 @@ function useRewardExchangeList(props) {
   });
   const [open, setOpen] = stencilHooks_module.useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = index_module.Q();
-  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = index_module.$e(EXCHANGE);
-  const { data, loading, refetch, errors: queryError, } = index_module.yn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = index_module.K();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = index_module.xe(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = index_module.En(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   stencilHooks_module.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) {
@@ -3497,7 +3696,7 @@ function useRewardExchangeList(props) {
       canvas.confetti || confetti.create(canvas, { resize: true });
     canvas.confetti();
   }, [canvasRef.current]);
-  const { refresh } = index_module.ze();
+  const { refresh } = index_module.Ye();
   async function exchangeReward() {
     if (!selectedItem)
       return;
@@ -3805,8 +4004,8 @@ function matchPath(pattern, page) {
   return regexp.exec(page);
 }
 function useRouter() {
-  const location = index_module.Sn();
-  const host = index_module._();
+  const location = index_module.jn();
+  const host = index_module.T();
   const [slot, setSlot] = stencilHooks_module.useState(undefined);
   const [container, setContainer] = stencilHooks_module.useState(undefined);
   const page = location.pathname;
@@ -3889,106 +4088,6 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
-const REVEAL_EVENT = "sq:reveal";
-function useScroll(props) {
-  const { scrollTagName, scrollId } = props;
-  async function scroll() {
-    const element = document === null || document === void 0 ? void 0 : document.querySelector(scrollTagName || `#${scrollId}`);
-    element.dispatchEvent(new CustomEvent(REVEAL_EVENT, {
-      detail: scrollTagName || `#${scrollId}`,
-      bubbles: true,
-      composed: true,
-    }));
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    element.scrollIntoView({ behavior: props.scrollAnimation });
-  }
-  return {
-    callbacks: { scroll },
-  };
-}
-
-const Scroll = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Button type
-     * @uiType string
-     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
-     * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
-  
-     */
-    this.buttonType = "default";
-    /**
-     * @uiName Scroll animation style
-     * @uiType string
-     * @uiEnum ["smooth", "auto"]
-     * @uiEnumNames ["Smooth", "Auto"]
-     */
-    this.scrollAnimation = "smooth";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    var _a;
-    const { callbacks } = useScroll(this);
-    const outlineColor = (_a = this.buttonType) !== null && _a !== void 0 ? _a : "primary";
-    const style = {
-      Button: {
-        "& .outline": {
-          "&::part(base)": {
-            color: "var(--sl-color-" + outlineColor + "-500)",
-            borderColor: "var(--sl-color-" + outlineColor + "-500)",
-            backgroundColor: "transparent",
-            "&:hover": {
-              color: "var(--sl-color-primary-text)",
-              backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
-            },
-          },
-        },
-        "& .neutral": {
-          "&::part(base)": {
-            color: "var(--sl-color-primary-text)",
-            background: "var(--sl-color-neutral-500)",
-            "&:hover": {
-              opacity: "0.8",
-            },
-          },
-        },
-        "& .mobile": {
-          "@media (max-width: 499px)": {
-            width: "100%",
-          },
-        },
-      },
-    };
-    const sheet = JSS.createStyleSheet(style);
-    const styleString = sheet.toString();
-    const vanillaStyle = `
-		:host{
-			display: contents;
-		}
-		${this.mobile &&
-      `
-		@media only screen and (max-width: 499px) {
-			:host {
-				display: block;
-				width: 100%;
-			}
-		}
-	  `}
-	`;
-    let classStack = "";
-    if (this.outline && this.buttonType != "default")
-      classStack += "outline ";
-    if (this.buttonType === "neutral")
-      classStack += "neutral ";
-    if (this.mobile)
-      classStack += "mobile ";
-    return (index.h("div", { class: sheet.classes.Button }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), index.h("sl-button", { type: this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack }, (this.iconSlot || this.iconName) && (index.h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, index.h("slot", null))));
-  }
-};
-
 const sqmShareButtonCss = ":host{display:block}:host([hidden]){display:none}sl-button{display:block}";
 
 const ShareButton = class {
@@ -4067,11 +4166,11 @@ const WIDGET_ENGAGEMENT_EVENT$1 = index_module.dist.gql `
 `;
 function useShareCode(props) {
   var _a, _b;
-  const { programId = index_module.H() } = props;
-  const user = index_module.Q();
-  const engagementMedium = index_module.B();
-  const { data } = index_module.yn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT$1);
+  const { programId = index_module.z() } = props;
+  const user = index_module.K();
+  const engagementMedium = index_module.ne();
+  const { data } = index_module.En(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.xe(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
   "...";
@@ -4143,7 +4242,7 @@ const ShareCode = class {
     const props = index_module.isDemo()
       ? useDemoShareCode(thisProps)
       : useShareCode(thisProps);
-    return index.h(copyTextView.CopyTextView, Object.assign({}, props));
+    return index.h(ShadowViewAddon.CopyTextView, Object.assign({}, props));
   }
 };
 function useDemoShareCode(props) {
@@ -4212,7 +4311,7 @@ const ShareLink = class {
     const props = index_module.isDemo()
       ? useDemoShareLink(thisProps)
       : ShadowViewAddon.useShareLink(thisProps);
-    return index.h(copyTextView.CopyTextView, Object.assign({}, props));
+    return index.h(ShadowViewAddon.CopyTextView, Object.assign({}, props));
   }
 };
 function useDemoShareLink(props) {
@@ -4270,10 +4369,10 @@ const SEND_EVENT = index_module.dist.gql `
   }
 `;
 function useTaskCard(props) {
-  const user = index_module.Q();
-  const locale = index_module.L();
-  const [sendUserEvent, { data, loading: loadingEvent }] = index_module.$e(SEND_EVENT);
-  const { refresh } = index_module.ze();
+  const user = index_module.K();
+  const locale = index_module.Q();
+  const [sendUserEvent, { data, loading: loadingEvent }] = index_module.xe(SEND_EVENT);
+  const { refresh } = index_module.Ye();
   stencilHooks_module.useEffect(() => {
     if (data) {
       refresh();
@@ -4486,7 +4585,7 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$3 = {
+const style$5 = {
   TimelineReward: {
     color: "var(--sl-color-neutral-900)",
     lineHeight: "var(--sl-line-height-dense)",
@@ -4529,8 +4628,8 @@ const style$3 = {
     },
   },
 };
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$5 = JSS.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -4543,9 +4642,9 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("div", { class: sheet$3.classes.TimelineReward, part: "sqm-base" },
+  return (index.h("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$3,
+      styleString$5,
       vanillaStyle$2),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),
@@ -4594,8 +4693,8 @@ const GET_USER_NAME = index_module.dist.gql `
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const user = index_module.Q();
-  const res = index_module.yn(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = index_module.K();
+  const res = index_module.En(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}`
@@ -4653,6 +4752,8 @@ exports.sqm_leaderboard = Leaderboard;
 exports.sqm_link_button = LinkButton;
 exports.sqm_name_fields = NameFields;
 exports.sqm_navigation_menu = NavigationMenu;
+exports.sqm_payout_button_scroll = PayoutButtonScroll;
+exports.sqm_payout_status_alert = PayoutStatusAlert;
 exports.sqm_portal_change_password = PortalChangePassword;
 exports.sqm_portal_footer = PortalFooter;
 exports.sqm_portal_frame = PortalFrame;
@@ -4665,7 +4766,6 @@ exports.sqm_referral_card = ReferralCard;
 exports.sqm_referral_iframe = SqmReferralIframe;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;
 exports.sqm_router = SqmRouter;
-exports.sqm_scroll = Scroll;
 exports.sqm_share_button = ShareButton;
 exports.sqm_share_code = ShareCode;
 exports.sqm_share_link = ShareLink;