@saasquatch/mint-components 1.5.0-7 → 1.5.0-70

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

@@ -0,0 +1,207 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Rewards Table Cell",
+};
+const rewardsData = {
+  id: "61c100117a82a376d8804166",
+  type: "CREDIT",
+  value: 19,
+  unit: "TESTUNIT",
+  name: null,
+  dateGiven: 1640038417468,
+  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 RewardsCellCreditFull = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points remaining" }));
+};
+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 remaining" }));
+};
+const empty = {
+  prettyAvailableValue: "0 Points",
+  prettyRedeemedCredit: "19 Points",
+  prettyRedeemedNumber: "19",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellCreditEmpty = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points remaining" }));
+};
+const singleRedeemed = {
+  prettyValue: "1 Points",
+  prettyValueNumber: "1",
+  prettyAvailableNumber: "1",
+  prettyAvailableValue: "0 Points",
+  prettyRedeemedCredit: "1 Points",
+  prettyRedeemedNumber: "1",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellSingleRedeemed = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
+};
+export const RewardsCellNonCredit = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData,
+      type: "FUELTANK",
+      prettyValue: "SaaSquatch Giftcard",
+    } }));
+};
+export const SourceCellText = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
+};
+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 EmptyCell = () => {
+  return h("sqm-rewards-table-date-cell", null);
+};

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

@@ -27,6 +27,27 @@ 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 RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL();
   setProgramId("sam-partner-test-2");
