@saasquatch/mint-components 1.6.6 → 1.6.7-0

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -25,20 +25,20 @@ const style = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);

package/dist/collection/components/sqm-coupon-code/CouponCode.stories.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Coupon Code",
+  parameters: {
+  // scenario,
+  },
+};
+export const CouponCode = () => {
+  return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
+};
+export const CustomTooltipText = () => {
+  return h("sqm-coupon-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
+};
+export const TextAlignCenter = () => {
+  return h("sqm-coupon-code", { textAlign: "center" });
+};
+export const CopyButton = () => {
+  return h("sqm-coupon-code", { isCopyIcon: false });
+};
+export const CustomTooltipDuration = () => {
+  return (h("sqm-coupon-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};

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

@@ -0,0 +1,208 @@
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h } from "@stencil/core";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { CopyTextView } from "../views/copy-text-view";
+import { getProps } from "../../utils/utils";
+import { useCouponCode } from "./useCouponCode";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Coupon Code
+ * @exampleGroup Sharing
+ * @example Coupon Code - <sqm-coupon-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-coupon-code>
+ */
+export class CouponCode {
+  constructor() {
+    /**
+     * Shown inside a tooltip after someone has successfully copied the link to their clipboard.
+     *
+     * @uiName Tooltip Text
+     */
+    this.tooltiptext = "Copied to Clipboard";
+    /**
+     * The number of milliseconds that the tooltip appears for
+     *
+     * @uiName Tooltip lifespan
+     */
+    this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName Align text
+     */
+    this.textAlign = "left";
+    /**
+     * Set copy button as icon
+     *
+     * @uiName Copy icon
+     */
+    this.isCopyIcon = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoCouponCode(thisProps)
+      : useCouponCode(thisProps);
+    return h(CopyTextView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-coupon-code"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }],
+        "text": "The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "tooltiptext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tooltip Text",
+            "name": "uiName"
+          }],
+        "text": "Shown inside a tooltip after someone has successfully copied the link to their clipboard."
+      },
+      "attribute": "tooltip-text",
+      "reflect": false,
+      "defaultValue": "\"Copied to Clipboard\""
+    },
+    "tooltiplifespan": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tooltip lifespan",
+            "name": "uiName"
+          }],
+        "text": "The number of milliseconds that the tooltip appears for"
+      },
+      "attribute": "tooltip-lifespan",
+      "reflect": false,
+      "defaultValue": "1000"
+    },
+    "textAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\"",
+        "resolved": "\"center\" | \"left\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Align text",
+            "name": "uiName"
+          }],
+        "text": "Change the text alignment"
+      },
+      "attribute": "text-align",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
+    "isCopyIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Copy icon",
+            "name": "uiName"
+          }],
+        "text": "Set copy button as icon"
+      },
+      "attribute": "is-copy-icon",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<CopyTextViewProps>",
+        "resolved": "{ copyString?: string; open?: boolean; disabled?: boolean; tooltiptext?: string; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; onClick?: () => void; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "CopyTextViewProps": {
+            "location": "import",
+            "path": "../views/copy-text-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoCouponCode(props) {
+  const [open, setOpen] = useState(false);
+  const copyString = "THANKSJANE125uv125";
+  return deepmerge({
+    copyString,
+    tooltiptext: props.tooltiptext,
+    isCopyIcon: props.isCopyIcon,
+    textAlign: props.textAlign,
+    open,
+    onClick: () => {
+      // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+      // Only if called from a user-initiated event
+      navigator.clipboard.writeText(copyString);
+      setOpen(true);
+      setTimeout(() => setOpen(false), props.tooltiplifespan);
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-coupon-code/useCouponCode.js

@@ -0,0 +1,49 @@
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useState } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+const MessageLinkQuery = gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+export function useCouponCode(props) {
+  var _a, _b;
+  const { programId = useProgramId() } = props;
+  const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
+  const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
+  const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
+  // Shown during loading
+  "...";
+  const [open, setOpen] = useState(false);
+  function onClick() {
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText(copyString);
+    setOpen(true);
+    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    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,
+          couponMedium: "DIRECT",
+        },
+      },
+    });
+  }
+  return { ...props, onClick, open, copyString };
+}

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -21,24 +21,24 @@ export function DividedLayoutView(props, children) {
       },
     },
   };
