@saasquatch/mint-components 1.5.6-8 → 1.6.0-2

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

@@ -1,613 +1,613 @@
-import { getAssetPath, h } from "@stencil/core";
-import { intl } from "../../global/global";
-import { HostBlock } from "../../global/mixins";
-import { createStyleSheet } from "../../styling/JSS";
-import { ShareLinkView } from "../sqm-share-link/sqm-share-link-view";
-import { ProgressBar } from "./progressBar";
-import { CheckmarkFilled, Gift } from "./SVGs";
-const style = {
-  HostBlock: HostBlock,
-  Container: {
-    minWidth: "300px",
-    position: "relative",
-  },
-  FullImage: {
-    objectFit: "contain",
-    maxWidth: "100%",
-    height: "250px",
-    display: "flex",
-    margin: "0 auto",
-  },
-  Select: {
-    "&::part(label)": {
-    //   color: "var(--sl-color-primary-500)",
-    },
-    "&::part(menu)": {
-      maxHeight: "50vh",
-    },
-    "& sl-menu-item::part(checked-icon)": {
-      top: "8px",
-    },
-    "& sl-menu-item::part(base)": {
-      flexDirection: "column",
-    },
-    "& sl-menu-item::part(base):focus": {
-      background: "transparent",
-      color: "var(--sl-color-gray-700)",
-    },
-  },
-  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",
-    },
-  },
-  Title: {
-    fontSize: "var(--sl-font-size-large)",
-    fontWeight: "var(--sl-font-weight-semibold)",
-    margin: "var(--sl-spacing-large) 0",
-  },
-  Image: {
-    padding: "var(--sl-spacing-small)",
-    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: "var(--sl-spacing-small)",
-    paddingLeft: "0",
-    "& .title": {
-      fontSize: "var(--sl-font-size-medium)",
-      lineHeight: "var(--sl-line-height-dense)",
-      fontWeight: "600",
-      color: "var(--sl-color-neutral-1000)",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "1",
-      "-webkit-box-orient": "vertical",
-      overflow: "hidden",
-    },
-    "& .amount": {
-      fontSize: "var(--sl-font-size-small)",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginTop: "var(--sl-spacing-x-small)",
-      color: "var(--sl-color-neutral-500)",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "1",
-      "-webkit-box-orient": "vertical",
-      overflow: "hidden",
-    },
-    "& .error": {
-      fontSize: "var(--sl-font-size-small)",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginTop: "var(--sl-spacing-x-small)",
-      fontWeight: "600",
-      color: "var(--sl-color-warning-600)",
-      display: "-webkit-box",
-      "-webkit-line-clamp": "1",
-      "-webkit-box-orient": "vertical",
-      overflow: "hidden",
-      "& .icon": {
-        position: "relative",
-        top: "0.1em",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-    },
-  },
-  ChooseAmount: {
-    maxWidth: "800px",
-    margin: "auto",
-    "& .wrapper": {
-      display: "flex",
-      gap: "var(--sl-spacing-xx-large)",
-      "@media (max-width: 799px)": {
-        flexDirection: "column",
-      },
-    },
-    "& .image": {
-      width: "50%",
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "250px",
-      display: "flex",
-      "@media (max-width: 799px)": {
-        width: "auto",
-      },
-    },
-    "& .text": {
-      width: "50%",
-      maxWidth: "400px",
-      //   minWidth: "330px",
-      "@media (max-width: 799px)": {
-        width: "auto",
-        margin: "auto",
-      },
-    },
-    "& .title": {
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
-    },
-    "& .points": {
-      fontSize: "var(--sl-font-size-large)",
-      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)",
-    },
-    "& sl-menu-item[disabled]::part(label)": {
-      color: "var(--sl-color-neutral-300)",
-    },
-    "& sl-menu-item[disabled]": {
-      "& .step-cost": {
-        color: "var(--sl-color-neutral-300)",
-      },
-      "& .step-value": {
-        color: "var(--sl-color-neutral-300)",
-      },
-    },
-  },
-  SelectItem: {
-    display: "flex",
-    flexDirection: "column",
-    "&::part(label)": {
-      color: "var(--sl-color-neutral-900)",
-      margin: "0",
-    },
-    "& .step-cost": {
-      color: "var(--sl-color-neutral-500)",
-      marginBottom: "var(--sl-spacing-x-small)",
-    },
-    "& .step-unavailable": {
-      fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-color-warning-500)",
-      margin: "0",
-    },
-  },
-  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)",
-      maxWidth: "350px",
-      margin: "0 auto",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginBottom: "var(--sl-spacing-xx-large)",
-      marginTop: "var(--sl-spacing-xx-small)",
-    },
-    "& .promo": {
-      maxWidth: "350px",
-      margin: "-30px auto var(--sl-spacing-xxx-large) auto",
-      textAlign: "left",
-      color: "var(--sl-color-neutral-700)",
-    },
-  },
-  Grid: {
-    display: "grid",
-    justifyContent: "center",
-    gap: "20px",
-    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-  },
-  Confirmation: {
-    maxWidth: "800px",
-    margin: "auto",
-    "& .wrapper": {
-      display: "flex",
-      "@media (max-width: 499px)": {
-        flexDirection: "column",
-      },
-    },
-    "& .reward-item-container": {
-      "@media (max-width: 499px)": {
-        display: "flex",
-        flexDirection: "row-reverse",
-        justifyContent: "flex-end",
-        alignItems: "center",
-      },
-    },
-    "& .reward-item-container .reward-title": {
-      paddingBottom: "var(--sl-spacing-medium)",
-      lineHeight: "20px",
-      "@media (max-width: 499px)": {
-        paddingBottom: "none",
-        paddingLeft: "var(--sl-spacing-small)",
-      },
-    },
-    "& .padding": {
-      padding: "var(--sl-spacing-medium) 0",
-      "@media (max-width: 499px)": {
-        padding: "var(--sl-spacing-small) 0",
-      },
-    },
-    "& .field": {
-      width: "30%",
-      textTransform: "uppercase",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-400)",
-      textAlign: "left",
-      paddingRight: "var(--sl-spacing-xxx-large)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        paddingRight: "0",
-        paddingBottom: "0",
-      },
-    },
-    "& .value": {
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& .top-border": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
-    },
-    "& .image": {
-      width: "200px",
-      "@media (max-width: 499px)": {
-        width: "100px",
-      },
-    },
-  },
-  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: 499px)": {
-        width: "100%",
-        marginRight: "0",
-        marginTop: "var(--sl-spacing-small)",
-      },
-    },
-    "& .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: 499px)": {
-        width: "100%",
-      },
-    },
-    "& .continue.right": {
-      marginLeft: "auto",
-    },
-    "& .continue.center": {
-      margin: "0 auto",
-    },
-  },
-  Confetti: {
-    pointerEvents: "none",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    top: "0%",
-    left: "0%",
-    zIndex: "1",
-  },
-};
-// JSS config
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-export function RewardExchangeView(props) {
-  const { states, data, callbacks, refs } = props;
-  const { selectedItem, selectedStep } = states;
-  const stageProgressList = {
-    chooseReward: states.content.text.chooseRewardTitle,
-    chooseAmount: states.content.text.chooseAmountTitle,
-    confirmation: states.content.text.confirmationTitle,
-  };
-  function getInput() {
-    var _a, _b, _c;
-    const item = states.selectedItem;
-    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return h("span", { class: "points" }, 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: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, 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,
-        });
-      } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
-      var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet.classes.SelectItem },
-        step.prettyDestinationValue,
-        h("br", null),
-        h("div", { class: "step-cost", slot: "suffix" },
-          step.prettySourceValue,
-          step.unavailableReasonCode && (h("p", { class: "step-unavailable" }, 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,
-          }, {
-            unavailableReasonCode: step.unavailableReasonCode,
-            sourceUnit: item.sourceUnit,
-            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
-          }))))));
-    })));
-  }
-  function chooseReward() {
-    var _a;
-    return [
-      h("div", null,
-        h("div", { class: sheet.classes.Title }, states.content.text.rewardTitle),
-        states.loading || states.queryError ? (loading()) : (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",
-          };
-          return (h("div", { key: item.key, 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/Reward-image.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",
-                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
-                  h("div", { class: "amount", style: {
-                      "-webkit-line-clamp": item.unavailableReasonCode
-                        ? "1"
-                        : "2",
-                    } }, intl.formatMessage({
-                    id: "sourceAmountMessage",
-                    defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
-                  }, {
-                    ruleType: item.ruleType,
-                    sourceValue: item.prettySourceValue,
-                    sourceMinValue: item.prettySourceMinValue,
-                    sourceMaxValue: item.prettySourceMaxValue,
-                  })),
-                  item.unavailableReasonCode && (h("div", { class: "error" },
-                    h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
-                    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,
-                    }, {
-                      unavailableReasonCode: 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", { class: sheet.classes.ChooseAmount },
-        h("div", { class: "wrapper" },
-          h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-              getAssetPath("./assets/Reward-image.png") }),
-          h("div", { class: "text" },
-            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", null, 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() {
-    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
-    const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
-    return (h("div", null,
-      h("div", { class: sheet.classes.Confirmation },
-        h("div", { class: sheet.classes.Title }, states.content.text.redeemTitle),
-        h("div", { class: "wrapper" },
-          h("div", { class: "field" }, states.content.text.rewardNameTitle),
-          h("div", { class: "reward-item-container" },
-            h("div", { class: "reward-title" }, selectedItem.name),
-            h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                getAssetPath("./assets/Reward-image.png") }))),
-        h("div", { class: "wrapper padding" },
-          h("div", { class: "field" })),
-        amount && (h("div", { class: "wrapper top-border padding" },
-          h("div", { class: "field" }, states.content.text.rewardAmountTitle),
-          h("div", null, amount))),
-        h("div", { class: "wrapper top-border padding" },
-          h("div", { class: "field" }, states.content.text.costTitle),
-          h("div", { class: "value" }, cost)),
-        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, _d, _e, _f;
-    return (h("div", { class: sheet.classes.Success },
-      h(Gift, null),
-      h(Confetti, null),
-      h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
-      h("div", { class: "description" }, intl.formatMessage({
-        id: "successMessage",
-        defaultMessage: states.content.text.redemptionSuccessText,
-      }, {
-        sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
-        destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
-          states.selectedItem.globalRewardKey,
-      })),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
-        states.content.text.promoCode,
-        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, 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(states.content.text.skeletonCardNum)].map(() => {
-      return (h("div", null,
-        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: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
-                width: "100%",
-              } },
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              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));
-  }
-  function Confetti() {
-    return (h("canvas", { ref: (canvas) => {
-        if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
-          return;
-        refs.canvasRef.current = canvas;
-      }, id: "my-canvas", class: sheet.classes.Confetti }));
-  }
-  if (states.noExchangeOptions)
-    return states.content.text.empty;
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("div", null,
-      stageMap(),
-      states.exchangeError && errorMessage(),
-      states.queryError && !states.exchangeError && queryErrorMessage(),
-      currentStage && currentStage(),
-      states.redeemStage === "success")));
-}
+import { getAssetPath, h } from "@stencil/core";
+import { intl } from "../../global/global";
+import { HostBlock } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
+import { ShareLinkView } from "../sqm-share-link/sqm-share-link-view";
+import { ProgressBar } from "./progressBar";
+import { CheckmarkFilled, Gift } from "./SVGs";
+const style = {
+  HostBlock: HostBlock,
+  Container: {
+    minWidth: "300px",
+    position: "relative",
+  },
+  FullImage: {
+    objectFit: "contain",
+    maxWidth: "100%",
+    height: "250px",
+    display: "flex",
+    margin: "0 auto",
+  },
+  Select: {
+    "&::part(label)": {
+    //   color: "var(--sl-color-primary-500)",
+    },
+    "&::part(menu)": {
+      maxHeight: "50vh",
+    },
+    "& sl-menu-item::part(checked-icon)": {
+      top: "8px",
+    },
+    "& sl-menu-item::part(base)": {
+      flexDirection: "column",
+    },
+    "& sl-menu-item::part(base):focus": {
+      background: "transparent",
+      color: "var(--sl-color-gray-700)",
+    },
+  },
+  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",
+    },
+  },
+  Title: {
+    fontSize: "var(--sl-font-size-large)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    margin: "var(--sl-spacing-large) 0",
+  },
+  Image: {
+    padding: "var(--sl-spacing-small)",
+    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: "var(--sl-spacing-small)",
+    paddingLeft: "0",
+    "& .title": {
+      fontSize: "var(--sl-font-size-medium)",
+      lineHeight: "var(--sl-line-height-dense)",
+      fontWeight: "600",
+      color: "var(--sl-color-neutral-1000)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+    },
+    "& .amount": {
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-x-small)",
+      color: "var(--sl-color-neutral-500)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+    },
+    "& .error": {
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-x-small)",
+      fontWeight: "600",
+      color: "var(--sl-color-warning-600)",
+      display: "-webkit-box",
+      "-webkit-line-clamp": "1",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+    },
+  },
+  ChooseAmount: {
+    maxWidth: "800px",
+    margin: "auto",
+    "& .wrapper": {
+      display: "flex",
+      gap: "var(--sl-spacing-xx-large)",
+      "@media (max-width: 799px)": {
+        flexDirection: "column",
+      },
+    },
+    "& .image": {
+      width: "50%",
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "250px",
+      display: "flex",
+      "@media (max-width: 799px)": {
+        width: "auto",
+      },
+    },
+    "& .text": {
+      width: "50%",
+      maxWidth: "400px",
+      //   minWidth: "330px",
+      "@media (max-width: 799px)": {
+        width: "auto",
+        margin: "auto",
+      },
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-1000)",
+    },
+    "& .points": {
+      fontSize: "var(--sl-font-size-large)",
+      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)",
+    },
+    "& sl-menu-item[disabled]::part(label)": {
+      color: "var(--sl-color-neutral-300)",
+    },
+    "& sl-menu-item[disabled]": {
+      "& .step-cost": {
+        color: "var(--sl-color-neutral-300)",
+      },
+      "& .step-value": {
+        color: "var(--sl-color-neutral-300)",
+      },
+    },
+  },
+  SelectItem: {
+    display: "flex",
+    flexDirection: "column",
+    "&::part(label)": {
+      color: "var(--sl-color-neutral-900)",
+      margin: "0",
+    },
+    "& .step-cost": {
+      color: "var(--sl-color-neutral-500)",
+      marginBottom: "var(--sl-spacing-x-small)",
+    },
+    "& .step-unavailable": {
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-warning-500)",
+      margin: "0",
+    },
+  },
+  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)",
+      maxWidth: "350px",
+      margin: "0 auto",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-xx-large)",
+      marginTop: "var(--sl-spacing-xx-small)",
+    },
+    "& .promo": {
+      maxWidth: "350px",
+      margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+      textAlign: "left",
+      color: "var(--sl-color-neutral-700)",
+    },
+  },
+  Grid: {
+    display: "grid",
+    justifyContent: "center",
+    gap: "20px",
+    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  },
+  Confirmation: {
+    maxWidth: "800px",
+    margin: "auto",
+    "& .wrapper": {
+      display: "flex",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+      },
+    },
+    "& .reward-item-container": {
+      "@media (max-width: 499px)": {
+        display: "flex",
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        alignItems: "center",
+      },
+    },
+    "& .reward-item-container .reward-title": {
+      paddingBottom: "var(--sl-spacing-medium)",
+      lineHeight: "20px",
+      "@media (max-width: 499px)": {
+        paddingBottom: "none",
+        paddingLeft: "var(--sl-spacing-small)",
+      },
+    },
+    "& .padding": {
+      padding: "var(--sl-spacing-medium) 0",
+      "@media (max-width: 499px)": {
+        padding: "var(--sl-spacing-small) 0",
+      },
+    },
+    "& .field": {
+      width: "30%",
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-neutral-400)",
+      textAlign: "left",
+      paddingRight: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        paddingRight: "0",
+        paddingBottom: "0",
+      },
+    },
+    "& .value": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& .top-border": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& .image": {
+      width: "200px",
+      "@media (max-width: 499px)": {
+        width: "100px",
+      },
+    },
+  },
+  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: 499px)": {
+        width: "100%",
+        marginRight: "0",
+        marginTop: "var(--sl-spacing-small)",
+      },
+    },
+    "& .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: 499px)": {
+        width: "100%",
+      },
+    },
+    "& .continue.right": {
+      marginLeft: "auto",
+    },
+    "& .continue.center": {
+      margin: "0 auto",
+    },
+  },
+  Confetti: {
+    pointerEvents: "none",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: "0%",
+    left: "0%",
+    zIndex: "1",
+  },
+};
+// JSS config
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+export function RewardExchangeView(props) {
+  const { states, data, callbacks, refs } = props;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
+  };
+  function getInput() {
+    var _a, _b, _c;
+    const item = states.selectedItem;
+    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
+      return h("span", { class: "points" }, 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: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, 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,
+        });
+      } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
+      var _a, _b;
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet.classes.SelectItem },
+        step.prettyDestinationValue,
+        h("br", null),
+        h("div", { class: "step-cost", slot: "suffix" },
+          step.prettySourceValue,
+          step.unavailableReasonCode && (h("p", { class: "step-unavailable" }, 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,
+          }, {
+            unavailableReasonCode: step.unavailableReasonCode,
+            sourceUnit: item.sourceUnit,
+            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
+          }))))));
+    })));
+  }
+  function chooseReward() {
+    var _a;
+    return [
+      h("div", null,
+        h("div", { class: sheet.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (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",
+          };
+          return (h("div", { key: item.key, 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/Reward-image.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",
+                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
+                  h("div", { class: "amount", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, intl.formatMessage({
+                    id: "sourceAmountMessage",
+                    defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
+                  }, {
+                    ruleType: item.ruleType,
+                    sourceValue: item.prettySourceValue,
+                    sourceMinValue: item.prettySourceMinValue,
+                    sourceMaxValue: item.prettySourceMaxValue,
+                  })),
+                  item.unavailableReasonCode && (h("div", { class: "error" },
+                    h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
+                    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,
+                    }, {
+                      unavailableReasonCode: 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", { class: sheet.classes.ChooseAmount },
+        h("div", { class: "wrapper" },
+          h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+              getAssetPath("./assets/Reward-image.png") }),
+          h("div", { class: "text" },
+            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", null, 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() {
+    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
+    const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
+    return (h("div", null,
+      h("div", { class: sheet.classes.Confirmation },
+        h("div", { class: sheet.classes.Title }, states.content.text.redeemTitle),
+        h("div", { class: "wrapper" },
+          h("div", { class: "field" }, states.content.text.rewardNameTitle),
+          h("div", { class: "reward-item-container" },
+            h("div", { class: "reward-title" }, selectedItem.name),
+            h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                getAssetPath("./assets/Reward-image.png") }))),
+        h("div", { class: "wrapper padding" },
+          h("div", { class: "field" })),
+        amount && (h("div", { class: "wrapper top-border padding" },
+          h("div", { class: "field" }, states.content.text.rewardAmountTitle),
+          h("div", null, amount))),
+        h("div", { class: "wrapper top-border padding" },
+          h("div", { class: "field" }, states.content.text.costTitle),
+          h("div", { class: "value" }, cost)),
+        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, _d, _e, _f;
+    return (h("div", { class: sheet.classes.Success },
+      h(Gift, null),
+      h(Confetti, null),
+      h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
+      h("div", { class: "description" }, intl.formatMessage({
+        id: "successMessage",
+        defaultMessage: states.content.text.redemptionSuccessText,
+      }, {
+        sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
+        destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
+          states.selectedItem.globalRewardKey,
+      })),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
+        states.content.text.promoCode,
+        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, 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(states.content.text.skeletonCardNum)].map(() => {
+      return (h("div", null,
+        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: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
+                width: "100%",
+              } },
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              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));
+  }
+  function Confetti() {
+    return (h("canvas", { ref: (canvas) => {
+        if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
+          return;
+        refs.canvasRef.current = canvas;
+      }, id: "my-canvas", class: sheet.classes.Confetti }));
+  }
+  if (states.noExchangeOptions)
+    return states.content.text.empty;
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null,
+      stageMap(),
+      states.exchangeError && errorMessage(),
+      states.queryError && !states.exchangeError && queryErrorMessage(),
+      currentStage && currentStage(),
+      states.redeemStage === "success")));
+}