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

package/dist/mint-components/sqm-coupon-code-view-40fd8d8b.system.js

@@ -0,0 +1 @@
+System.register(["./index-bfed5e90.system.js","./JSS-840a8fea.system.js","./mixins-8c4521b7.system.js","./copy-text-view-33cac657.system.js"],(function(e){"use strict";var t,s,r,n;return{setters:[function(e){t=e.h},function(e){s=e.c},function(e){r=e.H},function(e){n=e.C}],execute:function(){e("C",o);function o(e){var o=!e.loading&&e.error;var a={HostBlock:r,couponCodeLabel:{margin:"var(--sl-spacing-x-small) 0",color:e.textColor||"var(--sqm-text-subdued)",fontSize:"var(--sl-font-size-small)"}};var i="\n  :host{\n    display: block;   \n    width: 100%;\n  }\n";var c=s(a);var l=c.toString();return t("div",null,t("style",{type:"text/css"},l,i),t("p",{class:c.classes.couponCodeLabel,style:{textAlign:e.textAlign}},e.couponCodeLabel),o?t("sqm-form-message",{type:e.errorType,exportparts:"erroralert-icon"},t("div",{part:"erroralert-text"},e.errorText)):t(n,Object.assign({},e)))}}}}));

package/dist/mint-components/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/mint-components/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/mint-components/sqm-coupon-code.system.entry.js

