@saasquatch/mint-components 1.11.1-4 → 1.11.1-40

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
@@ -16,15 +16,13 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PaginationView(props) {
-  const { onNext, onPrev, currentPage, totalPages } = props;
+  const { onNext, onPrev, currentPage, totalPages, text, loading } = props;
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
-      h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
-    h("div", { class: sheet.classes.TextContainer },
-      h("span", null, currentPage),
-      h("span", null, "of"),
-      h("span", null, totalPages)),
+    !loading && (h(Fragment, null,
+      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
     h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }

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

@@ -6,6 +6,7 @@ import deepmerge from "deepmerge";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useState } from "@saasquatch/universal-hooks";
 import { isDemo } from "@saasquatch/component-boilerplate";
+import { intl } from "../../global/global";
 /**
  * @uiName Pagination
  * @exampleGroup Common Components
@@ -14,29 +15,62 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 export class Pagination {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Pagination text
+     */
+    this.paginationText = "{currentPage} of {totalPages}";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    // const props = getProps(this);
-    var _a, _b;
+    var _a;
     const hookProps = isDemo()
       ? useDemoPagination(getProps(this))
       : usePagination();
+    const currentPage = hookProps.states.currentPage + 1;
+    const totalPages = (_a = hookProps.states) === null || _a === void 0 ? void 0 : _a.pageCount;
     const props = {
-      currentPage: (_a = hookProps.states) === null || _a === void 0 ? void 0 : _a.currentPage,
-      totalPages: (_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.pageCount,
+      currentPage,
+      totalPages,
       onNext: () => { var _a, _b; return (_a = hookProps.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
       onPrev: () => { var _a, _b; return (_a = hookProps.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
       text: {
-        ofText: "of",
+        paginationText: intl.formatMessage({
+          id: `paginationText`,
+          defaultMessage: this.paginationText,
+        }, {
+          currentPage,
+          totalPages,
+        }),
       },
+      loading: hookProps.states.loading,
     };
     return h(PaginationView, Object.assign({}, props));
   }
   static get is() { return "sqm-pagination"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "paginationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Pagination text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "pagination-text",
+      "reflect": false,
+      "defaultValue": "\"{currentPage} of {totalPages}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -71,15 +105,18 @@ export class Pagination {
 function useDemoPagination(props) {
   const [currentPage, setCurrentPage] = useState(1);
   return deepmerge({
-    states: {
-      currentPage: currentPage,
-      pageCount: 5,
-    },
+    states: {},
     callbacks: {
       setCurrentPage,
     },
     text: {
-      ofText: `${currentPage} of 5`,
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: this.paginationText,
+      }, {
+        currentPage: currentPage + 1,
+        totalPages: 5,
+      }),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-referral-code/sqm-referral-code.js

@@ -39,7 +39,7 @@ export class ReferralCode {
     /**
      * Change the text alignment
      *
-     * @uiName referral code alignment
+     * @uiName Referral code alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -190,7 +190,7 @@ export class ReferralCode {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "referral code alignment",
+            "text": "Referral code alignment",
             "name": "uiName"
           }, {
             "text": "string",
@@ -264,7 +264,7 @@ export class ReferralCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -302,6 +302,8 @@ function useDemoReferralCode(props) {
     buttonStyle: props.buttonStyle,
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
+    isCopied: props.showNotificationText,
+    isUsed: false,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

package/dist/collection/components/sqm-referral-code/useReferralCode.js

@@ -1,7 +1,7 @@
 import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-import { REFERRAL_CODES_NAMESPACE, SET_CODE_USED, } from "../sqm-referral-codes/useReferralCodes";
+import { REFERRAL_CODES_NAMESPACE, SET_CODE_COPIED, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query ($programId: ID) {
     user: viewer {
@@ -24,14 +24,15 @@ export function useReferralCode(props) {
   const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const [setUsed, usedRes] = useMutation(SET_CODE_USED);
+  const [setCopied, copiedRes] = useMutation(SET_CODE_COPIED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) || ((_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
   "...";
   const [open, setOpen] = useState(false);
-  function onClick() {
+  async function onClick() {
     if (contextData) {
-      setUsed(true);
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
     }
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
@@ -51,5 +52,11 @@ export function useReferralCode(props) {
       },
     });
   }
-  return { ...props, onClick, open, copyString: copyString };
+  return {
+    ...props,
+    onClick,
+    open,
+    copyString: copyString,
+    isCopied: contextData === null || contextData === void 0 ? void 0 : contextData.isCopied,
+  };
 }

package/dist/collection/components/sqm-referral-codes/ReferralCodes.stories.js

@@ -6,6 +6,12 @@ export default {
     scenario,
   },
 };
+const demoData = {
+  states: {
+    noCodes: false,
+    loading: false,
+  },
+};
 const pagination = (slot) => {
   return h("sqm-pagination", { slot: slot });
 };
@@ -33,3 +39,15 @@ export const WithPreviouslyCopiedCode = () => {
     shareCodeWithPreviouslyCopied("shareCodes"),
     shareButtons("shareButtons")));
 };
+export const Empty = () => {
+  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+export const Loading = () => {
+  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes-view.js

@@ -46,7 +46,18 @@ const vanillaStyle = `
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ReferralCodesView(props) {
-  const { slots, titleText } = props;
+  const { slots, titleText, states } = props;
+  const getSlotContent = (states) => {
+    if (states.noCodes) {
+      return slots.empty;
+    }
+    if (states.loading) {
+      return slots.loading;
+    }
+    return (h("div", { class: sheet.classes.Wrapper },
+      h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
+      h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
+  };
   return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
@@ -54,6 +65,5 @@ export function ReferralCodesView(props) {
     h("div", { class: sheet.classes.HeaderContainer },
       h("h2", { class: sheet.classes.TitleText }, titleText),
       slots.pagination),
-    h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
-    h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
+    getSlotContent(states)));
 }

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -3,19 +3,20 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
-import { useReferralCodes } from "./useReferralCodes";
 import { ReferralCodesView, } from "./sqm-referral-codes-view";
+import { useReferralCodes } from "./useReferralCodes";
 /**
  * @uiName Referral Codes
+ * @slots [{"name":"", "title":"Promo Codes Content"}]
  * @exampleGroup Sharing
- * @example Referral Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="facebook">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
+ * @example Referral Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
  */
 export class ReferralCodes {
   constructor() {
     /**
      * @uiName Title Text
      */
-    this.titleText = "Your referral code";
+    this.titleText = "Start sharing";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -29,10 +30,14 @@ export class ReferralCodes {
       shareButtons: h("slot", { name: "shareButtons" }),
       shareCodes: h("slot", { name: "shareCodes" }),
       pagination: h("slot", { name: "pagination" }),
+      empty: h(EmptySlot, null),
+      loading: h(LoadingSlot, null),
     };
     const viewProps = {
       slots,
       ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
     };
     return h(ReferralCodesView, Object.assign({}, viewProps));
   }
@@ -58,14 +63,37 @@ export class ReferralCodes {
       },
       "attribute": "title-text",
       "reflect": false,
-      "defaultValue": "\"Your referral code\""
+      "defaultValue": "\"Start sharing\""
+    },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "program-id",
+      "reflect": false
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; }; titleText?: string; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -92,8 +120,26 @@ export class ReferralCodes {
     }
   }; }
 }
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { emptyStateHeader: "Your new codes and links aren\u2019t ready yet", emptyStateText: "Please contact our program support team to let them know you\u2019re out of codes." })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return h("sl-skeleton", { style: { width: "100%" } });
+}
 function useDemoReferralCodes(props) {
   return deepmerge({
     titleText: props.titleText,
+    states: {
+      noCodes: false,
+      loading: false,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-referral-codes/useReferralCodes.js

@@ -1,19 +1,40 @@
-import { usePaginatedQuery, useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { gql } from "graphql-request";
+import { useEngagementMedium, usePaginatedQuery, useParentState, useProgramId, useRefreshDispatcher, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
 const GET_REFERRAL_CODES = gql `
-  query getCodes($limit: Int!, $offset: Int!) {
+  query getCodes(
+    $engagementMedium: UserEngagementMedium!
+    $limit: Int!
+    $offset: Int!
+    $filter: ReferralCodeFilterInput
+  ) {
     viewer {
       ... on User {
-        referralCodeList(limit: $limit, offset: $offset) {
+        referralCodeList(limit: $limit, offset: $offset, filter: $filter) {
           data {
             code
             dateUsed
             dateCopied
-            shareLinkCodes(limit: $limit, offset: $offset) {
+            singleUse
+            shareLinkCodes(limit: $limit) {
               data {
                 linkCode
-                shortUrl
+                shareLink: shortUrl(
+                  shareMedium: DIRECT
+                  engagementMedium: EMBED
+                )
+                email: shortUrl(
+                  shareMedium: EMAIL
+                  engagementMedium: $engagementMedium
+                )
+                whatsApp: shortUrl(
+                  shareMedium: WHATSAPP
+                  engagementMedium: $engagementMedium
+                )
+                fbMessenger: shortUrl(
+                  shareMedium: FBMESSENGER
+                  engagementMedium: $engagementMedium
+                )
               }
             }
           }
@@ -26,16 +47,32 @@ const GET_REFERRAL_CODES = gql `
 `;
 export const REFERRAL_CODES_NAMESPACE = "sq:referral-codes";
 export const REFERRAL_CODES_PAGINATION_CONTEXT = "sq:referral-codes-pagination";
-export const SET_CODE_USED = gql `
-mutation test {}
+export const SET_CODE_COPIED = gql `
+  mutation markReferralCodeCopied($referralCode: String!) {
+    markReferralCodeCopied(referralCode: $referralCode) {
+      referralCode {
+        dateCopied
+      }
+    }
+  }
 `;
 export function useReferralCodes(props) {
   const user = useUserIdentity();
-  console.log({ props });
+  const engagementMedium = useEngagementMedium();
+  const programId = props.programId || useProgramId();
+  const { refresh } = useRefreshDispatcher();
   const { envelope: referralData, states, callbacks, } = usePaginatedQuery(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList; }, {
     limit: 1,
     offset: 0,
-  }, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  }, {
+    engagementMedium,
+    programId,
+    filter: {
+      fuelTank_eq: true,
+      programId_eq: programId,
+      dateUsed_exists: false,
+    },
+  }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const [paginationContext, setPaginationContext] = useParentState({
     namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
     initialValue: { states, callbacks },
@@ -43,44 +80,49 @@ export function useReferralCodes(props) {
   const [referralCodesContext, setReferralCodesContext] = useParentState({
     namespace: REFERRAL_CODES_NAMESPACE,
     initialValue: {
+      refresh,
       loading: true,
       referralCode: "",
       shareLink: "",
+      isCopied: false,
+      isUsed: false,
       email: {
         messageLink: "",
       },
-      fbMessenger: {
+      fbmessenger: {
         messageLink: "",
         shareLink: "",
       },
-      whatsApp: { messageLink: "" },
+      whatsapp: { messageLink: "" },
     },
   });
   useEffect(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     if ((_a = referralData === null || referralData === void 0 ? void 0 : referralData.data) === null || _a === void 0 ? void 0 : _a.length) {
       const data = referralData.data[0];
       setReferralCodesContext({
+        refresh,
         referralCode: data.code,
-        shareLink: (_c = (_b = data.shareLinkCodes) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.shortUrl,
+        isCopied: !!data.dateCopied,
+        isUsed: !!data.dateUsed,
+        shareLink: (_d = (_c = (_b = data.shareLinkCodes) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.direct,
         email: {
-          messageLink: (_e = (_d = data.shareLinkCodes) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.shortUrl,
+          messageLink: (_g = (_f = (_e = data.shareLinkCodes) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.email,
         },
-        fbMessenger: {
-          messageLink: (_g = (_f = data.shareLinkCodes) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.shortUrl,
-          shareLink: (_j = (_h = data.shareLinkCodes) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.shortUrl,
+        fbmessenger: {
+          messageLink: (_k = (_j = (_h = data.shareLinkCodes) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.fbMessenger,
+          shareLink: (_o = (_m = (_l = data.shareLinkCodes) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.fbMessenger,
         },
-        whatsApp: { messageLink: (_l = (_k = data.shareLinkCodes) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.shortUrl },
+        whatsapp: { messageLink: (_r = (_q = (_p = data.shareLinkCodes) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.whatsApp },
       });
+      setPaginationContext({ states, callbacks });
     }
   }, [referralData]);
-  useEffect(() => {
-    setPaginationContext({ states, callbacks });
-  }, [states]);
   console.log({ referralData, states });
   return {
     states: {
       ...states,
+      noCodes: (referralData === null || referralData === void 0 ? void 0 : referralData.totalCount) === 0,
     },
     data: referralCodesContext,
     callbacks: {

package/dist/collection/components/sqm-share-button/useShareButton.js

@@ -1,7 +1,7 @@
 import { useEngagementMedium, useUserIdentity, useQuery, useParentValue, useMutation, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 import { useProgramId, getEnvironmentSDK, } from "@saasquatch/component-boilerplate";
-import { REFERRAL_CODES_NAMESPACE, SET_CODE_USED, } from "../sqm-referral-codes/useReferralCodes";
+import { REFERRAL_CODES_NAMESPACE, SET_CODE_COPIED, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query (
     $programId: ID
@@ -58,25 +58,27 @@ export function useShareButton(props) {
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : useProgramId();
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const variables = {
-    engagementMedium: useEngagementMedium(),
+    engagementMedium,
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const data = useParentValue(REFERRAL_CODES_NAMESPACE);
-  const overrideData = data === null || data === void 0 ? void 0 : data[medium];
+  const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
+  const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
   const res = useQuery(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setUsed, usedRes] = useMutation(SET_CODE_USED);
+  const [setCopied, copiedRes] = useMutation(SET_CODE_COPIED);
   const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_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 = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
-  function onClick() {
+  async function onClick() {
     var _a, _b, _c, _d;
     if (overrideData) {
-      setUsed(true);
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
     }
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {
@@ -89,5 +91,10 @@ export function useShareButton(props) {
       GenericShare((overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.messageLink), props.errorText);
     }
   }
-  return { ...props, loading: res.loading, onClick, hide };
+  return {
+    ...props,
+    loading: res.loading && !(overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink),
+    onClick,
+    hide,
+  };
 }

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -210,7 +210,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -210,7 +210,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-link/useShareLink.js

@@ -1,7 +1,7 @@
 import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-import { REFERRAL_CODES_NAMESPACE, SET_CODE_USED, } from "../sqm-referral-codes/useReferralCodes";
+import { REFERRAL_CODES_NAMESPACE, SET_CODE_COPIED, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
     user: viewer {
@@ -28,14 +28,15 @@ export function useShareLink(props) {
   const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
   const { data } = useQuery(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const [setUsed, usedRes] = useMutation(SET_CODE_USED);
+  const [setCopied, copiedRes] = useMutation(SET_CODE_COPIED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_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
   "...";
   const [open, setOpen] = useState(false);
-  function onClick() {
+  async function onClick() {
     if (contextData) {
-      setUsed(true);
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
     }
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event

package/dist/collection/components/views/copy-text-view.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   HostBlock: HostBlock,
   inputStyle: {
@@ -86,5 +86,7 @@ export function CopyTextView(props) {
         error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
       (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
         copyButton),
-    props.showNotificationText && props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
+    props.isCopied &&
+      props.showNotificationText &&
+      props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
 }