@saasquatch/mint-components 1.3.3-6 → 1.4.1-0

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

@@ -1,357 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

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