npm - @saasquatch/mint-components - Versions diffs - 1.6.0 → 1.6.1-10 - Mend

@saasquatch/mint-components 1.6.0 → 1.6.1-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1092) hide show

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

@@ -1,745 +1,781 @@
-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 });
-}
+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"}]
+ */
+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
+     * @uiWidget textArea
+     */
+    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": "textArea",
+            "name": "uiWidget"
+          }],
+        "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 });
+}