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

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

@@ -0,0 +1,74 @@
+import { h } from "@stencil/core";
+function Dot({ active, completed, incomplete, }) {
+  return (h("div", { style: {
+      flex: "0 0 0",
+      content: "''",
+      height: "4px",
+      borderRadius: "4px",
+      background: incomplete ? "#E5E5E5" : "#9E9E9E",
+      position: "relative",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      columnGap: "50px",
+      marginRight: "-2px",
+      boxSizing: "content-box",
+    } },
+    h("div", { style: {
+        backgroundColor: completed ? "#9E9E9E" : "#FFF",
+        border: active
+          ? "2px solid #9E9E9E"
+          : incomplete
+            ? "2px solid #E5E5E5"
+            : "none",
+        borderRadius: "50%",
+        width: completed ? "12px" : "8px",
+        height: completed ? "12px" : "8px",
+        margin: "-4px auto 0px",
+        zIndex: "1",
+        boxSizing: "content-box",
+      } })));
+}
+function Progress({ active, completed, incomplete }) {
+  return [
+    h("div", { style: {
+        content: "''",
+        flex: "0.5 0.5 0",
+        height: "4px",
+        borderRadius: "4px",
+        background: incomplete ? "#E5E5E5" : "#9E9E9E",
+        position: "relative",
+        bottom: "0",
+        left: "0",
+        display: "flex",
+        justifyContent: "center",
+        columnGap: "50px",
+        marginRight: "-2px",
+        boxSizing: "content-box",
+      } }),
+    h(Dot, { active: active, completed: completed, incomplete: incomplete }),
+    h("div", { style: {
+        content: "''",
+        flex: "0.5 0.5 0",
+        height: "4px",
+        borderRadius: "4px",
+        background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
+        position: "relative",
+        bottom: "0",
+        left: "0",
+        display: "flex",
+        justifyContent: "center",
+        columnGap: "50px",
+        marginRight: "-2px",
+        boxSizing: "content-box",
+      } }),
+  ];
+}
+export function ProgressBar({ stage }) {
+  console.log({ stage });
+  return (h("div", { style: { display: "flex", columnGap: "-2px" } },
+    h(Progress, { active: stage === 0, completed: stage > 0, incomplete: stage < 0 }),
+    h(Progress, { active: stage === 1, completed: stage > 1, incomplete: stage < 1 }),
+    h(Progress, { active: stage === 2, completed: stage > 2, incomplete: stage < 2 })));
+}

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

@@ -0,0 +1,234 @@
+import { getAssetPath, h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { ProgressBar } from "./progressBar";
+import { LeftArrow } 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",
+      display: "flex",
+    },
+    CardContainer: {
+      "&:hover": {
+        boxShadow: "0 3px 10px #87ceeb6e!important",
+      },
+    },
+    Base: {
+      display: "block",
+      cursor: "pointer",
+      textAlign: "center",
+      "&::part(base)": {
+        width: "100%",
+        height: "170px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      },
+      "&::part(body)": {
+        padding: "10px 0",
+      },
+    },
+    Drawer: {
+      "&::part(base)": {
+        minWidth: "400px",
+        width: "50%",
+        margin: "0 auto",
+        right: "0",
+      },
+      "&::part(panel)": {
+        height: "85vh",
+      },
+    },
+    FullImage: {
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "100px",
+    },
+    PreviewImage: {
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "75px",
+    },
+    InputBox: {
+      width: "100%",
+      marginBottom: "20px",
+    },
+    Select: {
+      "&::part(base)": {
+        flex: "0.75",
+      },
+      "&::part(menu)": {
+        maxHeight: "40vh",
+      },
+    },
+    Buttons: {
+      bottom: "0",
+      width: "100%",
+    },
+    Button: {
+      margin: "10px 0",
+      display: "block",
+      textAlign: "center",
+      cursor: "pointer",
+    },
+  };
+  // 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("span", { slot: "suffix", style: { fontSize: "75%" } }, step.prettySourceValue))))));
+  }
+  function chooseReward() {
+    var _a;
+    const nextStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? "confirmation"
+      : "chooseAmount";
+    console.log({ nextStage, ruleType: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType });
+    return (h("div", { style: {
+        display: "flex",
+        justifyContent: "center",
+        flexWrap: "wrap",
+        alignItems: "center",
+        columnGap: "12px",
+        rowGap: "12px",
+      } }, (_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: "45%",
+        };
+        return (h("div", { key: item.key, class: sheet.classes.CardContainer, style: style },
+          h("sl-card", { class: sheet.classes.Base, onClick: () => callbacks.setExchangeState({ selectedItem: item }), disabled: !item.available },
+            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
+            h("p", null, item.description))));
+      }),
+      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: () => { var _a; return (_a = refs.drawerRef.current) === null || _a === void 0 ? void 0 : _a.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() {
+    console.log("confirmation:", { selectedItem });
+    const redemptionAmount = () => {
+      var _a;
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD") {
+        return `Redeem ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceValue} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.globalRewardKey}`;
+      }
+      else {
+        const amount = states.amount;
+        const reward = (_a = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) !== null && _a !== void 0 ? _a : `${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.destinationUnit}`;
+        return `Redeem ${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${reward}`;
+      }
+    };
+    const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? "chooseReward"
+      : "chooseAmount";
+    return (h("div", null,
+      h("h2", null, "Confirm your redemption:"),
+      redemptionAmount(),
+      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),
+      h("sl-button", { onClick: () => { var _a, _b; return (_b = (_a = refs.drawerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.hide(); } }, "Done")));
+  }
+  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", { style: { fontSize: "80%" } },
+      h(ProgressBar, { stage: stageNumber }),
+      h("div", { style: {
+          marginTop: "5px",
+          display: "flex",
+          justifyContent: "center",
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          marginBottom: "10px",
+        } }, Object.keys(stageProgressList).map((stage) => {
+        if (stage === states.redeemStage)
+          return (h("b", { style: { flex: "1 1 0" } },
+            " ",
+            stageProgressList[stage]));
+        return h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
+      }))));
+  }
+  const Label = () => {
+    if (states.redeemStage === "success")
+      return "";
+    let previousStage = "";
+    if (states.redeemStage === "confirmation") {
+      previousStage =
+        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
+          ? "chooseReward"
+          : "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")));
+  };
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null,
+      h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
+        h(Label, null),
+        stageMap(),
+        currentStage && currentStage(),
+        states.exchangeError &&
+          "Something went wrong. Please contact support or try again."),
+      h("sl-button", { onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+}

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

@@ -0,0 +1,120 @@
+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; content: { text: any; }; }; data?: { exchangeList: any; }; refs?: { drawerRef: any; }; }",
+        "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: "",
+      amount: 0,
+      selectedStep: undefined,
+      exchangeError: 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,196 @@
+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
+            }
+          }
+          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: "",
+    amount: 0,
+    exchangeError: false,
+  });
+  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
+  const user = useUserIdentity();
+  const [exchange, { data: exchangeResponse, errors }] = useMutation(EXCHANGE);
+  const { data } = 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,
+    },
+    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/{stories → components/sqm-rewards-table}/Router.stories.js

@@ -1,7 +1,7 @@
 import { navigation } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/stencil-hooks";
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
   title: "Tests/Router",
 };