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

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

@@ -1,11 +1,16 @@
-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) {
@@ -29,7 +34,7 @@ const GET_REFERRER_DATA = gql `
             fuelTankCode
             fuelTankType
             currency
-            prettyValue
+            prettyValue(locale: $locale)
             statuses
             globalRewardKey
             programRewardKey
@@ -37,7 +42,7 @@ const GET_REFERRER_DATA = gql `
               data {
                 exchangedRewards {
                   data {
-                    prettyValue
+                    prettyValue(locale: $locale)
                     type
                     fuelTankCode
                     globalRewardKey
@@ -57,6 +62,7 @@ const GET_REFERRAL_DATA = gql `
     $offset: Int!
     $referralFilter: ReferralFilterInput
     $rewardFilter: RewardFilterInput
+    $locale: RSLocale
   ) {
     viewer {
       ... on User {
@@ -117,7 +123,7 @@ const GET_REFERRAL_DATA = gql `
               fuelTankCode
               fuelTankType
               currency
-              prettyValue
+              prettyValue(locale: $locale)
               statuses
               globalRewardKey
               programRewardKey
@@ -125,7 +131,7 @@ const GET_REFERRAL_DATA = gql `
                 data {
                   exchangedRewards {
                     data {
-                      prettyValue
+                      prettyValue(locale: $locale)
                       type
                       fuelTankCode
                       globalRewardKey
@@ -162,7 +168,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 +192,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 +206,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)
@@ -231,26 +240,377 @@ export function useReferralTable(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, c)));
+      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));
+    const columns = columnsPromise && await Promise.all(columnsPromise);
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: states.currentPage });
   }
+  const x = {
+    "columns": [
+      "Customer",
+      "Status",
+      "Date converted",
+      "Rewards"
+    ],
+    "rows": [
+      [
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-user-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "name": "Aaron Hernandez"
+          },
+          "$key$": null,
+          "$name$": "Aaron Hernandez"
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-status-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "status-text": "Converted",
+            "converted": true
+          },
+          "$key$": null,
+          "$name$": null
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-date-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "date": 1554934550726,
+            "locale": "en_US"
+          },
+          "$key$": null,
+          "$name$": null
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-rewards-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "rewards": [
+              {
+                "id": "5cae6b16cc540e209db45cfa",
+                "type": "CREDIT",
+                "value": 1,
+                "unit": "POINT",
+                "name": "Partner Reward",
+                "dateGiven": 1554934550726,
+                "dateExpires": null,
+                "dateCancelled": null,
+                "dateRedeemed": 1637004373582,
+                "dateScheduledFor": null,
+                "fuelTankCode": null,
+                "fuelTankType": null,
+                "currency": null,
+                "prettyValue": "1 Point",
+                "statuses": [
+                  "REDEEMED"
+                ],
+                "globalRewardKey": null,
+                "programRewardKey": "partnerReward",
+                "rewardRedemptionTransactions": {
+                  "data": [
+                    {
+                      "exchangedRewards": {
+                        "data": [
+                          {
+                            "prettyValue": "CAD10.00 Visa* Prepaid Card CAD",
+                            "type": "INTEGRATION",
+                            "fuelTankCode": null,
+                            "globalRewardKey": "gc1"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            "statusText": "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
+            "statusLongText": "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }",
+            "fuelTankText": "Your code is",
+            "rewardReceivedText": "Reward received on",
+            "expiringText": "Expiring in",
+            "pendingForText": "{status} for {date}",
+            "hideDetails": false,
+            "locale": "en_US"
+          },
+          "$key$": null,
+          "$name$": null
+        }
+      ],
+      [
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-user-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "name": "Brian Mendez"
+          },
+          "$key$": null,
+          "$name$": "Brian Mendez"
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-status-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "status-text": "Converted",
+            "converted": true
+          },
+          "$key$": null,
+          "$name$": null
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-date-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "date": 1554934455495,
+            "locale": "en_US"
+          },
+          "$key$": null,
+          "$name$": null
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-rewards-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "rewards": [
+              {
+                "id": "5cae6ab7cc540e209db456cc",
+                "type": "CREDIT",
+                "value": 1,
+                "unit": "POINT",
+                "name": "Partner Reward",
+                "dateGiven": 1554934455495,
+                "dateExpires": null,
+                "dateCancelled": null,
+                "dateRedeemed": 1637004373582,
+                "dateScheduledFor": null,
+                "fuelTankCode": null,
+                "fuelTankType": null,
+                "currency": null,
+                "prettyValue": "1 Point",
+                "statuses": [
+                  "REDEEMED"
+                ],
+                "globalRewardKey": null,
+                "programRewardKey": "partnerReward",
+                "rewardRedemptionTransactions": {
+                  "data": [
+                    {
+                      "exchangedRewards": {
+                        "data": [
+                          {
+                            "prettyValue": "CAD10.00 Visa* Prepaid Card CAD",
+                            "type": "INTEGRATION",
+                            "fuelTankCode": null,
+                            "globalRewardKey": "gc1"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            "statusText": "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
+            "statusLongText": "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }",
+            "fuelTankText": "Your code is",
+            "rewardReceivedText": "Reward received on",
+            "expiringText": "Expiring in",
+            "pendingForText": "{status} for {date}",
+            "hideDetails": false,
+            "locale": "en_US"
+          },
+          "$key$": null,
+          "$name$": null
+        }
+      ],
+      [
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-user-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "name": "Loretta Harper"
+          },
+          "$key$": null,
+          "$name$": "Loretta Harper"
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-status-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "status-text": "Converted",
+            "converted": true
+          },
+          "$key$": null,
+          "$name$": null
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-date-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "date": 1554934342984,
+            "locale": "en_US"
+          },
+          "$key$": null,
+          "$name$": null
+        },
+        {
+          "$flags$": 0,
+          "$tag$": "sqm-referral-table-rewards-cell",
+          "$text$": null,
+          "$elm$": {
+            "s-p": [],
+            "s-hn": "SQM-REFERRAL-TABLE"
+          },
+          "$children$": null,
+          "$attrs$": {
+            "rewards": [
+              {
+                "id": "5cae6a46cc540e209db44cf2",
+                "type": "CREDIT",
+                "value": 1,
+                "unit": "POINT",
+                "name": "Partner Reward",
+                "dateGiven": 1554934342984,
+                "dateExpires": null,
+                "dateCancelled": null,
+                "dateRedeemed": 1637004373582,
+                "dateScheduledFor": null,
+                "fuelTankCode": null,
+                "fuelTankType": null,
+                "currency": null,
+                "prettyValue": "1 Point",
+                "statuses": [
+                  "REDEEMED"
+                ],
+                "globalRewardKey": null,
+                "programRewardKey": "partnerReward",
+                "rewardRedemptionTransactions": {
+                  "data": [
+                    {
+                      "exchangedRewards": {
+                        "data": [
+                          {
+                            "prettyValue": "CAD10.00 Visa* Prepaid Card CAD",
+                            "type": "INTEGRATION",
+                            "fuelTankCode": null,
+                            "globalRewardKey": "gc1"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            "statusText": "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
+            "statusLongText": "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }",
+            "fuelTankText": "Your code is",
+            "rewardReceivedText": "Reward received on",
+            "expiringText": "Expiring in",
+            "pendingForText": "{status} for {date}",
+            "hideDetails": false,
+            "locale": "en_US"
+          },
+          "$key$": null,
+          "$name$": null
+        }
+      ]
+    ],
+  };
   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,
-      loading: states.loading || content.loading,
+      show,
+      namespace: CSS_NAMESPACE,
     },
     data: {
       textOverrides: {
@@ -258,7 +618,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 +643,7 @@ export function useReferralTable(props, emptyElement, loadingElement) {
     },
   };
 }
-function generateUserError(e) {
+export function generateUserError(e) {
   try {
     return JSON.stringify(e);
   }
@@ -291,9 +654,9 @@ function generateUserError(e) {
 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
@@ -307,7 +670,7 @@ async function tryMethod(c, callback) {
     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,22 +1,23 @@
 import { h } from "@stencil/core";
 import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import * as Data from "./RewardExchangeListData";
-import { Resizer } from "../sqm-stencilbook/Resizer";
 export default {
   title: "Components/Reward Exchange List",
 };
 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 chooseAmountVariableDisabled = StoryBase(Data.chooseAmountVariableDisabled);
+export const chooseAmountVariableUnavailable = StoryBase(Data.chooseAmountVariableUnavailable);
 export const Confirm = StoryBase(Data.confirmFixed);
 export const ConfirmVariable = StoryBase(Data.confirmVariable);
 export const Error = StoryBase(Data.error);
-export const Success = StoryBase(Data.success);
-export const SuccessVariable = StoryBase(Data.success2);
-export const SuccessPromo = StoryBase(Data.success3);
+export const SuccessPromo = StoryBase(Data.success);
+export const SuccessVariable = StoryBase(Data.successVariable);
 export const Loading = StoryBase(Data.loading);