@saasquatch/mint-components 1.12.1-4 → 1.12.1-6

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

@@ -0,0 +1,219 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { ReferralCodesView, } from "./sqm-referral-codes-view";
+import { useReferralCodes } from "./useReferralCodes";
+/**
+ * @uiName Promo Codes
+ * @slots [{"name":"", "title":"Promo Codes Content"}]
+ * @exampleGroup Sharing
+ * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></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 = "Start sharing";
+    /**
+     * @uiName Empty State Header Text
+     */
+    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
+    /**
+     * @uiName Empty State Description Text
+     */
+    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
+    /**
+     * @uiName Empty State Image URL
+     */
+    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoReferralCodes(thisProps)
+      : useReferralCodes(thisProps);
+    const slots = {
+      shareButtons: h("slot", { name: "shareButtons" }),
+      shareCodes: h("slot", { name: "shareCodes" }),
+      pagination: h("slot", { name: "pagination" }),
+      empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
+      loading: h(LoadingSlot, null),
+    };
+    const viewProps = {
+      slots,
+      ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
+    };
+    return h(ReferralCodesView, Object.assign({}, viewProps));
+  }
+  static get is() { return "sqm-referral-codes"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "titleText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title-text",
+      "reflect": false,
+      "defaultValue": "\"Start sharing\""
+    },
+    "emptyStateHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Header Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header-text",
+      "reflect": false,
+      "defaultValue": "\"Your new codes and links aren\u2019t ready yet\""
+    },
+    "emptyStateDescriptionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Description Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-description-text",
+      "reflect": false,
+      "defaultValue": "\"Please contact our program support team to let them know you\u2019re out of codes.\""
+    },
+    "emptyStateImageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image URL",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image-url",
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
+    },
+    "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": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "ReferralCodesViewProps": {
+            "location": "import",
+            "path": "./sqm-referral-codes-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function EmptySlot({ headerText, descriptionText, imageUrl, }) {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
+}
+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

