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

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

@@ -0,0 +1,461 @@
+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, Gift } from "./SVGs";
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+const stageProgressList = {
+  chooseReward: "Choose reward",
+  chooseAmount: "Amount",
+  confirmation: "Confirm",
+};
+export function RewardExchangeView(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%",
+        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: "250px",
+      display: "flex",
+      margin: "0 auto",
+    },
+    PreviewImage: {
+      objectFit: "contain",
+      width: "120px",
+      height: "118px",
+      flex: 0.33,
+    },
+    InputBox: {
+      width: "100%",
+      marginBottom: "20px",
+    },
+    Select: {
+      "&::part(label)": {
+        color: "var(--sl-color-primary-500)",
+      },
+    },
+    Buttons: {
+      marginLeft: "auto",
+      width: "100%",
+      maxWidth: "300px",
+    },
+    Button: {
+      margin: "10px 0",
+      display: "block",
+      textAlign: "center",
+      cursor: "pointer",
+    },
+    ProgressBar: {
+      maxWidth: "350px",
+      width: "100%",
+      margin: "auto",
+      marginBottom: "var(--sl-spacing-xxx-large)",
+      "& .text-area": {
+        marginTop: "5px",
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        whiteSpace: "nowrap",
+        marginBottom: "6px",
+        "& .text": {
+          marginBottom: "var(--sl-spacing-x-small)",
+          flex: "1 1 0",
+        },
+        "& .text.subdued": {
+          color: "var(--sl-color-neutral-200)",
+        },
+      },
+    },
+    KutayCard: {
+      display: "flex",
+      userSelect: "none",
+      height: "120px",
+      "&::part(base)": {
+        boxShadow: "none",
+        width: "100%",
+      },
+      "&::part(body)": {
+        display: "flex",
+        padding: 0,
+      },
+      "& .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",
+        left: "12%",
+        top: "-29%",
+        transform: "scale(0.8)",
+      },
+    },
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
+      "& .image": {
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "inherit",
+      },
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
+      },
+    },
+    Image: {
+      "& .image": {
+        objectFit: "contain",
+        width: "120px",
+        height: "118px",
+        flex: 0.33,
+      },
+      "& .image.black": {
+        filter: "brightness(20%)",
+      },
+    },
+    TextArea: {
+      textAlign: "left",
+      padding: "12px",
+      "& .title": {
+        fontSize: "16px",
+        lineHeight: "20px",
+        fontWeight: "600",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .amount": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        color: "var(--sl-color-neutral-500)",
+      },
+      "& .error": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        fontWeight: "600",
+        color: "var(--sl-color-warning-500)",
+      },
+    },
+    ChooseAmount: {
+      margin: "var(--sl-spacing-medium) 0",
+      "& .title": {
+        //fontSize: "var(--sl-font-size-large)",
+        fontSize: "113%",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .points": {
+        //fontSize: "var(--sl-font-size-large)",
+        fontSize: "113%",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-sky-500)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-500)",
+        margin: "var(--sl-spacing-medium) 0",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
+      "& .space": {
+        marginBottom: "var(--sl-spacing-xxx-large)",
+      },
+    },
+    Success: {
+      textAlign: "center",
+      "& .title": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .description": {
+        color: "var(--sl-color-neutral-400)",
+        width: "100%",
+        maxWidth: "350px",
+        margin: "0 auto",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginBottom: "var(--sl-spacing-xxx-large)",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
+    },
+    Grid: {
+      display: "grid",
+      justifyContent: "center",
+      gap: "20px",
+      gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+    },
+    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",
+      },
+      "& .continue.center": {
+        margin: "0 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.unavailableReasonCode,
+          }))))));
+    })));
+  }
+  function chooseReward() {
+    var _a;
+    return [
+      h("div", { class: sheet.classes.Grid }, (_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",
+        };
+        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
+          ? item.prettySourceValue
+          : item.prettySourceMinValue && item.prettySourceMaxValue
+            ? `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`
+            : "";
+        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
+          h("sl-card", { class: sheet.classes.KutayCard, style: {
+              cursor: item.unavailableReasonCode
+                ? "not-allowed"
+                : "pointer",
+            }, 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)))),
+            h("div", { style: {
+                display: "flex",
+                width: "100%",
+                borderRadius: "3px",
+                background: item.unavailableReasonCode
+                  ? "rgba(0, 0, 0, 0.05)"
+                  : "rgba(0, 0, 0, 0)",
+              } },
+              h("div", { class: sheet.classes.Square },
+                h("img", { class: item.unavailableReasonCode ? "image subdued" : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                    getAssetPath("./assets/placeholder.png") })),
+              h("div", { class: sheet.classes.TextArea, style: {
+                  opacity: item.unavailableReasonCode ? "0.5" : "1",
+                } },
+                h("div", { class: "title" }, item.name),
+                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, _b, _c;
+    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, h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+          getAssetPath("./assets/placeholder.png") })),
+      h("div", { class: sheet.classes.ChooseAmount },
+        h("div", { class: "title" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""),
+        ((_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
+        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", { class: "points" }, input)),
+        h("div", { class: "space" })),
+      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", { style: { margin: "20px 0" } }, "Confirm and redeem"),
+      h("div", { style: {
+          textAlign: "center",
+          marginBottom: "var(--sl-spacing-xxx-large)",
+        } },
+        h("p", null,
+          h("span", { style: { fontSize: "18px" } }, (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", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.KutayCard },
+            h("div", { class: sheet.classes.Square },
+              h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                  getAssetPath("./assets/placeholder.png") })),
+            h("div", { class: sheet.classes.TextArea, style: {
+                lineHeight: "18px",
+                alignSelf: "center",
+              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
+              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""
+              : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || "")))),
+      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", { class: sheet.classes.Success },
+      h(Gift, null),
+      h("div", { class: "title" }, "Reward Redeemed"),
+      h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "continue center", 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 (stageList.indexOf(stage) <= stageNumber) {
+          return h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
+      })),
+      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
+  }
+  function loading() {
+    return (h("div", { style: {
+        display: "flex",
+        height: "400px",
+        alignItems: "center",
+        justifyContent: "center",
+      } },
+      h("div", { style: { transform: "scale(5)" } },
+        h("sl-spinner", null))));
+  }
+  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.loading && loading(),
+      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 });
+}