@saasquatch/mint-components 1.13.3-7 → 1.13.3-9

package/dist/cjs/{sqm-qr-code-view-1dab20a0.js → sqm-qr-code-view-82b14685.js}

@@ -9,7 +9,6 @@ const style = {
     maxWidth: "390px !important",
   },
   Container: {
-    padding: "var(--sl-spacing-small)",
     display: "flex",
     flexDirection: "row",
     gap: "var(--sl-spacing-small)",
@@ -67,7 +66,7 @@ const vanillaStyle = `
       display: block;
     }
   }`;
-function QrCodeView({ dialogIsOpen, error, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
+function QrCodeView({ dialogIsOpen, error, viewError, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
   return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", null, vanillaStyle),
     index.h("style", null, styleString),
@@ -79,9 +78,9 @@ function QrCodeView({ dialogIsOpen, error, showDialog, hideDialog, qrLink, title
         index.h("sl-button", { type: "text", onClick: createDownloadable }, downloadCodeText),
         index.h("sl-button", { type: "text", onClick: createPrintable }, printCodeText))),
     index.h("sl-dialog", { class: sheet.classes.DialogContainer, width: "250px", open: dialogIsOpen, label: titleText, "onSl-hide": hideDialog },
-      error && (index.h(ErrorView.ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
-      index.h("div", { class: sheet.classes.CodeContainer },
-        index.h("img", { class: sheet.classes.Code, src: `${qrLink}&qrCodeImageFormat=svg` })),
+      (viewError || error) && (index.h(ErrorView.ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
+      qrLink && (index.h("div", { class: sheet.classes.CodeContainer },
+        index.h("img", { class: sheet.classes.Code, src: qrLink }))),
       index.h("div", { slot: "footer", class: sheet.classes.FooterContainer },
         index.h("sl-button", { disabled: error, variant: "default", onClick: createDownloadable }, downloadCodeText),
         index.h("sl-button", { disabled: error, variant: "default", onClick: createPrintable }, printCodeText)))));

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

@@ -10,7 +10,7 @@ const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-82e8797b.js');
 require('./ErrorView-b2fcf954.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-1dab20a0.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-82b14685.js');
 
 const ShareLinkQuery = index_module.dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
@@ -31,15 +31,35 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
   }
 `;
 function useQRCode(props) {
+  var _a;
   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 [qrLink, setQrUrl] = stencilHooks_module.useState(null);
   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 [viewError, setViewError] = stencilHooks_module.useState(false);
+  const { data, errors } = 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 [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
-  const qrLink = data ? `${data.user.shareLink}?qrCode` : "";
+  const shareLink = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink;
+  const qrPrefix = `${shareLink}?qrCode`;
+  stencilHooks_module.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: {
@@ -56,7 +76,7 @@ function useQRCode(props) {
   };
   const createDownloadable = async () => {
     try {
-      const res = await fetch(`${qrLink}&qrCodeSize=800&qrCodeImageFormat=png`);
+      const res = await fetch(`${qrPrefix}&qrCodeSize=800&qrCodeImageFormat=png`);
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       // Successful
@@ -77,7 +97,7 @@ function useQRCode(props) {
   };
   const createPrintable = async () => {
     try {
-      const res = await fetch(`${qrLink}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
+      const res = await fetch(`${qrPrefix}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       // Successful
@@ -102,7 +122,8 @@ function useQRCode(props) {
     ...props,
     qrLink,
     dialogIsOpen,
-    error,
+    error: error,
+    viewError: viewError || !!(errors === null || errors === void 0 ? void 0 : errors.message),
     showDialog: () => {
       setError(false);
       setDialog(true);

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-1dab20a0.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-82b14685.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');
@@ -15680,6 +15680,7 @@ const QRCode_stories = {
 const defaultProps$r = {
   dialogIsOpen: false,
   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=",
@@ -15703,7 +15704,10 @@ 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 })));
+  return (index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true, viewError: true })));
+};
+const DownloadError = () => {
+  return (index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: false, error: true })));
 };
 
 const QRCode = /*#__PURE__*/Object.freeze({
@@ -15711,7 +15715,8 @@ const QRCode = /*#__PURE__*/Object.freeze({
   'default': QRCode_stories,
   Default: Default$o,
   Expanded: Expanded,
-  Error: Error$b
+  Error: Error$b,
+  DownloadError: DownloadError
 });
 
 /**

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

@@ -6,6 +6,7 @@ export default {
 const defaultProps = {
   dialogIsOpen: false,
   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=",
@@ -29,5 +30,8 @@ export const Expanded = () => {
   return h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true }));
 };
 export const Error = () => {
-  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true, error: true })));
+  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true, viewError: true })));
+};
+export const DownloadError = () => {
+  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: false, error: true })));
 };

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

@@ -6,7 +6,6 @@ const style = {
     maxWidth: "390px !important",
   },
   Container: {
-    padding: "var(--sl-spacing-small)",
     display: "flex",
     flexDirection: "row",
     gap: "var(--sl-spacing-small)",
@@ -64,7 +63,7 @@ const vanillaStyle = `
       display: block;
     }
   }`;
-export function QrCodeView({ dialogIsOpen, error, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
+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" },
     h("style", null, vanillaStyle),
     h("style", null, styleString),
@@ -76,9 +75,9 @@ export function QrCodeView({ dialogIsOpen, error, showDialog, hideDialog, qrLink
         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` })),
+      (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", { 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

@@ -178,7 +178,7 @@ export class QrCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<QRCodeViewProps>",
-        "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; }",
+        "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",

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

@@ -1,5 +1,6 @@
 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 `
@@ -21,15 +22,35 @@ const WIDGET_ENGAGEMENT_EVENT = gql `
   }
 `;
 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 { 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 [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 qrLink = data ? `${data.user.shareLink}?qrCode` : "";
+  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: {
@@ -46,7 +67,7 @@ export function useQRCode(props) {
   };
   const createDownloadable = async () => {
     try {
-      const res = await fetch(`${qrLink}&qrCodeSize=800&qrCodeImageFormat=png`);
+      const res = await fetch(`${qrPrefix}&qrCodeSize=800&qrCodeImageFormat=png`);
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       // Successful
@@ -67,7 +88,7 @@ export function useQRCode(props) {
   };
   const createPrintable = async () => {
     try {
-      const res = await fetch(`${qrLink}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
+      const res = await fetch(`${qrPrefix}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       // Successful
@@ -92,7 +113,8 @@ export function useQRCode(props) {
     ...props,
     qrLink,
     dialogIsOpen,
-    error,
+    error: error,
+    viewError: viewError || !!(errors === null || errors === void 0 ? void 0 : errors.message),
     showDialog: () => {
       setError(false);
       setDialog(true);

package/dist/esm/{sqm-qr-code-view-cfba2441.js → sqm-qr-code-view-2dff1823.js}

@@ -7,7 +7,6 @@ const style = {
     maxWidth: "390px !important",
   },
   Container: {
-    padding: "var(--sl-spacing-small)",
     display: "flex",
     flexDirection: "row",
     gap: "var(--sl-spacing-small)",
@@ -65,7 +64,7 @@ const vanillaStyle = `
       display: block;
     }
   }`;
-function QrCodeView({ dialogIsOpen, error, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
+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" },
     h("style", null, vanillaStyle),
     h("style", null, styleString),
@@ -77,9 +76,9 @@ function QrCodeView({ dialogIsOpen, error, 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` })),
+      (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", { disabled: error, variant: "default", onClick: createDownloadable }, downloadCodeText),
         h("sl-button", { disabled: error, variant: "default", onClick: createPrintable }, printCodeText)))));

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { k as useState, n as h } from './stencil-hooks.module-4bc38af4.js';
+import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
 import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE } from './useReferralCodes-8f75921a.js';
 import './ErrorView-48e2b969.js';
