@saasquatch/mint-components 1.5.0-7 → 1.5.0-73

package/dist/cjs/useReferralTable-e473585e.js

@@ -0,0 +1,348 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const index_module = require('./index.module-54724339.js');
+const useChildElements = require('./useChildElements-4bc9b219.js');
+
+const CSS_NAMESPACE = "sqm-referral-table";
+const GET_REFERRER_DATA = index_module.dist.gql `
+  query getReferrals(
+    $programId: ID
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        referredByReferral(programId: $programId) {
+          dateReferralStarted
+          dateConverted
+          referrerUser {
+            firstName
+            lastName
+          }
+          rewards(filter: $rewardFilter) {
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue(locale: $locale)
+            statuses
+            globalRewardKey
+            programRewardKey
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue(locale: $locale)
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_REFERRAL_DATA = index_module.dist.gql `
+  query getReferrals(
+    $limit: Int!
+    $offset: Int!
+    $referralFilter: ReferralFilterInput
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        id
+        paidReferrals: referrals(
+          filter: { dateReferralPaid_timeframe: "this_10_years" }
+          limit: 1
+        ) {
+          totalCount
+        }
+        referrals(limit: $limit, offset: $offset, filter: $referralFilter) {
+          totalCount
+          count
+          data {
+            id
+            referredUser {
+              id
+              accountId
+              firstName
+              lastName
+              email
+              programGoals {
+                goalId
+                programId
+                count
+                firstDate
+                lastDate
+                conversionCount
+              }
+            }
+            shareLinkUsed
+            referralCodeUsed
+            moderationStatus
+            dateConverted
+            dateFraudChecksCompleted
+            dateModerated
+            dateModified
+            dateReferralEnded
+            dateReferralPaid
+            dateReferralStarted
+            dateUserModified
+            programId
+            program {
+              id
+              name
+            }
+            rewards(filter: $rewardFilter) {
+              id
+              type
+              value
+              unit
+              name
+              dateGiven
+              dateExpires
+              dateCancelled
+              dateRedeemed
+              dateScheduledFor
+              fuelTankCode
+              fuelTankType
+              currency
+              prettyValue(locale: $locale)
+              statuses
+              globalRewardKey
+              programRewardKey
+              rewardRedemptionTransactions {
+                data {
+                  exchangedRewards {
+                    data {
+                      prettyValue(locale: $locale)
+                      type
+                      fuelTankCode
+                      globalRewardKey
+                    }
+                  }
+                }
+              }
+            }
+            childNodes(limit: 10, offset: 0) {
+              data {
+                data {
+                  id
+                  ... on FlatReward {
+                    id
+                    statuses
+                    type
+                    value
+                  }
+                  ... on ProgramEmailTransaction {
+                    id
+                    rewardId
+                    dateCreated
+                    dateSent
+                    dateQueued
+                  }
+                }
+                depth
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function useReferralTable(props, emptyElement, loadingElement) {
+  var _a, _b, _c;
+  const user = index_module.ne();
+  const programIdContext = index_module.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] = stencilHooks_module.useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const locale = index_module.R();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.mn(GET_REFERRER_DATA, {
+    programId: programId === "classic" ? null : programId,
+    rewardFilter,
+    locale,
+  }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
+  const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
+  const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
+  const { envelope: referralData, states, callbacks, } = index_module.wn(GET_REFERRAL_DATA, (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,
+    locale,
+  }, (props.showReferrer && referrerLoading && !referrerResponse) || !(user === null || user === void 0 ? void 0 : user.jwt));
+  stencilHooks_module.useEffect(() => {
+    if (states.currentPage === 0 && showReferrerRow)
+      callbacks.setLimit(props.perPage - 1);
+  }, [showReferrerRow]);
+  stencilHooks_module.useEffect(() => {
+    if (props.showReferrer && showReferrerRow) {
+      callbacks.setLimit(props.perPage - 1);
+      callbacks.setCurrentPage(0);
+    }
+    else {
+      callbacks.setLimit(props.perPage);
+      callbacks.setCurrentPage(0);
+    }
+  }, [props.showReferrer]);
+  const tick = useChildElements.useRerenderListener();
+  const data = referralData === null || referralData === void 0 ? void 0 : referralData.data;
+  const components = useChildElements.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()));
+    // show the referrer row before any other rows (renderReferrerCell is asynchronous)
+    let referrerRow;
+    if (showReferrerRow && states.currentPage === 0) {
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, function renderReferrerCell() {
+        return c.renderReferrerCell(referrerData, c);
+      }));
+      referrerRow = await Promise.all(referrerPromise);
+    }
+    // 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 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: states.currentPage });
+  }
+  stencilHooks_module.useEffect(() => {
+    setContent({ loading: true });
+    referralData && getComponentData(components);
+  }, [referralData, components, tick]);
+  const isEmpty = !((_c = content === null || content === void 0 ? void 0 : content.rows) === null || _c === void 0 ? void 0 : _c.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,
+      },
+      //   referralData: data,
+      hiddenColumns: props.hiddenColumns,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+    callbacks: {
+      nextPage: () => {
+        if (states.currentPage === 0 && showReferrerRow)
+          callbacks.setLimit(props.perPage);
+        callbacks.setCurrentPage(states.currentPage + 1);
+      },
+      prevPage: () => {
+        if (states.currentPage === 1 && showReferrerRow)
+          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 renderPromise;
+  try {
+    renderPromise = 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 index.h("span", null);
+  }
+  try {
+    return await renderPromise;
+  }
+  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 (index.h("details", null,
+      index.h("summary", null, "Error"),
+      userError));
+  }
+}
+
+exports.generateUserError = generateUserError;
+exports.useReferralTable = useReferralTable;

package/dist/cjs/{utils-95e5317c.js → utils-01dbfd4a.js}

@@ -22,7 +22,16 @@ function getProps(obj) {
 function getMissingProps(props) {
   const missingProps = props.filter((prop) => !prop.value);
   return missingProps.length ? missingProps : false;
+}
+function luxonLocale(locale) {
+  const splitLocale = locale === null || locale === void 0 ? void 0 : locale.split("_");
+  if (!splitLocale || splitLocale.length === 1)
+    return locale;
+  const language = splitLocale[0];
+  const country = splitLocale[1];
+  return `${language}-${country.toUpperCase()}`;
 }
 
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;
+exports.luxonLocale = luxonLocale;

package/dist/collection/collection-manifest.json

@@ -6,12 +6,15 @@
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-brand/sqm-brand.js",
+    "./components/sqm-card-feed/sqm-card-feed.js",
     "./components/sqm-divided-layout/sqm-divided-layout.js",
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-form-message/sqm-form-message.js",
     "./components/sqm-graphql-client-provider/sqm-graphql-client-provider.js",
     "./components/sqm-hero/sqm-hero.js",
+    "./components/sqm-hero-image/sqm-hero-image.js",
     "./components/sqm-hook-story-container/sqm-hook-story-container.js",
+    "./components/sqm-image/sqm-image.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
@@ -35,6 +38,7 @@
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
+    "./components/sqm-referral-card/sqm-referral-card.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
@@ -46,9 +50,10 @@
     "./components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-status-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-user-column.js",
+    "./components/sqm-refresh-button/sqm-refresh-button.js",
     "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js",
-    "./components/sqm-rewards-table/cells/sqm-rewards-table-rewards-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js",
     "./components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js",
     "./components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js",
     "./components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js",
@@ -62,13 +67,18 @@
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
+    "./components/sqm-tab/sqm-tab.js",
+    "./components/sqm-tab-group/sqm-tab-group.js",
+    "./components/sqm-tab-panel/sqm-tab-panel.js",
+    "./components/sqm-table-cell/sqm-table-cell.js",
+    "./components/sqm-table-row/sqm-table-row.js",
     "./components/sqm-task-card/sqm-task-card.js",
     "./components/sqm-text/sqm-text.js",
     "./components/sqm-text-span/sqm-text-span.js",
+    "./components/sqm-timeline/sqm-timeline-entry.js",
+    "./components/sqm-timeline/sqm-timeline.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
-    "./components/sqm-user-name/sqm-user-name.js",
-    "./tables/sqm-table-cell.js",
-    "./tables/sqm-table-row.js"
+    "./components/sqm-user-name/sqm-user-name.js"
   ],
   "compiler": {
     "name": "@stencil/core",
@@ -76,6 +86,35 @@
     "typescriptVersion": "4.1.3"
   },
   "collections": [],
-  "bundles": [],
+  "bundles": [
+    {
+      "components": [
+        "sqm-rewards-table",
+        "sqm-rewards-table-date-cell",
+        "sqm-rewards-table-date-column",
+        "sqm-rewards-table-reward-cell",
+        "sqm-rewards-table-reward-column",
+        "sqm-rewards-table-source-cell",
+        "sqm-rewards-table-source-column",
+        "sqm-rewards-table-status-cell",
+        "sqm-rewards-table-status-column"
+      ]
+    },
+    {
+      "components": [
+        "sqm-referral-table",
+        "sqm-referral-table-cell",
+        "sqm-referral-table-column",
+        "sqm-referral-table-date-cell",
+        "sqm-referral-table-date-column",
+        "sqm-referral-table-rewards-cell",
+        "sqm-referral-table-rewards-column",
+        "sqm-referral-table-status-cell",
+        "sqm-referral-table-status-column",
+        "sqm-referral-table-user-cell",
+        "sqm-referral-table-user-column"
+      ]
+    }
+  ],
   "global": "./global/global.js"
 }

