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

package/dist/cjs/sqm-brand_31.cjs.entry.js

@@ -17,8 +17,8 @@ const sqmPortalSectionView = require('./sqm-portal-section-view-3b008930.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-7dd44d62.js');
 const reRender = require('./re-render-6111d4bd.js');
-const useDemoBigStat = require('./useDemoBigStat-2786227e.js');
 const sqmShareLinkView = require('./sqm-share-link-view-a935d07e.js');
+const useDemoBigStat = require('./useDemoBigStat-2786227e.js');
 const ShadowViewAddon = require('./ShadowViewAddon-a85b8c8d.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-d06e1885.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6c7f78e6.js');
@@ -32,7 +32,8 @@ const sqmAssetCardView = require('./sqm-asset-card-view-07f86880.js');
 const sqmPortalFooterView = require('./sqm-portal-footer-view-69c73802.js');
 const sqmHeroView = require('./sqm-hero-view-bb3d00a1.js');
 const sqmNameFieldsView = require('./sqm-name-fields-view-24614ac7.js');
-const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-0e66bea1.js');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-ba7ed24a.js');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-98958ab1.js');
 
 var chroma = _extends.createCommonjsModule(function (module, exports) {
 /**
@@ -18038,6 +18039,7 @@ const ReferralTableUserCell = class {
   }
 };
 
+// TODO: add rewardInput once it works
 const GET_EXCHANGE_LIST = index_module.dist.gql `
   query getExchangeList {
     viewer {
@@ -18103,10 +18105,11 @@ function useRewardExchangeList(props) {
     amount: 0,
     exchangeError: false,
   });
+  const [open, setOpen] = _extends.useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = index_module.T();
-  const [exchange, { data: exchangeResponse, errors }] = index_module.be(EXCHANGE);
-  const { data, loading, refetch } = index_module.en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = index_module.be(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = index_module.en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
   _extends.useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
@@ -18196,6 +18199,14 @@ function useRewardExchangeList(props) {
   function setStage(stage) {
     setExchangeState({ redeemStage: stage });
   }
+  function copyFuelTankCode() {
+    var _a, _b;
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.fuelTankCode);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  }
   return {
     states: {
       content: {
@@ -18206,7 +18217,9 @@ function useRewardExchangeList(props) {
       amount,
       selectedStep,
       exchangeError,
-      loading,
+      queryError: !!queryError,
+      loading: loading || exchangeLoading,
+      open,
     },
     data: {
       exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
@@ -18217,6 +18230,7 @@ function useRewardExchangeList(props) {
       setExchangeState,
       setStage,
       resetState,
+      copyFuelTankCode,
     },
   };
 }
@@ -18225,6 +18239,9 @@ const ExchangeArrows = () => (index.h("svg", { width: 19, height: 15, fill: "non
   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" }),
@@ -18307,12 +18324,14 @@ function ProgressBar({ stageCount, currentStage, }) {
 }
 
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-const stageProgressList = {
-  chooseReward: "Choose reward",
-  chooseAmount: "Amount",
-  confirmation: "Confirm",
-};
 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: mixins.HostBlock,
     Container: {
@@ -18376,17 +18395,6 @@ function RewardExchangeView(props) {
         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%",
@@ -18408,7 +18416,13 @@ function RewardExchangeView(props) {
         },
       },
     },
-    KutayCard: {
+    CardLayout: {
+      display: "flex",
+      width: "100%",
+      borderRadius: "3px",
+      background: "rgba(0, 0, 0, 0)",
+    },
+    Card: {
       display: "flex",
       userSelect: "none",
       height: "120px",
@@ -18420,21 +18434,12 @@ 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: {
@@ -18453,14 +18458,18 @@ function RewardExchangeView(props) {
       },
     },
     Image: {
+      padding: "8px",
+      minWidth: "96px",
+      maxWidth: "96px",
       "& .image": {
+        width: "100%",
+        height: "100%",
         objectFit: "contain",
-        width: "120px",
-        height: "118px",
-        flex: 0.33,
+        borderRadius: "4px",
       },
-      "& .image.black": {
-        filter: "brightness(20%)",
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
       },
     },
     TextArea: {
@@ -18471,12 +18480,20 @@ function RewardExchangeView(props) {
         lineHeight: "20px",
         fontWeight: "600",
         color: "var(--sl-color-neutral-1000)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
       },
       "& .amount": {
         fontSize: "14px",
         lineHeight: "18px",
         marginTop: "8px",
         color: "var(--sl-color-neutral-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
       },
       "& .error": {
         fontSize: "14px",
@@ -18484,6 +18501,10 @@ function RewardExchangeView(props) {
         marginTop: "8px",
         fontWeight: "600",
         color: "var(--sl-color-warning-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
       },
     },
     ChooseAmount: {
@@ -18498,7 +18519,7 @@ function RewardExchangeView(props) {
         //fontSize: "var(--sl-font-size-large)",
         fontSize: "113%",
         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)",
@@ -18535,7 +18556,7 @@ 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",
@@ -18574,18 +18595,18 @@ function RewardExchangeView(props) {
   jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
   const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  const { states, data, callbacks } = props;
-  const { selectedItem, selectedStep } = states;
   function getInput() {
     var _a, _b;
     const item = states.selectedItem;
     if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
       return index.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 index.h("p", null,
-        "Not enough ",
-        item.sourceUnit,
-        " to redeem for this reward.");
+      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: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
@@ -18604,6 +18625,7 @@ function RewardExchangeView(props) {
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
             unavailableReason: step.unavailableReasonCode,
+            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
           }))))));
     })));
   }
@@ -18611,57 +18633,70 @@ function RewardExchangeView(props) {
     var _a;
     return [
       index.h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
             ? "0 0 0 2px var(--sl-color-primary-500)"
             : "none",
+          borderRadius: "4px",
         };
         const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
           ? item.prettySourceValue
-          : item.prettySourceMinValue && item.prettySourceMaxValue
-            ? `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`
-            : "";
+          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
+            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${(_b = item.steps.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.prettySourceValue}`
+            : `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`;
         return (index.h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          index.h("sl-card", { class: sheet.classes.KutayCard, style: {
+          index.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) && (index.h("div", { class: "selected-outline" },
-              index.h("div", { class: "selected-checkmark" },
-                index.h(CheckMark, null)))),
+            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.Square },
+              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/placeholder.png") })),
               index.h("div", { class: sheet.classes.TextArea, style: {
                   opacity: item.unavailableReasonCode ? "0.5" : "1",
                 } },
-                index.h("div", { class: "title" }, item.name),
-                index.h("div", { class: "amount" }, amount),
+                index.h("div", { class: "title", style: {
+                    "-webkit-line-clamp": item.unavailableReasonCode
+                      ? "1"
+                      : "2",
+                  } }, (_c = item.name) !== null && _c !== void 0 ? _c : ""),
+                index.h("div", { class: "amount", style: {
+                    "-webkit-line-clamp": item.unavailableReasonCode
+                      ? "1"
+                      : "2",
+                  } }, amount),
                 item.unavailableReasonCode && (index.h("div", { class: "error" }, 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,
+                  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,
+                  sourceValue: item.prettySourceValue ||
+                    item.prettySourceMinValue,
                 }))))))));
       })),
-      index.h("div", { class: sheet.classes.KutayButton },
-        index.h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
+      index.h("div", { class: sheet.classes.Button },
+        index.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
@@ -18670,17 +18705,18 @@ function RewardExchangeView(props) {
       index.h("div", null, index.h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
           index.getAssetPath("./assets/placeholder.png") })),
       index.h("div", { class: sheet.classes.ChooseAmount },
-        index.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" ? (index.h("div", { class: "points" }, input)) : (index.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" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", { class: "points" }, input)),
+        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", { class: "points" }, input)),
         index.h("div", { class: "space" })),
-      index.h("div", { class: sheet.classes.KutayButton },
-        index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
-        index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
+      index.h("div", { class: sheet.classes.Button },
+        index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+        index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText))));
   }
   function confirmation() {
+    var _a, _b;
     return (index.h("div", null,
-      index.h("h2", { style: { margin: "20px 0" } }, "Confirm and redeem"),
+      index.h("h2", { style: { margin: "20px 0" } }, states.content.text.redeemTitle),
       index.h("div", { style: {
           textAlign: "center",
           marginBottom: "var(--sl-spacing-xxx-large)",
@@ -18695,27 +18731,39 @@ function RewardExchangeView(props) {
             flex: "1",
             minWidth: "100%",
           } },
-          index.h("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.KutayCard },
+          index.h("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.Card },
             index.h("div", { class: sheet.classes.Square },
               index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                   index.getAssetPath("./assets/placeholder.png") })),
             index.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) || "")))),
-      index.h("div", { class: sheet.classes.KutayButton },
-        index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
-        index.h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
+              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (_a = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
+              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)) !== null && _a !== void 0 ? _a : "" : (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : "")))),
+      index.h("div", { class: sheet.classes.Button },
+        index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+        index.h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText))));
   }
   function success() {
+    var _a, _b, _c;
     return (index.h("div", { class: sheet.classes.Success },
       index.h(Gift, null),
-      index.h("div", { class: "title" }, "Reward Redeemed"),
-      index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      index.h("div", { class: sheet.classes.KutayButton },
-        index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done"))));
+      index.h("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      index.h("div", { class: "description" }, global.intl.formatMessage({
+        id: "successMessage",
+        defaultMessage: states.content.text.redemptionSuccessText,
+      }, {
+        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
+        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) ||
+          states.selectedItem.globalRewardKey,
+      })),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { style: {
+          width: "40%",
+          margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+        } },
+        index.h(sqmShareLinkView.ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: "Copied", 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(),
@@ -18738,26 +18786,40 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { style: {
-        display: "flex",
-        height: "400px",
-        alignItems: "center",
-        justifyContent: "center",
-      } },
-      index.h("div", { style: { transform: "scale(5)" } },
-        index.h("sl-spinner", null))));
+    return (index.h("div", { class: sheet.classes.Grid }, [...Array(8)].map(() => {
+      return (index.h("div", { class: sheet.classes.CardContainer },
+        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": "4px",
+                } })),
+            index.h("div", { style: { margin: "12px 12px 0 0", width: "100%" } },
+              index.h("sl-skeleton", { style: { marginBottom: "12px" } }),
+              index.h("sl-skeleton", { style: { marginBottom: "12px" } }),
+              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" }),
-      "An error occured trying to redeem this reward. Please try again."));
+      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));
   }
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
     index.h("div", null,
       stageMap(),
-      states.loading && loading(),
+      states.redeemStage === "chooseReward" && states.loading && loading(),
       states.exchangeError && errorMessage(),
+      states.queryError && queryErrorMessage(),
       currentStage && currentStage())));
 }
 
@@ -18772,7 +18834,60 @@ const SqmRewardExchangeList = class {
     /**
      * @uiName Exchange button text
      */
-    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
+    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} other {Not available} }";
+    /**
+     * @uiName Choose Reward Progress Title
+     */
+    this.chooseRewardTitle = "Choose reward";
+    /**
+     * @uiName Choose Amount Progress Title
+     */
+    this.chooseAmountTitle = "Amount";
+    /**
+     * @uiName Confirmation Progress Title
+     */
+    this.confirmationTitle = "Confirm";
+    /**
+     * @uiName Cancel Button Text
+     */
+    this.cancelText = "Cancel";
+    /**
+     * @uiName Back Button Text
+     */
+    this.backText = "Back";
+    /**
+     * @uiName Continue Button Text
+     */
+    this.continueText = "Continue";
+    /**
+     * @uiName Continue to Confirmation Button Text
+     */
+    this.continueToConfirmationText = "Continue to confirmation";
+    /**
+     * @uiName Redeem Button Text
+     */
+    this.redeemText = "Redeem";
+    /**
+     * @uiName Confirmation Title Text
+     */
+    this.redeemTitle = "Confirm and redeem";
+    this.redemptionSuccessText = "Successfully redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Done Text
+     */
+    this.doneText = "Done";
+    /**
+     * @uiName Reward List Error Message
+     */
+    this.queryError = "Unable to load reward exchange list";
+    /**
+     * @uiName Redemption Error Message
+     */
+    this.redemptionError = "An error occured trying to redeem this reward. Please try again";
+    /**
+     * @uiName Not Enough Available Error Message
+     */
+    this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
     _extends.h$1(this);
   }
   disconnectedCallback() { }
