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

package/dist/esm/{sqm-portal-footer-view-d6a43c4d.js → sqm-portal-footer-view-df66904d.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

package/dist/esm/sqm-portal-footer.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './stencil-hooks.module-acc8a613.js';
-import './global-7d4eb5e5.js';
+import './global-9bff4920.js';
 import './use-callback-7e0bfd3b.js';
 import './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import './JSS-96eeab98.js';
 import { g as getProps } from './utils-1d345130.js';
-import { P as PortalFooterView } from './sqm-portal-footer-view-d6a43c4d.js';
+import { P as PortalFooterView } from './sqm-portal-footer-view-df66904d.js';
 
 const PortalFooter = class {
   constructor(hostRef) {

package/dist/esm/{sqm-portal-forgot-password-view-fa088f83.js → sqm-portal-forgot-password-view-6b99a1ad.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
 import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/sqm-portal-forgot-password.entry.js

@@ -7,8 +7,8 @@ import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './JSS-96eeab98.js';
-import './sqm-text-span-view-7e61c95c.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-fa088f83.js';
+import './sqm-text-span-view-c8793d61.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-6b99a1ad.js';
 
 function usePortalForgotPassword(props) {
   var _a, _b, _c, _d;

package/dist/esm/{sqm-portal-profile-view-c34e781b.js → sqm-portal-profile-view-b96b89a3.js}

@@ -1,8 +1,8 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-dea0cdcc.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-46929235.js';
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;

package/dist/esm/sqm-portal-profile.entry.js

@@ -1,15 +1,15 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { k as useState, e as useEffect, m as h } from './stencil-hooks.module-acc8a613.js';
-import './global-7d4eb5e5.js';
+import './global-9bff4920.js';
 import './use-callback-7e0bfd3b.js';
 import { d as dist, i as ie, b as sn, q as qe, j as jn } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-96eeab98.js';
 import { g as getProps } from './utils-1d345130.js';
-import './sqm-text-span-view-7e61c95c.js';
-import './sqm-portal-container-view-dea0cdcc.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-c34e781b.js';
+import './sqm-text-span-view-c8793d61.js';
+import './sqm-portal-container-view-46929235.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-b96b89a3.js';
 
 const GET_USER = dist.gql `
   query {

package/dist/esm/{sqm-portal-reset-password-view-73e14282.js → sqm-portal-reset-password-view-2c0da51c.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
 import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/sqm-portal-reset-password.entry.js

@@ -7,8 +7,8 @@ import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './JSS-96eeab98.js';
-import './sqm-text-span-view-7e61c95c.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-73e14282.js';
+import './sqm-text-span-view-c8793d61.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-2c0da51c.js';
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;

package/dist/esm/{sqm-portal-section-view-88a80af9.js → sqm-portal-section-view-61dbb8a9.js}

@@ -2,6 +2,7 @@ import { h } from './index-17b4da69.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 function PortalSectionView(props) {
+  // Due to sole usage of props, not feasiable to move out of render function
   const style = {
     LabelContainer: {
       "margin-bottom": props.labelMargin === "none"

package/dist/esm/{sqm-portal-verify-email-view-cbf1cfdc.js → sqm-portal-verify-email-view-0d005914.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/sqm-portal-verify-email.entry.js

@@ -6,8 +6,8 @@ import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './JSS-96eeab98.js';
-import './sqm-text-span-view-7e61c95c.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-cbf1cfdc.js';
+import './sqm-text-span-view-c8793d61.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-0d005914.js';
 
 function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;

package/dist/esm/sqm-referral-table_11.entry.js

@@ -1,19 +1,19 @@
 import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-17b4da69.js';
 import { m as h, u as useReducer, i as useMemo, e as useEffect } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import './use-callback-7e0bfd3b.js';
 import { j as jn } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { G as GenericTableView } from './GenericTableView-6b7b537b.js';
+import { G as GenericTableView } from './GenericTableView-6924630b.js';
 import { a as useRequestRerender, u as useRerenderListener } from './re-render-544e9c59.js';
 import { u as useChildElements } from './useChildElements-db935587.js';
 import { l as luxon } from './luxon-f44215d9.js';
 import { u as useReferralTable, t as tryMethod } from './useReferralTable-15634a86.js';
 import { l as luxonLocale } from './utils-1d345130.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
 
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -169,11 +169,14 @@ const ReferralTable = class {
     this.moreLabel = "Next";
     /** @uiName Show Referred by user in table  */
     this.showReferrer = false;
-    /** @uiName Hide Column Labels (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 Small Breakpoint (Mobile View)  */
+    /** @uiName Mobile Breakpoint  */
     this.smBreakpoint = 634;
-    /** @uiName Medium Breakpoint (Mobile View)  */
+    /** @uiName Tablet Breakpoint  */
     this.mdBreakpoint = 899;
     h(this);
   }
@@ -189,7 +192,7 @@ const ReferralTable = class {
   }
 };
 function EmptySlot() {
-  return (h$1("slot", { name: "empty" }, h$1("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" })));
+  return (h$1("slot", { name: "empty" }, h$1("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Refer a friend to view the status of your referrals and rewards earned" })));
 }
 function LoadingSlot() {
   return (h$1("slot", { name: "loading" }, h$1(LoadingRow, null), h$1(LoadingRow, null), h$1(LoadingRow, null), h$1(LoadingRow, null)));
@@ -271,6 +274,8 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       referralData: [],
+      mdBreakpoint: 899,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,
@@ -483,7 +488,6 @@ const ReferralTableRewardsCell = class {
       }, {
         status: state,
       });
-      const rid = Math.random().toString(36).slice(2);
       return (h$1("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h$1("style", { type: "text/css" }, styleString), h$1("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h$1(TextSpanView, { type: "p" }, h$1("span", { class: sheet.classes.BoldText }, reward.prettyValue)), h$1("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h$1("sl-badge", { class: slBadgeType === "primary"
           ? sheet.classes.RedeemBadge
           : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
@@ -561,7 +565,16 @@ const ReferralTableRewardsColumn = class {
     return (h$1("sqm-referral-table-rewards-cell", { rewards: data.rewards }));
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.statusText,
+      this.statusLongText,
+      this.fuelTankText,
+      this.rewardReceivedText,
+      this.expiringText,
+      this.pendingForText,
+      this.hideDetails,
+    ]);
     return h$1(Host, { style: { display: "none" } });
   }
 };
@@ -622,7 +635,11 @@ const ReferralTableStatusColumn = class {
     return (h$1("sqm-referral-table-status-cell", { "status-text": statusText, converted: data.dateConverted ? true : false }));
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.convertedStatusText,
+      this.inProgressStatusText,
+    ]);
     return h$1(Host, { style: { display: "none" } });
   }
 };

package/dist/esm/sqm-rewards-table-customer-note-cell.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './stencil-hooks.module-acc8a613.js';
 import './extends-c31f1eff.js';
 import './JSS-96eeab98.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
 
 const RewardTableCustomerNoteCell = class {
   constructor(hostRef) {

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -1,13 +1,13 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { u as useReducer, e as useEffect, m as h$1, i as useMemo } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import './use-callback-7e0bfd3b.js';
 import { d as dist, i as ie, M, A as An, a as mn, j as jn } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { G as GenericTableView } from './GenericTableView-6b7b537b.js';
+import { G as GenericTableView } from './GenericTableView-6924630b.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-544e9c59.js';
 import { u as useChildElements } from './useChildElements-db935587.js';
 import { l as luxon } from './luxon-f44215d9.js';
@@ -122,7 +122,12 @@ const GET_REWARDS = dist.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 {
@@ -135,6 +140,7 @@ const GET_REWARDS = dist.gql `
             unit
             name
             dateGiven
+            dateCreated
             dateExpires
             dateCancelled
             dateRedeemed
@@ -343,11 +349,14 @@ const RewardsTable = class {
     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;
     h$1(this);
   }
@@ -363,7 +372,7 @@ const RewardsTable = class {
   }
 };
 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" })));
+  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": "Refer friends and complete tasks to view the details of your rewards" })));
 }
 function LoadingSlot() {
   return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
@@ -426,6 +435,8 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       referralData: [],
+      mdBreakpoint: 899,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,
@@ -574,13 +585,12 @@ const RewardTableRewardsCell = class {
       const singleReward = reward.prettyValueNumber === "1" ||
         (reward.dateRedeemed && reward.prettyAvailableNumber === "0");
       if (reward.type === "FUELTANK") {
-        return (h("div", { class: sheet.classes.Fueltank }, reward.prettyValue, 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" }))))));
+        return (h("div", { class: sheet.classes.Fueltank }, reward.prettyValue, 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" })))))));
       }
       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",
@@ -591,7 +601,9 @@ const RewardTableRewardsCell = class {
           id: "availableText",
           defaultMessage: this.availableText,
         }, {
-          availableAmount: reward.prettyAvailableValue,
+          availableAmount: reward.statuses.includes("PENDING")
+            ? reward.prettyAssignedCredit
+            : reward.prettyAvailableValue,
         })));
         const style = {
           Progress: {
@@ -611,7 +623,7 @@ const RewardTableRewardsCell = class {
           Container: {
             display: "inline-block",
             verticalAlign: "top",
-            width: "130px",
+            width: "150px",
             whiteSpace: "break",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -650,10 +662,6 @@ const RewardsTableColumn = class {
      * @uiName Remaining Amount Text
      */
     this.availableText = "{availableAmount} remaining";
-    /**
-     * @uiName Fuel Tank Text
-     */
-    this.fueltankText = "Your code:";
     /**
      * @uiName Copied Fuel Tank Text
      */
@@ -662,13 +670,18 @@ const RewardsTableColumn = class {
   }
   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" } });
   }
 };
@@ -777,6 +790,9 @@ const RewardTableUserColumn = class {
       this.deletedUser,
       this.anonymousUser,
       this.columnTitle,
+      this.rewardExchangeText,
+      this.referralText,
+      this.rewardSourceText,
     ]);
     return h(Host, { style: { display: "none" } });
   }
@@ -909,7 +925,7 @@ const RewardTableStatusColumn = class {
     return this.columnTitle;
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([this.columnTitle, this.statusText, this.expiryText]);
     return h(Host, { style: { display: "none" } });
   }
 };