@@ -0,0 +1 @@
+var __makeTemplateObject=this&&this.__makeTemplateObject||function(e,t){if(Object.defineProperty){Object.defineProperty(e,"raw",{value:t})}else{e.raw=t}return e};var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o))e[o]=t[o]}return e};return __assign.apply(this,arguments)};System.register(["./index-bfed5e90.system.js","./dom-context-hooks.module-7cdc0e68.system.js","./index.module-3ae23e6a.system.js","./jss-preset-default.esm-62a04d6d.system.js","./JSS-840a8fea.system.js","./mixins-8c4521b7.system.js","./utils-e473b250.system.js","./cjs-f0ef8d23.system.js","./copy-text-view-33cac657.system.js","./sqm-coupon-code-view-40fd8d8b.system.js"],(function(e){"use strict";var t,n,r,o,a,i,s,u,d,l,c,p,f,v;return{setters:[function(e){t=e.r;n=e.h},function(e){r=e.i;o=e.o},function(e){a=e.d;i=e.J;s=e.H;u=e.B;d=e.$;l=e.w;c=e.i},function(){},function(){},function(){},function(e){p=e.g},function(e){f=e.c},function(){},function(e){v=e.C}],execute:function(){var h=a.gql(__makeTemplateObject(["\n  query fuelTankRewardsQuery($programId: ID!) {\n    user: viewer {\n      ... on User {\n        instantAccessRewards(\n          filter: { type_eq: FUELTANK, programId_eq: $programId }\n        ) {\n          data {\n            fuelTankCode\n            fuelTankType\n            statuses\n            dateGiven\n            dateExpires\n            dateRedeemed\n            dateCancelled\n            dateScheduledFor\n            datePendingForUnhandledError\n          }\n          count\n          totalCount\n        }\n      }\n    }\n  }\n"],["\n  query fuelTankRewardsQuery($programId: ID!) {\n    user: viewer {\n      ... on User {\n        instantAccessRewards(\n          filter: { type_eq: FUELTANK, programId_eq: $programId }\n        ) {\n          data {\n            fuelTankCode\n            fuelTankType\n            statuses\n            dateGiven\n            dateExpires\n            dateRedeemed\n            dateCancelled\n            dateScheduledFor\n            datePendingForUnhandledError\n          }\n          count\n          totalCount\n        }\n      }\n    }\n  }\n"]));var m=a.gql(__makeTemplateObject(["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"],["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"]));function E(e){var t,n,o;var a=i();var c=s();var p=u();var f=d(m)[0];var v=l(h,{programId:c},!(a===null||a===void 0?void 0:a.jwt)),E=v.data,y=v.loading,g=v.refetch,T=v.errors;var b=function(e){if(!e||!e.statuses)return"ERROR";var t=e.statuses[e.statuses.length-1];if(t==="PENDING"&&e.dateScheduledFor===null)return"EMPTY_TANK";return t};var x=(o=(n=(t=E===null||E===void 0?void 0:E.user)===null||t===void 0?void 0:t.instantAccessRewards)===null||n===void 0?void 0:n.data)===null||o===void 0?void 0:o[0];var _=b(x);var C=_==="PENDING"&&x.dateScheduledFor?new Date(x.dateScheduledFor).toLocaleDateString("default",{day:"numeric",month:"long",year:"numeric"}):undefined;var A=(x===null||x===void 0?void 0:x.fuelTankCode)||"...";var R=r(false),k=R[0],j=R[1];function w(){navigator.clipboard.writeText(A);j(true);setTimeout((function(){return j(false)}),e.tooltiplifespan);f({eventMeta:{programId:c,id:a===null||a===void 0?void 0:a.id,accountId:a===null||a===void 0?void 0:a.accountId,type:"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",meta:{engagementMedium:p,shareMedium:"DIRECT"}}})}var P=function(t){switch(t){case"CANCELLED":return e.cancelledErrorText;case"EXPIRED":return e.expiredErrorText;case"EMPTY_TANK":return e.fullfillmentErrorText;case"PENDING":return e.pendingErrorText.replace("{unpendDate}",C);case"REDEEMED":return e.redeemedErrorText;case"AVAILABLE":return"";default:return e.genericErrorText}};var I=function(e){switch(e){case"EXPIRED":case"EMPTY_TANK":case"CANCELLED":case"ERROR":return"warning";case"PENDING":return"info";case"REDEEMED":return"success";default:return}};var D=P(_);var L=I(_);var N=_!=="AVAILABLE";return __assign(__assign({},e),{onClick:w,open:k,copyString:A,error:N,errorText:D,dateAvailable:C,loading:y,errorType:L,buttonType:e.buttonType||"primary"})}var y=e("sqm_coupon_code",function(){function e(e){t(this,e);this.tooltiptext="Copied to Clipboard";this.tooltiplifespan=1e3;this.textAlign="left";this.copyButtonLabel="Copy Coupon";this.buttonStyle="icon";this.couponCodeLabel="Your coupon code:";this.cancelledErrorText="This code has been cancelled. Please reach out to the Support team for help resolving this issue.";this.redeemedErrorText="Looks like you’ve already redeemed this code.";this.expiredErrorText="Looks like this code has expired. Please reach out to the Support team for help resolving this issue.";this.fullfillmentErrorText="We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.";this.pendingErrorText="Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!";this.genericErrorText="We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.";this.couponCodePlaceholder="...";this.buttonType="primary";o(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=p(this);var t=c()?g(e):E(e);return n(v,Object.assign({},t))};return e}());function g(e){var t=r(false),n=t[0],o=t[1];var a="THANKSJANE125uv125";return f({copyString:a,tooltiptext:e.tooltiptext,textAlign:e.textAlign,buttonStyle:e.buttonStyle,copyButtonLabel:e.copyButtonLabel,error:false,couponCodePlaceholder:e.couponCodePlaceholder,couponCodeLabel:e.couponCodeLabel,borderColor:e.borderColor,backgroundColor:e.backgroundColor,textColor:e.textColor,borderRadius:e.borderRadius,buttonType:e.buttonType,open:n,onClick:function(){navigator.clipboard.writeText(a);o(true);setTimeout((function(){return o(false)}),e.tooltiplifespan)}},e.demoData||{},{arrayMerge:function(e,t){return t}})}}}}));

package/dist/mint-components/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 };

package/dist/mint-components/sqm-referral-code.system.entry.js

