@saasquatch/mint-components 1.4.0-0 → 1.5.0-2

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

@@ -0,0 +1,185 @@
+import { useUserIdentity, useQuery, useMutation, } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { useEffect, useReducer, } from "@saasquatch/universal-hooks";
+const GET_EXCHANGE_LIST = gql `
+  query getExchangeList {
+    viewer {
+      ... on User {
+        visibleRewardExchangeItems(limit: 20, offset: 0) {
+          data {
+            key
+            name
+            description
+            imageUrl
+            available
+            unavailableReason
+            unavailableReasonCode
+            ruleType
+            sourceUnit
+            sourceValue
+            prettySourceValue
+            sourceMinValue
+            prettySourceMinValue
+            sourceMaxValue
+            prettySourceMaxValue
+            destinationMinValue
+            prettyDestinationMinValue
+            destinationMaxValue
+            prettyDestinationMaxValue
+            globalRewardKey
+            destinationUnit
+            steps {
+              sourceValue
+              prettySourceValue
+              destinationValue
+              prettyDestinationValue
+              available
+              globalRewardKey
+              unavailableReasonCode
+            }
+          }
+          totalCount
+        }
+      }
+    }
+  }
+`;
+const EXCHANGE = gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
+`;
+export function useRewardExchangeList(props) {
+  var _a, _b, _c, _d;
+  const [exchangeState, setExchangeState] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    selectedItem: undefined,
+    selectedStep: undefined,
+    redeemStage: "chooseReward",
+    amount: 0,
+    exchangeError: false,
+  });
+  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
+  const user = useUserIdentity();
+  const [exchange, { data: exchangeResponse, errors }] = useMutation(EXCHANGE);
+  const { data, loading, refetch } = useQuery(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  useEffect(() => {
+    var _a, _b;
+    if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
+      setExchangeState({ redeemStage: "success", exchangeError: false });
+    }
+    if (!!errors) {
+      setExchangeState({ exchangeError: true });
+    }
+  }, [exchangeResponse, errors]);
+  function exchangeReward() {
+    if (!selectedItem)
+      return;
+    let exchangeVariables = {
+      accountId: user === null || user === void 0 ? void 0 : user.accountId,
+      userId: user.id,
+    };
+    switch (selectedItem.ruleType) {
+      case "FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedItem.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+        };
+        break;
+      case "STEPPED_FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedStep.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedStep.globalRewardKey,
+        };
+        break;
+      case "VARIABLE_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+          rewardInput: {
+            valueInCents: selectedStep.destinationValue,
+          },
+        };
+        break;
+      case "VARIABLE_CREDIT_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          rewardInput: {
+            type: "CREDIT",
+            unit: selectedItem.destinationUnit,
+            assignedCredit: selectedStep.destinationValue,
+          },
+        };
+        break;
+      default:
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedItem.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+        };
+    }
+    exchange({ exchangeRewardInput: exchangeVariables });
+  }
+  const resetState = (refresh) => {
+    refresh && refetch();
+    setExchangeState({
+      amount: 0,
+      selectedStep: undefined,
+      selectedItem: undefined,
+      exchangeError: false,
+      redeemStage: "chooseReward",
+    });
+  };
+  function setStage(stage) {
+    setExchangeState({ redeemStage: stage });
+  }
+  return {
+    states: {
+      content: {
+        text: props,
+      },
+      selectedItem,
+      redeemStage,
+      amount,
+      selectedStep,
+      exchangeError,
+      loading,
+    },
+    data: {
+      exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
+      fuelTankCode: (_d = (_c = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _c === void 0 ? void 0 : _c.reward) === null || _d === void 0 ? void 0 : _d.fuelTankCode,
+    },
+    callbacks: {
+      exchangeReward,
+      setExchangeState,
+      setStage,
+      resetState,
+    },
+  };
+}

package/dist/collection/components/sqm-rewards-table/UseRewardsTable.stories.js

@@ -0,0 +1,53 @@
+import { setProgramId } from "@saasquatch/component-boilerplate";
+import { setUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useRewardsTable",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const RewardsTableWithProgram = createHookStory(() => {
+  setupGraphQL();
+  setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", null,
+    h("sqm-rewards-table-column", null)));
+});
+export const RewardsTableNoProgram = createHookStory(() => {
+  setupGraphQL();
+  setProgramId(undefined);
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", null,
+    h("sqm-rewards-table-column", null)));
+});

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table-column.js

@@ -0,0 +1,120 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../tables/re-render";
+/**
+ * @uiName Rewards Table Column
+ */
+export class RewardsTableColumn {
+  constructor() {
+    /**
+     * @uiName Reward column title
+     */
+    this.columnTitle = "Rewards";
+    /**
+     * @uiName Hide dropdown details of reward
+     */
+    this.hideDetails = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  //@ts-ignore
+  async renderCell(data) {
+    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
+    console.log({ data });
+    return (h("sqm-referral-table-rewards-cell", { rewards: data, hideDetails: this.hideDetails }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward column title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Rewards\""
+    },
+    "hideDetails": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide dropdown details of reward",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hide-details",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[]) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "import",
+            "path": "./useRewardsTable"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,222 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { GenericTableView, } from "../../tables/GenericTableView";
+import { EmptySlot, LoadingSlot, EmptySkeleton, LoadingSkeleton } from "../../tables/TableSlots";
+import { useRewardsTable, CSS_NAMESPACE } from "./useRewardsTable";
+/**
+ * @uiName Rewards Table
+ */
+export class RewardsTable {
+  constructor() {
+    /** @uiName Number of rewards per page */
+    this.perPage = 3;
+    /** @uiName Show column labels */
+    this.showLabels = true;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /** @uiName Show Referred by user in table  */
+    this.showReferrer = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h(EmptySlot, { label: "No Rewards Yet" });
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = isDemo()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+  static get is() { return "sqm-rewards-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Program",
+            "name": "uiName"
+          }],
+        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "perPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of rewards per page",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "per-page",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "showLabels": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Show column labels",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-labels",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "prevLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Previous button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "prev-label",
+      "reflect": false,
+      "defaultValue": "\"Prev\""
+    },
+    "moreLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "View More button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "more-label",
+      "reflect": false,
+      "defaultValue": "\"Next\""
+    },
+    "showReferrer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Show Referred by user in table",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-referrer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<GenericTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "GenericTableViewProps": {
+            "location": "import",
+            "path": "../../tables/GenericTableView"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useRewardsTableDemo(props) {
+  return deepmerge({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+      namespace: CSS_NAMESPACE,
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      emptyElement: h(EmptySkeleton, { label: "No Rewards Yet" }),
+      loadingElement: h(LoadingSkeleton, null),
+      // TODO: This should be smarter
+      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+      rows: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}