@saasquatch/mint-components 1.5.0-97 → 1.5.0

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

@@ -1,326 +1,103 @@
-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: {
+import { DateTime } from "luxon";
+export default (count = 4) => {
+  const data = [...Array(count)].map(() => getMockData());
+  return { data };
+};
+const units = ["POINT", "TICKET", "GIFT"];
+const prettyValues = ["Points", "Tickets", "Gifts"];
+const statuses = ["AVAILABLE", "PENDING", "CANCELLED", "EXPIRED", "REDEEMED"];
+const pendingReasons = ["US_TAX", "SCHEDULED", "UNHANDLED_ERROR"];
+const getMockData = () => {
+  let isAvailableZero = false;
+  let randomRedeemed = 0;
+  let pendingReason;
+  let dateScheduledFor;
+  let dateCancelled;
+  let dateExpires;
+  const today = DateTime.now();
+  //  set random data
+  const randomUnitNumber = Math.floor(Math.random() * 3);
+  const randomStatus = statuses[Math.floor(Math.random() * 5)];
+  const unit = units[randomUnitNumber];
+  const prettyValue = prettyValues[randomUnitNumber];
+  const randomValue = Math.floor(Math.random() * 100) + 2;
+  // set random values depending on status
+  let prettyAvailableValue;
+  if (randomStatus === "AVAILABLE") {
+    prettyAvailableValue = `${randomValue} ${prettyValue}`;
+    randomRedeemed = Math.floor(Math.random() * randomValue);
+    dateExpires =
+      Math.floor(Math.random() * 10) < 3 ? today.plus({ days: 7 }).toMillis() : null;
+  }
+  else if (randomStatus === "EXPIRED") {
+    prettyAvailableValue = `0 ${prettyValue}`;
+    isAvailableZero = true;
+    randomRedeemed = Math.floor(Math.random() * randomValue);
+    dateExpires = today.minus({ days: 1 }).toMillis();
+  }
+  else if (randomStatus === "PENDING") {
+    const reason = pendingReasons[Math.floor(Math.random() * 3)];
+    pendingReason = [reason];
+    if (reason === "SCHEDULED") {
+      dateScheduledFor = today.plus({ days: 6 }).toMillis();
+    }
+  }
+  else if (randomStatus === "REDEEMED") {
+    prettyAvailableValue = `0 ${prettyValue}`;
+    isAvailableZero = true;
+  }
+  else {
+    prettyAvailableValue = `0 ${prettyValue}`;
+    isAvailableZero = true;
+    dateCancelled = today.minus({ days: 2 }).toMillis();
+  }
+  const source = Math.floor(Math.random() * 3);
+  return {
+    id: "61f7878e096c9265de88b46f",
+    type: "CREDIT",
+    value: randomValue,
+    unit,
+    name: null,
+    dateGiven: today.minus({ days: 3 }).toMillis(),
+    dateExpires,
+    dateCancelled,
+    dateRedeemed: randomStatus === "REDEEMED" ? today.plus({ days: 2 }).toMillis() : null,
+    dateScheduledFor,
+    fuelTankCode: null,
+    fuelTankType: null,
+    currency: null,
+    prettyValue: `${randomValue} ${prettyValue}`,
+    prettyValueNumber: `${randomValue}`,
+    prettyAvailableNumber: isAvailableZero
+      ? "0"
+      : `${randomValue - randomRedeemed}`,
+    prettyRedeemedNumber: isAvailableZero && !randomRedeemed ? "0" : `${randomRedeemed}`,
+    programId: source === 1 ? "program-id" : null,
+    program: {
+      name: "My Program",
+    },
+    statuses: [randomStatus],
+    pendingReasons: pendingReason,
+    globalRewardKey: null,
+    programRewardKey: null,
+    rewardSource: source === 1 ? "AUTOMATED" : "MANUAL",
+    prettyRedeemedCredit: `${randomRedeemed} ${prettyValue}`,
+    prettyAssignedCredit: `${randomValue} ${prettyValue}`,
+    prettyAvailableValue: isAvailableZero
+      ? `0 ${prettyValue}`
+      : `${randomValue - randomRedeemed} ${prettyValue}`,
+    exchangedRewardRedemptionTransaction: source === 2
+      ? {
         id: "61f7878e096c9265de88b414",
         creditRedeemed: 50,
-        prettyRedeemedCredit: "50 Points",
-        unit: "POINT",
+        prettyRedeemedCredit: "50 Tokens",
+        unit: "TOKEN",
         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: [],
-      },
+      }
+      : null,
+    referral: null,
+    rewardRedemptionTransactions: {
+      data: [],
     },
-  ],
+  };
 };

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

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer } from "@saasquatch/universal-hooks";
+import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -9,7 +9,7 @@ import { useChildElements } from "../../tables/useChildElements";
 import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
- * @uiName Rewards Table
+ * @uiName Reward Table
  */
 export class RewardsTable {
   constructor() {
@@ -21,17 +21,20 @@ export class RewardsTable {
     this.prevLabel = "Prev";
     /** @uiName View More button text  */
     this.moreLabel = "Next";
-    /** @uiName Hide Columns (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)  */
+    /** @uiName Mobile Breakpoint  */
     this.smBreakpoint = 599;
-    /** @uiName Hide Columns (Mobile View)  */
-    this.mdBreakpoint = 899;
+    /** @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()
       ? useRewardsTableDemo(this, empty, loading)
@@ -158,10 +161,10 @@ export class RewardsTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (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,
@@ -179,7 +182,7 @@ export class RewardsTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Columns (Mobile View)",
+            "text": "Mobile Breakpoint",
             "name": "uiName"
           }],
         "text": ""
@@ -200,14 +203,14 @@ export class RewardsTable {
       "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",
@@ -241,6 +244,10 @@ export class RewardsTable {
     }
   }; }
 }
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
+}
 function LoadingSlot() {
   return (h("slot", { name: "loading" },
     h(LoadingRow, null),
@@ -264,7 +271,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     page: 0,
   });
   const tick = useRerenderListener();
-  const { data } = mockRewardData;
+  const { data } = useMemo(() => mockRewardData(props.perPage), [props.perPage]);
   const components = useChildElements();
   async function getComponentData(components) {
     let componentData = data;
@@ -276,7 +283,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     // 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 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;
     });
@@ -308,6 +315,8 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       referralData: [],
+      mdBreakpoint: 799,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,

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

@@ -5,6 +5,8 @@ import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
 import { generateUserError } from "../sqm-referral-table/useReferralTable";
+import debugFn from "debug";
+const debug = debugFn("sq:useRewardsTable");
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `
   query getRewards(
@@ -16,7 +18,12 @@ const GET_REWARDS = gql `
     viewer {
       ... on User {
         id
-        rewards(limit: $limit, offset: $offset, filter: $rewardFilter) {
+        rewards(
+          limit: $limit
+          offset: $offset
+          filter: $rewardFilter
+          sortBy: { field: "dateCreated", order: DESC }
+        ) {
           totalCount
           count
           data {
@@ -29,6 +36,7 @@ const GET_REWARDS = gql `
             unit
             name
             dateGiven
+            dateCreated
             dateExpires
             dateCancelled
             dateRedeemed
@@ -142,7 +150,7 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], locale)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, locale)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -209,7 +217,7 @@ export async function tryMethod(c, callback) {
   catch (e) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
-    console.error("label promise failed", e);
+    debug("label promise failed", e);
     return h("span", null);
   }
   try {
@@ -218,7 +226,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"),