@saasquatch/mint-components 1.5.0-97 → 1.5.0

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

@@ -5,370 +5,373 @@ 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 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,
-  };
-  const style = {
-    HostBlock: HostBlock,
-    Container: {
-      minWidth: "300px",
-      position: "relative",
+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)",
     },
-    FullImage: {
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "250px",
-      display: "flex",
-      margin: "0 auto",
+    "&::part(menu)": {
+      maxHeight: "50vh",
     },
-    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(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",
       },
-      "& sl-menu-item::part(base):focus": {
-        background: "transparent",
-        color: "var(--sl-color-gray-700)",
+      "& .text.subdued": {
+        color: "var(--sl-color-neutral-200)",
       },
     },
-    ProgressBar: {
-      maxWidth: "350px",
+  },
+  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%",
-      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: {
+    "&::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%",
-      borderRadius: "3px",
-      background: "rgba(0, 0, 0, 0)",
+      height: "100%",
+      objectFit: "contain",
+      borderRadius: "4px",
     },
-    Card: {
-      display: "flex",
-      userSelect: "none",
-      height: "120px",
-      "&::part(base)": {
-        boxShadow: "none",
-        width: "100%",
-      },
-      "&::part(body)": {
-        display: "flex",
-        padding: 0,
-      },
-      "& .selected": {
+    "& .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: "-2%",
-        left: "100%",
-        color: "var(--sl-color-primary-500)",
-        margin: "-9px",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-xx-small)",
       },
     },
-    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",
+  },
+  ChooseAmount: {
+    maxWidth: "800px",
+    margin: "auto",
+    "& .wrapper": {
+      display: "flex",
+      gap: "var(--sl-spacing-xx-large)",
+      "@media (max-width: 799px)": {
+        flexDirection: "column",
       },
     },
-    Square: {
-      width: "120px",
-      height: "118px",
-      borderRadius: "3px 0 0 3px",
-      "& .image": {
-        width: "100%",
-        height: "100%",
-        objectFit: "contain",
-        borderRadius: "inherit",
+    "& .image": {
+      width: "50%",
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "250px",
+      display: "flex",
+      "@media (max-width: 799px)": {
+        width: "auto",
       },
     },
-    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",
+    "& .text": {
+      width: "50%",
+      maxWidth: "400px",
+      //   minWidth: "330px",
+      "@media (max-width: 799px)": {
+        width: "auto",
+        margin: "auto",
       },
-      "& .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",
+    },
+    "& .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)",
       },
-      "& .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)",
-        },
+      "& .step-value": {
+        color: "var(--sl-color-neutral-300)",
       },
     },
-    ChooseAmount: {
+  },
+  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",
-      alignItems: "center",
-      justifyContent: "center",
-      margin: "var(--sl-spacing-medium) 0",
-      "& .wrapper": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "var(--sl-spacing-xx-large)",
-        "@media (max-width: 799px)": {
-          flexDirection: "column",
-        },
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
       },
-      "& .image": {
-        width: "50%",
-        objectFit: "contain",
-        maxWidth: "100%",
-        height: "250px",
+    },
+    "& .reward-item-container": {
+      "@media (max-width: 499px)": {
         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-200)",
-      },
-      "& sl-menu-item[disabled]": {
-        "& .step-cost": {
-          color: "var(--sl-color-neutral-200)",
-        },
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        alignItems: "center",
       },
     },
