@saasquatch/mint-components 1.3.2-1 → 1.3.2-13

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { CheckMark } from "./SVGs";
 function Dot({ active, completed, incomplete, }) {
   return (h("div", { style: {
       flex: "0 0 0",
@@ -18,56 +19,43 @@ function Dot({ active, completed, incomplete, }) {
     h("div", { style: {
         backgroundColor: completed ? "#9E9E9E" : "#FFF",
         border: active
-          ? "2px solid #9E9E9E"
+          ? "3px solid #9E9E9E"
           : incomplete
-            ? "2px solid #E5E5E5"
-            : "none",
+            ? "3px solid #E5E5E5"
+            : "3px solid #9E9E9E",
         borderRadius: "50%",
-        width: completed ? "12px" : "8px",
-        height: completed ? "12px" : "8px",
-        margin: "-4px auto 0px",
+        width: "10px",
+        height: "10px",
+        margin: "-6px auto 0px",
         zIndex: "1",
-      } })));
+        boxSizing: "content-box",
+      } }, completed && (h("div", { style: { top: "-6px", position: "relative" } },
+      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("div", { style: {
-        content: "''",
-        flex: "0.5 0.5 0",
-        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(ProgressLine, { incomplete: incomplete }),
     h(Dot, { active: active, completed: completed, incomplete: incomplete }),
-    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",
-      } }),
+    h(ProgressLine, { incomplete: incomplete, active: active }),
   ];
 }
-export function ProgressBar({ stage }) {
-  console.log({ stage });
-  return (h("div", { style: { display: "flex", columnGap: "-2px" } },
-    h(Progress, { active: stage === 0, completed: stage > 0, incomplete: stage < 0 }),
-    h(Progress, { active: stage === 1, completed: stage > 1, incomplete: stage < 1 }),
-    h(Progress, { active: stage === 2, completed: stage > 2, incomplete: stage < 2 })));
+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

@@ -2,7 +2,7 @@ import { getAssetPath, h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
 import { ProgressBar } from "./progressBar";
-import { LeftArrow } from "./SVGs";
+import { ExchangeArrows, CheckMark } from "./SVGs";
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 const stageProgressList = {
   chooseReward: "Choose reward",
@@ -12,38 +12,43 @@ const stageProgressList = {
 export function RewardExchangeView(props) {
   const style = {
     Container: {
+      padding: "var(--sl-spacing-medium)",
       position: "relative",
-      display: "flex",
     },
     CardContainer: {
-      "&:hover": {
-        boxShadow: "0 3px 10px #87ceeb6e!important",
+      "&:active": {
+      //boxShadow: "0 3px 10px #87ceeb6e!important",
       },
     },
     Base: {
-      display: "block",
+      display: "flex",
       cursor: "pointer",
       textAlign: "center",
+      height: "120px",
       "&::part(base)": {
+        boxShadow: "none",
         width: "100%",
-        height: "170px",
+        // maxWidth: "350px",
         display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
+        margin: "0 auto",
       },
       "&::part(body)": {
-        padding: "10px 0",
+        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: {
@@ -53,8 +58,9 @@ export function RewardExchangeView(props) {
     },
     PreviewImage: {
       objectFit: "contain",
-      maxWidth: "100%",
-      height: "75px",
+      width: "120px",
+      height: "120px",
+      flex: 0.33,
     },
     InputBox: {
       width: "100%",
@@ -69,8 +75,9 @@ export function RewardExchangeView(props) {
       },
     },
     Buttons: {
-      bottom: "0",
+      marginLeft: "auto",
       width: "100%",
+      maxWidth: "300px",
     },
     Button: {
       margin: "10px 0",
@@ -78,12 +85,57 @@ export function RewardExchangeView(props) {
       textAlign: "center",
       cursor: "pointer",
     },
+    ProgressBar: {
+      fontSize: "80%",
+      marginBottom: "20px",
+      "& .text-area": {
+        marginTop: "5px",
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        whiteSpace: "nowrap",
+        marginBottom: "6px",
+        "& .text": {
+          flex: "1 1 0",
+        },
+        "& .text.subdued": {
+          color: "#BDBDBD",
+        },
+      },
+    },
+    KutayCard: {
+      "&::part(base)": {
+        boxShadow: "none",
+      },
+    },
+    KutayButton: {
+      display: "flex",
+      flexWrap: "wrap",
+      margin: "var(--sl-spacing-medium) 0",
+      "& .cancel": {
+        width: "20%",
+        marginLeft: "auto",
+        marginRight: "var(--sl-spacing-medium)",
+        "&::part(base)": {
+          fontWeight: "var(--sl-font-weight-normal)",
+          color: "var(--sl-color-neutral-1000)",
+        },
+      },
+      "& .continue": {
+        width: "20%",
+        "&::part(base)": {
+          background: "var(--sl-color-neutral-500)",
+          fontWeight: "var(--sl-font-weight-normal)",
+          color: "var(--sl-color-neutral-0)",
+        },
+      },
+    },
   };
   // JSS config
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  const { states, data, callbacks, refs } = props;
+  const { states, data, callbacks } = props;
   const { selectedItem, selectedStep } = states;
   function getInput() {
     var _a, _b;
@@ -104,37 +156,70 @@ export function RewardExchangeView(props) {
         });
       } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (h("sl-menu-item", { value: step, disabled: !step.available },
       step.prettyDestinationValue,
-      h("span", { slot: "suffix", style: { fontSize: "75%" } }, step.prettySourceValue))))));
+      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: "flex",
-        justifyContent: "center",
-        flexWrap: "wrap",
-        alignItems: "center",
-        columnGap: "12px",
-        rowGap: "12px",
-      } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 :
-      _a.map((item) => {
+    return [
+      h("div", { style: {
+          display: "grid",
+          justifyContent: "center",
+          gap: "20px",
+          gridTemplateColumns: "repeat(auto-fill, minmax(300px, 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",
+          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
+            ? "0 0 0 2px var(--sl-color-primary-500)"
+            : "none",
           marginBottom: "10px 0",
+          borderRadius: "var(--sl-border-radius-medium)",
           flex: "1",
-          minWidth: "45%",
+          minWidth: "100%",
+          color: !item.available && "#eee",
         };
-        return (h("div", { key: item.key, class: sheet.classes.CardContainer, style: style },
-          h("sl-card", { class: sheet.classes.Base, onClick: () => callbacks.setExchangeState({ selectedItem: item }), disabled: !item.available },
+        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
+          ? item.prettySourceValue
+          : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
+        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.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { style: {
+                width: "18px",
+                height: "18px",
+                borderRadius: "50%",
+                background: "var(--sl-color-primary-500)",
+                position: "relative",
+                margin: "-9px",
+                left: "350px",
+              } },
+              h("div", { style: { position: "relative", top: "-6px" } },
+                h(CheckMark, null)))),
+            // 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", null, item.description))));
-      }),
-      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"))));
+            h("p", { style: {
+                textAlign: "left",
+                margin: "0",
+                flex: "1",
+                fontSize: "90%",
+                padding: "8px",
+              } },
+              h("b", null, item.description),
+              h("p", { style: { margin: "0" } }, amount),
+              item.unavailableReasonCode && (h("p", { style: {
+                  fontSize: "70%",
+                  color: "#F2994A",
+                  marginTop: "0",
+                } }, item.unavailableReasonCode ===
+                "INSUFFICIENT_REDEEMABLE_CREDIT"
+                ? "Not enough points"
+                : item.unavailableReasonCode))))));
+      })),
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "cancel", size: "large", type: "text" }, "Cancel"),
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
+    ];
   }
   function chooseAmount() {
     const input = getInput();
@@ -142,40 +227,38 @@ export function RewardExchangeView(props) {
       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"))));
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount }, "Continue to confirmation"))));
   }
