@saasquatch/mint-components 1.13.3-2 → 1.13.3-4

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

@@ -9,7 +9,8 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-82e8797b.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-7b26582e.js');
+require('./ErrorView-b2fcf954.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-a212589a.js');
 
 const ShareLinkQuery = index_module.dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
@@ -24,44 +25,88 @@ const ShareLinkQuery = index_module.dist.gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 function useQRCode(props) {
   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 [error, setError] = 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);
-  const qrLink = `${data.user.shareLink}?qrCode`;
+  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const qrLink = data ? `${data.user.shareLink}?qrCode` : "";
+  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_EVENET",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
+  };
   const createDownloadable = async () => {
-    const res = await fetch(`${qrLink}&qrCodeSize=800&qrCodeImageFormat=png`);
-    const blob = await res.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = "qrCode.png";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    try {
+      const res = await fetch(`${qrLink}&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 () => {
-    const res = await fetch(`${qrLink}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
-    const blob = await res.blob();
-    const url = URL.createObjectURL(blob);
-    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);
+    try {
+      const res = await fetch(`${qrLink}&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,
     showDialog: () => setDialog(true),
-    hideDialog: () => setDialog(false),
+    hideDialog: () => {
+      setDialog(false), setError(false);
+    },
     createDownloadable,
     createPrintable,
   };
@@ -86,6 +131,14 @@ const QrCode = class {
      * @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() { }

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

@@ -33,10 +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');
-const sqmQrCodeView = require('./sqm-qr-code-view-7b26582e.js');
+require('./ErrorView-b2fcf954.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-a212589a.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/>
@@ -15678,6 +15679,7 @@ const QRCode_stories = {
 };
 const defaultProps$r = {
   dialogIsOpen: false,
+  error: 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=",
@@ -15691,6 +15693,8 @@ const defaultProps$r = {
   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));
@@ -15698,12 +15702,16 @@ const Default$o = () => {
 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, error: true })));
+};
 
 const QRCode = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': QRCode_stories,
   Default: Default$o,
-  Expanded: Expanded
+  Expanded: Expanded,
+  Error: Error$b
 });
 
 /**

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

@@ -5,6 +5,7 @@ export default {
 };
 const defaultProps = {
   dialogIsOpen: false,
+  error: 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=",
@@ -18,6 +19,8 @@ const defaultProps = {
   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));
@@ -25,3 +28,6 @@ export const Default = () => {
 export const Expanded = () => {
   return h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true }));
 };
+export const Error = () => {
+  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true, error: true })));
+};

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

@@ -1,5 +1,6 @@
 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",
@@ -63,7 +64,7 @@ const vanillaStyle = `
       display: block;
     }
   }`;
-export function QrCodeView({ dialogIsOpen, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, createDownloadable, createPrintable, }) {
+export function QrCodeView({ dialogIsOpen, error, 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),
@@ -74,9 +75,10 @@ export function QrCodeView({ dialogIsOpen, showDialog, hideDialog, qrLink, title
         h("sl-button", { type: "text", onClick: createDownloadable }, downloadCodeText),
         h("sl-button", { type: "text", onClick: createPrintable }, printCodeText))),
     h("sl-dialog", { class: sheet.classes.DialogContainer, width: "250px", open: dialogIsOpen, label: titleText, "onSl-hide": hideDialog },
+      error && (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
       h("div", { class: sheet.classes.CodeContainer },
         h("img", { class: sheet.classes.Code, src: `${qrLink}&qrCodeImageFormat=svg` })),
       h("div", { slot: "footer", class: sheet.classes.FooterContainer },
-        h("sl-button", { variant: "default", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { variant: "default", onClick: createPrintable }, printCodeText)))));
+        h("sl-button", { disabled: error, variant: "default", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { disabled: error, variant: "default", onClick: createPrintable }, printCodeText)))));
 }

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

@@ -28,6 +28,14 @@ export class QrCode {
      * @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";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -123,12 +131,54 @@ export class QrCode {
       "reflect": false,
       "defaultValue": "\"Print\""
     },
+    "errorHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Header for error banner",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-header-text",
+      "reflect": false,
+      "defaultValue": "\"There was an error loading your QR code\""
+    },
+    "errorDescriptionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description for error banner",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-description-text",
+      "reflect": false,
+      "defaultValue": "\"Please refresh this page and try again\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<QRCodeViewProps>",
-        "resolved": "{ titleText?: string; dialogIsOpen?: boolean; showDialog?: () => void; hideDialog?: () => void; qrLink?: string; createDownloadable?: () => void; viewCodeText?: string; downloadCodeText?: string; printCodeText?: string; createPrintable?: () => void; }",
+        "resolved": "{ titleText?: string; error?: boolean; dialogIsOpen?: boolean; showDialog?: () => void; hideDialog?: () => void; qrLink?: string; createDownloadable?: () => void; viewCodeText?: string; downloadCodeText?: string; printCodeText?: string; errorHeaderText?: string; errorDescriptionText?: string; createPrintable?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -1,4 +1,4 @@
-import { useEngagementMedium, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/stencil-hooks";
 import { gql } from "graphql-request";
 import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
@@ -15,44 +15,88 @@ const ShareLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useQRCode(props) {
   const programId = useProgramId();
   const user = useUserIdentity();
   const engagementMedium = useEngagementMedium();
   const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
   const [dialogIsOpen, setDialog] = useState(false);
+  const [error, setError] = useState(false);
   const { data } = useQuery(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const qrLink = `${data.user.shareLink}?qrCode`;
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
+  const qrLink = data ? `${data.user.shareLink}?qrCode` : "";
+  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_EVENET",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
+  };
   const createDownloadable = async () => {
-    const res = await fetch(`${qrLink}&qrCodeSize=800&qrCodeImageFormat=png`);
-    const blob = await res.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = "qrCode.png";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    try {
+      const res = await fetch(`${qrLink}&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 () => {
-    const res = await fetch(`${qrLink}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
-    const blob = await res.blob();
-    const url = URL.createObjectURL(blob);
-    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);
+    try {
+      const res = await fetch(`${qrLink}&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,
     showDialog: () => setDialog(true),
-    hideDialog: () => setDialog(false),
+    hideDialog: () => {
+      setDialog(false), setError(false);
+    },
     createDownloadable,
     createPrintable,
   };

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

@@ -0,0 +1,33 @@
+import { h } from './index-91e7729f.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const 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,
+    },
+  },
+};
+const ErrorView = (props) => {
+  const sheet = createStyleSheet(styles);
+  const styleString = sheet.toString();
+  const { classes } = sheet;
+  return (h("div", null,
+    h("style", null, styleString),
+    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: classes.Alert },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon", class: "Error" }),
+      h("strong", null, props.loadingErrorAlertHeader),
+      h("br", null),
+      props.loadingErrorAlertDescription)));
+};
+
+export { ErrorView as E };