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

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

@@ -33,6 +33,7 @@ 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');
 const ShadowViewAddon = require('./ShadowViewAddon-3ddee92b.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-baded4af.js');
@@ -15672,6 +15673,39 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions$4
 });
 
+const QRCode_stories = {
+  title: "Components/QR Code",
+};
+const defaultProps$r = {
+  dialogIsOpen: 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",
+};
+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 QRCode = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': QRCode_stories,
+  Default: Default$o,
+  Expanded: Expanded
+});
+
 /**
  *
  * Themes
@@ -15684,7 +15718,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$o = `
+const Default$p = `
  // No CSS
 `;
 const Orangey = `
@@ -15718,7 +15752,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$o,
+  Default: Default$p,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18405,6 +18439,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,27 @@
+import { h } from "@stencil/core";
+import { QrCodeView } from "./sqm-qr-code-view";
+export default {
+  title: "Components/QR Code",
+};
+const defaultProps = {
+  dialogIsOpen: 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",
+};
+export const Default = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps));
+};
+export const Expanded = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true }));
+};

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

@@ -0,0 +1,82 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  DialogContainer: {
+    maxWidth: "390px !important",
+  },
+  Container: {
+    padding: "var(--sl-spacing-small)",
+    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(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, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, 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 },
+      h("span", { part: "sqm-title" }, titleText),
+      h("div", { class: sheet.classes.ButtonContainer },
+        h("sl-button", { type: "primary", onClick: showDialog }, viewCodeText),
+        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 },
+      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)))));
+}

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

@@ -1,67 +1,179 @@
-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";
     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\""
+    },
+    "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; }",
+        "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: this.titleText,
+    viewCodeText: this.viewCodeText,
+    downloadCodeText: this.downloadCodeText,
+    printCodeText: this.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,59 @@
+import { useEngagementMedium, 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";
+const ShareLinkQuery = gql `
+  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
+    user: viewer {
+      ... on User {
+        shareLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: DIRECT
+        )
+      }
+    }
+  }
+`;
+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 { 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 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 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);
+  };
+  return {
+    ...props,
+    qrLink,
+    dialogIsOpen,
+    showDialog: () => setDialog(true),
+    hideDialog: () => 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/{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);