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

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

@@ -0,0 +1,509 @@
+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 { ShareLinkView } from "../sqm-share-link/sqm-share-link-view";
+import { ExchangeArrows, Gift, CheckmarkFilled } from "./SVGs";
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+export function RewardExchangeView(props) {
+  const { states, data, callbacks } = props;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
+  };
+  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)",
+      },
+    },
+    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)",
+        },
+      },
+    },
+    CardLayout: {
+      display: "flex",
+      width: "100%",
+      borderRadius: "3px",
+      background: "rgba(0, 0, 0, 0)",
+    },
+    Card: {
+      display: "flex",
+      userSelect: "none",
+      height: "120px",
+      "&::part(base)": {
+        boxShadow: "none",
+        width: "100%",
+      },
+      "&::part(body)": {
+        display: "flex",
+        padding: 0,
+      },
+      "& .selected": {
+        position: "relative",
+        top: "-2%",
+        left: "100%",
+        color: "var(--sl-color-primary-500)",
+        margin: "-9px",
+      },
+    },
+    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: {
+      padding: "8px",
+      minWidth: "96px",
+      maxWidth: "96px",
+      "& .image": {
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "4px",
+      },
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
+      },
+    },
+    TextArea: {
+      textAlign: "left",
+      padding: "12px",
+      "& .title": {
+        fontSize: "16px",
+        lineHeight: "20px",
+        fontWeight: "600",
+        color: "var(--sl-color-neutral-1000)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
+      },
+      "& .amount": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        color: "var(--sl-color-neutral-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
+      },
+      "& .error": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        fontWeight: "600",
+        color: "var(--sl-color-warning-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
+      },
+    },
+    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-primary-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))",
+    },
+    Button: {
+      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();
+  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, intl.formatMessage({
+        id: "notEnoughError",
+        defaultMessage: states.content.text.notEnoughError,
+      }, {
+        sourceUnit: item.sourceUnit,
+      })));
+    }
+    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,
+            sourceUnit: item.sourceUnit,
+            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
+          }))))));
+    })));
+  }
+  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, _c, _d, _e;
+        const style = {
+          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
+            ? "0 0 0 2px var(--sl-color-primary-500)"
+            : "none",
+          borderRadius: "4px",
+        };
+        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
+          ? item.prettySourceValue
+          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
+            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${(_b = item.steps.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.prettySourceValue}`
+            : `${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.Card, 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" },
+              h(CheckmarkFilled, null))),
+            h("div", { style: {
+                display: "flex",
+                width: "100%",
+                height: "120px",
+                borderRadius: "3px",
+                background: item.unavailableReasonCode
+                  ? "rgba(0, 0, 0, 0.05)"
+                  : "rgba(0, 0, 0, 0)",
+              } },
+              h("div", { class: sheet.classes.Image, style: {
+                  opacity: item.unavailableReasonCode ? "0.5" : "1",
+                } },
+                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", style: {
+                    "-webkit-line-clamp": item.unavailableReasonCode
+                      ? "1"
+                      : "2",
+                  } }, (_c = item.name) !== null && _c !== void 0 ? _c : ""),
+                h("div", { class: "amount", style: {
+                    "-webkit-line-clamp": item.unavailableReasonCode
+                      ? "1"
+                      : "2",
+                  } }, amount),
+                item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
+                  id: "unavailableCode",
+                  defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
+                }, {
+                  unavailableReason: item.unavailableReason ||
+                    item.unavailableReasonCode,
+                  sourceUnit: item.sourceUnit,
+                  sourceValue: item.prettySourceValue ||
+                    item.prettySourceMinValue,
+                }))))))));
+      })),
+      h("div", { class: sheet.classes.Button },
+        h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText)),
+    ];
+  }
+  function chooseAmount() {
+    var _a, _b, _c, _d;
+    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" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
+        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
+        ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.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.Button },
+        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText))));
+  }
+  function confirmation() {
+    console.log(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name);
+    return (h("div", null,
+      h("h2", { style: { margin: "20px 0" } }, states.content.text.redeemTitle),
+      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.Card },
+            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.Button },
+        h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+        h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText))));
+  }
+  function success() {
+    var _a, _b, _c;
+    return (h("div", { class: sheet.classes.Success },
+      h(Gift, null),
+      h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      h("div", { class: "description" }, intl.formatMessage({
+        id: "successMessage",
+        defaultMessage: states.content.text.redemptionSuccessText,
+      }, {
+        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
+        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) ||
+          states.selectedItem.globalRewardKey,
+      })),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { style: {
+          width: "40%",
+          margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+        } },
+        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: "Copied", open: states.open, onClick: callbacks.copyFuelTankCode }))),
+      h("div", { class: sheet.classes.Button },
+        h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
+  }
+  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", { class: sheet.classes.Grid }, [...Array(8)].map(() => {
+      return (h("div", { class: sheet.classes.CardContainer },
+        h("sl-card", { class: sheet.classes.Card },
+          h("div", { class: sheet.classes.CardLayout },
+            h("div", null,
+              h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
+                  margin: "9px",
+                  "--border-radius": "4px",
+                } })),
+            h("div", { style: { margin: "12px 12px 0 0", width: "100%" } },
+              h("sl-skeleton", { style: { marginBottom: "12px" } }),
+              h("sl-skeleton", { style: { marginBottom: "12px" } }),
+              h("sl-skeleton", { style: { width: "45%" } }))))));
+    })));
+  }
+  function errorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.redemptionError));
+  }
+  function queryErrorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.queryError));
+  }
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null,
+      stageMap(),
+      states.redeemStage === "chooseReward" && states.loading && loading(),
+      states.exchangeError && errorMessage(),
+      states.queryError && queryErrorMessage(),
+      currentStage && currentStage())));
+}