@saasquatch/mint-components 1.13.5-0 → 1.14.0

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

@@ -0,0 +1,98 @@
+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: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    gap: "var(--sl-spacing-small)",
+  },
+  TextContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  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",
+  },
+  TextButton: {
+    "&::part(base)": {
+      color: "var(--sl-color-gray-600)",
+    },
+  },
+  LoadingSkeleton: {
+    "&::part(indicator)": {
+      borderRadius: "0px !important",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
+
+  }`;
+export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, hideTitle, alignment, loading, }) {
+  const codeAlignment = alignment === "left"
+    ? "flex-start"
+    : alignment === "right"
+      ? "flex-end"
+      : "center";
+  const getCodeContent = (error, qrLink, loading) => {
+    if (error) {
+      return (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
+    }
+    else if (loading) {
+      return (h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
+          width: "100px",
+          height: "100px",
+          borderRadius: "0px !important",
+        } }));
+    }
+    else if (qrLink) {
+      return (h("svg", { width: "100", height: "100" },
+        h("image", { href: qrLink, width: "100", height: "100" })));
+    }
+    return null;
+  };
+  const codeContent = getCodeContent(error, qrLink, loading);
+  return (h("div", { class: sheet.classes.Container, style: { justifyContent: codeAlignment }, part: "sqm-base" },
+    h("style", null, vanillaStyle),
+    h("style", null, styleString),
+    h("div", { class: sheet.classes.TextContainer, style: { alignItems: codeAlignment } },
+      !hideTitle && h("span", { part: "sqm-title" }, titleText),
+      codeContent,
+      h("div", { class: sheet.classes.ButtonContainer },
+        h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
+}

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

@@ -0,0 +1,293 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+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";
+    /**
+     * @uiName Hide title
+     */
+    this.hideTitle = false;
+    /**
+     * @uiName QR code alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     */
+    this.alignment = "center";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    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\""
+    },
+    "hideTitle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hide-title",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "QR code alignment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"center\", \"right\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Center\", \"Right\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<QRCodeViewProps>",
+        "resolved": "{ loading?: boolean; titleText?: string; alignment?: \"left\" | \"right\" | \"center\"; error?: boolean; qrLink?: string; createDownloadable?: () => void; hideTitle?: boolean; 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,
+    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 });
+}

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

@@ -0,0 +1,124 @@
+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 [qrLink, setQrUrl] = useState(null);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { data, errors, loading: requestLoading, } = 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`;
+  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,
+  };
+}

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

@@ -96,6 +96,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";
@@ -197,6 +198,7 @@ const stories = [
   WidgetCodeVerification,
   PayoutButtonScroll,
   PayoutStatusAlert,
+  QRCode,
 ];
 /**
  * For internal documentation

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js

@@ -1,13 +1,13 @@
-import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
-import { ErrorView } from "./ErrorView";
 import LoadingView from "./LoadingView";
 import { TAX_CONTEXT_NAMESPACE } from "./data";
 import { extractProps } from "./extractProps";
 import { useTaxAndCash } from "./useTaxAndCash";
+import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
+import { ErrorView } from "./ErrorView";
 /**
  * @uiName Tax and Cash
  * @exampleGroup Tax and Cash
@@ -5040,21 +5040,6 @@ export class TaxAndCashMonolith {
           }, {
             "text": "object",
             "name": "uiType"
-          }, {
-            "text": "Step 1 - { \"step\": \"/1\" }",
-            "name": "demo"
-          }, {
-            "text": "Step 2 - { \"step\": \"/2\" }",
-            "name": "demo"
-          }, {
-            "text": "Step 3 - { \"step\": \"/3\" }",
-            "name": "demo"
-          }, {
-            "text": "Step 3 - { \"step\": \"/4\" }",
-            "name": "demo"
-          }, {
-            "text": "Dashboard - { \"step\": \"/dashboard\" }",
-            "name": "demo"
           }],
         "text": ""
       }

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -404,7 +404,7 @@ export const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "top", content: text.indirectTaxTooltipSupport, class: sheet.classes.TooltipContainer },
+          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet.classes.TooltipContainer },
             h("sl-icon", { name: "info-circle", class: sheet.classes.ToolTip }))),
         h("div", { class: sheet.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({

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-23a6afab.js → ShadowViewAddon-cf230f50.js}

@@ -5,8 +5,9 @@ import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK,
 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, C as CopyTextView } from './copy-text-view-459a2e35.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-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
 import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';