@saasquatch/mint-components 1.16.0-8 → 2.0.0-0

package/dist/cjs/{useVerificationEmail-95a82767.js → useVerificationEmail-9dd3997a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {
@@ -59,8 +59,8 @@ const SubmitImpactCodeMutation = index_module.dist.gql `
 // ! is done before calling any mutations
 function useVerificationEmail() {
   const userIdentity = index_module.J();
-  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
-  const [hasEmails, setHasEmails] = stencilHooks_module.useState({
+  const [verificationEmail, setVerificationEmail] = domContextHooks_module.useState(null);
+  const [hasEmails, setHasEmails] = domContextHooks_module.useState({
     participant: false,
     impact: false,
   });
@@ -75,7 +75,7 @@ function useVerificationEmail() {
   const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.$e(SubmitImpactCodeMutation);
   const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
   const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
-  const [initialized, setInitialized] = stencilHooks_module.useState(false);
+  const [initialized, setInitialized] = domContextHooks_module.useState(false);
   const initialise = async () => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
@@ -152,7 +152,7 @@ function useVerificationEmail() {
       return result;
     }
   };
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!initialized)
       initialise();
   }, []);

package/dist/cjs/{utilities-78f5e169.js → utilities-9a0c5e91.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
-  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
+  const [width, setWidth] = domContextHooks_module.useState(window.innerWidth);
   const handleWindowResize = index_module.useCallback(() => setWidth(window.innerWidth), []);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     window.addEventListener("resize", handleWindowResize);
     return () => window.removeEventListener("resize", handleWindowResize);
   }, []);

package/dist/cjs/{utils-6847bc06.js → utils-0d3ac0fb.js}

@@ -39,6 +39,10 @@ function sanitizeUrlPath(path) {
   cleanUrl.hash = url.hash;
   return cleanUrl;
 }
+function capitalizeFirstLetter(word) {
+  return word[0].toUpperCase() + word.slice(1);
+}
+console.log(capitalizeFirstLetter("warning"));
 
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;

package/dist/cjs/utils-83d125fa.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-a43a63b4.js');
+const global = require('./global-8bba5b3a.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  Container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+  },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const LoadingView = () => {
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      index.h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
+};
+
+function validTaxDocument(requiredType) {
+  const validTypes = ["W9", "W8BENE", "W8BEN"];
+  if (validTypes.includes(requiredType))
+    return true;
+  return false;
+}
+const objectIsFull = (obj) => {
+  return !Object.keys(obj).find((k) => obj[k] == undefined);
+};
+const taxTypeToName = (taxType) => {
+  switch (taxType) {
+    case "W9":
+      return "W-9";
+    case "W8BEN":
+    case "W8BENE":
+      return "W-8";
+    default:
+      return "";
+  }
+};
+function validateBillingField(regex, value) {
+  const trimmed = value.trim();
+  const idx = trimmed.search(regex);
+  return idx > -1;
+}
+const formatErrorMessage = (fieldName, errorMessage) => {
+  return global.intl.formatMessage({
+    id: fieldName,
+    defaultMessage: errorMessage,
+  }, {
+    fieldName,
+  });
+};
+function getCountryObj({ countryCode, locale, }) {
+  // @ts-ignore DisplayNames not in Intl type
+  const displayName = new Intl.DisplayNames([locale], {
+    type: "region",
+  }).of(countryCode);
+  return {
+    countryCode,
+    displayName,
+  };
+}
+
+exports.LoadingView = LoadingView;
+exports.formatErrorMessage = formatErrorMessage;
+exports.getCountryObj = getCountryObj;
+exports.objectIsFull = objectIsFull;
+exports.taxTypeToName = taxTypeToName;
+exports.validTaxDocument = validTaxDocument;
+exports.validateBillingField = validateBillingField;

package/dist/collection/collection-manifest.json

@@ -12,7 +12,6 @@
     "./components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js",
     "./components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js",
     "./components/raisins-plop-target/raisins-plop-target.js",
-    "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-brand/sqm-brand.js",
     "./components/sqm-card-feed/sqm-card-feed.js",
@@ -109,6 +108,7 @@
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
+    "./components/sqm-stencilbook/BrandSelector.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
     "./components/sqm-tab/sqm-tab.js",
     "./components/sqm-table-cell/sqm-table-cell.js",

package/dist/collection/components/sqm-big-stat/BigStat.stories.js

@@ -74,6 +74,10 @@ export const InvalidStatValue = () => {
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
+export const CustomStyles = () => {
+  return (h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+    h("p", null, "Giftcards Earned")));
+};
 export const MultipleStats = () => {
   return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
     h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
@@ -86,3 +90,12 @@ export const MultipleStats = () => {
       h("sqm-text", null,
         h("p", null, "Points Balance")))));
 };
+export const MultipleStatsWithCustomBranding = () => {
+  return (h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Giftcards Earned")),
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Referrals")),
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Points balance"))));
+};

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props) {
-  const { statvalue, flexReverse, alignment } = props;
-  // Dependent on props, not feasiable to move out
+  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
+  // Dependent on props, not feasible to move out
   const style = {
     Container: {
       display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
+      // height: "inherit",
+      // "justify-content": "space-between",
       "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
       "align-items": `${alignment === "left"
         ? "flex-start"
@@ -16,15 +16,22 @@ export function BigStatView(props) {
           : "center"}`,
     },
     Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
+      "font-size": statFontSize
+        ? `${statFontSize}px`
+        : "var(--sl-font-size-xx-large)",
       "text-align": alignment,
+      color: statTextColor || "var(--sqm-text)",
+      lineHeight: "35px",
+      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
     },
     Description: {
-      "font-size": "var(--sl-font-size-small)",
+      "font-size": descriptionFontSize
+        ? `${descriptionFontSize}px`
+        : "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
+      color: descriptionTextColor || "var(--sqm-text)",
       "text-align": alignment,
+      lineHeight: "20px",
     },
   };
   const sheet = createStyleSheet(style);

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -1,18 +1,22 @@
-import { Component, h, Prop, State } from "@stencil/core";
+import { isDemo, useHost } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
 import { BigStatView } from "./sqm-big-stat-view";
 import { useBigStat } from "./useBigStat";
 import { useDemoBigStat } from "./useDemoBigStat";
-import { isDemo, useHost } from "@saasquatch/component-boilerplate";
 /**
  *
  * @uiName User Stat
+ * @validParents ["sqm-stat-container"]
+ * @validChildren ["p","div","h1","h2","h3","h4","h5","span"]
  * @slots [{"name":"","title":"Stat Text"}]
+ * @uiOrder ["statType", "programId", "*"]
  * @slotEditor richText
  * @exampleGroup Statistics
  * @example Points Balance - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><p>Points Balance</p></sqm-big-stat>
  * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat>
  * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat>
+ * @example Other Stat - <sqm-big-stat flex-reverse="true" alignment="left" stat-type=""><p>Label</p></sqm-big-stat>
  */
 export class BigStat {
   constructor() {
@@ -21,8 +25,19 @@ export class BigStat {
      *
      * @uiName Flex reverse
      * @default
+     * @uiGroup Additional Settings
      */
     this.flexReverse = false;
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     * @uiGroup Additional Settings
+     */
+    this.alignment = "center";
     this.ignored = true;
     withHooks(this);
   }
@@ -84,6 +99,9 @@ export class BigStat {
           }, {
             "text": undefined,
             "name": "default"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
           }],
         "text": "Controls the order of the stat value & description column"
       },
@@ -114,11 +132,15 @@ export class BigStat {
           }, {
             "text": "[\"Left\", \"Right\", \"Center\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
           }],
         "text": "Controls the alignment of the flexbox"
       },
       "attribute": "alignment",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"center\""
     },
     "programId": {
       "type": "string",
@@ -137,18 +159,163 @@ export class BigStat {
           }, {
             "text": "programSelector",
             "name": "uiWidget"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
           }],
         "text": "The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified."
       },
       "attribute": "program-id",
       "reflect": false
     },
+    "statTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the stat text"
+      },
+      "attribute": "stat-text-color",
+      "reflect": false
+    },
+    "statFontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat font size",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
+          }],
+        "text": "Font size of the stat text in pixels"
+      },
+      "attribute": "stat-font-size",
+      "reflect": false
+    },
+    "statFontWeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat font weight",
+            "name": "uiName"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
+          }, {
+            "text": "[100, 200, 300, 400, 500, 600, 700, 800, 900]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Font weight of the stat text"
+      },
+      "attribute": "stat-font-weight",
+      "reflect": false
+    },
+    "descriptionTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the description text"
+      },
+      "attribute": "description-text-color",
+      "reflect": false
+    },
+    "descriptionFontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description font size",
+            "name": "uiName"
+          }, {
+            "text": "Additional Settings",
+            "name": "uiGroup"
+          }],
+        "text": "Font size of the description text in pixels"
+      },
+      "attribute": "description-font-size",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; }",
+        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; statTextColor?: string; statFontSize?: number; descriptionTextColor?: string; descriptionFontSize?: number; statFontWeight?: number; }",
         "references": {
           "DemoData": {
             "location": "import",