@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

package/dist/collection/components/sqm-referral-table/useReferralTable.js

@@ -1,16 +1,27 @@
-import { usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useLocale, usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import gql from "graphql-tag";
+import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
+export const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = gql `
-  query getReferrals($programId: ID, $rewardFilter: RewardFilterInput) {
+  query getReferrals(
+    $programId: ID
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
     viewer {
       ... on User {
         referredByReferral(programId: $programId) {
-          dateReferralStarted
           dateConverted
+          dateFraudChecksCompleted
+          dateModerated
+          dateModified
+          dateReferralEnded
+          dateReferralPaid
+          dateReferralStarted
+          dateUserModified
           referrerUser {
             firstName
             lastName
@@ -29,7 +40,7 @@ const GET_REFERRER_DATA = gql `
             fuelTankCode
             fuelTankType
             currency
-            prettyValue
+            prettyValue(locale: $locale)
             statuses
             globalRewardKey
             programRewardKey
@@ -37,7 +48,7 @@ const GET_REFERRER_DATA = gql `
               data {
                 exchangedRewards {
                   data {
-                    prettyValue
+                    prettyValue(locale: $locale)
                     type
                     fuelTankCode
                     globalRewardKey
@@ -57,6 +68,7 @@ const GET_REFERRAL_DATA = gql `
     $offset: Int!
     $referralFilter: ReferralFilterInput
     $rewardFilter: RewardFilterInput
+    $locale: RSLocale
   ) {
     viewer {
       ... on User {
@@ -117,7 +129,7 @@ const GET_REFERRAL_DATA = gql `
               fuelTankCode
               fuelTankType
               currency
-              prettyValue
+              prettyValue(locale: $locale)
               statuses
               globalRewardKey
               programRewardKey
@@ -125,7 +137,7 @@ const GET_REFERRAL_DATA = gql `
                 data {
                   exchangedRewards {
                     data {
-                      prettyValue
+                      prettyValue(locale: $locale)
                       type
                       fuelTankCode
                       globalRewardKey
@@ -162,7 +174,7 @@ const GET_REFERRAL_DATA = gql `
   }
 `;
 export function useReferralTable(props, emptyElement, loadingElement) {
-  var _a, _b;
+  var _a, _b, _c;
   const user = useUserIdentity();
   const programIdContext = useProgramId();
   // Default to context, overriden by props
@@ -186,9 +198,11 @@ export function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
+  const locale = useLocale();
   const { data: referrerResponse, loading: referrerLoading, refetch, } = useQuery(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);
@@ -198,6 +212,7 @@ export function useReferralTable(props, emptyElement, loadingElement) {
   }, {
     referralFilter,
     rewardFilter,
+    locale,
   }, (props.showReferrer && referrerLoading && !referrerResponse) || !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     if (states.currentPage === 0 && showReferrerRow)
@@ -221,18 +236,16 @@ export function useReferralTable(props, emptyElement, loadingElement) {
     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)
+    // show the referrer row before any other rows
     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);
-      }));
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale)));
       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, c)));
-      const cells = await Promise.all(cellPromise);
+      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 &&
@@ -246,11 +259,22 @@ export function useReferralTable(props, emptyElement, loadingElement) {
     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,
-      loading: states.loading || content.loading,
+      show,
+      namespace: CSS_NAMESPACE,
     },
     data: {
       textOverrides: {
@@ -258,7 +282,10 @@ export function useReferralTable(props, emptyElement, loadingElement) {
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },
-      referralData: data,
+      //   referralData: data,
+      hiddenColumns: props.hiddenColumns,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
     },
     elements: {
       columns: content.columns,
@@ -280,7 +307,7 @@ export function useReferralTable(props, emptyElement, loadingElement) {
     },
   };
 }
