@saasquatch/mint-components 1.13.2 → 1.13.3-0

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

@@ -70,6 +70,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-qr-code/sqm-qr-code.js

@@ -0,0 +1,67 @@
+import { useEngagementMedium, useParentValue, useProgramId, useQuery, useUserIdentity, } 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
+        )
+      }
+    }
+  }
+`;
+export class QrCode {
+  constructor() {
+    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 })));
+  }
+  static get is() { return "sqm-qr-code"; }
+  static get encapsulation() { return "shadow"; }
+}

package/dist/esm/{ShadowViewAddon-fd07e6e1.js → ShadowViewAddon-d3c11480.js}

@@ -1,17 +1,18 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.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 { 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 { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-459a2e35.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-1fdb0d92.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { u as useChildElements } from './useChildElements-7945ae56.js';
-import { l as luxon } from './luxon-8d51c92b.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 { 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-5b0ca040.js';
+import { a as isValidColor, b as isMobile } from './utilities-559f8273.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';
 
 const medium = {

package/dist/esm/copy-text-view-782137ba.js

@@ -0,0 +1,94 @@
+import { h } from './index-91e7729f.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { H as HostBlock } from './mixins-83f90fa1.js';
+
+const style = {
+  HostBlock: 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 = 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 = (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" ? (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 })) : (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 (h("div", { class: sheet.classes.ContainerDiv },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    h("div", { class: sheet.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      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 && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton),
+    props.isCopied &&
+      props.showNotificationText &&
+      props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
+}
+
+export { CopyTextView as C };

package/dist/esm/{global-be1f9992.js → global-19d115b9.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-4bc38af4.js';
-import { s as src, m as memoize, U } from './index.module-89a79f66.js';
+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';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {

package/dist/esm/{index.module-89a79f66.js → index.module-8553586f.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, y, i as d, j as useReducer, k as useState, m as useRef } from './stencil-hooks.module-4bc38af4.js';
+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';
 
 const useCallback = (fn, inputs) => useMemo(() => fn, inputs);