@saasquatch/mint-components 1.5.0-2 → 1.5.0-20

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

@@ -4,55 +4,23 @@ import preset from "jss-preset-default";
 import { intl } from "../../global/global";
 import { HostBlock } from "../../global/mixins";
 import { ProgressBar } from "./progressBar";
-import { ExchangeArrows, CheckMark, Gift } from "./SVGs";
+import { ShareLinkView } from "../sqm-share-link/sqm-share-link-view";
+import { ExchangeArrows, Gift, CheckmarkFilled } from "./SVGs";
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-const stageProgressList = {
-  chooseReward: "Choose reward",
-  chooseAmount: "Amount",
-  confirmation: "Confirm",
-};
 export function RewardExchangeView(props) {
+  const { states, data, callbacks } = props;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
+  };
   const style = {
     HostBlock: HostBlock,
     Container: {
       padding: "var(--sl-spacing-medium)",
       position: "relative",
     },
-    CardContainer: {
-      "&:active": {
-      //boxShadow: "0 3px 10px #87ceeb6e!important",
-      },
-    },
-    Base: {
-      display: "flex",
-      cursor: "pointer",
-      textAlign: "center",
-      height: "120px",
-      "&::part(base)": {
-        boxShadow: "none",
-        width: "100%",
-        display: "flex",
-        margin: "0 auto",
-      },
-      "&::part(body)": {
-        padding: 0,
-        display: "flex",
-        width: "100%",
-      },
-    },
-    Drawer: {
-      "&::part(base)": {
-        minWidth: "400px",
-        maxWidth: "700px",
-        width: "50%",
-        margin: "0 auto",
-        right: "0",
-      },
-      "&::part(panel)": {
-        height: "85vh",
-        width: "100%",
-      },
-    },
     FullImage: {
       objectFit: "contain",
       maxWidth: "100%",
@@ -60,32 +28,11 @@ export function RewardExchangeView(props) {
       display: "flex",
       margin: "0 auto",
     },
-    PreviewImage: {
-      objectFit: "contain",
-      width: "120px",
-      height: "118px",
-      flex: 0.33,
-    },
-    InputBox: {
-      width: "100%",
-      marginBottom: "20px",
-    },
     Select: {
       "&::part(label)": {
         color: "var(--sl-color-primary-500)",
       },
     },
-    Buttons: {
-      marginLeft: "auto",
-      width: "100%",
-      maxWidth: "300px",
-    },
-    Button: {
-      margin: "10px 0",
-      display: "block",
-      textAlign: "center",
-      cursor: "pointer",
-    },
     ProgressBar: {
       maxWidth: "350px",
       width: "100%",
@@ -107,7 +54,13 @@ export function RewardExchangeView(props) {
         },
       },
     },
-    KutayCard: {
+    CardLayout: {
+      display: "flex",
+      width: "100%",
+      borderRadius: "3px",
+      background: "rgba(0, 0, 0, 0)",
+    },
+    Card: {
       display: "flex",
       userSelect: "none",
       height: "120px",
@@ -119,85 +72,92 @@ export function RewardExchangeView(props) {
         display: "flex",
         padding: 0,
       },
-      "& .selected-outline": {
-        width: "18px",
-        height: "18px",
-        minWidth: "18px",
-        borderRadius: "50%",
-        background: "var(--sl-color-primary-500)",
+      "& .selected": {
         position: "relative",
-        margin: "-9px",
+        top: "-2%",
         left: "100%",
-      },
-      "& .selected-checkmark": {
-        position: "relative",
-        left: "12%",
-        top: "-29%",
-        transform: "scale(0.8)",
+        color: "var(--sl-color-primary-500)",
+        margin: "-9px",
       },
     },
-    Square: {
-      width: "120px",
-      height: "118px",
-      borderRadius: "3px 0 0 3px",
+    Image: {
+      padding: "var(--sl-spacing-small)",
+      minWidth: "96px",
+      maxWidth: "96px",
       "& .image": {
         width: "100%",
         height: "100%",
         objectFit: "contain",
-        borderRadius: "inherit",
+        borderRadius: "4px",
       },
       "& .image.subdued": {
         filter: "brightness(0.95)",
         opacity: "0.5",
       },
     },
-    Image: {
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
       "& .image": {
+        width: "100%",
+        height: "100%",
         objectFit: "contain",
-        width: "120px",
-        height: "118px",
-        flex: 0.33,
-      },
-      "& .image.black": {
-        filter: "brightness(20%)",
+        borderRadius: "inherit",
       },
     },
     TextArea: {
       textAlign: "left",
-      padding: "12px",
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
       "& .title": {
-        fontSize: "16px",
-        lineHeight: "20px",
+        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: "14px",
-        lineHeight: "18px",
-        marginTop: "8px",
+        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: "14px",
-        lineHeight: "18px",
-        marginTop: "8px",
+        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-500)",
+        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: {
       margin: "var(--sl-spacing-medium) 0",
       "& .title": {
-        //fontSize: "var(--sl-font-size-large)",
-        fontSize: "113%",
+        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)",
-        fontSize: "113%",
+        fontSize: "var(--sl-font-size-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-sky-500)",
+        color: "var(--sl-color-primary-500)",
       },
       "& .description": {
         fontSize: "var(--sl-font-size-medium)",
@@ -234,7 +194,7 @@ export function RewardExchangeView(props) {
       gap: "20px",
       gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
     },
-    KutayButton: {
+    Button: {
       display: "flex",
       flexWrap: "wrap-reverse",
       margin: "var(--sl-spacing-medium) 0",
@@ -245,7 +205,7 @@ export function RewardExchangeView(props) {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-1000)",
         },
-        "@media (max-width: 1024px)": {
+        "@media (max-width: 499px)": {
           width: "100%",
           marginRight: "0",
         },
@@ -257,7 +217,7 @@ export function RewardExchangeView(props) {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-0)",
         },
-        "@media (max-width: 1024px)": {
+        "@media (max-width: 499px)": {
           width: "100%",
         },
       },
@@ -273,94 +233,120 @@ export function RewardExchangeView(props) {
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  const { states, data, callbacks } = props;
-  const { selectedItem, selectedStep } = states;
   function getInput() {
-    var _a, _b;
+    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);
     if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
-      return h("p", null,
-        "Not enough ",
-        item.sourceUnit,
-        " to redeem for this reward.");
+      return (h("p", null, intl.formatMessage({
+        id: "notEnoughError",
+        defaultMessage: states.content.text.notEnoughError,
+      }, {
+        sourceUnit: item.sourceUnit,
+      })));
     }
-    return (h("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    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,
         });
-      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => {
+      } }, (_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 },
         step.prettyDestinationValue,
         h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
           step.prettySourceValue,
-          step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
+          step.unavailableReasonCode && (h("p", { style: {
+              fontSize: "70%",
+              color: "var(--sl-color-warning-500)",
+            } }, intl.formatMessage({
             id: "unavailableCode",
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
             unavailableReason: step.unavailableReasonCode,
+            sourceUnit: item.sourceUnit,
+            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
           }))))));
     })));
   }
   function chooseReward() {
     var _a;
     return [
-      h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        var _a, _b;
-        const style = {
-          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
-            ? "0 0 0 2px var(--sl-color-primary-500)"
-            : "none",
-        };
-        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
-          ? item.prettySourceValue
-          : item.prettySourceMinValue && item.prettySourceMaxValue
-            ? `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`
-            : "";
-        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          h("sl-card", { class: sheet.classes.KutayCard, style: {
-              cursor: item.unavailableReasonCode
-                ? "not-allowed"
-                : "pointer",
-            }, onClick: () => item.available &&
-              callbacks.setExchangeState({ selectedItem: item }) },
-            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected-outline" },
-              h("div", { class: "selected-checkmark" },
-                h(CheckMark, null)))),
-            h("div", { style: {
-                display: "flex",
-                width: "100%",
-                borderRadius: "3px",
-                background: item.unavailableReasonCode
-                  ? "rgba(0, 0, 0, 0.05)"
-                  : "rgba(0, 0, 0, 0)",
-              } },
-              h("div", { class: sheet.classes.Square },
-                h("img", { class: item.unavailableReasonCode ? "image subdued" : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
-                    getAssetPath("./assets/placeholder.png") })),
-              h("div", { class: sheet.classes.TextArea, style: {
-                  opacity: item.unavailableReasonCode ? "0.5" : "1",
+      h("div", null,
+        !states.loading && (h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.rewardTitle)),
+        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: "title" }, item.name),
-                h("div", { class: "amount" }, amount),
-                item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
-                  id: "unavailableCode",
-                  defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-                }, {
-                  unavailableReason: item.unavailableReason ||
-                    item.unavailableReasonCode,
-                }))))))));
-      })),
-      h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
+                h("div", { class: sheet.classes.Image, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  h("img", { class: item.unavailableReasonCode ? "image subdued" : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                      getAssetPath("./assets/placeholder.png") })),
+                h("div", { class: sheet.classes.TextArea, style: {
+                    opacity: item.unavailableReasonCode ? "0.5" : "1",
+                  } },
+                  h("div", { class: "title", style: {
+                      "-webkit-line-clamp": item.unavailableReasonCode
+                        ? "1"
+                        : "2",
+                    } }, (_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,
+                    }, {
+                      unavailableReason: item.unavailableReason ||
+                        item.unavailableReasonCode,
+                      sourceUnit: item.sourceUnit,
+                      sourceValue: item.prettySourceValue ||
+                        item.prettySourceMinValue,
+                    }))))))));
+        })),
+        h("div", { class: sheet.classes.Button },
+          h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
-    var _a, _b, _c;
+    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
@@ -369,52 +355,77 @@ export function RewardExchangeView(props) {
       h("div", null, h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
           getAssetPath("./assets/placeholder.png") })),
       h("div", { class: sheet.classes.ChooseAmount },
-        h("div", { class: "title" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""),
-        ((_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
-        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", { class: "points" }, input)),
+        h("div", { class: "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.KutayButton },
-        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
+      h("div", { class: sheet.classes.Button },
+        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText))));
   }
   function confirmation() {
+    console.log(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name);
     return (h("div", null,
-      h("h2", { style: { margin: "20px 0" } }, "Confirm and redeem"),
+      h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.redeemTitle),
       h("div", { style: {
           textAlign: "center",
           marginBottom: "var(--sl-spacing-xxx-large)",
         } },
         h("p", null,
-          h("span", { style: { fontSize: "18px" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
+          h("span", { style: { fontSize: "var(--sl-font-size-large)" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         h("p", null,
           h(ExchangeArrows, null)),
-        h("div", { class: sheet.classes.CardContainer, style: {
+        h("div", { style: {
             boxShadow: "none",
             marginBottom: "10px",
             flex: "1",
             minWidth: "100%",
           } },
-          h("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.KutayCard },
-            h("div", { class: sheet.classes.Square },
-              h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                  getAssetPath("./assets/placeholder.png") })),
-            h("div", { class: sheet.classes.TextArea, style: {
-                lineHeight: "18px",
-                alignSelf: "center",
-              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
-              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""
-              : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || "")))),
-      h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
-        h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
+          h("sl-card", { class: sheet.classes.Card, style: {
+              minWidth: "350px",
+              width: "33%",
+              margin: "auto",
+            } },
+            h("div", { style: {
+                display: "flex",
+                width: "100%",
+                height: "120px",
+                borderRadius: "3px",
+                background: "rgba(0, 0, 0, 0)",
+              } },
+              h("div", { class: sheet.classes.Image },
+                h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                    getAssetPath("./assets/placeholder.png") })),
+              h("div", { class: sheet.classes.TextArea, style: { alignSelf: "center" } },
+                h("div", { class: "title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
+                h("div", { class: "amount" }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))))),
+      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;
     return (h("div", { class: sheet.classes.Success },
       h(Gift, null),
-      h("div", { class: "title" }, "Reward Redeemed"),
-      h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done"))));
+      h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      h("div", { class: "description" }, intl.formatMessage({
+        id: "successMessage",
+        defaultMessage: states.content.text.redemptionSuccessText,
+      }, {
+        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
+        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) || ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.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)",
+        } },
+        "Promo code",
+        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("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(),
@@ -437,25 +448,42 @@ export function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { style: {
-        display: "flex",
-        height: "400px",
-        alignItems: "center",
-        justifyContent: "center",
-      } },
-      h("div", { style: { transform: "scale(5)" } },
-        h("sl-spinner", null))));
+    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" }),
-      "An error occured trying to redeem this reward. Please try again."));
+      states.content.text.redemptionError));
+  }
+  function queryErrorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.queryError));
   }
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
     h("div", null,
       stageMap(),
-      states.loading && loading(),
+      states.redeemStage === "chooseReward" && states.loading && loading(),
       states.exchangeError && errorMessage(),
+      states.queryError && queryErrorMessage(),
       currentStage && currentStage())));
 }