@saasquatch/mint-components 1.3.1-6 → 1.3.2-10

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

@@ -0,0 +1,269 @@
+import { getAssetPath, h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { ProgressBar } from "./progressBar";
+import { LeftArrow, ExchangeArrows } from "./SVGs";
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+const stageProgressList = {
+  chooseReward: "Choose reward",
+  chooseAmount: "Amount",
+  confirmation: "Confirm",
+};
+export function RewardExchangeView(props) {
+  const style = {
+    Container: {
+      position: "relative",
+    },
+    CardContainer: {
+      "&:hover": {
+        boxShadow: "0 3px 10px #87ceeb6e!important",
+      },
+    },
+    Base: {
+      display: "flex",
+      cursor: "pointer",
+      textAlign: "center",
+      height: "120px",
+      "&::part(base)": {
+        width: "100%",
+        maxWidth: "350px",
+        display: "flex",
+        margin: "0 auto",
+      },
+      "&::part(body)": {
+        padding: 0,
+        display: "flex",
+        width: "100%",
+      },
+    },
+    Drawer: {
+      "&::part(base)": {
+        minWidth: "400px",
+        maxWidth: "700px",
+        width: "50%",
+        margin: "0 auto",
+        right: "0",
+      },
+      "&::part(panel)": {
+        height: "85vh",
+        width: "100%",
+      },
+    },
+    FullImage: {
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "100px",
+    },
+    PreviewImage: {
+      objectFit: "contain",
+      width: "120px",
+      height: "120px",
+      flex: 0.33,
+    },
+    InputBox: {
+      width: "100%",
+      marginBottom: "20px",
+    },
+    Select: {
+      "&::part(base)": {
+        flex: "0.75",
+      },
+      "&::part(menu)": {
+        maxHeight: "40vh",
+      },
+    },
+    Buttons: {
+      marginLeft: "auto",
+      width: "100%",
+      maxWidth: "300px",
+    },
+    Button: {
+      margin: "10px 0",
+      display: "block",
+      textAlign: "center",
+      cursor: "pointer",
+    },
+    ProgressBar: {
+      fontSize: "80%",
+      marginBottom: "20px",
+      "& .text-area": {
+        marginTop: "5px",
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        whiteSpace: "nowrap",
+        marginBottom: "6px",
+        "& .text": {
+          flex: "1 1 0",
+        },
+        "& .text.subdued": {
+          color: "#BDBDBD",
+        },
+      },
+    },
+  };
+  // JSS config
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const { states, data, callbacks, refs } = props;
+  const { selectedItem, selectedStep } = states;
+  function getInput() {
+    var _a, _b;
+    const item = states.selectedItem;
+    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
+      return h("span", null);
+    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
+      return h("p", null,
+        "Not enough ",
+        item.sourceUnit,
+        " to redeem for this reward.");
+    }
+    return (h("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+        var _a, _b, _c, _d, _e;
+        return callbacks.setExchangeState({
+          amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
+          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
+        });
+      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (h("sl-menu-item", { value: step, disabled: !step.available },
+      step.prettyDestinationValue,
+      h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
+        step.prettySourceValue,
+        step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, step.unavailableReasonCode))))))));
+  }
+  function chooseReward() {
+    var _a;
+    const nextStage = "chooseAmount";
+    // console.log({ nextStage, ruleType: selectedItem?.ruleType });
+    return [
+      h("div", { style: {
+          display: "grid",
+          justifyContent: "center",
+          gap: "20px",
+          gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+        } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        const style = {
+          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
+          marginBottom: "10px 0",
+          flex: "1",
+          minWidth: "100%",
+          color: !item.available && "#eee",
+        };
+        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
+          ? item.prettySourceValue
+          : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
+        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
+          h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
+              callbacks.setExchangeState({ selectedItem: item }) },
+            // item?.imageUrl &&
+            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
+            h("p", { style: {
+                textAlign: "left",
+                margin: "0",
+                flex: "1",
+                fontSize: "90%",
+                padding: "8px"
+              } },
+              h("b", null, item.description),
+              h("p", { style: { margin: "0" } }, amount),
+              item.unavailableReasonCode && (h("p", { style: {
+                  fontSize: "70%",
+                  color: "#F2994A",
+                  marginTop: "0",
+                } }, item.unavailableReasonCode ===
+                "INSUFFICIENT_REDEEMABLE_CREDIT"
+                ? "Not enough points"
+                : item.unavailableReasonCode))))));
+      })),
+      h("div", { class: sheet.classes.Buttons },
+        h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
+        h("a", { 
+          //   onClick={() => refs.drawerRef.current?.hide()}
+          style: { display: "block" }, class: sheet.classes.Button }, "Cancel")),
+    ];
+  }
+  function chooseAmount() {
+    const input = getInput();
+    return (h("div", null,
+      h("div", { style: { width: "50%", margin: "0 auto" } }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) && (h("img", { class: sheet.classes.FullImage, src: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl }))),
+      h("p", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      h("div", { class: sheet.classes.InputBox }, input),
+      h("div", { class: sheet.classes.Buttons },
+        h("sl-button", { onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount, style: { display: "block" }, class: sheet.classes.Button }, "Continue"),
+        h("a", { onClick: () => callbacks.setStage("chooseReward"), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
+  }
+  //   console.log({ selectedItem, selectedStep });
+  function confirmation() {
+    const previousStage = "chooseAmount";
+    return (h("div", null,
+      h("h2", null, "Confirm and redeem"),
+      h("div", { style: { textAlign: "center" } },
+        h("p", null,
+          h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
+        h("p", null,
+          h(ExchangeArrows, null)),
+        h("div", { class: sheet.classes.CardContainer, style: {
+            boxShadow: "none",
+            marginBottom: "10px",
+            flex: "1",
+            minWidth: "100%",
+          } },
+          h("sl-card", { class: sheet.classes.Base },
+            h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                getAssetPath("./assets/Reward-icon.png") }),
+            h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
+      h("div", { class: sheet.classes.Buttons },
+        h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
+        h("a", { onClick: () => callbacks.setStage(previousStage), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
+  }
+  function success() {
+    return (h("div", { style: { textAlign: "center" } },
+      h("img", { class: sheet.classes.FullImage, src: getAssetPath("./assets/Reward-icon.png") }),
+      h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode)));
+  }
+  const stages = {
+    chooseReward: () => chooseReward(),
+    chooseAmount: () => chooseAmount(),
+    confirmation: () => confirmation(),
+    success: () => success(),
+  };
+  const currentStage = stages[states.redeemStage];
+  function stageMap() {
+    const stageNumber = stageList.indexOf(states.redeemStage);
+    return (h("div", { class: sheet.classes.ProgressBar },
+      h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stage === states.redeemStage) {
+          return h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
+      })),
+      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
+  }
+  const BackButton = () => {
+    if (states.redeemStage === "success")
+      return "";
+    let previousStage = "";
+    if (states.redeemStage === "confirmation") {
+      previousStage = "chooseAmount";
+    }
+    else if (states.redeemStage === "chooseAmount") {
+      previousStage = "chooseReward";
+    }
+    return (h("div", { slot: "label" },
+      h("a", { style: { cursor: "pointer", fontSize: "80%", color: "#858585" }, onClick: () => callbacks.setStage(previousStage) },
+        h(LeftArrow, null),
+        " Back")));
+  };
+  console.log(props);
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null,
+      h(BackButton, null),
+      stageMap(),
+      currentStage && currentStage(),
+      states.exchangeError &&
+        "Something went wrong. Please contact support or try again.")));
+}

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

@@ -0,0 +1,121 @@
+import { Component, h, Host, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useRewardExchangeList, } from "./useRewardExchangeList";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+/**
+ * @uiName Reward Exchange List
+ */
+export class SqmRewardExchangeList {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Exchange button text
+     */
+    this.buttonText = "Exchange Rewards";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    // const missingProps = getMissingProps([
+    //   {
+    //     attribute: "listType",
+    //     value: this.listType,
+    //   },
+    // ]);
+    // if (missingProps) {
+    //   return <RequiredPropsError missingProps={missingProps} />;
+    // }
+    const { states, data, callbacks, refs } = isDemo()
+      ? useRewardExchangeListDemo(getProps(this))
+      : useRewardExchangeList(getProps(this));
+    return (h(Host, { style: { display: "contents" } },
+      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
+  }
+  static get is() { return "sqm-reward-exchange-list"; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Exchange button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false,
+      "defaultValue": "\"Exchange Rewards\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<RewardExchangeViewProps>",
+        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; loading: boolean; content: { text: any; }; }; data?: { exchangeList: any; }; refs?: {}; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "RewardExchangeViewProps": {
+            "location": "import",
+            "path": "./sqm-reward-exchange-list-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useRewardExchangeListDemo(props) {
+  return deepmerge({
+    states: {
+      content: {
+        text: props,
+      },
+      redeemStage: "chooseReward",
+      amount: 0,
+      selectedStep: undefined,
+      exchangeError: false,
+      loading: false,
+    },
+    data: {
+      shareCode: "SHARECODE123",
+    },
+    callbacks: {
+      exchangeReward: () => { },
+      openDrawer: () => { },
+      setExchangeState: (_) => { },
+      setStage: (_) => { },
+    },
+    refs: {
+      drawerRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,198 @@
+import { useUserIdentity, useQuery, useMutation, } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { useCallback, useEffect, useReducer, useRef, } 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
+              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 drawerRef = useRef();
+  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 } = 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" });
+    }
+    if (!!errors) {
+      console.log("YEA");
+      setExchangeState({ exchangeError: true });
+    }
+  }, [exchangeResponse, errors]);
+  function openDrawer() {
+    var _a;
+    setExchangeState({ redeemStage: "chooseReward" });
+    (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.show();
+  }
+  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 "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 = useCallback((e) => {
+    var _a, _b;
+    // selects also trigger an sl-hide event :(
+    //@ts-ignore - componentId is not private here
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.componentId) !== ((_b = drawerRef.current) === null || _b === void 0 ? void 0 : _b.componentId))
+      return;
+    setExchangeState({
+      amount: 0,
+      selectedStep: undefined,
+      selectedItem: undefined,
+      exchangeError: false,
+    });
+  }, []);
+  useEffect(() => {
+    if (!(drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current))
+      return;
+    const drawer = drawerRef.current;
+    // Clear input value when drawer is closed
+    drawer.addEventListener("sl-hide", resetState);
+    return () => {
+      drawer.removeEventListener("sl-hide", resetState);
+    };
+  }, [drawerRef.current]);
+  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,
+      //@ts-ignore
+      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,
+      openDrawer,
+      setExchangeState,
+      setStage,
+    },
+    refs: {
+      drawerRef,
+    },
+  };
+}

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)));
+});