@@ -0,0 +1 @@
+var __makeTemplateObject=this&&this.__makeTemplateObject||function(e,t){if(Object.defineProperty){Object.defineProperty(e,"raw",{value:t})}else{e.raw=t}return e};var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o))e[o]=t[o]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r["throw"](e))}catch(e){i(e)}}function l(e){e.done?n(e.value):o(e.value).then(a,s)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(i=a[0]&2?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;if(o=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){n.label=a[1];break}if(a[0]===6&&n.label<i[1]){n.label=i[1];i=a;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(a);break}if(i[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];o=0}finally{r=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./index-bfed5e90.system.js","./dom-context-hooks.module-7cdc0e68.system.js","./index.module-3ae23e6a.system.js","./jss-preset-default.esm-62a04d6d.system.js","./JSS-840a8fea.system.js","./mixins-8c4521b7.system.js","./utils-e473b250.system.js","./cjs-f0ef8d23.system.js","./useReferralCodes-c5a6014c.system.js","./copy-text-view-33cac657.system.js"],(function(e){"use strict";var t,n,r,o,i,a,s,l,u,c,f,d,p,v,y,h,b;return{setters:[function(e){t=e.r;n=e.h},function(e){r=e.i;o=e.o},function(e){i=e.d;a=e.H;s=e.J;l=e.B;u=e.F;c=e.w;f=e.$;d=e.i},function(){},function(){},function(){},function(e){p=e.g},function(e){v=e.c},function(e){y=e.R;h=e.S},function(e){b=e.C}],execute:function(){var m=i.gql(__makeTemplateObject(["\n  query getReferralCode($programId: ID) {\n    user: viewer {\n      ... on User {\n        referralCode(programId: $programId)\n      }\n    }\n  }\n"],["\n  query getReferralCode($programId: ID) {\n    user: viewer {\n      ... on User {\n        referralCode(programId: $programId)\n      }\n    }\n  }\n"]));var g=i.gql(__makeTemplateObject(["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"],["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"]));function _(e){var t,n;var o=e.programId,i=o===void 0?a():o;var d=s();var p=l();var v=u(y);var b=c(m,{programId:i},!(d===null||d===void 0?void 0:d.jwt)||(v===null||v===void 0?void 0:v.referralCode)!==undefined).data;var _=f(g)[0];var w=f(h)[0];var x=(n=(v===null||v===void 0?void 0:v.referralCode)||((t=b===null||b===void 0?void 0:b.user)===null||t===void 0?void 0:t.referralCode))!==null&&n!==void 0?n:"...";var C=r(false),T=C[0],j=C[1];function E(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!v)return[3,2];return[4,w({referralCode:v.referralCode})];case 1:t.sent();v.refresh();t.label=2;case 2:navigator.clipboard.writeText(x);j(true);setTimeout((function(){return j(false)}),e.tooltiplifespan);_({eventMeta:{programId:i,id:d===null||d===void 0?void 0:d.id,accountId:d===null||d===void 0?void 0:d.accountId,type:"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",meta:{engagementMedium:p,shareMedium:"DIRECT"}}});return[2]}}))}))}return __assign(__assign({},e),{onClick:E,open:T,copyString:x,isCopied:v===null||v===void 0?void 0:v.isCopied,showNotificationText:e.showNotificationText&&!!(v===null||v===void 0?void 0:v.singleUse)})}var w=e("sqm_referral_code",function(){function e(e){t(this,e);this.tooltiptext="Copied to Clipboard";this.showNotificationText=false;this.notificationText="You've copied this code before";this.tooltiplifespan=1e3;this.textAlign="left";this.copyButtonLabel="Copy Code";this.buttonStyle="icon";this.buttonType="primary";o(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=p(this);var t=d()?x(e):_(e);return n(b,Object.assign({},t))};return e}());function x(e){var t=r(false),n=t[0],o=t[1];var i="REFERRALCODE001";return v({copyString:i,tooltiptext:e.tooltiptext,textAlign:e.textAlign,copyButtonLabel:e.copyButtonLabel,buttonStyle:e.buttonStyle,notificationText:e.notificationText,showNotificationText:e.showNotificationText,isCopied:e.showNotificationText,borderColor:e.borderColor,backgroundColor:e.backgroundColor,textColor:e.textColor,borderRadius:e.borderRadius,buttonType:e.buttonType,isUsed:false,rewardStatus:"AVAILABLE",open:n,onClick:function(){navigator.clipboard.writeText(i);o(true);setTimeout((function(){return o(false)}),e.tooltiplifespan)}},e.demoData||{},{arrayMerge:function(e,t){return t}})}}}}));