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

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

@@ -34,7 +34,7 @@ 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 sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
 const ShadowViewAddon = require('./ShadowViewAddon-3ddee92b.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-16ac73d0.js');
@@ -15678,11 +15678,10 @@ const QRCode_stories = {
   title: "Components/QR Code",
 };
 const defaultProps$r = {
-  dialogIsOpen: false,
+  hideTitle: false,
+  loading: false,
+  alignment: "center",
   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");
@@ -15691,7 +15690,6 @@ const defaultProps$r = {
     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",
@@ -15700,21 +15698,37 @@ const defaultProps$r = {
 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 HideTitle = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { hideTitle: true }));
+};
+const LeftAlign$1 = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { alignment: "left" }));
+};
+const CenterAlign = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { alignment: "center" }));
+};
+const RightAlign$1 = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { alignment: "right" }));
+};
+const Loading$b = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { loading: true }));
 };
 const Error$b = () => {
-  return (index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true, viewError: true })));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { error: true }));
 };
 const DownloadError = () => {
-  return (index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: false, error: true })));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { error: true }));
 };
 
 const QRCode = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': QRCode_stories,
   Default: Default$o,
-  Expanded: Expanded,
+  HideTitle: HideTitle,
+  LeftAlign: LeftAlign$1,
+  CenterAlign: CenterAlign,
+  RightAlign: RightAlign$1,
+  Loading: Loading$b,
   Error: Error$b,
   DownloadError: DownloadError
 });

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

@@ -4,11 +4,10 @@ export default {
   title: "Components/QR Code",
 };
 const defaultProps = {
-  dialogIsOpen: false,
+  hideTitle: false,
+  loading: false,
+  alignment: "center",
   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");
@@ -17,7 +16,6 @@ const defaultProps = {
     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",
@@ -26,12 +24,24 @@ const defaultProps = {
 export const Default = () => {
   return h(QrCodeView, Object.assign({}, defaultProps));
 };
-export const Expanded = () => {
-  return h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true }));
+export const HideTitle = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { hideTitle: true }));
+};
+export const LeftAlign = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { alignment: "left" }));
+};
+export const CenterAlign = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { alignment: "center" }));
+};
+export const RightAlign = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { alignment: "right" }));
+};
+export const Loading = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { loading: true }));
 };
 export const Error = () => {
-  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true, viewError: true })));
+  return h(QrCodeView, Object.assign({}, defaultProps, { error: true }));
 };
 export const DownloadError = () => {
-  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: false, error: true })));
+  return h(QrCodeView, Object.assign({}, defaultProps, { error: true }));
 };

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

@@ -6,15 +6,16 @@ const style = {
     maxWidth: "390px !important",
   },
   Container: {
+    width: "100%",
     display: "flex",
     flexDirection: "row",
     gap: "var(--sl-spacing-small)",
-    justifyContent: "space-between",
   },
-  FacadeContainer: {
+  TextContainer: {
     display: "flex",
     gap: "var(--sl-spacing-medium)",
     flexDirection: "column",
+    alignItems: "center",
   },
   ButtonContainer: {
     display: "flex",
@@ -37,28 +38,20 @@ const style = {
     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 = `
-  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%;
@@ -67,23 +60,39 @@ const vanillaStyle = `
     :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" },
+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.FacadeContainer },
-      error && (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
-      h("span", { part: "sqm-title" }, titleText),
+    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", { 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)))));
+        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

@@ -36,6 +36,17 @@ export class QrCode {
      * @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() { }
@@ -173,12 +184,63 @@ export class QrCode {
       "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": "{ 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; }",
+        "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",
@@ -209,12 +271,14 @@ 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");

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

@@ -27,10 +27,9 @@ export function useQRCode(props) {
   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 [loading, setLoading] = 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;
@@ -39,14 +38,18 @@ export function useQRCode(props) {
     if (!shareLink)
       return;
     const getQrCode = async () => {
+      setLoading(true);
       try {
-        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg`);
+        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg&qrCodeQuietZoneSize=0`);
         const blob = await res.blob();
         const url = URL.createObjectURL(blob);
         setQrUrl(url);
       }
       catch (e) {
-        setViewError(true);
+        setError(true);
+      }
+      finally {
+        setLoading(false);
       }
     };
     getQrCode();
@@ -111,18 +114,9 @@ export function useQRCode(props) {
   };
   return {
     ...props,
+    loading,
     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,
   };