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

package/dist/esm/sqm-referral-table_11.entry.js

@@ -0,0 +1,496 @@
+import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-17b4da69.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+import { i as intl } from './global-c2179248.js';
+import './use-callback-d8ef4b5d.js';
+import { k } from './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { G as GenericTableView } from './GenericTableView-5badbcf0.js';
+import { a as useRequestRerender } from './re-render-43311710.js';
+import './useChildElements-0146a8bd.js';
+import { u as useReferralTable } from './useReferralTable-596519fc.js';
+import { l as luxon } from './luxon-5fa22651.js';
+import { l as luxonLocale } from './utils-1d345130.js';
+import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { P as PendingNoUnpend, A as AvailableNoExpiry, C as Cancelled } from './ReferralTableRewardsCell.stories-1b3c0dcf.js';
+
+const ReferralTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @uiName Number of referrals per page */
+    this.perPage = 4;
+    /** @uiName Show column labels */
+    this.showLabels = true;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /** @uiName Show Referred by user in table  */
+    this.showReferrer = false;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 634;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
+    /** @uiName Empty State Image Link  */
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png";
+    /** @uiName Empty State Title  */
+    this.emptyStateHeader = "View your referral details";
+    /** @uiName Empty State Text  */
+    this.emptyStateText = "Track the status of your referrals and rewards earned by referring friends";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = (h$1(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
+    const loading = h$1(LoadingSlot, null);
+    const { states, data, callbacks, elements } = k()
+      ? useReferraltableDemo(this)
+      : useReferralTable(this, empty, loading);
+    console.log("elemente", elements);
+    return (h$1(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+};
+function LoadingSlot() {
+  return (h$1("slot", { name: "loading" }, h$1(LoadingRow, null), h$1(LoadingRow, null), h$1(LoadingRow, null), h$1(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (h$1("sqm-table-row", null, h$1("sqm-table-cell", { colspan: 5 }, h$1("sl-skeleton", null))));
+}
+function useReferraltableDemo(props) {
+  const demoProps = cjs({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      emptyElement: (h$1(EmptySlot, { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", emptyStateHeader: "View your referral details", emptyStateText: "Track the status of your referrals and rewards earned by referring\r\n\t\tfriends" })),
+      loadingElement: h$1(LoadingSlot, null),
+      columns: [
+        h$1("div", null, "User"),
+        h$1("div", null, "Referral Status"),
+        h$1("div", null, "Rewards"),
+      ],
+      rows: [
+        [
+          h$1("sqm-referral-table-user-cell", { name: "Joe Smith" }),
+          h$1("sqm-referral-table-status-cell", { statusText: "Completed", converted: true }),
+          h$1(PendingNoUnpend, null),
+        ],
+        [
+          h$1("sqm-referral-table-user-cell", { name: "Bob Williams" }),
+          h$1("sqm-referral-table-status-cell", { statusText: "In Progress", converted: false }),
+          h$1(AvailableNoExpiry, null),
+        ],
+        [
+          h$1("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+          h$1("sqm-referral-table-status-cell", { statusText: "Completed", converted: true }),
+          h$1(Cancelled, null),
+        ],
+      ],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  console.log("PROPS", demoProps);
+  return demoProps;
+}
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
+  return (h$1("div", { slot: "empty", style: { display: "contents" } }, h$1("sqm-table-row", null, h$1("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, h$1("sqm-portal-container", { padding: "xxxx-large", gap: "medium" }, h$1("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }), h$1("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" }, h$1("sqm-text", { slot: "label" }, h$1("h3", null, emptyStateHeader)), h$1("sqm-text", { slot: "content" }, emptyStateText)))))));
+}
+
+const ReferralTableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h$1("div", { innerHTML: this.innerTemplate });
+  }
+};
+
+const ReferralTableGenericColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    h(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(_) {
+    // this is insecure, <script> tags can be added
+    return (h$1("sqm-referral-table-cell", { "inner-template": getElement(this).innerHTML }));
+  }
+  async renderLabel() {
+    return Promise.resolve(this.columnTitle);
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return (h$1(Host, { style: { display: "none" } }, h$1("slot", null)));
+  }
+};
+
+const ReferralTableDateCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    this.locale = "en";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    const date = !this.date
+      ? "-"
+      : (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale)).toLocaleString(luxon.DateTime.DATE_MED);
+    return date;
+  }
+};
+
+const ReferralTableDateColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Date Column Title
+     */
+    this.columnTitle = "Date converted";
+    /**
+     * @uiName Date Displayed
+     * @uiType string
+     * @uiEnum ["dateConverted",
+     * "dateReferralStarted",
+     * "dateFraudChecksCompleted",
+     * "dateModerated",
+     * "dateModified",
+     * "dateReferralEnded",
+     * "dateReferralPaid",
+     * "dateUserModified"]
+     */
+    this.dateShown = "dateConverted";
+    h(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data, locale) {
+    // TODO - Validate `dateShown` against a set of known values
+    console.log("date column - referral", { locale });
+    return (h$1("sqm-referral-table-date-cell", { date: data[this.dateShown], locale: locale }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.dateShown, this.columnTitle]);
+    return h$1(Host, { style: { display: "none" } });
+  }
+};
+
+const ReferralTableRewardsCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.locale = "en";
+  }
+  render() {
+    intl.locale = this.locale;
+    const style = {
+      "@keyframes slideRight": {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      },
+      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: `${this.hideDetails ? "default" : "pointer"}`,
+        },
+        "&::part(content)": {
+          padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+        },
+        "&::part(base)": {
+          opacity: "1",
+        },
+        "&::part(summary-icon)": {
+          display: `${this.hideDetails ? "none" : "flex"}`,
+        },
+        "&::part(summary-icon[open])": {
+          transform: "rotate(-90deg)",
+          background: "red",
+        },
+      },
+      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)",
+      },
+      RedeemBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          background: "var(--sl-color-blue-600)",
+        },
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    const getState = (states) => {
+      const possibleStates = [
+        "REDEEMED",
+        "CANCELLED",
+        "EXPIRED",
+        "PENDING",
+        "AVAILABLE",
+      ];
+      if (states.length === 1)
+        return states[0];
+      return possibleStates.find((state) => states.includes(state) && state);
+    };
+    const getSLBadgeType = (state) => {
+      switch (state) {
+        case "REDEEMED":
+          return "primary";
+        case "EXPIRED":
+          return "danger";
+        case "CANCELLED":
+          return "danger";
+        case "PENDING":
+          return "warning";
+        case "AVAILABLE":
+          return "success";
+      }
+    };
+    const getTimeDiff = (endTime) => {
+      // Current implementation only calculates the difference from current time
+      return luxon.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 = 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$1("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h$1("style", { type: "text/css" }, styleString), h$1("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h$1(TextSpanView, { type: "p" }, h$1("span", { class: sheet.classes.BoldText }, reward.prettyValue)), h$1("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h$1("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$1("sl-badge", { class: slBadgeType === "primary"
+          ? sheet.classes.RedeemBadge
+          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (h$1("sl-badge", { class: slBadgeType === "primary"
+          ? sheet.classes.RedeemBadge
+          : sheet.classes.StatusBadge, type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), h$1("div", null, reward.dateGiven && (h$1("div", null, h$1(TextSpanView, { type: "p" }, this.rewardReceivedText, " ", h$1("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateGiven)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), state === "EXPIRED" && reward.dateExpires && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateExpires)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), state === "CANCELLED" && reward.dateCancelled && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateCancelled)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), state === "PENDING" && reward.dateScheduledFor && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateScheduledFor)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), " ", state === "AVAILABLE" && reward.dateExpires && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateExpires)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), reward.fuelTankCode && (h$1("div", null, this.fuelTankText, " ", h$1("span", { class: sheet.classes.BoldText }, reward.fuelTankCode))))));
+    });
+  }
+};
+
+const ReferralTableRewardsColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Reward column title
+     */
+    this.columnTitle = "Rewards";
+    /**
+     * @uiName Reward Status Text
+     */
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    /**
+     * @uiName Reward Status Long Text
+     */
+    this.statusLongText = "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }";
+    /**
+     * @uiName Fuel Tank Code Text
+     */
+    this.fuelTankText = "Your code is";
+    /**
+     * @uiName Reward Received Text
+     */
+    this.rewardReceivedText = "Reward received on";
+    /**
+     * @uiName Reward Expiring Text
+     */
+    this.expiringText = "Expiring in";
+    /**
+     * @uiName Reward Pending Text
+     */
+    this.pendingForText = "{status} for {date}";
+    /**
+     * @uiName Hide dropdown details of reward
+     */
+    this.hideDetails = false;
+    h(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data, locale) {
+    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
+    return (h$1("sqm-referral-table-rewards-cell", { rewards: data.rewards, statusText: this.statusText, statusLongText: this.statusLongText, fuelTankText: this.fuelTankText, rewardReceivedText: this.rewardReceivedText, expiringText: this.expiringText, pendingForText: this.pendingForText, hideDetails: this.hideDetails, locale: locale }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h$1(Host, { style: { display: "none" } });
+  }
+};
+
+const ReferralTableStatusCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const style = {
+      Badge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+        },
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    return (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-badge", { pill: true, type: this.converted ? "success" : "warning", class: sheet.classes.Badge }, this.statusText)));
+  }
+};
+
+const ReferralTableStatusColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Column Title
+     */
+    this.columnTitle = "Status";
+    /**
+     * @uiName Converted Status Text
+     */
+    this.convertedStatusText = "Converted";
+    /**
+     * @uiName In Progress Status Text
+     */
+    this.inProgressStatusText = "In Progress";
+    h(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    // TODO: Make ICU and more complete
+    const statusText = data.dateConverted
+      ? this.convertedStatusText
+      : this.inProgressStatusText;
+    return (h$1("sqm-referral-table-status-cell", { "status-text": statusText, converted: data.dateConverted ? true : false }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h$1(Host, { style: { display: "none" } });
+  }
+};
+
+const ReferralTableUserCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return this.name;
+  }
+};
+
+const ReferralTableUserColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName User Column Title
+     */
+    this.columnTitle = "Customer";
+    /**
+     * @uiName Name displayed for anonymous users
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * @uiName Name displayed for deleted users
+     */
+    this.deletedUser = "Deleted User";
+    h(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    var _a, _b, _c, _d;
+    let name;
+    if (!(data === null || data === void 0 ? void 0 : data.referredUser)) {
+      name = this.deletedUser;
+    }
+    else if (!((_a = data === null || data === void 0 ? void 0 : data.referredUser) === null || _a === void 0 ? void 0 : _a.firstName) &&
+      !((_b = data === null || data === void 0 ? void 0 : data.referredUser) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      name = this.anonymousUser;
+    }
+    else {
+      name = `${(_c = data === null || data === void 0 ? void 0 : data.referredUser) === null || _c === void 0 ? void 0 : _c.firstName} ${(_d = data === null || data === void 0 ? void 0 : data.referredUser) === null || _d === void 0 ? void 0 : _d.lastName}`;
+    }
+    return (h$1("sqm-referral-table-user-cell", { name: name }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([
+      this.deletedUser,
+      this.anonymousUser,
+      this.columnTitle,
+    ]);
+    return h$1(Host, { style: { display: "none" } });
+  }
+};
+
+export { ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableGenericColumn as sqm_referral_table_column, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableDateColumn as sqm_referral_table_date_column, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableRewardsColumn as sqm_referral_table_rewards_column, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableStatusColumn as sqm_referral_table_status_column, ReferralTableUserCell as sqm_referral_table_user_cell, ReferralTableUserColumn as sqm_referral_table_user_column };

package/dist/esm/sqm-refresh-button.entry.js

@@ -0,0 +1,50 @@
+import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
+import { m as h$1 } from './stencil-hooks.module-2f159754.js';
+import './use-callback-d8ef4b5d.js';
+import { k } from './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
+import { g as getProps } from './utils-1d345130.js';
+
+function RefreshButtonView(props, children) {
+  return props.hide ? (h(Host, { style: { display: "none" } })) : (h(Host, null,
+    h("style", { type: "text/css" }, `:host{display:inline-block}`),
+    h("sl-button", { loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}-refresh-base` },
+      !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon, exportparts: "icon" })),
+      !props.hidetext && children)));
+}
+
+const RefreshButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Icon to show in the slot
+     */
+    this.icon = "arrow-clockwise";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = k()
+      ? useDemoRefereshButton(thisProps)
+      : useRefreshButton(thisProps);
+    return (h(RefreshButtonView, Object.assign({}, props), h("slot", null)));
+  }
+};
+function useDemoRefereshButton({ icon, }) {
+  return {
+    onClick: () => { },
+    icon,
+  };
+}
+function useRefreshButton({ icon }) {
+  //   const { refresh } = useRefreshDispatcher();
+  return {
+    disabled: false,
+    hide: false,
+    // onClick: refresh,
+    icon,
+  };
+}
+
+export { RefreshButton as sqm_refresh_button };