@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -1,6 +1,7 @@
-import { useUserIdentity, useQuery, useMutation, } from "@saasquatch/component-boilerplate";
+import { useUserIdentity, useQuery, useMutation, useRefreshDispatcher, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-import { useEffect, useReducer, } from "@saasquatch/universal-hooks";
+import { useEffect, useReducer, useRef, useState, } from "@saasquatch/universal-hooks";
+import confetti from "canvas-confetti";
 const GET_EXCHANGE_LIST = gql `
   query getExchangeList {
     viewer {
@@ -12,7 +13,6 @@ const GET_EXCHANGE_LIST = gql `
             description
             imageUrl
             available
-            unavailableReason
             unavailableReasonCode
             ruleType
             sourceUnit
@@ -34,7 +34,9 @@ const GET_EXCHANGE_LIST = gql `
               destinationValue
               prettyDestinationValue
               available
+              globalRewardKey
               unavailableReasonCode
+              rewardInput
             }
           }
           totalCount
@@ -65,10 +67,11 @@ export function useRewardExchangeList(props) {
     amount: 0,
     exchangeError: false,
   });
+  const [open, setOpen] = useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = useUserIdentity();
-  const [exchange, { data: exchangeResponse, errors }] = useMutation(EXCHANGE);
-  const { data, loading, refetch } = useQuery(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  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) {
@@ -78,7 +81,18 @@ export function useRewardExchangeList(props) {
       setExchangeState({ exchangeError: true });
     }
   }, [exchangeResponse, errors]);
-  function exchangeReward() {
+  const canvasRef = useRef();
+  useEffect(() => {
+    if (!canvasRef.current)
+      return;
+    console.log("confetti!");
+    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 = {
@@ -96,6 +110,16 @@ export function useRewardExchangeList(props) {
           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,
@@ -104,9 +128,7 @@ export function useRewardExchangeList(props) {
             unit: selectedItem.sourceUnit,
           },
           globalRewardKey: selectedItem.globalRewardKey,
-          rewardInput: {
-            valueInCents: selectedStep.destinationValue,
-          },
+          rewardInput: selectedStep.rewardInput,
         };
         break;
       case "VARIABLE_CREDIT_REWARD":
@@ -126,14 +148,11 @@ export function useRewardExchangeList(props) {
       default:
         exchangeVariables = {
           ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
+          ...selectedStep.rewardInput,
         };
     }
-    exchange({ exchangeRewardInput: exchangeVariables });
+    await exchange({ exchangeRewardInput: exchangeVariables });
+    refresh();
   }
   const resetState = (refresh) => {
     refresh && refetch();
@@ -148,6 +167,12 @@ export function useRewardExchangeList(props) {
   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: {
@@ -158,7 +183,9 @@ export function useRewardExchangeList(props) {
       amount,
       selectedStep,
       exchangeError,
-      loading,
+      queryError: !!queryError,
+      loading: loading || exchangeLoading,
+      open,
     },
     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,
@@ -169,6 +196,10 @@ export function useRewardExchangeList(props) {
       setExchangeState,
       setStage,
       resetState,
+      copyFuelTankCode,
+    },
+    refs: {
+      canvasRef,
     },
   };
 }

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

@@ -0,0 +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/v1644000224/squatch-assets/empty_rewards.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: 899,
+    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"))));
+};

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

@@ -0,0 +1,249 @@
+import { h } from "@stencil/core";
+import scenario from "./rewards-table.feature";
+export default {
+  title: "Components/Rewards Table Cell",
+  parameters: {
+    scenario,
+  },
+};
+const rewardsData = {
+  id: "61c100117a82a376d8804166",
+  type: "CREDIT",
+  value: 19,
+  unit: "TESTUNIT",
+  name: null,
+  dateGiven: 1640038417468,
+  meta: { message: "***CUSTOMER NOTE MESSAGE***" },
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: null,
+  dateScheduledFor: null,
+  fuelTankCode: null,
+  fuelTankType: null,
+  currency: null,
+  prettyValue: "19 Points",
+  prettyValueNumber: "19",
+  prettyAvailableNumber: "19",
+  prettyRedeemedNumber: "0",
+  statuses: ["AVAILABLE"],
+  pendingReasons: null,
+  globalRewardKey: null,
+  rewardSource: "MANUAL",
+  prettyRedeemedCredit: "0 Points",
+  prettyAssignedCredit: "19 Points",
+  prettyAvailableValue: "19 Points",
+  exchangedRewardRedemptionTransaction: null,
+  referral: null,
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+};
+export const RewardsCellCreditSingle = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
+};
+export const RewardsCellCreditFull = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points available" }));
+};
+const partial = {
+  prettyAvailableValue: "10 Points",
+  prettyRedeemedCredit: "9 Points",
+  prettyRedeemedNumber: "9",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellCreditPartial = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points available" }));
+};
+export const RewardsCellCreditCancelled = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...cancelled }, redeemedText: "0 Points redeemed" }));
+};
+export const RewardsCellCreditExpired = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
+};
+const empty = {
+  prettyAvailableValue: "0 Points",
+  prettyAvailableNumber: "0",
+  prettyRedeemedCredit: "19 Points",
+  prettyRedeemedNumber: "19",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellCreditRedeemed = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points available" }));
+};
+const singleRedeemed = {
+  prettyValue: "1 Point",
+  prettyValueNumber: "1",
+};
+const longName = {
+  prettyValue: "19 Points with a really really super duper longest name ever in the world wide web",
+  prettyValueNumber: "19",
+};
+export const RewardsCellCreditLong = () => {
+  return (h("div", { style: { maxWidth: "222px" } },
+    h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web available" })));
+};
+export const RewardsCellNonCredit = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData,
+      type: "GIFTCARD",
+      prettyValue: "SaaSquatch Giftcard",
+    } }));
+};
+export const RewardsCellFueltank = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData,
+      type: "FUELTANK",
+      prettyValue: "Fueltank Reward",
+      fuelTankCode: "AFUELTANKCODE",
+    }, fueltankText: "Your code:" }));
+};
+export const RewardsCellFueltankLong = () => {
+  return (h("div", { style: { maxWidth: "222px" } },
+    h("sqm-rewards-table-reward-cell", { reward: {
+        ...rewardsData,
+        type: "FUELTANK",
+        prettyValue: "Long Fueltank Reward",
+        fuelTankCode: "AFUELTANKCODE123456789123456789123456789123456789",
+      }, fueltankText: "Your code:" })));
+};
+export const SourceCellManual = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
+};
+export const SourceCellProgram = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: {
+      ...rewardsData,
+      rewardSource: "AUTOMATED",
+      program: { name: "Klip Loyalty" },
+    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" }));
+};
+const exchange = {
+  exchangedRewardRedemptionTransaction: {
+    id: "61c100117a82a376d88041196",
+    creditRedeemed: 1,
+    prettyRedeemedCredit: "1 Money",
+    unit: "TESTUNIT",
+    dateRedeemed: 1640038417173,
+    redeemedRewards: null,
+    exchangedRewards: null,
+  },
+};
+export const SourceCellExchange = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...exchange }, rewardExchangeText: "Reward Exchange" }));
+};
+const johnDoe = {
+  firstName: "John",
+  lastName: "Doe",
+  imageUrl: null,
+};
+const anon = {
+  firstName: "",
+  lastName: "",
+  imageUrl: null,
+};
+const referral = (user = null) => {
+  return {
+    rewardSource: "FRIEND_SIGNUP",
+    referral: {
+      id: "123",
+      dateConverted: 1640038417173,
+      dateReferralStarted: 1640038417173,
+      dateReferralPaid: 1640038417173,
+      dateReferralEnded: null,
+      moderationStatus: null,
+      rewards: null,
+      referrerUser: user,
+      referredUser: user,
+    },
+  };
+};
+const referred = (user = null) => {
+  return {
+    rewardSource: "REFERRED",
+    referral: {
+      id: "123",
+      dateConverted: 1640038417173,
+      dateReferralStarted: 1640038417173,
+      dateReferralPaid: 1640038417173,
+      dateReferralEnded: null,
+      moderationStatus: null,
+      rewards: null,
+      referrerUser: user,
+      referredUser: user,
+    },
+  };
+};
+export const SourceCellReferral = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(johnDoe) }, referralText: "Referral to" }));
+};
+export const SourceCellReferred = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referred(johnDoe) }, referralText: "Referred by" }));
+};
+export const SourceCellAnonymousUser = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
+};
+export const SourceCellDeletedUser = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
+};
+export const StatusCellAvailable = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData }));
+};
+const expire = {
+  dateExpires: 1640038417468,
+};
+export const StatusCellAvailableExpiry = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: { ...rewardsData, ...expire }, expiryText: "Expires" }));
+};
+const redeemed = {
+  statuses: ["REDEEMED"],
+  dateRedeemed: 1640038417468,
+};
+export const StatusCellRedeemed = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Redeemed", reward: { ...rewardsData, ...redeemed } }));
+};
+const cancelled = {
+  statuses: ["CANCELLED"],
+  dateCancelled: 1640038417468,
+};
+export const StatusCellCancelled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: { ...rewardsData, ...cancelled } }));
+};
+const expired = {
+  statuses: ["EXPIRED"],
+  dateExpires: 1640038417468,
+};
+export const StatusCellExpired = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: { ...rewardsData, ...expired } }));
+};
+const pending = {
+  statuses: ["PENDING"],
+};
+const us_tax = {
+  pendingReasons: ["US_TAX"],
+};
+const scheduled = {
+  pendingReasons: ["SCHEDULED"],
+  dateScheduledFor: 1640038417468,
+};
+const unhandled = {
+  pendingReasons: ["UNHANDLED_ERROR"],
+};
+export const StatusCellPending = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
+};
+export const StatusCellPendingUsTax = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...us_tax } }));
+};
+export const StatusCellPendingScheduled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...scheduled } }));
+};
+export const StatusCellPendingUnhandled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...unhandled } }));
+};
+export const DateCell = () => {
+  return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+};
+export const CustomerNoteCell = () => {
+  return (h("sqm-rewards-table-customer-note-cell", { note: rewardsData.meta.message }));
+};
+export const EmptyCell = () => {
+  return h("sqm-rewards-table-date-cell", null);
+};

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

@@ -27,6 +27,42 @@ function setupGraphQL() {
   }, []);
   return { id, accountId };
 }
+function setupGraphQLKlip({ token, id }) {
+  const accountId = id;
+  // const programId = "klip-referral-program";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a74miwdpofztj",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: token,
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const RewardTableDemoHook = createHookStory(() => {
+  // setupGraphQL();
+  // setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", { "per-page": "4" },
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-date-column", null)));
+});
 export const RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL();
   setProgramId("sam-partner-test-2");
@@ -37,7 +73,10 @@ export const RewardsTableWithProgram = createHookStory(() => {
     ignored: true,
   };
   return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-date-column", null)));
 });
 export const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL();
@@ -49,5 +88,62 @@ export const RewardsTableNoProgram = createHookStory(() => {
     ignored: true,
   };
   return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-date-column", null)));
+});
+export const RewardsTableEn = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
+    id: "samenglish",
+  });
+  setProgramId(undefined);
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", { "per-page": "4" },
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-date-column", null)));
+});
+export const RewardsTableTr = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
+    id: "samturkey",
+  });
+  setProgramId(undefined);
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", { "per-page": "4", "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz Referans Yok" },
+    h("sqm-rewards-table-reward-column", { "column-title": "\u00D6d\u00FCller", "redeemed-text": "{redeemedAmount} kullan\u0131ld\u0131", "available-text": "{availableAmount} mevcut" }),
+    h("sqm-rewards-table-source-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131", "reward-exchange-text": "\u00D6d\u00FClleri Kulann\u0131n", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {Referans} REFERRED {Y\u00F6nlendiren} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Otomatik} other {}}" }),
+    h("sqm-rewards-table-status-column", { "column-title": "Statut", "status-text": "{status, select, AVAILABLE {Mevcut} PENDING {Bekleniyor} EXPIRED {Ge\u00E7mi\u015F} REDEEMED {Kullan\u0131lm\u0131\u015F} CANCELED {\u0130ptal Edildi} other {Kullan\u0131lamaz} }", "expiry-text": "Bitiyor " }),
+    h("sqm-rewards-table-date-column", { "column-title": "Tarih" })));
+});
+export const RewardsTableFr = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
+    id: "samfrench",
+  });
+  setProgramId(undefined);
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", { "per-page": "4", "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9compenses Maintenant" },
+    h("sqm-rewards-table-reward-column", { "column-title": "R\u00E9compenses", "redeemed-text": "{redeemedAmount} rachet\u00E9e", "available-text": "{availableAmount} disponible" }),
+    h("sqm-rewards-table-source-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9", "reward-exchange-text": "\u00C9change de R\u00E9compenses", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {R\u00E9f\u00E9rence \u00E0} REFERRED {R\u00E9f\u00E9renc\u00E9 par} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Automatique} other {}}" }),
+    h("sqm-rewards-table-status-column", { "column-title": "Statut", "status-text": "{status, select, AVAILABLE {Disponible} PENDING {Pendant} EXPIRED {Expir\u00E9} REDEEMED {Rachet\u00E9} CANCELED {Annul\u00E9} other {Indisponible} }", "expiry-text": "Expire sur " }),
+    h("sqm-rewards-table-date-column", { "column-title": "Date de R\u00E9ception" })));
 });

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-customer-note-cell.js

@@ -0,0 +1,58 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableCustomerNoteCell {
+  constructor() {
+    this.ignored = true;
+    this.locale = "en";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const note = this.note;
+    console.log("THIS FROM NOTE CELL", this);
+    return h(TextSpanView, { type: "p" }, note);
+  }
+  static get is() { return "sqm-rewards-table-customer-note-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "note": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "note",
+      "reflect": false
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "\"en\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}