@saasquatch/mint-components 1.15.0-5 → 1.15.0-51

package/dist/collection/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form-view.js

@@ -1,8 +1,13 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { FORM_STEPS } from "../sqm-tax-and-cash/data";
+import { FORM_STEPS } from "../data";
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -34,7 +39,7 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -45,31 +50,27 @@ const style = {
   },
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   InfoAlert: {
     "&::part(base)": {
-      backgroundColor: "transparent",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
-      padding: "0px",
-      marginBottom: "16px",
+      padding: "0 16px",
       border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-sky-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Container: {
@@ -79,16 +80,6 @@ const style = {
     flexDirection: "column",
     gap: "16px",
   },
-  Link: {
-    color: "var(--sl-color-sky-500)",
-    textDecoration: "none",
-    "&:visited": {
-      color: "var(--sl-color-sky-500)",
-    },
-    "&:hover": {
-      textDecoration: "underline",
-    },
-  },
   CheckboxWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -102,9 +93,31 @@ const style = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
+    },
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    "&::part(footer)": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      marginBottom: "var(--sl-spacing-xx-small)",
+      alignItems: "center",
+      flex: "1",
+    },
+  },
+  DialogButton: { margin: "auto", width: "100%" },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -120,6 +133,8 @@ const vanillaStyle = `
 
     a {
       cursor: pointer;
+      color: var(--sqm-text);
+      text-decoration: underline;
     }
 
 
@@ -132,6 +147,17 @@ export const DocusignFormView = (props) => {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
+      h("p", null, intl.formatMessage({
+        id: "modalText",
+        defaultMessage: text.modalDescription,
+      }, {
+        br: h("br", null),
+      })),
+      h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onModalClose, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },
       h("div", null,
         !states.hideSteps && (h("p", null, intl.formatMessage({

package/dist/collection/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form.js

@@ -3,7 +3,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Element, Host, Prop, State, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { DocusignIframe, } from "./docusign-iframe/DocusignIframe";
 import { DocusignFormView } from "./sqm-docusign-form-view";
 import { useDocusignForm } from "./useDocusignForm";
@@ -120,6 +120,18 @@ export class DocusignForm {
      * @uiName Exit button text
      */
     this.exitButton = "Exit";
+    /**
+     * @uiName Information modal title
+     */
+    this.modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     */
+    this.modalDescription = "Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
+    /**
+     * @uiName Information modal button text
+     */
+    this.modalButtonText = "I understand";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -607,12 +619,75 @@ export class DocusignForm {
       "reflect": false,
       "defaultValue": "\"Exit\""
     },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-title",
+      "reflect": false,
+      "defaultValue": "\"Important Note\""
+    },
+    "modalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal description text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-description",
+      "reflect": false,
+      "defaultValue": "\"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\""
+    },
+    "modalButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-button-text",
+      "reflect": false,
+      "defaultValue": "\"I understand\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseDocusignFormResult>",
-        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; participantTypeDisabled: boolean; loading: boolean; urlLoading: boolean; loadingError: boolean; formState: { participantType: ParticipantType; taxFormExpired: boolean; errors: {}; }; docusignStatus: DocusignStatus; documentType: TaxDocumentType; documentTypeString: string; showExitButton: boolean; }; data?: { taxForm: TaxDocumentType; documentUrl: string; }; }",
+        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; participantTypeDisabled: boolean; loading: boolean; urlLoading: boolean; loadingError: boolean; formState: { participantType: ParticipantType; taxFormExpired: boolean; errors: {}; }; docusignStatus: DocusignStatus; documentType: TaxDocumentType; documentTypeString: string; showExitButton: boolean; showModal: boolean; }; data?: { taxForm: TaxDocumentType; documentUrl: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -648,7 +723,7 @@ function useDocusignFormDemo(props) {
   return deepmerge({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -661,6 +736,7 @@ function useDocusignFormDemo(props) {
         errors: {},
       },
       documentType: "W9",
+      showModal: false,
     },
     data: {
       taxForm: "W9",
@@ -671,6 +747,8 @@ function useDocusignFormDemo(props) {
       demo: {
         onSubmit: () => setStep("/4"),
         onBack: () => setStep("/3"),
+        onModalOpen: () => { },
+        onModalClose: () => { },
       },
       setParticipantType: (p) => console.log({ p }),
       setDocusignStatus: (status) => console.log(status),
@@ -681,7 +759,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",

package/dist/collection/components/tax-and-cash/sqm-docusign-form/useDocusignForm.js

@@ -1,9 +1,9 @@
 import { useMutation, useParent, useParentQueryValue, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { taxTypeToName, validTaxDocument } from "../utils";
+import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+import { taxTypeToName, validTaxDocument } from "../utils";
 const GET_TAX_DOCUMENT = gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
@@ -44,6 +44,7 @@ export function useDocusignForm(props) {
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   const [showExitButton, setShowExitButton] = useState(false);
+  const [showModal, setShowModal] = useState(true);
   // Only look at current document if it's valid (same as required type)
   const existingDocumentType = validTaxDocument(publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType) && (publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument)
     ? publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType : undefined;
@@ -139,6 +140,7 @@ export function useDocusignForm(props) {
       documentType: actualDocumentType,
       documentTypeString: taxTypeToName(actualDocumentType),
       showExitButton,
+      showModal,
     },
     data: {
       taxForm: actualDocumentType,
@@ -149,6 +151,8 @@ export function useDocusignForm(props) {
       completeDocument,
       onExit: progressStep,
       setParticipantType,
+      onModalClose: () => setShowModal(false),
+      onModalOpen: () => setShowModal(true),
     },
     text: props.getTextProps(),
   };

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../../styling/JSS";
 import { intl } from "../../../global/global";
-import { FORM_STEPS } from "../sqm-tax-and-cash/data";
+import { createStyleSheet } from "../../../styling/JSS";
+import { FORM_STEPS } from "../data";
 const style = {
   FormWrapper: {
     display: "flex",
@@ -14,6 +14,7 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -54,26 +55,30 @@ const style = {
     marginTop: "10px",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   InfoAlert: {
@@ -98,10 +103,36 @@ const style = {
     width: "26px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginBottom: "var(--sl-spacing-small)",
   },
+  PrimaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-primary-button-background)",
+      color: "var(--sqm-primary-button-color)",
+      borderColor: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+    "&::part(base):hover": {
+      background: "var(--sqm-primary-button-background-hover)",
+    },
+  },
+  SecondaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-secondary-button-background)",
+      color: "var(--sqm-secondary-button-color)",
+      borderColor: "var(--sqm-secondary-button-color-border)",
+      borderRadius: "var(--sqm-secondary-button-radius)",
+      width: "max-content",
+      display: "flex",
+      margin: "auto",
+    },
+    "&::part(base):hover": {
+      color: "var(--sqm-text)",
+      background: "var(--sqm-secondary-button-background-hover)",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -109,6 +140,19 @@ const vanillaStyle = `
     :host{
       display: block;   
     }
