@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

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

@@ -7,7 +7,7 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
 /**
- * @uiName Reward Exchange List
+ * @uiName Reward Exchange
  */
 export class SqmRewardExchangeList {
   constructor() {
@@ -71,9 +71,9 @@ export class SqmRewardExchangeList {
     /**
      * Shown when a user copies a fuel tank code
      *
-     * @uiName Tool Tip Text
+     * @uiName Tooltip Text
      */
-    this.tooltiptext = "Copied";
+    this.tooltipText = "Copied";
     /**
      * @uiName Done Text
      */
@@ -103,7 +103,9 @@ export class SqmRewardExchangeList {
      */
     this.promoCode = "Promo Code";
     /**
-     * @undocumented Number of Skeleton Cards
+     * Set the number of placeholder cards to be shown in loading state.
+     *
+     * @undocumented Loading Cards
      */
     this.skeletonCardNum = 8;
     /**
@@ -436,7 +438,7 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
     },
-    "tooltiptext": {
+    "tooltipText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -448,12 +450,12 @@ export class SqmRewardExchangeList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tool Tip Text",
+            "text": "Tooltip Text",
             "name": "uiName"
           }],
         "text": "Shown when a user copies a fuel tank code"
       },
-      "attribute": "tooltiptext",
+      "attribute": "tooltip-text",
       "reflect": false,
       "defaultValue": "\"Copied\""
     },
@@ -616,10 +618,10 @@ export class SqmRewardExchangeList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Number of Skeleton Cards",
+            "text": "Loading Cards",
             "name": "undocumented"
           }],
-        "text": ""
+        "text": "Set the number of placeholder cards to be shown in loading state."
       },
       "attribute": "skeleton-card-num",
       "reflect": false,

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -14,7 +14,7 @@ const rewardsData = {
   id: "61c100117a82a376d8804166",
   type: "CREDIT",
   value: 19,
-  unit: "TESTUNIT",
+  unit: "Points",
   name: null,
   dateGiven: 1640038417468,
   meta: { message: "***CUSTOMER NOTE MESSAGE***" },
@@ -46,7 +46,7 @@ export const RewardsCellCreditSingle = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
 };
 export const RewardsCellCreditFull = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "{availableAmount} remaining" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -55,16 +55,16 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditPartial = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "{availableAmount} remaining" }));
 };
 export const RewardsCellCreditCancelled = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...cancelled }, redeemedText: "0 Points redeemed" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...cancelled }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 export const RewardsCellCreditExpired = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...expired }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 export const RewardsCellCreditPending = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...pending }, availableText: "9 Points redeemed" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...pending }, availableText: "{availableAmount} remaining" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -74,7 +74,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditRedeemed = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "{availableAmount} remaining" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Point",
@@ -86,7 +86,7 @@ const longName = {
 };
 export const RewardsCellCreditLong = () => {
   return (h("div", { style: { maxWidth: "222px" } },
-    h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web remaining" })));
+    h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "{availableAmount} remaining" })));
 };
 export const RewardsCellNonCredit = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: {
@@ -101,7 +101,7 @@ export const RewardsCellFueltank = () => {
       type: "FUELTANK",
       prettyValue: "Fueltank Reward",
       fuelTankCode: "AFUELTANKCODE",
-    }, fueltankText: "Your code:", copyText: "Copied" }));
+    }, copyText: "Copied" }));
 };
 export const RewardsCellFueltankLong = () => {
   return (h("div", { style: { maxWidth: "222px" } },
@@ -110,7 +110,7 @@ export const RewardsCellFueltankLong = () => {
         type: "FUELTANK",
         prettyValue: "Long Fueltank Reward",
         fuelTankCode: "AFUELTANKCODE123456789123456789123456789123456789",
-      }, fueltankText: "Your code:", copyText: "Copied" })));
+      }, copyText: "Copied" })));
 };
 export const SourceCellManual = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js

@@ -86,17 +86,16 @@ export class RewardTableRewardsCell {
       if (reward.type === "FUELTANK") {
         return (h("div", { class: sheet.classes.Fueltank },
           reward.prettyValue,
-          h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) },
+          reward.fuelTankCode && (h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) },
             h("sl-tooltip", { trigger: "click", placement: "top", distance: 5, skidding: 11, content: this.copyText, "onSl-show": (e) => setTimeout(() => e.path[0].hide(), 1000) },
               h("span", { class: "text" }, reward.fuelTankCode),
               h("span", { class: "icon" },
-                h("sl-icon", { name: "files" }))))));
+                h("sl-icon", { name: "files" })))))));
       }
       if (reward.type === "CREDIT" && !singleReward) {
-        const progress = Math.round(((parseFloat(reward.prettyValueNumber) -
-          parseFloat(reward.prettyRedeemedNumber)) /
-          parseFloat(reward.prettyValueNumber)) *
-          100);
+        const remainingValue = parseFloat(reward.prettyValueNumber) -
+          parseFloat(reward.prettyRedeemedNumber);
+        const progress = Math.round((remainingValue / parseFloat(reward.prettyValueNumber)) * 100);
         const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
           reward.statuses.includes("CANCELLED") ? (h("div", null, intl.formatMessage({
           id: "redeemedText",
@@ -107,7 +106,9 @@ export class RewardTableRewardsCell {
           id: "availableText",
           defaultMessage: this.availableText,
         }, {
-          availableAmount: reward.prettyAvailableValue,
+          availableAmount: reward.statuses.includes("PENDING")
+            ? reward.prettyAssignedCredit
+            : reward.prettyAvailableValue,
         })));
         const style = {
           Progress: {
@@ -127,7 +128,7 @@ export class RewardTableRewardsCell {
           Container: {
             display: "inline-block",
             verticalAlign: "top",
-            width: "130px",
+            width: "150px",
             whiteSpace: "break",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -214,23 +215,6 @@ export class RewardTableRewardsCell {
       "attribute": "available-text",
       "reflect": false
     },
-    "fueltankText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "fueltank-text",
-      "reflect": false
-    },
     "copyText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -18,10 +18,6 @@ export class RewardsTableColumn {
      * @uiName Remaining Amount Text
      */
     this.availableText = "{availableAmount} remaining";
-    /**
-     * @uiName Fuel Tank Text
-     */
-    this.fueltankText = "Your code:";
     /**
      * @uiName Copied Fuel Tank Text
      */
@@ -30,13 +26,18 @@ export class RewardsTableColumn {
   }
   disconnectedCallback() { }
   async renderCell(data, locale) {
-    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, fueltankText: this.fueltankText, locale: locale }));
+    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.redeemedText,
+      this.availableText,
+      this.copyText,
+    ]);
     return h(Host, { style: { display: "none" } });
   }
   static get is() { return "sqm-rewards-table-reward-column"; }
