@saasquatch/mint-components 1.5.6-8 → 1.6.0-2

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

@@ -1,779 +1,745 @@
-import { Component, h, Host, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useRewardExchangeList, } from "./useRewardExchangeList";
-import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
-import { isDemo } from "@saasquatch/component-boilerplate";
-import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
-import { demoRewardExchange } from "./RewardExchangeListData";
-/**
- * @uiName Reward Exchange
- * @slots [{"name":"empty", "title":"Empty State"}]
- * @exampleGroup Rewards
- * @example Reward Exchange - <sqm-reward-exchange-list back-text="Back" button-text="Exchange Rewards" cancel-text="Cancel" choose-amount-title="Select" choose-reward-title="Rewards" confirmation-title="Confirm" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" done-text="Done" reward-title="Choose a reward" not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" not-enough-error="Not enough {sourceUnit} to redeem for this reward" query-error="Unable to load reward exchange list. Please try again" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-error="An error occured trying to redeem this reward. Please try again" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" select-text="Select amount to receive" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltiptext="Copied" reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem" reward-redeemed-text="Reward redeemed" skeleton-card-num="8" promo-code="Promo Code" tooltip-text="Copied!"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available" > </sqm-empty></sqm-reward-exchange-list>
- */
-export class SqmRewardExchangeList {
-  constructor() {
-    this.ignored = true;
-    /**
-     * Error message shown when reward is not available
-     *
-     * @uiName Not Available Error
-     * @uiWidget textArea
-     */
-    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }";
-    /**
-     * @uiName Choose Reward Progress Title
-     */
-    this.chooseRewardTitle = "Rewards";
-    /**
-     * @uiName Choose Amount Progress Title
-     */
-    this.chooseAmountTitle = "Select";
-    /**
-     * @uiName Confirmation Progress Title
-     */
-    this.confirmationTitle = "Confirm";
-    /**
-     * @uiName Reward Title Text
-     */
-    this.rewardTitle = "Choose a reward";
-    /**
-     * @uiName Cancel Button Text
-     */
-    this.cancelText = "Cancel";
-    /**
-     * @uiName Back Button Text
-     */
-    this.backText = "Back";
-    /**
-     * @uiName Continue Button Text
-     */
-    this.continueText = "Continue";
-    /**
-     * Displayed on the reward selection page.
-     * @uiName Continue to Confirmation Button Text
-     */
-    this.continueToConfirmationText = "Continue to confirmation";
-    /**
-     * @uiName Redeem Button Text
-     */
-    this.redeemText = "Redeem";
-    /**
-     * Displayed as the header for the confirmation page.
-     *
-     * @uiName Confirmation Title Text
-     */
-    this.redeemTitle = "Confirm and redeem";
-    /**
-     * Displayed on the success screen when a user successfully exchanges for a reward.
-     *
-     * @uiName Redemption Success Message
-     * @uiWidget textArea
-     */
-    this.redemptionSuccessText = "Redeemed {sourceValue} for {destinationValue}";
-    /**
-     * Displayed on the reward exchange cards.
-     *
-     * @uiName Reward Exchange Amount Text
-     * @uiWidget textArea
-     */
-    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
-    /**
-     * Shown when a user copies a fuel tank code
-     *
-     * @uiName Tooltip Text
-     */
-    this.tooltipText = "Copied";
-    /**
-     * @uiName Done Text
-     */
-    this.doneText = "Done";
-    /**
-     * @uiName Select Amount Text
-     */
-    this.selectText = "Select amount to receive";
-    /**
-     * Shown if an error occurs when loading the reward exchange.
-     *
-     * @uiName Reward List Error Message
-     * @uiWidget textArea
-     */
-    this.queryError = "Unable to load reward exchange list. Please try again";
-    /**
-     * Shown if an error occurs during the reward exchange.
-     *
-     * @uiName Redemption Error Message
-     * @uiWidget textArea
-     */
-    this.redemptionError = "An error occured trying to redeem this reward. Please try again";
-    /**
-     * @uiName Not Enough Error Message
-     * @uiWidget textArea
-     */
-    this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
-    /**
-     * @uiName Reward Redeemed Text
-     */
-    this.rewardRedeemedText = "Reward redeemed";
-    /**
-     * @uiName Promo Code Text
-     */
-    this.promoCode = "Promo Code";
-    /**
-     * Set the number of placeholder cards to be shown in loading state.
-     *
-     * @uiName Loading Cards
-     */
-    this.skeletonCardNum = 8;
-    /**
-     * Shown in the confirmation state.
-     *
-     * @uiName Reward Row Title
-     */
-    this.rewardNameTitle = "Reward";
-    /**
-     * Shown in the confirmation state.
-     *
-     * @uiName Reward Amount Row Title
-     */
-    this.rewardAmountTitle = "Reward Amount";
-    /**
-     * Shown in the confirmation state.
-     *
-     * @uiName Cost Row Title
-     */
-    this.costTitle = "Cost to Redeem";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      ...getProps(this),
-      empty: h(EmptySlot, null),
-    };
-    const { states, data, callbacks, refs } = isDemo()
-      ? useRewardExchangeListDemo(props)
-      : useRewardExchangeList(props);
-    return (h(Host, { style: { display: "contents" } },
-      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
-  }
-  static get is() { return "sqm-reward-exchange-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() { return {
-    "notAvailableError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Not Available Error",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "Error message shown when reward is not available"
-      },
-      "attribute": "not-available-error",
-      "reflect": false,
-      "defaultValue": "\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }\""
-    },
-    "chooseRewardTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Choose Reward Progress Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "choose-reward-title",
-      "reflect": false,
-      "defaultValue": "\"Rewards\""
-    },
-    "chooseAmountTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Choose Amount Progress Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "choose-amount-title",
-      "reflect": false,
-      "defaultValue": "\"Select\""
-    },
-    "confirmationTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Confirmation Progress Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "confirmation-title",
-      "reflect": false,
-      "defaultValue": "\"Confirm\""
-    },
-    "rewardTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Title Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "reward-title",
-      "reflect": false,
-      "defaultValue": "\"Choose a reward\""
-    },
-    "cancelText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Cancel Button Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "cancel-text",
-      "reflect": false,
-      "defaultValue": "\"Cancel\""
-    },
-    "backText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Back Button Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "back-text",
-      "reflect": false,
-      "defaultValue": "\"Back\""
-    },
-    "continueText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Continue Button Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "continue-text",
-      "reflect": false,
-      "defaultValue": "\"Continue\""
-    },
-    "continueToConfirmationText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Continue to Confirmation Button Text",
-            "name": "uiName"
-          }],
-        "text": "Displayed on the reward selection page."
-      },
-      "attribute": "continue-to-confirmation-text",
-      "reflect": false,
-      "defaultValue": "\"Continue to confirmation\""
-    },
-    "redeemText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Redeem Button Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "redeem-text",
-      "reflect": false,
-      "defaultValue": "\"Redeem\""
-    },
-    "redeemTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Confirmation Title Text",
-            "name": "uiName"
-          }],
-        "text": "Displayed as the header for the confirmation page."
-      },
-      "attribute": "redeem-title",
-      "reflect": false,
-      "defaultValue": "\"Confirm and redeem\""
-    },
-    "redemptionSuccessText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Redemption Success Message",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "Displayed on the success screen when a user successfully exchanges for a reward."
-      },
-      "attribute": "redemption-success-text",
-      "reflect": false,
-      "defaultValue": "\"Redeemed {sourceValue} for {destinationValue}\""
-    },
-    "sourceAmountMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Exchange Amount Text",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "Displayed on the reward exchange cards."
-      },
-      "attribute": "source-amount-message",
-      "reflect": false,
-      "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
-    },
-    "tooltipText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Tooltip Text",
-            "name": "uiName"
-          }],
-        "text": "Shown when a user copies a fuel tank code"
-      },
-      "attribute": "tooltip-text",
-      "reflect": false,
-      "defaultValue": "\"Copied\""
-    },
-    "doneText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Done Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "done-text",
-      "reflect": false,
-      "defaultValue": "\"Done\""
-    },
-    "selectText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Select Amount Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "select-text",
-      "reflect": false,
-      "defaultValue": "\"Select amount to receive\""
-    },
-    "queryError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward List Error Message",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "Shown if an error occurs when loading the reward exchange."
-      },
-      "attribute": "query-error",
-      "reflect": false,
-      "defaultValue": "\"Unable to load reward exchange list. Please try again\""
-    },
-    "redemptionError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Redemption Error Message",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "Shown if an error occurs during the reward exchange."
-      },
-      "attribute": "redemption-error",
-      "reflect": false,
-      "defaultValue": "\"An error occured trying to redeem this reward. Please try again\""
-    },
-    "notEnoughError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Not Enough Error Message",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "not-enough-error",
-      "reflect": false,
-      "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
-    },
-    "rewardRedeemedText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Redeemed Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "reward-redeemed-text",
-      "reflect": false,
-      "defaultValue": "\"Reward redeemed\""
-    },
-    "promoCode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Promo Code Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "promo-code",
-      "reflect": false,
-      "defaultValue": "\"Promo Code\""
-    },
-    "skeletonCardNum": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Loading Cards",
-            "name": "uiName"
-          }],
-        "text": "Set the number of placeholder cards to be shown in loading state."
-      },
-      "attribute": "skeleton-card-num",
-      "reflect": false,
-      "defaultValue": "8"
-    },
-    "rewardNameTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Row Title",
-            "name": "uiName"
-          }],
-        "text": "Shown in the confirmation state."
-      },
-      "attribute": "reward-name-title",
-      "reflect": false,
-      "defaultValue": "\"Reward\""
-    },
-    "rewardAmountTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reward Amount Row Title",
-            "name": "uiName"
-          }],
-        "text": "Shown in the confirmation state."
-      },
-      "attribute": "reward-amount-title",
-      "reflect": false,
-      "defaultValue": "\"Reward Amount\""
-    },
-    "costTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Cost Row Title",
-            "name": "uiName"
-          }],
-        "text": "Shown in the confirmation state."
-      },
-      "attribute": "cost-title",
-      "reflect": false,
-      "defaultValue": "\"Cost to Redeem\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<RewardExchangeViewProps>",
-        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError: boolean; queryError: boolean; loading: boolean; open: boolean; noExchangeOptions: boolean; content: { text: TextContent; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; refs?: { canvasRef: any; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "RewardExchangeViewProps": {
-            "location": "import",
-            "path": "./sqm-reward-exchange-list-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function EmptySlot() {
-  return (h("slot", { name: "empty" },
-    h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
-}
-function useRewardExchangeListDemo(props) {
-  return deepmerge({
-    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: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { Component, h, Host, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useRewardExchangeList, } from "./useRewardExchangeList";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { demoRewardExchange } from "./RewardExchangeListData";
+/**
+ * @uiName Reward Exchange
+ */
+export class SqmRewardExchangeList {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Exchange button text
+     */
+    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }";
+    /**
+     * @uiName Choose Reward Progress Title
+     */
+    this.chooseRewardTitle = "Rewards";
+    /**
+     * @uiName Choose Amount Progress Title
+     */
+    this.chooseAmountTitle = "Select";
+    /**
+     * @uiName Confirmation Progress Title
+     */
+    this.confirmationTitle = "Confirm";
+    /**
+     * @uiName Reward Title Text
+     */
+    this.rewardTitle = "Choose a reward";
+    /**
+     * @uiName Cancel Button Text
+     */
+    this.cancelText = "Cancel";
+    /**
+     * @uiName Back Button Text
+     */
+    this.backText = "Back";
+    /**
+     * @uiName Continue Button Text
+     */
+    this.continueText = "Continue";
+    /**
+    * Displayed on the reward selection page.
+     * @uiName Continue to Confirmation Button Text
+     */
+    this.continueToConfirmationText = "Continue to confirmation";
+    /**
+     * @uiName Redeem Button Text
+     */
+    this.redeemText = "Redeem";
+    /**
+    * Displayed as the header for the confirmation page.
+     * @uiName Confirmation Title Text
+     */
+    this.redeemTitle = "Confirm and redeem";
+    /**
+    * Displayed on the success screen when a user successfully exchanges for a reward.
+     * @uiName Redemption Success Message
+     */
+    this.redemptionSuccessText = "Redeemed {sourceValue} for {destinationValue}";
+    /**
+    * Displayed on the reward exchange cards.
+     * @uiName Reward Exchange Amount Text
+     */
+    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
+    /**
+     * Shown when a user copies a fuel tank code
+     *
+     * @uiName Tooltip Text
+     */
+    this.tooltipText = "Copied";
+    /**
+     * @uiName Done Text
+     */
+    this.doneText = "Done";
+    /**
+     * @uiName Select Amount Text
+     */
+    this.selectText = "Select amount to receive";
+    /**
+    * Shown if an error occurs when loading the reward exchange.
+     * @uiName Reward List Error Message
+     */
+    this.queryError = "Unable to load reward exchange list. Please try again";
+    /**
+    * Shown if an error occurs during the reward exchange.
+     * @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";
+    /**
+     * @uiName Reward Redeemed Text
+     */
+    this.rewardRedeemedText = "Reward redeemed";
+    /**
+     * @uiName Promo Code Text
+     */
+    this.promoCode = "Promo Code";
+    /**
+     * Set the number of placeholder cards to be shown in loading state.
+     *
+     * @undocumented Loading Cards
+     */
+    this.skeletonCardNum = 8;
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Reward Row Title
+     */
+    this.rewardNameTitle = "Reward";
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Reward Amount Row Title
+     */
+    this.rewardAmountTitle = "Reward Amount";
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Cost Row Title
+     */
+    this.costTitle = "Cost to Redeem";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      ...getProps(this),
+      empty: h(EmptySlot, null),
+    };
+    const { states, data, callbacks, refs } = isDemo()
+      ? useRewardExchangeListDemo(props)
+      : useRewardExchangeList(props);
+    return (h(Host, { style: { display: "contents" } },
+      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
+  }
+  static get is() { return "sqm-reward-exchange-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "notAvailableError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Exchange button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "not-available-error",
+      "reflect": false,
+      "defaultValue": "\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }\""
+    },
+    "chooseRewardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Choose Reward Progress Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "choose-reward-title",
+      "reflect": false,
+      "defaultValue": "\"Rewards\""
+    },
+    "chooseAmountTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Choose Amount Progress Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "choose-amount-title",
+      "reflect": false,
+      "defaultValue": "\"Select\""
+    },
+    "confirmationTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirmation Progress Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirmation-title",
+      "reflect": false,
+      "defaultValue": "\"Confirm\""
+    },
+    "rewardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-title",
+      "reflect": false,
+      "defaultValue": "\"Choose a reward\""
+    },
+    "cancelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Cancel Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "cancel-text",
+      "reflect": false,
+      "defaultValue": "\"Cancel\""
+    },
+    "backText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Back Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "back-text",
+      "reflect": false,
+      "defaultValue": "\"Back\""
+    },
+    "continueText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Continue Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "continue-text",
+      "reflect": false,
+      "defaultValue": "\"Continue\""
+    },
+    "continueToConfirmationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Continue to Confirmation Button Text",
+            "name": "uiName"
+          }],
+        "text": "Displayed on the reward selection page."
+      },
+      "attribute": "continue-to-confirmation-text",
+      "reflect": false,
+      "defaultValue": "\"Continue to confirmation\""
+    },
+    "redeemText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redeem Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redeem-text",
+      "reflect": false,
+      "defaultValue": "\"Redeem\""
+    },
+    "redeemTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirmation Title Text",
+            "name": "uiName"
+          }],
+        "text": "Displayed as the header for the confirmation page."
+      },
+      "attribute": "redeem-title",
+      "reflect": false,
+      "defaultValue": "\"Confirm and redeem\""
+    },
+    "redemptionSuccessText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redemption Success Message",
+            "name": "uiName"
+          }],
+        "text": "Displayed on the success screen when a user successfully exchanges for a reward."
+      },
+      "attribute": "redemption-success-text",
+      "reflect": false,
+      "defaultValue": "\"Redeemed {sourceValue} for {destinationValue}\""
+    },
+    "sourceAmountMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Exchange Amount Text",
+            "name": "uiName"
+          }],
+        "text": "Displayed on the reward exchange cards."
+      },
+      "attribute": "source-amount-message",
+      "reflect": false,
+      "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
+    },
+    "tooltipText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tooltip Text",
+            "name": "uiName"
+          }],
+        "text": "Shown when a user copies a fuel tank code"
+      },
+      "attribute": "tooltip-text",
+      "reflect": false,
+      "defaultValue": "\"Copied\""
+    },
+    "doneText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Done Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "done-text",
+      "reflect": false,
+      "defaultValue": "\"Done\""
+    },
+    "selectText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Select Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "select-text",
+      "reflect": false,
+      "defaultValue": "\"Select amount to receive\""
+    },
+    "queryError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward List Error Message",
+            "name": "uiName"
+          }],
+        "text": "Shown if an error occurs when loading the reward exchange."
+      },
+      "attribute": "query-error",
+      "reflect": false,
+      "defaultValue": "\"Unable to load reward exchange list. Please try again\""
+    },
+    "redemptionError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redemption Error Message",
+            "name": "uiName"
+          }],
+        "text": "Shown if an error occurs during the reward exchange."
+      },
+      "attribute": "redemption-error",
+      "reflect": false,
+      "defaultValue": "\"An error occured trying to redeem this reward. Please try again\""
+    },
+    "notEnoughError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Not Enough Available Error Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "not-enough-error",
+      "reflect": false,
+      "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
+    },
+    "rewardRedeemedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Redeemed Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-redeemed-text",
+      "reflect": false,
+      "defaultValue": "\"Reward redeemed\""
+    },
+    "promoCode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Promo Code Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "promo-code",
+      "reflect": false,
+      "defaultValue": "\"Promo Code\""
+    },
+    "skeletonCardNum": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Loading Cards",
+            "name": "undocumented"
+          }],
+        "text": "Set the number of placeholder cards to be shown in loading state."
+      },
+      "attribute": "skeleton-card-num",
+      "reflect": false,
+      "defaultValue": "8"
+    },
+    "rewardNameTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Row Title",
+            "name": "uiName"
+          }],
+        "text": "Shown in the confirmation state."
+      },
+      "attribute": "reward-name-title",
+      "reflect": false,
+      "defaultValue": "\"Reward\""
+    },
+    "rewardAmountTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Amount Row Title",
+            "name": "uiName"
+          }],
+        "text": "Shown in the confirmation state."
+      },
+      "attribute": "reward-amount-title",
+      "reflect": false,
+      "defaultValue": "\"Reward Amount\""
+    },
+    "costTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Cost Row Title",
+            "name": "uiName"
+          }],
+        "text": "Shown in the confirmation state."
+      },
+      "attribute": "cost-title",
+      "reflect": false,
+      "defaultValue": "\"Cost to Redeem\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<RewardExchangeViewProps>",
+        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError: boolean; queryError: boolean; loading: boolean; open: boolean; noExchangeOptions: boolean; content: { text: TextContent; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; refs?: { canvasRef: any; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "RewardExchangeViewProps": {
+            "location": "import",
+            "path": "./sqm-reward-exchange-list-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
+}
+function useRewardExchangeListDemo(props) {
+  return deepmerge({
+    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: (_) => { },
+      setStage: (_) => { },
+      resetState: () => { },
+      copyFuelTankCode: () => { },
+    },
+    refs: {
+      canvasRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}