@saasquatch/mint-components 1.5.0-85 → 1.5.0-89

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -1,10 +1,13 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
-import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditPartial, RewardsCellCreditRedeemed, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
-import { CSS_NAMESPACE, useRewardsTable } from "./useRewardsTable";
+import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
+import mockRewardData from "./mockRewardData";
+import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Rewards Table
  */
@@ -31,8 +34,9 @@ export class RewardsTable {
     const empty = h("slot", { name: "empty" });
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
-      ? useRewardsTableDemo(this)
+      ? useRewardsTableDemo(this, empty, loading)
       : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-rewards-table"; }
@@ -249,14 +253,47 @@ function LoadingRow() {
     h("sqm-table-cell", { colspan: 5 },
       h("sl-skeleton", null))));
 }
-function useRewardsTableDemo(props) {
-  return deepmerge({
+function useRewardsTableDemo(props, emptyElement, loadingElement) {
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const tick = useRerenderListener();
+  const { data } = mockRewardData;
+  const components = useChildElements();
+  async function getComponentData(components) {
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // get the column cells (renderCell is asynchronous)
+    //@ts-ignore
+    const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], undefined)));
+      const cells = (await Promise.all(cellPromise));
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: 0 });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    data && getComponentData(components);
+  }, [data, components, tick]);
+  const demoProps = deepmerge({
     states: {
       hasPrev: false,
       hasNext: false,
       loading: false,
       show: "rows",
-      namespace: CSS_NAMESPACE,
     },
     callbacks: {
       prevPage: () => console.log("Prev"),
@@ -271,36 +308,11 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: (h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateHeader: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks", table: true })),
-      loadingElement: h(LoadingSlot, null),
-      // TODO: This should be smarter
-      columns: ["Reward", "Source", "Status", "Date recieved"],
-      rows: [
-        [
-          h(RewardsCellCreditFull, null),
-          h(StatusCellAvailable, null),
-          h(SourceCellReferral, null),
-          h(DateCell, null),
-        ],
-        [
-          h(RewardsCellCreditCancelled, null),
-          h(StatusCellCancelled, null),
-          h(SourceCellDeletedUser, null),
-          h(DateCell, null),
-        ],
-        [
-          h(RewardsCellCreditRedeemed, null),
-          h(StatusCellRedeemed, null),
-          h(SourceCellManual, null),
-          h(DateCell, null),
-        ],
-        [
-          h(RewardsCellCreditPartial, null),
-          h(StatusCellAvailableExpiry, null),
-          h(SourceCellReferred, null),
-          h(DateCell, null),
-        ],
-      ],
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  return demoProps;
 }

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -196,7 +196,7 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     },
   };
 }
-async function tryMethod(c, callback) {
+export async function tryMethod(c, callback) {
   const tag = c.tagName.toLowerCase();
   await customElements.whenDefined(tag);
   let labelPromise;

package/dist/collection/components/sqm-scroll/Scroll.stories.js

@@ -20,40 +20,31 @@ export const ScrollId = () => {
 };
 export const ScrollTabGroup = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "scroll-tag-name": "sl-tab-group" }),
