@saasquatch/mint-components 1.5.0-97 → 1.5.0

package/dist/collection/components/sqm-referral-table/mockReferralData.js

@@ -1,43 +1,83 @@
-export default {
-  totalCount: 6,
-  count: 4,
-  referredByReferral: {
-    dateConverted: null,
-    dateReferralStarted: 1643912659850,
-    referrerUser: {
-      firstName: "John",
-      lastName: "Snow",
-      rewards: [],
-    },
-  },
-  data: [
-    {
-      id: "5cae6b0fcc540e209db45b53",
-      referredUser: {
-        id: "5cae6b0ce4b0d81c67b78e82",
-        accountId: "SPX1MZBIPTFL3E1H",
-        firstName: "Aaron",
-        lastName: "Hernandez",
-        email: "aaronhernandez.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: 1554934550726,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1558730033306,
-      dateModified: 1554934543447,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934543447,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
+import { DateTime } from "luxon";
+export default (count = 4) => {
+  const data = [...Array(count)].map(() => getMockData());
+  return {
+    totalCount: 6,
+    count,
+    referredByReferral: {
+      dateConverted: null,
+      dateReferralStarted: 1643912659850,
+      referrerUser: {
+        firstName: "John",
+        lastName: "Snow",
+        rewards: [],
       },
-      rewards: [
+    },
+    data,
+  };
+};
+const statuses = [
+  ["AVAILABLE"],
+  ["PENDING"],
+  ["CANCELLED"],
+  ["EXPIRED"],
+  ["REDEEMED"],
+];
+const firstNames = [
+  "Rajesh",
+  "Pierre",
+  "Ji-Ho",
+  "Chinua",
+  "Charleston",
+  "Sally",
+  "Gael",
+  "Jill",
+  "Jane",
+  "Khadija",
+];
+const lastNames = [
+  "Smith",
+  "Parker",
+  "Kent",
+  "Chew",
+  "Stark",
+  "Banner",
+  "Jones",
+  "Odinson",
+  "Pym",
+  "Rogers",
+];
+const getMockData = () => {
+  return {
+    id: "5cae6b0fcc540e209db45b53",
+    referredUser: {
+      id: "5cae6b0ce4b0d81c67b78e82",
+      accountId: "SPX1MZBIPTFL3E1H",
+      firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
+      lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
+      email: "example.uexwltgh@mailosaur.io",
+      programGoals: [],
+    },
+    shareLinkUsed: null,
+    referralCodeUsed: "JIMBONEUTRON2",
+    moderationStatus: "PENDING",
+    dateConverted: Math.floor(Math.random() * 10) >= 5
+      ? DateTime.now().minus({ days: 6 }).toMillis()
+      : null,
+    dateFraudChecksCompleted: null,
+    dateModerated: 1558730033306,
+    dateModified: 1554934543447,
+    dateReferralEnded: null,
+    dateReferralPaid: null,
+    dateReferralStarted: DateTime.now().minus({ days: 8 }).toMillis(),
+    dateUserModified: null,
+    programId: "sam-partner-test-2",
+    program: {
+      id: "sam-partner-test-2",
+      name: "Partner Program 2.0",
+    },
+    rewards: Math.floor(Math.random() * 10) >= 5
+      ? [
         {
           id: "5cae6b16cc540e209db45cfa",
           type: "CREDIT",
@@ -53,7 +93,7 @@ export default {
           fuelTankType: null,
           currency: null,
           prettyValue: "1 Point",
-          statuses: ["REDEEMED"],
+          statuses: statuses[Math.floor(Math.random() * statuses.length)],
           globalRewardKey: null,
           programRewardKey: "partnerReward",
           rewardRedemptionTransactions: {
@@ -73,365 +113,29 @@ export default {
             ],
           },
         },
-      ],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6b16cc540e209db45cb3",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-          {
-            data: {
-              id: "5cae6b16cc540e209db45cfa",
-              statuses: ["REDEEMED"],
-              type: "CREDIT",
-              value: 1,
-            },
-            depth: 1,
-          },
-        ],
-      },
-    },
-    {
-      id: "5cae6a92cc540e209db45106",
-      referredUser: {
-        id: "5cae6a8fe4b0d81c67b78e60",
-        accountId: "B5DY96TJ2HFF321L",
-        firstName: "Brian",
-        lastName: "Mendez",
-        email: "brianmendez.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: 1554934455495,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1558730033311,
-      dateModified: 1554934418374,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934418374,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
-      },
-      rewards: [
+      ]
+      : [],
+    childNodes: {
+      data: [
         {
-          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",
-          statuses: ["REDEEMED"],
-          globalRewardKey: null,
-          programRewardKey: "partnerReward",
-          rewardRedemptionTransactions: {
-            data: [
-              {
-                exchangedRewards: {
-                  data: [
-                    {
-                      prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                      type: "INTEGRATION",
-                      fuelTankCode: null,
-                      globalRewardKey: "gc1",
-                    },
-                  ],
-                },
-              },
-            ],
+          data: {
+            id: "5cae6b16cc540e209db45cb3",
+            statuses: statuses[Math.floor(Math.random() * statuses.length)],
+            type: "PCT_DISCOUNT",
+            value: 50,
           },
+          depth: 1,
         },
-      ],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6ab7cc540e209db456cc",
-              statuses: ["REDEEMED"],
-              type: "CREDIT",
-              value: 1,
-            },
-            depth: 1,
-          },
-          {
-            data: {
-              id: "5cae6a92cc540e209db45136",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-        ],
-      },
-    },
-    {
-      id: "5cae6a42cc540e209db44b5a",
-      referredUser: {
-        id: "5cae6a40e4b0d81c67b78e3e",
-        accountId: "3TW6KPEDCKIMUMPS",
-        firstName: "Loretta",
-        lastName: "Harper",
-        email: "lorettaharper.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: 1554934342984,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1558730033315,
-      dateModified: 1554934338318,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934338318,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
-      },
-      rewards: [
         {
-          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",
-          statuses: ["REDEEMED"],
-          globalRewardKey: null,
-          programRewardKey: "partnerReward",
-          rewardRedemptionTransactions: {
-            data: [
-              {
-                exchangedRewards: {
-                  data: [
-                    {
-                      prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
-                      type: "INTEGRATION",
-                      fuelTankCode: null,
-                      globalRewardKey: "gc1",
-                    },
-                  ],
-                },
-              },
-            ],
+          data: {
+            id: "5cae6b16cc540e209db45cfa",
+            statuses: statuses[Math.floor(Math.random() * statuses.length)],
+            type: "CREDIT",
+            value: 1,
           },
+          depth: 1,
         },
       ],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6a42cc540e209db44b7e",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-          {
-            data: {
-              id: "5cae6a46cc540e209db44cf2",
-              statuses: ["REDEEMED"],
-              type: "CREDIT",
-              value: 1,
-            },
-            depth: 1,
-          },
-        ],
-      },
-    },
-    {
-      id: "5cae6a37cc540e209db44937",
-      referredUser: {
-        id: "5cae6a33e4b0d81c67b78e1e",
-        accountId: "41E0PY65021C3T5Z",
-        firstName: "Isaac",
-        lastName: "Meyer",
-        email: "isaacmeyer.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: null,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1554934327291,
-      dateModified: 1554934327291,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934327291,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
-      },
-      rewards: [],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6a37cc540e209db44954",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-        ],
-      },
-    },
-    {
-      id: "5cae6a37cc540e209db44937",
-      referredUser: {
-        id: "5cae6a33e4b0d81c67b78e1e",
-        accountId: "41E0PY65021C3T5Z",
-        firstName: "Joe",
-        lastName: "Schmoe",
-        email: "joeschmoe.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: null,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1554934327291,
-      dateModified: 1554934327291,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934327291,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
-      },
-      rewards: [],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6a37cc540e209db44954",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-        ],
-      },
-    },
-    {
-      id: "5cae6a37cc540e209db44937",
-      referredUser: {
-        id: "5cae6a33e4b0d81c67b78e1e",
-        accountId: "41E0PY65021C3T5Z",
-        firstName: "John",
-        lastName: "Smith",
-        email: "johnsmith.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: null,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1554934327291,
-      dateModified: 1554934327291,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934327291,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
-      },
-      rewards: [],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6a37cc540e209db44954",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-        ],
-      },
-    },
-    {
-      id: "5cae6a37cc540e209db44937",
-      referredUser: {
-        id: "5cae6a33e4b0d81c67b78e1e",
-        accountId: "41E0PY65021C3T5Z",
-        firstName: "Charleston",
-        lastName: "Chew",
-        email: "charlestonchew.uexwltgh@mailosaur.io",
-        programGoals: [],
-      },
-      shareLinkUsed: null,
-      referralCodeUsed: "JIMBONEUTRON2",
-      moderationStatus: "PENDING",
-      dateConverted: 1554934550726,
-      dateFraudChecksCompleted: null,
-      dateModerated: 1554934327291,
-      dateModified: 1554934327291,
-      dateReferralEnded: null,
-      dateReferralPaid: null,
-      dateReferralStarted: 1554934327291,
-      dateUserModified: null,
-      programId: "sam-partner-test-2",
-      program: {
-        id: "sam-partner-test-2",
-        name: "Partner Program 2.0",
-      },
-      rewards: [],
-      childNodes: {
-        data: [
-          {
-            data: {
-              id: "5cae6a37cc540e209db44954",
-              statuses: ["AVAILABLE"],
-              type: "PCT_DISCOUNT",
-              value: 50,
-            },
-            depth: 1,
-          },
-        ],
-      },
     },
