@saasquatch/mint-components 1.4.2 → 1.5.0-100

package/dist/collection/components/sqm-rewards-table/mockRewardData.js

@@ -0,0 +1,326 @@
+export default {
+  totalCount: 53,
+  count: 4,
+  data: [
+    {
+      id: "61f7878e096c9265de88b46f",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643612046293,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f7878e096c9265de88b414",
+        creditRedeemed: 50,
+        prettyRedeemedCredit: "50 Points",
+        unit: "POINT",
+        dateRedeemed: 1643612046258,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f449ca096c9265de847ef5",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643399626845,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f449ca096c9265de847ecf",
+        creditRedeemed: 50,
+        prettyRedeemedCredit: "50 Points",
+        unit: "POINT",
+        dateRedeemed: 1643399626808,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f43c3d40b8d244bb05dc51",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643396157092,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f43c3d40b8d244bb05dbfa",
+        creditRedeemed: 25,
+        prettyRedeemedCredit: "25 Points",
+        unit: "POINT",
+        dateRedeemed: 1643396157045,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f43b4a40b8d244bb05cfe4",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643395914220,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f43b4a40b8d244bb05cf8c",
+        creditRedeemed: 25,
+        prettyRedeemedCredit: "25 Points",
+        unit: "POINT",
+        dateRedeemed: 1643395914151,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f43b4a40b8d244bb05cfe4",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643395914220,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f43b4a40b8d244bb05cf8c",
+        creditRedeemed: 25,
+        prettyRedeemedCredit: "25 Points",
+        unit: "POINT",
+        dateRedeemed: 1643395914151,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f43b4a40b8d244bb05cfe4",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643395914220,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f43b4a40b8d244bb05cf8c",
+        creditRedeemed: 25,
+        prettyRedeemedCredit: "25 Points",
+        unit: "POINT",
+        dateRedeemed: 1643395914151,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f43b4a40b8d244bb05cfe4",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643395914220,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f43b4a40b8d244bb05cf8c",
+        creditRedeemed: 25,
+        prettyRedeemedCredit: "25 Points",
+        unit: "POINT",
+        dateRedeemed: 1643395914151,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+    {
+      id: "61f43b4a40b8d244bb05cfe4",
+      type: "CREDIT",
+      value: 1,
+      unit: "THING",
+      name: null,
+      dateGiven: 1643395914220,
+      dateExpires: null,
+      dateCancelled: null,
+      dateRedeemed: null,
+      dateScheduledFor: null,
+      fuelTankCode: null,
+      fuelTankType: null,
+      currency: null,
+      prettyValue: "1 THING",
+      prettyValueNumber: "1",
+      prettyAvailableNumber: "1",
+      prettyRedeemedNumber: "0",
+      programId: null,
+      program: null,
+      statuses: ["AVAILABLE"],
+      pendingReasons: [],
+      globalRewardKey: null,
+      programRewardKey: null,
+      rewardSource: "MANUAL",
+      prettyRedeemedCredit: "0 THING",
+      prettyAssignedCredit: "1 THING",
+      prettyAvailableValue: "1 THING",
+      exchangedRewardRedemptionTransaction: {
+        id: "61f43b4a40b8d244bb05cf8c",
+        creditRedeemed: 25,
+        prettyRedeemedCredit: "25 Points",
+        unit: "POINT",
+        dateRedeemed: 1643395914151,
+      },
+      referral: null,
+      rewardRedemptionTransactions: {
+        data: [],
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,320 @@
+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 { GenericTableView, } from "../../tables/GenericTableView";
+import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
+import mockRewardData from "./mockRewardData";
+import { tryMethod, useRewardsTable } from "./useRewardsTable";
+/**
+ * @uiName Rewards Table
+ */
+export class RewardsTable {
+  constructor() {
+    /** @uiName Number of rewards per page */
+    this.perPage = 4;
+    /** @uiName Show column labels */
+    this.showLabels = true;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 599;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h("slot", { name: "empty" });
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = isDemo()
+      ? useRewardsTableDemo(this, empty, loading)
+      : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+  static get is() { return "sqm-rewards-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Program",
+            "name": "uiName"
+          }],
+        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "perPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of rewards per page",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "per-page",
+      "reflect": false,
+      "defaultValue": "4"
+    },
+    "showLabels": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Show column labels",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-labels",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "prevLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Previous button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "prev-label",
+      "reflect": false,
+      "defaultValue": "\"Prev\""
+    },
+    "moreLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "View More button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "more-label",
+      "reflect": false,
+      "defaultValue": "\"Next\""
+    },
+    "hiddenColumns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (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": "599"
+    },
+    "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<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"
+          },
+          "GenericTableViewProps": {
+            "location": "import",
+            "path": "../../tables/GenericTableView"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
+}
+function useRewardsTableDemo(props, emptyElement, loadingElement) {
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const tick = useRerenderListener();
+  const { data } = mockRewardData;
+  const components = useChildElements();
+  async function getComponentData(components) {
+    let componentData = data;
+    componentData = 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");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // get the column cells (renderCell is asynchronous)
+    //@ts-ignore
+    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 && (await Promise.all(cellsPromise)).filter((i) => i);
+    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"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  return demoProps;
+}