@saasquatch/mint-components 1.5.0-8 → 1.5.0-83

package/dist/collection/components/sqm-referral-table/UseReferralTable.stories.js

@@ -0,0 +1,119 @@
+import { setProgramId } from "@saasquatch/component-boilerplate";
+import { setUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useReferralTable",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  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 ReferralTable = createHookStory(() => {
+  setupGraphQL();
+  setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", null,
+    h("sqm-referral-table-user-column", null),
+    h("sqm-referral-table-status-column", null),
+    h("sqm-referral-table-date-column", null),
+    h("sqm-referral-table-rewards-column", null)));
+});
+export const ReferralTableEn = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
+    id: "samenglish",
+  });
+  setProgramId("klip-referral-program");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "per-page": "4" },
+    h("sqm-referral-table-user-column", { "column-title": "User" }),
+    h("sqm-referral-table-status-column", { "column-title": "Referral Status" }),
+    h("sqm-referral-table-rewards-column", null),
+    h("sqm-referral-table-date-column", { "column-title": "Date Referred", "date-shown": "dateReferralStarted" })));
+});
+export const ReferralTableTr = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
+    id: "samturkey",
+  });
+  setProgramId("klip-referral-program");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz \u00D6d\u00FCl Yok", "per-page": "4" },
+    h("sqm-referral-table-user-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131" }),
+    h("sqm-referral-table-status-column", { "column-title": "Durumu", "converted-status-text": "D\u00F6n\u00FC\u015Ft\u00FCr", "in-progress-status-text": "Devam etmekte" }),
+    h("sqm-referral-table-rewards-column", { "column-title": "\u00D6d\u00FCller", "status-text": "{status, select, AVAILABLE {Mevcut} CANCELLED {\u0130ptal edildi} PENDING {Bekliyor} EXPIRED {S\u00FCresi doldu} REDEEMED {Kullan\u0131ld\u0131} other {M\u00FCsait de\u011Fil} }", "status-long-text": "{status, select, AVAILABLE {\u00D6d\u00FCl s\u00FCresi doluyor} CANCELLED {\u00D6d\u00FCl iptal edildi} PENDING {\u00FCzerinde mevcut} EXPIRED {\u00D6d\u00FCl\u00FCn s\u00FCresi doldu} other {M\u00FCsait de\u011Fil} }", "reward-received-text": "\u00D6d\u00FCl \u015Fu tarihte al\u0131nd\u0131:" }),
+    h("sqm-referral-table-date-column", { "column-title": "Tarih", "date-shown": "dateReferralStarted" })));
+});
+export const ReferralTableFr = createHookStory(() => {
+  setupGraphQLKlip({
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
+    id: "samfrench",
+  });
+  setProgramId("klip-referral-program");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9f\u00E9rence Maintenant", "per-page": "4" },
+    h("sqm-referral-table-user-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9" }),
+    h("sqm-referral-table-status-column", { "column-title": "Statut de Parrainage", "converted-status-text": "Converti", "in-progress-status-text": "En cours" }),
+    h("sqm-referral-table-rewards-column", { "column-title": "R\u00E9compenses", "status-text": "{status, select, AVAILABLE {Disponible} CANCELLED {Annul\u00E9} PENDING {En attente} EXPIRED {Expir\u00E9} REDEEMED {Rachet\u00E9} other {Indisponible} }", "status-long-text": "{status, select, AVAILABLE {R\u00E9compense expirant sur} CANCELLED {R\u00E9compense annul\u00E9e sur} PENDING {Disponible sur} EXPIRED {R\u00E9compense expir\u00E9e sur} other {Indisponible} }", "reward-received-text": "R\u00E9compense re\u00E7ue" }),
+    h("sqm-referral-table-date-column", { "column-title": "Date de R\u00E9f\u00E9rence", "date-shown": "dateReferralStarted" })));
+});

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-date-cell.js

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

@@ -1,11 +1,20 @@
 import { Component, h, Prop } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
 import { DateTime } from "luxon";
 import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { createStyleSheet } from "../../../styling/JSS";