@@ -18803,6 +18918,7 @@ function useRewardExchangeListDemo(props) {
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      queryError: false,
       loading: false,
     },
     data: {
@@ -18813,6 +18929,7 @@ function useRewardExchangeListDemo(props) {
       setExchangeState: (_) => { },
       setStage: (_) => { },
       resetState: () => { },
+      copyFuelTankCode: () => { },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -29198,7 +29315,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
     NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
   states: {
     content: {
       text: {
@@ -29211,15 +29328,18 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     loading: loading,
     selectedItem: selectedItem,
     selectedStep: selectedStep,
+    open: false,
   },
   data: {
     exchangeList: data,
+    fuelTankCode: fueltank,
   },
   callbacks: {
     exchangeReward: null,
     resetState: null,
     setStage: null,
     setExchangeState: null,
+    copyFuelTankCode: null,
     refs: null,
   },
   refs: null,
@@ -29268,12 +29388,12 @@ const name = (props) => ({
 const fixedValue = (props) => ({
   prettySourceValue: props,
 });
-const variableValue = (min, max, text) => ({
+const variableValue = (min, max, unit) => ({
   ruleType: "VARIABLE_CREDIT_REWARD",
   sourceMinValue: min,
-  prettySourceMinValue: min + " " + text,
+  prettySourceMinValue: min + " " + unit,
   sourceMaxValue: max,
-  prettySourceMaxValue: max + " " + text,
+  prettySourceMaxValue: max + " " + unit,
 });
 const data = [
   {
@@ -29287,7 +29407,7 @@ const data = [
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
   },
   {
     ...baseReward$2,
@@ -29305,7 +29425,7 @@ const data = [
     ...baseReward$2,
     ...name("Variable amount of store credit"),
     ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
-    ...variableValue(20, 100, "SaaSquatch Points"),
+    ...variableValue(20, 100, "Points"),
   },
   {
     ...baseReward$2,
@@ -29317,9 +29437,9 @@ const data = [
   {
     ...baseReward$2,
     ...usTax,
-    ...name("$1000 Store credit"),
+    ...name("$1000 Store credit with a really super long name in the front page"),
     ...imageUrl("https://i.imgur.com/y9HSls1.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
   },
   {
     ...baseReward$2,
@@ -29338,7 +29458,7 @@ const rewardExchangeSelected = {
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
   }),
 };
 const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
@@ -29355,13 +29475,13 @@ const chooseAmountVariable = {
     ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
     steps: [
-      baseStep(20, "$", 40, "SaaSquatch Points"),
-      baseStep(30, "$", 60, "SaaSquatch Points"),
-      baseStep(40, "$", 80, "SaaSquatch Points"),
-      baseStep(50, "$", 100, "SaaSquatch Points"),
-      baseStep(60, "$", 120, "SaaSquatch Points"),
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
     ],
   }),
 };
@@ -29386,16 +29506,16 @@ const confirmVariable = {
     ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points")),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
 };
 const error$1 = {
   ...baseResponse(data, "confirmation", {
     ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points"), true),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points"), true),
 };
 const success = {
   ...baseResponse(data, "success", {
@@ -29405,6 +29525,22 @@ const success = {
     ...fixedValue("30 SaaSquatch Points"),
   }),
 };
+const success2 = {
+  ...baseResponse(data, "success", {
+    ...baseReward$2,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+const success3 = {
+  ...baseResponse(data, "success", {
+    ...baseReward$2,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
 const loading = {
   ...baseResponse(null, "chooseReward", null, null, false, true),
 };
@@ -29413,8 +29549,8 @@ const RewardExchangeList_stories = {
   title: "Components/Reward Exchange List",
 };
 const StoryBase = (props) => () => {
-  return index.h(Resizer, null,
-    index.h(RewardExchangeView, Object.assign({}, props)));
+  return (index.h(Resizer, null,
+    index.h(RewardExchangeView, Object.assign({}, props))));
 };
 const ChooseReward = StoryBase(rewardExchange);
 const ChooseRewardSelected = StoryBase(rewardExchangeSelected);
@@ -29424,6 +29560,8 @@ const Confirm = StoryBase(confirmFixed);
 const ConfirmVariable = StoryBase(confirmVariable);
 const Error$3 = StoryBase(error$1);
 const Success$2 = StoryBase(success);
+const SuccessVariable = StoryBase(success2);
+const SuccessPromo = StoryBase(success3);
 const Loading$3 = StoryBase(loading);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
@@ -29437,25 +29575,61 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
     ConfirmVariable: ConfirmVariable,
     Error: Error$3,
     Success: Success$2,
+    SuccessVariable: SuccessVariable,
+    SuccessPromo: SuccessPromo,
     Loading: Loading$3
 });
 
 const ProgramExplainer_stories = {
   title: "Components/Program Explainer",
 };
-const DefaultProgramExplainerView = () => {
-  return ("asd"
-  // <ProgramExplainerView {...barProps}>
-  //   <ProgramExplainerStepView {...item1Props} />
-  //   <ProgramExplainerStepView {...item2Props} />
-  // </ProgramExplainerView>
-  );
+const props$2 = {
+  header: "Klip Rewards",
+  title: "Earn rewards with our loyalty program",
+  description: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
+  color: "black",
+  background: "#F3F0EC",
+};
+const steps1 = {
+  title: "Invite your friends to Klip",
+  description: "Earn up to $1200 in rewards for each referral",
+  color: "white",
+  background: "#5B3EDA",
+};
+const steps2 = {
+  title: "If your friend signs up for a Klip Business plan",
+  description: "Get a $50 VISA giftcard when they pay for their first month",
+  color: "black",
+  background: "#F3CC66",
+};
+const steps3 = {
+  title: "If your friend signs up for a Klip Enterprise plan",
+  description: "Get up to $1200 in rewards - a $200 VISA giftcard when our sales team qualifies them as a good fit for Klip, and a $1000 VISA giftcard when they become a paying customer",
+  color: "black",
+  background: "#D3CCF5",
+};
+const OneStep = () => {
+  return (index.h(sqmProgramExplainerView.ProgramExplainerView, Object.assign({}, props$2),
+    index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, steps1))));
+};
+const TwoSteps = () => {
+  return (index.h(sqmProgramExplainerView.ProgramExplainerView, Object.assign({}, props$2),
+    index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, steps1)),
+    index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, steps2))));
+};
+const ThreeSteps = () => {
+  return (index.h(sqmProgramExplainerView.ProgramExplainerView, Object.assign({}, props$2),
+    index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, steps1)),
+    index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, steps2)),
+    index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, steps3))));
 };
 
 const ProgramExplainer = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': ProgramExplainer_stories,
-    DefaultProgramExplainerView: DefaultProgramExplainerView
+    OneStep: OneStep,
+    TwoSteps: TwoSteps,
+    ThreeSteps: ThreeSteps
 });
 
 const ProgramExplainerStep_stories = {