@saasquatch/mint-components 1.6.2-3 → 1.6.2-30

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

@@ -1,269 +1,269 @@
-import { h } from "@stencil/core";
-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: {
-    scenario,
-  },
-};
-const rewardsData = {
-  id: "61c100117a82a376d8804166",
-  type: "CREDIT",
-  value: 19,
-  unit: "Points",
-  name: null,
-  dateGiven: 1640038417468,
-  meta: { message: "***CUSTOMER NOTE MESSAGE***" },
-  dateExpires: null,
-  dateCancelled: null,
-  dateRedeemed: null,
-  dateScheduledFor: null,
-  fuelTankCode: null,
-  fuelTankType: null,
-  currency: null,
-  prettyValue: "19 Points",
-  prettyValueNumber: "19",
-  prettyAvailableNumber: "19",
-  prettyRedeemedNumber: "0",
-  statuses: ["AVAILABLE"],
-  pendingReasons: null,
-  globalRewardKey: null,
-  rewardSource: "MANUAL",
-  prettyRedeemedCredit: "0 Points",
-  prettyAssignedCredit: "19 Points",
-  prettyAvailableValue: "19 Points",
-  exchangedRewardRedemptionTransaction: null,
-  referral: null,
-  rewardRedemptionTransactions: {
-    data: null,
-  },
-};
-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: "{availableAmount} remaining" }));
-};
-const partial = {
-  prettyAvailableValue: "10 Points",
-  prettyRedeemedCredit: "9 Points",
-  prettyRedeemedNumber: "9",
-  dateRedeemed: 1640038417468,
-};
-export const RewardsCellCreditPartial = () => {
-  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: "{redeemedAmount} redeemed" }));
-};
-export const RewardsCellCreditExpired = () => {
-  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",
-  prettyAvailableNumber: "0",
-  prettyRedeemedCredit: "19 Points",
-  prettyRedeemedNumber: "19",
-  dateRedeemed: 1640038417468,
-};
-export const RewardsCellCreditRedeemed = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "{availableAmount} remaining" }));
-};
-const singleRedeemed = {
-  prettyValue: "1 Point",
-  prettyValueNumber: "1",
-};
-const longName = {
-  prettyValue: "19 Points with a really really super duper longest name ever in the world wide web",
-  prettyValueNumber: "19",
-};
-export const RewardsCellCreditLong = () => {
-  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: "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" }));
-};
-export const SourceCellProgram = () => {
-  return (h("sqm-rewards-table-source-cell", { reward: {
-      ...rewardsData,
-      rewardSource: "AUTOMATED",
-      program: { name: "Klip Loyalty" },
-    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" }));
-};
-const exchange = {
-  exchangedRewardRedemptionTransaction: {
-    id: "61c100117a82a376d88041196",
-    creditRedeemed: 1,
-    prettyRedeemedCredit: "1 Money",
-    unit: "TESTUNIT",
-    dateRedeemed: 1640038417173,
-    redeemedRewards: null,
-    exchangedRewards: null,
-  },
-};
-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",
-  imageUrl: null,
-};
-const anon = {
-  firstName: "",
-  lastName: "",
-  imageUrl: null,
-};
-const referral = (user = null) => {
-  return {
-    rewardSource: "FRIEND_SIGNUP",
-    referral: {
-      id: "123",
-      dateConverted: 1640038417173,
-      dateReferralStarted: 1640038417173,
-      dateReferralPaid: 1640038417173,
-      dateReferralEnded: null,
-      moderationStatus: null,
-      rewards: null,
-      referrerUser: user,
-      referredUser: user,
-    },
-  };
-};
-const referred = (user = null) => {
-  return {
-    rewardSource: "REFERRED",
-    referral: {
-      id: "123",
-      dateConverted: 1640038417173,
-      dateReferralStarted: 1640038417173,
-      dateReferralPaid: 1640038417173,
-      dateReferralEnded: null,
-      moderationStatus: null,
-      rewards: null,
-      referrerUser: user,
-      referredUser: user,
-    },
-  };
-};
-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" }));
-};
-export const SourceCellAnonymousUser = () => {
-  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
-};
-export const SourceCellDeletedUser = () => {
-  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
-};
-export const StatusCellAvailable = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData }));
-};
-const expire = {
-  dateExpires: 1640038417468,
-};
-export const StatusCellAvailableExpiry = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: { ...rewardsData, ...expire }, expiryText: "Expires" }));
-};
-const redeemed = {
-  statuses: ["REDEEMED"],
-  dateRedeemed: 1640038417468,
-};
-export const StatusCellRedeemed = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Redeemed", reward: { ...rewardsData, ...redeemed } }));
-};
-const cancelled = {
-  statuses: ["CANCELLED"],
-  dateCancelled: 1640038417468,
-};
-export const StatusCellCancelled = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: { ...rewardsData, ...cancelled } }));
-};
-const expired = {
-  statuses: ["EXPIRED"],
-  dateExpires: 1640038417468,
-};
-export const StatusCellExpired = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: { ...rewardsData, ...expired } }));
-};
-const pending = {
-  statuses: ["PENDING"],
-};
-const us_tax = {
-  pendingReasons: ["US_TAX"],
-};
-const scheduled = {
-  pendingReasons: ["SCHEDULED"],
-  dateScheduledFor: 1640038417468,
-};
-const unhandled = {
-  pendingReasons: ["UNHANDLED_ERROR"],
-};
-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 } }));
-};
-export const StatusCellPendingScheduled = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...scheduled } }));
-};
-export const StatusCellPendingUnhandled = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...unhandled } }));
-};
-export const DateCell = () => {
-  return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
-};
-export const CustomerNoteCell = () => {
-  return (h("sqm-rewards-table-customer-note-cell", { note: rewardsData.meta.message }));
-};
-export const EmptyCell = () => {
-  return h("sqm-rewards-table-date-cell", null);
-};
+import { h } from "@stencil/core";
+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: {
+    scenario,
+  },
+};
+const rewardsData = {
+  id: "61c100117a82a376d8804166",
+  type: "CREDIT",
+  value: 19,
+  unit: "Points",
+  name: null,
+  dateGiven: 1640038417468,
+  meta: { message: "***CUSTOMER NOTE MESSAGE***" },
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: null,
+  dateScheduledFor: null,
+  fuelTankCode: null,
+  fuelTankType: null,
+  currency: null,
+  prettyValue: "19 Points",
+  prettyValueNumber: "19",
+  prettyAvailableNumber: "19",
+  prettyRedeemedNumber: "0",
+  statuses: ["AVAILABLE"],
+  pendingReasons: null,
+  globalRewardKey: null,
+  rewardSource: "MANUAL",
+  prettyRedeemedCredit: "0 Points",
+  prettyAssignedCredit: "19 Points",
+  prettyAvailableValue: "19 Points",
+  exchangedRewardRedemptionTransaction: null,
+  referral: null,
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+};
+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: "{availableAmount} remaining" }));
+};
+const partial = {
+  prettyAvailableValue: "10 Points",
+  prettyRedeemedCredit: "9 Points",
+  prettyRedeemedNumber: "9",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellCreditPartial = () => {
+  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: "{redeemedAmount} redeemed" }));
+};
+export const RewardsCellCreditExpired = () => {
+  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",
+  prettyAvailableNumber: "0",
+  prettyRedeemedCredit: "19 Points",
+  prettyRedeemedNumber: "19",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellCreditRedeemed = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "{availableAmount} remaining" }));
+};
+const singleRedeemed = {
+  prettyValue: "1 Point",
+  prettyValueNumber: "1",
+};
+const longName = {
+  prettyValue: "19 Points with a really really super duper longest name ever in the world wide web",
+  prettyValueNumber: "19",
+};
+export const RewardsCellCreditLong = () => {
+  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: "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" }));
+};
+export const SourceCellProgram = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: {
+      ...rewardsData,
+      rewardSource: "AUTOMATED",
+      program: { name: "Klip Loyalty" },
+    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" }));
+};
+const exchange = {
+  exchangedRewardRedemptionTransaction: {
+    id: "61c100117a82a376d88041196",
+    creditRedeemed: 1,
+    prettyRedeemedCredit: "1 Money",
+    unit: "TESTUNIT",
+    dateRedeemed: 1640038417173,
+    redeemedRewards: null,
+    exchangedRewards: null,
+  },
+};
+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",
+  imageUrl: null,
+};
+const anon = {
+  firstName: "",
+  lastName: "",
+  imageUrl: null,
+};
+const referral = (user = null) => {
+  return {
+    rewardSource: "FRIEND_SIGNUP",
+    referral: {
+      id: "123",
+      dateConverted: 1640038417173,
+      dateReferralStarted: 1640038417173,
+      dateReferralPaid: 1640038417173,
+      dateReferralEnded: null,
+      moderationStatus: null,
+      rewards: null,
+      referrerUser: user,
+      referredUser: user,
+    },
+  };
+};
+const referred = (user = null) => {
+  return {
+    rewardSource: "REFERRED",
+    referral: {
+      id: "123",
+      dateConverted: 1640038417173,
+      dateReferralStarted: 1640038417173,
+      dateReferralPaid: 1640038417173,
+      dateReferralEnded: null,
+      moderationStatus: null,
+      rewards: null,
+      referrerUser: user,
+      referredUser: user,
+    },
+  };
+};
+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" }));
+};
+export const SourceCellAnonymousUser = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
+};
+export const SourceCellDeletedUser = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
+};
+export const StatusCellAvailable = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData }));
+};
+const expire = {
+  dateExpires: 1640038417468,
+};
+export const StatusCellAvailableExpiry = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: { ...rewardsData, ...expire }, expiryText: "Expires" }));
+};
+const redeemed = {
+  statuses: ["REDEEMED"],
+  dateRedeemed: 1640038417468,
+};
+export const StatusCellRedeemed = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Redeemed", reward: { ...rewardsData, ...redeemed } }));
+};
+const cancelled = {
+  statuses: ["CANCELLED"],
+  dateCancelled: 1640038417468,
+};
+export const StatusCellCancelled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: { ...rewardsData, ...cancelled } }));
+};
+const expired = {
+  statuses: ["EXPIRED"],
+  dateExpires: 1640038417468,
+};
+export const StatusCellExpired = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: { ...rewardsData, ...expired } }));
+};
+const pending = {
+  statuses: ["PENDING"],
+};
+const us_tax = {
+  pendingReasons: ["US_TAX"],
+};
+const scheduled = {
+  pendingReasons: ["SCHEDULED"],
+  dateScheduledFor: 1640038417468,
+};
+const unhandled = {
+  pendingReasons: ["UNHANDLED_ERROR"],
+};
+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 } }));
+};
+export const StatusCellPendingScheduled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...scheduled } }));
+};
+export const StatusCellPendingUnhandled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...unhandled } }));
+};
+export const DateCell = () => {
+  return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+};
+export const CustomerNoteCell = () => {
+  return (h("sqm-rewards-table-customer-note-cell", { note: rewardsData.meta.message }));
+};
+export const EmptyCell = () => {
+  return h("sqm-rewards-table-date-cell", null);
+};