+import { intl } from "../../../global/global";
+import { luxonLocale } from "../../../utils/utils";
 export class ReferralTableRewardsCell {
+  constructor() {
+    this.locale = "en";
+  }
   render() {
+    intl.locale = this.locale;
     const style = {
+      "@keyframes slideRight": {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      },
       DetailsContainer: {
         width: "100%",
         display: "flex",
@@ -17,7 +26,7 @@ export class ReferralTableRewardsCell {
       Details: {
         "padding-bottom": "var(--sl-spacing-small)",
         "max-width": "500px",
-        "padding-right": "var(--sl-spacing-x-small)",
+        // "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
           cursor: `${this.hideDetails ? "default" : "pointer"}`,
@@ -31,6 +40,10 @@ export class ReferralTableRewardsCell {
         "&::part(summary-icon)": {
           display: `${this.hideDetails ? "none" : "flex"}`,
         },
+        "&::part(summary-icon[open])": {
+          transform: "rotate(-90deg)",
+          background: "red",
+        },
       },
       BadgeContainer: {
         "& > :not(:last-child)": {
@@ -43,9 +56,14 @@ export class ReferralTableRewardsCell {
       StatusBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
       },
+      RedeemBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          background: "var(--sl-color-blue-600)",
+        },
+      },
     };
-    jss.setup(preset());
-    const sheet = jss.createStyleSheet(style);
+    const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
     const getState = (states) => {
       const possibleStates = [
@@ -73,57 +91,90 @@ export class ReferralTableRewardsCell {
           return "success";
       }
     };
-    const toTitleCase = (state) => {
-      return state[0].toUpperCase() + state.slice(1).toLowerCase();
-    };
     const getTimeDiff = (endTime) => {
       // Current implementation only calculates the difference from current time
-      return DateTime.fromMillis(endTime).toRelative().replace("in", "").trim();
+      return DateTime.fromMillis(endTime)
+        .setLocale(luxonLocale(this.locale))
+        .toRelative()
+        .replace("in", "")
+        .trim();
     };
     return this.rewards.map((reward) => {
       const state = getState(reward.statuses);
       const slBadgeType = getSLBadgeType(state);
-      const badgeText = toTitleCase(state);
+      const badgeText = intl.formatMessage({ id: "statusShortMessage", defaultMessage: this.statusText }, {
+        status: state,
+      });
+      const statusText = intl.formatMessage({
+        id: "statusLongMessage",
+        defaultMessage: this.statusLongText,
+      }, {
+        status: state,
+      });
+      const rid = Math.random().toString(36).slice(2);
       return (h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails },
         h("style", { type: "text/css" }, styleString),
         h("div", { slot: "summary", class: sheet.classes.DetailsContainer },
           h(TextSpanView, { type: "p" },
             h("span", { class: sheet.classes.BoldText }, reward.prettyValue)),
           h("div", { class: sheet.classes.BadgeContainer },
-            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: sheet.classes.StatusBadge, type: slBadgeType, pill: true }, `${badgeText} for ${getTimeDiff(reward.dateScheduledFor)}`)) : (h("sl-badge", { class: sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
-            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: sheet.classes.StatusBadge, type: "info", pill: true }, `Expiring in ${getTimeDiff(reward.dateExpires)}`)))),
+            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
+              id: "pendingForText",
+              defaultMessage: this.pendingForText,
+            }, {
+              status: badgeText,
+              date: getTimeDiff(reward.dateScheduledFor),
+            }))) : (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
+            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: "info", pill: true },
+              this.expiringText,
+              ` ${getTimeDiff(reward.dateExpires)}`)))),
         h("div", null,
           reward.dateGiven && (h("div", null,
             h(TextSpanView, { type: "p" },
-              "Reward received on",
+              this.rewardReceivedText,
               " ",
-              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateGiven).toLocaleString(DateTime.DATE_MED))))),
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateGiven)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
           state === "EXPIRED" && reward.dateExpires && (h("div", null,
             h(TextSpanView, { type: "p" },
-              "Reward expired on",
+              statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires).toLocaleString(DateTime.DATE_MED))))),
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
           state === "CANCELLED" && reward.dateCancelled && (h("div", null,
             h(TextSpanView, { type: "p" },
-              "Reward cancelled on",
+              statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateCancelled).toLocaleString(DateTime.DATE_MED))))),
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateCancelled)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
           state === "PENDING" && reward.dateScheduledFor && (h("div", null,
             h(TextSpanView, { type: "p" },
-              "Available on",
+              statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateScheduledFor).toLocaleString(DateTime.DATE_MED))))),
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateScheduledFor)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
           " ",
           state === "AVAILABLE" && reward.dateExpires && (h("div", null,
             h(TextSpanView, { type: "p" },
-              "Reward expiring on",
+              statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires).toLocaleString(DateTime.DATE_MED))))),
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires)
+                .setLocale(luxonLocale(this.locale))
+                .toLocaleString(DateTime.DATE_MED))))),
           reward.fuelTankCode && (h("div", null,
-            h(TextSpanView, { type: "p" },
-              "Your code is",
-              " ",
-              h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode)))))));
+            this.fuelTankText,
+            " ",
+            h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode))))));
     });
   }
   static get is() { return "sqm-referral-table-rewards-cell"; }