-    SelectItem: {
-      display: "flex",
-      flexDirection: "column",
-      "& > .step-cost": {
-        color: "var(--sl-color-neutral-400)",
-        height: "0",
-        marginBottom: "5px",
-      },
-      "& > .step-value": {
-        margin: "0",
+    "& .reward-item-container .reward-title": {
+      paddingBottom: "var(--sl-spacing-medium)",
+      lineHeight: "20px",
+      "@media (max-width: 499px)": {
+        paddingBottom: "none",
+        paddingLeft: "var(--sl-spacing-small)",
       },
     },
-    Success: {
-      textAlign: "center",
-      "& .title": {
-        fontSize: "var(--sl-font-size-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-1000)",
+    "& .padding": {
+      padding: "var(--sl-spacing-medium) 0",
+      "@media (max-width: 499px)": {
+        padding: "var(--sl-spacing-small) 0",
       },
-      "& .description": {
-        color: "var(--sl-color-neutral-400)",
+    },
+    "& .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%",
-        maxWidth: "350px",
-        margin: "0 auto",
-        lineHeight: "var(--sl-line-height-dense)",
-        marginBottom: "var(--sl-spacing-xx-large)",
-        marginTop: "var(--sl-spacing-xx-small)",
+        paddingRight: "0",
+        paddingBottom: "0",
       },
     },
-    Grid: {
-      display: "grid",
-      justifyContent: "center",
-      gap: "20px",
-      gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+    "& .value": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
     },
-    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",
-        },
+    "& .top-border": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& .image": {
+      width: "200px",
+      "@media (max-width: 499px)": {
+        width: "100px",
       },
-      "& .field": {
-        width: "30%",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-medium)",
+    },
+  },
+  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-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)",
+        color: "var(--sl-color-neutral-1000)",
       },
-      "& .image": {
-        width: "200px",
-        "@media (max-width: 499px)": {
-          width: "100px",
-        },
+      "@media (max-width: 499px)": {
+        width: "100%",
+        marginRight: "0",
+        marginTop: "var(--sl-spacing-small)",
       },
     },
-    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": {
+      "&::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)",
       },
-      "& .continue.center": {
-        margin: "0 auto",
+      "@media (max-width: 499px)": {
+        width: "100%",
       },
     },
-    Confetti: {
-      pointerEvents: "none",
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      top: "0%",
-      left: "0%",
-      zIndex: "1",
+    "& .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,
   };
-  // JSS config
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
   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", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
+      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",
@@ -377,8 +380,6 @@ export function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    // console.log("SELECTED ITEM ", states.selectedStep);
-    // console.log("CALLBACKS ", callbacks);
     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({
@@ -386,33 +387,28 @@ export function RewardExchangeView(props) {
           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) => {
-      // console.log(item.steps);
       var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available },
+      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet.classes.SelectItem },
         step.prettyDestinationValue,
-        " ",
         h("br", null),
-        step.unavailableReasonCode && (h("p", { style: {
-            fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-warning-500)",
-            margin: "0",
-          } }, 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,
-        }))),
-        h("div", { class: "step-cost", slot: "suffix" }, step.prettySourceValue)));
+        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("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.rewardTitle),
-        states.loading ? (loading()) : (h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        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)
@@ -488,8 +484,6 @@ export function RewardExchangeView(props) {
     const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
       ? false
       : input && !states.amount;
-    console.log("input", input);
-    console.log(states.amount);
     return (h("div", null,
       h("div", { class: sheet.classes.ChooseAmount },
         h("div", { class: "wrapper" },
@@ -498,20 +492,18 @@ export function RewardExchangeView(props) {
           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", { 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)))))));
+            ((_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() {
-    // console.log(selectedItem);
-    // console.log(selectedStep);
     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("h2", { style: { margin: "var(--sl-spacing-large) 0", textAlign: "center" } }, states.content.text.redeemTitle),
       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" },
@@ -531,28 +523,22 @@ export function RewardExchangeView(props) {
           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;
-    // console.log("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" }, states.content.text.rewardRedeemedText),
+      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: (_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) || ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.name) ||
+        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", { style: {
-          width: "40%",
-          margin: "-30px auto var(--sl-spacing-xxx-large) auto",
-          textAlign: "left",
-          color: "var(--sl-color-neutral-700)",
-        } },
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_e = states === null || states === void 0 ? void 0 : states.content) === null || _e === void 0 ? void 0 : _e.text.toopTipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        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))));
   }
@@ -614,12 +600,14 @@ export function RewardExchangeView(props) {
         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 && queryErrorMessage(),
+      states.queryError && !states.exchangeError && queryErrorMessage(),
       currentStage && currentStage(),
       states.redeemStage === "success")));
 }