-    h("div", { style: { position: "absolute", bottom: "0" } },
-      h("sqm-text", { slot: "label", id: "my-id" },
-        h("sl-tab-group", null,
-          h("sl-tab", { slot: "nav", panel: "referralLeaderboard" },
-            "Leaderboard",
-            " "),
-          h("sl-tab", { slot: "nav", panel: "referralHistory" },
-            "Referral history",
-            " "),
-          h("sl-tab", { slot: "nav", panel: "rewardHistory" },
-            "Reward history",
-            " "),
-          h("sl-tab", { slot: "nav", panel: "rewardExchange" },
-            "Redeem",
-            " "),
-          h("sl-tab-panel", { name: "referralHistory" },
-            h("sqm-referral-table", { "per-page": "4" },
-              h("sqm-referral-table-user-column", { "column-title": "User" }),
-              h("sqm-referral-table-status-column", { "column-title": "Referral status" }),
-              h("sqm-referral-table-rewards-column", null),
-              h("sqm-referral-table-date-column", { "column-title": "Date referred", "date-shown": "dateReferralStarted" }))),
-          h("sl-tab-panel", { name: "referralLeaderboard" },
-            h("sqm-titled-section", { padding: "medium", "label-margin": "small" },
-              h("sqm-text", { slot: "content" },
-                h("p", null, "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"))),
-            h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" })),
-          h("sl-tab-panel", { name: "rewardHistory" },
-            h("sqb-program-section", { "program-id": "" },
-              h("sqm-rewards-table", { "per-page": "4" },
-                h("sqm-rewards-table-reward-column", null),
-                h("sqm-rewards-table-source-column", null),
-                h("sqm-rewards-table-status-column", null),
-                h("sqm-rewards-table-date-column", null)))),
-          h("sl-tab-panel", { name: "rewardExchange" },
-            h("sqm-reward-exchange-list", { id: "hello" })))))));
+    h("sqm-scroll", { "scroll-id": "tab-3" }),
+    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
+              <sqm-tabs>
+              <sqm-tab header="Leaderboard">
+                <sqm-hero-image
+                  image-url="https://i.imgur.com/MVgOJn7.png"
+                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+                  layout="columns"
+                  image-percentage="33%"
+                  padding-image="large"
+                  padding-text="large"
+                  background-color=""
+                ></sqm-hero-image>
+                <sqm-leaderboard></sqm-leaderboard>
+              </sqm-tab>
+              <sqm-tab header="Referral history"
+              >
+                <sqm-referral-table></sqm-referral-table>
+              </sqm-tab>
+              <sqm-tab header="Reward history">
+                <sqm-rewards-table></sqm-rewards-table>
+              </sqm-tab>
+              <sqm-tab header="Redeem">
+                <sqm-reward-exchange-list></sqm-reward-exchange-list>
+              </sqm-tab>
+            </sqm-tabs>
+      ` })));
 };

package/dist/collection/components/sqm-scroll/sqm-scroll.js

@@ -1,5 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, Host, State } from "@stencil/core";
+import { useScroll } from "./useScroll";
 export class Scroll {
   constructor() {
     this.ignored = true;
@@ -9,10 +10,9 @@ export class Scroll {
   }
   disconnectedCallback() { }
   render() {
+    const { callbacks } = useScroll(this);
     return (h(Host, { style: { display: "block" } },
-      h("sl-button", { type: this.buttonType, onClick: () => document
-          .querySelector(this.scrollTagName || `#${this.scrollId}`)
-          .scrollIntoView({ behavior: this.scrollAnimation }) }, this.buttonText)));
+      h("sl-button", { type: this.buttonType, onClick: callbacks.scroll }, this.buttonText)));
   }
   static get is() { return "sqm-scroll"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-scroll/useScroll.js

@@ -0,0 +1,18 @@
+const REVEAL_EVENT = "sq:reveal";
+export function useScroll(props) {
+  const { scrollTagName, scrollId } = props;
+  async function scroll() {
+    const element = document === null || document === void 0 ? void 0 : document.querySelector(scrollTagName || `#${scrollId}`);
+    console.log({ element, scrollTagName, scrollId });
+    element.dispatchEvent(new CustomEvent(REVEAL_EVENT, {
+      detail: scrollTagName || scrollId,
+      bubbles: true,
+      composed: true,
+    }));
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    element.scrollIntoView({ behavior: props.scrollAnimation });
+  }
+  return {
+    callbacks: { scroll },
+  };
+}

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -13,37 +13,103 @@ export const SimpleTabs = () => (h("div", { style: { maxWidth: "700px", margin:
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
       </sqm-tabs>
     ` }));
-export const ReferralHistory = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
       </sqm-tabs>
     ` }));
-export const RewardExhange = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+export const SingleTab = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
         <sqm-tab header="Redeem">
           <sqm-reward-exchange-list></sqm-reward-exchange-list>
         </sqm-tab>
       </sqm-tabs>
     ` }));
-export const Leaderboard = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
         <sqm-tab header="Leaderboard">
           <sqm-leaderboard></sqm-leaderboard>
         </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
       </sqm-tabs>
     ` }));
-export const RewardHistory = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
+        <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const BottomTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="bottom">
+        <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
         <sqm-tab header="Reward history">
           <sqm-rewards-table></sqm-rewards-table>
         </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
       </sqm-tabs>
     ` }));
-export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
+export const LeftTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="left">
         <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
           <sqm-leaderboard></sqm-leaderboard>
         </sqm-tab>
         <sqm-tab header="Referral history">
@@ -52,10 +118,13 @@ export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", mar
         <sqm-tab header="Reward history">
           <sqm-rewards-table></sqm-rewards-table>
         </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
       </sqm-tabs>
     ` }));
-export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
+export const RightTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="right">
         <sqm-tab header="Leaderboard">
           <sqm-hero-image
             image-url="https://i.imgur.com/MVgOJn7.png"

package/dist/collection/components/sqm-tabs/sqm-tabs-view.js

