@saasquatch/mint-components 1.5.0-4 → 1.5.0-43

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

@@ -2,7 +2,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { ReferralTableView, } from "./sqm-referral-table-view";
+import { GenericTableView, } from "../../tables/GenericTableView";
 import { useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
@@ -19,16 +19,28 @@ export class ReferralTable {
     this.moreLabel = "Next";
     /** @uiName Show Referred by user in table  */
     this.showReferrer = false;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 634;
+    /** @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_3_1.png";
+    /** @uiName Empty State Title  */
+    this.emptyStateTitle = "View your referral details";
+    /** @uiName Empty State Text  */
+    this.emptyStateText = "Track the status of your referrals and rewards earned by referring friends";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, null);
+    const empty = (h(EmptySlot, { emptyStateImgUrl: this.emptyStateImgUrl, emptyStateTitle: this.emptyStateTitle, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useReferraltableDemo(this)
       : useReferralTable(this, empty, loading);
-    return (h(ReferralTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-referral-table"; }
   static get encapsulation() { return "shadow"; }
@@ -158,20 +170,146 @@ export class ReferralTable {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hiddenColumns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hidden-columns",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "sm-breakpoint",
+      "reflect": false,
+      "defaultValue": "634"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "md-breakpoint",
+      "reflect": false,
+      "defaultValue": "899"
+    },
+    "emptyStateImgUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-img-url",
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png\""
+    },
+    "emptyStateTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-title",
+      "reflect": false,
+      "defaultValue": "\"View your referral details\""
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false,
+      "defaultValue": "\"Track the status of your referrals and rewards earned by referring friends\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<ReferralTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; loading: boolean; hasNext: boolean; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; referralData?: Referral[]; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "original": "DemoData<GenericTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "ReferralTableViewProps": {
+          "GenericTableViewProps": {
             "location": "import",
-            "path": "./sqm-referral-table-view"
+            "path": "../../tables/GenericTableView"
           }
         }
       },
@@ -222,17 +360,28 @@ function useReferraltableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: h(EmptySlot, null),
+      emptyElement: (h(EmptySlot, { emptyStateImgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", emptyStateTitle: "View your referral details", emptyStateText: "Track the status of your referrals and rewards earned by referring\r\n\t\tfriends" })),
       loadingElement: h(LoadingSlot, null),
-      // FIXME: Even in demo mode, this should use real column names!
-      columns: [h("div", null, "Example"), h("div", null, "Example"), h("div", null, "Example")],
+      columns: [
+        h("div", null, "User"),
+        h("div", null, "Referral Status"),
+        h("div", null, "Rewards"),
+      ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
-function EmptySlot() {
-  return (h("slot", { name: "empty" },
-    h("div", { style: { width: "100%" } },
-      h("sqm-text", null,
-        h("h3", { style: { color: "#777777" } }, "No Referrals Yet")))));
+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))))));
 }

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 { 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);
@@ -231,7 +239,7 @@ 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;
     });
@@ -246,11 +254,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 +277,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,

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

@@ -16,7 +16,6 @@ export const ChooseAmountVariable = StoryBase(Data.chooseAmountVariable);
 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);

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

@@ -2,7 +2,30 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
   states: {
     content: {
       text: {
-        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
+        buttonText: "Exchange Rewards",
+        notAvailableError: "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
+        chooseRewardTitle: "Rewards",
+        chooseAmountTitle: "Select",
+        confirmationTitle: "Confirm",
+        rewardTitle: "Choose a reward",
+        cancelText: "Cancel",
+        backText: "Back",
+        continueText: "Continue",
+        continueToConfirmationText: "Continue to confirmation",
+        redeemText: "Redeem",
+        redeemTitle: "Confirm and redeem",
+        redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
+        doneText: "Done",
+        toolTipText: "Copied!",
+        selectText: "Select amount to receive",
+        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
+        rewardRedeemedText: "Reward redeemed",
+        redemptionError: "An error occured trying to redeem this reward. Please try again",
+        promoCode: "Promo code",
+        skeletonCardNum: 8,
+        rewardNameTitle: "Reward Name",
+        rewardAmountTitle: "Reward Amount",
+        costTitle: "Cost",
       },
     },
     redeemStage: stage,
@@ -33,7 +56,6 @@ const baseReward = {
   description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
   imageUrl: "",
   available: true,
-  unavailableReason: null,
   unavailableReasonCode: null,
   ruleType: "FIXED_GLOBAL_REWARD",
   sourceUnit: "POINT",
@@ -157,7 +179,6 @@ const stepsData = (start, end, inc) => {
       prettyDestinationValue: "$" + i,
       available: true,
       unavailableReasonCode: null,
-      unavailableReason: "",
     });
   }
   return steps;
@@ -169,7 +190,6 @@ const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
   prettySourceValue: src + " " + srcUnit,
   available: available,
   unavailableReasonCode: null,
-  unavailableReason: "",
 });
 export const chooseAmountVariable = {
   ...baseResponse(data, "chooseAmount", {
@@ -197,9 +217,9 @@ export const chooseAmountFixed = {
 export const confirmFixed = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
-    ...name("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
-    ...fixedValue("30 SaaSquatch Points"),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
   }),
 };
 export const confirmVariable = {
@@ -221,12 +241,12 @@ export const error = {
 export const success = {
   ...baseResponse(data, "success", {
     ...baseReward,
-    ...name("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
-    ...fixedValue("30 SaaSquatch Points"),
-  }),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
 };
-export const success2 = {
+export const successVariable = {
   ...baseResponse(data, "success", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
@@ -234,14 +254,6 @@ export const success2 = {
     ...variableValue(20, 80, "Points"),
   }, baseStep(20, "$", 40, "Points")),
 };
-export const success3 = {
-  ...baseResponse(data, "success", {
-    ...baseReward,
-    ...name("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
-    ...fixedValue("30 SaaSquatch Points"),
-  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
-};
 export const loading = {
   ...baseResponse(null, "chooseReward", null, null, false, true),
 };