@saasquatch/mint-components 1.11.1-0 → 1.12.0-0

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

@@ -1,60 +0,0 @@
-import { h } from "@stencil/core";
-import { CopyTextView } from "../views/copy-text-view";
-import scenario from "./ReferralCode.feature";
-export default {
-  title: "Components/Referral Code",
-  parameters: {
-    scenario,
-  },
-};
-export const ReferralCode = () => {
-  return (h("sqm-referral-code", { tooltiptext: "Copied to Clipboard" }));
-};
-export const ShowNotificationText = () => {
-  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
-};
-export const ShowNotificationTextWithButton = () => {
-  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
-};
-export const ShowNotificationTextWithButtonBelow = () => {
-  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-below" }));
-};
-export const CustomTooltipText = () => {
-  return (h("sqm-referral-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" }));
-};
-export const TextAlignCenter = () => {
-  return h("sqm-referral-code", { textAlign: "center" });
-};
-export const TextAlignRight = () => {
-  return h("sqm-referral-code", { textAlign: "right" });
-};
-export const CustomTooltipDuration = () => {
-  return (h("sqm-referral-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
-};
-export const CopyButton = () => {
-  return (h(CopyTextView, Object.assign({}, {
-    copyString: "https://noah.example.com",
-    open: false,
-    tooltiptext: "Copied!",
-    isCopyIcon: false,
-    buttonStyle: "button-outside",
-  })));
-};
-export const CopyButtonBelow = () => {
-  return (h(CopyTextView, Object.assign({}, {
-    copyString: "https://noah.example.com",
-    open: false,
-    tooltiptext: "Copied!",
-    buttonStyle: "button-below",
-  })));
-};
-export const Error = () => {
-  const props = {
-    copyString: "https://noah.example.com",
-    disabled: true,
-    open: true,
-    tooltiptext: "Copied!",
-    error: true,
-  };
-  return h(CopyTextView, Object.assign({}, props));
-};

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

@@ -1,315 +0,0 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Prop, h } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
-import { CopyTextView } from "../views/copy-text-view";
-import { useReferralCode } from "./useReferralCode";
-/**
- * @uiName Referral Code
- * @exampleGroup Sharing
- * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-referral-code>
- */
-export class ReferralCode {
-  constructor() {
-    /**
-     * Shown inside a tooltip after someone has successfully copied the link to their clipboard
-     *
-     * @uiName Tooltip text
-     */
-    this.tooltiptext = "Copied to Clipboard";
-    /**
-     * Boolean used to show notification text below input
-     *
-     * @uiName Show notification text
-     */
-    this.showNotificationText = false;
-    /**
-     * Shown underneath the referral code when the user has already copied the code
-     *
-     * @uiName Notification text
-     */
-    this.notificationText = "You've copied this code before";
-    /**
-     * The number of milliseconds that the tooltip appears for
-     *
-     * @uiName Tooltip lifespan
-     */
-    this.tooltiplifespan = 1000;
-    /**
-     * Change the text alignment
-     *
-     * @uiName referral code alignment
-     * @uiType string
-     * @uiEnum ["left", "center", "right"]
-     * @uiEnumNames ["Left", "Center", "Right"]
-     */
-    this.textAlign = "left";
-    /**
-     * @uiName Copy button label
-     */
-    this.copyButtonLabel = "Copy Code";
-    /**
-     * Set the copy button style and placement
-     *
-     * @uiName Style
-     * @uiType string
-     * @uiEnum ["icon", "button-outside", "button-below"]
-     * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     */
-    this.buttonStyle = "icon";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const thisProps = getProps(this);
-    const props = isDemo()
-      ? useDemoReferralCode(thisProps)
-      : useReferralCode(thisProps);
-    return h(CopyTextView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-referral-code"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "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": "The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded."
-      },
-      "attribute": "program-id",
-      "reflect": false
-    },
-    "tooltiptext": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Tooltip text",
-            "name": "uiName"
-          }],
-        "text": "Shown inside a tooltip after someone has successfully copied the link to their clipboard"
-      },
-      "attribute": "tooltip-text",
-      "reflect": false,
-      "defaultValue": "\"Copied to Clipboard\""
-    },
-    "showNotificationText": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Show notification text",
-            "name": "uiName"
-          }],
-        "text": "Boolean used to show notification text below input"
-      },
-      "attribute": "show-notification-text",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "notificationText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Notification text",
-            "name": "uiName"
-          }],
-        "text": "Shown underneath the referral code when the user has already copied the code"
-      },
-      "attribute": "notification-text",
-      "reflect": false,
-      "defaultValue": "\"You've copied this code before\""
-    },
-    "tooltiplifespan": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Tooltip lifespan",
-            "name": "uiName"
-          }],
-        "text": "The number of milliseconds that the tooltip appears for"
-      },
-      "attribute": "tooltip-lifespan",
-      "reflect": false,
-      "defaultValue": "1000"
-    },
-    "textAlign": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"center\" | \"right\"",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "referral code alignment",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"left\", \"center\", \"right\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Left\", \"Center\", \"Right\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Change the text alignment"
-      },
-      "attribute": "text-align",
-      "reflect": false,
-      "defaultValue": "\"left\""
-    },
-    "copyButtonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Copy button label",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "copy-button-label",
-      "reflect": false,
-      "defaultValue": "\"Copy Code\""
-    },
-    "buttonStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"icon\" | \"button-outside\" | \"button-below\"",
-        "resolved": "\"button-below\" | \"button-outside\" | \"icon\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Style",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"icon\", \"button-outside\", \"button-below\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Set the copy button style and placement"
-      },
-      "attribute": "copy-button-style",
-      "reflect": false,
-      "defaultValue": "\"icon\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "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; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "CopyTextViewProps": {
-            "location": "import",
-            "path": "../views/copy-text-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-}
-function useDemoReferralCode(props) {
-  const [open, setOpen] = useState(false);
-  const copyString = "REFERRALCODE001";
-  return deepmerge({
-    copyString: copyString,
-    tooltiptext: props.tooltiptext,
-    textAlign: props.textAlign,
-    copyButtonLabel: props.copyButtonLabel,
-    buttonStyle: props.buttonStyle,
-    notificationText: props.notificationText,
-    showNotificationText: props.showNotificationText,
-    rewardStatus: "AVAILABLE",
-    open,
-    onClick: () => {
-      // 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);
-      setOpen(true);
-      setTimeout(() => setOpen(false), props.tooltiplifespan);
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}

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

@@ -1,51 +0,0 @@
-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) {
-    user: viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
-`;
-const WIDGET_ENGAGEMENT_EVENT = gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
-`;
-export function useReferralCode(props) {
-  var _a, _b;
-  const { programId = useProgramId() } = props;
-  const user = useUserIdentity();
-  const engagementMedium = useEngagementMedium();
-  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 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() {
-    // 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);
-    setOpen(true);
-    setTimeout(() => setOpen(false), props.tooltiplifespan);
-    sendLoadEvent({
-      eventMeta: {
-        programId,
-        id: user === null || user === void 0 ? void 0 : user.id,
-        accountId: user === null || user === void 0 ? void 0 : user.accountId,
-        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
-        meta: {
-          engagementMedium,
-          shareMedium: "DIRECT",
-        },
-      },
-    });
-  }
-  return { ...props, onClick, open, copyString: copyString };
-}

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

@@ -1,35 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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() {
-    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": ""
-      },
-      "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: "Your referral code",
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}

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

@@ -1,75 +0,0 @@
-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),
-    },
-  };
-}