@saasquatch/mint-components 1.5.0-7 → 1.5.0-70

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ReferralTableView } from "./sqm-referral-table-view";
+import { GenericTableView } from "../../tables/GenericTableView";
 import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
 export default {
   title: "Components/Referral Table",
@@ -22,7 +22,13 @@ const loadingElement = (h("div", { slot: "loading", style: { display: "contents"
       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" } }, "No Referrals Yet"))));
+    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 baseReward = {
   id: "123",
   type: "CREDIT",
@@ -79,7 +85,8 @@ const simpleUserTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -87,19 +94,16 @@ const simpleUserTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
     nextPage: () => console.log("Next"),
   },
   elements: {
-    columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "Rewards"),
-    ],
+    columns: ["Customer", "Status", "Date converted", "Rewards"],
     rows: [
       [
         h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
@@ -129,13 +133,17 @@ const hideLabelProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
 };
 const customButtonProps = {
   states: {
     hasPrev: true,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -143,13 +151,17 @@ const customButtonProps = {
       prevLabel: "CUSTOM PREVIOUS TEXT",
       moreLabel: "CUSTOM NEXT TEXT",
     },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
 };
 const longCellTextTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -157,7 +169,9 @@ const longCellTextTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -165,15 +179,15 @@ const longCellTextTableProps = {
   },
   elements: {
     columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "City"),
-      h("div", null, "State/Province"),
-      h("div", null, "Country"),
-      h("div", null, "Referrals"),
-      h("div", null, "Reward Earnings"),
-      h("div", null, "Status"),
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "Status",
     ],
     rows: [
       [
@@ -218,7 +232,8 @@ const longColumnTextTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -226,7 +241,9 @@ const longColumnTextTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -234,15 +251,15 @@ const longColumnTextTableProps = {
   },
   elements: {
     columns: [
-      h("div", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit."),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "City"),
-      h("div", null, "State/Province"),
-      h("div", null, "Country"),
-      h("div", null, "Referrals"),
-      h("div", null, "Rewarddddddddddd Earningsssssssssssss"),
-      h("div", null, "Status"),
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Rewarddddddddddd Earningsssssssssssss",
+      "Status",
     ],
     rows: [
       [
@@ -287,7 +304,8 @@ const fullUserTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -295,7 +313,9 @@ const fullUserTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -303,15 +323,15 @@ const fullUserTableProps = {
   },
   elements: {
     columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "City"),
-      h("div", null, "State/Province"),
-      h("div", null, "Country"),
-      h("div", null, "Referrals"),
-      h("div", null, "Reward Earnings"),
-      h("div", null, "Status"),
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "Status",
     ],
     rows: [
       [
@@ -353,29 +373,30 @@ const fullUserTableProps = {
   },
 };
 export const SimpleUserTable = () => {
-  return h(ReferralTableView, Object.assign({}, simpleUserTableProps));
+  return h(GenericTableView, Object.assign({}, simpleUserTableProps));
 };
 export const HiddenLabelsTable = () => {
-  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
+  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
 };
 export const CustomButtonTextTable = () => {
-  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
+  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
 };
 export const FullUserTable = () => {
-  return h(ReferralTableView, Object.assign({}, fullUserTableProps));
+  return h(GenericTableView, Object.assign({}, fullUserTableProps));
 };
 export const LongCellTextTable = () => {
-  return h(ReferralTableView, Object.assign({}, longCellTextTableProps));
+  return h(GenericTableView, Object.assign({}, longCellTextTableProps));
 };
 export const LongColumnTextTable = () => {
-  return h(ReferralTableView, Object.assign({}, longColumnTextTableProps));
+  return h(GenericTableView, Object.assign({}, longColumnTextTableProps));
 };
 export const EmptyTable = () => {
   return (h("sqm-referral-table", { demoData: {
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: false,
+        show: "empty",
+        namespace: "sqm-referral-table",
       },
       data: {
         textOverrides: {
@@ -383,12 +404,14 @@ export const EmptyTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        referralData: [],
+        hiddenColumns: "",
+        mdBreakpoint: 899,
+        smBreakpoint: 599,
       },
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
-        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+        columns: ["Name", "Email", "DOB"],
         rows: [],
       },
     } }));
@@ -398,7 +421,8 @@ export const LoadingTable = () => {
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: true,
+        show: "loading",
+        namespace: "sqm-referral-table",
       },
       data: {
         textOverrides: {
@@ -406,12 +430,14 @@ export const LoadingTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        referralData: [],
+        hiddenColumns: "",
+        mdBreakpoint: 899,
+        smBreakpoint: 599,
       },
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
-        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+        columns: ["Name", "Email", "DOB"],
         rows: [],
       },
     } }));
@@ -421,7 +447,8 @@ export const FullRewardsTable = () => {
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: false,
+        show: "rows",
+        namespace: "sqm-referral-table",
       },
       data: {
         textOverrides: {
@@ -429,17 +456,19 @@ export const FullRewardsTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        referralData: [],
+        hiddenColumns: "",
+        mdBreakpoint: 899,
+        smBreakpoint: 599,
       },
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
         columns: [
-          h("div", null, "User"),
-          h("div", null, "Rewards"),
-          h("div", null, "Status"),
-          h("div", null, "Date Started"),
-          h("div", null, "Date Converted"),
+          "User",
+          "Rewards",
+          "Status",
+          "Date Started",
+          "Date Converted",
         ],
         rows: [
           [
@@ -448,14 +477,14 @@ export const FullRewardsTable = () => {
                 { ...baseReward, ...availableReward },
                 { ...baseReward, ...pendingReward },
                 { ...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}" }),
             h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
             h("sqm-referral-table-date-cell", { date: 1626764400000 }),
             h("sqm-referral-table-date-cell", { date: 1627427794891 }),
           ],
           [
             h("sqm-referral-table-user-cell", { name: "Sarah Williams" }),
-            h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }] }),
+            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}" }),
             h("sqm-referral-table-status-cell", { statusText: "Incomplete", converted: false }),
             h("sqm-referral-table-date-cell", { date: 1626764400000 }),
             h("sqm-referral-table-date-cell", { date: null }),
@@ -465,7 +494,7 @@ export const FullRewardsTable = () => {
             h("sqm-referral-table-rewards-cell", { rewards: [
                 { ...baseReward, ...nullExpiresIn },
                 { ...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: "{status} for {date}" }),
             h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
             h("sqm-referral-table-date-cell", { date: 1626764400000 }),
             h("sqm-referral-table-date-cell", { date: 1627427794891 }),

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

@@ -59,5 +59,5 @@ const rewardsData = {
 };
 const rewards = [rewardsData];
 export const RewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: rewards }));
+  return (h("sqm-referral-table-rewards-cell", { rewards: rewards, 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}" }));
 };

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

@@ -136,79 +136,79 @@ function getYears() {
   return DateTime.now().toMillis() + 200000000000;
 }
 export const PendingNoUnpend = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }] }));
+  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 }] }));
+  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 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 }] }));
+  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() },
-      ] }),
-    h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getHours() }] }),
-    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: 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() },
-      ] }),
-    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}" }),
+    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 }] }));
+  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 }] }));
+  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 }] }));
+  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 }));
+  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 }));
+  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 }));
+  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 }));
+  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 }));
+  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 }));
+  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 }));
+  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}" }));
 };

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

