@saasquatch/mint-components 1.15.0-137 → 1.15.0-139

package/dist/cjs/{ShadowViewAddon-e56c90ab.js → ShadowViewAddon-4bdc20e8.js}

@@ -3605,7 +3605,7 @@ function RewardExchangeView(props) {
           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 cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (index.h("div", null,
       index.h("div", { class: sheet$8.classes.Confirmation, part: "confirmation-container" },
@@ -3613,7 +3613,7 @@ function RewardExchangeView(props) {
         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("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : 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" },
@@ -3629,7 +3629,7 @@ function RewardExchangeView(props) {
           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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return (index.h("div", { class: sheet$8.classes.Success, part: "success-container" },
       index.h(Gift$1, null),
       index.h(Confetti, null),
@@ -3638,13 +3638,12 @@ function RewardExchangeView(props) {
         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,
+        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
+        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.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(copyTextView.CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       index.h("div", { class: sheet$8.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -3942,7 +3941,7 @@ const rewardExchange = {
   ...baseResponse(data),
 };
 const demoRewardExchange = {
-  ...baseResponse(demoData),
+  ...baseResponse(demoData, "chooseReward", baseReward),
 };
 const rewardExchangeLongText = {
   ...baseResponse([

package/dist/cjs/sqm-big-stat_44.cjs.entry.js

@@ -25,7 +25,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const usePortalLogin = require('./usePortalLogin-6aa864ef.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-9a0c5e91.js');
-const ShadowViewAddon = require('./ShadowViewAddon-e56c90ab.js');
+const ShadowViewAddon = require('./ShadowViewAddon-4bdc20e8.js');
 require('./sqm-portal-container-view-07e4343f.js');
 const parseStates = require('./parseStates-d1effc19.js');
 const usePayoutStatus = require('./usePayoutStatus-3b34dab1.js');
@@ -5279,10 +5279,10 @@ const SqmRewardExchangeList = class {
      */
     this.costTitle = "Cost to Redeem";
     /**
-     * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
      */
     this.stateController = "{}";
     domContextHooks_module.h$1(this);
@@ -5308,36 +5308,41 @@ function useRewardExchangeListDemo(props) {
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  return cjs.cjs({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      open: false,
-      exchangeError: false,
-      queryError: false,
-      loading: false,
-      noExchangeOptions: false,
-    },
-    data: {
-      // shareCode: "SHARECODE123",
-      exchangeList: ShadowViewAddon.demoRewardExchange.data.exchangeList,
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  const finalProps = cjs.cjs({ ...ShadowViewAddon.demoRewardExchange, content: { text: props } }, 
+  // {
+  //   states: {
+  //     content: {
+  //       text: props,
+  //     },
+  //     redeemStage: "chooseReward",
+  //     amount: 0,
+  //     selectedStep: undefined,
+  //     selectedItem: undefined,
+  //     open: false,
+  //     exchangeError: false,
+  //     queryError: false,
+  //     loading: false,
+  //     noExchangeOptions: false,
+  //     // empty: EmptySlot(),
+  //   },
+  //   data: {
+  //     // shareCode: "SHARECODE123",
+  //     exchangeList: demoRewardExchange.data.exchangeList,
+  //   },
+  //   callbacks: {
+  //     exchangeReward: () => {},
+  //     setExchangeState: (_: ExchangeState) => {},
+  //     setStage: (_: Stages) => {},
+  //     resetState: () => {},
+  //     copyFuelTankCode: () => {},
+  //   },
+  //   refs: {
+  //     canvasRef: {},
+  //   },
+  // },
+  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  console.log({ finalProps });
+  return finalProps;
 }
 
 const debug$1 = domContextHooks_module.browser("sq:useRouter");

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

@@ -32,7 +32,7 @@ require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
-const ShadowViewAddon = require('./ShadowViewAddon-e56c90ab.js');
+const ShadowViewAddon = require('./ShadowViewAddon-4bdc20e8.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-92481647.js');
 const utils = require('./utils-ba8fc342.js');

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

@@ -223,7 +223,7 @@ export const rewardExchange = {
   ...baseResponse(data),
 };
 export const demoRewardExchange = {
-  ...baseResponse(demoData),
+  ...baseResponse(demoData, "chooseReward", baseReward),
 };
 export const rewardExchangeLongText = {
   ...baseResponse([

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

@@ -496,7 +496,7 @@ export function RewardExchangeView(props) {
           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 cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (h("div", null,
       h("div", { class: sheet.classes.Confirmation, part: "confirmation-container" },
@@ -504,7 +504,7 @@ export function RewardExchangeView(props) {
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
-            h("div", { class: "reward-title" }, selectedItem.name),
+            h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
             h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                 getAssetPath("./assets/Reward-image.png") }))),
         h("div", { class: "wrapper padding" },
@@ -520,7 +520,7 @@ export function RewardExchangeView(props) {
           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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return (h("div", { class: sheet.classes.Success, part: "success-container" },
       h(Gift, null),
       h(Confetti, null),
@@ -529,13 +529,12 @@ export function RewardExchangeView(props) {
         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,
+        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
+        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.globalRewardKey),
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(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 }))),
+        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }

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

@@ -149,10 +149,10 @@ export class SqmRewardExchangeList {
      */
     this.costTitle = "Cost to Redeem";
     /**
-     * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -731,16 +731,16 @@ export class SqmRewardExchangeList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ \"title\": \"Choose reward\", \"props\": { \"redeemStage\": \"chooseReward\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "text": "{ \"title\": \"Choose reward\", \"props\": { \"states\": { \"redeemStage\": \"chooseReward\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Reward details\", \"props\": { \"redeemStage\": \"chooseAmount\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "text": "{ \"title\": \"Reward details\", \"props\": { \"states\": { \"redeemStage\": \"chooseAmount\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"redeemStage\": \"confirmation\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"states\": { \"redeemStage\": \"confirmation\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Exchange successful\", \"props\": { \"redeemStage\": \"success\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "text": "{ \"title\": \"Exchange successful\", \"props\": { \"states\": { \"redeemStage\": \"success\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
             "name": "componentState"
           }],
         "text": ""
@@ -793,34 +793,39 @@ function useRewardExchangeListDemo(props) {
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  return deepmerge({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      open: false,
-      exchangeError: false,
-      queryError: false,
-      loading: false,
-      noExchangeOptions: false,
-    },
-    data: {
-      // shareCode: "SHARECODE123",
-      exchangeList: demoRewardExchange.data.exchangeList,
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, 
+  // {
+  //   states: {
+  //     content: {
+  //       text: props,
+  //     },
+  //     redeemStage: "chooseReward",
+  //     amount: 0,
+  //     selectedStep: undefined,
+  //     selectedItem: undefined,
+  //     open: false,
+  //     exchangeError: false,
+  //     queryError: false,
+  //     loading: false,
+  //     noExchangeOptions: false,
+  //     // empty: EmptySlot(),
+  //   },
+  //   data: {
+  //     // shareCode: "SHARECODE123",
+  //     exchangeList: demoRewardExchange.data.exchangeList,
+  //   },
+  //   callbacks: {
+  //     exchangeReward: () => {},
+  //     setExchangeState: (_: ExchangeState) => {},
+  //     setStage: (_: Stages) => {},
+  //     resetState: () => {},
+  //     copyFuelTankCode: () => {},
+  //   },
+  //   refs: {
+  //     canvasRef: {},
+  //   },
+  // },
+  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  console.log({ finalProps });
+  return finalProps;
 }

package/dist/esm/{ShadowViewAddon-439a4d47.js → ShadowViewAddon-41dd2aeb.js}

@@ -3603,7 +3603,7 @@ function RewardExchangeView(props) {
           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 cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (h("div", null,
       h("div", { class: sheet$8.classes.Confirmation, part: "confirmation-container" },
@@ -3611,7 +3611,7 @@ function RewardExchangeView(props) {
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
-            h("div", { class: "reward-title" }, selectedItem.name),
+            h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
             h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                 getAssetPath("./assets/Reward-image.png") }))),
         h("div", { class: "wrapper padding" },
@@ -3627,7 +3627,7 @@ function RewardExchangeView(props) {
           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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return (h("div", { class: sheet$8.classes.Success, part: "success-container" },
       h(Gift$1, null),
       h(Confetti, null),
@@ -3636,13 +3636,12 @@ function RewardExchangeView(props) {
         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,
+        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
+        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.globalRewardKey),
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(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 }))),
+        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet$8.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -3940,7 +3939,7 @@ const rewardExchange = {
   ...baseResponse(data),
 };
 const demoRewardExchange = {
-  ...baseResponse(demoData),
+  ...baseResponse(demoData, "chooseReward", baseReward),
 };
 const rewardExchangeLongText = {
   ...baseResponse([

package/dist/esm/sqm-big-stat_44.entry.js

@@ -21,7 +21,7 @@ import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
 import { u as usePortalLogin } from './usePortalLogin-e95df3c3.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-72c07b09.js';
-import { u as useDemoBigStat, U as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, W as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-439a4d47.js';
+import { u as useDemoBigStat, U as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, W as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-41dd2aeb.js';
 import './sqm-portal-container-view-176e92e3.js';
 import { p as parseStates } from './parseStates-ed75e224.js';
 import { u as usePayoutStatus } from './usePayoutStatus-93462be3.js';
@@ -5275,10 +5275,10 @@ const SqmRewardExchangeList = class {
      */
     this.costTitle = "Cost to Redeem";
     /**
-     * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
      */
     this.stateController = "{}";
     h(this);
@@ -5304,36 +5304,41 @@ function useRewardExchangeListDemo(props) {
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  return cjs({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      open: false,
-      exchangeError: false,
-      queryError: false,
-      loading: false,
-      noExchangeOptions: false,
-    },
-    data: {
-      // shareCode: "SHARECODE123",
-      exchangeList: demoRewardExchange.data.exchangeList,
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  const finalProps = cjs({ ...demoRewardExchange, content: { text: props } }, 
+  // {
+  //   states: {
+  //     content: {
+  //       text: props,
+  //     },
+  //     redeemStage: "chooseReward",
+  //     amount: 0,
+  //     selectedStep: undefined,
+  //     selectedItem: undefined,
+  //     open: false,
+  //     exchangeError: false,
+  //     queryError: false,
+  //     loading: false,
+  //     noExchangeOptions: false,
+  //     // empty: EmptySlot(),
+  //   },
+  //   data: {
+  //     // shareCode: "SHARECODE123",
+  //     exchangeList: demoRewardExchange.data.exchangeList,
+  //   },
+  //   callbacks: {
+  //     exchangeReward: () => {},
+  //     setExchangeState: (_: ExchangeState) => {},
+  //     setStage: (_: Stages) => {},
+  //     resetState: () => {},
+  //     copyFuelTankCode: () => {},
+  //   },
+  //   refs: {
+  //     canvasRef: {},
+  //   },
+  // },
+  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  console.log({ finalProps });
+  return finalProps;
 }
 
 const debug$1 = browser("sq:useRouter");

package/dist/esm/sqm-stencilbook.entry.js

@@ -28,7 +28,7 @@ import './utilities-72c07b09.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-abef7286.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-33805220.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-97124a66.js';
-import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, c as CheckboxFieldView, d as PortalRegisterView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, R as ReferralIframeView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as useShareButton, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as ShadowViewAddon } from './ShadowViewAddon-439a4d47.js';
+import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, c as CheckboxFieldView, d as PortalRegisterView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, R as ReferralIframeView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as useShareButton, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as ShadowViewAddon } from './ShadowViewAddon-41dd2aeb.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-176e92e3.js';
 import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView } from './IndirectTaxDetailsView-67deb1d0.js';
 import { t as taxTypeToName, L as LoadingView } from './utils-325c4849.js';