@saasquatch/mint-components 1.3.2-2 → 1.3.2-6

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 { LeftArrow, ExchangeArrows } from "./SVGs";
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 const stageProgressList = {
   chooseReward: "Choose reward",
@@ -21,29 +21,33 @@ export function RewardExchangeView(props) {
       },
     },
     Base: {
-      display: "block",
+      display: "flex",
       cursor: "pointer",
       textAlign: "center",
+      height: "120px",
       "&::part(base)": {
         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 +57,9 @@ export function RewardExchangeView(props) {
     },
     PreviewImage: {
       objectFit: "contain",
-      maxWidth: "100%",
-      height: "75px",
+      width: "120px",
+      height: "120px",
+      flex: 0.33,
     },
     InputBox: {
       width: "100%",
@@ -69,8 +74,9 @@ export function RewardExchangeView(props) {
       },
     },
     Buttons: {
-      bottom: "0",
+      marginLeft: "auto",
       width: "100%",
+      maxWidth: "300px",
     },
     Button: {
       margin: "10px 0",
@@ -104,7 +110,9 @@ 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;
@@ -112,29 +120,40 @@ export function RewardExchangeView(props) {
       ? "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(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: "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 },
-            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))));
-      }),
+        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"))));
+        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();
@@ -148,24 +167,26 @@ 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.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"))));
@@ -186,24 +207,24 @@ 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 }),
+    return (h("div", { style: { fontSize: "80%", marginBottom: "20px" } },
       h("div", { style: {
           marginTop: "5px",
           display: "flex",
           justifyContent: "center",
           textAlign: "center",
           whiteSpace: "nowrap",
-          marginBottom: "10px",
+          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 Label = () => {
+  const BackButton = () => {
     if (states.redeemStage === "success")
       return "";
     let previousStage = "";
@@ -225,10 +246,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."),
-      h("sl-button", { onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+      h("sl-button", { loading: states.loading, onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
 }

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

@@ -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; }; refs?: { drawerRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -103,6 +103,7 @@ function useRewardExchangeListDemo(props) {
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      loading: false,
     },
     data: {
       shareCode: "SHARECODE123",

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

@@ -34,6 +34,7 @@ const GET_EXCHANGE_LIST = gql `
               destinationValue
               prettyDestinationValue
               available
+              unavailableReasonCode
             }
           }
           totalCount
@@ -68,7 +69,7 @@ export function useRewardExchangeList(props) {
   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 } = 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) {
@@ -177,6 +178,7 @@ 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,

package/dist/collection/components/sqm-stencilbook/CucumberAddon.js

@@ -13,6 +13,8 @@ export const CucumberAddon = ({ story }, children) => {
     // No scenario or invalid. Ignoring.
   }
   return (h("div", null,
-    result && h("pre", { innerHTML: result.value }),
+    h("details", null,
+      h("summary", null, "Specs"),
+      result && h("pre", { innerHTML: result.value })),
     children));
 };

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -16,6 +16,7 @@ import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
 import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
 import * as FormMessage from "../sqm-form-message/FormMessage.stories";
 import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as NewPortal from "../../stories/NewPortal.stories";
 import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
@@ -35,6 +36,7 @@ import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRe
 import * as UserName from "../sqm-user-name/UserName.stories";
 import * as PasswordField from "../sqm-password-field/PasswordField.stories";
 import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as TaskCardProgressBar from "../sqm-task-card/progress-bar/progress-bar.stories";
 import * as PortalTemplates from "../../stories/PortalTemplates.stories";
 import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
 import * as PoweredByImg from "../../stories/PoweredByImg.stories";
@@ -79,6 +81,7 @@ const stories = [
   UserName,
   PasswordField,
   TaskCard,
+  TaskCardProgressBar,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,
@@ -87,6 +90,7 @@ const stories = [
   ReferralIframe,
   NameFields,
   UseRewardExchangeList,
+  UseTaskCard,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/SVGs.js

@@ -7,9 +7,3 @@ export const arrow_left_right = () => {
   return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
 };
-export const gift = () => {
-  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
-};