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

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -287,7 +287,7 @@ export class PortalRegister {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegisterViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -13,7 +13,7 @@ const baseResponse = (data) => ({
   },
   callbacks: {
     exchangeReward: null,
-    openDrawer: null,
+    resetState: null,
     setStage: null,
     setExchangeState: null,
     refs: null,
@@ -207,7 +207,7 @@ export const test2 = {
   },
   callbacks: {
     exchangeReward: null,
-    openDrawer: null,
+    resetState: null,
     setStage: null,
     setExchangeState: null,
     refs: {

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, ExchangeArrows, CheckMark } from "./SVGs";
+import { ExchangeArrows, CheckMark } from "./SVGs";
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 const stageProgressList = {
   chooseReward: "Choose reward",
@@ -113,7 +113,7 @@ export function RewardExchangeView(props) {
       flexWrap: "wrap",
       margin: "var(--sl-spacing-medium) 0",
       "& .cancel": {
-        width: "150px",
+        width: "20%",
         marginLeft: "auto",
         marginRight: "var(--sl-spacing-medium)",
         "&::part(base)": {
@@ -122,7 +122,7 @@ export function RewardExchangeView(props) {
         },
       },
       "& .continue": {
-        width: "150px",
+        width: "20%",
         "&::part(base)": {
           background: "var(--sl-color-neutral-500)",
           fontWeight: "var(--sl-font-weight-normal)",
@@ -135,7 +135,7 @@ export function RewardExchangeView(props) {
   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;
@@ -162,8 +162,6 @@ export function RewardExchangeView(props) {
   }
   function chooseReward() {
     var _a;
-    const nextStage = "chooseAmount";
-    // console.log({ nextStage, ruleType: selectedItem?.ruleType });
     return [
       h("div", { style: {
           display: "grid",
@@ -219,7 +217,8 @@ export function RewardExchangeView(props) {
                 : item.unavailableReasonCode))))));
       })),
       h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage(nextStage), disabled: !states.selectedItem }, "Continue")),
+        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() {
@@ -229,13 +228,10 @@ export function RewardExchangeView(props) {
       h("p", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
       h("div", { class: sheet.classes.InputBox }, input),
       h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.setStage("chooseReward") }, "Cancel"),
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: states.selectedItem.ruleType !== "FIXED_GLOBAL_REWARD" ||
-            (input && !states.amount) }, "Continue to confirmation"))));
+        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() {
-    const previousStage = "chooseAmount";
     return (h("div", null,
       h("h2", null, "Confirm and redeem"),
       h("div", { style: { textAlign: "center" } },
@@ -255,13 +251,14 @@ export function RewardExchangeView(props) {
             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)));
+      (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: () => callbacks.resetState(true) }, "Done")));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -283,22 +280,25 @@ export function RewardExchangeView(props) {
       })),
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
-  const BackButton = () => {
-    if (states.redeemStage === "success")
-      return "";
-    let previousStage = "";
-    if (states.redeemStage === "confirmation") {
-      previousStage = "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")));
-  };
-  console.log(props);
+  // 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,

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; loading: boolean; content: { text: any; }; }; data?: { exchangeList: any; }; refs?: {}; }",
+        "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",
@@ -110,12 +110,9 @@ function useRewardExchangeListDemo(props) {
     },
     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 {
@@ -55,7 +55,6 @@ const EXCHANGE = gql `
 `;
 export function useRewardExchangeList(props) {
   var _a, _b, _c, _d;
-  const drawerRef = useRef();
   const [exchangeState, setExchangeState] = useReducer((state, next) => ({
     ...state,
     ...next,
@@ -69,22 +68,16 @@ export function useRewardExchangeList(props) {
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = useUserIdentity();
   const [exchange, { data: exchangeResponse, errors }] = useMutation(EXCHANGE);
-  const { data, loading } = 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;
@@ -142,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 });
   }
@@ -182,17 +162,13 @@ export function useRewardExchangeList(props) {
     },
     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,
     },
   };
 }

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

@@ -37,7 +37,6 @@ 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";
@@ -83,7 +82,6 @@ const stories = [
   UserName,
   PasswordField,
   TaskCard,
-  TaskCardProgressBar,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,