-function generateUserError(e) {
+export function generateUserError(e) {
   try {
     return JSON.stringify(e);
   }
@@ -288,12 +315,12 @@ function generateUserError(e) {
     return "An unknown error";
   }
 }
-async function tryMethod(c, callback) {
+export async function tryMethod(c, callback) {
   const tag = c.tagName.toLowerCase();
   await customElements.whenDefined(tag);
-  let labelPromise;
+  let renderPromise;
   try {
-    labelPromise = callback();
+    renderPromise = callback();
   }
   catch (e) {
     // renderLabel did not return a promise, so this method probably doesn't exist
@@ -304,10 +331,11 @@ async function tryMethod(c, callback) {
     else {
       console.error("label promise failed", e);
     }
+    console.error("label promise failed", e);
     return h("span", null);
   }
   try {
-    return await labelPromise;
+    return await renderPromise;
   }
   catch (e) {
     // The column returned a promise, and that promise failed.

package/dist/collection/components/sqm-refresh-button/RefreshButtonView.js

@@ -0,0 +1,8 @@
+import { h, Host } from "@stencil/core";
+export function RefreshButtonView(props, children) {
+  return props.hide ? (h(Host, { style: { display: "none" } })) : (h(Host, null,
+    h("style", { type: "text/css" }, `:host{display:inline-block}`),
+    h("sl-button", { loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}-refresh-base` },
+      !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon, exportparts: "icon" })),
+      !props.hidetext && children)));
+}

package/dist/collection/components/sqm-refresh-button/sqm-refresh-button.js

@@ -0,0 +1,66 @@
+import { isDemo, } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { RefreshButtonView } from "./RefreshButtonView";
+/**
+ * @uiName Refresh Button
+ */
+export class RefreshButton {
+  constructor() {
+    /**
+     * @uiName Icon to show in the slot
+     */
+    this.icon = "arrow-clockwise";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoRefereshButton(thisProps)
+      : useRefreshButton(thisProps);
+    return (h(RefreshButtonView, Object.assign({}, props),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-refresh-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon to show in the slot",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"arrow-clockwise\""
+    }
+  }; }
+}
+function useDemoRefereshButton({ icon, }) {
+  return {
+    onClick: () => { },
+    icon,
+  };
+}
+function useRefreshButton({ icon }) {
+  //   const { refresh } = useRefreshDispatcher();
+  return {
+    disabled: false,
+    hide: false,
+    // onClick: refresh,
+    icon,
+  };
+}

package/dist/collection/components/sqm-reward-exchange-list/RewardExchangeList.stories.js

@@ -1,20 +1,29 @@
 import { h } from "@stencil/core";
-import { RewardExchangeView } from "./sqm-reward-exchange-list-view";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import * as Data from "./RewardExchangeListData";
-import { Resizer } from "../sqm-stencilbook/Resizer";
+import scenario from "./sqm-reward-exchange-list.feature";
 export default {
   title: "Components/Reward Exchange List",
+  parameters: {
+    scenario,
+  },
 };
 const StoryBase = (props) => () => {
-  return h(Resizer, null,
-    h(RewardExchangeView, Object.assign({}, props)));
+  return h(RewardExchangeView, Object.assign({}, props));
 };
 export const ChooseReward = StoryBase(Data.rewardExchange);
+export const CustomErrorMessage = StoryBase(Data.rewardExchangeCustomErrorMsg);
+export const LongTextRewardExhange = StoryBase(Data.rewardExchangeLongText);
 export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
 export const ChooseAmount = StoryBase(Data.chooseAmountFixed);
-export const ChooseAmountVariable = StoryBase(Data.chooseAmountVariable);
+export const ChooseAmountNoDescription = StoryBase(Data.chooseAmountFixedNoDescription);
+export const ChooseAmountVariableAndStepped = StoryBase(Data.chooseAmountVariable);
+export const ChooseAmountVariableAndSteppedNoDescription = StoryBase(Data.chooseAmountVariableNoDescription);
+export const chooseAmountVariableAndSteppedDisabled = StoryBase(Data.chooseAmountVariableDisabled);
+export const chooseAmountVariableAndSteppedUnavailable = StoryBase(Data.chooseAmountVariableUnavailable);
 export const Confirm = StoryBase(Data.confirmFixed);
-export const ConfirmVariable = StoryBase(Data.confirmVariable);
+export const ConfirmVariableAndStepped = StoryBase(Data.confirmVariable);
 export const Error = StoryBase(Data.error);
-export const Success = StoryBase(Data.success);
+export const SuccessPromo = StoryBase(Data.success);
+export const SuccessVariableAndStepped = StoryBase(Data.successVariable);
 export const Loading = StoryBase(Data.loading);