@saasquatch/mint-components 1.12.1-7 → 1.12.1-9

package/dist/collection/components/sqm-portal-google-registration-form/usePortalGoogleRegistrationForm.js

@@ -1,70 +0,0 @@
-import { useState } from "@saasquatch/universal-hooks";
-import jsonpointer from "jsonpointer";
-import decode from "jwt-decode";
-import { useRegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
-export function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = useState(null);
-  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState();
-  const [showRegistrationForm, setShowRegistrationForm] = useState({
-    mode: "base",
-  });
-  const handleEmailSubmit = async (event) => {
-    const formControls = event.target.getFormControls();
-    let formData = {};
-    let errorMessage = null;
-    formControls.forEach((control) => {
-      if (!control.name || control.name !== "/email")
-        return;
-      jsonpointer.set(formData, control.name, control.value);
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
-      if (typeof control.validationError === "function") {
-        const validate = control.validationError;
-        const validationError = validate({
-          control,
-          key: "email",
-          value: control.value,
-        });
-        if (validationError)
-          errorMessage = validationError;
-      }
-    });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
-      return;
-    }
-    setRegistrationFormState({
-      ...registrationFormState,
-      initialData: {
-        ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
-        ...formData,
-      },
-    });
-    setShowRegistrationForm({ mode: "manual" });
-  };
-  const handleGoogleInit = (event) => {
-    try {
-      const res = decode(event.detail);
-      // TODO: Double check
-      setRegistrationFormState({
-        ...registrationFormState,
-        initialData: {
-          ...registrationFormState.initialData,
-          email: res.payload.email,
-          firstName: res.payload.given_name,
-          lastName: res.payload.family_name,
-        },
-      });
-      setShowRegistrationForm({ mode: "google" });
-    }
-    catch (e) {
-      console.error("Failed to decode Google Sign In credential JWT:", e);
-    }
-  };
-  return {
-    showRegistrationForm,
-    emailValidationError,
-    handleGoogleInit,
-    handleEmailSubmit,
-  };
-}

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 single-use promo codes 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 single-use promo codes 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,63 +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 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,
-    showNotificationText: props.showNotificationText && !!(contextData === null || contextData === void 0 ? void 0 : contextData.singleUse),
-  };
-}

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

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

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