@@ -0,0 +1,131 @@
+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(
+    $engagementMedium: UserEngagementMedium!
+    $limit: Int!
+    $offset: Int!
+    $filter: ReferralCodeFilterInput
+  ) {
+    viewer {
+      ... on User {
+        referralCodeList(limit: $limit, offset: $offset, filter: $filter) {
+          data {
+            code
+            dateUsed
+            dateCopied
+            singleUse
+            shareLinkCodes(limit: $limit) {
+              data {
+                linkCode
+                shareLink: shortUrl(
+                  shareMedium: DIRECT
+                  engagementMedium: EMBED
+                )
+                email: shortUrl(
+                  shareMedium: EMAIL
+                  engagementMedium: $engagementMedium
+                )
+                whatsApp: shortUrl(
+                  shareMedium: WHATSAPP
+                  engagementMedium: $engagementMedium
+                )
+                fbMessenger: shortUrl(
+                  shareMedium: FBMESSENGER
+                  engagementMedium: $engagementMedium
+                )
+              }
+            }
+          }
+          count
+          totalCount
+        }
+      }
+    }
+  }
+`;
+export const REFERRAL_CODES_NAMESPACE = "sq:referral-codes";
+export const REFERRAL_CODES_PAGINATION_CONTEXT = "sq:referral-codes-pagination";
+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();
+  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,
+  }, {
+    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 },
+  });
+  const [referralCodesContext, setReferralCodesContext] = useParentState({
+    namespace: REFERRAL_CODES_NAMESPACE,
+    initialValue: {
+      refresh,
+      loading: true,
+      referralCode: "",
+      shareLink: "",
+      isCopied: false,
+      isUsed: false,
+      singleUse: false,
+      email: {
+        messageLink: "",
+      },
+      fbmessenger: {
+        messageLink: "",
+        shareLink: "",
+      },
+      whatsapp: { messageLink: "" },
+    },
+  });
+  useEffect(() => {
+    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,
+        isCopied: !!data.dateCopied,
+        isUsed: !!data.dateUsed,
+        singleUse: !!data.singleUse,
+        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: (_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: (_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: (_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]);
+  return {
+    states: {
+      ...states,
+      noCodes: (referralData === null || referralData === void 0 ? void 0 : referralData.totalCount) === 0,
+    },
+    data: referralCodesContext,
+    callbacks: {},
+  };
+}

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -289,7 +289,6 @@ export const PayoutFailed = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
-// AL: TODO payout cancelled
 export const PayoutCancelled = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -6,6 +6,8 @@ import { intl } from "../../../global/global";
 import { luxonLocale } from "../../../utils/utils";
 export class ReferralTableRewardsCell {
   constructor() {
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    this.statusLongText = "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }";
     this.locale = "en";
   }
   render() {
@@ -339,7 +341,8 @@ export class ReferralTableRewardsCell {
         "text": ""
       },
       "attribute": "status-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\""
     },
     "statusLongText": {
       "type": "string",
@@ -356,7 +359,8 @@ export class ReferralTableRewardsCell {
         "text": ""
       },
       "attribute": "status-long-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }\""
     },
     "fuelTankText": {
       "type": "string",

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

@@ -224,9 +224,7 @@ export const SourceCellDeletedUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
 };
 export const SourceCellDeletedReferral = () => {
-  return (
-  // AL: TODO
-  h("sqm-rewards-table-source-cell", { 
+  return (h("sqm-rewards-table-source-cell", { 
     //@ts-ignore
     reward: { ...rewardsData, ...deletedReferral(null) }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
 };

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

@@ -1,6 +1,7 @@
-import { useEngagementMedium, useUserIdentity, useQuery, } from "@saasquatch/component-boilerplate";
+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_COPIED, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query (
     $programId: ID
@@ -38,52 +39,62 @@ function NativeShare(props, directLink, undefinedErrorText, unsupportedPlatformT
     alert(unsupportedPlatformText);
   }
 }
-function FacebookShare(directLink, res, errorText) {
-  var _a, _b;
-  if (((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) === "undefined" ||
-    directLink === "undefined") {
+function FacebookShare(directLink, messageLink, errorText) {
+  if (messageLink === "undefined" || directLink === "undefined") {
     return alert(errorText);
   }
   if (typeof SquatchAndroid.shareOnFacebook !== "undefined") {
-    return SquatchAndroid.shareOnFacebook(directLink, res.data.viewer.messageLink);
+    return SquatchAndroid.shareOnFacebook(directLink, messageLink);
   }
   else {
-    return GenericShare(res, errorText);
+    return GenericShare(messageLink, errorText);
   }
 }
-function GenericShare(res, errorText) {
-  var _a, _b;
-  return ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink) ? window.open(res.data.viewer.messageLink)
-    : alert(errorText);
+function GenericShare(messageLink, errorText) {
+  return messageLink ? window.open(messageLink) : alert(errorText);
 }
 export function useShareButton(props) {
   var _a, _b;
   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 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);
-  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 res = useQuery(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  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) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {
-      FacebookShare(directLink, res, props.errorText);
+      FacebookShare(directLink, (overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink), props.errorText);
     }
     else if (medium.toLocaleUpperCase() === "DIRECT") {
       NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
     }
     else {
-      GenericShare(res, props.errorText);
+      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; 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; 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,6 +1,7 @@
-import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+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_COPIED, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
     user: viewer {
@@ -24,13 +25,19 @@ export function useShareLink(props) {
   const { programId = useProgramId() } = props;
   const user = useUserIdentity();
   const engagementMedium = useEngagementMedium();
-  const { data } = useQuery(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  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 copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
+  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) {
+      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
     navigator.clipboard.writeText(copyString);

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

@@ -3,6 +3,7 @@ import { useStencilbook } from "@saasquatch/stencilbook";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import * as ShareButton from "../sqm-share-button/ShareButton.stories";
 import * as EmptyState from "../sqm-empty/EmptyState.stories";
+import * as Pagination from "../sqm-pagination/Pagination.stories";
 import * as ShareLink from "../sqm-share-link/ShareLink.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
 import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
@@ -25,7 +26,6 @@ import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
-import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
 import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
 import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
@@ -48,7 +48,6 @@ import * as Hero from "../sqm-hero/Hero.stories";
 import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
-import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
 import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
 import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
 import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
@@ -71,6 +70,7 @@ import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
 import * as Tabs from "../sqm-tabs/Tabs.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
+import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
 import * as EmailRegistration from "../views/EmailRegistration.stories";
 import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
 import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
@@ -85,6 +85,10 @@ import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
 import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
 import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
 import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
+import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
+import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
+import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
+import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -95,6 +99,7 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
+  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -140,7 +145,6 @@ const stories = [
   ReferralIframe,
   NameFields,
   CheckboxField,
-  MarketingEmailsCheckbox,
   DropdownField,
   InputField,
   RewardExchangeList,
@@ -164,6 +168,8 @@ const stories = [
   Tabs,
   ShareCode,
   CouponCode,
+  ReferralCode,
+  ReferralCodes,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,
@@ -174,7 +180,9 @@ const stories = [
   TaxFormSlots,
   PayoutDetailsCard,
   BankingInfoForm,
-  NewPortalRegistrationForm,
+  BaseRegistrationForm,
+  PortalRegistrationForm,
+  PortalGoogleRegistrationFormStories,
 ];
 /**
  * For internal documentation