-  ],
+  };
 };

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

@@ -1,6 +1,6 @@
-import { isDemo, } from "@saasquatch/component-boilerplate";
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -23,22 +23,24 @@ export class ReferralTable {
     this.moreLabel = "Next";
     /** @uiName Show Referred by user in table  */
     this.showReferrer = false;
-    /** @uiName Hide Column Labels (Mobile View)  */
+    /**
+     * Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3
+     *
+     *  @uiName Mobile Hidden Columns  */
     this.hiddenColumns = "0";
-    /** @uiName Hide Columns (Mobile View)  */
-    this.smBreakpoint = 634;
-    /** @uiName Hide Columns (Mobile View)  */
-    this.mdBreakpoint = 899;
+    /** @uiName Mobile Breakpoint  */
+    this.smBreakpoint = 599;
+    /** @uiName Tablet Breakpoint  */
+    this.mdBreakpoint = 799;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h("slot", { name: "empty" });
+    const empty = h(EmptySlot, null);
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useReferralTableDemo(this, empty, loading)
       : useReferralTable(this, empty, loading);
-    console.log("elemente", elements);
     useRequestRerender([this.showReferrer, this.perPage]);
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
@@ -182,10 +184,10 @@ export class ReferralTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Column Labels (Mobile View)",
+            "text": "Mobile Hidden Columns",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3"
       },
       "attribute": "hidden-columns",
       "reflect": false,
