@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -0,0 +1,437 @@
+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",
+      },
+      rewards: [
+        {
+          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",
+          statuses: ["REDEEMED"],
+          globalRewardKey: null,
+          programRewardKey: "partnerReward",
+          rewardRedemptionTransactions: {
+            data: [
+              {
+                exchangedRewards: {
+                  data: [
+                    {
+                      prettyValue: "CAD10.00 Visa* Prepaid Card CAD",
+                      type: "INTEGRATION",
+                      fuelTankCode: null,
+                      globalRewardKey: "gc1",
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+      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: [
+        {
+          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",
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+      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",
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+      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-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 const style = {
   THead: {
@@ -25,8 +24,7 @@ const style = {
     ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ReferralTableView(props) {
   var _a, _b;
@@ -43,9 +41,7 @@ export function ReferralTableView(props) {
         : !((_a = elements === null || elements === void 0 ? void 0 : elements.rows) === null || _a === void 0 ? void 0 : _a.length) && !((_b = data.referralData) === null || _b === void 0 ? void 0 : _b.length)
           ? elements.emptyElement
           : rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
-              borderTop: `${!data.textOverrides.showLabels && i === 0
-                ? "none"
-                : ""}`,
+              borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
             h(TextSpanView, { type: "p" }, cell))))))))),
     h("div", { class: sheet.classes.ButtonContainer, part: "sqm-referral-table-button-wrapper" },

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

@@ -1,16 +1,20 @@
-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 { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { ReferralTableView, } from "./sqm-referral-table-view";
-import { useReferralTable } from "./useReferralTable";
+import { GenericTableView, } from "../../tables/GenericTableView";
+import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
+import mockReferralData from "./mockReferralData";
+import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
  */
 export class ReferralTable {
   constructor() {
     /** @uiName Number of referrals per page */
-    this.perPage = 3;
+    this.perPage = 4;
     /** @uiName Show column labels */
     this.showLabels = true;
     /** @uiName Previous button text  */
@@ -19,16 +23,24 @@ export class ReferralTable {
     this.moreLabel = "Next";
     /** @uiName Show Referred by user in table  */
     this.showReferrer = false;
+    /** @uiName Hide Column Labels (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 634;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, null);
+    const empty = h("slot", { name: "empty" });
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
-      ? useReferraltableDemo(this)
+      ? useReferralTableDemo(this, empty, loading)
       : useReferralTable(this, empty, loading);
-    return (h(ReferralTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+    console.log("elemente", elements);
+    useRequestRerender([this.showReferrer, this.perPage]);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-referral-table"; }
   static get encapsulation() { return "shadow"; }
@@ -72,7 +84,7 @@ export class ReferralTable {
       },
       "attribute": "per-page",
       "reflect": false,
-      "defaultValue": "3"
+      "defaultValue": "4"
     },
     "showLabels": {
       "type": "boolean",
@@ -158,20 +170,83 @@ export class ReferralTable {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hiddenColumns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Column Labels (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hidden-columns",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "sm-breakpoint",
+      "reflect": false,
+      "defaultValue": "634"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "md-breakpoint",
+      "reflect": false,
+      "defaultValue": "899"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<ReferralTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; loading: boolean; hasNext: boolean; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; referralData?: Referral[]; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "original": "DemoData<GenericTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "ReferralTableViewProps": {
+          "GenericTableViewProps": {
             "location": "import",
-            "path": "./sqm-referral-table-view"
+            "path": "../../tables/GenericTableView"
           }
         }
       },
@@ -202,12 +277,66 @@ function LoadingRow() {
     h("sqm-table-cell", { colspan: 5 },
       h("sl-skeleton", null))));
 }
-function useReferraltableDemo(props) {
-  return deepmerge({
+function useReferralTableDemo(props, emptyElement, loadingElement) {
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const tick = useRerenderListener();
+  const { data } = mockReferralData;
+  const components = useChildElements();
+  async function getComponentData(components) {
+    let componentData;
+    const { data: mockData } = mockReferralData;
+    const referrerData = mockReferralData === null || mockReferralData === void 0 ? void 0 : mockReferralData.referredByReferral;
+    const showReferrerRow = props.showReferrer &&
+      !!(mockReferralData === null || mockReferralData === void 0 ? void 0 : mockReferralData.referredByReferral.dateReferralStarted);
+    if (showReferrerRow) {
+      componentData = mockData.slice(0, props.perPage - 1);
+    }
+    else {
+      componentData = mockData.slice(0, props.perPage);
+    }
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // show the referrer row before any other rows (renderReferrerCell is asynchronous)
+    let referrerRow;
+    if (showReferrerRow) {
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, function renderCell() {
+        return c.renderCell(referrerData, c);
+      }));
+      referrerRow = await Promise.all(referrerPromise);
+    }
+    // get the column cells (renderCell is asynchronous)
+    const cellsPromise = componentData === null || componentData === void 0 ? void 0 : componentData.map(async (r) => {
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, undefined)));
+      const cells = (await Promise.all(cellPromise));
+      return cells;
+    });
+    const rows = cellsPromise &&
+      [referrerRow, ...(await Promise.all(cellsPromise))].filter((value) => value);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: 0 });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    data && getComponentData(components);
+  }, [data, components, tick]);
+  const demoProps = deepmerge({
     states: {
       hasPrev: false,
       hasNext: false,
       loading: false,
+      show: "rows",
     },
     callbacks: {
       prevPage: () => console.log("Prev"),
@@ -222,17 +351,11 @@ function useReferraltableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: h(EmptySlot, null),
-      loadingElement: h(LoadingSlot, null),
-      // FIXME: Even in demo mode, this should use real column names!
-      columns: [h("div", null, "Example"), h("div", null, "Example"), h("div", null, "Example")],
-      rows: [],
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-function EmptySlot() {
-  return (h("slot", { name: "empty" },
-    h("div", { style: { width: "100%" } },
-      h("sqm-text", null,
-        h("h3", { style: { color: "#777777" } }, "No Referrals Yet")))));
+  return demoProps;
 }