@saasquatch/mint-components 1.5.0-85 → 1.5.0-89

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -1,21 +1,187 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { e as useReducer, u as useEffect, m as h$1 } from './stencil-hooks.module-2f159754.js';
-import { i as intl } from './global-c2179248.js';
-import './use-callback-d8ef4b5d.js';
-import { d as dist, n as ne, M, R, w as wn, k } from './index.module-ec3dcc82.js';
+import { u as useReducer, e as useEffect, m as h$1 } from './stencil-hooks.module-acc8a613.js';
+import { i as intl } from './global-7d4eb5e5.js';
+import './use-callback-7e0bfd3b.js';
+import { d as dist, i as ie, M, A as An, a as mn, j as jn } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { G as GenericTableView } from './GenericTableView-0c811879.js';
-import { R as RewardsCellCreditFull, S as StatusCellAvailable, a as SourceCellReferral, D as DateCell, b as RewardsCellCreditCancelled, c as StatusCellCancelled, d as SourceCellDeletedUser, e as RewardsCellCreditRedeemed, f as StatusCellRedeemed, g as SourceCellManual, h as RewardsCellCreditPartial, i as StatusCellAvailableExpiry, j as SourceCellReferred } from './RewardsTableCell.stories-21ae3b86.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-43311710.js';
-import { u as useChildElements } from './useChildElements-0146a8bd.js';
-import { g as generateUserError } from './useReferralTable-596519fc.js';
-import { l as luxon } from './luxon-5fa22651.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-544e9c59.js';
+import { u as useChildElements } from './useChildElements-db935587.js';
+import { g as generateUserError } from './useReferralTable-15634a86.js';
+import { l as luxon } from './luxon-f44215d9.js';
 import { l as luxonLocale } from './utils-1d345130.js';
 import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 
+const mockRewardData = {
+  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: [],
+      },
+    },
+  ],
+};
+
 const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = dist.gql `
   query getRewards(
@@ -109,9 +275,9 @@ const GET_REWARDS = dist.gql `
 `;
 function useRewardsTable(props, emptyElement, loadingElement) {
   var _a, _b;
-  const user = ne();
+  const user = ie();
   const programIdContext = M();
-  const locale = R();
+  const locale = An();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   const rewardFilter = {
@@ -133,7 +299,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const { envelope: rewardsData, states, callbacks, } = wn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.rewards; }, {
+  const { envelope: rewardsData, states, callbacks, } = mn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.rewards; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -257,9 +423,10 @@ const RewardsTable = class {
   render() {
     const empty = h("slot", { name: "empty" });
     const loading = h(LoadingSlot, null);
-    const { states, data, callbacks, elements } = k()
-      ? useRewardsTableDemo(this)
+    const { states, data, callbacks, elements } = jn()
+      ? useRewardsTableDemo(this, empty, loading)
       : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
 };
@@ -269,14 +436,47 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5 }, h("sl-skeleton", null))));
 }
-function useRewardsTableDemo(props) {
-  return cjs({
+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) {
+    // 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 = 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], 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 = cjs({
     states: {
       hasPrev: false,
       hasNext: false,
       loading: false,
       show: "rows",
-      namespace: CSS_NAMESPACE,
     },
     callbacks: {
       prevPage: () => console.log("Prev"),
@@ -291,38 +491,13 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: (h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateHeader: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks", table: true })),
-      loadingElement: h(LoadingSlot, null),
-      // TODO: This should be smarter
-      columns: ["Reward", "Source", "Status", "Date recieved"],
-      rows: [
-        [
-          h(RewardsCellCreditFull, null),
-          h(StatusCellAvailable, null),
-          h(SourceCellReferral, null),
-          h(DateCell, null),
-        ],
-        [
-          h(RewardsCellCreditCancelled, null),
-          h(StatusCellCancelled, null),
-          h(SourceCellDeletedUser, null),
-          h(DateCell, null),
-        ],
-        [
-          h(RewardsCellCreditRedeemed, null),
-          h(StatusCellRedeemed, null),
-          h(SourceCellManual, null),
-          h(DateCell, null),
-        ],
-        [
-          h(RewardsCellCreditPartial, null),
-          h(StatusCellAvailableExpiry, null),
-          h(SourceCellReferred, null),
-          h(DateCell, null),
-        ],
-      ],
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  return demoProps;
 }
 
 const RewardTableDateCell = class {
@@ -725,7 +900,7 @@ const RewardTableStatusCell = class {
             " " + ((_a = luxon.DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale))).toLocaleString(luxon.DateTime.DATE_MED)),
         UNHANDLED_ERROR: prop.pendingUnhandled,
       };
-      return prop.reward.pendingReasons
+      return [prop.reward.pendingReasons]
         .map((s) => { var _a; return (_a = pendingCodeMap[s]) !== null && _a !== void 0 ? _a : s; })
         .join(", ");
     }

package/dist/esm/sqm-stat-container.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-2f159754.js';
+import { m as h } from './stencil-hooks.module-acc8a613.js';
 import './extends-c31f1eff.js';
 import './JSS-96eeab98.js';
 import { g as getProps } from './utils-1d345130.js';