@saasquatch/mint-components 1.13.3-0 → 1.13.3-10

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

@@ -5,7 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-82e8797b.js');
+require('./ErrorView-b2fcf954.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-3f30d2cd.js');
 
 const ShareLinkQuery = index_module.dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
@@ -20,47 +25,175 @@ const ShareLinkQuery = index_module.dist.gql `
     }
   }
 `;
-const QrCode = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
-  disconnectedCallback() { }
-  render() {
-    const programId = index_module.H();
-    const user = index_module.J();
-    const engagementMedium = index_module.B();
-    const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
-    const [expanded, setExpanded] = stencilHooks_module.useState(false);
-    const { data } = index_module.wn(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-    if (!data)
-      return index.h("div", null);
-    const qrLink = `${data.user.shareLink}?qrCode`;
-    const createDownloadable = async () => {
-      const res = await fetch(`${qrLink}&qrCodeSize=800&qrCodeImageFormat=png`);
+`;
+function useQRCode(props) {
+  var _a;
+  const programId = index_module.H();
+  const user = index_module.J();
+  const engagementMedium = index_module.B();
+  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
+  const [dialogIsOpen, setDialog] = stencilHooks_module.useState(false);
+  const [qrLink, setQrUrl] = stencilHooks_module.useState(null);
+  const [error, setError] = stencilHooks_module.useState(false);
+  const [viewError, setViewError] = stencilHooks_module.useState(false);
+  const { data, errors } = index_module.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] = index_module.$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`;
+  stencilHooks_module.useEffect(() => {
+    if (!shareLink)
+      return;
+    const getQrCode = async () => {
+      try {
+        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg`);
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        setQrUrl(url);
+      }
+      catch (e) {
+        setViewError(true);
+      }
+    };
+    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);
-    };
-    const fireViewQrEvent = () => {
-      setExpanded((e) => !e);
-    };
-    const dimensions = expanded ? 500 : 100;
-    const buttonLabel = expanded ? "Hide QR Code" : "View QR Code";
-    return (index.h("div", { style: {
-        border: "1px solid #eee",
-        padding: "12px",
-        display: "flex",
-        flexDirection: expanded ? "column" : "row",
-        gap: "12px",
-        justifyContent: "space-between",
-      } }, index.h("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, index.h("span", null, "Share your QR code"), index.h("div", { style: { display: "flex", gap: "12px" } }, index.h("button", { onClick: fireViewQrEvent }, buttonLabel), index.h("button", { onClick: createDownloadable }, "Download"))), index.h("img", { src: `${qrLink}&qrCodeImageFormat=svg`, width: dimensions, height: dimensions })));
+    }
+    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,
+    qrLink,
+    dialogIsOpen,
+    error: error,
+    viewError: viewError || !!(errors === null || errors === void 0 ? void 0 : errors.message),
+    showDialog: () => {
+      setError(false);
+      setDialog(true);
+    },
+    hideDialog: () => {
+      setError(false);
+      setDialog(false);
+    },
+    createDownloadable,
+    createPrintable,
+  };
+}
+
+const QrCode = class {
+  constructor(hostRef) {
+    index.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";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
+    return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, props));
   }
 };
+function useDemoQRCode(props) {
+  const [dialogIsOpen, setDialog] = stencilHooks_module.useState(false);
+  return cjs.cjs({
+    dialogIsOpen,
+    showDialog: () => setDialog(true),
+    hideDialog: () => setDialog(false),
+    titleText: props.titleText,
+    viewCodeText: props.viewCodeText,
+    downloadCodeText: props.downloadCodeText,
+    printCodeText: props.printCodeText,
+    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 });
+}
 
 exports.sqm_qr_code = QrCode;

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

@@ -33,9 +33,11 @@ const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
 require('./utilities-78f5e169.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
+require('./ErrorView-b2fcf954.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-3f30d2cd.js');
 const ShadowViewAddon = require('./ShadowViewAddon-3ddee92b.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-baded4af.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-16ac73d0.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15672,6 +15674,51 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions$4
 });
 
+const QRCode_stories = {
+  title: "Components/QR Code",
+};
+const defaultProps$r = {
+  dialogIsOpen: false,
+  error: false,
+  viewError: false,
+  showDialog: () => void 0,
+  hideDialog: () => void 0,
+  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",
+  viewCodeText: "View 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$o = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r));
+};
+const Expanded = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true }));
+};
+const Error$b = () => {
+  return (index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true, viewError: true })));
+};
+const DownloadError = () => {
+  return (index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: false, error: true })));
+};
+
+const QRCode = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': QRCode_stories,
+  Default: Default$o,
+  Expanded: Expanded,
+  Error: Error$b,
+  DownloadError: DownloadError
+});
+
 /**
  *
  * Themes
@@ -15684,7 +15731,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$o = `
+const Default$p = `
  // No CSS
 `;
 const Orangey = `
@@ -15718,7 +15765,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$o,
+  Default: Default$p,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18405,6 +18452,7 @@ const stories = [
   WidgetCodeVerification,
   PayoutButtonScroll,
   PayoutStatusAlert,
+  QRCode,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/components/sqm-qr-code/QRCode.stories.js

@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+import { QrCodeView } from "./sqm-qr-code-view";
+export default {
+  title: "Components/QR Code",
+};
+const defaultProps = {
+  dialogIsOpen: false,
+  error: false,
+  viewError: false,
+  showDialog: () => void 0,
+  hideDialog: () => void 0,
+  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",
+  viewCodeText: "View QR code",
+  downloadCodeText: "Download",
+  printCodeText: "Print",
+  errorHeaderText: "There was an error loading your QR code",
+  errorDescriptionText: "Please refresh this page and try again",
+};
+export const Default = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps));
+};
+export const Expanded = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true }));
+};
+export const Error = () => {
+  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true, viewError: true })));
+};
+export const DownloadError = () => {
+  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: false, error: true })));
+};

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -0,0 +1,89 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { ErrorView } from "../tax-and-cash/sqm-tax-and-cash/ErrorView";
+const style = {
+  DialogContainer: {
+    maxWidth: "390px !important",
+  },
+  Container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "var(--sl-spacing-small)",
+    justifyContent: "space-between",
+  },
+  FacadeContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    flexDirection: "column",
+  },
+  ButtonContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+  },
+  FooterContainer: {
+    textAlign: "left",
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+  },
+  CodeContainer: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  Code: {
+    width: "100%",
+    height: "100%",
+    maxWidth: "335px",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+  sl-dialog::part(base) {
+    inset: auto;
+    position: absolute;
+    left: 25%;
+  }
+  sl-dialog::part(panel) {
+    max-width: 390px;
+    width: 100%;
+  }
+  sl-dialog::part(footer) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sl-spacing-small);
+    width: 100%;
+  }
+  sl-dialog::part(body) {
+    padding: 0 var(--sl-spacing-large);
+  }
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
+  }`;
+export function QrCodeView({ dialogIsOpen, error, viewError, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", null, vanillaStyle),
+    h("style", null, styleString),
+    h("div", { class: sheet.classes.FacadeContainer },
+      error && (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
+      h("span", { part: "sqm-title" }, titleText),
+      h("div", { class: sheet.classes.ButtonContainer },
+        h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: showDialog }, viewCodeText),
+        h("sl-button", { exportparts: "base: textbutton-base", type: "text", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { exportparts: "base: textbutton-base", type: "text", onClick: createPrintable }, printCodeText))),
+    h("sl-dialog", { class: sheet.classes.DialogContainer, width: "250px", open: dialogIsOpen, label: titleText, "onSl-hide": hideDialog },
+      (viewError || error) && (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
+      qrLink && (h("div", { class: sheet.classes.CodeContainer },
+        h("img", { class: sheet.classes.Code, src: qrLink }))),
+      h("div", { slot: "footer", class: sheet.classes.FooterContainer },
+        h("sl-button", { exportparts: "base: button-base", disabled: error, variant: "default", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { exportparts: "base: button-base", disabled: error, variant: "default", onClick: createPrintable }, printCodeText)))));
+}