@@ -37,7 +58,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();
@@ -50,7 +74,61 @@ export const RewardsTableNoProgram = createHookStory(() => {
   };
   return (h("sqm-rewards-table", 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-date-cell.js

@@ -1,19 +1,20 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import { DateTime } from "luxon";
+import { luxonLocale } from "../../../utils/utils";
 import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
 export class RewardTableDateCell {
   constructor() {
     this.ignored = true;
+    this.locale = "en";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    var _a;
-    // needs hook to use locale
+    var _a, _b;
     const date = !this.date
       ? "-"
-      : (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED);
+      : (_b = (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(DateTime.DATE_MED);
     return h(TextSpanView, { type: "p" }, date);
   }
   static get is() { return "sqm-rewards-table-date-cell"; }
@@ -35,6 +36,24 @@ export class RewardTableDateCell {
       },
       "attribute": "date",
       "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 {

package/dist/collection/components/sqm-rewards-table/cells/{sqm-rewards-table-rewards-cell.js → sqm-rewards-table-reward-cell.js}

@@ -1,10 +1,10 @@
 import { Component, h, Prop } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
 export class RewardTableRewardsCell {
   // TODO: value function from portalv2
   render() {
+    intl.locale = this.locale;
     const style = {
       DetailsContainer: {
         width: "100%",
@@ -20,7 +20,7 @@ export class RewardTableRewardsCell {
         "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
-          cursor: `${this.hideDetails ? "default" : "pointer"}`,
+          cursor: "default",
         },
         "&::part(content)": {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
@@ -29,7 +29,7 @@ export class RewardTableRewardsCell {
           opacity: "1",
         },
         "&::part(summary-icon)": {
-          display: `${this.hideDetails ? "none" : "flex"}`,
+          display: "flex",
         },
       },
       BadgeContainer: {
@@ -44,81 +44,83 @@ export class RewardTableRewardsCell {
         paddingLeft: "var(--sl-spacing-xxx-small)",
       },
     };
-    jss.setup(preset());
-    const sheet = jss.createStyleSheet(style);
+    const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
-    function RewardValue({ reward }) {
+    const RewardValue = ({ reward }) => {
       var _a;
+      console.log(reward);
       const pimpedPrettyValue = reward.unit === "CENTS"
         ? reward.prettyValue.replace(/USD/gi, "$")
         : (_a = reward.prettyValue) !== null && _a !== void 0 ? _a : "-";
-      if (reward.type === "CREDIT") {
+      const singleReward = reward.prettyValueNumber === "1" && reward.prettyRedeemedNumber === "1";
+      if (reward.type === "CREDIT" && !singleReward) {
         const progress = Math.round(((parseFloat(reward.prettyValueNumber) -
           parseFloat(reward.prettyRedeemedNumber)) /
           parseFloat(reward.prettyValueNumber)) *
           100);
         const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
-          reward.statuses.includes("CANCELLED") ? (h("div", null,
-          reward.prettyRedeemedCredit,
-          " redeemed")) : (h("div", null,
-          reward.prettyAvailableValue,
-          " available"));
+          reward.statuses.includes("CANCELLED") ? (h("div", null, intl.formatMessage({
+          id: "redeemedText",
+          defaultMessage: this.redeemedText,
+        }, {
+          redeemedAmount: reward.prettyRedeemedCredit,
+        }))) : (h("div", null, intl.formatMessage({
+          id: "availableText",
+          defaultMessage: this.availableText,
+        }, {
+          availableAmount: reward.prettyAvailableValue,
+        })));
         const style = {
           Progress: {
-            background: "#e0e0e0",
-            borderRadius: "4px",
             height: "3px",
-            width: "80px",
-            marginTop: "6px",
-            marginBottom: "6px",
+            width: "150px",
+            margin: "var(--sl-spacing-xx-small) 0",
+            background: "var(--sl-color-neutral-200)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "#222222",
-              borderRadius: "4px",
+              background: "var(--sl-color-primary-300)",
+              borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
             },
           },
-          Ellipsis: {
-            position: "relative",
-            margin: "-8px",
-            bottom: "1px",
-            left: "8px",
+          Container: {
+            display: "inline-block",
+            verticalAlign: "top",
+            maxWidth: "100%",
+            maxHeight: "60px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          },
+          Text: {
+            fontSize: "var(--sl-font-size-medium)",
+            color: "var(--sl-color-gray-800)",
+          },
+          Subtext: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-neutral-500)",
           },
         };
-        jss.setup(preset());
-        const sheet = jss.createStyleSheet(style);
+        const sheet = createStyleSheet(style);
         const styleString = sheet.toString();
         return (h("div", null,
           h("style", { type: "text/css" }, styleString),
-          h("div", { style: {
-              display: "inline-block",
-              verticalAlign: "top",
-              maxWidth: "100%",
-              // maxHeight: "35px",
-              maxHeight: "60px",
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            } },
-            h("span", { style: { color: "#232323" } }, pimpedPrettyValue),
-            " ",
+          h("div", { class: sheet.classes.Container },
+            h("span", null, pimpedPrettyValue + " "),
             h("br", null),
             " ",
             h("div", { class: sheet.classes.Progress }),
-            progressBarSubtext)));
+            h("span", { class: sheet.classes.Subtext }, progressBarSubtext))));
       }
-      return h("span", { style: { color: "#232323" } }, pimpedPrettyValue);
-    }
+      return h("div", null, pimpedPrettyValue);
+    };
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("div", { slot: "summary", class: sheet.classes.DetailsContainer },
-        h(TextSpanView, { type: "p" },
-          h("span", { class: sheet.classes.BoldText },
-            h(RewardValue, { reward: this.reward }))))));
+      h(RewardValue, { reward: this.reward })));
   }
-  static get is() { return "sqm-rewards-table-rewards-cell"; }
+  static get is() { return "sqm-rewards-table-reward-cell"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "reward": {
@@ -140,12 +142,46 @@ export class RewardTableRewardsCell {
         "text": ""
       }
     },
-    "hideDetails": {
-      "type": "boolean",
+    "redeemedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "redeemed-text",
+      "reflect": false
+    },
+    "availableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "available-text",
+      "reflect": false
+    },
+    "locale": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -154,7 +190,7 @@ export class RewardTableRewardsCell {
         "tags": [],
         "text": ""
       },
-      "attribute": "hide-details",
+      "attribute": "locale",
       "reflect": false
     }
   }; }