@saasquatch/mint-components 1.13.5 → 1.15.0-0

package/dist/cjs/sqm-qr-code-view-15dfc0b6.js

@@ -0,0 +1,103 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const JSS = require('./JSS-8503a151.js');
+const ErrorView = require('./ErrorView-b2fcf954.js');
+
+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 = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
+
+  }`;
+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 (index.h(ErrorView.ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
+    }
+    else if (loading) {
+      return (index.h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
+          width: "100px",
+          height: "100px",
+          borderRadius: "0px !important",
+        } }));
+    }
+    else if (qrLink) {
+      return (index.h("svg", { width: "100", height: "100" },
+        index.h("image", { href: qrLink, width: "100", height: "100" })));
+    }
+    return null;
+  };
+  const codeContent = getCodeContent(error, qrLink, loading);
+  return (index.h("div", { class: sheet.classes.Container, style: { justifyContent: codeAlignment }, part: "sqm-base" },
+    index.h("style", null, vanillaStyle),
+    index.h("style", null, styleString),
+    index.h("div", { class: sheet.classes.TextContainer, style: { alignItems: codeAlignment } },
+      !hideTitle && index.h("span", { part: "sqm-title" }, titleText),
+      codeContent,
+      index.h("div", { class: sheet.classes.ButtonContainer },
+        index.h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
+        index.h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
+}
+
+exports.QrCodeView = QrCodeView;

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

@@ -0,0 +1,207 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
+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-15dfc0b6.js');
+
+const ShareLinkQuery = index_module.dist.gql `
+  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
+    user: viewer {
+      ... on User {
+        shareLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: DIRECT
+        )
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+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 [qrLink, setQrUrl] = stencilHooks_module.useState(null);
+  const [error, setError] = stencilHooks_module.useState(false);
+  const [loading, setLoading] = stencilHooks_module.useState(false);
+  const { data, errors, loading: requestLoading, } = 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 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;
+  stencilHooks_module.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,
+  };
+}
+
+const QrCode = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @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";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
+    return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, props));
+  }
+};
+function useDemoQRCode(props) {
+  const [dialogIsOpen, setDialog] = stencilHooks_module.useState(false);
+  return cjs.cjs({
+    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 });
+}
+
+exports.sqm_qr_code = QrCode;

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

@@ -9,8 +9,9 @@ const index_module = require('./index.module-ee84433d.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-a5524c20.js');
+require('./useReferralCodes-82e8797b.js');
 require('./mixins-f7e0377a.js');
+const copyTextView = require('./copy-text-view-c85acaaa.js');
 const GenericTableView = require('./GenericTableView-a9f4ba75.js');
 require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
@@ -32,9 +33,11 @@ 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 ShadowViewAddon = require('./ShadowViewAddon-14a02da4.js');
+require('./ErrorView-b2fcf954.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
+const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-baded4af.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-16ac73d0.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15756,6 +15759,65 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions$4
 });
 
