@saasquatch/mint-components 1.15.0-115 → 1.15.0-117

package/dist/cjs/RewardExchangeListData-a787ce54.js

@@ -0,0 +1,1144 @@
+'use strict';
+
+const index = require('./index-ad175903.js');
+const global = require('./global-aae86f09.js');
+const JSS = require('./JSS-518e9b4d.js');
+const mixins = require('./mixins-f51b04f1.js');
+const copyTextView = require('./copy-text-view-f0313f78.js');
+
+const LeftArrow = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginBottom: "-2px", marginRight: "5px" } },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.34655 1.90573C7.75405 2.31323 7.75405 2.97392 7.34655 3.38143L3.56266 7.16531H14.9565C15.5328 7.16531 16 7.6325 16 8.20879C16 8.78509 15.5328 9.25227 14.9565 9.25227H3.56266L7.69437 13.384C8.10188 13.7915 8.10188 14.4522 7.69437 14.8597C7.28687 15.2672 6.62617 15.2672 6.21867 14.8597L0.305628 8.94664C-0.101876 8.53914 -0.101876 7.87845 0.305628 7.47094L5.87084 1.90573C6.27835 1.49822 6.93904 1.49822 7.34655 1.90573Z", fill: "#858585" })));
+const ExchangeArrows = () => (index.h("svg", { width: 19, height: 15, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.125 14.783a.6.6 0 0 1-.851 0l-3.9-3.923a.6.6 0 1 1 .85-.846L4.1 12.905V1.52a.6.6 0 0 1 1.2 0v11.385l2.875-2.891a.6.6 0 1 1 .85.846l-3.9 3.923Zm9.6-13.686a.6.6 0 0 0-.851 0l-3.9 3.923a.6.6 0 0 0 .85.846L13.7 2.975V14.36a.6.6 0 1 0 1.2 0V2.975l2.875 2.891a.6.6 0 1 0 .85-.846l-3.9-3.923Z", fill: "#333" })));
+const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
+const CheckmarkFilled = () => (index.h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", fill: "currentColor" }),
+  index.h("path", { d: "M5.68394 8.77046C5.28103 8.39273 4.64819 8.41315 4.27046 8.81606C3.89273 9.21897 3.91315 9.85181 4.31606 10.2295L5.68394 8.77046ZM7.66667 12L6.98273 12.7295C7.36738 13.0902 7.96595 13.0902 8.35061 12.7295L7.66667 12ZM13.6839 7.72954C14.0869 7.35181 14.1073 6.71897 13.7295 6.31606C13.3518 5.91315 12.719 5.89273 12.3161 6.27046L13.6839 7.72954ZM4.31606 10.2295L6.98273 12.7295L8.35061 11.2705L5.68394 8.77046L4.31606 10.2295ZM8.35061 12.7295L13.6839 7.72954L12.3161 6.27046L6.98273 11.2705L8.35061 12.7295Z", fill: "white" })));
+const Gift = () => (index.h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
+  index.h("path", { d: "M133.039 74.224a2.18 2.18 0 0 0 2.187-2.172v-19.19c0-1.2-.98-2.172-2.187-2.172H31.347a2.18 2.18 0 0 0-2.187 2.172v19.19c0 1.2.98 2.172 2.187 2.172H133.04Z", fill: "#FFC000" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M123.287 35.172c0 6.056-9.155 15.226-13.76 15.654H88.888V126H75.141V50.826H58.534c-9.462-2.038-17.803-9.258-17.803-16.944 0-7.49 3.274-13.422 9.23-15.983 5.693-2.446 12.265-1.105 17.46 2.479 6.378 4.398 9.956 12.654 13.202 20.144.284.657.567 1.308.848 1.95.274-.608.55-1.228.83-1.856 3.216-7.22 6.887-15.464 13.057-19.89 5.454-3.913 12.387-5.39 18.38-2.711 6.197 2.77 9.549 9.127 9.549 17.157Zm-23.306-8.266c3.305-2.37 7.262-2.8 10.645 0 2.946 2.44 3.103 3.588 3.482 6.351l.067.483c0 4.09-3.549 10.252-7.097 10.252-2.515 0-4.489-.022-6.34-.041-3.375-.036-6.337-.068-11.403.04.966-1.86 1.737-3.644 2.473-5.346 1.967-4.553 3.678-8.515 8.173-11.739Zm-39.034 0c-1.6-1.103-5.268-.61-6.79.043-1.257.54-3.134 2.19-3.134 6.933 0 4.61 7.511 8.59 7.511 8.59s5.962 1.52 16.607 1.52c-3.624-8.922-8.757-13.336-14.194-17.086Z", fill: "#EB5757" }),
+  index.h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
+  index.h("g", { filter: "url(#a)" },
+    index.h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
+  index.h("path", { d: "M150.446 79.134a.5.5 0 0 1 .9 0l1.133 2.336c.05.102.132.184.234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.503.503 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.499.499 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.343-1.122a.499.499 0 0 0 .234-.233l1.134-2.336Z", fill: "#FAB6B6" }),
+  index.h("path", { d: "M14.86 29.168a.5.5 0 0 1 .9 0l1.133 2.336a.5.5 0 0 0 .234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.5.5 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.5.5 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.344-1.122a.5.5 0 0 0 .233-.233l1.134-2.336Z", fill: "#F4EFBC" }),
+  index.h("path", { d: "m125.382 0 .712 1.466 1.475.706-1.475.707-.712 1.466-.711-1.466-1.476-.707 1.476-.706.711-1.466Z", fill: "#FDA802" }),
+  index.h("path", { d: "m2.187 103.552.711 1.466 1.476.706-1.476.707-.711 1.466-.711-1.466L0 105.724l1.476-.706.71-1.466Z", fill: "#E4599C" }),
+  index.h("defs", null,
+    index.h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
+      index.h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
+      index.h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      index.h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
+
+function Dot({ active, completed, incomplete, stage, }) {
+  return (index.h("div", { style: {
+      display: "flex",
+    } },
+    index.h("div", { style: {
+        backgroundColor: completed
+          ? "var(--sqm-success-color-icon)"
+          : incomplete
+            ? "var(--sqm-border-color)"
+            : "white",
+        border: active
+          ? "1px solid var(--sqm-success-color-border)"
+          : incomplete
+            ? "1px solid var(--sqm-border-color)"
+            : "1px solid var(--sqm-success-color-border)",
+        borderRadius: "50%",
+        width: "23px",
+        height: "23px",
+        margin: "-11px",
+        zIndex: "1",
+        boxSizing: "content-box",
+      } }, completed ? (index.h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
+      index.h(CheckMark, null))) : (index.h("div", { style: {
+        color: active
+          ? "var(--sqm-success-color-border)"
+          : "var(--sqm-text-subdued)",
+        width: "23px",
+        lineHeight: "24px",
+        textAlign: "center",
+        position: "relative",
+      } }, stage + 1)))));
+}
+function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
+  return (index.h("div", { style: {
+      content: "''",
+      flex: "0.5 0.5 0",
+      height: "4px",
+      borderRadius: "4px",
+      background: incomplete || active
+        ? "var(--sqm-border-color)"
+        : "var(--sqm-success-color-icon)",
+      position: "relative",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      columnGap: "50px",
+      marginRight: "-2px",
+      boxSizing: "content-box",
+      opacity: invisible ? "0" : "1",
+    } }));
+}
+function Progress({ active, completed, incomplete, stage }) {
+  return [
+    index.h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
+    index.h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
+    index.h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
+  ];
+}
+function ProgressBar({ stageCount, currentStage, }) {
+  return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
+}
+
+const style = {
+  HostBlock: mixins.HostBlock,
+  Container: {
+    minWidth: "300px",
+    position: "relative",
+  },
+  FullImage: {
+    objectFit: "contain",
+    maxWidth: "100%",
+    height: "250px",
+    display: "flex",
+    margin: "0 auto",
+  },
+  Select: {
+    "&::part(base)": {
+      borderRadius: "var(--sqm-input-border-radius)",
+    },
+    "&::part(label)": {
+      color: "var(--sqm-input-label-color)",
+    },
+    "&::part(menu)": {
+      maxHeight: "450px",
+    },
+    "& sl-menu-item::part(checked-icon)": {
+      top: "8px",
+      color: "var(--sqm-text)",
+    },
+    "& sl-menu-item::part(base)": {
+      flexDirection: "column",
+    },
+    "& sl-menu-item::part(base):focus": {
+      background: "var(--sqm-accent-color-background)",
+      color: "var(--sqm-text)",
+    },
+  },
+  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(--sqm-text-subdued)",
+      },
+    },
+  },
+  CardLayout: {
+    display: "flex",
+    width: "100%",
+    borderRadius: "3px",
+    background: "rgba(0, 0, 0, 0)",
+  },
+  Card: {
+    display: "flex",
+    userSelect: "none",
+    height: "120px",
+    "&::part(base)": {
+      background: "var(--sqm-portal-background)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+      borderRadius: "var(--sqm-border-radius-normal)",
+      boxShadow: "none",
+      width: "100%",
+    },
+    "&::part(body)": {
+      display: "flex",
+      padding: 0,
+    },
+    "& .selected": {
+      borderRadius: "var(--sqm-border-radius-normal)",
+      position: "relative",
+      top: "-2%",
+      left: "100%",
+      color: "var(--sqm-primary-color)",
+      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(--sqm-text)",
+      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(--sqm-text-subdued)",
+      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(--sqm-warning-color-icon)",
+      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",
+      "@media (max-width: 799px)": {
+        width: "auto",
+        margin: "auto",
+      },
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sqm-text)",
+    },
+    "& .points": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sqm-accent-color-text)",
+    },
+    "& .description": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sqm-text-subdued)",
+      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(sqm-text-subdued)",
+    },
+    "& sl-menu-item[disabled]": {
+      "& .step-cost": {
+        color: "var(sqm-text-subdued)",
+      },
+      "& .step-value": {
+        color: "var(sqm-text-subdued)",
+      },
+    },
+  },
+  SelectItem: {
+    display: "flex",
+    flexDirection: "column",
+    "&::part(label)": {
+      color: "var(--sqm-text)",
+      margin: "0",
+    },
+    "& .step-cost": {
+      color: "var(--sqm-text-subdued)",
+      marginBottom: "var(--sl-spacing-x-small)",
+    },
+    "& .step-unavailable": {
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sqm-warning-color-text)",
+      margin: "0",
+    },
+  },
+  Success: {
+    textAlign: "center",
+    "& .title": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sqm-text)",
+    },
+    "& .description": {
+      color: "var(--sqm-text-subued)",
+      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(--sqm-text-subdued)",
+    },
+  },
+  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%",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+      color: "var(--sqm-text-subdued)",
+      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: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+    },
+    "& .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)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        marginRight: "0",
+        marginTop: "var(--sl-spacing-small)",
+      },
+    },
+    "& .continue": {
+      "@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 = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+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 index.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 (index.h("p", null, global.intl.formatMessage({
+        id: "notEnoughError",
+        defaultMessage: states.content.text.notEnoughError,
+      }, {
+        sourceUnit: item.sourceUnit,
+      })));
+    }
+    return (index.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 (index.h("sl-menu-item", { value: step, disabled: !step.available, class: sheet.classes.SelectItem },
+        step.prettyDestinationValue,
+        index.h("br", null),
+        index.h("div", { class: "step-cost", slot: "suffix" },
+          step.prettySourceValue,
+          step.unavailableReasonCode && (index.h("p", { class: "step-unavailable" }, global.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 [
+      index.h("div", { part: "choose-reward-container" },
+        index.h("div", { class: sheet.classes.Title }, states.content.text.rewardTitle),
+        states.loading || states.queryError ? (loading()) : (index.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(--sqm-primary-color)"
+              : "none",
+            borderRadius: "var(--sqm-border-radius-normal)",
+            borderColor: "none",
+          };
+          return (index.h("div", { key: item.key, style: style },
+            index.h("sl-card", { exportparts: "base: exchange-card-container", 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) && (index.h("div", { class: "selected" },
+                index.h(CheckmarkFilled, null))),
+              index.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)",
+                } },
+                index.h("div", { class: sheet.classes.Image, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  index.h("img", { class: item.unavailableReasonCode
+                      ? "image subdued"
+                      : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                      index.getAssetPath("./assets/Reward-image.png") })),
+                index.h("div", { class: sheet.classes.TextArea, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  index.h("div", { class: "title", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
+                  index.h("div", { class: "amount", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, global.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 && (index.h("div", { class: "error" },
+                    index.h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
+                    global.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,
+                    }))))))));
+        }))),
+        index.h("div", { class: sheet.classes.Button },
+          index.h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", 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 (index.h("div", null,
+      index.h("div", { class: sheet.classes.ChooseAmount, part: "choose-amount-container" },
+        index.h("div", { class: "wrapper" },
+          index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+              index.getAssetPath("./assets/Reward-image.png") }),
+          index.h("div", { class: "text" },
+            index.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" ? (index.h("div", { class: "points" }, input)) : (index.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" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", null, input)),
+            index.h("div", { class: "space" }))),
+        index.h("div", { class: sheet.classes.Button },
+          index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", 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 (index.h("div", null,
+      index.h("div", { class: sheet.classes.Confirmation, part: "confirmation-container" },
+        index.h("div", { class: sheet.classes.Title }, states.content.text.redeemTitle),
+        index.h("div", { class: "wrapper" },
+          index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
+          index.h("div", { class: "reward-item-container" },
+            index.h("div", { class: "reward-title" }, selectedItem.name),
+            index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                index.getAssetPath("./assets/Reward-image.png") }))),
+        index.h("div", { class: "wrapper padding" },
+          index.h("div", { class: "field" })),
+        amount && (index.h("div", { class: "wrapper top-border padding" },
+          index.h("div", { class: "field" }, states.content.text.rewardAmountTitle),
+          index.h("div", null, amount))),
+        index.h("div", { class: "wrapper top-border padding" },
+          index.h("div", { class: "field" }, states.content.text.costTitle),
+          index.h("div", { class: "value" }, cost)),
+        index.h("div", { class: sheet.classes.Button },
+          index.h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          index.h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
+  }
+  function success() {
+    var _a, _b, _c, _d, _e, _f;
+    return (index.h("div", { class: sheet.classes.Success, part: "success-container" },
+      index.h(Gift, null),
+      index.h(Confetti, null),
+      index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
+      index.h("div", { class: "description" }, global.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) && (index.h("div", { class: "promo" },
+        states.content.text.promoCode,
+        index.h(copyTextView.CopyTextView, { copyString: 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 }))),
+      index.h("div", { class: sheet.classes.Button },
+        index.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 (index.h("div", { class: sheet.classes.ProgressBar },
+      index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stageList.indexOf(stage) <= stageNumber) {
+          return index.h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (index.h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
+      })),
+      index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
+  }
+  function loading() {
+    return (index.h("div", { class: sheet.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+      return (index.h("div", null,
+        index.h("sl-card", { class: sheet.classes.Card },
+          index.h("div", { class: sheet.classes.CardLayout },
+            index.h("div", null,
+              index.h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
+                  margin: "9px",
+                  "--border-radius": "var(--sqm-border-radius-normal)",
+                } })),
+            index.h("div", { style: {
+                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
+                width: "100%",
+              } },
+              index.h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              index.h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              index.h("sl-skeleton", { style: { width: "45%" } }))))));
+    })));
+  }
+  function errorMessage() {
+    return (index.h("sl-alert", { type: "danger", open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.redemptionError));
+  }
+  function queryErrorMessage() {
+    return (index.h("sl-alert", { type: "danger", open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.queryError));
+  }
+  function Confetti() {
+    return (index.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 (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", null,
+      stageMap(),
+      states.exchangeError && errorMessage(),
+      states.queryError && !states.exchangeError && queryErrorMessage(),
+      currentStage && currentStage(),
+      states.redeemStage === "success")));
+}
+
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, exchangeError = false, loading = false, fueltank = null, noExchangeOptions = false, queryError = false) => ({
+  states: {
+    content: {
+      text: {
+        notAvailableError: "{unavailableReasonCode, select, NOT_CHAMPION {CUSTOM ERROR MESSAGE } US_TAX {Exceeds tax limit for this year} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
+        chooseRewardTitle: "Rewards",
+        chooseAmountTitle: "Select",
+        confirmationTitle: "Confirm",
+        rewardTitle: "Choose a reward",
+        cancelText: "Cancel",
+        backText: "Back",
+        continueText: "Continue",
+        continueToConfirmationText: "Continue to confirmation",
+        redeemText: "Redeem",
+        redeemTitle: "Confirm and redeem",
+        redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
+        doneText: "Done",
+        tooltipText: "Copied!",
+        selectText: "Select amount to receive",
+        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
+        rewardRedeemedText: "Reward redeemed",
+        redemptionError: "An error occured trying to redeem this reward. Please try again",
+        queryError: "Unable to load reward exchange list. Please try again",
+        promoCode: "Promo code",
+        skeletonCardNum: 8,
+        rewardNameTitle: "Reward Name",
+        rewardAmountTitle: "Reward Amount",
+        costTitle: "Cost",
+        notEnoughError: "Sorry not enough!",
+        empty: (index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })),
+      },
+    },
+    queryError: queryError,
+    redeemStage: stage,
+    amount: 0,
+    exchangeError: exchangeError,
+    loading: loading,
+    selectedItem: selectedItem,
+    selectedStep: selectedStep,
+    noExchangeOptions: noExchangeOptions,
+    open: false,
+  },
+  data: {
+    exchangeList: data,
+    fuelTankCode: fueltank,
+  },
+  callbacks: {
+    exchangeReward: null,
+    resetState: null,
+    setStage: null,
+    setExchangeState: null,
+    copyFuelTankCode: null,
+  },
+  refs: null,
+});
+const baseReward = {
+  key: "reward",
+  name: "Demo Reward",
+  description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
+  imageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png",
+  available: true,
+  unavailableReasonCode: null,
+  ruleType: "FIXED_GLOBAL_REWARD",
+  sourceUnit: "POINT",
+  sourceValue: 10,
+  prettySourceValue: "10 SaaSquatch Points",
+  sourceMinValue: null,
+  prettySourceMinValue: null,
+  sourceMaxValue: null,
+  prettySourceMaxValue: null,
+  destinationMinValue: null,
+  prettyDestinationMinValue: null,
+  destinationMaxValue: null,
+  prettyDestinationMaxValue: null,
+  globalRewardKey: "",
+  destinationUnit: null,
+  steps: [
+    {
+      prettyDestinationValue: "Reward Step 1",
+      prettySourceValue: "50 Points",
+      available: true,
+      unavailableReasonCode: null,
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+    {
+      prettyDestinationValue: "Reward Step 2",
+      prettySourceValue: "100 Points",
+      available: false,
+      unavailableReasonCode: "Not enough points",
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+  ],
+};
+const notEnoughPoints = {
+  available: false,
+  unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
+};
+const usTax = {
+  available: false,
+  unavailableReasonCode: "US_TAX",
+};
+const customError = {
+  available: false,
+  unavailableReasonCode: "NOT_CHAMPION",
+};
+const selected = {
+  key: "r1",
+};
+const imageUrl = (props) => ({
+  imageUrl: props,
+});
+const name = (props) => ({
+  name: props,
+});
+const description = (props) => ({
+  description: props,
+});
+const fixedValue = (props) => ({
+  prettySourceValue: props,
+});
+const variableValue = (min, max, unit) => ({
+  ruleType: "VARIABLE_CREDIT_REWARD",
+  sourceMinValue: min,
+  prettySourceMinValue: min + " " + unit,
+  sourceMaxValue: max,
+  prettySourceMaxValue: max + " " + unit,
+});
+const demoData = [
+  {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
+    ...fixedValue("40 Points"),
+  },
+  {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  },
+  {
+    ...baseReward,
+    ...name("$50 Store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
+    ...fixedValue("100 Points"),
+  },
+  {
+    ...baseReward,
+    ...name("Variable amount of store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
+    ...variableValue(20, 100, "Points"),
+  },
+];
+const data = [
+  {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  },
+  {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...name("$50 Store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...name("Variable amount of store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
+    ...variableValue(20, 100, "Points"),
+  },
+  {
+    ...baseReward,
+    ...notEnoughPoints,
+    ...name("A very rare cactus"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
+    ...fixedValue("2000 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...usTax,
+    ...name("$1000 Store credit with a really super long name in the front page"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
+  },
+  {
+    ...baseReward,
+    ...notEnoughPoints,
+    ...name("A holiday gift box"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+];
+const rewardExchange = {
+  ...baseResponse(data),
+};
+const demoRewardExchange = {
+  ...baseResponse(demoData),
+};
+const rewardExchangeLongText = {
+  ...baseResponse([
+    {
+      ...baseReward,
+      ...notEnoughPoints,
+      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    {
+      ...baseReward,
+      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    {
+      ...baseReward,
+      ...name("Suuuuuuuuper aweeeeesssssoooommme reward!!!!!!"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    ...data,
+  ]),
+};
+const rewardExchangeCustomErrorMsg = {
+  ...baseResponse([
+    {
+      ...baseReward,
+      ...customError,
+      ...name("A very rare cactus"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
+      ...fixedValue("2000 SaaSquatch Points"),
+    },
+    ...data,
+  ]),
+};
+const rewardExchangeSelected = {
+  ...baseResponse(data, "chooseReward", {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  }),
+};
+const stepsData = (start, end, inc) => {
+  const steps = [];
+  for (let i = start; i <= end; i += inc) {
+    steps.push({
+      sourceValue: i,
+      prettySourceValue: i + " SaaSquatch Points",
+      destinationValue: i,
+      prettyDestinationValue: "$" + i,
+      available: true,
+      unavailableReasonCode: null,
+    });
+  }
+  return steps;
+};
+const baseStep = (dst, dstUnit, src, srcUnit, available = true, unavailableReason = null) => ({
+  destinationValue: dst,
+  prettyDestinationValue: dstUnit + dst,
+  sourceValue: src,
+  prettySourceValue: src + " " + srcUnit,
+  available: available,
+  unavailableReasonCode: unavailableReason,
+});
+const chooseAmountVariable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
+    ],
+  }),
+};
+const chooseAmountVariableNoDescription = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...description(""),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
+    ],
+  }),
+};
+const chooseAmountVariableDisabled = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+      baseStep(50, "$", 100, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+      baseStep(60, "$", 120, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+    ],
+  }),
+};
+const chooseAmountVariableUnavailable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points", false, "US_TAX"),
+      baseStep(50, "$", 100, "Points", false, "US_TAX"),
+      baseStep(60, "$", 120, "Points", false, "US_TAX"),
+    ],
+  }),
+};
+const chooseAmountFixed = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const chooseAmountFixedNoDescription = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...description(""),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const confirmFixed = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const confirmVariable = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+const redemptionError = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points"), true),
+};
+const queryError = {
+  ...baseResponse(undefined, "chooseReward", undefined, undefined, undefined, undefined, undefined, undefined, true),
+};
+const success = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
+const successVariable = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+const loading = {
+  ...baseResponse(null, "chooseReward", null, null, false, true),
+};
+const empty = {
+  ...baseResponse(null, "chooseReward", null, null, false, false, null, true),
+};
+
+exports.ProgressBar = ProgressBar;
+exports.RewardExchangeView = RewardExchangeView;
+exports.chooseAmountFixed = chooseAmountFixed;
+exports.chooseAmountFixedNoDescription = chooseAmountFixedNoDescription;
+exports.chooseAmountVariable = chooseAmountVariable;
+exports.chooseAmountVariableDisabled = chooseAmountVariableDisabled;
+exports.chooseAmountVariableNoDescription = chooseAmountVariableNoDescription;
+exports.chooseAmountVariableUnavailable = chooseAmountVariableUnavailable;
+exports.confirmFixed = confirmFixed;
+exports.confirmVariable = confirmVariable;
+exports.demoRewardExchange = demoRewardExchange;
+exports.empty = empty;
+exports.loading = loading;
+exports.queryError = queryError;
+exports.redemptionError = redemptionError;
+exports.rewardExchange = rewardExchange;
+exports.rewardExchangeCustomErrorMsg = rewardExchangeCustomErrorMsg;
+exports.rewardExchangeLongText = rewardExchangeLongText;
+exports.rewardExchangeSelected = rewardExchangeSelected;
+exports.success = success;
+exports.successVariable = successVariable;