@saasquatch/mint-components 1.13.5 → 1.15.0-0

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

@@ -0,0 +1,203 @@
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
+import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as getProps } from './utils-334c1e34.js';
+import './JSS-67b5cff8.js';
+import { a as REFERRAL_CODES_NAMESPACE } from './useReferralCodes-8f75921a.js';
+import './ErrorView-48e2b969.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-f1d0763b.js';
+
+const ShareLinkQuery = dist.gql `
+  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
+    user: viewer {
+      ... on User {
+        shareLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: DIRECT
+        )
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useQRCode(props) {
+  var _a;
+  const programId = H();
+  const user = J();
+  const engagementMedium = B();
+  const contextData = Fn(REFERRAL_CODES_NAMESPACE);
+  const [qrLink, setQrUrl] = useState(null);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { data, errors, loading: requestLoading, } = wn(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const shareLink = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink;
+  const qrPrefix = `${shareLink}?qrCode`;
+  const completeLoading = requestLoading || loading;
+  useEffect(() => {
+    if (!shareLink)
+      return;
+    const getQrCode = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg&qrCodeQuietZoneSize=0`);
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        setQrUrl(url);
+      }
+      catch (e) {
+        setError(true);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    getQrCode();
+  }, [shareLink]);
+  const fireEvent = async () => {
+    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 createDownloadable = async () => {
+    try {
+      const res = await fetch(`${qrPrefix}&qrCodeSize=800&qrCodeImageFormat=png`);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      // Successful
+      if (blob)
+        fireEvent();
+      // Trigger download
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "qrCode.png";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+    catch (e) {
+      console.error("Failed to fetch QR code:", e);
+      setError(true);
+    }
+  };
+  const createPrintable = async () => {
+    try {
+      const res = await fetch(`${qrPrefix}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      // Successful
+      if (blob)
+        fireEvent();
+      // Trigger print
+      const page = window.open("about:blank", "_new");
+      const img = page.document.createElement("img");
+      img.src = url;
+      img.onload = () => {
+        page.print();
+        page.close();
+      };
+      page.document.body.appendChild(img);
+    }
+    catch (e) {
+      console.error("Failed to fetch QR code: ", e);
+      setError(true);
+    }
+  };
+  return {
+    ...props,
+    loading: completeLoading,
+    qrLink,
+    error: error,
+    createDownloadable,
+    createPrintable,
+  };
+}
+
+const QrCode = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Title
+     */
+    this.titleText = "Share your QR code";
+    /**
+     * @uiName View QR code text
+     */
+    this.viewCodeText = "View QR code";
+    /**
+     * @uiName Download QR code text
+     */
+    this.downloadCodeText = "Download";
+    /**
+     * @uiName Print QR code text
+     */
+    this.printCodeText = "Print";
+    /**
+     * @uiName Header for error banner
+     */
+    this.errorHeaderText = "There was an error loading your QR code";
+    /**
+     * @uiName Description for error banner
+     */
+    this.errorDescriptionText = "Please refresh this page and try again";
+    /**
+     * @uiName Hide title
+     */
+    this.hideTitle = false;
+    /**
+     * @uiName QR code alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     */
+    this.alignment = "center";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
+    return h$1(QrCodeView, Object.assign({}, props));
+  }
+};
+function useDemoQRCode(props) {
+  const [dialogIsOpen, setDialog] = useState(false);
+  return cjs({
+    dialogIsOpen,
+    hideTitle: props.hideTitle,
+    showDialog: () => setDialog(true),
+    hideDialog: () => setDialog(false),
+    titleText: props.titleText,
+    viewCodeText: props.viewCodeText,
+    downloadCodeText: props.downloadCodeText,
+    printCodeText: props.printCodeText,
+    alignment: props.alignment,
+    qrLink: "https://media.istockphoto.com/id/1251071788/vector/qr-code-bar-code-black-icon-digital-technology.jpg?s=612x612&w=0&k=20&c=maw4OqMSEegAdSo8Drm9HO7i1ddddvP2YaL1UuWbRig=",
+    fireViewQrEvent: () => {
+      console.log("View QR Code clicked");
+    },
+    createDownloadable: async () => {
+      console.log("Download QR Code clicked");
+    },
+    createPrintable: async () => {
+      console.log("Print QR Code clicked");
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { QrCode as sqm_qr_code };

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

@@ -5,8 +5,9 @@ import { j as jn, k as kn, b as setUserIdentity, d as dist, X as Xe, p as setPro
 import './cjs-bdfb4486.js';
 import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-459a2e35.js';
+import './useReferralCodes-8f75921a.js';
 import './mixins-83f90fa1.js';
+import { C as CopyTextView } from './copy-text-view-782137ba.js';
 import { G as GenericTableView } from './GenericTableView-7b9087af.js';
 import './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
@@ -28,9 +29,11 @@ import { P as PortalProfileView } from './sqm-portal-profile-view-93003974.js';
 import './utilities-5b0ca040.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-54a8651f.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-b12cb894.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-23a6afab.js';
+import './ErrorView-48e2b969.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-f1d0763b.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-cf230f50.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-af69cd33.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-2c726568.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15752,6 +15755,65 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions$4
 });
 
+const QRCode_stories = {
+  title: "Components/QR Code",
+};
+const defaultProps$s = {
+  hideTitle: false,
+  loading: false,
+  alignment: "center",
+  error: false,
+  qrLink: "https://media.istockphoto.com/id/1251071788/vector/qr-code-bar-code-black-icon-digital-technology.jpg?s=612x612&w=0&k=20&c=maw4OqMSEegAdSo8Drm9HO7i1ddddvP2YaL1UuWbRig=",
+  createDownloadable: async () => {
+    console.log("Download QR Code clicked");
+  },
+  createPrintable: async () => {
+    console.log("Print QR Code clicked");
+  },
+  titleText: "Share your QR code",
+  downloadCodeText: "Download",
+  printCodeText: "Print",
+  errorHeaderText: "There was an error loading your QR code",
+  errorDescriptionText: "Please refresh this page and try again",
+};
+const Default$q = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s));
+};
+const HideTitle = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { hideTitle: true }));
+};
+const LeftAlign$1 = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { alignment: "left" }));
+};
+const CenterAlign = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { alignment: "center" }));
+};
+const RightAlign$1 = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { alignment: "right" }));
+};
+const Loading$c = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { loading: true }));
+};
+const Error$c = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
+};
+const DownloadError = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
+};
+
+const QRCode = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': QRCode_stories,
+  Default: Default$q,
+  HideTitle: HideTitle,
+  LeftAlign: LeftAlign$1,
+  CenterAlign: CenterAlign,
+  RightAlign: RightAlign$1,
+  Loading: Loading$c,
+  Error: Error$c,
+  DownloadError: DownloadError
+});
+
 /**
  *
  * Themes
@@ -15764,7 +15826,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$q = `
+const Default$r = `
  // No CSS
 `;
 const Orangey = `
@@ -15798,7 +15860,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$q,
+  Default: Default$r,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18488,6 +18550,7 @@ const stories = [
   WidgetCodeVerification,
   PayoutButtonScroll,
   PayoutStatusAlert,
+  QRCode,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm/{copy-text-view-459a2e35.js → useReferralCodes-8f75921a.js}

@@ -1,8 +1,5 @@
-import { h } from './index-91e7729f.js';
 import { f as useEffect } from './stencil-hooks.module-4bc38af4.js';
 import { d as dist, J, H, Q as Qe, R as Rn, I as In, B } from './index.module-89a79f66.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { H as HostBlock } from './mixins-83f90fa1.js';
 
 const GET_REFERRAL_CODES = dist.gql `
   query getCodes(
@@ -133,93 +130,4 @@ function useReferralCodes(props) {
   };
 }
 
-const style = {
-  HostBlock: HostBlock,
-  inputStyle: {
-    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
-    "&::part(base)": { cursor: "pointer", overflow: "visible" },
-    width: "100%",
-  },
-  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(--sl-color-danger-500)",
-  },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
-};
-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;
-  }
-`;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-function CopyTextView(props) {
-  const { buttonStyle = "icon" } = props;
-  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", { 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: copy-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-label", 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, REFERRAL_CODES_PAGINATION_CONTEXT as R, SET_CODE_COPIED as S, REFERRAL_CODES_NAMESPACE as a, useReferralCodes as u };
+export { REFERRAL_CODES_PAGINATION_CONTEXT as R, SET_CODE_COPIED as S, REFERRAL_CODES_NAMESPACE as a, useReferralCodes as u };

package/dist/esm-es5/ErrorView-48e2b969.js

@@ -0,0 +1 @@
+import{h}from"./index-91e7729f.js";import{c as createStyleSheet}from"./JSS-67b5cff8.js";var styles={Alert:{"&::part(base)":{backgroundColor:"var(--sl-color-danger-100)",border:"1px solid var(--sl-color-danger-200)",padding:"0 16px"},"& sl-icon":{margin:0},"& sl-icon::part(base)":{color:"var(--sl-color-danger-500)",margin:0}}};var ErrorView=function(r){var e=createStyleSheet(styles);var o=e.toString();var a=e.classes;return h("div",null,h("style",null,o),h("sl-alert",{exportparts:"base: alert-base, icon:alert-icon",type:"danger",open:true,class:a.Alert},h("sl-icon",{slot:"icon",name:"exclamation-octagon",class:"Error"}),h("strong",null,r.loadingErrorAlertHeader),h("br",null),r.loadingErrorAlertDescription))};export{ErrorView as E};