@saasquatch/mint-components 1.5.0-99 → 1.5.0

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

@@ -7,15 +7,11 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
 /**
- * @uiName Reward Exchange List
+ * @uiName Reward Exchange
  */
 export class SqmRewardExchangeList {
   constructor() {
     this.ignored = true;
-    /**
-     * @uiName Exchange button text
-     */
-    this.buttonText = "Exchange Rewards";
     /**
      * @uiName Exchange button text
      */
@@ -49,6 +45,7 @@ export class SqmRewardExchangeList {
      */
     this.continueText = "Continue";
     /**
+    * Displayed on the reward selection page.
      * @uiName Continue to Confirmation Button Text
      */
     this.continueToConfirmationText = "Continue to confirmation";
@@ -57,23 +54,26 @@ export class SqmRewardExchangeList {
      */
     this.redeemText = "Redeem";
     /**
+    * Displayed as the header for the confirmation page.
      * @uiName Confirmation Title Text
      */
     this.redeemTitle = "Confirm and redeem";
     /**
+    * Displayed on the success screen when a user successfully exchanges for a reward.
      * @uiName Redemption Success Message
      */
     this.redemptionSuccessText = "Redeemed {sourceValue} for {destinationValue}";
     /**
+    * Displayed on the reward exchange cards.
      * @uiName Reward Exchange Amount Text
      */
     this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
     /**
      * 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
      */
@@ -83,10 +83,12 @@ export class SqmRewardExchangeList {
      */
     this.selectText = "Select amount to receive";
     /**
+    * Shown if an error occurs when loading the reward exchange.
      * @uiName Reward List Error Message
      */
     this.queryError = "Unable to load reward exchange list. Please try again";
     /**
+    * Shown if an error occurs during the reward exchange.
      * @uiName Redemption Error Message
      */
     this.redemptionError = "An error occured trying to redeem this reward. Please try again";
@@ -94,12 +96,18 @@ export class SqmRewardExchangeList {
      * @uiName Not Enough Available Error Message
      */
     this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
+    /**
+     * @uiName Reward Redeemed Text
+     */
+    this.rewardRedeemedText = "Reward redeemed";
     /**
      * @uiName Promo Code Text
      */
     this.promoCode = "Promo Code";
     /**
-     * @uiName Number of Skeleton Cards
+     * Set the number of placeholder cards to be shown in loading state.
+     *
+     * @undocumented Loading Cards
      */
     this.skeletonCardNum = 8;
     /**
@@ -124,18 +132,13 @@ export class SqmRewardExchangeList {
   }
   disconnectedCallback() { }
   render() {
-    // const missingProps = getMissingProps([
-    //   {
-    //     attribute: "listType",
-    //     value: this.listType,
-    //   },
-    // ]);
-    // if (missingProps) {
-    //   return <RequiredPropsError missingProps={missingProps} />;
-    // }
+    const props = {
+      ...getProps(this),
+      empty: h(EmptySlot, null),
+    };
     const { states, data, callbacks, refs } = isDemo()
-      ? useRewardExchangeListDemo(getProps(this))
-      : useRewardExchangeList(getProps(this));
+      ? useRewardExchangeListDemo(props)
+      : useRewardExchangeList(props);
     return (h(Host, { style: { display: "contents" } },
       h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
   }
@@ -143,27 +146,6 @@ export class SqmRewardExchangeList {
   static get encapsulation() { return "shadow"; }
   static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Exchange button text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "\"Exchange Rewards\""
-    },
     "notAvailableError": {
       "type": "string",
       "mutable": false,
@@ -347,7 +329,7 @@ export class SqmRewardExchangeList {
             "text": "Continue to Confirmation Button Text",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed on the reward selection page."
       },
       "attribute": "continue-to-confirmation-text",
       "reflect": false,
@@ -389,7 +371,7 @@ export class SqmRewardExchangeList {
             "text": "Confirmation Title Text",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed as the header for the confirmation page."
       },
       "attribute": "redeem-title",
       "reflect": false,
@@ -410,7 +392,7 @@ export class SqmRewardExchangeList {
             "text": "Redemption Success Message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed on the success screen when a user successfully exchanges for a reward."
       },
       "attribute": "redemption-success-text",
       "reflect": false,
@@ -431,13 +413,13 @@ export class SqmRewardExchangeList {
             "text": "Reward Exchange Amount Text",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed on the reward exchange cards."
       },
       "attribute": "source-amount-message",
       "reflect": false,
       "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
     },
-    "tooltiptext": {
+    "tooltipText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -449,12 +431,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\""
     },
@@ -515,7 +497,7 @@ export class SqmRewardExchangeList {
             "text": "Reward List Error Message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Shown if an error occurs when loading the reward exchange."
       },
       "attribute": "query-error",
       "reflect": false,
@@ -536,7 +518,7 @@ export class SqmRewardExchangeList {
             "text": "Redemption Error Message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Shown if an error occurs during the reward exchange."
       },
       "attribute": "redemption-error",
       "reflect": false,
@@ -563,6 +545,27 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
     },
+    "rewardRedeemedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Redeemed Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-redeemed-text",
+      "reflect": false,
+      "defaultValue": "\"Reward redeemed\""
+    },
     "promoCode": {
       "type": "string",
       "mutable": false,
@@ -596,10 +599,10 @@ export class SqmRewardExchangeList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Number of Skeleton Cards",
-            "name": "uiName"
+            "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,
@@ -673,7 +676,7 @@ export class SqmRewardExchangeList {
       "mutable": false,
       "complexType": {
         "original": "DemoData<RewardExchangeViewProps>",
-        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; queryError?: boolean; loading: boolean; open: boolean; content: { text: any; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; refs?: { canvasRef: any; }; }",
+        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError: boolean; queryError: boolean; loading: boolean; open: boolean; noExchangeOptions: boolean; content: { text: TextContent; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; refs?: { canvasRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -703,6 +706,10 @@ export class SqmRewardExchangeList {
     "ignored": {}
   }; }
 }
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    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) {
   return deepmerge({
     states: {
@@ -712,9 +719,13 @@ function useRewardExchangeListDemo(props) {
       redeemStage: "chooseReward",
       amount: 0,
       selectedStep: undefined,
+      selectedItem: undefined,
+      open: false,
       exchangeError: false,
       queryError: false,
       loading: false,
+      noExchangeOptions: false,
+      empty: EmptySlot(),
     },
     data: {
       shareCode: "SHARECODE123",

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

@@ -56,7 +56,7 @@ const EXCHANGE = gql `
   }
 `;
 export function useRewardExchangeList(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const [exchangeState, setExchangeState] = useReducer((state, next) => ({
     ...state,
     ...next,
@@ -85,10 +85,9 @@ export function useRewardExchangeList(props) {
   useEffect(() => {
     if (!canvasRef.current)
       return;
-    console.log("confetti!");
     const canvas = canvasRef.current;
     canvas.confetti =
-      canvas.confetti || confetti.create(canvas, { resize: true, });
+      canvas.confetti || confetti.create(canvas, { resize: true });
     canvas.confetti();
   }, [canvasRef.current]);
   const { refresh } = useRefreshDispatcher();
@@ -186,10 +185,11 @@ export function useRewardExchangeList(props) {
       queryError: !!queryError,
       loading: loading || exchangeLoading,
       open,
+      noExchangeOptions: ((_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems.totalCount) === 0,
     },
     data: {
-      exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
-      fuelTankCode: (_d = (_c = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _c === void 0 ? void 0 : _c.reward) === null || _d === void 0 ? void 0 : _d.fuelTankCode,
+      exchangeList: (_c = (_b = data === null || data === void 0 ? void 0 : data.viewer) === null || _b === void 0 ? void 0 : _b.visibleRewardExchangeItems) === null || _c === void 0 ? void 0 : _c.data,
+      fuelTankCode: (_e = (_d = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _d === void 0 ? void 0 : _d.reward) === null || _e === void 0 ? void 0 : _e.fuelTankCode,
     },
     callbacks: {
       exchangeReward,

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
+import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, RewardsCellFueltank, RewardsCellFueltankLong, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellPending, StatusCellPendingUnhandled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
 import scenario from "./rewards-table.feature";
 export default {
   title: "Components/Rewards Table",
@@ -24,15 +24,7 @@ const loadingElement = (h("div", { slot: "loading", style: { display: "contents"
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
       h("sl-skeleton", null)))));
-const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } },
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
-      h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
-        h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", "max-width": "100px" }),
-        h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
-          h("sqm-text", { slot: "label" },
-            h("h3", null, "View your rewards")),
-          h("sqm-text", { slot: "content" }, "See all the rewards you have earned from referring friends and completing tasks")))))));
+const emptyElement = (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" }));
 const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
   states: {
     hasPrev: false,
@@ -51,7 +43,7 @@ const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev",
       moreLabel: next,
     },
     hiddenColumns: hidden,
-    mdBreakpoint: 899,
+    mdBreakpoint: 799,
     smBreakpoint: 599,
   },
   callbacks: {
@@ -95,14 +87,26 @@ const r_long = [
   h(SourceCellReferred, null),
   h(DateCell, null),
 ];
+const r_fueltank = [
+  h(RewardsCellFueltank, null),
+  h(StatusCellPending, null),
+  h(SourceCellManual, null),
+  h(DateCell, null),
+];
+const r_fueltank_long = [
+  h(RewardsCellFueltankLong, null),
+  h(StatusCellPendingUnhandled, null),
+  h(SourceCellManual, null),
+  h(DateCell, null),
+];
 export const RewardsTable = () => {
   return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired]))));
 };
 export const RewardsTableSingle = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available]))));
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank]))));
 };
 export const RewardsTableLong = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_redeemed, r_long]))));
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank_long, r_long]))));
 };
 export const RewardsTableEmpty = () => {
   return h(GenericTableView, Object.assign({}, rewardsTableProps([], true)));

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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
-import scenario from "./rewards-table.feature";
+import scenario1 from "./columns/sqm-rewards-table-date-column.feature";
+import scenario2 from "./columns/sqm-rewards-table-reward-column.feature";
+import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
+import scenario4 from "./columns/sqm-rewards-table-source-column.feature";
+const scenario = scenario1 + scenario2 + scenario3 + scenario4;
 export default {
   title: "Components/Rewards Table Cell",
   parameters: {
@@ -10,7 +14,7 @@ const rewardsData = {
   id: "61c100117a82a376d8804166",
   type: "CREDIT",
   value: 19,
-  unit: "TESTUNIT",
+  unit: "Points",
   name: null,
   dateGiven: 1640038417468,
   meta: { message: "***CUSTOMER NOTE MESSAGE***" },
@@ -42,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 available" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "{availableAmount} remaining" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -51,13 +55,16 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditPartial = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points available" }));
+  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, ...pending }, availableText: "{availableAmount} remaining" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -67,7 +74,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditRedeemed = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points available" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "{availableAmount} remaining" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Point",
@@ -78,15 +85,33 @@ const longName = {
   prettyValueNumber: "19",
 };
 export const RewardsCellCreditLong = () => {
-  return (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 available" }));
+  return (h("div", { style: { maxWidth: "222px" } },
+    h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "{availableAmount} remaining" })));
 };
 export const RewardsCellNonCredit = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: {
       ...rewardsData,
-      type: "FUELTANK",
+      type: "GIFTCARD",
       prettyValue: "SaaSquatch Giftcard",
     } }));
 };
+export const RewardsCellFueltank = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData,
+      type: "FUELTANK",
+      prettyValue: "Fueltank Reward",
+      fuelTankCode: "AFUELTANKCODE",
+    }, copyText: "Copied" }));
+};
+export const RewardsCellFueltankLong = () => {
+  return (h("div", { style: { maxWidth: "222px" } },
+    h("sqm-rewards-table-reward-cell", { reward: {
+        ...rewardsData,
+        type: "FUELTANK",
+        prettyValue: "Long Fueltank Reward",
+        fuelTankCode: "AFUELTANKCODE123456789123456789123456789123456789",
+      }, copyText: "Copied" })));
+};
 export const SourceCellManual = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
 };
@@ -111,6 +136,11 @@ const exchange = {
 export const SourceCellExchange = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...exchange }, rewardExchangeText: "Reward Exchange" }));
 };
+const longUserName = {
+  firstName: "Bartholomew",
+  lastName: "Christopher-Johnston Wallace",
+  imageUrl: null,
+};
 const johnDoe = {
   firstName: "John",
   lastName: "Doe",
@@ -156,6 +186,10 @@ const referred = (user = null) => {
 export const SourceCellReferral = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(johnDoe) }, referralText: "Referral to" }));
 };
+export const SourceCellWithLongText = () => {
+  return (h("div", { style: { width: "200px" } },
+    h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(longUserName) }, referralText: "Referral to" })));
+};
 export const SourceCellReferred = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referred(johnDoe) }, referralText: "Referred by" }));
 };
@@ -211,6 +245,10 @@ const unhandled = {
 export const StatusCellPending = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
 };
+export const StatusCellPendingWithLongText = () => {
+  return (h("div", { style: { width: "200px" } },
+    h("sqm-rewards-table-status-cell", { statusText: "Pending for 300,000,000 months and some change", reward: { ...rewardsData, ...pending } })));
+};
 export const StatusCellPendingUsTax = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...us_tax } }));
 };

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

@@ -10,7 +10,6 @@ export class RewardTableCustomerNoteCell {
   disconnectedCallback() { }
   render() {
     const note = this.note;
-    console.log("THIS FROM NOTE CELL", this);
     return h(TextSpanView, { type: "p" }, note);
   }
   static get is() { return "sqm-rewards-table-customer-note-cell"; }

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

@@ -1,8 +1,7 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
+import { Component, Prop, State } from "@stencil/core";
 import { DateTime } from "luxon";
 import { luxonLocale } from "../../../utils/utils";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
 export class RewardTableDateCell {
   constructor() {
     this.ignored = true;
@@ -15,7 +14,7 @@ export class RewardTableDateCell {
     const date = !this.date
       ? "-"
       : (_b = (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(DateTime.DATE_MED);
-    return h(TextSpanView, { type: "p" }, date);
+    return date;
   }
   static get is() { return "sqm-rewards-table-date-cell"; }
   static get encapsulation() { return "shadow"; }