@saasquatch/mint-components 1.6.1-13 → 1.6.1-16

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -1,233 +1,233 @@
-import { h } from "@stencil/core";
-import { DateTime } from "luxon";
-import column from "./columns/referral-table-column.feature";
-import date from "./columns/referral-table-date-column.feature";
-import rewards from "./columns/referral-table-rewards-column.feature";
-import status from "./columns/referral-table-status-column.feature";
-import user from "./columns/referral-table-user-column.feature";
-const scenario = column + date + rewards + status + user;
-export default {
-  title: "Components/Referral Table Rewards Cell",
-  parameters: {
-    scenario,
-  },
-};
-const baseReward = {
-  id: "123",
-  type: "CREDIT",
-  value: 19,
-  unit: "POINT",
-  name: "test",
-  dateGiven: 1627427794891,
-  dateScheduledFor: getDays(),
-  dateExpires: getMonths(),
-  dateCancelled: 134400,
-  dateRedeemed: 0,
-  fuelTankCode: "ABC",
-  fuelTankType: "Code",
-  currency: "null",
-  prettyValue: "19 Points",
-  statuses: ["AVAILABLE"],
-  globalRewardKey: "Key",
-  rewardRedemptionTransactions: {
-    data: [
-      {
-        exchangedRewards: {
-          data: [
-            {
-              prettyValue: "19 Points",
-              type: "CREDIT",
-              fuelTankCode: "ABC",
-              globalRewardKey: "Key",
-            },
-          ],
-        },
-      },
-    ],
-  },
-};
-const nullExpiresIn = {
-  dateExpires: null,
-};
-const nullScheduledFor = {
-  dateScheduledFor: null,
-};
-const nullFuelTank = {
-  fuelTankCode: null,
-};
-// Reward Type Cases
-const discountReward = {
-  type: "PCT_DISCOUNT",
-};
-const creditReward = {
-  type: "CREDIT",
-};
-const fuelTankReward = {
-  type: "FUELTANK",
-};
-const integrationReward = {
-  type: "INTEGRATION",
-};
-// Reward Status Cases
-const pendingReward = {
-  statuses: ["AVAILABLE", "PENDING"],
-};
-const cancelledReward = {
-  statuses: ["PENDING", "CANCELLED"],
-  dateCancelled: 1626850800000,
-};
-const expiredReward = {
-  statuses: ["EXPIRED", "AVAILABLE"],
-  dateExpires: 1626850800000,
-};
-const redeemedReward = {
-  statuses: ["AVAILABLE", "EXPIRED", "REDEEMED"],
-};
-const availableReward = {
-  statuses: ["AVAILABLE"],
-};
-const zeroRewards = [];
-const oneReward = [{ ...baseReward, ...availableReward }];
-const twoRewards = [
-  { ...baseReward, ...discountReward, ...pendingReward },
-  { ...baseReward, ...creditReward },
-];
-const threeRewards = [
-  { ...baseReward, ...fuelTankReward, ...nullExpiresIn },
-  { ...baseReward, ...fuelTankReward, ...expiredReward },
-  { ...baseReward, ...pendingReward, ...nullFuelTank },
-];
-const fiveRewards = [
-  { ...baseReward, ...fuelTankReward },
-  { ...baseReward, ...integrationReward },
-  { ...baseReward, ...pendingReward },
-  { ...baseReward, ...cancelledReward, ...nullExpiresIn, ...nullFuelTank },
-  { ...baseReward, ...expiredReward, ...nullFuelTank },
-];
-const eightRewards = [
-  { ...baseReward, ...redeemedReward, ...nullFuelTank },
-  { ...baseReward, ...availableReward, ...nullExpiresIn },
-  { ...baseReward, ...pendingReward },
-  { ...baseReward, ...cancelledReward },
-  { ...baseReward, ...expiredReward },
-  { ...baseReward, ...pendingReward, ...nullExpiresIn, ...nullScheduledFor },
-  { ...baseReward, ...cancelledReward },
-  { ...baseReward, ...expiredReward },
-];
-const tenRewards = [
-  { ...baseReward, ...integrationReward },
-  { ...baseReward, ...redeemedReward },
-  { ...baseReward, ...availableReward },
-  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
-  { ...baseReward, ...expiredReward },
-  { ...baseReward, ...pendingReward },
-  { ...baseReward, ...discountReward },
-  { ...baseReward, ...fuelTankReward },
-  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
-  { ...baseReward, ...creditReward },
-];
-function getSeconds() {
-  return DateTime.now().toMillis() + 10000;
-}
-function getMinutes() {
-  return DateTime.now().toMillis() + 400000;
-}
-function getHours() {
-  return DateTime.now().toMillis() + 9000000;
-}
-function getDays() {
-  return DateTime.now().toMillis() + 600000000;
-}
-function getMonths() {
-  return DateTime.now().toMillis() + 10000000000;
-}
-function getYears() {
-  return DateTime.now().toMillis() + 200000000000;
-}
-export const PendingNoUnpend = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const PendingNoUnpendNoDetails = () => {
-  return (h("sqm-referral-table-rewards-cell", { hideDetails: true, rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const NarrowColumnWithWideText = () => {
-  return (h("div", { style: { width: "250px" } },
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getDays() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "Pending for 300,000,000 months and some change" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getYears() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" })));
-};
-export const PendingWithUnpend = () => {
-  return [
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getSeconds() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getMinutes() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getHours() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getDays() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getMonths() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...pendingReward, dateScheduledFor: getYears() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-  ];
-};
-export const AvailableNoExpiry = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, ...nullExpiresIn }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const AvailableWithExpiry = () => {
-  return [
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...availableReward, dateExpires: getSeconds() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...availableReward, dateExpires: getMinutes() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getHours() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getDays() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward, ...availableReward, dateExpires: getMonths() },
-      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getYears() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-  ];
-};
-export const Redeemed = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...redeemedReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const Cancelled = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...cancelledReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const Expired = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const EmptyCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: zeroRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const oneRewardCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: oneReward, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const twoRewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: twoRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const threeRewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: threeRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const fiveRewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: fiveRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const eightRewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: eightRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
-export const tenRewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: tenRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
-};
+import { h } from "@stencil/core";
+import { DateTime } from "luxon";
+import column from "./columns/referral-table-column.feature";
+import date from "./columns/referral-table-date-column.feature";
+import rewards from "./columns/referral-table-rewards-column.feature";
+import status from "./columns/referral-table-status-column.feature";
+import user from "./columns/referral-table-user-column.feature";
+const scenario = column + date + rewards + status + user;
+export default {
+  title: "Components/Referral Table Rewards Cell",
+  parameters: {
+    scenario,
+  },
+};
+const baseReward = {
+  id: "123",
+  type: "CREDIT",
+  value: 19,
+  unit: "POINT",
+  name: "test",
+  dateGiven: 1627427794891,
+  dateScheduledFor: getDays(),
+  dateExpires: getMonths(),
+  dateCancelled: 134400,
+  dateRedeemed: 0,
+  fuelTankCode: "ABC",
+  fuelTankType: "Code",
+  currency: "null",
+  prettyValue: "19 Points",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: "Key",
+  rewardRedemptionTransactions: {
+    data: [
+      {
+        exchangedRewards: {
+          data: [
+            {
+              prettyValue: "19 Points",
+              type: "CREDIT",
+              fuelTankCode: "ABC",
+              globalRewardKey: "Key",
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+const nullExpiresIn = {
+  dateExpires: null,
+};
+const nullScheduledFor = {
+  dateScheduledFor: null,
+};
+const nullFuelTank = {
+  fuelTankCode: null,
+};
+// Reward Type Cases
+const discountReward = {
+  type: "PCT_DISCOUNT",
+};
+const creditReward = {
+  type: "CREDIT",
+};
+const fuelTankReward = {
+  type: "FUELTANK",
+};
+const integrationReward = {
+  type: "INTEGRATION",
+};
+// Reward Status Cases
+const pendingReward = {
+  statuses: ["AVAILABLE", "PENDING"],
+};
+const cancelledReward = {
+  statuses: ["PENDING", "CANCELLED"],
+  dateCancelled: 1626850800000,
+};
+const expiredReward = {
+  statuses: ["EXPIRED", "AVAILABLE"],
+  dateExpires: 1626850800000,
+};
+const redeemedReward = {
+  statuses: ["AVAILABLE", "EXPIRED", "REDEEMED"],
+};
+const availableReward = {
+  statuses: ["AVAILABLE"],
+};
+const zeroRewards = [];
+const oneReward = [{ ...baseReward, ...availableReward }];
+const twoRewards = [
+  { ...baseReward, ...discountReward, ...pendingReward },
+  { ...baseReward, ...creditReward },
+];
+const threeRewards = [
+  { ...baseReward, ...fuelTankReward, ...nullExpiresIn },
+  { ...baseReward, ...fuelTankReward, ...expiredReward },
+  { ...baseReward, ...pendingReward, ...nullFuelTank },
+];
+const fiveRewards = [
+  { ...baseReward, ...fuelTankReward },
+  { ...baseReward, ...integrationReward },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn, ...nullFuelTank },
+  { ...baseReward, ...expiredReward, ...nullFuelTank },
+];
+const eightRewards = [
+  { ...baseReward, ...redeemedReward, ...nullFuelTank },
+  { ...baseReward, ...availableReward, ...nullExpiresIn },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...cancelledReward },
+  { ...baseReward, ...expiredReward },
+  { ...baseReward, ...pendingReward, ...nullExpiresIn, ...nullScheduledFor },
+  { ...baseReward, ...cancelledReward },
+  { ...baseReward, ...expiredReward },
+];
+const tenRewards = [
+  { ...baseReward, ...integrationReward },
+  { ...baseReward, ...redeemedReward },
+  { ...baseReward, ...availableReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
+  { ...baseReward, ...expiredReward },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...discountReward },
+  { ...baseReward, ...fuelTankReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
+  { ...baseReward, ...creditReward },
+];
+function getSeconds() {
+  return DateTime.now().toMillis() + 10000;
+}
+function getMinutes() {
+  return DateTime.now().toMillis() + 400000;
+}
+function getHours() {
+  return DateTime.now().toMillis() + 9000000;
+}
+function getDays() {
+  return DateTime.now().toMillis() + 600000000;
+}
+function getMonths() {
+  return DateTime.now().toMillis() + 10000000000;
+}
+function getYears() {
+  return DateTime.now().toMillis() + 200000000000;
+}
+export const PendingNoUnpend = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const PendingNoUnpendNoDetails = () => {
+  return (h("sqm-referral-table-rewards-cell", { hideDetails: true, rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const NarrowColumnWithWideText = () => {
+  return (h("div", { style: { width: "250px" } },
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getDays() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "Pending for 300,000,000 months and some change" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getYears() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" })));
+};
+export const PendingWithUnpend = () => {
+  return [
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getSeconds() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getMinutes() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getHours() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getDays() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getMonths() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getYears() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+  ];
+};
+export const AvailableNoExpiry = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, ...nullExpiresIn }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const AvailableWithExpiry = () => {
+  return [
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...availableReward, dateExpires: getSeconds() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...availableReward, dateExpires: getMinutes() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getHours() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getDays() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...availableReward, dateExpires: getMonths() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getYears() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+  ];
+};
+export const Redeemed = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...redeemedReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const Cancelled = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...cancelledReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const Expired = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const EmptyCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: zeroRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const oneRewardCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: oneReward, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const twoRewardsCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: twoRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const threeRewardsCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: threeRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const fiveRewardsCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: fiveRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const eightRewardsCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: eightRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+export const tenRewardsCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: tenRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};