@@ -203,14 +205,14 @@ export class ReferralTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (Mobile View)",
+            "text": "Mobile Breakpoint",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "sm-breakpoint",
       "reflect": false,
-      "defaultValue": "634"
+      "defaultValue": "599"
     },
     "mdBreakpoint": {
       "type": "number",
@@ -224,14 +226,14 @@ export class ReferralTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (Mobile View)",
+            "text": "Tablet Breakpoint",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "md-breakpoint",
       "reflect": false,
-      "defaultValue": "899"
+      "defaultValue": "799"
     },
     "demoData": {
       "type": "unknown",
@@ -265,6 +267,10 @@ export class ReferralTable {
     }
   }; }
 }
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Refer a friend to view the status of your referrals and rewards earned" })));
+}
 function LoadingSlot() {
   return (h("slot", { name: "loading" },
     h(LoadingRow, null),
@@ -288,19 +294,21 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     page: 0,
   });
   const tick = useRerenderListener();
-  const { data } = mockReferralData;
+  const mockData = useMemo(() => mockReferralData(props.perPage), [props.perPage]);
   const components = useChildElements();
   async function getComponentData(components) {
+    var _a;
     let componentData;
-    const { data: mockData } = mockReferralData;
-    const referrerData = mockReferralData === null || mockReferralData === void 0 ? void 0 : mockReferralData.referredByReferral;
+    //@ts-ignore
+    const referrerData = mockData === null || mockData === void 0 ? void 0 : mockData.referredByReferral;
     const showReferrerRow = props.showReferrer &&
-      !!(mockReferralData === null || mockReferralData === void 0 ? void 0 : mockReferralData.referredByReferral.dateReferralStarted);
+      //@ts-ignore
+      !!((_a = mockData === null || mockData === void 0 ? void 0 : mockData.referredByReferral) === null || _a === void 0 ? void 0 : _a.dateReferralStarted);
     if (showReferrerRow) {
-      componentData = mockData.slice(0, props.perPage - 1);
+      componentData = mockData.data.slice(0, props.perPage - 1);
     }
     else {
-      componentData = mockData.slice(0, props.perPage);
+      componentData = mockData.data.slice(0, props.perPage);
     }
     // filter out loading and empty states from columns array
     const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
@@ -329,8 +337,8 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
   }
   useEffect(() => {
     setContent({ loading: true });
-    data && getComponentData(components);
-  }, [data, components, tick]);
+    (mockData === null || mockData === void 0 ? void 0 : mockData.data) && getComponentData(components);
+  }, [mockData === null || mockData === void 0 ? void 0 : mockData.data, components, tick]);
   const demoProps = deepmerge({
     states: {
       hasPrev: false,
@@ -348,7 +356,10 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },
+      hiddenColumns: props.hiddenColumns,
       referralData: [],
+      mdBreakpoint: 799,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,

package/dist/collection/components/sqm-referral-table/useReferralTable.js

@@ -4,6 +4,8 @@ import { h } from "@stencil/core";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
+import debugFn from "debug";
+const debug = debugFn("sq:useReferralTable");
 export const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = gql `
   query getReferrals(
@@ -326,12 +328,12 @@ export async function tryMethod(c, callback) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
     if (callback.name === "renderReferrerCell") {
-      console.error("column does not have a renderReferrerCell method.");
+      debug("column does not have a renderReferrerCell method.");
     }
     else {
-      console.error("label promise failed", e);
+      debug("label promise failed", e);
     }
-    console.error("label promise failed", e);
+    debug("label promise failed", e);
     return h("span", null);
   }
   try {
@@ -340,7 +342,7 @@ export async function tryMethod(c, callback) {
   catch (e) {
     // The column returned a promise, and that promise failed.
     // This should not happen so we fail fast
-    console.error("Error rendering label", e);
+    debug("Error rendering label", e);
     const userError = generateUserError(e);
     return (h("details", null,
       h("summary", null, "Error"),