@saasquatch/mint-components 1.3.2-1 → 1.3.2-13

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

@@ -1,328 +0,0 @@
-import { h, r as registerInstance } from './index-17b4da69.js';
-import { u as useReducer, e as useEffect, m as h$1 } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { T, M, a as sn, j } from './index.module-f80561db.js';
-import './tslib.es6-7ac9d7e4.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
-import { c as cjs } from './cjs-bdfb4486.js';
-import { g as gap } from './mixins-10353a39.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql } from './index-2f5dd0a1.js';
-import { u as useRerenderListener } from './re-render-9ab5fe0f.js';
-import { u as useChildElements } from './useChildElements-506f00d0.js';
-
-const style = {
-  THead: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-    "text-align": "left",
-  },
-  TCell: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-  },
-  TRow: {
-    "border-top": "1px solid #EAEAEA",
-  },
-  Table: {
-    "border-collapse": "collapse",
-    width: "100%",
-  },
-  ButtonContainer: {
-    display: "flex",
-    "justify-content": "flex-end",
-    "margin-top": "var(--sl-spacing-small)",
-    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
-  },
-};
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-function GenericTableView(props) {
-  const { states, data, callbacks, elements } = props;
-  const { columns, rows } = elements;
-  const { show } = states;
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString),
-    h("table", { class: sheet.classes.Table },
-      data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet.classes.THead },
-          h(TextSpanView, { type: "h3" }, column))))))),
-      h("tbody", null,
-        show === "loading" && elements.loadingElement,
-        show === "empty" && elements.emptyElement,
-        show === "rows" && (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" : ""}`,
-          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
-          h(TextSpanView, { type: "p" }, cell)))))))))),
-    h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
-}
-
-function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h(LoadingSkeleton, null)));
-}
-function LoadingSkeleton() {
-  return (h("div", { style: { width: "100%" } },
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", null)));
-}
-function EmptySlot({ label }) {
-  return (h("slot", { name: "empty" },
-    h(EmptySkeleton, { label: label })));
-}
-function EmptySkeleton({ label }) {
-  return (h("div", { style: { width: "100%" } },
-    h("sqm-text", null,
-      h("h3", { style: { color: "#777777" } }, label))));
-}
-
-const CSS_NAMESPACE = "sqm-rewards-table";
-const GET_REWARDS = gql `
-  query getRewards(
-    $limit: Int!
-    $offset: Int!
-    $referralFilter: ReferralFilterInput
-    $rewardFilter: RewardFilterInput
-  ) {
-    viewer {
-      ... on User {
-        id
-        rewards(limit: $limit, offset: $offset, filter: $referralFilter) {
-          totalCount
-          count
-          data {
-            id
-            type
-            value
-            unit
-            name
-            dateGiven
-            dateExpires
-            dateCancelled
-            dateRedeemed
-            dateScheduledFor
-            fuelTankCode
-            fuelTankType
-            currency
-            prettyValue
-            statuses
-            globalRewardKey
-            programRewardKey
-            rewardRedemptionTransactions {
-              data {
-                exchangedRewards {
-                  data {
-                    prettyValue
-                    type
-                    fuelTankCode
-                    globalRewardKey
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function useRewardsTable(props, emptyElement, loadingElement) {
-  var _a, _b;
-  const user = T();
-  const programIdContext = M();
-  // Default to context, overriden by props
-  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  // If no program ID, shows all programs
-  const referralFilter = programId
-    ? programId === "classic"
-      ? { programId_exists: false }
-      : { programId_eq: programId }
-    : {};
-  const rewardFilter = {
-    userId_eq: user === null || user === void 0 ? void 0 : user.id,
-    accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
-  };
-  const [content, setContent] = useReducer((state, next) => ({
-    ...state,
-    ...next,
-  }), {
-    columns: [],
-    rows: [],
-    loading: false,
-    page: 0,
-  });
-  const { envelope: rewardsData, states, callbacks, } = sn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
-    limit: props.perPage,
-    offset: 0,
-  }, {
-    referralFilter,
-    rewardFilter,
-  }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const tick = useRerenderListener();
-  const components = useChildElements();
-  const data = rewardsData === null || rewardsData === void 0 ? void 0 : rewardsData.data;
-  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)
-    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, c)));
-      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: states.currentPage });
-  }
-  useEffect(() => {
-    setContent({ loading: true });
-    rewardsData && getComponentData(components);
-  }, [rewardsData, components, tick]);
-  const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
-  const show = 
-  // 1 - Loading if loading
-  states.loading || content.loading
-    ? "loading"
-    : // 2 - Empty if empty
-      isEmpty
-        ? "empty"
-        : // 3 - Then show rows
-          "rows";
-  return {
-    states: {
-      hasNext: states.currentPage < states.pageCount - 1,
-      hasPrev: states.currentPage > 0,
-      show,
-      namespace: CSS_NAMESPACE
-    },
-    data: {
-      textOverrides: {
-        showLabels: props.showLabels,
-        prevLabel: props.prevLabel,
-        moreLabel: props.moreLabel,
-      },
-    },
-    elements: {
-      columns: content.columns,
-      rows: content.rows,
-      emptyElement,
-      loadingElement,
-    },
-    callbacks: {
-      nextPage: () => {
-        if (states.currentPage === 0)
-          callbacks.setLimit(props.perPage);
-        callbacks.setCurrentPage(states.currentPage + 1);
-      },
-      prevPage: () => {
-        if (states.currentPage === 1)
-          callbacks.setLimit(props.perPage - 1);
-        callbacks.setCurrentPage(states.currentPage - 1);
-      },
-    },
-  };
-}
-function generateUserError(e) {
-  try {
-    return JSON.stringify(e);
-  }
-  catch (e) {
-    return "An unknown error";
-  }
-}
-async function tryMethod(c, callback) {
-  const tag = c.tagName.toLowerCase();
-  await customElements.whenDefined(tag);
-  let labelPromise;
-  try {
-    labelPromise = callback();
-  }
-  catch (e) {
-    // 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.");
-    }
-    else {
-      console.error("label promise failed", e);
-    }
-    return h("span", null);
-  }
-  try {
-    return await labelPromise;
-  }
-  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);
-    const userError = generateUserError(e);
-    return (h("details", null,
-      h("summary", null, "Error"),
-      userError));
-  }
-}
-
-const RewardsTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** @uiName Number of rewards per page */
-    this.perPage = 3;
-    /** @uiName Show column labels */
-    this.showLabels = true;
-    /** @uiName Previous button text  */
-    this.prevLabel = "Prev";
-    /** @uiName View More button text  */
-    this.moreLabel = "Next";
-    /** @uiName Show Referred by user in table  */
-    this.showReferrer = false;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const empty = h(EmptySlot, { label: "No Rewards Yet" });
-    const loading = h(LoadingSlot, null);
-    const { states, data, callbacks, elements } = j()
-      ? useRewardsTableDemo(this)
-      : useRewardsTable(this, empty, loading);
-    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
-  }
-};
-function useRewardsTableDemo(props) {
-  return cjs({
-    states: {
-      hasPrev: false,
-      hasNext: false,
-      loading: false,
-      namespace: CSS_NAMESPACE,
-    },
-    callbacks: {
-      prevPage: () => console.log("Prev"),
-      nextPage: () => console.log("Next"),
-    },
-    data: {
-      textOverrides: {
-        showLabels: props.showLabels,
-        prevLabel: props.prevLabel,
-        moreLabel: props.moreLabel,
-      },
-      referralData: [],
-    },
-    elements: {
-      emptyElement: h(EmptySkeleton, { label: "No Rewards Yet" }),
-      loadingElement: h(LoadingSkeleton, null),
-      // TODO: This should be smarter
-      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
-      rows: [],
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-export { RewardsTable as sqm_rewards_table };