@saasquatch/mint-components 1.11.1-3 → 1.11.1-31

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,19 @@ 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
  * @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 +29,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 +62,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 +119,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,43 @@
-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(
+    $limit: Int!
+    $offset: Int!
+    $engagementMedium: UserEngagementMedium!
+    $programId: ID
+  ) {
     viewer {
       ... on User {
-        referralCodeList(limit: $limit, offset: $offset) {
+        referralCodeList(
+          limit: $limit
+          offset: $offset
+          filter: { fuelTank_eq: true, programId_eq: $programId }
+        ) {
           data {
             code
             dateUsed
             dateCopied
-            shareLinkCodes(limit: $limit, offset: $offset) {
+            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 +50,29 @@ 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();
+  const engagementMedium = useEngagementMedium();
+  const programId = props.programId || useProgramId();
   console.log({ props });
-  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.referralCodes; }, {
+  const { refresh } = useRefreshDispatcher();
+  const { envelope: referralData, states, callbacks, } = usePaginatedQuery(GET_REFERRAL_CODES, (data) => {
+    var _a;
+    console.log({ queryData: data });
+    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 }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const [paginationContext, setPaginationContext] = useParentState({
     namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
     initialValue: { states, callbacks },
@@ -43,54 +80,51 @@ 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(() => {
-    if (referralData === null || referralData === void 0 ? void 0 : referralData.data)
+    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({
-        referralCode: "EXAMPLECODE",
-        shareLink: "https://example.com",
+        refresh,
+        referralCode: data.code,
+        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: "https://example.com",
+          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: "https://example.com",
-          shareLink: "https://example.com",
+        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: "https://example.com" },
+        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: {
-      referralCode: "EXAMPLECODE",
-      shareLink: "https://example.com",
-      email: {
-        messageLink: "https://example.com",
-      },
-      fbMessenger: {
-        messageLink: "https://example.com",
-        shareLink: "https://example.com",
-      },
-      whatsApp: { messageLink: "https://example.com" },
-    },
+    data: referralCodesContext,
     callbacks: {
     // onPrev: () => callbacks.setCurrentPage(states.currentPage - 1),
     // onNext: () => callbacks.setCurrentPage(states.currentPage + 1),

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))));
 }

package/dist/collection/stories/Widget.stories.js

@@ -3,6 +3,7 @@ import { h } from "@stencil/core";
 import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
 import referralWidget from "../templates/ReferralWidget.html";
 import monoWidget from "../templates/MonoWidget.html";
+import promoCodeReferralWidget from "../templates/PromoCodeReferralWidget.html";
 import loyaltyWidget from "../templates/LoyaltyWidget.html";
 import instantAccessReferrerShareWidget from "../templates/InstantAccessReferrerShareWidget.html";
 import instantAccessFriendCouponWidget from "../templates/InstantAccessFriendCouponWidget.html";
@@ -42,6 +43,10 @@ export const Loyalty = createHookStory(() => {
   const { states, callbacks } = useTemplate(loyaltyWidget);
   return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: loyaltyWidget }));
 });
+export const PromoCodeReferralWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate(promoCodeReferralWidget);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: referralWidget }));
+});
 export const InstantAccessReferrerShareWidget = createHookStory(() => {
   const { states, callbacks } = useTemplate(instantAccessReferrerShareWidget);
   return h(TemplateView, { states: states, callbacks: callbacks });

package/dist/esm/{GenericTableView-bf154727.js → GenericTableView-706f5b56.js}

@@ -1,4 +1,4 @@
-import { h } from './index-17b4da69.js';
+import { h } from './index-014ddfa3.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-f60a614c.js';
 

package/dist/esm/{ShadowViewAddon-afc80fe0.js → ShadowViewAddon-8be5dd91.js}

@@ -1,18 +1,18 @@
-import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-ac12ca1c.js';
-import { i as intl } from './global-b89b6edc.js';
-import { d as dist, H, Q, I as In, y as yn, $ as $e, B, a as getEnvironmentSDK, L } from './index.module-f122af7b.js';
+import { h, c as Host, d as getAssetPath, g as getElement } from './index-014ddfa3.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-576d7f01.js';
+import { i as intl } from './global-701bd5b0.js';
+import { d as dist, H, Q, I as In, y as yn, $ as $e, B, a as getEnvironmentSDK, L } from './index.module-5eb0926c.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_USED, C as CopyTextView } from './copy-text-view-3cd1338e.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-1fc818b1.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
-import { u as useChildElements } from './useChildElements-37daf533.js';
-import { l as luxon } from './luxon-7600be8d.js';
-import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
+import { u as useChildElements } from './useChildElements-ebcfbc19.js';
+import { l as luxon } from './luxon-12195d94.js';
+import { T as TextSpanView } from './sqm-text-span-view-d6e03f93.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-18d10876.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-6c582684.js';
+import { a as isValidColor, b as isMobile } from './utilities-292b61b9.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-83df005d.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -379,14 +379,15 @@ function useShareLink(props) {
   const contextData = In(REFERRAL_CODES_NAMESPACE);
   const { data } = yn(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] = $e(WIDGET_ENGAGEMENT_EVENT);
-  const [setUsed, usedRes] = $e(SET_CODE_USED);
+  const [setCopied, copiedRes] = $e(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
@@ -465,25 +466,27 @@ function useShareButton(props) {
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : H();
   const user = Q();
+  const engagementMedium = B();
   const variables = {
-    engagementMedium: B(),
+    engagementMedium,
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const data = In(REFERRAL_CODES_NAMESPACE);
-  const overrideData = data === null || data === void 0 ? void 0 : data[medium];
+  const contextData = In(REFERRAL_CODES_NAMESPACE);
+  const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
   const res = yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setUsed, usedRes] = $e(SET_CODE_USED);
+  const [setCopied, copiedRes] = $e(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") {
@@ -496,7 +499,12 @@ 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,
+  };
 }
 
 const debug = browser("sq:useBigStat");