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

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -1,13 +1,15 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { useBigStat } from "../sqm-big-stat/useBigStat";
 import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
 import { TaskCardView } from "./sqm-task-card-view";
+import { useTaskCard } from "./useTaskCard";
 /**
  * @uiName Task Card
- * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab"]
+ * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
  */
 export class TaskCard {
   constructor() {
@@ -27,13 +29,15 @@ export class TaskCard {
     /**
      * @uiName Description Text
      */
-    this.description = "Description Text";
+    this.description = "";
     /**
      * @uiName Goal Repeatable
      */
     this.repeatable = false;
     /**
-     * @uiName Repeat Amount (0 for no limit)
+     * The number of times a reward can be earned.  Use zero for no limit (the default).
+     *
+     * @uiName Repeat Amount
      */
     this.finite = 0;
     /**
@@ -48,16 +52,42 @@ export class TaskCard {
      * @uiName Progress Bar Steps
      */
     this.steps = false;
+    /**
+     * @uiName Progress Bar Unit
+     */
+    this.progressBarUnit = "";
     /**
      * @uiName Show Goal Expiry
      */
     this.showExpiry = false;
+    /**
+     * @uiName Expiry Date Message
+     */
+    this.expiryMessage = "Ends {endDate}";
     /**
      * @uiName Reward Duration
      * @uiWidget DateRange
      * @uiOptions {"allowPastDates":true, "months": 1}
      */
     this.rewardDuration = "/";
+    /**
+     * Shown to users before the start of the task duration.
+     *
+     * @uiName Start Date Message
+     */
+    this.startsOnMessage = "Starts {startDate}";
+    /**
+     * Shown to users after the end of the task duration.
+     *
+     * @uiName Ended Date Message
+     */
+    this.endedMessage = "Ended {endDate}";
+    /**
+     * Displays the amount of times that a user has completed a repeatable task.
+     *
+     * @uiName Completed Count Text
+     */
+    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
     /**
      * @uiName CTA Button Text
      */
@@ -83,8 +113,9 @@ export class TaskCard {
   disconnectedCallback() { }
   render() {
     const { props } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const { value, statvalue } = props;
-    return (h(TaskCardView, Object.assign({ progress: value, loading: !isDemo() && value === undefined }, getProps(this))));
+    const { value, loading } = props;
+    const { callbacks } = isDemo() ? useTaskCardDemo(this) : useTaskCard();
+    return (h(TaskCardView, { callbacks: callbacks, states: { loading, progress: value }, content: { ...getProps(this) } }));
   }
   static get is() { return "sqm-task-card"; }
   static get encapsulation() { return "shadow"; }
@@ -171,7 +202,7 @@ export class TaskCard {
       },
       "attribute": "description",
       "reflect": false,
-      "defaultValue": "\"Description Text\""
+      "defaultValue": "\"\""
     },
     "repeatable": {
       "type": "boolean",
@@ -206,10 +237,10 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Repeat Amount (0 for no limit)",
+            "text": "Repeat Amount",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "The number of times a reward can be earned.  Use zero for no limit (the default)."
       },
       "attribute": "finite",
       "reflect": false,
@@ -287,7 +318,7 @@ export class TaskCard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Progress Bar Unit",
@@ -296,7 +327,8 @@ export class TaskCard {
         "text": ""
       },
       "attribute": "progress-bar-unit",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"\""
     },
     "showExpiry": {
       "type": "boolean",
@@ -319,6 +351,27 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
+    "expiryMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Expiry Date Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "expiry-message",
+      "reflect": false,
+      "defaultValue": "\"Ends {endDate}\""
+    },
     "rewardDuration": {
       "type": "string",
       "mutable": false,
@@ -346,6 +399,69 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "startsOnMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Start Date Message",
+            "name": "uiName"
+          }],
+        "text": "Shown to users before the start of the task duration."
+      },
+      "attribute": "starts-on-message",
+      "reflect": false,
+      "defaultValue": "\"Starts {startDate}\""
+    },
+    "endedMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Ended Date Message",
+            "name": "uiName"
+          }],
+        "text": "Shown to users after the end of the task duration."
+      },
+      "attribute": "ended-message",
+      "reflect": false,
+      "defaultValue": "\"Ended {endDate}\""
+    },
+    "completedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Completed Count Text",
+            "name": "uiName"
+          }],
+        "text": "Displays the amount of times that a user has completed a repeatable task."
+      },
+      "attribute": "completed-text",
+      "reflect": false,
+      "defaultValue": "\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\""
+    },
     "buttonText": {
       "type": "string",
       "mutable": false,
@@ -435,9 +551,66 @@ export class TaskCard {
       "attribute": "stat-type",
       "reflect": false,
       "defaultValue": "\"/programGoals/count/Referral-Started%2Freferrals\""
+    },
+    "eventKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Event key of task card button",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "event-key",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<TaskCardViewProps | BigStatViewProps>",
+        "resolved": "{}",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "TaskCardViewProps": {
+            "location": "import",
+            "path": "./sqm-task-card-view"
+          },
+          "BigStatViewProps": {
+            "location": "import",
+            "path": "../sqm-big-stat/sqm-big-stat-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {
     "ignored": {}
   }; }
 }
