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

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

@@ -1,67 +1,229 @@
-import { useEngagementMedium, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h } from "@stencil/core";
-import { gql } from "graphql-request";
-import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
-const ShareLinkQuery = gql `
-  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
-    user: viewer {
-      ... on User {
-        shareLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: DIRECT
-        )
-      }
-    }
-  }
-`;
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { QrCodeView } from "./sqm-qr-code-view";
+import { useQRCode } from "./useQRCode";
+/**
+ * @uiName QR Code
+ * @exampleGroup Sharing
+ * @example QR Code - <sqm-qr-code></sqm-qr-code>
+ */
 export class QrCode {
   constructor() {
+    /**
+     * @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";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const programId = useProgramId();
-    const user = useUserIdentity();
-    const engagementMedium = useEngagementMedium();
-    const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
-    const [expanded, setExpanded] = 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);
-    if (!data)
-      return h("div", null);
-    const qrLink = `${data.user.shareLink}?qrCode`;
-    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);
-    };
-    const fireViewQrEvent = () => {
-      setExpanded((e) => !e);
-    };
-    const dimensions = expanded ? 500 : 100;
-    const buttonLabel = expanded ? "Hide QR Code" : "View QR Code";
-    return (h("div", { style: {
-        border: "1px solid #eee",
-        padding: "12px",
-        display: "flex",
-        flexDirection: expanded ? "column" : "row",
-        gap: "12px",
-        justifyContent: "space-between",
-      } },
-      h("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } },
-        h("span", null, "Share your QR code"),
-        h("div", { style: { display: "flex", gap: "12px" } },
-          h("button", { onClick: fireViewQrEvent }, buttonLabel),
-          h("button", { onClick: createDownloadable }, "Download"))),
-      h("img", { src: `${qrLink}&qrCodeImageFormat=svg`, width: dimensions, height: dimensions })));
+    const thisProps = getProps(this);
+    const props = isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
+    return h(QrCodeView, Object.assign({}, props));
   }
   static get is() { return "sqm-qr-code"; }
   static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "titleText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title-text",
+      "reflect": false,
+      "defaultValue": "\"Share your QR code\""
+    },
+    "viewCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "View QR code text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "view-code-text",
+      "reflect": false,
+      "defaultValue": "\"View QR code\""
+    },
+    "downloadCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Download QR code text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "download-code-text",
+      "reflect": false,
+      "defaultValue": "\"Download\""
+    },
+    "printCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Print QR code text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "print-code-text",
+      "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; error?: boolean; dialogIsOpen?: boolean; viewError?: 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",
+            "path": "../../global/demo"
+          },
+          "QRCodeViewProps": {
+            "location": "import",
+            "path": "./sqm-qr-code-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoQRCode(props) {
+  const [dialogIsOpen, setDialog] = useState(false);
+  return deepmerge({
+    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 });
 }

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

@@ -0,0 +1,129 @@
+import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useState } from "@saasquatch/stencil-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
+const ShareLinkQuery = gql `
+  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
+    user: viewer {
+      ... on User {
+        shareLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: DIRECT
+        )
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+export function useQRCode(props) {
+  var _a;
+  const programId = useProgramId();
+  const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
+  const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
+  const [dialogIsOpen, setDialog] = useState(false);
+  const [qrLink, setQrUrl] = useState(null);
+  const [error, setError] = useState(false);
+  const [viewError, setViewError] = useState(false);
+  const { data, errors } = useQuery(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [sendLoadEvent] = useMutation(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`;
+  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);
+    }
+    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,
+  };
+}

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -93,6 +93,7 @@ import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
 import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
 import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
+import * as QRCode from "../sqm-qr-code/QRCode.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -191,6 +192,7 @@ const stories = [
   WidgetCodeVerification,
   PayoutButtonScroll,
   PayoutStatusAlert,
+  QRCode,
 ];
 /**
  * For internal documentation

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 };

package/dist/esm/{ShadowViewAddon-d3c11480.js → ShadowViewAddon-499b1f86.js}

@@ -1,18 +1,18 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
-import { m as useState, b as browser, u as useMemo } from './stencil-hooks.module-c643ef4a.js';
-import { i as intl } from './global-19d115b9.js';
-import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-8553586f.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-be1f9992.js';
+import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.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-1fdb0d92.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-8f75921a.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
 import { C as CopyTextView } from './copy-text-view-782137ba.js';
-import { u as useChildElements } from './useChildElements-cbd0fedf.js';
-import { l as luxon } from './luxon-94dbc741.js';
+import { u as useChildElements } from './useChildElements-7945ae56.js';
+import { l as luxon } from './luxon-8d51c92b.js';
 import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-559f8273.js';
+import { a as isValidColor, b as isMobile } from './utilities-5b0ca040.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';
 
 const medium = {

package/dist/esm/{global-19d115b9.js → global-be1f9992.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-c643ef4a.js';
-import { s as src, m as memoize, U } from './index.module-8553586f.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-4bc38af4.js';
+import { s as src, m as memoize, U } from './index.module-89a79f66.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {

package/dist/esm/{index.module-8553586f.js → index.module-89a79f66.js}

@@ -1,4 +1,4 @@
-import { u as useMemo, d as c, s, c as createCommonjsModule, a as commonjsGlobal, e as getDefaultExportFromCjs, f as useEffect, h, i as d, y, j as useRef, k as useReducer, m as useState } from './stencil-hooks.module-c643ef4a.js';
+import { u as useMemo, d as c, s, c as createCommonjsModule, a as commonjsGlobal, e as getDefaultExportFromCjs, f as useEffect, h, y, i as d, j as useReducer, k as useState, m as useRef } from './stencil-hooks.module-4bc38af4.js';
 
 const useCallback = (fn, inputs) => useMemo(() => fn, inputs);