@@ -1,22 +1,23 @@
+import { useHost } from "@saasquatch/stencil-hooks";
 import { h, Host } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-const style = {};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-sl-tab-panel::part(base) {
-	padding: var(--sl-spacing-x-large) 0;
-}
-`;
-export const TabsView = ({ content }) => {
+export const TabsView = ({ content, placement, }) => {
+  // Vertical padding for top & bottom placement, horizontal for left & right.
+  const padding = !placement || placement === "bottom"
+    ? "var(--sl-spacing-x-large) 0;"
+    : "0 var(--sl-spacing-xx-large);";
+  const vanillaStyle = `
+    sl-tab-panel::part(base) {
+      padding: ${padding};
+    }
+  `;
+  const host = useHost();
+  console.log("sam host", host);
   return (h(Host, null,
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-tab-group", null, content.tabs.map((tab) => {
+    h("style", { type: "text/css" }, vanillaStyle),
+    h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
       const slotName = tab.getAttribute("slot");
       return [
-        h("sl-tab", { slot: "nav", panel: slotName }, tab.getAttribute("header")),
+        h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
         h("sl-tab-panel", { name: slotName },
           h("slot", { name: slotName })),
       ];

package/dist/collection/components/sqm-tabs/sqm-tabs.js

@@ -1,7 +1,11 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h } from "@stencil/core";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
 import { TabsView } from "./sqm-tabs-view";
 import { useTabs } from "./useTabs";
+/**
+ * @uiName Tabs
+ */
 export class Tabs {
   constructor() {
     withHooks(this);
@@ -9,9 +13,35 @@ export class Tabs {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    return (h(TabsView, { content: content },
+    const { placement } = getProps(this);
+    return (h(TabsView, { placement: placement, content: content },
       h("slot", null)));
   }
   static get is() { return "sqm-tabs"; }
   static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\" | \"bottom\" | null",
+        "resolved": "\"bottom\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Tabs Placement",
+            "name": "uiName"
+          }, {
+            "text": "[\"left\", \"right\", \"bottom\", null]",
+            "name": "uiEnum"
+          }],
+        "text": "Used to specify the placement of the tabs"
+      },
+      "attribute": "placement",
+      "reflect": false
+    }
+  }; }
 }

package/dist/collection/components/sqm-tabs/useTabs.js

@@ -1,12 +1,39 @@
-import { useMemo } from "@saasquatch/universal-hooks";
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useEffect, useMemo } from "@saasquatch/universal-hooks";
 import { useChildElements } from "../../tables/useChildElements";
+const REVEAL_EVENT = "sq:reveal";
 export function useTabs() {
   const rawTabs = useChildElements();
+  const host = useHost();
   const tabs = useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB")
     .map((tab, i) => {
     tab.setAttribute("slot", "tab-" + i);
+    // set id as targets for scroll component
+    tab.setAttribute("id", "tab-" + i);
     return tab;
   }), [rawTabs]);
+  useEffect(() => {
+    const listener = (e) => {
+      var _a, _b, _c, _d, _e, _f;
+      // Prevents recursively nested components from sending requests up all the way
+      e.stopPropagation();
+      //@ts-ignore
+      if (!host.contains(e === null || e === void 0 ? void 0 : e.target) || !((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.shadowRoot))
+        return;
+      const element = (_e = (_d = (_c = 
+      //@ts-ignore
+      e === null || 
+      //@ts-ignore
+      e === void 0 ? void 0 : 
+      //@ts-ignore
+      e.target) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`#${e.target.id}`);
+      (_f = element.parentElement) === null || _f === void 0 ? void 0 : _f.show(element === null || element === void 0 ? void 0 : element.panel);
+    };
+    host.addEventListener(REVEAL_EVENT, listener);
+    return () => {
+      host.removeEventListener(REVEAL_EVENT, listener);
+    };
+  }, []);
   return { content: { tabs } };
 }

package/dist/esm/{ShadowViewAddon-8cb393d4.js → ShadowViewAddon-67cc91dc.js}

@@ -1,10 +1,10 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { k as useState } from './stencil-hooks.module-2f159754.js';
-import { i as intl } from './global-c2179248.js';
-import { d as dist, M, n as ne, x, b as mn, D as De, f as D } from './index.module-ec3dcc82.js';
+import { k as useState } from './stencil-hooks.module-acc8a613.js';
+import { i as intl } from './global-7d4eb5e5.js';
+import { d as dist, M, i as ie, R as Rn, b as sn, q as qe, k as kn } from './index.module-aac201f3.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { l as luxon } from './luxon-5fa22651.js';
+import { l as luxon } from './luxon-f44215d9.js';
 import { l as luxonLocale } from './utils-1d345130.js';
 import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-f74db584.js';
@@ -318,10 +318,10 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = M() } = props;
-  const user = ne();
-  const engagementMedium = x();
-  const { data } = mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = De(WIDGET_ENGAGEMENT_EVENT);
+  const user = ie();
+  const engagementMedium = Rn();
+  const { data } = sn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = qe(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -407,16 +407,16 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : M();
-  const user = ne();
+  const user = ie();
   const variables = {
-    engagementMedium: x(),
+    engagementMedium: Rn(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = mn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = sn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
-  const environment = D();
+  const environment = kn();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);

package/dist/esm/{global-c2179248.js → global-7d4eb5e5.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-2f159754.js';
-import { s as src, m as memoize, S } from './index.module-ec3dcc82.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-acc8a613.js';
+import { s as src, m as memoize, S } from './index.module-aac201f3.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {