@saasquatch/mint-components 1.5.0-68 → 1.5.0-71

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

@@ -1,15 +1,16 @@
 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-e1f502b8.js';
+import { i as intl } from './global-58010a55.js';
 import './use-callback-d8ef4b5d.js';
-import { d as dist, i as ie, M, A as An, a as mn, j as jn } from './index.module-8e23a02c.js';
+import { d as dist, n as ne, M, R, w as wn, k } from './index.module-ec3dcc82.js';
 import './extends-c31f1eff.js';
 import './insertcss-bcaf3818.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-2b700cd4.js';
-import { u as useRerenderListener, a as useChildElements, b as useRequestRerender } from './useChildElements-47a37020.js';
+import { G as GenericTableView } from './GenericTableView-79b65de0.js';
+import { u as useRerenderListener, a as useChildElements, b as useRequestRerender } from './useChildElements-c11d6189.js';
+import { g as generateUserError } from './useReferralTable-bccb9ac0.js';
 import { l as luxon } from './luxon-5fa22651.js';
 import { l as luxonLocale } from './utils-1d345130.js';
 import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
@@ -57,6 +58,7 @@ const GET_REWARDS = dist.gql `
             )
             programId
             statuses
+            pendingReasons
             globalRewardKey
             programRewardKey
             rewardSource
@@ -103,9 +105,9 @@ const GET_REWARDS = dist.gql `
 `;
 function useRewardsTable(props, emptyElement, loadingElement) {
   var _a, _b;
-  const user = ie();
+  const user = ne();
   const programIdContext = M();
-  const locale = An();
+  const locale = R();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   const rewardFilter = {
@@ -127,7 +129,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  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; }, {
+  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; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -145,7 +147,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     // 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);
+      const cells = (await Promise.all(cellPromise));
       return cells;
     });
     const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
@@ -201,14 +203,6 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     },
   };
 }
-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);
@@ -254,18 +248,18 @@ const RewardsTable = class {
     /** @uiName Hide Columns (Mobile View)  */
     this.mdBreakpoint = 899;
     /** @uiName Empty State Image Link  */
-    this.emptyStateImgUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
     /** @uiName Empty State Title  */
-    this.emptyStateTitle = "View your rewards";
+    this.emptyStateHeader = "View your rewards";
     /** @uiName Empty State Text  */
     this.emptyStateText = "See all the rewards you have earned from referring friends and completing tasks";
     h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = (h(EmptySlot, { emptyStateImgUrl: this.emptyStateImgUrl, emptyStateTitle: this.emptyStateTitle, emptyStateText: this.emptyStateText }));
+    const empty = (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
-    const { states, data, callbacks, elements } = jn()
+    const { states, data, callbacks, elements } = k()
       ? useRewardsTableDemo(this)
       : useRewardsTable(this, empty, loading);
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
@@ -298,25 +292,21 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: (h(EmptySlot, { emptyStateImgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateTitle: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
+      emptyElement: (h(EmptySlot, { 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" })),
       loadingElement: h(LoadingSlot, null),
       // TODO: This should be smarter
       columns: [
-        h("div", null, "Reward"),
-        h("div", null, "Source"),
-        h("div", null, "Status"),
-        h("div", null, "Date recieved"),
+        "Reward",
+        "Source",
+        "Status",
+        "Date recieved",
       ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
-function EmptySlot({ emptyStateImgUrl, emptyStateTitle, emptyStateText, }) {
-  return (h("div", { slot: "empty", style: { display: "contents" } }, h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } }, h("img", { src: emptyStateImgUrl, style: { width: "100px" } }), h("div", null, h("b", null, emptyStateTitle)), h("div", { style: {
-      marginTop: "var(--sl-spacing-xx-small)",
-      fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-color-neutral-500)",
-    } }, emptyStateText))))));
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
+  return (h("div", { slot: "empty", style: { display: "contents" } }, h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" }, h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }), h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" }, h("sqm-text", { slot: "label" }, h("h3", null, emptyStateHeader)), h("sqm-text", { slot: "content" }, emptyStateText)))))));
 }
 
 const RewardTableDateCell = class {
@@ -601,7 +591,7 @@ const RewardTableUserColumn = class {
     /**
      * @uiName Reward Source Text
      */
-    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}";
+    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -624,7 +614,11 @@ const RewardTableUserColumn = class {
 const RewardTableStatusCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.expiryText = "Expires";
     this.locale = "en";
+    this.pendingUsTax = "W-9 required";
+    this.pendingScheduled = "Until";
+    this.pendingUnhandled = "Fulfillment error";
   }
   rewardStatus(reward) {
     if (reward.dateCancelled)
@@ -696,9 +690,25 @@ const RewardTableStatusCell = class {
       `${rewardStatus === "AVAILABLE" && this.reward.dateExpires
         ? this.expiryText + " "
         : ""}${(_a = luxon.DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(this.locale))).toLocaleString(luxon.DateTime.DATE_MED)}`;
+    const pendingReasons = rewardStatus === "PENDING" ? getRewardPendingReasons(this) : null;
+    console.log(pendingReasons);
     return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString), h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED"
         ? sheet.classes.RedeemBadge
-        : sheet.classes.Badge }, statusText), h("p", { class: sheet.classes.Date }, date)));
+        : sheet.classes.Badge }, statusText), h("p", { class: sheet.classes.Date }, pendingReasons || date)));
+    function getRewardPendingReasons(prop) {
+      var _a;
+      console.log(prop.reward);
+      const pendingCodeMap = {
+        US_TAX: prop.pendingUsTax,
+        SCHEDULED: prop.reward.dateScheduledFor &&
+          prop.pendingScheduled +
+            " " + ((_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
+        .map((s) => { var _a; return (_a = pendingCodeMap[s]) !== null && _a !== void 0 ? _a : s; })
+        .join(", ");
+    }
   }
 };