@saasquatch/mint-components 1.3.2-8 → 1.3.3-2

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

@@ -1,8 +0,0 @@
-import { h } from "@stencil/core";
-export const LeftArrow = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginBottom: "-2px", marginRight: "5px" } },
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.34655 1.90573C7.75405 2.31323 7.75405 2.97392 7.34655 3.38143L3.56266 7.16531H14.9565C15.5328 7.16531 16 7.6325 16 8.20879C16 8.78509 15.5328 9.25227 14.9565 9.25227H3.56266L7.69437 13.384C8.10188 13.7915 8.10188 14.4522 7.69437 14.8597C7.28687 15.2672 6.62617 15.2672 6.21867 14.8597L0.305628 8.94664C-0.101876 8.53914 -0.101876 7.87845 0.305628 7.47094L5.87084 1.90573C6.27835 1.49822 6.93904 1.49822 7.34655 1.90573Z", fill: "#858585" })));
-export const ExchangeArrows = () => (h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("circle", { cx: "15", cy: "15", r: "15", fill: "white" }),
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.6255 21.783C10.5129 21.8963 10.3597 21.96 10.2 21.96C10.0402 21.96 9.88705 21.8963 9.77442 21.783L5.87442 17.8597C5.64081 17.6247 5.64194 17.2448 5.87695 17.0112C6.11197 16.7775 6.49186 16.7787 6.72548 17.0137L9.59995 19.9054V8.52001C9.59995 8.18864 9.86858 7.92001 10.2 7.92001C10.5313 7.92001 10.8 8.18864 10.8 8.52001V19.9054L13.6744 17.0137C13.908 16.7787 14.2879 16.7775 14.5229 17.0112C14.758 17.2448 14.7591 17.6247 14.5255 17.8597L10.6255 21.783ZM20.2255 8.09707C20.1129 7.98378 19.9597 7.92007 19.8 7.92007C19.6402 7.92007 19.487 7.98378 19.3744 8.09707L15.4744 12.0204C15.2408 12.2554 15.2419 12.6353 15.477 12.8689C15.712 13.1025 16.0919 13.1014 16.3255 12.8664L19.2 9.97473V21.3601C19.2 21.6914 19.4686 21.9601 19.8 21.9601C20.1313 21.9601 20.4 21.6914 20.4 21.3601V9.97473L23.2744 12.8664C23.508 13.1014 23.8879 13.1025 24.1229 12.8689C24.358 12.6353 24.3591 12.2554 24.1255 12.0204L20.2255 8.09707Z", fill: "#333333" })));
-export const CheckMark = () => (h("svg", { style: { top: "-4px", position: "relative", left: "2px" }, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "7", viewBox: "0 0 10 7", fill: "none" },
-  h("path", { d: "M2.12828 2.71485C1.72536 2.33712 1.09253 2.35754 0.714799 2.76045C0.337068 3.16336 0.357483 3.7962 0.760395 4.17393L2.12828 2.71485ZM3.81471 5.66661L3.13076 6.39615C3.51542 6.75677 4.11399 6.75677 4.49865 6.39615L3.81471 5.66661ZM9.23939 1.95171C9.6423 1.57397 9.66271 0.941139 9.28498 0.538227C8.90725 0.135315 8.27442 0.114901 7.87151 0.492631L9.23939 1.95171ZM0.760395 4.17393L3.13076 6.39615L4.49865 4.93708L2.12828 2.71485L0.760395 4.17393ZM4.49865 6.39615L9.23939 1.95171L7.87151 0.492631L3.13076 4.93708L4.49865 6.39615Z", fill: "white" })));

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

@@ -1,143 +0,0 @@
-import { setUserIdentity, useLazyQuery, } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { gql } from "graphql-request";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-const EXCHANGE = gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-      }
-    }
-  }
-`;
-export default {
-  title: "Hooks / useRewardExchange",
-};
-function setupGraphQL() {
-  const id = "testestest";
-  const accountId = id;
-  const programId = "sam-partner-test-2";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-function useExchangeButton() {
-  const { id, accountId } = setupGraphQL();
-  const [points, setPoints] = useState(10);
-  const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = useLazyQuery(EXCHANGE);
-  return {
-    states: {
-      points,
-      rate,
-    },
-    data: {
-      id,
-      accountId,
-      data,
-      errors,
-    },
-    callbacks: {
-      exchange,
-      setPoints,
-      setRate,
-    },
-  };
-}
-const DefaultView = (props) => {
-  const { states, data, callbacks } = props;
-  return (h("div", null,
-    h("div", null,
-      h("label", null, "Rate:"),
-      h("input", { value: states.rate, onInput: (e) => 
-        // @ts-ignore
-        callbacks.setRate(e.target.value) })),
-    h("input", { value: states.points, onInput: (e) => 
-      // @ts-ignore
-      callbacks.setPoints(e.target.value) }),
-    h("button", { onClick: () => callbacks.exchange(props.input) }, "Exchange"),
-    h("details", null,
-      h("summary", null, "response"),
-      h("h4", null, "data"),
-      h("div", { style: { maxWidth: "500px" } },
-        h("pre", { style: { width: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.data))),
-      h("h4", null, "errors"),
-      h("div", { style: { maxWidth: "500px" } },
-        h("pre", { style: { maxWidth: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.errors))))));
-};
-export const RewardList = createHookStory(() => {
-  setupGraphQL();
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
-  return (h("sqm-reward-exchange-list", { "list-type": "something" }));
-});
-export const FixedGlobalReward = createHookStory(() => {
-  const { states, data, callbacks } = useExchangeButton();
-  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
-      exchangeRewardInput: {
-        userId: data.id,
-        accountId: data.accountId,
-        redeemCreditInput: {
-          amount: states.points,
-          unit: "POINT",
-        },
-        globalRewardKey: "gc1",
-      },
-    } }));
-});
-export const VariableGlobalReward = createHookStory(() => {
-  const { states, data, callbacks } = useExchangeButton();
-  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
-      exchangeRewardInput: {
-        userId: data.id,
-        accountId: data.accountId,
-        redeemCreditInput: {
-          amount: states.points,
-          unit: "POINT",
-        },
-        globalRewardKey: "gc1",
-        rewardInput: {
-          valueInCents: Math.ceil(states.points * states.rate),
-        },
-      },
-    } }));
-});
-export const VariableCreditReward = createHookStory(() => {
-  const { states, data, callbacks } = useExchangeButton();
-  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
-      exchangeRewardInput: {
-        userId: data.id,
-        accountId: data.accountId,
-        redeemCreditInput: {
-          amount: states.points,
-          unit: "POINT",
-        },
-        rewardInput: {
-          type: "CREDIT",
-          unit: "foo",
-          assignedCredit: Math.ceil(states.points * states.rate),
-        },
-      },
-    } }));
-});

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

@@ -1,60 +0,0 @@
-import { h } from "@stencil/core";
-import { CheckMark } from "./SVGs";
-function Dot({ active, completed, incomplete, }) {
-  return (h("div", { style: {
-      flex: "0 0 0",
-      content: "''",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete ? "#E5E5E5" : "#9E9E9E",
-      position: "relative",
-      bottom: "0",
-      left: "0",
-      display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
-    } },
-    h("div", { style: {
-        backgroundColor: completed ? "#9E9E9E" : "#FFF",
-        border: active
-          ? "2px solid #9E9E9E"
-          : incomplete
-            ? "2px solid #E5E5E5"
-            : "none",
-        borderRadius: "50%",
-        width: completed ? "14px" : "10px",
-        height: completed ? "14px" : "10px",
-        margin: "-5px auto 0px",
-        zIndex: "1",
-        boxSizing: "content-box",
-      } }, completed && h(CheckMark, null))));
-}
-function ProgressLine({ incomplete = false, active = false }) {
-  return (h("div", { style: {
-      content: "''",
-      flex: "0.5 0.5 0",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
-      position: "relative",
-      bottom: "0",
-      left: "0",
-      display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
-    } }));
-}
-function Progress({ active, completed, incomplete }) {
-  return [
-    h(ProgressLine, { incomplete: incomplete }),
-    h(Dot, { active: active, completed: completed, incomplete: incomplete }),
-    h(ProgressLine, { incomplete: incomplete, active: active }),
-  ];
-}
-export function ProgressBar({ stageCount, currentStage, }) {
-  return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage })))));
-}

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

@@ -1,255 +0,0 @@
-import { getAssetPath, h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { ProgressBar } from "./progressBar";
-import { LeftArrow, ExchangeArrows } from "./SVGs";
-const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-const stageProgressList = {
-  chooseReward: "Choose reward",
-  chooseAmount: "Amount",
-  confirmation: "Confirm",
-};
-export function RewardExchangeView(props) {
-  const style = {
-    Container: {
-      position: "relative",
-      display: "flex",
-    },
-    CardContainer: {
-      "&:hover": {
-        boxShadow: "0 3px 10px #87ceeb6e!important",
-      },
-    },
-    Base: {
-      display: "flex",
-      cursor: "pointer",
-      textAlign: "center",
-      height: "120px",
-      "&::part(base)": {
-        width: "100%",
-        maxWidth: "350px",
-        display: "flex",
-        margin: "0 auto",
-      },
-      "&::part(body)": {
-        padding: 0,
-        display: "flex",
-        width: "100%",
-      },
-    },
-    Drawer: {
-      "&::part(base)": {
-        minWidth: "400px",
-        maxWidth: "700px",
-        width: "50%",
-        margin: "0 auto",
-        right: "0",
-      },
-      "&::part(panel)": {
-        height: "85vh",
-        width: "100%",
-      },
-    },
-    FullImage: {
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "100px",
-    },
-    PreviewImage: {
-      objectFit: "contain",
-      width: "120px",
-      height: "120px",
-      flex: 0.33,
-    },
-    InputBox: {
-      width: "100%",
-      marginBottom: "20px",
-    },
-    Select: {
-      "&::part(base)": {
-        flex: "0.75",
-      },
-      "&::part(menu)": {
-        maxHeight: "40vh",
-      },
-    },
-    Buttons: {
-      marginLeft: "auto",
-      width: "100%",
-      maxWidth: "300px",
-    },
-    Button: {
-      margin: "10px 0",
-      display: "block",
-      textAlign: "center",
-      cursor: "pointer",
-    },
-  };
-  // JSS config
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const { states, data, callbacks, refs } = props;
-  const { selectedItem, selectedStep } = states;
-  function getInput() {
-    var _a, _b;
-    const item = states.selectedItem;
-    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return h("span", null);
-    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
-      return h("p", null,
-        "Not enough ",
-        item.sourceUnit,
-        " to redeem for this reward.");
-    }
-    return (h("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
-        var _a, _b, _c, _d, _e;
-        return callbacks.setExchangeState({
-          amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
-          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
-        });
-      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (h("sl-menu-item", { value: step, disabled: !step.available },
-      step.prettyDestinationValue,
-      h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
-        step.prettySourceValue,
-        step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, step.unavailableReasonCode))))))));
-  }
-  function chooseReward() {
-    var _a;
-    const nextStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? "confirmation"
-      : "chooseAmount";
-    console.log({ nextStage, ruleType: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType });
-    return [
-      h("div", { style: {
-          display: "grid",
-          justifyContent: "center",
-          gap: "20px",
-          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
-        } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        const style = {
-          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
-          marginBottom: "10px 0",
-          flex: "1",
-          minWidth: "100%",
-          color: !item.available && "#eee",
-        };
-        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
-          ? item.prettySourceValue
-          : `${item.sourceMinValue} to ${item.sourceMaxValue} ${item.sourceUnit}`;
-        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
-              callbacks.setExchangeState({ selectedItem: item }) },
-            (item === null || item === void 0 ? void 0 : item.imageUrl) && (h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") })),
-            h("p", { style: { margin: "0", flex: "1", fontSize: "90%" } },
-              h("b", null, item.description),
-              h("p", { style: { margin: "0" } }, amount),
-              item.unavailableReasonCode && (h("p", { style: {
-                  fontSize: "70%",
-                  color: "#F2994A",
-                  marginTop: "0",
-                } }, item.unavailableReasonCode))))));
-      })),
-      h("div", { class: sheet.classes.Buttons },
-        h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
-        h("a", { onClick: () => { var _a; return (_a = refs.drawerRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, style: { display: "block" }, class: sheet.classes.Button }, "Cancel")),
-    ];
-  }
-  function chooseAmount() {
-    const input = getInput();
-    return (h("div", null,
-      h("div", { style: { width: "50%", margin: "0 auto" } }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) && (h("img", { class: sheet.classes.FullImage, src: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl }))),
-      h("p", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      h("div", { class: sheet.classes.InputBox }, input),
-      h("div", { class: sheet.classes.Buttons },
-        h("sl-button", { onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount, style: { display: "block" }, class: sheet.classes.Button }, "Continue"),
-        h("a", { onClick: () => callbacks.setStage("chooseReward"), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
-  }
-  console.log({ selectedItem, selectedStep });
-  function confirmation() {
-    const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? "chooseReward"
-      : "chooseAmount";
-    return (h("div", null,
-      h("h2", null, "Confirm and redeem"),
-      h("div", { style: { textAlign: "center" } },
-        h("p", null,
-          h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
-        h("p", null,
-          h(ExchangeArrows, null)),
-        h("div", { class: sheet.classes.CardContainer, style: {
-            boxShadow: "none",
-            marginBottom: "10px",
-            flex: "1",
-            minWidth: "100%",
-          } },
-          h("sl-card", { class: sheet.classes.Base },
-            h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                getAssetPath("./assets/Reward-icon.png") }),
-            h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
-      h("div", { class: sheet.classes.Buttons },
-        h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
-        h("a", { onClick: () => callbacks.setStage(previousStage), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
-  }
-  function success() {
-    return (h("div", { style: { textAlign: "center" } },
-      h("img", { class: sheet.classes.FullImage, src: getAssetPath("./assets/Reward-icon.png") }),
-      h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      h("sl-button", { onClick: () => { var _a, _b; return (_b = (_a = refs.drawerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.hide(); } }, "Done")));
-  }
-  const stages = {
-    chooseReward: () => chooseReward(),
-    chooseAmount: () => chooseAmount(),
-    confirmation: () => confirmation(),
-    success: () => success(),
-  };
-  const currentStage = stages[states.redeemStage];
-  function stageMap() {
-    const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { style: { fontSize: "80%", marginBottom: "20px" } },
-      h("div", { style: {
-          marginTop: "5px",
-          display: "flex",
-          justifyContent: "center",
-          textAlign: "center",
-          whiteSpace: "nowrap",
-          marginBottom: "6px",
-        } }, Object.keys(stageProgressList).map((stage) => {
-        if (stage === states.redeemStage)
-          return (h("b", { style: { flex: "1 1 0" } },
-            " ",
-            stageProgressList[stage]));
-        return h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
-      })),
-      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
-  }
-  const BackButton = () => {
-    if (states.redeemStage === "success")
-      return "";
-    let previousStage = "";
-    if (states.redeemStage === "confirmation") {
-      previousStage =
-        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-          ? "chooseReward"
-          : "chooseAmount";
-    }
-    else if (states.redeemStage === "chooseAmount") {
-      previousStage = "chooseReward";
-    }
-    return (h("div", { slot: "label" },
-      h("a", { style: { cursor: "pointer", fontSize: "80%", color: "#858585" }, onClick: () => callbacks.setStage(previousStage) },
-        h(LeftArrow, null),
-        " Back")));
-  };
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("div", null,
-      h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
-        h(BackButton, null),
-        stageMap(),
-        currentStage && currentStage(),
-        states.exchangeError &&
-          "Something went wrong. Please contact support or try again."),
-      h("sl-button", { loading: states.loading, onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
-}

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

@@ -1,121 +0,0 @@
-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";
-/**
- * @uiName Reward Exchange List
- */
-export class SqmRewardExchangeList {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Exchange button text
-     */
-    this.buttonText = "Exchange Rewards";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    // const missingProps = getMissingProps([
-    //   {
-    //     attribute: "listType",
-    //     value: this.listType,
-    //   },
-    // ]);
-    // if (missingProps) {
-    //   return <RequiredPropsError missingProps={missingProps} />;
-    // }
-    const { states, data, callbacks, refs } = isDemo()
-      ? useRewardExchangeListDemo(getProps(this))
-      : useRewardExchangeList(getProps(this));
-    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 assetsDirs() { return ["assets"]; }
-  static get properties() { return {
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Exchange button text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "\"Exchange Rewards\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<RewardExchangeViewProps>",
-        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; loading: boolean; content: { text: any; }; }; data?: { exchangeList: any; }; refs?: { drawerRef: 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 useRewardExchangeListDemo(props) {
-  return deepmerge({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "",
-      amount: 0,
-      selectedStep: undefined,
-      exchangeError: false,
-      loading: false,
-    },
-    data: {
-      shareCode: "SHARECODE123",
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      openDrawer: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-    },
-    refs: {
-      drawerRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}