@saasquatch/mint-components 1.15.0-116 → 1.15.0-117

package/dist/esm/{ShadowViewAddon-518e026d.js → ShadowViewAddon-c0600f22.js}

@@ -7,7 +7,7 @@ import { l as luxonLocale } from './utils-03188de2.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-311e6d72.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-b219d166.js';
+import { C as CopyTextView } from './copy-text-view-a319c261.js';
 import { u as useChildElements } from './useChildElements-4e70ac0e.js';
 import { l as luxon } from './luxon-bbf75a9d.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';

package/dist/esm/copy-text-view-3129fb22.js

@@ -0,0 +1,119 @@
+import { h } from './index-bfb7f924.js';
+import { c as createStyleSheet } from './JSS-8c381d8b.js';
+import { H as HostBlock } from './mixins-acc245cc.js';
+
+const vanillaStyle = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}`,
+  center: `  
+sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
+};
+const disabledStyles = `
+  sl-input::part(input){
+    cursor: default;
+  }
+`;
+function CopyTextView(props) {
+  const { buttonStyle = "icon" } = props;
+  const style = {
+    HostBlock: HostBlock,
+    inputStyle: {
+      "&::part(input)": {
+        textOverflow: "ellipsis",
+        width: "100%",
+      },
+      "&::part(base)": {
+        "--sl-input-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        "--sl-input-background-color": props.backgroundColor || "var(--sqm-portal-background)",
+        "--sl-input-color": props.textColor || "var(--sqm-input-color)",
+        "--sl-input-border-color": "var(--sqm-border-color)",
+        "--sl-input-border-color-hover": "#999999",
+        "--sl-input-border-color-focus": "#999999",
+        "--sl-input-color-hover": "var(--sqm-input-color-hover)",
+        "--sl-input-color-focus": "var(--sqm-input-color-focus)",
+        "--sl-input-color-disabled": "var(--sqm-input-disabled-color)",
+        "--sl-input-background-color-focus": "var(--sqm-portal-background)",
+        "--sl-input-background-color-hover": "var(--sqm-portal-background)",
+        cursor: "pointer",
+        overflow: "visible",
+        borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        background: props.backgroundColor || "var(--sqm-portal-background)",
+        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-input-border-color)"}`,
+      },
+      width: "100%",
+    },
+    icon: {
+      "&::part(base)": {
+        color: props.textColor || "var(--sqm-input-color)",
+      },
+    },
+    inputErrorStyle: {
+      "&::part(base)": {
+        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",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    errorTextStyle: {
+      margin: "0",
+      color: "var(--sqm-danger-color-text)",
+    },
+    notificationTextStyle: {
+      margin: "0",
+      color: "inherit",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const error = !props.loading && props.error;
+  const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
+  const tooltipPlacement = props.buttonStyle === "button-below"
+    ? "bottom"
+    : props.buttonStyle === "button-outside"
+      ? "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", { class: sheet.classes.icon, 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: ${props.buttonType || "primary"}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", { class: sheet.classes.ContainerDiv },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    h("div", { class: sheet.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "base: input-base, input: input-field", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+        buttonStyle === "icon" && copyButton,
+        error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton),
+    props.isCopied &&
+      props.showNotificationText &&
+      props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
+}
+
+export { CopyTextView as C };

package/dist/esm/{copy-text-view-b219d166.js → copy-text-view-a319c261.js}

@@ -49,7 +49,7 @@ function CopyTextView(props) {
         overflow: "visible",
         borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
         background: props.backgroundColor || "var(--sqm-portal-background)",
-        border: `var(--sqm-border-thickness) solid ${props.borderColor || "--sqm-input-border-color"}`,
+        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-input-border-color)"}`,
       },
       width: "100%",
     },

package/dist/esm/sqm-big-stat_43.entry.js

