@saasquatch/mint-components 1.11.1-62 → 1.11.1-64

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -0,0 +1,227 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { ReferralCodesView, } from "./sqm-referral-codes-view";
+import { useReferralCodes } from "./useReferralCodes";
+/**
+ * @uiName Referral Codes
+ * @slots [{"name":"", "title":"Promo Codes Content"}]
+ * @exampleGroup Sharing
+ * @example Referral Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
+ */
+export class ReferralCodes {
+  constructor() {
+    /**
+     * @uiName Title Text
+     */
+    this.titleText = "Start sharing";
+    /**
+     * @uiName Empty State Header Text
+     */
+    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
+    /**
+     * @uiName Empty State Description Text
+     */
+    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
+    /**
+     * @uiName Empty State Image URL
+     * @format url
+     * @uiWidget ImageUpload
+     */
+    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoReferralCodes(thisProps)
+      : useReferralCodes(thisProps);
+    const slots = {
+      shareButtons: h("slot", { name: "shareButtons" }),
+      shareCodes: h("slot", { name: "shareCodes" }),
+      pagination: h("slot", { name: "pagination" }),
+      empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
+      loading: h(LoadingSlot, null),
+    };
+    const viewProps = {
+      slots,
+      ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
+    };
+    return h(ReferralCodesView, Object.assign({}, viewProps));
+  }
+  static get is() { return "sqm-referral-codes"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "titleText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title-text",
+      "reflect": false,
+      "defaultValue": "\"Start sharing\""
+    },
+    "emptyStateHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Header Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header-text",
+      "reflect": false,
+      "defaultValue": "\"Your new codes and links aren\u2019t ready yet\""
+    },
+    "emptyStateDescriptionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Description Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-description-text",
+      "reflect": false,
+      "defaultValue": "\"Please contact our program support team to let them know you\u2019re out of codes.\""
+    },
+    "emptyStateImageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image URL",
+            "name": "uiName"
+          }, {
+            "text": "url",
+            "name": "format"
+          }, {
+            "text": "ImageUpload",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image-url",
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
+    },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<ReferralCodesViewProps>",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "ReferralCodesViewProps": {
+            "location": "import",
+            "path": "./sqm-referral-codes-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function EmptySlot({ headerText, descriptionText, imageUrl, }) {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return h("sl-skeleton", { style: { width: "100%" } });
+}
+function useDemoReferralCodes(props) {
+  return deepmerge({
+    titleText: props.titleText,
+    states: {
+      noCodes: false,
+      loading: false,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-referral-codes/useReferralCodes.js

@@ -0,0 +1,129 @@
+import { useEngagementMedium, usePaginatedQuery, useParentState, useProgramId, useRefreshDispatcher, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+const GET_REFERRAL_CODES = gql `
+  query getCodes(
+    $engagementMedium: UserEngagementMedium!
+    $limit: Int!
+    $offset: Int!
+    $filter: ReferralCodeFilterInput
+  ) {
+    viewer {
+      ... on User {
+        referralCodeList(limit: $limit, offset: $offset, filter: $filter) {
+          data {
+            code
+            dateUsed
+            dateCopied
+            singleUse
+            shareLinkCodes(limit: $limit) {
+              data {
+                linkCode
+                shareLink: shortUrl(
+                  shareMedium: DIRECT
+                  engagementMedium: EMBED
+                )
+                email: shortUrl(
+                  shareMedium: EMAIL
+                  engagementMedium: $engagementMedium
+                )
+                whatsApp: shortUrl(
+                  shareMedium: WHATSAPP
+                  engagementMedium: $engagementMedium
+                )
+                fbMessenger: shortUrl(
+                  shareMedium: FBMESSENGER
+                  engagementMedium: $engagementMedium
+                )
+              }
+            }
+          }
+          count
+          totalCount
+        }
+      }
+    }
+  }
+`;
+export const REFERRAL_CODES_NAMESPACE = "sq:referral-codes";
+export const REFERRAL_CODES_PAGINATION_CONTEXT = "sq:referral-codes-pagination";
+export const SET_CODE_COPIED = gql `
+  mutation markReferralCodeCopied($referralCode: String!) {
+    markReferralCodeCopied(referralCode: $referralCode) {
+      referralCode {
+        dateCopied
+      }
+    }
+  }
+`;
+export function useReferralCodes(props) {
+  const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
+  const programId = props.programId || useProgramId();
+  const { refresh } = useRefreshDispatcher();
+  const { envelope: referralData, states, callbacks, } = usePaginatedQuery(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList; }, {
+    limit: 1,
+    offset: 0,
+  }, {
+    engagementMedium,
+    programId,
+    filter: {
+      fuelTank_eq: true,
+      programId_eq: programId,
+      dateUsed_exists: false,
+    },
+  }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [paginationContext, setPaginationContext] = useParentState({
+    namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
+    initialValue: { states, callbacks },
+  });
+  const [referralCodesContext, setReferralCodesContext] = useParentState({
+    namespace: REFERRAL_CODES_NAMESPACE,
+    initialValue: {
+      refresh,
+      loading: true,
+      referralCode: "",
+      shareLink: "",
+      isCopied: false,
+      isUsed: false,
+      email: {
+        messageLink: "",
+      },
+      fbmessenger: {
+        messageLink: "",
+        shareLink: "",
+      },
+      whatsapp: { messageLink: "" },
+    },
+  });
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    if ((_a = referralData === null || referralData === void 0 ? void 0 : referralData.data) === null || _a === void 0 ? void 0 : _a.length) {
+      const data = referralData.data[0];
+      setReferralCodesContext({
+        refresh,
+        referralCode: data.code,
+        isCopied: !!data.dateCopied,
+        isUsed: !!data.dateUsed,
+        shareLink: (_d = (_c = (_b = data.shareLinkCodes) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.direct,
+        email: {
+          messageLink: (_g = (_f = (_e = data.shareLinkCodes) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.email,
+        },
+        fbmessenger: {
+          messageLink: (_k = (_j = (_h = data.shareLinkCodes) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.fbMessenger,
+          shareLink: (_o = (_m = (_l = data.shareLinkCodes) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.fbMessenger,
+        },
+        whatsapp: { messageLink: (_r = (_q = (_p = data.shareLinkCodes) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.whatsApp },
+      });
+      setPaginationContext({ states, callbacks });
+    }
+  }, [referralData]);
+  return {
+    states: {
+      ...states,
+      noCodes: (referralData === null || referralData === void 0 ? void 0 : referralData.totalCount) === 0,
+    },
+    data: referralCodesContext,
+    callbacks: {},
+  };
+}

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

@@ -1,29 +1,17 @@
 import { Component, h, Prop } from "@stencil/core";
 import { DateTime } from "luxon";
-import { intl } from "../../../global/global";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
 import { createStyleSheet } from "../../../styling/JSS";
-import { useRequestRerender } from "../../../tables/re-render";
+import { intl } from "../../../global/global";
 import { luxonLocale } from "../../../utils/utils";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useMemo } from "@saasquatch/universal-hooks";
 export class ReferralTableRewardsCell {
   constructor() {
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    this.statusLongText = "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }";
     this.locale = "en";
-    withHooks(this);
   }
-  disconnectedCallback() { }
   render() {
-    useRequestRerender([
-      this.statusText,
-      this.statusLongText,
-      this.fuelTankText,
-      this.rewardReceivedText,
-      this.expiringText,
-      this.pendingForText,
-      this.hideDetails,
-    ]);
-    const hasTextProps = !!this.statusText;
+    var _a;
     intl.locale = this.locale;
     const style = {
       "@keyframes slideRight": {
@@ -172,118 +160,113 @@ export class ReferralTableRewardsCell {
         .replace("in", "")
         .trim();
     };
-    const rewardMap = useMemo(() => {
-      var _a;
-      return this.statusText
-        ? (_a = this.rewards) === null || _a === void 0 ? void 0 : _a.map((reward) => {
-          var _a, _b;
-          const state = getState(reward, this.taxConnection);
-          const slBadgeType = getSLBadgeType(state);
-          const badgeText = intl.formatMessage({ id: "statusShortMessage", defaultMessage: this.statusText }, {
-            status: state,
-          });
-          const statusText = intl.formatMessage({
-            id: "statusLongMessage",
-            defaultMessage: this.statusLongText,
-          }, {
-            status: state,
-          });
-          return (h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails },
-            h("style", { type: "text/css" }, styleString),
-            h("div", { slot: "summary", class: sheet.classes.DetailsContainer },
-              h(TextSpanView, { type: "p" },
-                h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)),
-              h("div", { class: sheet.classes.BadgeContainer },
-                state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
-                    ? sheet.classes.RedeemBadge
-                    : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
-                  id: "pendingForText",
-                  defaultMessage: this.pendingForText,
-                }, {
-                  status: badgeText,
-                  date: getTimeDiff(reward.dateScheduledFor),
-                }))) : (h("sl-badge", { class: slBadgeType === "primary"
-                    ? sheet.classes.RedeemBadge
-                    : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
-                reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
-                    ? sheet.classes.RedeemBadge
-                    : sheet.classes.StatusBadge, type: "info", pill: true },
-                  this.expiringText,
-                  ` ${getTimeDiff(reward.dateExpires)}`)))),
-            h("div", null,
-              state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  statusText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.referral.dateModerated)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED))))),
-              state === "PAYOUT_APPROVED" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "PAYOUT_FAILED" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "PAYOUT_CANCELLED" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "PENDING_TAX_REVIEW" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "PENDING_NEW_TAX_FORM" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "PENDING_TAX_SUBMISSION" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "PENDING_PARTNER_CREATION" && (h("div", null,
-                h(TextSpanView, { type: "p" }, statusText))),
-              state === "DENIED" && ((_b = reward.referral) === null || _b === void 0 ? void 0 : _b.dateModerated) && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  statusText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.referral.dateModerated)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED)),
-                  ".",
-                  this.deniedHelpText ? ` ${this.deniedHelpText}` : ``))),
-              reward.dateGiven && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  this.rewardReceivedText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateGiven)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED))))),
-              state === "EXPIRED" && reward.dateExpires && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  statusText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateExpires)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED))))),
-              state === "CANCELLED" && reward.dateCancelled && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  statusText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateCancelled)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED))))),
-              state === "PENDING" && reward.dateScheduledFor && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  statusText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateScheduledFor)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED))))),
+    return (_a = this.rewards) === null || _a === void 0 ? void 0 : _a.map((reward) => {
+      var _a, _b;
+      const state = getState(reward, this.taxConnection);
+      const slBadgeType = getSLBadgeType(state);
+      const badgeText = intl.formatMessage({ id: "statusShortMessage", defaultMessage: this.statusText }, {
+        status: state,
+      });
+      const statusText = intl.formatMessage({
+        id: "statusLongMessage",
+        defaultMessage: this.statusLongText,
+      }, {
+        status: state,
+      });
+      return (h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails },
+        h("style", { type: "text/css" }, styleString),
+        h("div", { slot: "summary", class: sheet.classes.DetailsContainer },
+          h(TextSpanView, { type: "p" },
+            h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)),
+          h("div", { class: sheet.classes.BadgeContainer },
+            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
+              id: "pendingForText",
+              defaultMessage: this.pendingForText,
+            }, {
+              status: badgeText,
+              date: getTimeDiff(reward.dateScheduledFor),
+            }))) : (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
+            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: "info", pill: true },
+              this.expiringText,
+              ` ${getTimeDiff(reward.dateExpires)}`)))),
+        h("div", null,
+          state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              statusText,
+              " ",
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.referral.dateModerated)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
+          state === "PAYOUT_APPROVED" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "PAYOUT_FAILED" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "PAYOUT_CANCELLED" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "PENDING_TAX_REVIEW" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "PENDING_NEW_TAX_FORM" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "PENDING_TAX_SUBMISSION" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "PENDING_PARTNER_CREATION" && (h("div", null,
+            h(TextSpanView, { type: "p" }, statusText))),
+          state === "DENIED" && ((_b = reward.referral) === null || _b === void 0 ? void 0 : _b.dateModerated) && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              statusText,
+              " ",
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.referral.dateModerated)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED)),
+              ".",
+              this.deniedHelpText ? ` ${this.deniedHelpText}` : ``))),
+          reward.dateGiven && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              this.rewardReceivedText,
+              " ",
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateGiven)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
+          state === "EXPIRED" && reward.dateExpires && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              statusText,
               " ",