package/dist/collection/components/sqm-asset-card/sqm-asset-card-view.js

@@ -1,6 +1,5 @@
 import { getAssetPath, h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   CardContainer: {
     "box-sizing": "border-box",
@@ -32,8 +31,7 @@ const style = {
     },
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const AssetCardView = (props) => {
   const { text: { titleText }, imgUrl, } = props;

package/dist/collection/components/sqm-big-stat/BigStat.stories.js

@@ -4,7 +4,7 @@ export default {
   title: "Components/Big Stat",
 };
 export const Default = () => {
-  const props = { value: 990000, statvalue: "9.900,00" };
+  const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 export const LeftAlign = () => {
@@ -12,6 +12,7 @@ export const LeftAlign = () => {
     value: 500,
     statvalue: "500",
     alignment: "left",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -20,6 +21,7 @@ export const RightAlign = () => {
     value: 500,
     statvalue: "500",
     alignment: "right",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -28,6 +30,7 @@ export const FlexReverse = () => {
     value: 500,
     statvalue: "500",
     flexReverse: true,
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -37,6 +40,7 @@ export const FlexReverseRight = () => {
     statvalue: "500",
     flexReverse: true,
     alignment: "right",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -46,6 +50,7 @@ export const FlexReverseLeft = () => {
     statvalue: "500",
     flexReverse: true,
     alignment: "left",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -53,6 +58,7 @@ export const NoStatValue = () => {
   const props = {
     value: 0,
     statvalue: "...",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -60,6 +66,7 @@ export const InvalidStatValue = () => {
   const props = {
     value: 0,
     statvalue: "!!!",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props, children) {
   const { statvalue, flexReverse, alignment } = props;
   const style = {
@@ -27,8 +26,7 @@ export function BigStatView(props, children) {
       "text-align": alignment,
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -100,12 +100,32 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }],
+        "text": "The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
+        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -11,7 +11,7 @@ const debugQuery = (query, variables, getStat) => {
     console.error("issue getting stat:", res);
   }
   const stat = getStat(res);
-  return stat;
+  return { ...stat, loading: res.loading };
 };
 const referralsCountQuery = (programId, 
 // locale
@@ -310,6 +310,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyRedeemedCredit
@@ -352,6 +353,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAssignedCredit
@@ -394,6 +396,7 @@ const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue
@@ -442,6 +445,7 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue(formatType: $format)
@@ -563,14 +567,19 @@ export const StatPaths = [
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = useProgramId();
+  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
   const locale = useLocale();
   const userIdent = useUserIdentity();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
-      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        flexReverse,
+        alignment,
+        loading: false,
+      },
       label: "BAD PROP TYPE",
     };
   }
@@ -596,6 +605,7 @@ export function useBigStat(props) {
     props: {
       value: stat === null || stat === void 0 ? void 0 : stat.value,
       statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
     },

package/dist/collection/components/sqm-big-stat/useDemoBigStat.js

@@ -9,6 +9,7 @@ export function useDemoBigStat(props) {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },
@@ -21,6 +22,7 @@ export function useDemoBigStat(props) {
   return {
     props: deepmerge({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),