@saasquatch/mint-components 1.3.2-0 → 1.3.2-4

package/dist/cjs/{sqm-task-card-view-cb11e56f.js → sqm-task-card-view-791797ac.js}

@@ -21,7 +21,7 @@ const gift = () => {
 
 // @ts-expect-error -- unused
 function TaskCardView(props, children) {
-  const { points = 0, cardTitle, description, complete = false, repeatable = false, expire, buttonText, buttonOnClick, progress, goal, } = props;
+  const { points = 0, cardTitle = "Title Text", description = "Description Text", showProgressBar = false, progress = 0, goal = 1, repeatable = false, expire = false, dateExpire = "", buttonText = "Button Text", buttonLink = "www.example.com", } = props;
   const checkmark_circle$1 = checkmark_circle();
   const arrow_left_right$1 = arrow_left_right();
   const style = {
@@ -64,6 +64,7 @@ function TaskCardView(props, children) {
       },
       "& .text": {
         alignSelf: "end",
+        textTransform: "uppercase",
         color: "var(--sl-color-gray-600)",
         fontSize: "var(--sl-font-size-x-small)",
         lineHeight: "var(--sl-font-size-medium)",
@@ -76,11 +77,7 @@ function TaskCardView(props, children) {
     },
     Footer: {
       display: "flex",
-      "& span": {
-        verticalAlign: "text-bottom",
-      },
       "& .icon": {
-        verticalAlign: "bottom",
         fontSize: "var(--sl-font-size-xx-small)",
         marginRight: "var(--sl-spacing-xx-small)",
       },
@@ -104,21 +101,23 @@ function TaskCardView(props, children) {
   jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
   const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  const showComplete = complete || (progress && goal <= progress);
-  const repetitions = typeof repeatable == "number" ? repeatable : Math.floor(progress / goal);
+  // if showProgressBar is false: progress >= goal
+  // if true
+  const showComplete = progress >= goal;
+  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
   return (index.h("div", { class: sheet.classes.TaskCard },
     index.h("div", { class: showComplete ? "main complete" : "main" },
       index.h("style", { type: "text/css" }, styleString),
       index.h("div", { class: sheet.classes.Header },
         showComplete && (index.h("span", { class: "icon" }, checkmark_circle$1)),
         index.h("span", { class: "value" }, points),
-        index.h("span", { class: "text" }, "SAASQUATCH POINTS")),
+        index.h("span", { class: "text" }, "saasquatch points")),
       index.h("div", { class: sheet.classes.Title }, cardTitle),
-      index.h(ProgressBar, Object.assign({}, props)),
+      showProgressBar && index.h(ProgressBar, Object.assign({}, props)),
       index.h(Details, { description: description }),
       index.h("div", { class: sheet.classes.Footer },
         index.h("span", { class: "text" },
-          (repeatable || typeof repeatable == "number") && (index.h("div", null,
+          repeatable && (index.h("div", null,
             index.h("span", { class: "icon" }, arrow_left_right$1),
             index.h("span", null,
               "Completed ",
@@ -133,8 +132,8 @@ function TaskCardView(props, children) {
             index.h("br", null),
             "Ends ",
             " ",
-            expire))),
-        index.h("sl-button", { class: "action", size: "small", onClick: buttonOnClick, disabled: showComplete }, showComplete ? "Complete" : buttonText)))));
+            dateExpire))),
+        index.h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete }, showComplete ? "Complete" : buttonText)))));
 }
 function Details(props) {
   const style = {
@@ -190,8 +189,7 @@ function ProgressBar(props) {
   const gift2 = gift();
   const gift3 = gift();
   // if progress and goal are not provided, there cannot be a progress bar
-  if (!(progress && goal))
-    return;
+  // if (!showProgressBar) return;
   const items = [];
   var columns = "";
   var repetitions = Math.floor(progress / goal);
@@ -303,6 +301,8 @@ function ProgressBar(props) {
         marginLeft: "-100px",
         marginRight: "-100px",
         position: "relative",
+        display: "list-item",
+        listStyleType: "none",
         top: "-18px",
         filter: goal <= progress ? "" : "grayscale(100%)",
         zIndex: "1",
@@ -316,7 +316,11 @@ function ProgressBar(props) {
     index.h("style", { type: "text/css" }, styleString),
     index.h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
   function addLinear() {
-    columns = progress / goal + "fr 0fr " + (1 - progress / goal) + "fr 0fr";
+    columns =
+      Math.min(Math.max(progress / goal, 0), 1) +
+        "fr 0fr " +
+        Math.min(Math.max(1 - progress / goal, 0), 1) +
+        "fr 0fr";
     items.push(index.h("div", { class: "filled" }));
     items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
     items.push(index.h("div", { class: "remain" }));
@@ -406,7 +410,7 @@ function ProgressBar(props) {
           else if (i == goal * 2) {
             columns += "0fr 0fr";
             items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty bg" }, unit + (i + goal * (repetitions - 1))));
+            items.push(index.h("div", { class: "empty bg" }, unit + (goal * 2)));
             items.push(index.h("div", { class: "end bw" }, gift2));
           }
           else {
@@ -468,5 +472,4 @@ function ProgressBar(props) {
   }
 }
 
-exports.ProgressBar = ProgressBar;
 exports.TaskCardView = TaskCardView;

package/dist/cjs/sqm-task-card.cjs.entry.js

@@ -7,24 +7,45 @@ const _extends = require('./extends-0302d27d.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 require('./mixins-7b7c59fe.js');
-const sqmTaskCardView = require('./sqm-task-card-view-cb11e56f.js');
+const sqmTaskCardView = require('./sqm-task-card-view-791797ac.js');
 
 const TaskCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * @uiName Number of Points Earned
+     * @uiName Reward Points
      */
     this.points = 0;
     /**
-     * @uiName Show as Complete
+     * @uiName Title Text
      */
-    this.complete = false;
+    this.cardTitle = "Title Text";
+    /**
+     * @uiName Description Text
+     */
+    this.description = "Description Text";
+    /**
+     * @uiName Set Repeatable
+     */
+    this.repeatable = false;
+    /**
+     * @uiName Show Progress Bar
+     */
+    this.showProgressBar = false;
+    /**
+     * @uiName Progress Bar Goal
+     */
+    this.goal = 1;
+    /**
+     * @uiName Show Expiry
+     */
+    this.expire = false;
     _extends.h$1(this);
   }
   disconnectedCallback() { }
   render() {
+    //const progress = useTaskCard(); progress={progress}
     return index.h(sqmTaskCardView.TaskCardView, Object.assign({}, utils.getProps(this)));
   }
 };

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

@@ -0,0 +1,17 @@
+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", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
+  h("g", { filter: "url(#filter0_d_428_4515)" },
+    h("circle", { cx: "21", cy: "21", r: "15", fill: "white" })),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.6255 27.783C16.5129 27.8963 16.3597 27.96 16.2 27.96C16.0402 27.96 15.887 27.8963 15.7744 27.783L11.8744 23.8597C11.6408 23.6247 11.6419 23.2448 11.877 23.0112C12.112 22.7775 12.4919 22.7787 12.7255 23.0137L15.6 25.9054V14.52C15.6 14.1886 15.8686 13.92 16.2 13.92C16.5313 13.92 16.8 14.1886 16.8 14.52V25.9054L19.6744 23.0137C19.908 22.7787 20.2879 22.7775 20.5229 23.0112C20.758 23.2448 20.7591 23.6247 20.5255 23.8597L16.6255 27.783ZM26.2255 14.0971C26.1129 13.9838 25.9597 13.9201 25.8 13.9201C25.6402 13.9201 25.487 13.9838 25.3744 14.0971L21.4744 18.0204C21.2408 18.2554 21.2419 18.6353 21.477 18.8689C21.712 19.1025 22.0919 19.1014 22.3255 18.8664L25.2 15.9747V27.3601C25.2 27.6914 25.4686 27.9601 25.8 27.9601C26.1313 27.9601 26.4 27.6914 26.4 27.3601V15.9747L29.2744 18.8664C29.508 19.1014 29.8879 19.1025 30.1229 18.8689C30.358 18.6353 30.3591 18.2554 30.1255 18.0204L26.2255 14.0971Z", fill: "#333333" }),
+  h("defs", null,
+    h("filter", { id: "filter0_d_428_4515", x: "0", y: "0", width: "42", height: "42", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" },
+      h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }),
+      h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+      h("feOffset", null),
+      h("feGaussianBlur", { stdDeviation: "3" }),
+      h("feComposite", { in2: "hardAlpha", operator: "out" }),
+      h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.670833 0 0 0 0 0.670833 0 0 0 0 0.670833 0 0 0 0.2 0" }),
+      h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_428_4515" }),
+      h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_428_4515", result: "shape" })))));

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

@@ -13,6 +13,7 @@ function Dot({ active, completed, incomplete, }) {
       justifyContent: "center",
       columnGap: "50px",
       marginRight: "-2px",
+      boxSizing: "content-box",
     } },
     h("div", { style: {
         backgroundColor: completed ? "#9E9E9E" : "#FFF",
@@ -26,45 +27,33 @@ function Dot({ active, completed, incomplete, }) {
         height: completed ? "12px" : "8px",
         margin: "-4px auto 0px",
         zIndex: "1",
+        boxSizing: "content-box",
       } })));
 }
+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",
-      } }),
+    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",
-      } }),
+    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,6 +2,7 @@ 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",
@@ -69,6 +70,7 @@ export function RewardExchangeView(props) {
     },
     Buttons: {
       bottom: "0",
+      width: "100%",
     },
     Button: {
       margin: "10px 0",
@@ -84,19 +86,26 @@ export function RewardExchangeView(props) {
   const { states, data, callbacks, refs } = props;
   const { selectedItem, selectedStep } = states;
   function getInput() {
-    var _a;
+    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,
         });
-      } }, (_a = item === null || item === void 0 ? void 0 : item.steps) === null || _a === void 0 ? void 0 : _a.map((step) => (h("sl-menu-item", { value: step },
+      } }, (_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;
@@ -117,12 +126,24 @@ export function RewardExchangeView(props) {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
           marginBottom: "10px 0",
           flex: "1",
-          minWidth: "45%",
+          minWidth: "100%",
+          color: !item.available && "#eee",
+          "&:hover": {
+            boxShadow: !item.available && "none",
+          },
         };
-        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 },
+        return (h("div", { key: item.key, class: sheet.classes.CardContainer, 
+          //@ts-ignore
+          style: style },
+          h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
+              callbacks.setExchangeState({ selectedItem: item }) },
             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("p", { style: { marginBottom: "0" } }, item.description),
+            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"),
@@ -132,6 +153,7 @@ export function RewardExchangeView(props) {
     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"),
@@ -139,24 +161,20 @@ export function RewardExchangeView(props) {
   }
   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.sourceValue)),
+        h("p", null,
+          h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
+        h("p", null,
+          h(ExchangeArrows, null)),
+        h("p", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.destinationValue),
+        h("p", null, 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"))));
@@ -178,7 +196,7 @@ export function RewardExchangeView(props) {
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
     return (h("div", { style: { fontSize: "80%" } },
-      h(ProgressBar, { stage: stageNumber }),
+      h(ProgressBar, { stageCount: 3, currentStage: stageNumber }),
       h("div", { style: {
           marginTop: "5px",
           display: "flex",
@@ -194,7 +212,7 @@ export function RewardExchangeView(props) {
         return h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
       }))));
   }
-  const Label = () => {
+  const BackButton = () => {
     if (states.redeemStage === "success")
       return "";
     let previousStage = "";
@@ -207,8 +225,6 @@ export function RewardExchangeView(props) {
     else if (states.redeemStage === "chooseAmount") {
       previousStage = "chooseReward";
     }
-    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" })));
     return (h("div", { slot: "label" },
       h("a", { style: { cursor: "pointer", fontSize: "80%", color: "#858585" }, onClick: () => callbacks.setStage(previousStage) },
         h(LeftArrow, null),
@@ -218,9 +234,10 @@ export function RewardExchangeView(props) {
     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),
+        h(BackButton, null),
         stageMap(),
         currentStage && currentStage(),
-        states.exchangeError && "Something went wrong. Please contact support or try again."),
+        states.exchangeError &&
+          "Something went wrong. Please contact support or try again."),
       h("sl-button", { onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
 }

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

@@ -4,27 +4,30 @@ import { useRewardExchangeList, } from "./useRewardExchangeList";
 import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
-import { getMissingProps, getProps } from "../../utils/utils";
-import { RequiredPropsError } from "../../utils/RequiredPropsError";
+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 h(RequiredPropsError, { missingProps: missingProps });
-    }
+    // 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));
@@ -34,7 +37,7 @@ export class SqmRewardExchangeList {
   static get is() { return "sqm-reward-exchange-list"; }
   static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
-    "listType": {
+    "buttonText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -46,23 +49,21 @@ export class SqmRewardExchangeList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Type of List",
+            "text": "Exchange button text",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "uiRequired"
           }],
         "text": ""
       },
-      "attribute": "list-type",
-      "reflect": false
+      "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; }; data?: { exchangeList: any; }; refs?: { drawerRef: any; }; }",
+        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; content: { text: any; }; }; data?: { exchangeList: any; }; refs?: { drawerRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -96,8 +97,7 @@ function useRewardExchangeListDemo(props) {
   return deepmerge({
     states: {
       content: {
-        listType: "https://example.com",
-        ...props,
+        text: props,
       },
       redeemStage: "",
       amount: 0,

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

@@ -33,6 +33,8 @@ const GET_EXCHANGE_LIST = gql `
               prettySourceValue
               destinationValue
               prettyDestinationValue
+              available
+              unavailableReasonCode
             }
           }
           totalCount
@@ -51,7 +53,7 @@ const EXCHANGE = gql `
     }
   }
 `;
-export function useRewardExchangeList(_) {
+export function useRewardExchangeList(props) {
   var _a, _b, _c, _d;
   const drawerRef = useRef();
   const [exchangeState, setExchangeState] = useReducer((state, next) => ({
@@ -138,7 +140,6 @@ export function useRewardExchangeList(_) {
           globalRewardKey: selectedItem.globalRewardKey,
         };
     }
-    console.log(exchangeVariables);
     exchange({ exchangeRewardInput: exchangeVariables });
   }
   const resetState = useCallback((e) => {
@@ -167,9 +168,11 @@ export function useRewardExchangeList(_) {
   function setStage(stage) {
     setExchangeState({ redeemStage: stage });
   }
-  console.log(exchangeResponse, exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.data, errors);
   return {
     states: {
+      content: {
+        text: props,
+      },
       selectedItem,
       redeemStage,
       amount,