@saasquatch/mint-components 1.11.1-63 → 1.11.1-65

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

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

@@ -0,0 +1,62 @@
+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 getReferralCode($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] = 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

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+import scenario from "./ReferralCodes.feature";
+export default {
+  title: "Components/Referral Codes",
+  parameters: {
+    scenario,
+  },
+};
+const demoData = {
+  titleText: "Start sharing",
+  emptyStateHeaderText: "Your new codes and links aren’t ready yet",
+  emptyStateDescriptionText: "Please contact our program support team to let them know you’re out of codes.",
+  emptyStateImageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png",
+  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 EmptyWithCustomTextAndImage = () => {
+  return (h("sqm-referral-codes", { emptyStateHeaderText: "Tus nuevos c\u00F3digos y enlaces a\u00FAn no est\u00E1n listos", emptyStateDescriptionText: "Comun\u00EDquese con nuestro equipo de soporte del programa para informarles que no tiene c\u00F3digos.", emptyStateImageUrl: "https://img.freepik.com/free-vector/hand-drawn-no-data-concept_52683-127829.jpg?t=st=1738890457~exp=1738894057~hmac=2f0f32c1f0fc051f47d772a4517e2e4c4f38af5069fb855edc96d8331d9d1329&w=826", 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

@@ -0,0 +1,69 @@
+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, 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,
+      styleString),
+    h("div", { class: sheet.classes.HeaderContainer },
+      h("h2", { class: sheet.classes.TitleText }, titleText),
+      !states.noCodes && !states.loading && slots.pagination),
+    getSlotContent(states)));
+}