@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

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,24 @@ 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 Text  */
+    this.emptyStateText = "No Referrals Yet";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, null);
+    const empty = h(EmptySlot, { 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 +166,104 @@ 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"
+    },
+    "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": "\"No Referrals Yet\""
+    },
     "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 +314,20 @@ function useReferraltableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: h(EmptySlot, null),
+      emptyElement: h(EmptySlot, { emptyStateText: "No Referrals Yet" }),
       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() {
+function EmptySlot({ emptyStateText }) {
   return (h("slot", { name: "empty" },
     h("div", { style: { width: "100%" } },
       h("sqm-text", null,
-        h("h3", { style: { color: "#777777" } }, "No Referrals Yet")))));
+        h("h3", { style: { color: "#777777", textAlign: "center" } }, emptyStateText)))));
 }

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

@@ -4,6 +4,7 @@ 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) {
     viewer {
@@ -162,7 +163,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
@@ -246,11 +247,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 +270,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,27 @@ 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,
       },
     },
     redeemStage: stage,
@@ -33,7 +53,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 +176,6 @@ const stepsData = (start, end, inc) => {
       prettyDestinationValue: "$" + i,
       available: true,
       unavailableReasonCode: null,
-      unavailableReason: "",
     });
   }
   return steps;
@@ -169,7 +187,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 +214,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 +238,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 +251,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),
 };