-  console.log({ selectedItem, selectedStep });
   function confirmation() {
-    console.log("confirmation:", { selectedItem });
-    const redemptionAmount = () => {
-      var _a;
-      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD") {
-        return `Redeem ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceValue} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.globalRewardKey}`;
-      }
-      else {
-        const amount = states.amount;
-        const reward = (_a = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) !== null && _a !== void 0 ? _a : `${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.destinationUnit}`;
-        return `Redeem ${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${reward}`;
-      }
-    };
-    const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? "chooseReward"
-      : "chooseAmount";
     return (h("div", null,
-      h("h2", null, "Confirm your redemption:"),
-      redemptionAmount(),
+      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"))));
+        h("a", { onClick: () => callbacks.setStage("chooseAmount"), 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")));
+      h("sl-button", { onClick: () => callbacks.resetState(true) }, "Done")));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -186,49 +269,41 @@ export function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { style: { fontSize: "80%" } },
-      h(ProgressBar, { stage: stageNumber }),
-      h("div", { style: {
-          marginTop: "5px",
-          display: "flex",
-          justifyContent: "center",
-          textAlign: "center",
-          whiteSpace: "nowrap",
-          marginBottom: "10px",
-        } }, 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]);
-      }))));
+    return (h("div", { class: sheet.classes.ProgressBar },
+      h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stage === states.redeemStage) {
+          return h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
+      })),
+      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
-  const Label = () => {
-    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")));
-  };
+  // const BackButton = () => {
+  //   if (states.redeemStage === "success") return "";
+  //   let previousStage: Stages = "";
+  //   if (states.redeemStage === "confirmation") {
+  //     previousStage = "chooseAmount";
+  //   } else if (states.redeemStage === "chooseAmount") {
+  //     previousStage = "chooseReward";
+  //   }
+  //   return (
+  //     <div slot="label">
+  //       <a
+  //         style={{ cursor: "pointer", fontSize: "80%", color: "#858585" }}
+  //         onClick={() => callbacks.setStage(previousStage)}
+  //       >
+  //         <LeftArrow /> Back
+  //       </a>
+  //     </div>
+  //   );
+  // };
   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(Label, null),
