@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

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

@@ -0,0 +1,183 @@
+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"],
+  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-rewards-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-rewards-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-rewards-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-rewards-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
+};
+export const RewardsCellNonCredit = () => {
+  return (h("sqm-rewards-table-rewards-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"],
+};
+export const StatusCellPending = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
+};
+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

@@ -37,7 +37,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 +52,8 @@ 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)));
 });

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

@@ -0,0 +1,42 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { DateTime } from "luxon";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableDateCell {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    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);
+  }
+  static get is() { return "sqm-rewards-table-date-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "date": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -0,0 +1,179 @@
+import { Component, h, Prop } from "@stencil/core";
+import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
+export class RewardTableRewardsCell {
+  // TODO: value function from portalv2
+  render() {
+    const style = {
+      DetailsContainer: {
+        width: "100%",
+        display: "flex",
+        "align-items": "center",
+        "justify-content": "space-between",
+        "margin-right": "var(--sl-spacing-small)",
+        "flex-wrap": "wrap",
+      },
+      Details: {
+        "padding-bottom": "var(--sl-spacing-small)",
+        "max-width": "500px",
+        "padding-right": "var(--sl-spacing-x-small)",
+        "&::part(header)": {
+          padding: "var(--sl-spacing-x-small)",
+          cursor: "default",
+        },
+        "&::part(content)": {
+          padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+        },
+        "&::part(base)": {
+          opacity: "1",
+        },
+        "&::part(summary-icon)": {
+          display: "flex",
+        },
+      },
+      BadgeContainer: {
+        "& > :not(:last-child)": {
+          "margin-right": "var(--sl-spacing-x-small)",
+        },
+      },
+      BoldText: {
+        "font-weight": "var(--sl-font-weight-semibold)",
+      },
+      StatusBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    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 : "-";
+      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, 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: {
+            height: "3px",
+            width: "150px",
+            margin: "var(--sl-spacing-xx-small) 0",
+            background: "var(--sl-color-neutral-200)",
+            "&:after": {
+              content: '""',
+              display: "block",
+              background: "var(--sl-color-primary-300)",
+              borderRadius: "100px",
+              width: `${progress}%`,
+              height: "100%",
+            },
+          },
+          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)",
+          },
+        };
+        const sheet = createStyleSheet(style);
+        const styleString = sheet.toString();
+        return (h("div", null,
+          h("style", { type: "text/css" }, styleString),
+          h("div", { class: sheet.classes.Container },
+            h("span", null, pimpedPrettyValue + " "),
+            h("br", null),
+            " ",
+            h("div", { class: sheet.classes.Progress }),
+            h("span", { class: sheet.classes.Subtext }, progressBarSubtext))));
+      }
+      return h("div", null, pimpedPrettyValue);
+    };
+    return (h("div", { style: { display: "contents" } },
+      h("style", { type: "text/css" }, styleString),
+      h(RewardValue, { reward: this.reward })));
+  }
+  static get is() { return "sqm-rewards-table-rewards-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "reward": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Reward",
+        "resolved": "Reward",
+        "references": {
+          "Reward": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "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
+    }
+  }; }
+}

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

@@ -0,0 +1,167 @@
+import { Component, h, Prop } from "@stencil/core";
+import { intl } from "../../../global/global";
+export class RewardTableSourceCell {
+  render() {
+    const RewardSource = ({ reward }) => {
+      return (h("span", null, intl.formatMessage({
+        id: "rewardSourceText",
+        defaultMessage: this.rewardSourceText,
+      }, {
+        rewardSource: reward.rewardSource,
+      })));
+    };
+    const SOURCE_COLUMN_LENGTH = 21;
+    const RewardExchangeBadge = ({ reward }) => {
+      var _a;
+      const rewardExchange = (h("div", null,
+        h("span", { style: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-neutral-500)",
+          } }, this.rewardExchangeText),
+        h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
+        _a.prettyRedeemedCredit,
+        " → ",
+        reward.prettyValue));
+      return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
+        .length +
+        reward.prettyValue.length <
+        SOURCE_COLUMN_LENGTH ? (rewardExchange) : (h("div", { style: {
+          display: "inline-block",
+          verticalAlign: "top",
+        } }, rewardExchange));
+    };
+    // TODO: user type
+    const getFullName = (user) => {
+      if (!user)
+        return this.deletedUserText;
+      if (!user.firstName && !user.lastName)
+        return this.anonymousUserText;
+      if (!user.firstName)
+        return `${user.lastName}`;
+      if (!user.lastName)
+        return `${user.firstName}`;
+      return `${user.firstName} ${user.lastName}`;
+    };
+    const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
+      this.reward.rewardSource === "REFERRED" ? (h("div", null,
+      h("div", { style: {
+          fontSize: "var(--sl-font-size-small)",
+          color: "var(--sl-color-neutral-500)",
+        } }, intl.formatMessage({
+        id: "referralText",
+        defaultMessage: this.referralText,
+      }, {
+        rewardSource: this.reward.rewardSource,
+      })),
+      h("div", null, getFullName(this.reward.referral.referredUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
+    return h(Source, null);
+  }
+  static get is() { return "sqm-rewards-table-source-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "reward": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Reward",
+        "resolved": "Reward",
+        "references": {
+          "Reward": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "deletedUserText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "deleted-user-text",
+      "reflect": false
+    },
+    "anonymousUserText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "anonymous-user-text",
+      "reflect": false
+    },
+    "rewardExchangeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reward-exchange-text",
+      "reflect": false
+    },
+    "referralText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "referral-text",
+      "reflect": false
+    },
+    "rewardSourceText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reward-source-text",
+      "reflect": false
+    }
+  }; }
+}