@saasquatch/mint-components 1.11.1-12 → 1.11.1-14

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,14 @@ 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() {
     if (contextData) {
-      setUsed(true);
+      setCopied(contextData.referralCode);
     }
     // 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 +51,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

@@ -29,6 +29,8 @@ 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,
@@ -67,7 +69,7 @@ export class ReferralCodes {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; }; loading?: boolean; titleText?: string; noCodes?: boolean; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -94,6 +96,20 @@ 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,

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

@@ -49,8 +49,12 @@ 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
+    }
+  }
 `;
 export function useReferralCodes(props) {
   const user = useUserIdentity();
@@ -74,6 +78,8 @@ export function useReferralCodes(props) {
       loading: true,
       referralCode: "",
       shareLink: "",
+      isCopied: false,
+      isUsed: false,
       email: {
         messageLink: "",
       },
@@ -90,6 +96,8 @@ export function useReferralCodes(props) {
       const data = referralData.data[0];
       setReferralCodesContext({
         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: (_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,

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
@@ -67,7 +67,7 @@ export function useShareButton(props) {
   const overrideData = data === null || data === void 0 ? void 0 : data[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" &&
@@ -76,7 +76,7 @@ export function useShareButton(props) {
   function onClick() {
     var _a, _b, _c, _d;
     if (overrideData) {
-      setUsed(true);
+      setCopied(overrideData === null || overrideData === void 0 ? void 0 : overrideData.referralCode);
     }
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {

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,14 @@ 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() {
     if (contextData) {
-      setUsed(true);
+      setCopied(contextData.referralCode);
     }
     // 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/esm/{ShadowViewAddon-58f39af3.js → ShadowViewAddon-66ec2e09.js}

@@ -4,7 +4,7 @@ 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 { 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-fef437c3.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-5e472643.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';
@@ -379,14 +379,14 @@ 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() {
     if (contextData) {
-      setUsed(true);
+      setCopied(contextData.referralCode);
     }
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
@@ -474,7 +474,7 @@ function useShareButton(props) {
   const overrideData = data === null || data === void 0 ? void 0 : data[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" &&
@@ -483,7 +483,7 @@ function useShareButton(props) {
   function onClick() {
     var _a, _b, _c, _d;
     if (overrideData) {
-      setUsed(true);
+      setCopied(overrideData === null || overrideData === void 0 ? void 0 : overrideData.referralCode);
     }
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {

package/dist/esm/{copy-text-view-fef437c3.js → copy-text-view-5e472643.js}

@@ -52,8 +52,12 @@ const GET_REFERRAL_CODES = dist.gql `
 `;
 const REFERRAL_CODES_NAMESPACE = "sq:referral-codes";
 const REFERRAL_CODES_PAGINATION_CONTEXT = "sq:referral-codes-pagination";
-const SET_CODE_USED = dist.gql `
-mutation test {}
+const SET_CODE_COPIED = dist.gql `
+  mutation markReferralCodeCopied($referralCode: String!) {
+    markReferralCodeCopied(referralCode: $referralCode) {
+      referralCode
+    }
+  }
 `;
 function useReferralCodes(props) {
   const user = Q();
@@ -77,6 +81,8 @@ function useReferralCodes(props) {
       loading: true,
       referralCode: "",
       shareLink: "",
+      isCopied: false,
+      isUsed: false,
       email: {
         messageLink: "",
       },
@@ -93,6 +99,8 @@ function useReferralCodes(props) {
       const data = referralData.data[0];
       setReferralCodesContext({
         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: (_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,
@@ -207,7 +215,9 @@ 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))));
 }
 
-export { CopyTextView as C, REFERRAL_CODES_PAGINATION_CONTEXT as R, SET_CODE_USED as S, REFERRAL_CODES_NAMESPACE as a, useReferralCodes as u };
+export { CopyTextView as C, REFERRAL_CODES_PAGINATION_CONTEXT as R, SET_CODE_COPIED as S, REFERRAL_CODES_NAMESPACE as a, useReferralCodes as u };