@@ -8,7 +8,7 @@ import { g as getProps, a as getMissingProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-311e6d72.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-b219d166.js';
+import { C as CopyTextView } from './copy-text-view-a319c261.js';
 import { a as useRequestRerender } from './re-render-9c90767d.js';
 import { u as useChildElements } from './useChildElements-4e70ac0e.js';
 import './luxon-bbf75a9d.js';
@@ -21,7 +21,7 @@ import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
 import { u as usePortalLogin } from './usePortalLogin-d0720c81.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-ad9c2893.js';
-import { u as useDemoBigStat, Q as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, i as RewardExchangeView, V as demoRewardExchange, G as useShareButton, a as ShareButtonView, J as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-518e026d.js';
+import { u as useDemoBigStat, Q as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, i as RewardExchangeView, V as demoRewardExchange, G as useShareButton, a as ShareButtonView, J as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-c0600f22.js';
 import './sqm-portal-container-view-176e92e3.js';
 import { p as parseStates } from './parseStates-ed75e224.js';
 import { u as usePayoutStatus } from './usePayoutStatus-7eeec61b.js';

package/dist/esm/sqm-coupon-code-view-af016712.js

@@ -0,0 +1,33 @@
+import { h } from './index-bfb7f924.js';
+import { c as createStyleSheet } from './JSS-8c381d8b.js';
+import { H as HostBlock } from './mixins-acc245cc.js';
+import { C as CopyTextView } from './copy-text-view-3129fb22.js';
+
+function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  const style = {
+    HostBlock: HostBlock,
+    couponCodeLabel: {
+      margin: "var(--sl-spacing-x-small) 0",
+      color: props.textColor || "var(--sqm-text-subdued)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+  };
+  const vanillaStyle = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
+      h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
+}
+
+export { CouponCodeView as C };

package/dist/esm/sqm-coupon-code.entry.js

@@ -0,0 +1,281 @@
+import { r as registerInstance, h as h$1 } from './index-bfb7f924.js';
+import { i as useState, o as h } from './dom-context-hooks.module-01c1b885.js';
+import { d as dist, J, H, B, $ as $e, w as wn, i as isDemo } from './index.module-83586215.js';
+import './jss-preset-default.esm-c36417f8.js';
+import './JSS-8c381d8b.js';
+import './mixins-acc245cc.js';
+import { g as getProps } from './utils-93e14db3.js';
+import { c as cjs } from './cjs-e829b75b.js';
+import './copy-text-view-3129fb22.js';
+import { C as CouponCodeView } from './sqm-coupon-code-view-af016712.js';
+
+const FuelTankRewardsQuery = dist.gql `
+  query fuelTankRewardsQuery($programId: ID!) {
+    user: viewer {
+      ... on User {
+        instantAccessRewards(
+          filter: { type_eq: FUELTANK, programId_eq: $programId }
+        ) {
+          data {
+            fuelTankCode
+            fuelTankType
+            statuses
+            dateGiven
+            dateExpires
+            dateRedeemed
+            dateCancelled
+            dateScheduledFor
+            datePendingForUnhandledError
+          }
+          count
+          totalCount
+        }
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useCouponCode(props) {
+  var _a, _b, _c;
+  const user = J();
+  const programId = H();
+  const engagementMedium = B();
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const { data, loading, refetch, errors } = wn(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const getStatus = (reward) => {
+    if (!reward || !reward.statuses)
+      return "ERROR";
+    const state = reward.statuses[reward.statuses.length - 1];
+    if (state === "PENDING" && reward.dateScheduledFor === null)
+      return "EMPTY_TANK";
+    return state;
+  };
+  const reward = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.instantAccessRewards) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
+  const rewardStatus = getStatus(reward);
+  const dateAvailable = rewardStatus === "PENDING" && reward.dateScheduledFor
+    ? new Date(reward.dateScheduledFor).toLocaleDateString("default", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    })
+    : undefined;
+  const copyString = (reward === null || reward === void 0 ? void 0 : reward.fuelTankCode) || "...";
+  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",
+        },
+      },
+    });
+  }
+  const getRewardStatusText = (status) => {
+    switch (status) {
+      case "CANCELLED":
+        return props.cancelledErrorText;
+      case "EXPIRED":
+        return props.expiredErrorText;
+      case "EMPTY_TANK":
+        return props.fullfillmentErrorText;
+      case "PENDING":
+        return props.pendingErrorText.replace("{unpendDate}", dateAvailable);
+      case "REDEEMED":
+        return props.redeemedErrorText;
+      case "AVAILABLE":
+        return "";
+      default:
+        return props.genericErrorText;
+    }
+  };
+  const getRewardStatusErrorType = (status) => {
+    switch (status) {
+      case "EXPIRED":
+      case "EMPTY_TANK":
+      case "CANCELLED":
+      case "ERROR":
+        return "warning";
+      case "PENDING":
+        return "info";
+      case "REDEEMED":
+        return "success";
+      default:
+        return;
+    }
+  };
+  const errorText = getRewardStatusText(rewardStatus);
+  const errorType = getRewardStatusErrorType(rewardStatus);
+  const error = rewardStatus !== "AVAILABLE";
+  return {
+    ...props,
+    onClick,
+    open,
+    copyString,
+    error,
+    errorText,
+    dateAvailable,
+    loading,
+    errorType,
+    buttonType: props.buttonType || "primary",
+  };
+}
+
+const CouponCode = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Shown inside a tooltip after someone has successfully copied the link to their clipboard.
+     *
+     * @uiName Tooltip text
+     */
+    this.tooltiptext = "Copied to Clipboard";
+    /**
+     * The number of milliseconds that the tooltip appears for
+     *
+     * @uiName Tooltip lifespan
+     */
+    this.tooltiplifespan = 1000;
+    /**
+     * @uiName Coupon code alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
+     */
+    this.textAlign = "left";
+    /**
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Coupon";
+    /**
+     * Set the copy button style and placement.
+     *
+     * @uiName Style
+     * @uiType string
+     * @uiEnum ["icon", "button-outside", "button-below"]
+     * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
+     */
+    this.buttonStyle = "icon";
+    /**
+     * @uiName Coupon code label
+     */
+    this.couponCodeLabel = "Your coupon code:";
+    /**
+     * Display this message when the coupon code has been cancelled.
+     *
+     * @uiWidget textArea
+     * @uiName Cancelled code error message
+     * @uiGroup Coupon code error
+     */
+    this.cancelledErrorText = "This code has been cancelled. Please reach out to the Support team for help resolving this issue.";
+    /**
+     * Display this message when the coupon code has already been redeemed.
+     *
+     * @uiWidget textArea
+     * @uiName Redeemed code error message
+     * @uiGroup Coupon code error
+     */
+    this.redeemedErrorText = "Looks like you’ve already redeemed this code.";
+    /**
+     * Display this message when the coupon code has expired.
+     *
+     * @uiWidget textArea
+     * @uiName Expired code error message
+     * @uiGroup Coupon code error
+     */
+    this.expiredErrorText = "Looks like this code has expired. Please reach out to the Support team for help resolving this issue.";
+    /**
+     * Display this message when the code fails to load due to a fulfillment error.
+     *
+     * @uiWidget textArea
+     * @uiName Code fulfillment error message
+     * @uiGroup Coupon code error
+     */
+    this.fullfillmentErrorText = "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.";
+    /**
+     * Display this message when the coupon code not available yet. Use the ICU message, {unpendDate}, to show the date the code will be available.
+     *
+     * @uiWidget textArea
+     * @uiName Code pending error message
+     * @uiGroup Coupon code error
+     */
+    this.pendingErrorText = "Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!";
+    /**
+     * Display this message when the code fails to load due to an unspecified error.
+     *
+     * @uiWidget textArea
+     * @uiName Code retrieval error message
+     * @uiGroup Coupon code error
+     */
+    this.genericErrorText = "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.";
+    /**
+     * Display this text when the coupon code can’t be retrieved.
+     *
+     * @uiName Coupon code placeholder
+     * @uiGroup Coupon code error
+     */
+    this.couponCodePlaceholder = "...";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoCouponCode(thisProps)
+      : useCouponCode(thisProps);
+    return h$1(CouponCodeView, Object.assign({}, props));
+  }
+};
+function useDemoCouponCode(props) {
+  const [open, setOpen] = useState(false);
+  const copyString = "THANKSJANE125uv125";
+  return cjs({
+    copyString,
+    tooltiptext: props.tooltiptext,
+    textAlign: props.textAlign,
+    buttonStyle: props.buttonStyle,
+    copyButtonLabel: props.copyButtonLabel,
+    error: false,
+    couponCodePlaceholder: props.couponCodePlaceholder,
+    couponCodeLabel: props.couponCodeLabel,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
+    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 });
+}
+
+export { CouponCode as sqm_coupon_code };

package/dist/esm/sqm-pagination_3.entry.js

@@ -7,7 +7,7 @@ import { g as getProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, u as useReferralCodes } from './useReferralCodes-311e6d72.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-b219d166.js';
+import { C as CopyTextView } from './copy-text-view-a319c261.js';
 
 const style = {
   Container: {

package/dist/esm/sqm-referral-code.entry.js

@@ -0,0 +1,173 @@
+import { r as registerInstance, h as h$1 } from './index-bfb7f924.js';
+import { i as useState, o as h } from './dom-context-hooks.module-01c1b885.js';
+import { d as dist, H, J, B, F as Fn, w as wn, $ as $e, i as isDemo } from './index.module-83586215.js';
+import './jss-preset-default.esm-c36417f8.js';
+import './JSS-8c381d8b.js';
+import './mixins-acc245cc.js';
+import { g as getProps } from './utils-93e14db3.js';
+import { c as cjs } from './cjs-e829b75b.js';
+import { R as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-ec892d5c.js';
+import { C as CopyTextView } from './copy-text-view-3129fb22.js';
+
+const MessageLinkQuery = dist.gql `
+  query getReferralCode($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useReferralCode(props) {
+  var _a, _b;
+  const { programId = H() } = props;
+  const user = J();
+  const engagementMedium = B();
+  const contextData = Fn(REFERRAL_CODES_NAMESPACE);
+  const { data } = wn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied] = $e(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),
+  };
+}
+
+const ReferralCode = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * 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"]
+     * @uiGroup Style
+     */
+    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"]
+     * @uiGroup Style
+     */
+    this.buttonStyle = "icon";
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoReferralCode(thisProps)
+      : useReferralCode(thisProps);
+    return h$1(CopyTextView, Object.assign({}, props));
+  }
+};
+function useDemoReferralCode(props) {
+  const [open, setOpen] = useState(false);
+  const copyString = "REFERRALCODE001";
+  return cjs({
+    copyString: copyString,
+    tooltiptext: props.tooltiptext,
+    textAlign: props.textAlign,
+    copyButtonLabel: props.copyButtonLabel,
+    buttonStyle: props.buttonStyle,
+    notificationText: props.notificationText,
+    showNotificationText: props.showNotificationText,
+    isCopied: props.showNotificationText,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
+    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 });
+}
+
+export { ReferralCode as sqm_referral_code };