+
+    hr {
+      border: 1px solid var(--sqm-border-color);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
     * {
        margin: 0;
        padding: 0;
@@ -180,8 +224,8 @@ export const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
         intl.formatMessage({
           id: "cannotChangeInfoAlert",
           defaultMessage: text.cannotChangeInfoAlert,
@@ -189,6 +233,6 @@ export const IndirectTaxFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
 };

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js

@@ -4,7 +4,7 @@ import { useState } from "@saasquatch/universal-hooks";
 import { Component, Host, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { OtherRegionSlotView } from "../sqm-user-info-form/small-views/IndirectTaxDetailsView";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { IndirectTaxFormView } from "./sqm-indirect-tax-form-view";
@@ -913,7 +913,7 @@ export class IndirectTaxForm {
 }
 function useDemoIndirectTaxForm(props) {
   const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
-  const [option, setOption] = useState(null);
+  const [option, setOption] = useState("otherRegion");
   const [demoFormState, setDemoFormState] = useState({});
   return deepmerge({
     states: {

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.js

@@ -2,10 +2,10 @@ import { useLocale, useMutation, useParent, useParentQueryValue, useParentValue,
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import JSONPointer from "jsonpointer";
-import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
+import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { getCountryObj, validTaxDocument } from "../utils";
-import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js

@@ -7,12 +7,12 @@ const style = {
     display: "grid",
     gridTemplateColumns: "1fr",
     gridGap: "var(--sl-spacing-large)",
-    background: "var(--sl-color-neutral-0)",
+    background: "inherit",
     boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
-    borderRadius: "4px",
+    borderRadius: "var(--sqm-border-radius-normal)",
     padding: "var(--sl-spacing-large)",
     minHeight: "150px",
-    border: "1px solid var(--sl-color-gray-200)",
+    border: "1px solid var(--sqm-border-color)",
     maxWidth: "450px",
   },
   StatusContainer: {
@@ -22,7 +22,7 @@ const style = {
   },
   MainCurrencyLabel: {
     fontWeight: "var(--sl-font-weight-normal)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   MainCurrency: {
     margin: 0,
@@ -31,12 +31,12 @@ const style = {
   },
   SubduedRegularText: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     margin: 0,
     width: "auto",
   },
   PaypalEmail: {
-    borderRight: "1px solid var(--sl-color-gray-200)",
+    borderRight: "1px solid var(--sqm-border-color)",
     paddingRight: "var(--sl-spacing-small)",
     "@media (max-width: 499px)": {
       borderRight: "none",
@@ -44,7 +44,7 @@ const style = {
     },
   },
   PaypalDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -65,7 +65,7 @@ const style = {
     },
   },
   AccountDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -78,7 +78,7 @@ const style = {
     gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
     paddingTop: "var(--sq-spacing-xx-small)",
     "& > :not(:last-child)": {
-      borderRight: "1px solid var(--sl-color-gray-200)",
+      borderRight: "1px solid var(--sqm-border-color)",
     },
     "& > :nth-child(3)": {
       border: "none",
@@ -95,7 +95,7 @@ const style = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "1px solid var(--sl-color-gray-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   SkeletonOne: {
     width: "25%",
@@ -111,18 +111,34 @@ const style = {
   },
   Alert: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-warning-100)",
-      border: "1px solid var(--sl-color-warning-200)",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "1px solid var(--sqm-warning-color-border)",
       padding: "0 16px",
     },
     "& sl-icon": {
       margin: 0,
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: 0,
     },
   },
+  SuccessBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sqm-success-color-text)",
+    },
+  },
+  PrimaryBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sqm-informative-color-text)",
+    },
+  },
   AlertContent: {
     display: "flex",
     alignItems: "flex-start",
@@ -150,13 +166,14 @@ export function PayoutDetailsCardView(props) {
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";
+    const badgeClass = badgeType === "success" ? classes.SuccessBadge : classes.PrimaryBadge;
     const statusText = intl.formatMessage({
       id: "badgeText",
       defaultMessage: statusBadgeText,
     }, {
       badgeText: status,
     });
-    return (h("sl-badge", { pill: true, type: badgeType }, statusText));
+    return (h("sl-badge", { pill: true, class: badgeClass }, statusText));
   };
   const thresholdText = intl.formatMessage({
     id: "thresholdText",

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.js

@@ -2,9 +2,9 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Host, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { getProps } from "../../../utils/utils";
 import { PayoutDetailsCardView } from "./sqm-payout-details-card-view";
 import { usePayoutDetailsCard } from "./usePayoutDetailsCard";
-import { getProps } from "../../../utils/utils";
 /**
  * @uiName Payout Details Card
  * @exampleGroup Tax and Cash Components
@@ -31,6 +31,10 @@ export class PayoutDetailsCard {
      * @uiName Payout missing information subtext
      */
     this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
+    /**
+     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -134,6 +138,27 @@ export class PayoutDetailsCard {
       "reflect": false,
       "defaultValue": "\"Missing banking information, go to Impact.com to resolve.\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.js

@@ -1,7 +1,7 @@
+import { useParentQueryValue } from "@saasquatch/component-boilerplate";
 import { DateTime } from "luxon";
 import { intl } from "../../../global/global";
-import { USER_QUERY_NAMESPACE } from "../sqm-tax-and-cash/data";
-import { useParentQueryValue } from "@saasquatch/component-boilerplate";
+import { USER_QUERY_NAMESPACE } from "../data";
 export function usePayoutDetailsCard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { data, loading } = useParentQueryValue(USER_QUERY_NAMESPACE);