@@ -105,27 +106,6 @@ export class RewardsTableColumn {
       "reflect": false,
       "defaultValue": "\"{availableAmount} remaining\""
     },
-    "fueltankText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Fuel Tank Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "fueltank-text",
-      "reflect": false,
-      "defaultValue": "\"Your code:\""
-    },
     "copyText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -46,6 +46,9 @@ export class RewardTableUserColumn {
       this.deletedUser,
       this.anonymousUser,
       this.columnTitle,
+      this.rewardExchangeText,
+      this.referralText,
+      this.rewardSourceText,
     ]);
     return h(Host, { style: { display: "none" } });
   }

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -29,7 +29,7 @@ export class RewardTableStatusColumn {
     return this.columnTitle;
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([this.columnTitle, this.statusText, this.expiryText]);
     return h(Host, { style: { display: "none" } });
   }
   static get is() { return "sqm-rewards-table-status-column"; }

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -9,7 +9,7 @@ import { useChildElements } from "../../tables/useChildElements";
 import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
- * @uiName Rewards Table
+ * @uiName Reward Table
  */
 export class RewardsTable {
   constructor() {
@@ -21,11 +21,14 @@ export class RewardsTable {
     this.prevLabel = "Prev";
     /** @uiName View More button text  */
     this.moreLabel = "Next";
-    /** @uiName Hide Columns (Mobile View)  */
+    /**
+     * Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3
+     *
+     *  @uiName Mobile Hidden Columns  */
     this.hiddenColumns = "0";
-    /** @uiName Hide Columns (Mobile View)  */
+    /** @uiName Mobile Breakpoint  */
     this.smBreakpoint = 599;
-    /** @uiName Hide Columns (Mobile View)  */
+    /** @uiName Tablet Breakpoint  */
     this.mdBreakpoint = 899;
     withHooks(this);
   }
@@ -158,10 +161,10 @@ export class RewardsTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (Mobile View)",
+            "text": "Mobile Hidden Columns",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3"
       },
       "attribute": "hidden-columns",
       "reflect": false,
@@ -179,7 +182,7 @@ export class RewardsTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (Mobile View)",
+            "text": "Mobile Breakpoint",
             "name": "uiName"
           }],
         "text": ""