+function useTaskCardDemo(props) {
+  return deepmerge({ callbacks: { sendEvent: (event) => console.log(event) } }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-task-card/useTaskCard.js

@@ -0,0 +1,25 @@
+import { useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+const SEND_EVENT = gql `
+  mutation taskCardEvent($userEventInput: UserEventInput!) {
+    logUserEvent(userEventInput: $userEventInput) {
+      userId
+    }
+  }
+`;
+export function useTaskCard() {
+  const user = useUserIdentity();
+  const [sendUserEvent] = useMutation(SEND_EVENT);
+  function sendEvent(eventKey) {
+    sendUserEvent({
+      userEventInput: {
+        userId: user.id,
+        accountId: user.accountId,
+        events: [{ key: eventKey, fields: {} }],
+      },
+    });
+  }
+  return {
+    callbacks: { sendEvent },
+  };
+}

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function TextSpanView(props, children) {
   const style = {
     p: {
@@ -40,8 +39,7 @@ export function TextSpanView(props, children) {
       margin: "0",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
     sqm-text-span {

package/dist/collection/components/sqm-titled-section/sqm-portal-section-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function PortalSectionView(props) {
   const style = {
     LabelContainer: {
@@ -9,13 +8,10 @@ export function PortalSectionView(props) {
         : `var(--sl-spacing-${props.labelMargin})`,
     },
     SectionContainer: {
-      padding: props.padding === "none"
-        ? "0"
-        : `var(--sl-spacing-${props.padding})`,
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.SectionContainer },
     h("style", { type: "text/css" }, styleString),

package/dist/collection/components/sqm-user-name/sqm-user-name.js

@@ -5,7 +5,7 @@ import deepmerge from "deepmerge";
 import { UserNameView } from "./sqm-user-name-view";
 import { useUserName } from "./useUserName";
 /**
- * @uiName Navigation Link
+ * @uiName User Name
  */
 export class UserName {
   constructor() {

package/dist/collection/fonts/GoogleFonts.js

@@ -0,0 +1,12 @@
+/**
+ * Build a font CSS URL using the Google Fonts CSS API
+ *
+ * Docs: https://developers.google.com/fonts/docs/css2
+ *
+ * @param fonts - the font family or families to load
+ * @returns url to a .css file
+ */
+export function buildFontsCssUrl(...fonts) {
+  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
+  return `https://fonts.googleapis.com/css2?${queryString}`;
+}

package/dist/collection/global/global.js

@@ -19,7 +19,7 @@ try {
   // SlAlert.register();
   registerIconLibrary("default", {
     // same link that shoelace uses internally
-    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.2.0/icons/${name}.svg`,
+    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.7.2/icons/${name}.svg`,
   });
   // SlAlert.register();
   customElements.define("sl-alert", SlAlert);

package/dist/collection/global/styles.js

@@ -503,11 +503,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
   --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -606,6 +606,14 @@ a:visited {
 a:hover {
   color: var(--sl-color-primary-600);
 }
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
 h2, .Title {
   font-size: var(--sl-font-size-large);
   font-weight: var(--sl-font-weight-semibold);
@@ -714,72 +722,6 @@ sl-input::part(label){
   color: var(--sl-color-gray-900);
 }
 
-// The following commented out styles should be moved to Service Titan
-
-// stn-row[topmargin="x-large"] {
-//   margin-top: var(--sl-spacing-x-large);
-// }
-
-// stn-wrapper-column {
-//   max-width: var(--sqm-content-max-width);
-//   margin: var(--sl-spacing-x-large) auto;
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-wrapper-column > :not(:first-child), stn-wrapper-item > :not(:first-child) {
-//   margin-top: var(--sl-spacing-medium);
-// }
-
-// stn-wrapper-item, stn-wrapper-column{
-//   display: flex;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   width: 100%;
-//   height: auto;
-// }
-// stn-wrapper-item {
-//   padding: var(--sl-spacing-large);
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-row {
-//   display: flex;
-// }
-
-// stn-row[gap="medium"] > :not(:first-child) {
-//   margin-left: var(--sl-spacing-medium);
-// }
-
-// stn-row[space="even"] > * {
-//   flex: 1 1 0;
-// }
-
-// *::part(erroralert-icon), *::part(successalert-icon){
-//   align-items: flex-start;
-//   padding-top: var(--sl-spacing-large);
-// }
-
-// *::part(erroralert-text){
-//   color: var(--sl-color-danger-500);
-// }
-
-// *::part(successalert-text) {
-//   color: var(--sl-color-success-600);
-// }
-
-// *::part(successalert-text),
-// *::part(erroralert-text) {
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-semibold);
-//   width: 100%;
-// }
-// *::part(successalert-subtext){
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-normal);
-//   color: var(--sl-color-gray-800);
-//   width: 100%;
-// }
-
 .FooterEmail{
   text-decoration: none;
   font-size: var(--sl-font-size-medium);

package/dist/collection/global/styles.ts

@@ -504,11 +504,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
   --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -607,6 +607,14 @@ a:visited {
 a:hover {
   color: var(--sl-color-primary-600);
 }
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
 h2, .Title {
   font-size: var(--sl-font-size-large);
   font-weight: var(--sl-font-weight-semibold);
@@ -715,72 +723,6 @@ sl-input::part(label){
   color: var(--sl-color-gray-900);
 }
 
-// The following commented out styles should be moved to Service Titan
-
-// stn-row[topmargin="x-large"] {
-//   margin-top: var(--sl-spacing-x-large);
-// }
-
-// stn-wrapper-column {
-//   max-width: var(--sqm-content-max-width);
-//   margin: var(--sl-spacing-x-large) auto;
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-wrapper-column > :not(:first-child), stn-wrapper-item > :not(:first-child) {
-//   margin-top: var(--sl-spacing-medium);
-// }
-
-// stn-wrapper-item, stn-wrapper-column{
-//   display: flex;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   width: 100%;
-//   height: auto;
-// }
-// stn-wrapper-item {
-//   padding: var(--sl-spacing-large);
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-row {
-//   display: flex;
-// }
-
-// stn-row[gap="medium"] > :not(:first-child) {
-//   margin-left: var(--sl-spacing-medium);
-// }
-
-// stn-row[space="even"] > * {
-//   flex: 1 1 0;
-// }
-
-// *::part(erroralert-icon), *::part(successalert-icon){
-//   align-items: flex-start;
-//   padding-top: var(--sl-spacing-large);
-// }
-
-// *::part(erroralert-text){
-//   color: var(--sl-color-danger-500);
-// }
-
-// *::part(successalert-text) {
-//   color: var(--sl-color-success-600);
-// }
-
-// *::part(successalert-text),
-// *::part(erroralert-text) {
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-semibold);
-//   width: 100%;
-// }
-// *::part(successalert-subtext){
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-normal);
-//   color: var(--sl-color-gray-800);
-//   width: 100%;
-// }
-
 .FooterEmail{
   text-decoration: none;
   font-size: var(--sl-font-size-medium);

package/dist/collection/stories/NewPortal.stories.js

@@ -2,8 +2,7 @@ import { h } from "@stencil/core";
 import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
 import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
 import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../styling/JSS";
 import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
@@ -20,8 +19,7 @@ const style = {
     "text-decoration": "underline",
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const barProps = {
   data: {
@@ -130,10 +128,10 @@ export const Dashboard = () => {
             h("h1", null, "John Smith"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         h(PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
@@ -257,10 +255,10 @@ export const Commissions = () => {
               "program"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
 };
 export const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
@@ -287,10 +285,10 @@ export const Activity = () => {
           label: (h("sqm-text", null,
             h("h3", null, "Referral Activity"))),
           content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
         }))),
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
@@ -298,8 +296,8 @@ export const Activity = () => {
         label: (h("sqm-text", null,
           h("h3", null, "Traffic Generated"))),
         content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
       })))));
 };