-              state === "AVAILABLE" && reward.dateExpires && (h("div", null,
-                h(TextSpanView, { type: "p" },
-                  statusText,
-                  " ",
-                  h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateExpires)
-                    .setLocale(luxonLocale(this.locale))
-                    .toLocaleString(DateTime.DATE_MED))))),
-              reward.fuelTankCode && (h("div", null,
-                this.fuelTankText,
-                " ",
-                h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, reward.fuelTankCode))))));
-        }) : [];
-    }, [hasTextProps]);
-    return rewardMap;
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateExpires)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
+          state === "CANCELLED" && reward.dateCancelled && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              statusText,
+              " ",
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateCancelled)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
+          state === "PENDING" && reward.dateScheduledFor && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              statusText,
+              " ",
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateScheduledFor)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
+          " ",
+          state === "AVAILABLE" && reward.dateExpires && (h("div", null,
+            h(TextSpanView, { type: "p" },
+              statusText,
+              " ",
+              h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, DateTime.fromMillis(reward.dateExpires)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
+          reward.fuelTankCode && (h("div", null,
+            this.fuelTankText,
+            " ",
+            h("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, reward.fuelTankCode))))));
+    });
   }
   static get is() { return "sqm-referral-table-rewards-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -358,7 +341,8 @@ export class ReferralTableRewardsCell {
         "text": ""
       },
       "attribute": "status-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\""
     },
     "statusLongText": {
       "type": "string",
@@ -375,7 +359,8 @@ export class ReferralTableRewardsCell {
         "text": ""
       },
       "attribute": "status-long-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }\""
     },
     "fuelTankText": {
       "type": "string",