@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

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

@@ -0,0 +1,357 @@
+import { getAssetPath, h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+import { HostBlock } from "../../global/mixins";
+import { ProgressBar } from "./progressBar";
+import { ExchangeArrows, CheckMark } from "./SVGs";
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+const stageProgressList = {
+  chooseReward: "Choose reward",
+  chooseAmount: "Amount",
+  confirmation: "Confirm",
+};
+export function RewardExchangeView(props) {
+  console.log(props);
+  const style = {
+    HostBlock: HostBlock,
+    Container: {
+      padding: "var(--sl-spacing-medium)",
+      position: "relative",
+    },
+    CardContainer: {
+      "&:active": {
+      //boxShadow: "0 3px 10px #87ceeb6e!important",
+      },
+    },
+    Base: {
+      display: "flex",
+      cursor: "pointer",
+      textAlign: "center",
+      height: "120px",
+      "&::part(base)": {
+        boxShadow: "none",
+        width: "100%",
+        // maxWidth: "350px",
+        display: "flex",
+        margin: "0 auto",
+      },
+      "&::part(body)": {
+        padding: 0,
+        display: "flex",
+        width: "100%",
+      },
+      "& .text-area": {
+        textAlign: "left",
+        padding: "8px",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .amount": {
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .error": {
+        fontSize: "var(--sl-font-size-small)",
+        color: "var(--sl-color-warning-500)",
+      },
+      "& .selected-outline": {
+        width: "18px",
+        height: "18px",
+        minWidth: "18px",
+        borderRadius: "50%",
+        background: "var(--sl-color-primary-500)",
+        position: "relative",
+        margin: "-9px",
+        left: "100%",
+      },
+      "& .selected-checkmark": {
+        position: "relative",
+        top: "-6px",
+      },
+    },
+    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: "150px",
+      display: "flex",
+      margin: "0 auto",
+    },
+    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",
+        },
+      },
+    },
+    KutayCard: {
+      "&::part(base)": {
+        boxShadow: "none",
+      },
+    },
+    KutayButton: {
+      display: "flex",
+      flexWrap: "wrap-reverse",
+      margin: "var(--sl-spacing-medium) 0",
+      "& .cancel": {
+        marginLeft: "auto",
+        marginRight: "var(--sl-spacing-medium)",
+        "&::part(base)": {
+          fontWeight: "var(--sl-font-weight-normal)",
+          color: "var(--sl-color-neutral-1000)",
+        },
+        "@media (max-width: 1024px)": {
+          width: "100%",
+          marginRight: "0",
+        },
+      },
+      "& .continue": {
+        "&::part(base)": {
+          background: "var(--sl-color-primary-500)",
+          borderColor: "var(--sl-color-primary-500)",
+          fontWeight: "var(--sl-font-weight-normal)",
+          color: "var(--sl-color-neutral-0)",
+        },
+        "@media (max-width: 1024px)": {
+          width: "100%",
+        },
+      },
+      "& .continue.right": {
+        marginLeft: "auto",
+      },
+    },
+  };
+  // JSS config
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const { states, data, callbacks } = 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, item === null || item === void 0 ? void 0 : item.prettySourceValue);
+    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) => {
+      var _a, _b;
+      return (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" } }, intl.formatMessage({
+            id: "unavailableCode",
+            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+          }, {
+            unavailableReason: step.unavailableReason || step.unavailableReasonCode,
+          }))))));
+    })));
+  }
+  function chooseReward() {
+    var _a;
+    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) => {
+        var _a, _b;
+        const style = {
+          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
+            ? "0 0 0 2px var(--sl-color-primary-500)"
+            : "none",
+          marginBottom: "10px 0",
+          borderRadius: "var(--sl-border-radius-medium)",
+          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.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected-outline" },
+              h("div", { class: "selected-checkmark" },
+                h(CheckMark, null)))),
+            // item?.imageUrl &&
+            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
+            h("div", { class: "text-area" },
+              h("div", { class: "title" }, item.description),
+              h("div", { class: "amount" }, amount),
+              item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
+                id: "unavailableCode",
+                defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+              }, {
+                unavailableReason: item.unavailableReason ||
+                  item.unavailableReasonCode,
+              })))))));
+      })),
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
+    ];
+  }
+  function chooseAmount() {
+    var _a;
+    const input = getInput();
+    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? false
+      : input && !states.amount;
+    return (h("div", null,
+      h("div", null, 
+      //selectedItem?.imageUrl &&
+      h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+          getAssetPath("./assets/Reward-icon.png") })),
+      h("b", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      h("div", { class: sheet.classes.InputBox }, input),
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
+  }
+  function confirmation() {
+    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) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.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.KutayButton },
+        h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
+        h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
+  }
+  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", { class: "continue", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "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", { 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: Stages = "";
+  //   if (states.redeemStage === "confirmation") {
+  //     previousStage = "chooseAmount";
+  //   } else if (states.redeemStage === "chooseAmount") {
+  //     previousStage = "chooseReward";
+  //   }
+  //   return (
+  //     <div slot="label">
+  //       <a
+  //         style={{ cursor: "pointer", fontSize: "80%", color: "#858585" }}
+  //         onClick={() => callbacks.setStage(previousStage)}
+  //       >
+  //         <LeftArrow /> Back
+  //       </a>
+  //     </div>
+  //   );
+  // };
+  function errorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      "An error occured trying to redeem this reward. Please try again."));
+  }
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null,
+      stageMap(),
+      states.exchangeError && errorMessage(),
+      currentStage && currentStage())));
+}

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

@@ -0,0 +1,144 @@
+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";
+    /**
+     * @uiName Exchange button text
+     */
+    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    // const missingProps = getMissingProps([
+    //   {
+    //     attribute: "listType",
+    //     value: this.listType,
+    //   },
+    // ]);
+    // if (missingProps) {
+    //   return <RequiredPropsError missingProps={missingProps} />;
+    // }
+    const { states, data, callbacks } = isDemo()
+      ? useRewardExchangeListDemo(getProps(this))
+      : useRewardExchangeList(getProps(this));
+    return (h(Host, { style: { display: "contents" } },
+      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks })));
+  }
+  static get is() { return "sqm-reward-exchange-list"; }
+  static get encapsulation() { return "shadow"; }
+  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\""
+    },
+    "notAvailableError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Exchange button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "not-available-error",
+      "reflect": false,
+      "defaultValue": "\"{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }\""
+    },
+    "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; fuelTankCode?: string; }; }",
+        "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: () => { },
+      setExchangeState: (_) => { },
+      setStage: (_) => { },
+      resetState: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,174 @@
+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
+              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 "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,
+    },
+  };
+}