@saasquatch/mint-components 1.3.2-3 → 1.3.2-7

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",
@@ -23,12 +24,12 @@ function Dot({ active, completed, incomplete, }) {
             ? "2px solid #E5E5E5"
             : "none",
         borderRadius: "50%",
-        width: completed ? "12px" : "8px",
-        height: completed ? "12px" : "8px",
-        margin: "-4px auto 0px",
+        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: {

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

@@ -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,8 +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("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } }, step.prettySourceValue),
-      step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, step.unavailableReasonCode)))))));
+      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;
@@ -113,41 +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: "100%",
           color: !item.available && "#eee",
-          "&:hover": {
-            boxShadow: !item.available && "none",
-          },
         };
-        return (h("div", { key: item.key, class: sheet.classes.CardContainer, 
-          //@ts-ignore
-          style: style },
+        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 }) },
-            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
-            h("p", { style: { marginBottom: "0" } }, item.description),
-            item.unavailableReasonCode && (h("p", { style: {
-                fontSize: "70%",
-                color: "#F2994A",
-                marginTop: "0",
-              } }, item.unavailableReasonCode)))));
-      }),
+            (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();
@@ -167,14 +173,20 @@ export function RewardExchangeView(props) {
     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.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.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"))));
@@ -195,22 +207,22 @@ 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, { stageCount: 3, currentStage: 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 BackButton = () => {
     if (states.redeemStage === "success")
@@ -239,5 +251,5 @@ export function RewardExchangeView(props) {
         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

@@ -69,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) {
@@ -178,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)" })));
-};