-import { Q as QrCodeView } from './sqm-qr-code-view-cfba2441.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-2dff1823.js';
 
 const ShareLinkQuery = dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
@@ -27,15 +27,35 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
   }
 `;
 function useQRCode(props) {
+  var _a;
   const programId = H();
   const user = J();
   const engagementMedium = B();
   const contextData = Fn(REFERRAL_CODES_NAMESPACE);
   const [dialogIsOpen, setDialog] = useState(false);
+  const [qrLink, setQrUrl] = useState(null);
   const [error, setError] = useState(false);
-  const { data } = wn(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [viewError, setViewError] = useState(false);
+  const { data, errors } = wn(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
-  const qrLink = data ? `${data.user.shareLink}?qrCode` : "";
+  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: {
@@ -52,7 +72,7 @@ function useQRCode(props) {
   };
   const createDownloadable = async () => {
     try {
-      const res = await fetch(`${qrLink}&qrCodeSize=800&qrCodeImageFormat=png`);
+      const res = await fetch(`${qrPrefix}&qrCodeSize=800&qrCodeImageFormat=png`);
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       // Successful
@@ -73,7 +93,7 @@ function useQRCode(props) {
   };
   const createPrintable = async () => {
     try {
-      const res = await fetch(`${qrLink}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
+      const res = await fetch(`${qrPrefix}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);
       // Successful
@@ -98,7 +118,8 @@ function useQRCode(props) {
     ...props,
     qrLink,
     dialogIsOpen,
-    error,
+    error: error,
+    viewError: viewError || !!(errors === null || errors === void 0 ? void 0 : errors.message),
     showDialog: () => {
       setError(false);
       setDialog(true);

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

@@ -30,7 +30,7 @@ import './utilities-5b0ca040.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-54a8651f.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-b12cb894.js';
 import './ErrorView-48e2b969.js';
-import { Q as QrCodeView } from './sqm-qr-code-view-cfba2441.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-2dff1823.js';
 import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, J as CouponCodeView, K as ProgressBar$2, M as autoColorScaleCss, O as ShadowViewAddon } from './ShadowViewAddon-499b1f86.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-2c726568.js';
@@ -15676,6 +15676,7 @@ const QRCode_stories = {
 const defaultProps$r = {
   dialogIsOpen: false,
   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=",
@@ -15699,7 +15700,10 @@ const Expanded = () => {
   return h(QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true }));
 };
 const Error$b = () => {
-  return (h(QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true, error: true })));
+  return (h(QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: true, viewError: true })));
+};
+const DownloadError = () => {
+  return (h(QrCodeView, Object.assign({}, defaultProps$r, { dialogIsOpen: false, error: true })));
 };
 
 const QRCode = /*#__PURE__*/Object.freeze({
@@ -15707,7 +15711,8 @@ const QRCode = /*#__PURE__*/Object.freeze({
   'default': QRCode_stories,
   Default: Default$o,
   Expanded: Expanded,
-  Error: Error$b
+  Error: Error$b,
+  DownloadError: DownloadError
 });
 
 /**

package/dist/esm-es5/sqm-qr-code-view-2dff1823.js

@@ -0,0 +1 @@
+import{h}from"./index-91e7729f.js";import{c as createStyleSheet}from"./JSS-67b5cff8.js";import{E as ErrorView}from"./ErrorView-48e2b969.js";var style={DialogContainer:{maxWidth:"390px !important"},Container:{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"}};var sheet=createStyleSheet(style);var styleString=sheet.toString();var vanillaStyle="\n  sl-dialog::part(panel) {\n    max-width: 390px;\n    width: 100%;\n  }\n  sl-dialog::part(footer) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sl-spacing-small);\n    width: 100%;\n  }\n  sl-dialog::part(body) {\n    padding: 0 var(--sl-spacing-large);\n  }\n  :host{\n    display: flex;\n    width: 100%;\n  }\n  @media (max-width: 499px) {\n    :host{\n      display: block;\n    }\n  }";function QrCodeView(e){var t=e.dialogIsOpen,a=e.error,i=e.viewError,l=e.showDialog,r=e.hideDialog,n=e.qrLink,s=e.titleText,o=e.viewCodeText,d=e.downloadCodeText,c=e.printCodeText,p=e.errorHeaderText,g=e.errorDescriptionText,x=e.createDownloadable,m=e.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},a&&h(ErrorView,{loadingErrorAlertDescription:p,loadingErrorAlertHeader:g}),h("span",{part:"sqm-title"},s),h("div",{class:sheet.classes.ButtonContainer},h("sl-button",{type:"primary",onClick:l},o),h("sl-button",{type:"text",onClick:x},d),h("sl-button",{type:"text",onClick:m},c))),h("sl-dialog",{class:sheet.classes.DialogContainer,width:"250px",open:t,label:s,"onSl-hide":r},(i||a)&&h(ErrorView,{loadingErrorAlertDescription:p,loadingErrorAlertHeader:g}),n&&h("div",{class:sheet.classes.CodeContainer},h("img",{class:sheet.classes.Code,src:n})),h("div",{slot:"footer",class:sheet.classes.FooterContainer},h("sl-button",{disabled:a,variant:"default",onClick:x},d),h("sl-button",{disabled:a,variant:"default",onClick:m},c))))}export{QrCodeView as Q};

package/dist/esm-es5/sqm-qr-code.entry.js

@@ -1 +1 @@
-var __makeTemplateObject=this&&this.__makeTemplateObject||function(e,t){if(Object.defineProperty){Object.defineProperty(e,"raw",{value:t})}else{e.raw=t}return e};var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o))e[o]=t[o]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{c(r.next(e))}catch(e){a(e)}}function s(e){try{c(r["throw"](e))}catch(e){a(e)}}function c(e){e.done?n(e.value):o(e.value).then(i,s)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(e){return function(t){return c([e,t])}}function c(i){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=i[0]&2?o["return"]:i[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,i[1])).done)return a;if(o=0,a)i=[i[0]&2,a.value];switch(i[0]){case 0:case 1:a=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;o=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!a||i[1]>a[0]&&i[1]<a[3])){n.label=i[1];break}if(i[0]===6&&n.label<a[1]){n.label=a[1];a=i;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(i);break}if(a[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];o=0}finally{r=a=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,h as h$1}from"./index-91e7729f.js";import{k as useState,n as h}from"./stencil-hooks.module-4bc38af4.js";import{d as dist,H,J,F as Fn,w as wn,$ as $e,B,i as isDemo}from"./index.module-89a79f66.js";import{c as cjs}from"./cjs-bdfb4486.js";import{g as getProps}from"./utils-334c1e34.js";import"./JSS-67b5cff8.js";import{a as REFERRAL_CODES_NAMESPACE}from"./useReferralCodes-8f75921a.js";import"./ErrorView-48e2b969.js";import{Q as QrCodeView}from"./sqm-qr-code-view-cfba2441.js";var ShareLinkQuery=dist.gql(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {\n    user: viewer {\n      ... on User {\n        shareLink(\n          programId: $programId\n          engagementMedium: $engagementMedium\n          shareMedium: DIRECT\n        )\n      }\n    }\n  }\n"],["\n  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {\n    user: viewer {\n      ... on User {\n        shareLink(\n          programId: $programId\n          engagementMedium: $engagementMedium\n          shareMedium: DIRECT\n        )\n      }\n    }\n  }\n"])));var WIDGET_ENGAGEMENT_EVENT=dist.gql(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"],["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"])));function useQRCode(e){var t=this;var n=H();var r=J();var o=B();var a=Fn(REFERRAL_CODES_NAMESPACE);var i=useState(false),s=i[0],c=i[1];var u=useState(false),d=u[0],l=u[1];var f=wn(ShareLinkQuery,{programId:n,engagementMedium:o},!(r===null||r===void 0?void 0:r.jwt)||(a===null||a===void 0?void 0:a.shareLink)!==undefined).data;var m=$e(WIDGET_ENGAGEMENT_EVENT)[0];var h=f?f.user.shareLink+"?qrCode":"";var p=function(){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){m({eventMeta:{programId:n,id:r===null||r===void 0?void 0:r.id,accountId:r===null||r===void 0?void 0:r.accountId,type:"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",meta:{engagementMedium:o,shareMedium:"DIRECT"}}});return[2]}))}))};var v=function(){return __awaiter(t,void 0,void 0,(function(){var e,t,n,r,o;return __generator(this,(function(a){switch(a.label){case 0:a.trys.push([0,3,,4]);return[4,fetch(h+"&qrCodeSize=800&qrCodeImageFormat=png")];case 1:e=a.sent();return[4,e.blob()];case 2:t=a.sent();n=URL.createObjectURL(t);if(t)p();r=document.createElement("a");r.href=n;r.download="qrCode.png";document.body.appendChild(r);r.click();document.body.removeChild(r);return[3,4];case 3:o=a.sent();console.error("Failed to fetch QR code:",o);l(true);return[3,4];case 4:return[2]}}))}))};var g=function(){return __awaiter(t,void 0,void 0,(function(){var e,t,n,r,o,a;return __generator(this,(function(i){switch(i.label){case 0:i.trys.push([0,3,,4]);return[4,fetch(h+"&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H")];case 1:e=i.sent();return[4,e.blob()];case 2:t=i.sent();n=URL.createObjectURL(t);if(t)p();r=window.open("about:blank","_new");o=r.document.createElement("img");o.src=n;o.onload=function(){r.print();r.close()};r.document.body.appendChild(o);return[3,4];case 3:a=i.sent();console.error("Failed to fetch QR code: ",a);l(true);return[3,4];case 4:return[2]}}))}))};return __assign(__assign({},e),{qrLink:h,dialogIsOpen:s,error:d,showDialog:function(){l(false);c(true)},hideDialog:function(){l(false);c(false)},createDownloadable:v,createPrintable:g})}var QrCode=function(){function e(e){registerInstance(this,e);this.titleText="Share your QR code";this.viewCodeText="View QR code";this.downloadCodeText="Download";this.printCodeText="Print";this.errorHeaderText="There was an error loading your QR code";this.errorDescriptionText="Please refresh this page and try again";h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=getProps(this);var t=isDemo()?useDemoQRCode(e):useQRCode(e);return h$1(QrCodeView,Object.assign({},t))};return e}();function useDemoQRCode(e){var t=this;var n=useState(false),r=n[0],o=n[1];return cjs({dialogIsOpen:r,showDialog:function(){return o(true)},hideDialog:function(){return o(false)},titleText:e.titleText,viewCodeText:e.viewCodeText,downloadCodeText:e.downloadCodeText,printCodeText:e.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:function(){console.log("View QR Code clicked")},createDownloadable:function(){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){console.log("Download QR Code clicked");return[2]}))}))},createPrintable:function(){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){console.log("Print QR Code clicked");return[2]}))}))}},e.demoData||{},{arrayMerge:function(e,t){return t}})}export{QrCode as sqm_qr_code};var templateObject_1,templateObject_2;
+var __makeTemplateObject=this&&this.__makeTemplateObject||function(e,t){if(Object.defineProperty){Object.defineProperty(e,"raw",{value:t})}else{e.raw=t}return e};var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a))e[a]=t[a]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,r,n){function a(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,o){function i(e){try{c(n.next(e))}catch(e){o(e)}}function s(e){try{c(n["throw"](e))}catch(e){o(e)}}function c(e){e.done?r(e.value):a(e.value).then(i,s)}c((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,a,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(e){return function(t){return c([e,t])}}function c(i){if(n)throw new TypeError("Generator is already executing.");while(r)try{if(n=1,a&&(o=i[0]&2?a["return"]:i[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,i[1])).done)return o;if(a=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:r.label++;return{value:i[1],done:false};case 5:r.label++;a=i[1];i=[0];continue;case 7:i=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){r=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){r.label=i[1];break}if(i[0]===6&&r.label<o[1]){r.label=o[1];o=i;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(i);break}if(o[2])r.ops.pop();r.trys.pop();continue}i=t.call(e,r)}catch(e){i=[6,e];a=0}finally{n=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,h as h$1}from"./index-91e7729f.js";import{k as useState,f as useEffect,n as h}from"./stencil-hooks.module-4bc38af4.js";import{d as dist,H,J,F as Fn,w as wn,$ as $e,B,i as isDemo}from"./index.module-89a79f66.js";import{c as cjs}from"./cjs-bdfb4486.js";import{g as getProps}from"./utils-334c1e34.js";import"./JSS-67b5cff8.js";import{a as REFERRAL_CODES_NAMESPACE}from"./useReferralCodes-8f75921a.js";import"./ErrorView-48e2b969.js";import{Q as QrCodeView}from"./sqm-qr-code-view-2dff1823.js";var ShareLinkQuery=dist.gql(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {\n    user: viewer {\n      ... on User {\n        shareLink(\n          programId: $programId\n          engagementMedium: $engagementMedium\n          shareMedium: DIRECT\n        )\n      }\n    }\n  }\n"],["\n  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {\n    user: viewer {\n      ... on User {\n        shareLink(\n          programId: $programId\n          engagementMedium: $engagementMedium\n          shareMedium: DIRECT\n        )\n      }\n    }\n  }\n"])));var WIDGET_ENGAGEMENT_EVENT=dist.gql(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"],["\n  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {\n    createUserAnalyticsEvent(eventMeta: $eventMeta)\n  }\n"])));function useQRCode(e){var t=this;var r;var n=H();var a=J();var o=B();var i=Fn(REFERRAL_CODES_NAMESPACE);var s=useState(false),c=s[0],u=s[1];var d=useState(null),l=d[0],f=d[1];var m=useState(false),v=m[0],h=m[1];var g=useState(false),p=g[0],_=g[1];var b=wn(ShareLinkQuery,{programId:n,engagementMedium:o},!(a===null||a===void 0?void 0:a.jwt)||(i===null||i===void 0?void 0:i.shareLink)!==undefined),w=b.data,E=b.errors;var C=$e(WIDGET_ENGAGEMENT_EVENT)[0];var y=(r=w===null||w===void 0?void 0:w.user)===null||r===void 0?void 0:r.shareLink;var R=y+"?qrCode";useEffect((function(){if(!y)return;var e=function(){return __awaiter(t,void 0,void 0,(function(){var e,t,r,n;return __generator(this,(function(a){switch(a.label){case 0:a.trys.push([0,3,,4]);return[4,fetch(y+"?qrCode&qrCodeImageFormat=svg")];case 1:e=a.sent();return[4,e.blob()];case 2:t=a.sent();r=URL.createObjectURL(t);f(r);return[3,4];case 3:n=a.sent();_(true);return[3,4];case 4:return[2]}}))}))};e()}),[y]);var j=function(){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){C({eventMeta:{programId:n,id:a===null||a===void 0?void 0:a.id,accountId:a===null||a===void 0?void 0:a.accountId,type:"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",meta:{engagementMedium:o,shareMedium:"DIRECT"}}});return[2]}))}))};var T=function(){return __awaiter(t,void 0,void 0,(function(){var e,t,r,n,a;return __generator(this,(function(o){switch(o.label){case 0:o.trys.push([0,3,,4]);return[4,fetch(R+"&qrCodeSize=800&qrCodeImageFormat=png")];case 1:e=o.sent();return[4,e.blob()];case 2:t=o.sent();r=URL.createObjectURL(t);if(t)j();n=document.createElement("a");n.href=r;n.download="qrCode.png";document.body.appendChild(n);n.click();document.body.removeChild(n);return[3,4];case 3:a=o.sent();console.error("Failed to fetch QR code:",a);h(true);return[3,4];case 4:return[2]}}))}))};var k=function(){return __awaiter(t,void 0,void 0,(function(){var e,t,r,n,a,o;return __generator(this,(function(i){switch(i.label){case 0:i.trys.push([0,3,,4]);return[4,fetch(R+"&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H")];case 1:e=i.sent();return[4,e.blob()];case 2:t=i.sent();r=URL.createObjectURL(t);if(t)j();n=window.open("about:blank","_new");a=n.document.createElement("img");a.src=r;a.onload=function(){n.print();n.close()};n.document.body.appendChild(a);return[3,4];case 3:o=i.sent();console.error("Failed to fetch QR code: ",o);h(true);return[3,4];case 4:return[2]}}))}))};return __assign(__assign({},e),{qrLink:l,dialogIsOpen:c,error:v,viewError:p||!!(E===null||E===void 0?void 0:E.message),showDialog:function(){h(false);u(true)},hideDialog:function(){h(false);u(false)},createDownloadable:T,createPrintable:k})}var QrCode=function(){function e(e){registerInstance(this,e);this.titleText="Share your QR code";this.viewCodeText="View QR code";this.downloadCodeText="Download";this.printCodeText="Print";this.errorHeaderText="There was an error loading your QR code";this.errorDescriptionText="Please refresh this page and try again";h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=getProps(this);var t=isDemo()?useDemoQRCode(e):useQRCode(e);return h$1(QrCodeView,Object.assign({},t))};return e}();function useDemoQRCode(e){var t=this;var r=useState(false),n=r[0],a=r[1];return cjs({dialogIsOpen:n,showDialog:function(){return a(true)},hideDialog:function(){return a(false)},titleText:e.titleText,viewCodeText:e.viewCodeText,downloadCodeText:e.downloadCodeText,printCodeText:e.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:function(){console.log("View QR Code clicked")},createDownloadable:function(){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){console.log("Download QR Code clicked");return[2]}))}))},createPrintable:function(){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){console.log("Print QR Code clicked");return[2]}))}))}},e.demoData||{},{arrayMerge:function(e,t){return t}})}export{QrCode as sqm_qr_code};var templateObject_1,templateObject_2;