@saasquatch/mint-components 1.15.0-78 → 1.15.0-79

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

@@ -542,6 +542,92 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
     };
   });
 };
+const rewardsExpiredQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyExpiredCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
+const rewardsCancelledQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyCancelledCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(gql `
       query (
@@ -747,6 +833,14 @@ export const queries = {
     label: "Rewards Pending",
     query: rewardsPendingQuery,
   },
+  rewardsExpired: {
+    label: "Rewards Expired",
+    query: rewardsExpiredQuery,
+  },
+  rewardsCancelled: {
+    label: "Rewards Cancelled",
+    query: rewardsCancelledQuery,
+  },
   rewardsRedeemed: {
     label: "Rewards Paid",
     query: rewardsRedeemedQuery,
@@ -843,6 +937,14 @@ export const StatPaths = [
     name: "rewardsAssigned",
     route: "/(rewardsAssigned)/:statType/:unit/:global?",
   },
+  {
+    name: "rewardsExpired",
+    route: "/(rewardsExpired)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsCancelled",
+    route: "/(rewardsCancelled)/:statType/:unit/:global?",
+  },
   {
     name: "rewardsPending",
     route: "/(rewardsPending)/:statType/:unit/:global?",

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

@@ -123,7 +123,6 @@ export function HeroView(props) {
   
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  console.log("column to hide in mobile is ", states.columnToHideInMobile);
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,

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

@@ -3,7 +3,6 @@ import { createStyleSheet } from "../../styling/JSS";
 export function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
-  console.log("buttonType is ", props.buttonType);
   // Dependent on props, not feasiable to move out
   const style = {
     Container: {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -6,6 +6,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
+import { parseStates } from "../../utils/parseStates";
 /**
  * @uiName Reward Exchange
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
@@ -147,6 +148,13 @@ export class SqmRewardExchangeList {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
+    /**
+     * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount",  }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -711,6 +719,36 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Cost to Redeem\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{ \"title\": \"Choose reward\", \"props\": { \"redeemStage\": \"chooseReward\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Reward details\", \"props\": { \"redeemStage\": \"chooseAmount\",  }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"redeemStage\": \"confirmation\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Exchange successful\", \"props\": { \"redeemStage\": \"success\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -751,6 +789,10 @@ function EmptySlot() {
     h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "reward-exchange-list"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return deepmerge({
     states: {
       content: {
@@ -780,5 +822,5 @@ function useRewardExchangeListDemo(props) {
     refs: {
       canvasRef: {},
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,7 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card"]
  * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"]
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -108,8 +108,8 @@ export class WidgetVerification {
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
     /**
-     * @componentState { "title": "Email Step", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"] }
-     * @componentState { "title": "Code Step", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
+     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"] }
+     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -534,10 +534,10 @@ export class WidgetVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ \"title\": \"Email Step\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-email-verification\"] }",
+            "text": "{ \"title\": \"Step 1: Enter email\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-email-verification\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Code Step\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"] }",
+            "text": "{ \"title\": \"Step 2: Enter code\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"] }",
             "name": "componentState"
           }],
         "text": ""

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js

@@ -1011,10 +1011,10 @@ export class TaxAndCashMonolith {
     this.supportLink = "support team";
     /**
      * @uiName Monolith States
-     * @componentState { "title": "Step 1", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"] }
-     * @componentState { "title": "Step 2", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"] }
-     * @componentState { "title": "Step 3", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"] }
-     * @componentState { "title": "Step 4", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"] }
+     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"] }
+     * @componentState { "title": "Step 2: Indirect tax ", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"] }
+     * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"] }
+     * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"] }
      * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"] }
      */
     this.stateController = "{}";
@@ -5246,16 +5246,16 @@ export class TaxAndCashMonolith {
             "text": "Monolith States",
             "name": "uiName"
           }, {
-            "text": "{ \"title\": \"Step 1\", \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"] }",
+            "text": "{ \"title\": \"Step 1: Personal information\", \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 2\", \"props\": { \"step\": \"/2\" }, \"dependencies\": [\"sqm-indirect-tax-form\"] }",
+            "text": "{ \"title\": \"Step 2: Indirect tax \", \"props\": { \"step\": \"/2\" }, \"dependencies\": [\"sqm-indirect-tax-form\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 3\", \"props\": { \"step\": \"/3\" }, \"dependencies\": [\"sqm-docusign-form\"] }",
+            "text": "{ \"title\": \"Step 3: Tax form\", \"props\": { \"step\": \"/3\" }, \"dependencies\": [\"sqm-docusign-form\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 4\", \"props\": { \"step\": \"/4\" }, \"dependencies\": [\"sqm-banking-info-form\"] }",
+            "text": "{ \"title\": \"Step 4: Payment method\", \"props\": { \"step\": \"/4\" }, \"dependencies\": [\"sqm-banking-info-form\"] }",
             "name": "componentState"
           }, {
             "text": "{ \"title\": \"Dashboard\", \"props\": { \"step\": \"/dashboard\" }, \"dependencies\": [\"sqm-tax-and-cash-dashboard\"] }",

package/dist/esm/{ShadowViewAddon-6635eef4.js → ShadowViewAddon-3c2957fe.js}

@@ -842,6 +842,92 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
     };
   });
 };
+const rewardsExpiredQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyExpiredCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
+const rewardsCancelledQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyCancelledCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
+  });
+};
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(dist.gql `
       query (
@@ -1047,6 +1133,14 @@ const queries = {
     label: "Rewards Pending",
     query: rewardsPendingQuery,
   },
+  rewardsExpired: {
+    label: "Rewards Expired",
+    query: rewardsExpiredQuery,
+  },
+  rewardsCancelled: {
+    label: "Rewards Cancelled",
+    query: rewardsCancelledQuery,
+  },
   rewardsRedeemed: {
     label: "Rewards Paid",
     query: rewardsRedeemedQuery,
@@ -1143,6 +1237,14 @@ const StatPaths = [
     name: "rewardsAssigned",
     route: "/(rewardsAssigned)/:statType/:unit/:global?",
   },
+  {
+    name: "rewardsExpired",
+    route: "/(rewardsExpired)/:statType/:unit/:global?",
+  },
+  {
+    name: "rewardsCancelled",
+    route: "/(rewardsCancelled)/:statType/:unit/:global?",
+  },
   {
     name: "rewardsPending",
     route: "/(rewardsPending)/:statType/:unit/:global?",
@@ -2573,7 +2675,6 @@ function HeroView(props) {
   
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  console.log("column to hide in mobile is ", states.columnToHideInMobile);
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,

package/dist/esm/{extractProps-54064fb0.js → extractProps-ae1afbb3.js}

@@ -1,16 +1,3 @@
-function parseStates(states) {
-  if (typeof states === "string") {
-    try {
-      return JSON.parse(states);
-    }
-    catch (e) {
-      return undefined;
-    }
-  }
-  if (typeof states === "object")
-    return states;
-}
-
 /**
  * Util function for getting just the props with a certain prefix.
  * @param props Text props on stencil component
@@ -29,4 +16,4 @@ function extractProps(props, prefix) {
   return formattedProps;
 }
 
-export { extractProps as e, parseStates as p };
+export { extractProps as e };