@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -1,34 +1,42 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect, useReducer } from "@saasquatch/universal-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 { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
+import mockRewardData from "./mockRewardData";
+import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Rewards Table
  */
 export class RewardsTable {
   constructor() {
     /** @uiName Number of rewards per page */
-    this.perPage = 3;
+    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 = 599;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, { label: "No Rewards Yet" });
+    const empty = h("slot", { name: "empty" });
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
-      ? useRewardsTableDemo(this)
+      ? useRewardsTableDemo(this, empty, loading)
       : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-rewards-table"; }
@@ -73,7 +81,7 @@ export class RewardsTable {
       },
       "attribute": "per-page",
       "reflect": false,
-      "defaultValue": "3"
+      "defaultValue": "4"
     },
     "showLabels": {
       "type": "boolean",
@@ -138,33 +146,75 @@ 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": "Show Referred by user in table",
+            "text": "Hide Columns (Mobile View)",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-referrer",
+      "attribute": "hidden-columns",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "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": "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"
     },
     "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,13 +241,61 @@ export class RewardsTable {
     }
   }; }
 }
-function useRewardsTableDemo(props) {
-  return deepmerge({
+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, emptyElement, loadingElement) {
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const tick = useRerenderListener();
+  const { data } = mockRewardData;
+  const components = useChildElements();
+  async function getComponentData(components) {
+    let componentData = data;
+    componentData = data.slice(0, props.perPage);
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // get the column cells (renderCell is asynchronous)
+    //@ts-ignore
+    const cellsPromise = componentData === null || componentData === void 0 ? void 0 : componentData.map(async (r) => {
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], undefined)));
+      const cells = (await Promise.all(cellPromise));
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: 0 });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    data && getComponentData(components);
+  }, [data, components, tick]);
+  const demoProps = deepmerge({
     states: {
       hasPrev: false,
       hasNext: false,
       loading: false,
-      namespace: CSS_NAMESPACE,
+      show: "rows",
     },
     callbacks: {
       prevPage: () => console.log("Prev"),
@@ -212,11 +310,11 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: h(EmptySkeleton, { label: "No Rewards Yet" }),
-      loadingElement: h(LoadingSkeleton, null),
-      // TODO: This should be smarter
-      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
-      rows: [],
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  return demoProps;
 }

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 {
@@ -18,6 +20,9 @@ const GET_REWARDS = gql `
           totalCount
           count
           data {
+            meta {
+              message
+            }
             id
             type
             value
@@ -31,15 +36,56 @@ const GET_REWARDS = gql `
             fuelTankCode
             fuelTankType
             currency
-            prettyValue
+            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
+            program {
+              name
+            }
             statuses
+            pendingReasons
             globalRewardKey
             programRewardKey
+            rewardSource
+            prettyRedeemedCredit(locale: $locale)
+            prettyAssignedCredit(locale: $locale)
+            prettyAvailableValue(locale: $locale)
+            exchangedRewardRedemptionTransaction {
+              id
+              creditRedeemed
+              prettyRedeemedCredit(locale: $locale)
+              unit
+              dateRedeemed
+            }
+            referral {
+              id
+              referrerUser {
+                id
+                firstName
+                lastName
+              }
+              referredUser {
+                id
+                firstName
+                lastName
+              }
+            }
             rewardRedemptionTransactions {
               data {
                 exchangedRewards {
                   data {
-                    prettyValue
+                    prettyValue(locale: $locale)
                     type
                     fuelTankCode
                     globalRewardKey
@@ -57,6 +103,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 = {
@@ -83,6 +130,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();
@@ -94,8 +142,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);
@@ -109,7 +157,6 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     rewardsData && getComponentData(components);
   }, [rewardsData, components, tick]);
   const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
-  console.log(states.loading, content.loading, rewardsData);
   const show = 
   // 1 - Loading if loading
   states.loading || content.loading
@@ -132,6 +179,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,
@@ -149,15 +199,7 @@ 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) {
+export async function tryMethod(c, callback) {
   const tag = c.tagName.toLowerCase();
   await customElements.whenDefined(tag);
   let labelPromise;
@@ -167,12 +209,7 @@ async function tryMethod(c, callback) {
   catch (e) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
-    if (callback.name === "renderReferrerCell") {
-      console.error("column does not have a renderReferrerCell method.");
-    }
-    else {
-      console.error("label promise failed", e);
-    }
+    console.error("label promise failed", e);
     return h("span", null);
   }
   try {

package/dist/collection/components/sqm-scroll/Scroll.stories.js

@@ -0,0 +1,50 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Scroll",
+};
+export const ScrollTag = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "scroll-tag-name": "sqm-text" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards"),
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const ScrollId = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "scroll-id": "my-id" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label", id: "my-id" },
+        h("h3", null, "Earn more rewards"),
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const ScrollTabGroup = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3" }),
+    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
+              <sqm-tabs>
+              <sqm-tab header="Leaderboard">
+                <sqm-hero-image
+                  image-url="https://i.imgur.com/MVgOJn7.png"
+                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+                  layout="columns"
+                  image-percentage="33%"
+                  padding-image="large"
+                  padding-text="large"
+                  background-color=""
+                ></sqm-hero-image>
+                <sqm-leaderboard></sqm-leaderboard>
+              </sqm-tab>
+              <sqm-tab header="Referral history"
+              >
+                <sqm-referral-table></sqm-referral-table>
+              </sqm-tab>
+              <sqm-tab header="Reward history">
+                <sqm-rewards-table></sqm-rewards-table>
+              </sqm-tab>
+              <sqm-tab header="Redeem">
+                <sqm-reward-exchange-list></sqm-reward-exchange-list>
+              </sqm-tab>
+            </sqm-tabs>
+      ` })));
+};

package/dist/collection/components/sqm-scroll/sqm-scroll.js

@@ -0,0 +1,111 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, Host, State } from "@stencil/core";
+import { useScroll } from "./useScroll";
+export class Scroll {
+  constructor() {
+    this.ignored = true;
+    this.buttonType = "primary";
+    this.scrollAnimation = "smooth";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { callbacks } = useScroll(this);
+    return (h(Host, { style: { display: "block" } },
+      h("sl-button", { type: this.buttonType, onClick: callbacks.scroll }, this.buttonText)));
+  }
+  static get is() { return "sqm-scroll"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false
+    },
+    "scrollTagName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "scroll-tag-name",
+      "reflect": false
+    },
+    "scrollId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "scroll-id",
+      "reflect": false
+    },
+    "scrollAnimation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"smooth\" | \"auto\"",
+        "resolved": "\"auto\" | \"smooth\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "scroll-animation",
+      "reflect": false,
+      "defaultValue": "\"smooth\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-scroll/useScroll.js

@@ -0,0 +1,18 @@
+const REVEAL_EVENT = "sq:reveal";
+export function useScroll(props) {
+  const { scrollTagName, scrollId } = props;
+  async function scroll() {
+    const element = document === null || document === void 0 ? void 0 : document.querySelector(scrollTagName || `#${scrollId}`);
+    console.log({ element, scrollTagName, scrollId });
+    element.dispatchEvent(new CustomEvent(REVEAL_EVENT, {
+      detail: scrollTagName || scrollId,
+      bubbles: true,
+      composed: true,
+    }));
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    element.scrollIntoView({ behavior: props.scrollAnimation });
+  }
+  return {
+    callbacks: { scroll },
+  };
+}

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

@@ -1,17 +1,24 @@
 import { h } from "@stencil/core";
 import { ShareButtonView } from "./sqm-share-button-view";
+import scenario from "./ShareButton.feature";
 export default {
   title: "Components/Share Button",
+  parameters: {
+    scenario,
+  },
 };
-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 +26,6 @@ export const TextStyle = () => {
   const props = {
     medium: "facebook",
     type: "text",
-    iconslot: "suffix",
   };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
@@ -35,11 +41,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"))));
+};