@saasquatch/mint-components 1.5.0-69 → 1.5.0-72

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

@@ -1,955 +1,67 @@
 import { h } from "@stencil/core";
+import { GenericTableView } from "../../tables/GenericTableView";
+import { DateCell, RewardsCellCreditFull, SourceCellReferral, StatusCellAvailable, } from "./RewardsTableCell.stories";
 export default {
   title: "Components/Rewards Table",
 };
-const test = {
+const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null)))));
+const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
+      h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+        h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", "max-width": "100px" }),
+        h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+          h("sqm-text", { slot: "label" },
+            h("h3", null, "View your referral details")),
+          h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
+const rewardsTableProps = {
   states: {
-    hasNext: true,
     hasPrev: false,
+    hasNext: true,
     show: "rows",
-    namespace: "sqm-rewards-table",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
       showLabels: true,
       prevLabel: "Prev",
-      moreLabel: "Next",
+      moreLabel: "View More",
     },
-    hiddenColumns: "0",
-    smBreakpoint: 599,
+    hiddenColumns: "",
     mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
   },
-  callbacks: {},
   elements: {
-    columns: ["Reward", "Status", "Source", "Date received"],
+    columns: ["Rewards", "Status", "Source", "Date received"],
     rows: [
       [
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-reward-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            reward: {
-              id: "5cae6b16cc540e209db45cfa",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934550726,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6b0fcc540e209db45b53",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6b0ce4b0d81c67b78e82",
-                  firstName: "Aaron",
-                  lastName: "Hernandez",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            redeemedText: "{redeemedAmount} redeemed",
-            availableText: "{availableAmount} available",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-status-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            statusText: "{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
-            reward: {
-              id: "5cae6b16cc540e209db45cfa",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934550726,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6b0fcc540e209db45b53",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6b0ce4b0d81c67b78e82",
-                  firstName: "Aaron",
-                  lastName: "Hernandez",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            expiryText: "Expires on ",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-source-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            reward: {
-              id: "5cae6b16cc540e209db45cfa",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934550726,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6b0fcc540e209db45b53",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6b0ce4b0d81c67b78e82",
-                  firstName: "Aaron",
-                  lastName: "Hernandez",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            anonymousUserText: "Anonymous User",
-            deletedUserText: "Deleted User",
-            rewardExchangeText: "Reward Exchange",
-            referralText: "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}",
-            rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-date-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            date: 1554934550726,
-          },
-          $key$: null,
-          $name$: null,
-        },
-      ],
-      [
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-reward-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            reward: {
-              id: "5cae6ab7cc540e209db456cc",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934455495,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6a92cc540e209db45106",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6a8fe4b0d81c67b78e60",
-                  firstName: "Brian",
-                  lastName: "Mendez",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            redeemedText: "{redeemedAmount} redeemed",
-            availableText: "{availableAmount} available",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-status-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            statusText: "{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
-            reward: {
-              id: "5cae6ab7cc540e209db456cc",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934455495,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6a92cc540e209db45106",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6a8fe4b0d81c67b78e60",
-                  firstName: "Brian",
-                  lastName: "Mendez",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            expiryText: "Expires on ",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-source-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            reward: {
-              id: "5cae6ab7cc540e209db456cc",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934455495,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6a92cc540e209db45106",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6a8fe4b0d81c67b78e60",
-                  firstName: "Brian",
-                  lastName: "Mendez",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            anonymousUserText: "Anonymous User",
-            deletedUserText: "Deleted User",
-            rewardExchangeText: "Reward Exchange",
-            referralText: "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}",
-            rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-date-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            date: 1554934455495,
-          },
-          $key$: null,
-          $name$: null,
-        },
-      ],
-      [
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-reward-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            reward: {
-              id: "5cae6a46cc540e209db44cf2",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934342984,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6a42cc540e209db44b5a",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6a40e4b0d81c67b78e3e",
-                  firstName: "Loretta",
-                  lastName: "Harper",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            redeemedText: "{redeemedAmount} redeemed",
-            availableText: "{availableAmount} available",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-status-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            statusText: "{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
-            reward: {
-              id: "5cae6a46cc540e209db44cf2",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934342984,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6a42cc540e209db44b5a",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6a40e4b0d81c67b78e3e",
-                  firstName: "Loretta",
-                  lastName: "Harper",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            expiryText: "Expires on ",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-source-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            reward: {
-              id: "5cae6a46cc540e209db44cf2",
-              type: "CREDIT",
-              value: 1,
-              unit: "POINT",
-              name: "Partner Reward",
-              dateGiven: 1554934342984,
-              dateExpires: null,
-              dateCancelled: null,
-              dateRedeemed: 1637004373582,
-              dateScheduledFor: null,
-              fuelTankCode: null,
-              fuelTankType: null,
-              currency: null,
-              prettyValue: "1 Point",
-              prettyValueNumber: "1",
-              prettyAvailableNumber: "0",
-              prettyRedeemedNumber: "1",
-              statuses: ["REDEEMED"],
-              globalRewardKey: null,
-              programRewardKey: "partnerReward",
-              rewardSource: "FRIEND_SIGNUP",
-              prettyRedeemedCredit: "1 Point",
-              prettyAssignedCredit: "1 Point",
-              prettyAvailableValue: "0 Points",
-              exchangedRewardRedemptionTransaction: null,
-              referral: {
-                id: "5cae6a42cc540e209db44b5a",
-                referrerUser: {
-                  id: "testestest",
-                  firstName: "jimbo",
-                  lastName: "neutron",
-                },
-                referredUser: {
-                  id: "5cae6a40e4b0d81c67b78e3e",
-                  firstName: "Loretta",
-                  lastName: "Harper",
-                },
-              },
-              rewardRedemptionTransactions: {
-                data: [
-                  {
-                    exchangedRewards: {
-                      data: [
-                        {
-                          prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                          type: "INTEGRATION",
-                          fuelTankCode: null,
-                          globalRewardKey: "gc1",
-                        },
-                      ],
-                    },
-                  },
-                ],
-              },
-            },
-            anonymousUserText: "Anonymous User",
-            deletedUserText: "Deleted User",
-            rewardExchangeText: "Reward Exchange",
-            referralText: "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}",
-            rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}",
-          },
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-rewards-table-date-cell",
-          $text$: null,
-          $elm$: {
-            "s-p": [],
-            "s-hn": "SQM-REWARDS-TABLE",
-          },
-          $children$: null,
-          $attrs$: {
-            date: 1554934342984,
-          },
-          $key$: null,
-          $name$: null,
-        },
+        h(RewardsCellCreditFull, null),
+        h(StatusCellAvailable, null),
+        h(SourceCellReferral, null),
+        h(DateCell, null),
       ],
     ],
-    emptyElement: {
-      $flags$: 0,
-      $tag$: "slot",
-      $text$: null,
-      $elm$: null,
-      $children$: [
-        {
-          $flags$: 0,
-          $tag$: "div",
-          $text$: null,
-          $elm$: null,
-          $children$: [
-            {
-              $flags$: 0,
-              $tag$: "sqm-text",
-              $text$: null,
-              $elm$: null,
-              $children$: [
-                {
-                  $flags$: 0,
-                  $tag$: "h3",
-                  $text$: null,
-                  $elm$: null,
-                  $children$: [
-                    {
-                      $flags$: 0,
-                      $tag$: null,
-                      $text$: "No Rewards Yet",
-                      $elm$: null,
-                      $children$: null,
-                      $attrs$: null,
-                      $key$: null,
-                      $name$: null,
-                    },
-                  ],
-                  $attrs$: {
-                    style: {
-                      color: "#777777",
-                    },
-                  },
-                  $key$: null,
-                  $name$: null,
-                },
-              ],
-              $attrs$: null,
-              $key$: null,
-              $name$: null,
-            },
-          ],
-          $attrs$: {
-            style: {
-              width: "100%",
-            },
-          },
-          $key$: null,
-          $name$: null,
-        },
-      ],
-      $attrs$: {
-        name: "empty",
-      },
-      $key$: null,
-      $name$: "empty",
-    },
-    loadingElement: {
-      $flags$: 0,
-      $tag$: "slot",
-      $text$: null,
-      $elm$: null,
-      $children$: [
-        {
-          $flags$: 0,
-          $tag$: "sqm-table-row",
-          $text$: null,
-          $elm$: null,
-          $children$: [
-            {
-              $flags$: 0,
-              $tag$: "sqm-table-cell",
-              $text$: null,
-              $elm$: null,
-              $children$: [
-                {
-                  $flags$: 0,
-                  $tag$: "sl-skeleton",
-                  $text$: null,
-                  $elm$: null,
-                  $children$: null,
-                  $attrs$: null,
-                  $key$: null,
-                  $name$: null,
-                },
-              ],
-              $attrs$: {
-                colspan: 5,
-              },
-              $key$: null,
-              $name$: null,
-            },
-          ],
-          $attrs$: null,
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-table-row",
-          $text$: null,
-          $elm$: null,
-          $children$: [
-            {
-              $flags$: 0,
-              $tag$: "sqm-table-cell",
-              $text$: null,
-              $elm$: null,
-              $children$: [
-                {
-                  $flags$: 0,
-                  $tag$: "sl-skeleton",
-                  $text$: null,
-                  $elm$: null,
-                  $children$: null,
-                  $attrs$: null,
-                  $key$: null,
-                  $name$: null,
-                },
-              ],
-              $attrs$: {
-                colspan: 5,
-              },
-              $key$: null,
-              $name$: null,
-            },
-          ],
-          $attrs$: null,
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-table-row",
-          $text$: null,
-          $elm$: null,
-          $children$: [
-            {
-              $flags$: 0,
-              $tag$: "sqm-table-cell",
-              $text$: null,
-              $elm$: null,
-              $children$: [
-                {
-                  $flags$: 0,
-                  $tag$: "sl-skeleton",
-                  $text$: null,
-                  $elm$: null,
-                  $children$: null,
-                  $attrs$: null,
-                  $key$: null,
-                  $name$: null,
-                },
-              ],
-              $attrs$: {
-                colspan: 5,
-              },
-              $key$: null,
-              $name$: null,
-            },
-          ],
-          $attrs$: null,
-          $key$: null,
-          $name$: null,
-        },
-        {
-          $flags$: 0,
-          $tag$: "sqm-table-row",
-          $text$: null,
-          $elm$: null,
-          $children$: [
-            {
-              $flags$: 0,
-              $tag$: "sqm-table-cell",
-              $text$: null,
-              $elm$: null,
-              $children$: [
-                {
-                  $flags$: 0,
-                  $tag$: "sl-skeleton",
-                  $text$: null,
-                  $elm$: null,
-                  $children$: null,
-                  $attrs$: null,
-                  $key$: null,
-                  $name$: null,
-                },
-              ],
-              $attrs$: {
-                colspan: 5,
-              },
-              $key$: null,
-              $name$: null,
-            },
-          ],
-          $attrs$: null,
-          $key$: null,
-          $name$: null,
-        },
-      ],
-      $attrs$: {
-        name: "loading",
-      },
-      $key$: null,
-      $name$: "loading",
-    },
   },
 };
-export const Tab = () => {
-  return h("sqm-rewards-table-date-cell", null);
-};
-export const EmptyCell = () => {
-  return h("sqm-rewards-table-date-cell", null);
+export const RewardsTable = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTableProps));
 };