+const QRCode_stories = {
+  title: "Components/QR Code",
+};
+const defaultProps$s = {
+  hideTitle: false,
+  loading: false,
+  alignment: "center",
+  error: false,
+  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",
+  downloadCodeText: "Download",
+  printCodeText: "Print",
+  errorHeaderText: "There was an error loading your QR code",
+  errorDescriptionText: "Please refresh this page and try again",
+};
+const Default$q = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s));
+};
+const HideTitle = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { hideTitle: true }));
+};
+const LeftAlign$1 = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "left" }));
+};
+const CenterAlign = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "center" }));
+};
+const RightAlign$1 = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "right" }));
+};
+const Loading$c = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { loading: true }));
+};
+const Error$c = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
+};
+const DownloadError = () => {
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
+};
+
+const QRCode = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': QRCode_stories,
+  Default: Default$q,
+  HideTitle: HideTitle,
+  LeftAlign: LeftAlign$1,
+  CenterAlign: CenterAlign,
+  RightAlign: RightAlign$1,
+  Loading: Loading$c,
+  Error: Error$c,
+  DownloadError: DownloadError
+});
+
 /**
  *
  * Themes
@@ -15768,7 +15830,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$q = `
+const Default$r = `
  // No CSS
 `;
 const Orangey = `
@@ -15802,7 +15864,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$q,
+  Default: Default$r,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18492,6 +18554,7 @@ const stories = [
   WidgetCodeVerification,
   PayoutButtonScroll,
   PayoutStatusAlert,
+  QRCode,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/cjs/{copy-text-view-a5524c20.js → useReferralCodes-82e8797b.js}

@@ -1,10 +1,7 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 const index_module = require('./index.module-ee84433d.js');
-const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(
@@ -135,96 +132,6 @@ function useReferralCodes(props) {
   };
 }
 
-const style = {
-  HostBlock: mixins.HostBlock,
-  inputStyle: {
-    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
-    "&::part(base)": { cursor: "pointer", overflow: "visible" },
-    width: "100%",
-  },
-  inputErrorStyle: {
-    "&::part(base)": {
-      border: "2px solid red",
-    },
-  },
-  ContainerDiv: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  containerStyle: {
-    display: "flex",
-    alignItems: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  errorTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-danger-500)",
-  },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
-};
-const vanillaStyle = `
-  :host{
-    display: block;   
-    width: 100%;
-  }
-`;
-const textAlignStyle = {
-  right: `
-sl-input::part(input){
-  text-align: right;
-}`,
-  center: `  
-sl-input::part(input){
-  text-align: center;
-}`,
-  left: ``,
-};
-const disabledStyles = `
-  sl-input::part(input){
-    cursor: default;
-  }
-`;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function CopyTextView(props) {
-  const { buttonStyle = "icon" } = props;
-  const error = !props.loading && props.error;
-  const inputText = error ? props.inputPlaceholderText : props.copyString;
-  const disabled = error || props.loading || props.disabled;
-  const tooltipPlacement = props.buttonStyle === "button-below"
-    ? "bottom"
-    : props.buttonStyle === "button-outside"
-      ? "top"
-      : "top-end";
-  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
-  return (index.h("div", { class: sheet.classes.ContainerDiv },
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle,
-      textAlignStyle[props.textAlign],
-      disabled && disabledStyles),
-    index.h("div", { class: sheet.classes.containerStyle, style: {
-        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
-      } },
-      index.h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "base: input-base, input: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
-        buttonStyle === "icon" && copyButton,
-        error && (index.h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
-      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
-        copyButton),
-    props.isCopied &&
-      props.showNotificationText &&
-      props.notificationText && (index.h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
-}
-
-exports.CopyTextView = CopyTextView;
 exports.REFERRAL_CODES_NAMESPACE = REFERRAL_CODES_NAMESPACE;
 exports.REFERRAL_CODES_PAGINATION_CONTEXT = REFERRAL_CODES_PAGINATION_CONTEXT;
 exports.SET_CODE_COPIED = SET_CODE_COPIED;

package/dist/collection/collection-manifest.json

@@ -72,6 +72,7 @@
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
+    "./components/sqm-qr-code/sqm-qr-code.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
     "./components/sqm-referral-code/sqm-referral-code.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -5,6 +5,8 @@ import { CardFeedView } from "./sqm-card-feed-view";
 /**
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
+ * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div"]
+ * @validChildren ["sqm-task-card"]
  * @exampleGroup Rewards
  * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
  */

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

@@ -0,0 +1,47 @@
+import { h } from "@stencil/core";
+import { QrCodeView } from "./sqm-qr-code-view";
+export default {
+  title: "Components/QR Code",
+};
+const defaultProps = {
+  hideTitle: false,
+  loading: false,
+  alignment: "center",
+  error: false,
+  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",
+  downloadCodeText: "Download",
+  printCodeText: "Print",
+  errorHeaderText: "There was an error loading your QR code",
+  errorDescriptionText: "Please refresh this page and try again",
+};
+export const Default = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps));
+};
+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, { error: true }));
+};
+export const DownloadError = () => {
+  return h(QrCodeView, Object.assign({}, defaultProps, { error: true }));
+};