@saasquatch/mint-components 1.11.0 → 1.11.1-1

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

@@ -0,0 +1,35 @@
+import { h } from "@stencil/core";
+import scenario from "./ReferralCodes.feature";
+export default {
+  title: "Components/Referral Codes",
+  parameters: {
+    scenario,
+  },
+};
+const pagination = (slot) => {
+  return h("sqm-pagination", { slot: slot });
+};
+const shareButtons = (slot) => {
+  return (h("sqm-portal-container", { gap: "small", slot: slot },
+    h("sqm-share-button", { medium: "email" }, "Share via email"),
+    h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+    h("sqm-share-button", { medium: "whatsapp" }, "Share on WhatsApp")));
+};
+const shareCodes = (slot) => {
+  return h("sqm-referral-code", { slot: slot });
+};
+const shareCodeWithPreviouslyCopied = (slot) => {
+  return (h("sqm-referral-code", { slot: slot, showNotificationText: true, notificationText: "You\u2019ve copied this before." }));
+};
+export const ReferralCodes = () => {
+  return (h("sqm-referral-codes", null,
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+export const WithPreviouslyCopiedCode = () => {
+  return (h("sqm-referral-codes", null,
+    pagination("pagination"),
+    shareCodeWithPreviouslyCopied("shareCodes"),
+    shareButtons("shareButtons")));
+};

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

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Wrapper: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-large)",
+  },
+  HeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  ShareCodeContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  ShareButtonContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  TitleText: {
+    color: "var(--sl-color-neutral-700)",
+    fontSize: "var(--sl-font-size-large)",
+    margin: "0",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function ReferralCodesView(props) {
+  const { slots, titleText } = props;
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    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)));
+}

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

@@ -0,0 +1,99 @@
+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 { useReferralCodes } from "./useReferralCodes";
+import { ReferralCodesView, } from "./sqm-referral-codes-view";
+/**
+ * @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>
+ */
+export class ReferralCodes {
+  constructor() {
+    /**
+     * @uiName Title Text
+     */
+    this.titleText = "Your referral code";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoReferralCodes(thisProps)
+      : useReferralCodes(thisProps);
+    console.log(props);
+    const slots = {
+      shareButtons: h("slot", { name: "shareButtons" }),
+      shareCodes: h("slot", { name: "shareCodes" }),
+      pagination: h("slot", { name: "pagination" }),
+    };
+    const viewProps = {
+      slots,
+      ...props,
+    };
+    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": "\"Your referral code\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<ReferralCodesViewProps>",
+        "resolved": "{ slots?: { shareButtons: VNode; shareCodes: VNode; pagination: 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 useDemoReferralCodes(props) {
+  return deepmerge({
+    titleText: props.titleText,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,75 @@
+import { usePaginatedQuery, useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { useEffect } from "@saasquatch/universal-hooks";
+const GET_REFERRAL_CODES = gql `query getReferralCodes {
+}`;
+export const REFERRAL_CODES_NAMESPACE = "sq:referral-codes";
+export const REFERRAL_CODES_PAGINATION_CONTEXT = "sq:referral-codes-pagination";
+export function useReferralCodes(props) {
+  const user = useUserIdentity();
+  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; }, {
+    limit: 1,
+    offset: 0,
+  }, {}, !(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: {
+      loading: true,
+      referralCode: "",
+      shareLink: "",
+      email: {
+        messageLink: "",
+      },
+      fbMessenger: {
+        messageLink: "",
+        shareLink: "",
+      },
+      whatsApp: { messageLink: "" },
+    },
+  });
+  useEffect(() => {
+    if (referralData === null || referralData === void 0 ? void 0 : referralData.data)
+      setReferralCodesContext({
+        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" },
+      });
+  }, [referralData]);
+  useEffect(() => {
+    setPaginationContext({ states, callbacks });
+  }, [states]);
+  console.log({ referralData, states });
+  return {
+    states: {
+      ...states,
+    },
+    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" },
+    },
+    callbacks: {
+    // onPrev: () => callbacks.setCurrentPage(states.currentPage - 1),
+    // onNext: () => callbacks.setCurrentPage(states.currentPage + 1),
+    },
+  };
+}

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, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 import { useProgramId, getEnvironmentSDK, } from "@saasquatch/component-boilerplate";
+import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query (
     $programId: ID
@@ -38,26 +39,22 @@ 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;
+  var _a, _b, _c;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : useProgramId();
   const user = useUserIdentity();
@@ -66,23 +63,25 @@ export function useShareButton(props) {
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
+  const data = useParentValue(REFERRAL_CODES_NAMESPACE);
   // 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 || (data === null || data === void 0 ? void 0 : data[medium]) !== undefined);
+  const directLink = ((_a = data === null || data === void 0 ? void 0 : data[medium]) === null || _a === void 0 ? void 0 : _a.shareLink) || ((_c = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.viewer) === null || _c === void 0 ? void 0 : _c.shareLink);
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
   function onClick() {
+    var _a, _b, _c, _d, _e, _f;
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {
-      FacebookShare(directLink, res, props.errorText);
+      FacebookShare(directLink, ((_a = data === null || data === void 0 ? void 0 : data[medium]) === null || _a === void 0 ? void 0 : _a.messageLink) || ((_c = (_b = res.data) === null || _b === void 0 ? void 0 : _b.viewer) === null || _c === void 0 ? void 0 : _c.messageLink), props.errorText);
     }
     else if (medium.toLocaleUpperCase() === "DIRECT") {
       NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
     }
     else {
-      GenericShare(res, props.errorText);
+      GenericShare(((_d = data === null || data === void 0 ? void 0 : data[medium]) === null || _d === void 0 ? void 0 : _d.messageLink) || ((_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.messageLink), props.errorText);
     }
   }
   return { ...props, loading: res.loading, 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; 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; 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, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
     user: viewer {
@@ -24,9 +25,10 @@ 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 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);

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";
@@ -69,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";
@@ -83,6 +85,7 @@ 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 Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -93,6 +96,7 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
+  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -161,6 +165,8 @@ const stories = [
   Tabs,
   ShareCode,
   CouponCode,
+  ReferralCode,
+  ReferralCodes,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,

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

@@ -13,6 +13,14 @@ const style = {
       border: "2px solid red",
     },
   },
+  ContainerDiv: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
   containerStyle: {
     display: "flex",
     alignItems: "center",
@@ -23,6 +31,10 @@ const style = {
     margin: "0",
     color: "var(--sl-color-danger-500)",
   },
+  notificationTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-neutral-500)",
+  },
 };
 const vanillaStyle = `
   :host{
@@ -50,6 +62,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function CopyTextView(props) {
   const { buttonStyle = "icon" } = props;
+  console.log("notification text is", props.notificationText);
   const error = !props.loading && props.error;
   const inputText = error ? props.inputPlaceholderText : props.copyString;
   const disabled = error || props.loading || props.disabled;
@@ -59,7 +72,7 @@ export function CopyTextView(props) {
       ? "top"
       : "top-end";
   const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
-  return (h("div", null,
+  return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle,
@@ -72,5 +85,6 @@ export function CopyTextView(props) {
         buttonStyle === "icon" && copyButton,
         error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
       (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
-        copyButton)));
+        copyButton),
+    props.showNotificationText && props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
 }