-        stageMap(),
-        currentStage && currentStage(),
-        states.exchangeError &&
-          "Something went wrong. Please contact support or try again."),
-      h("sl-button", { onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+      stageMap(),
+      currentStage && currentStage(),
+      states.exchangeError &&
+        "Something went wrong. Please contact support or try again.")));
 }

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

@@ -28,11 +28,11 @@ export class SqmRewardExchangeList {
     // if (missingProps) {
     //   return <RequiredPropsError missingProps={missingProps} />;
     // }
-    const { states, data, callbacks, refs } = isDemo()
+    const { states, data, callbacks } = isDemo()
       ? useRewardExchangeListDemo(getProps(this))
       : useRewardExchangeList(getProps(this));
     return (h(Host, { style: { display: "contents" } },
-      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
+      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks })));
   }
   static get is() { return "sqm-reward-exchange-list"; }
   static get assetsDirs() { return ["assets"]; }
@@ -63,7 +63,7 @@ export class SqmRewardExchangeList {
       "mutable": false,
       "complexType": {
         "original": "DemoData<RewardExchangeViewProps>",
-        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; content: { text: any; }; }; data?: { exchangeList: any; }; refs?: { drawerRef: any; }; }",
+        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; loading: boolean; content: { text: any; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -99,22 +99,20 @@ function useRewardExchangeListDemo(props) {
       content: {
         text: props,
       },
-      redeemStage: "",
+      redeemStage: "chooseReward",
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      loading: false,
     },
     data: {
       shareCode: "SHARECODE123",
     },
     callbacks: {
       exchangeReward: () => { },
-      openDrawer: () => { },
       setExchangeState: (_) => { },
       setStage: (_) => { },
-    },
-    refs: {
-      drawerRef: {},
+      resetState: () => { }
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,6 +1,6 @@
 import { useUserIdentity, useQuery, useMutation, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-import { useCallback, useEffect, useReducer, useRef, } from "@saasquatch/universal-hooks";
+import { useEffect, useReducer, } from "@saasquatch/universal-hooks";
 const GET_EXCHANGE_LIST = gql `
   query getExchangeList {
     viewer {
@@ -34,6 +34,7 @@ const GET_EXCHANGE_LIST = gql `
               destinationValue
               prettyDestinationValue
               available
+              unavailableReasonCode
             }
           }
           totalCount
@@ -54,36 +55,29 @@ const EXCHANGE = gql `
 `;
 export function useRewardExchangeList(props) {
   var _a, _b, _c, _d;
-  const drawerRef = useRef();
   const [exchangeState, setExchangeState] = useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
     selectedItem: undefined,
     selectedStep: undefined,
-    redeemStage: "",
+    redeemStage: "chooseReward",
     amount: 0,
     exchangeError: false,
   });
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = useUserIdentity();
   const [exchange, { data: exchangeResponse, errors }] = useMutation(EXCHANGE);
-  const { data } = useQuery(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data, loading, refetch } = useQuery(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
       setExchangeState({ redeemStage: "success" });
     }
     if (!!errors) {
-      console.log("YEA");
       setExchangeState({ exchangeError: true });
     }
   }, [exchangeResponse, errors]);
-  function openDrawer() {
-    var _a;
-    setExchangeState({ redeemStage: "chooseReward" });
-    (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.show();
-  }
   function exchangeReward() {
     if (!selectedItem)
       return;
@@ -141,29 +135,16 @@ export function useRewardExchangeList(props) {
     }
     exchange({ exchangeRewardInput: exchangeVariables });
   }
-  const resetState = useCallback((e) => {
-    var _a, _b;
-    // selects also trigger an sl-hide event :(
-    //@ts-ignore - componentId is not private here
-    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.componentId) !== ((_b = drawerRef.current) === null || _b === void 0 ? void 0 : _b.componentId))
-      return;
+  const resetState = (refresh) => {
+    refresh && refetch();
     setExchangeState({
       amount: 0,
       selectedStep: undefined,
       selectedItem: undefined,
       exchangeError: false,
+      redeemStage: "chooseReward",
     });
-  }, []);
-  useEffect(() => {
-    if (!(drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current))
-      return;
-    const drawer = drawerRef.current;
-    // Clear input value when drawer is closed
-    drawer.addEventListener("sl-hide", resetState);
-    return () => {
-      drawer.removeEventListener("sl-hide", resetState);
-    };
-  }, [drawerRef.current]);
+  };
   function setStage(stage) {
     setExchangeState({ redeemStage: stage });
   }
@@ -177,20 +158,17 @@ export function useRewardExchangeList(props) {
       amount,
       selectedStep,
       exchangeError,
+      loading,
     },
     data: {
       exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
-      //@ts-ignore
       fuelTankCode: (_d = (_c = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _c === void 0 ? void 0 : _c.reward) === null || _d === void 0 ? void 0 : _d.fuelTankCode,
     },
     callbacks: {
       exchangeReward,
-      openDrawer,
       setExchangeState,
       setStage,
-    },
-    refs: {
-      drawerRef,
+      resetState,
     },
   };
 }