@saasquatch/mint-components 1.11.1-48 → 1.11.1-49

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

@@ -1,108 +0,0 @@
-import { Component, h, Prop, State } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { PaginationView } from "./sqm-pagination-view";
-import { usePagination } from "./usePagination";
-import deepmerge from "deepmerge";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useState } from "@saasquatch/universal-hooks";
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { intl } from "../../global/global";
-/**
- * @uiName Pagination
- * @exampleGroup Common Components
- * @example Link Button - <sqm-pagination></sqm-pagination>
- */
-export class Pagination {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Pagination text
-     */
-    this.paginationText = "{currentPage} of {totalPages}";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const hookProps = isDemo()
-      ? useDemoPagination(getProps(this))
-      : usePagination(getProps(this));
-    return h(PaginationView, Object.assign({}, hookProps));
-  }
-  static get is() { return "sqm-pagination"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "paginationText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Pagination text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "pagination-text",
-      "reflect": false,
-      "defaultValue": "\"{currentPage} of {totalPages}\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<any>",
-        "resolved": "{ [x: string]: any; [x: number]: any; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useDemoPagination(props) {
-  const [currentPage, setCurrentPage] = useState(1);
-  return deepmerge({
-    states: {
-      currentPage,
-      totalPages: 5,
-      loading: false,
-    },
-    callbacks: {
-      onNext: () => setCurrentPage(currentPage + 1),
-      onPrev: () => setCurrentPage(currentPage - 1),
-    },
-    text: {
-      paginationText: intl.formatMessage({
-        id: `paginationText`,
-        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
-      }, {
-        currentPage: currentPage,
-        totalPages: 5,
-      }),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}

package/dist/collection/components/sqm-pagination/usePagination.js

@@ -1,29 +0,0 @@
-import { useParentValue } from "@saasquatch/component-boilerplate";
-import { REFERRAL_CODES_PAGINATION_CONTEXT, } from "../sqm-referral-codes/useReferralCodes";
-import { intl } from "../../global/global";
-export function usePagination(props) {
-  var _a;
-  const context = useParentValue(REFERRAL_CODES_PAGINATION_CONTEXT);
-  const currentPage = context.states.currentPage + 1;
-  const totalPages = (_a = context.states) === null || _a === void 0 ? void 0 : _a.pageCount;
-  return {
-    states: {
-      currentPage,
-      totalPages,
-      loading: context.states.loading,
-    },
-    callbacks: {
-      onNext: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
-      onPrev: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
-    },
-    text: {
-      paginationText: intl.formatMessage({
-        id: `paginationText`,
-        defaultMessage: props.paginationText,
-      }, {
-        currentPage,
-        totalPages,
-      }),
-    },
-  };
-}

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,317 +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" show-notification-text="true"></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; isCopied?: boolean; 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,
-    isCopied: props.showNotificationText,
-    isUsed: false,
-    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,62 +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, SET_CODE_COPIED, } 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 [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);
-  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);
-    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,
-    isCopied: contextData === null || contextData === void 0 ? void 0 : contextData.isCopied,
-  };
-}

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

@@ -1,53 +0,0 @@
-import { h } from "@stencil/core";
-import scenario from "./ReferralCodes.feature";
-export default {
-  title: "Components/Referral Codes",
-  parameters: {
-    scenario,
-  },
-};
-const demoData = {
-  states: {
-    noCodes: false,
-    loading: false,
-  },
-};
-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")));
-};
-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")));
-};