-  const hostStyle = `
-    display: flex;
-    flex: 1;
-    box-sizing: border-box;
-    flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
-    overflow-x: clip;
+  const hostStyle = `
+    display: flex;
+    flex: 1;
+    box-sizing: border-box;
+    flex-direction: ${props.direction};
+    background-color: var(--sqm-content-background);
+    overflow-x: clip;
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    : ""}
   `;
-  const vanillaStyle = `
-  :host{
-    ${hostStyle}
-  }
-  sqm-divided-layout {
-    ${hostStyle}
-  }
+  const vanillaStyle = `
+  :host{
+    ${hostStyle}
+  }
+  sqm-divided-layout {
+    ${hostStyle}
+  }
   `;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js

@@ -18,16 +18,16 @@ const style = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-select::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);

package/dist/collection/components/sqm-edit-profile/useEditProfile.js

@@ -2,39 +2,39 @@ import { useQuery, useMutation, useUserIdentity, } from "@saasquatch/component-b
 import { gql } from "graphql-request";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { intl } from "../../global/global";
-const GET_USER = gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
+const GET_USER = gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
 `;
-const UPSERT_USER = gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
+const UPSERT_USER = gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
 `;
 // view doesn't tolerate undefined, even when we're loading
 const defaultFormState = {

package/dist/collection/components/sqm-hero/sqm-hero-view.js

@@ -103,20 +103,20 @@ export function HeroView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{    
-    height: 100%;
-    display: contents;
-  }
-  sqm-hero{    
-    height: 100%;
-    display: contents;
-  }
-  img{
-      max-width: 100%;
-      height: auto;
-  }
-  
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
   return (h("div", { class: sheet.classes.Container },

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -103,9 +103,9 @@ export function HeroImageView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: block;
+  const vanillaStyle = `
+  :host{
+    display: block;
   }`;
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },

package/dist/collection/components/sqm-image/sqm-image-view.js

@@ -18,15 +18,15 @@ export function ImageView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h("div", { class: sheet.classes.Container },
-      h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+      h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
 }

package/dist/collection/components/sqm-input-field/sqm-input-field-view.js

@@ -9,12 +9,12 @@ const style = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -43,10 +43,10 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const vanillaStyle = `
-	:host{
-		display: block;
-	}
+const vanillaStyle = `
+	:host{
+		display: block;
+	}
 `;
 export function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -77,7 +77,7 @@ export class Leaderboard {
             "text": "programSelector",
             "name": "uiWidget"
           }],
-        "text": "Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.\r\nIf no program ID is set or provided by context, then a global leaderboard is shown."
+        "text": "Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.\nIf no program ID is set or provided by context, then a global leaderboard is shown."
       },
       "attribute": "program-id",
       "reflect": false
@@ -219,7 +219,7 @@ export class Leaderboard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"topStartedReferrers\"\r\n    | \"topConvertedReferrers\"\r\n    | \"topPointEarners\"",
+        "original": "| \"topStartedReferrers\"\n    | \"topConvertedReferrers\"\n    | \"topPointEarners\"",
         "resolved": "\"topConvertedReferrers\" | \"topPointEarners\" | \"topStartedReferrers\"",
         "references": {}
       },

package/dist/collection/components/sqm-leaderboard/useLeaderboard.js

@@ -1,46 +1,46 @@
 import { useLocale, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-const GET_LEADERBOARD = gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-    $limit: Int!
-  ) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows(limit: $limit) {
-        textValue(locale: $locale)
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
+const GET_LEADERBOARD = gql `
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+    $limit: Int!
+  ) {
+    userLeaderboard(type: $type, filter: $filter) {
+      dateModified
+      rows(limit: $limit) {
+        textValue(locale: $locale)
+        firstName
+        lastInitial
+        rank {
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
 `;
-const GET_RANK = gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        firstName
-        lastInitial
-        leaderboardRank(type: $type, filter: $filter) {
-          textValue(locale: $locale)
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
+const GET_RANK = gql `
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        firstName
+        lastInitial
+        leaderboardRank(type: $type, filter: $filter) {
+          textValue(locale: $locale)
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
 `;
 export function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;