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

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -10,16 +10,20 @@ export class RewardTableStatusColumn {
      * @uiName Column Title
      */
     this.columnTitle = "Status";
+    /**
+     * @uiName Reward Status Text
+     */
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
     /**
      * @uiName Expired Status Text
      */
-    this.statusText = "{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    this.expiryText = "Expires on ";
     withHooks(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     const rewardData = data === null || data === void 0 ? void 0 : data[0];
-    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData }));
+    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData, expiryText: this.expiryText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -64,23 +68,47 @@ export class RewardTableStatusColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Expired Status Text",
+            "text": "Reward Status Text",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "status-text",
       "reflect": false,
-      "defaultValue": "\"{status, select, AVAILABLE {Available} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\""
+      "defaultValue": "\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\""
+    },
+    "expiryText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Expired Status Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "expiry-text",
+      "reflect": false,
+      "defaultValue": "\"Expires on \""
     }
   }; }
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward) => Promise<any>",
+        "signature": "(data: Reward[], locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {

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

@@ -3,8 +3,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
-import { EmptySlot, LoadingSlot, EmptySkeleton, LoadingSkeleton } from "../../tables/TableSlots";
-import { useRewardsTable, CSS_NAMESPACE } from "./useRewardsTable";
+import { CSS_NAMESPACE, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Rewards Table
  */
@@ -18,13 +17,23 @@ export class RewardsTable {
     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 = 599;
+    /** @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_4_1.png";
+    /** @uiName Empty State Title  */
+    this.emptyStateHeader = "View your rewards";
+    /** @uiName Empty State Text  */
+    this.emptyStateText = "See all the rewards you have earned from referring friends and completing tasks";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, { label: "No Rewards Yet" });
+    const empty = (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useRewardsTableDemo(this)
@@ -138,33 +147,138 @@ export class RewardsTable {
       "reflect": false,
       "defaultValue": "\"Next\""
     },
-    "showReferrer": {
-      "type": "boolean",
+    "hiddenColumns": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hidden-columns",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Show Referred by user in table",
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "sm-breakpoint",
+      "reflect": false,
+      "defaultValue": "599"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "md-breakpoint",
+      "reflect": false,
+      "defaultValue": "899"
+    },
+    "emptyStateImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image Link",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-referrer",
+      "attribute": "empty-state-image",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png\""
+    },
+    "emptyStateHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header",
+      "reflect": false,
+      "defaultValue": "\"View your rewards\""
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false,
+      "defaultValue": "\"See all the rewards you have earned from referring friends and completing tasks\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<GenericTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -191,6 +305,18 @@ export class RewardsTable {
     }
   }; }
 }
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
+}
 function useRewardsTableDemo(props) {
   return deepmerge({
     states: {
@@ -212,11 +338,27 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: h(EmptySkeleton, { label: "No Rewards Yet" }),
-      loadingElement: h(LoadingSkeleton, null),
+      emptyElement: (h(EmptySlot, { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateHeader: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
+      loadingElement: h(LoadingSlot, null),
       // TODO: This should be smarter
-      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+      columns: [
+        "Reward",
+        "Source",
+        "Status",
+        "Date recieved",
+      ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
+  return (h("div", { slot: "empty", style: { display: "contents" } },
+    h("sqm-table-row", null,
+      h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
+        h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+          h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }),
+          h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+            h("sqm-text", { slot: "label" },
+              h("h3", null, emptyStateHeader)),
+            h("sqm-text", { slot: "content" }, emptyStateText)))))));
+}

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -1,15 +1,17 @@
-import { usePaginatedQuery, useProgramId, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useLocale, usePaginatedQuery, useProgramId, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import gql from "graphql-tag";
+import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
+import { generateUserError } from "../sqm-referral-table/useReferralTable";
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `
   query getRewards(
     $limit: Int!
     $offset: Int!
     $rewardFilter: RewardFilterInput
+    $locale: RSLocale
   ) {
     viewer {
       ... on User {
@@ -31,25 +33,32 @@ const GET_REWARDS = gql `
             fuelTankCode
             fuelTankType
             currency
-            prettyValue
-            prettyValueNumber: prettyValue(formatType: NUMBER_FORMATTED)
+            prettyValue(locale: $locale)
+            prettyValueNumber: prettyValue(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
             prettyAvailableNumber: prettyAvailableValue(
               formatType: NUMBER_FORMATTED
+              locale: $locale
             )
             prettyRedeemedNumber: prettyRedeemedCredit(
               formatType: NUMBER_FORMATTED
+              locale: $locale
             )
+            programId
             statuses
+            pendingReasons
             globalRewardKey
             programRewardKey
             rewardSource
-            prettyRedeemedCredit
-            prettyAssignedCredit
-            prettyAvailableValue
+            prettyRedeemedCredit(locale: $locale)
+            prettyAssignedCredit(locale: $locale)
+            prettyAvailableValue(locale: $locale)
             exchangedRewardRedemptionTransaction {
               id
               creditRedeemed
-              prettyRedeemedCredit
+              prettyRedeemedCredit(locale: $locale)
               unit
               dateRedeemed
             }
@@ -70,7 +79,7 @@ const GET_REWARDS = gql `
               data {
                 exchangedRewards {
                   data {
-                    prettyValue
+                    prettyValue(locale: $locale)
                     type
                     fuelTankCode
                     globalRewardKey
@@ -88,6 +97,7 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
   var _a, _b;
   const user = useUserIdentity();
   const programIdContext = useProgramId();
+  const locale = useLocale();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   const rewardFilter = {
@@ -114,6 +124,7 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     offset: 0,
   }, {
     rewardFilter,
+    locale,
   }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const tick = useRerenderListener();
   const components = useChildElements();
@@ -125,8 +136,8 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], c)));
-      const cells = await Promise.all(cellPromise);
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], locale)));
+      const cells = (await Promise.all(cellPromise));
       return cells;
     });
     const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
@@ -162,6 +173,9 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },
+      hiddenColumns: props.hiddenColumns,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
     },
     elements: {
       columns: content.columns,
@@ -179,14 +193,6 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     },
   };
 }
-function generateUserError(e) {
-  try {
-    return JSON.stringify(e);
-  }
-  catch (e) {
-    return "An unknown error";
-  }
-}
 async function tryMethod(c, callback) {
   const tag = c.tagName.toLowerCase();
   await customElements.whenDefined(tag);

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -3,15 +3,18 @@ import { ShareButtonView } from "./sqm-share-button-view";
 export default {
   title: "Components/Share Button",
 };
-export const WithIcon = () => {
-  const props = { medium: "facebook", iconslot: "suffix" };
+export const WithIconPrefix = () => {
+  const props = { medium: "whatsapp", iconslot: "prefix" };
+  return h(ShareButtonView, Object.assign({}, props), "Share");
+};
+export const WithIconSuffix = () => {
+  const props = { medium: "whatsapp", iconslot: "suffix" };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithIconOverride = () => {
   const props = {
     medium: "facebook",
     icon: "person-badge",
-    iconslot: "suffix",
   };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
@@ -19,7 +22,6 @@ export const TextStyle = () => {
   const props = {
     medium: "facebook",
     type: "text",
-    iconslot: "suffix",
   };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
@@ -35,11 +37,62 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
+export const WithCustomColors = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "var(--sl-color-primary-500)",
+    textcolor: "white",
+    iconslot: "prefix",
+  };
+  return h(ShareButtonView, Object.assign({}, props), "Facebook");
+};
+export const WithCustomBorderRadius = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    borderradius: 8,
+    iconslot: "prefix",
+  };
+  return h(ShareButtonView, Object.assign({}, props), "Facebook");
+};
 export const FullStackIcon = () => {
   return (h("div", null,
-    h("sqm-share-button", { medium: "facebook", iconslot: "prefix" },
+    h("sqm-share-button", { medium: "facebook" },
       h("span", null, "Facebook")),
     h("br", null),
-    h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
+    h("sqm-share-button", { medium: "email" },
       h("span", null, "Email"))));
 };
+export const AllMediums = () => {
+  return (h("div", null,
+    h("sqm-share-button", { medium: "facebook" },
+      h("span", null, "Facebook")),
+    h("br", null),
+    h("sqm-share-button", { medium: "email" },
+      h("span", null, "Email")),
+    h("br", null),
+    h("sqm-share-button", { medium: "whatsapp" },
+      h("span", null, "WhatsApp")),
+    h("br", null),
+    h("sqm-share-button", { medium: "linkedin" },
+      h("span", null, "Linkedin")),
+    h("br", null),
+    h("sqm-share-button", { medium: "twitter" },
+      h("span", null, "Twitter")),
+    h("br", null),
+    h("sqm-share-button", { medium: "pinterest" },
+      h("span", null, "Pinterest")),
+    h("br", null),
+    h("sqm-share-button", { medium: "fbmessenger" },
+      h("span", null, "Messenger")),
+    h("br", null),
+    h("sqm-share-button", { medium: "sms" },
+      h("span", null, "SMS")),
+    h("br", null),
+    h("sqm-share-button", { medium: "linemessenger" },
+      h("span", null, "Line Messenger")),
+    h("br", null),
+    h("sqm-share-button", { medium: "direct" },
+      h("span", null, "Share"))));
+};

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -1,20 +1,76 @@
 import { h, Host } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  buttonStyle: {
-    display: "block",
-  },
+const medium = {
+  facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
+  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
+  email: { color: "#666666", text: "#fff", icon: "envelope" },
+  direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
+  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
+  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
+  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
+  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
+  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
 export function ShareButtonView(props, children) {
+  const vanillaStyle = `
+    *::part(base) {
+			--sl-focus-ring-color-primary: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}80!important;
+
+      background: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""};
+      color: ${props.textcolor
+    ? props.textcolor
+    : props.medium
+      ? medium[props.medium].text
+      : ""};
+      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+    }
+
+	*::part(base):hover {
+		border-color: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}D1!important;
+	}
+	
+	*::part(base):focus {
+		border-color: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}D1!important;
+	}
+
+	*::part(label) {
+		position: relative;
+		top: 2%;
+	}
+  `;
+  const style = {
+    HostBlock: HostBlock,
+    buttonStyle: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
+    h("style", { type: "text/css" }, vanillaStyle),
     h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
-      !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
+      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
       !props.hidetext && children)));
 }