@@ -200,7 +203,7 @@ export class RewardsTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (Mobile View)",
+            "text": "Tablet Breakpoint",
             "name": "uiName"
           }],
         "text": ""
@@ -243,7 +246,7 @@ export class RewardsTable {
 }
 function EmptySlot() {
   return (h("slot", { name: "empty" },
-    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" })));
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
 }
 function LoadingSlot() {
   return (h("slot", { name: "loading" },
@@ -312,6 +315,8 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       referralData: [],
+      mdBreakpoint: 899,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -16,7 +16,12 @@ const GET_REWARDS = gql `
     viewer {
       ... on User {
         id
-        rewards(limit: $limit, offset: $offset, filter: $rewardFilter) {
+        rewards(
+          limit: $limit
+          offset: $offset
+          filter: $rewardFilter
+          sortBy: { field: "dateCreated", order: DESC }
+        ) {
           totalCount
           count
           data {
@@ -29,6 +34,7 @@ const GET_REWARDS = gql `
             unit
             name
             dateGiven
+            dateCreated
             dateExpires
             dateCancelled
             dateRedeemed

package/dist/collection/components/sqm-scroll/Scroll.stories.js

@@ -4,7 +4,7 @@ export default {
 };
 export const ScrollTag = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll" }),
+    h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll", "scroll-animation": "smooth" }),
     h("div", { style: { position: "absolute", bottom: "0" } },
       h("sqm-text", { slot: "label" },
         h("h3", null, "Earn more rewards"),
@@ -12,7 +12,15 @@ export const ScrollTag = () => {
 };
 export const ScrollId = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id" }),
+    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "smooth" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label", id: "my-id" },
+        h("h3", null, "Earn more rewards"),
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const ScrollAutoAnimation = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "auto" }),
     h("div", { style: { position: "absolute", bottom: "0" } },
       h("sqm-text", { slot: "label", id: "my-id" },
         h("h3", null, "Earn more rewards"),
@@ -20,7 +28,7 @@ export const ScrollId = () => {
 };
 export const ScrollTabGroup = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3" }),
+    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3", "scroll-animation": "smooth" }),
     h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
               <sqm-tabs>
               <sqm-tab header="Leaderboard">
@@ -109,12 +117,9 @@ export const ShoelaceProps = () => {
     h("br", null),
     " ",
     h("hr", null),
-    h("h3", null, "Caret:"),
-    h("sqm-scroll", { caret: true }, "Button"),
-    h("br", null),
-    " ",
-    h("hr", null),
     h("h3", null, "Icon:"),
+    h("sqm-scroll", { "button-type": "primary", iconName: "facebook" }, "Icon Name"),
+    h("br", null),
     h("sqm-scroll", { iconName: "gear", iconSlot: "prefix" }, "Icon Slot Prefix"),
     h("br", null),
     h("sqm-scroll", { iconName: "gear", iconSlot: "suffix" }, "Icon Slot Suffix"),
@@ -131,22 +136,8 @@ export const ShoelaceProps = () => {
     h("br", null),
     " ",
     h("hr", null),
-    h("h3", null, "Disabled:"),
-    h("sqm-scroll", { disabled: true }, "Button"),
-    h("br", null),
-    " ",
-    h("hr", null),
-    h("h3", null, "Link:"),
-    h("sqm-scroll", { href: "https://example.com/" }, "Link"),
-    h("br", null),
-    h("sqm-scroll", { href: "https://example.com/", target: "_self" }, "Same Window"),
-    h("br", null),
-    h("sqm-scroll", { href: "/assets/images/wordmark.svg", download: "shoelace.svg" }, "Download"),
-    h("br", null),
-    " ",
-    h("hr", null),
     h("h3", null, "Mobile Friendly:"),
-    h("sqm-scroll", { "mobile-friendly": true }, "Button"),
+    h("sqm-scroll", { mobile: true }, "Button"),
     h("br", null),
     " ",
     h("hr", null)));