@@ -0,0 +1,119 @@
+import { setProgramId } from "@saasquatch/component-boilerplate";
+import { setUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useReferralTable",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+function setupGraphQLKlip({ token, id }) {
+  const accountId = id;
+  // const programId = "klip-referral-program";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a74miwdpofztj",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: token,
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const ReferralTable = createHookStory(() => {
+  setupGraphQL();
+  setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", null,
+    h("sqm-referral-table-user-column", null),
+    h("sqm-referral-table-status-column", null),
+    h("sqm-referral-table-date-column", null),
+    h("sqm-referral-table-rewards-column", null)));
+});
+export const ReferralTableEn = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
+    id: "samenglish",
+  });
+  setProgramId("klip-referral-program");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "per-page": "4" },
+    h("sqm-referral-table-user-column", { "column-title": "User" }),
+    h("sqm-referral-table-status-column", { "column-title": "Referral Status" }),
+    h("sqm-referral-table-rewards-column", null),
+    h("sqm-referral-table-date-column", { "column-title": "Date Referred", "date-shown": "dateReferralStarted" })));
+});
+export const ReferralTableTr = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
+    id: "samturkey",
+  });
+  setProgramId("klip-referral-program");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz \u00D6d\u00FCl Yok", "per-page": "4" },
+    h("sqm-referral-table-user-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131" }),
+    h("sqm-referral-table-status-column", { "column-title": "Durumu", "converted-status-text": "D\u00F6n\u00FC\u015Ft\u00FCr", "in-progress-status-text": "Devam etmekte" }),
+    h("sqm-referral-table-rewards-column", { "column-title": "\u00D6d\u00FCller", "status-text": "{status, select, AVAILABLE {Mevcut} CANCELLED {\u0130ptal edildi} PENDING {Bekliyor} EXPIRED {S\u00FCresi doldu} REDEEMED {Kullan\u0131ld\u0131} other {M\u00FCsait de\u011Fil} }", "status-long-text": "{status, select, AVAILABLE {\u00D6d\u00FCl s\u00FCresi doluyor} CANCELLED {\u00D6d\u00FCl iptal edildi} PENDING {\u00FCzerinde mevcut} EXPIRED {\u00D6d\u00FCl\u00FCn s\u00FCresi doldu} other {M\u00FCsait de\u011Fil} }", "reward-received-text": "\u00D6d\u00FCl \u015Fu tarihte al\u0131nd\u0131:" }),
+    h("sqm-referral-table-date-column", { "column-title": "Tarih", "date-shown": "dateReferralStarted" })));
+});
+export const ReferralTableFr = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
+    id: "samfrench",
+  });
+  setProgramId("klip-referral-program");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9f\u00E9rence Maintenant", "per-page": "4" },
+    h("sqm-referral-table-user-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9" }),
+    h("sqm-referral-table-status-column", { "column-title": "Statut de Parrainage", "converted-status-text": "Converti", "in-progress-status-text": "En cours" }),
+    h("sqm-referral-table-rewards-column", { "column-title": "R\u00E9compenses", "status-text": "{status, select, AVAILABLE {Disponible} CANCELLED {Annul\u00E9} PENDING {En attente} EXPIRED {Expir\u00E9} REDEEMED {Rachet\u00E9} other {Indisponible} }", "status-long-text": "{status, select, AVAILABLE {R\u00E9compense expirant sur} CANCELLED {R\u00E9compense annul\u00E9e sur} PENDING {Disponible sur} EXPIRED {R\u00E9compense expir\u00E9e sur} other {Indisponible} }", "reward-received-text": "R\u00E9compense re\u00E7ue" }),
+    h("sqm-referral-table-date-column", { "column-title": "Date de R\u00E9f\u00E9rence", "date-shown": "dateReferralStarted" })));
+});