@saasquatch/mint-components 1.7.0-13 → 1.7.0-15

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

@@ -1,7 +1,7 @@
-import { useUserIdentity, useQuery, useMutation, useRefreshDispatcher, } from "@saasquatch/component-boilerplate";
-import { gql } from "graphql-request";
-import { useEffect, useReducer, useRef, useState, } from "@saasquatch/universal-hooks";
-import confetti from "canvas-confetti";
+import { useUserIdentity, useQuery, useMutation, useRefreshDispatcher, } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { useEffect, useReducer, useRef, useState, } from "@saasquatch/universal-hooks";
+import confetti from "canvas-confetti";
 const GET_EXCHANGE_LIST = gql `
   query getExchangeList {
     viewer {
@@ -44,7 +44,7 @@ const GET_EXCHANGE_LIST = gql `
       }
     }
   }
-`;
+`;
 const EXCHANGE = gql `
   mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
     exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
@@ -54,152 +54,152 @@ const EXCHANGE = gql `
       }
     }
   }
-`;
-export function useRewardExchangeList(props) {
-  var _a, _b, _c, _d, _e;
-  const [exchangeState, setExchangeState] = useReducer((state, next) => ({
-    ...state,
-    ...next,
-  }), {
-    selectedItem: undefined,
-    selectedStep: undefined,
-    redeemStage: "chooseReward",
-    amount: 0,
-    exchangeError: false,
-  });
-  const [open, setOpen] = useState(false);
-  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = useUserIdentity();
-  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = useMutation(EXCHANGE);
-  const { data, loading, refetch, errors: queryError, } = 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", exchangeError: false });
-    }
-    if (!!errors) {
-      setExchangeState({ exchangeError: true });
-    }
-  }, [exchangeResponse, errors]);
-  const canvasRef = useRef();
-  useEffect(() => {
-    if (!canvasRef.current)
-      return;
-    const canvas = canvasRef.current;
-    canvas.confetti =
-      canvas.confetti || confetti.create(canvas, { resize: true });
-    canvas.confetti();
-  }, [canvasRef.current]);
-  const { refresh } = useRefreshDispatcher();
-  async function exchangeReward() {
-    if (!selectedItem)
-      return;
-    let exchangeVariables = {
-      accountId: user === null || user === void 0 ? void 0 : user.accountId,
-      userId: user.id,
-    };
-    switch (selectedItem.ruleType) {
-      case "FIXED_GLOBAL_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
-        };
-        break;
-      case "STEPPED_FIXED_GLOBAL_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedStep.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedStep.globalRewardKey,
-        };
-        break;
-      case "VARIABLE_GLOBAL_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: amount,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
-          rewardInput: selectedStep.rewardInput,
-        };
-        break;
-      case "VARIABLE_CREDIT_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: amount,
-            unit: selectedItem.sourceUnit,
-          },
-          rewardInput: {
-            type: "CREDIT",
-            unit: selectedItem.destinationUnit,
-            assignedCredit: selectedStep.destinationValue,
-          },
-        };
-        break;
-      default:
-        exchangeVariables = {
-          ...exchangeVariables,
-          ...selectedStep.rewardInput,
-        };
-    }
-    await exchange({ exchangeRewardInput: exchangeVariables });
-    refresh();
-  }
-  const resetState = (refresh) => {
-    refresh && refetch();
-    setExchangeState({
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      exchangeError: false,
-      redeemStage: "chooseReward",
-    });
-  };
-  function setStage(stage) {
-    setExchangeState({ redeemStage: stage });
-  }
-  function copyFuelTankCode() {
-    var _a, _b;
-    navigator.clipboard.writeText((_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.fuelTankCode);
-    setOpen(true);
-    setTimeout(() => setOpen(false), 1000);
-  }
-  return {
-    states: {
-      content: {
-        text: props,
-      },
-      selectedItem,
-      redeemStage,
-      amount,
-      selectedStep,
-      exchangeError,
-      queryError: !!queryError,
-      loading: loading || exchangeLoading,
-      open,
-      noExchangeOptions: ((_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems.totalCount) === 0,
-    },
-    data: {
-      exchangeList: (_c = (_b = data === null || data === void 0 ? void 0 : data.viewer) === null || _b === void 0 ? void 0 : _b.visibleRewardExchangeItems) === null || _c === void 0 ? void 0 : _c.data,
-      fuelTankCode: (_e = (_d = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _d === void 0 ? void 0 : _d.reward) === null || _e === void 0 ? void 0 : _e.fuelTankCode,
-    },
-    callbacks: {
-      exchangeReward,
-      setExchangeState,
-      setStage,
-      resetState,
-      copyFuelTankCode,
-    },
-    refs: {
-      canvasRef,
-    },
-  };
-}
+`;
+export function useRewardExchangeList(props) {
+  var _a, _b, _c, _d, _e;
+  const [exchangeState, setExchangeState] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    selectedItem: undefined,
+    selectedStep: undefined,
+    redeemStage: "chooseReward",
+    amount: 0,
+    exchangeError: false,
+  });
+  const [open, setOpen] = useState(false);
+  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
+  const user = useUserIdentity();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = useMutation(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = 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", exchangeError: false });
+    }
+    if (!!errors) {
+      setExchangeState({ exchangeError: true });
+    }
+  }, [exchangeResponse, errors]);
+  const canvasRef = useRef();
+  useEffect(() => {
+    if (!canvasRef.current)
+      return;
+    const canvas = canvasRef.current;
+    canvas.confetti =
+      canvas.confetti || confetti.create(canvas, { resize: true });
+    canvas.confetti();
+  }, [canvasRef.current]);
+  const { refresh } = useRefreshDispatcher();
+  async function exchangeReward() {
+    if (!selectedItem)
+      return;
+    let exchangeVariables = {
+      accountId: user === null || user === void 0 ? void 0 : user.accountId,
+      userId: user.id,
+    };
+    switch (selectedItem.ruleType) {
+      case "FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedItem.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+        };
+        break;
+      case "STEPPED_FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedStep.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedStep.globalRewardKey,
+        };
+        break;
+      case "VARIABLE_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+          rewardInput: selectedStep.rewardInput,
+        };
+        break;
+      case "VARIABLE_CREDIT_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          rewardInput: {
+            type: "CREDIT",
+            unit: selectedItem.destinationUnit,
+            assignedCredit: selectedStep.destinationValue,
+          },
+        };
+        break;
+      default:
+        exchangeVariables = {
+          ...exchangeVariables,
+          ...selectedStep.rewardInput,
+        };
+    }
+    await exchange({ exchangeRewardInput: exchangeVariables });
+    refresh();
+  }
+  const resetState = (refresh) => {
+    refresh && refetch();
+    setExchangeState({
+      amount: 0,
+      selectedStep: undefined,
+      selectedItem: undefined,
+      exchangeError: false,
+      redeemStage: "chooseReward",
+    });
+  };
+  function setStage(stage) {
+    setExchangeState({ redeemStage: stage });
+  }
+  function copyFuelTankCode() {
+    var _a, _b;
+    navigator.clipboard.writeText((_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.fuelTankCode);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  }
+  return {
+    states: {
+      content: {
+        text: props,
+      },
+      selectedItem,
+      redeemStage,
+      amount,
+      selectedStep,
+      exchangeError,
+      queryError: !!queryError,
+      loading: loading || exchangeLoading,
+      open,
+      noExchangeOptions: ((_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems.totalCount) === 0,
+    },
+    data: {
+      exchangeList: (_c = (_b = data === null || data === void 0 ? void 0 : data.viewer) === null || _b === void 0 ? void 0 : _b.visibleRewardExchangeItems) === null || _c === void 0 ? void 0 : _c.data,
+      fuelTankCode: (_e = (_d = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _d === void 0 ? void 0 : _d.reward) === null || _e === void 0 ? void 0 : _e.fuelTankCode,
+    },
+    callbacks: {
+      exchangeReward,
+      setExchangeState,
+      setStage,
+      resetState,
+      copyFuelTankCode,
+    },
+    refs: {
+      canvasRef,
+    },
+  };
+}

package/dist/collection/components/sqm-rewards-table/RewardsTable.stories.js

@@ -1,122 +1,122 @@
-import { h } from "@stencil/core";
-import { GenericTableView } from "../../tables/GenericTableView";
-import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, RewardsCellFueltank, RewardsCellFueltankLong, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellPending, StatusCellPendingUnhandled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
-import scenario from "./rewards-table.feature";
-export default {
-  title: "Components/Rewards Table",
-  parameters: {
-    scenario,
-  },
-};
-const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
-const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
-const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    show: empty
-      ? "empty"
-      : loading
-        ? "loading"
-        : "rows",
-    namespace: "sqm-rewards-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: prev,
-      moreLabel: next,
-    },
-    hiddenColumns: hidden,
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: ["Rewards", "Status", "Source", "Date received"],
-    rows: rows,
-    emptyElement: emptyElement,
-    loadingElement: loadingElement,
-  },
-});
-const r_available = [
-  h(RewardsCellCreditFull, null),
-  h(StatusCellAvailable, null),
-  h(SourceCellReferral, null),
-  h(DateCell, null),
-];
-const r_expired = [
-  h(RewardsCellCreditPartial, null),
-  h(StatusCellAvailableExpiry, null),
-  h(SourceCellReferred, null),
-  h(DateCell, null),
-];
-const r_cancelled = [
-  h(RewardsCellCreditCancelled, null),
-  h(StatusCellCancelled, null),
-  h(SourceCellDeletedUser, null),
-  h(DateCell, null),
-];
-const r_redeemed = [
-  h(RewardsCellCreditRedeemed, null),
-  h(StatusCellRedeemed, null),
-  h(SourceCellManual, null),
-  h(DateCell, null),
-];
-const r_long = [
-  h(RewardsCellCreditLong, null),
-  h(StatusCellAvailableExpiry, null),
-  h(SourceCellReferred, null),
-  h(DateCell, null),
-];
-const r_fueltank = [
-  h(RewardsCellFueltank, null),
-  h(StatusCellPending, null),
-  h(SourceCellManual, null),
-  h(DateCell, null),
-];
-const r_fueltank_long = [
-  h(RewardsCellFueltankLong, null),
-  h(StatusCellPendingUnhandled, null),
-  h(SourceCellManual, null),
-  h(DateCell, null),
-];
-export const RewardsTable = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired]))));
-};
-export const RewardsTableSingle = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank]))));
-};
-export const RewardsTableLong = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank_long, r_long]))));
-};
-export const RewardsTableEmpty = () => {
-  return h(GenericTableView, Object.assign({}, rewardsTableProps([], true)));
-};
-export const RewardsTableLoading = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([], false, true))));
-};
-export const CustomButtonTextTable = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, "CUSTOM PREVIOUS TEXT", "CUSTOM NEXT TEXT"))));
-};
-export const ColumnsMobileHidden = () => {
-  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, undefined, undefined, "0,1,2,3"))));
-};
+import { h } from "@stencil/core";
+import { GenericTableView } from "../../tables/GenericTableView";
+import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, RewardsCellFueltank, RewardsCellFueltankLong, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellPending, StatusCellPendingUnhandled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
+import scenario from "./rewards-table.feature";
+export default {
+  title: "Components/Rewards Table",
+  parameters: {
+    scenario,
+  },
+};
+const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null)))));
+const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
+const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: empty
+      ? "empty"
+      : loading
+        ? "loading"
+        : "rows",
+    namespace: "sqm-rewards-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: prev,
+      moreLabel: next,
+    },
+    hiddenColumns: hidden,
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: rows,
+    emptyElement: emptyElement,
+    loadingElement: loadingElement,
+  },
+});
+const r_available = [
+  h(RewardsCellCreditFull, null),
+  h(StatusCellAvailable, null),
+  h(SourceCellReferral, null),
+  h(DateCell, null),
+];
+const r_expired = [
+  h(RewardsCellCreditPartial, null),
+  h(StatusCellAvailableExpiry, null),
+  h(SourceCellReferred, null),
+  h(DateCell, null),
+];
+const r_cancelled = [
+  h(RewardsCellCreditCancelled, null),
+  h(StatusCellCancelled, null),
+  h(SourceCellDeletedUser, null),
+  h(DateCell, null),
+];
+const r_redeemed = [
+  h(RewardsCellCreditRedeemed, null),
+  h(StatusCellRedeemed, null),
+  h(SourceCellManual, null),
+  h(DateCell, null),
+];
+const r_long = [
+  h(RewardsCellCreditLong, null),
+  h(StatusCellAvailableExpiry, null),
+  h(SourceCellReferred, null),
+  h(DateCell, null),
+];
+const r_fueltank = [
+  h(RewardsCellFueltank, null),
+  h(StatusCellPending, null),
+  h(SourceCellManual, null),
+  h(DateCell, null),
+];
+const r_fueltank_long = [
+  h(RewardsCellFueltankLong, null),
+  h(StatusCellPendingUnhandled, null),
+  h(SourceCellManual, null),
+  h(DateCell, null),
+];
+export const RewardsTable = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired]))));
+};
+export const RewardsTableSingle = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank]))));
+};
+export const RewardsTableLong = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank_long, r_long]))));
+};
+export const RewardsTableEmpty = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTableProps([], true)));
+};
+export const RewardsTableLoading = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([], false, true))));
+};
+export const CustomButtonTextTable = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, "CUSTOM PREVIOUS TEXT", "CUSTOM NEXT TEXT"))));
+};
+export const ColumnsMobileHidden = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, undefined, undefined, "0,1,2,3"))));
+};