@@ -164,6 +215,126 @@ export class ReferralTableRewardsCell {
       },
       "attribute": "hide-details",
       "reflect": false
+    },
+    "statusText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status-text",
+      "reflect": false
+    },
+    "statusLongText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status-long-text",
+      "reflect": false
+    },
+    "fuelTankText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "fuel-tank-text",
+      "reflect": false
+    },
+    "rewardReceivedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reward-received-text",
+      "reflect": false
+    },
+    "expiringText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expiring-text",
+      "reflect": false
+    },
+    "pendingForText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-for-text",
+      "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\""
     }
   }; }
 }

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-status-cell.js

@@ -1,7 +1,20 @@
 import { Component, h, Prop } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
 export class ReferralTableStatusCell {
   render() {
-    return (h("sl-badge", { type: this.converted ? "success" : "warning", pill: true }, this.statusText));
+    const style = {
+      Badge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+        },
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    return (h("div", null,
+      h("style", { type: "text/css" }, styleString),
+      h("sl-badge", { pill: true, type: this.converted ? "success" : "warning", class: sheet.classes.Badge }, this.statusText)));
   }
   static get is() { return "sqm-referral-table-status-cell"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-user-cell.js

@@ -1,8 +1,7 @@
-import { Component, h, Prop } from "@stencil/core";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { Component, Prop } from "@stencil/core";
 export class ReferralTableUserCell {
   render() {
-    return h(TextSpanView, { type: "p" }, this.name);
+    return this.name;
   }
   static get is() { return "sqm-referral-table-user-cell"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -9,7 +9,7 @@ export class ReferralTableDateColumn {
     /**
      * @uiName Date Column Title
      */
-    this.columnTitle = "Date Converted";
+    this.columnTitle = "Date converted";
     /**
      * @uiName Date Displayed
      * @uiType string
@@ -26,9 +26,10 @@ export class ReferralTableDateColumn {
     withHooks(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     // TODO - Validate `dateShown` against a set of known values
-    return (h("sqm-referral-table-date-cell", { date: data[this.dateShown] }));
+    console.log("date column - referral", { locale });
+    return (h("sqm-referral-table-date-cell", { date: data[this.dateShown], locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -59,7 +60,7 @@ export class ReferralTableDateColumn {
       },
       "attribute": "column-title",
       "reflect": false,
-      "defaultValue": "\"Date Converted\""
+      "defaultValue": "\"Date converted\""
     },
     "dateShown": {
       "type": "string",
@@ -97,10 +98,13 @@ export class ReferralTableDateColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Referral) => Promise<any>",
+        "signature": "(data: Referral, locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {