@saasquatch/mint-components 1.15.0-7 → 1.15.0-71

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -10,33 +10,6 @@ const style = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  InfoAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
   Dialog: {
     "&::part(panel)": {
       height: "600px",
@@ -52,6 +25,13 @@ const style = {
     "&::part(footer)": {},
   },
 };
+const vanillaStyle = `
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
@@ -63,8 +43,6 @@ export function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
-        icon: "exclamation-triangle",
-        class: sheet.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -73,8 +51,6 @@ export function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "info-circle",
-          class: sheet.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -87,8 +63,6 @@ export function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -100,8 +74,6 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -113,8 +85,6 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -126,8 +96,6 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet.classes.ErrorAlertContainer,
         };
       case "HOLD":
         return {
@@ -140,8 +108,6 @@ export function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -150,11 +116,15 @@ export function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (h("div", { style: { paddingTop: "10px" } },
+          h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText))) : (
         // Demo case
-        h("sl-button", { type: "default" }, text.informationRequiredButtonText));
+        h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
       case "VERIFICATION:REQUIRED":
-        return (h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
+        return (h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
         return;
     }
@@ -168,9 +138,9 @@ export function PayoutStatusAlertView(props) {
   }
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
-      h("sl-icon", { slot: "icon", name: alertDetails.icon }),
-      h("strong", null, alertDetails.header),
-      h("p", { class: sheet.classes.AlertDescriptionText }, alertDetails.description),
+    h("style", { type: "text/css" }, vanillaStyle),
+    h("sqm-form-message", { type: alertDetails.alertType },
+      h("p", { part: "alert-title" }, alertDetails.header),
+      h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));
 }

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -7,6 +7,7 @@ import { usePayoutStatus } from "./usePayoutStatus";
 import { isDemo } from "@saasquatch/component-boilerplate";
 /**
  * @uiName Payout Status Alert
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Tax and Cash
  * @example Payout Status Alert - <sqm-payout-status-alert></sqm-payout-status-alert>
  */

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.js

@@ -23,17 +23,20 @@ const GET_USER_STATUS = gql `
   }
 `;
 export function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
     return "INFORMATION_REQUIRED";
-  if ((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.includes("IDV_CHECK_REQUIRED"))
+  if (((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("NEW_PAYEE_REVIEW"))) {
+    return "DONE";
+  }
+  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REQUIRED"))
     return "VERIFICATION:REQUIRED";
-  if ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_REQUIRED_INTERNAL"))
     return "VERIFICATION:INTERNAL";
-  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REVIEW_INTERNAL"))
+  if ((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("IDV_CHECK_REVIEW_INTERNAL"))
     return "VERIFICATION:REVIEW";
-  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_FAILED_INTERNAL"))
+  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
   if (account.hold)
     return "HOLD";

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

@@ -1,30 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../../styling/JSS";
-const styles = {
-  Alert: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-danger-100)",
-      border: "1px solid var(--sl-color-danger-200)",
-      padding: "0 16px",
-    },
-    "& sl-icon": {
-      margin: 0,
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-      margin: 0,
-    },
-  },
-};
 export const ErrorView = (props) => {
-  const sheet = createStyleSheet(styles);
-  const styleString = sheet.toString();
-  const { classes } = sheet;
-  return (h("div", null,
-    h("style", null, styleString),
-    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: classes.Alert },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon", class: "Error" }),
-      h("strong", null, props.loadingErrorAlertHeader),
-      h("br", null),
-      props.loadingErrorAlertDescription)));
+  return (h("sqm-form-message", { type: "error" },
+    h("p", { part: "alert-title" }, props.loadingErrorAlertHeader),
+    h("p", { part: "alert-description" }, props.loadingErrorAlertDescription)));
 };

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

@@ -1,16 +1,17 @@
+import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../../utils/parseStates";
 import { getProps } from "../../../utils/utils";
-import LoadingView from "./LoadingView";
-import { TAX_CONTEXT_NAMESPACE } from "./data";
+import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { extractProps } from "./extractProps";
+import LoadingView from "./LoadingView";
 import { useTaxAndCash } from "./useTaxAndCash";
-import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
-import { ErrorView } from "./ErrorView";
 /**
  * @uiName Tax and Cash
  * @exampleGroup Tax and Cash
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
  * @example Tax and Cash Multi Step Form - <sqm-tax-and-cash></sqm-tax-and-cash>
  */
 export class TaxAndCashMonolith {
@@ -304,6 +305,21 @@ export class TaxAndCashMonolith {
      * @uiGroup Step 3 Properties
      */
     this.step3_exitButton = "Exit";
+    /**
+     * @uiName Information modal title
+     * @uiGroup Step 3 Properties
+     */
+    this.step3_modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     * @uiGroup Step 3 Properties
+     */
+    this.step3_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
+     * @uiGroup Step 3 Properties
+     */
+    this.step3_modalButtonText = "I understand";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       STEP 4 PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -386,7 +402,12 @@ export class TaxAndCashMonolith {
      * @uiName Beneficiary account field label
      * @uiGroup Step 4 Properties
      */
-    this.step4_beneficiaryAccountNameLabel = "Beneficiary account name";
+    this.step4_beneficiaryAccountNameLabel = "Account holder name";
+    /**
+     * @uiName Beneficiary account field description
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_beneficiaryAccountNameDescription = "The beneficiary name of your bank account. Ensure this matches the name on your tax form.";
     /**
      * @uiName Bank account type field label
      * @uiGroup Step 4 Properties
@@ -528,6 +549,21 @@ export class TaxAndCashMonolith {
      * @uiGroup Step 4 Properties
      */
     this.step4_verifyEmailDescriptionText = "Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Information modal title
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_modalDescription = "Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.";
+    /**
+     * @uiName Information modal button text
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_modalButtonText = "I understand, update my information";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       DASHBOARD PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -973,6 +1009,15 @@ export class TaxAndCashMonolith {
      * @uiGroup General Form Properties
      */
     this.supportLink = "support team";
+    /**
+     * @uiName Monolith States
+     * @componentState { "title": "Step 1", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"] }
+     * @componentState { "title": "Step 2", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"] }
+     * @componentState { "title": "Step 3", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"] }
+     * @componentState { "title": "Step 4", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"] }
+     * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -1017,21 +1062,25 @@ export class TaxAndCashMonolith {
           h("hr", null)));
       })));
     }
-    switch (props.step) {
-      case "/1":
-        return (h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"))));
-      case "/2":
-        return (h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"))));
-      case "/3":
-        return (h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
-      case "/4":
-        return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
-      case "/dashboard":
-        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
-      case "/error":
-        return (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: this.loadingErrorAlertDescription }));
-    }
-    return h(LoadingView, null);
+    const getStep = () => {
+      switch (props.step) {
+        case "/1":
+          return (h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"), extractProps(props, "sqm-user-info-form_"))));
+        case "/2":
+          return (h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"), extractProps(props, "sqm-indirect-tax-form_"))));
+        case "/3":
+          return (h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"), extractProps(props, "sqm-docusign-form_"))));
+        case "/4":
+          return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"), extractProps(props, "sqm-banking-info-form_"))));
+        case "/dashboard":
+          return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), extractProps(props, "sqm-tax-and-cash-dashboard_"))));
+        case "/error":
+          return (h("sqm-form-message", { type: "error" },
+            h("p", { part: "alert-title" }, this.loadingErrorAlertHeader),
+            h("p", { part: "alert-description" }, this.loadingErrorAlertDescription)));
+      }
+    };
+    return getStep() || h(LoadingView, null);
   }
   static get is() { return "sqm-tax-and-cash"; }
   static get encapsulation() { return "shadow"; }
@@ -2224,6 +2273,78 @@ export class TaxAndCashMonolith {
       "reflect": false,
       "defaultValue": "\"Exit\""
     },
+    "step3_modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal title",
+            "name": "uiName"
+          }, {
+            "text": "Step 3 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-3_modal-title",
+      "reflect": false,
+      "defaultValue": "\"Important Note\""
+    },
+    "step3_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": "Step 3 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-3_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.\""
+    },
+    "step3_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": "Step 3 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-3_modal-button-text",
+      "reflect": false,
+      "defaultValue": "\"I understand\""
+    },
     "step4_taxAndPayouts": {
       "type": "string",
       "mutable": false,
@@ -2582,7 +2703,31 @@ export class TaxAndCashMonolith {
       },
       "attribute": "step-4_beneficiary-account-name-label",
       "reflect": false,
-      "defaultValue": "\"Beneficiary account name\""
+      "defaultValue": "\"Account holder name\""
+    },
+    "step4_beneficiaryAccountNameDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Beneficiary account field description",
+            "name": "uiName"
+          }, {
+            "text": "Step 4 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-4_beneficiary-account-name-description",
+      "reflect": false,
+      "defaultValue": "\"The beneficiary name of your bank account. Ensure this matches the name on your tax form.\""
     },
     "step4_bankAccountTypeLabel": {
       "type": "string",
@@ -3232,6 +3377,78 @@ export class TaxAndCashMonolith {
       "reflect": false,
       "defaultValue": "\"Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.\""
     },
+    "step4_modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal title",
+            "name": "uiName"
+          }, {
+            "text": "Step 4 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-4_modal-title",
+      "reflect": false,
+      "defaultValue": "\"Important Note\""
+    },
+    "step4_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": "Step 4 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-4_modal-description",
+      "reflect": false,
+      "defaultValue": "\"Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.\""
+    },
+    "step4_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": "Step 4 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-4_modal-button-text",
+      "reflect": false,
+      "defaultValue": "\"I understand, update my information\""
+    },
     "dashboard_statusTextActive": {
       "type": "string",
       "mutable": false,
@@ -5014,20 +5231,55 @@ export class TaxAndCashMonolith {
       "reflect": false,
       "defaultValue": "\"support team\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Monolith States",
+            "name": "uiName"
+          }, {
+            "text": "{ \"title\": \"Step 1\", \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Step 2\", \"props\": { \"step\": \"/2\" }, \"dependencies\": [\"sqm-indirect-tax-form\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Step 3\", \"props\": { \"step\": \"/3\" }, \"dependencies\": [\"sqm-docusign-form\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Step 4\", \"props\": { \"step\": \"/4\" }, \"dependencies\": [\"sqm-banking-info-form\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Dashboard\", \"props\": { \"step\": \"/dashboard\" }, \"dependencies\": [\"sqm-tax-and-cash-dashboard\"] }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<UseTaxAndCashResultType>",
-        "resolved": "{ loading?: boolean; setStep?: (value: string) => void; step?: string; context?: TaxContext; namespace?: string; }",
+        "original": "DemoData<TaxAndCashMonolith>",
+        "resolved": "{ step1_firstName?: string; step1_lastName?: string; step1_email?: string; step1_country?: string; step1_phoneNumber?: string; step1_address?: string; step1_city?: string; step1_state?: string; step1_province?: string; step1_region?: string; step1_postalCode?: string; step1_currency?: string; step1_currencyHelpText?: string; step1_allowBankingCollection?: string; step1_personalInformation?: string; step1_termsAndConditionsLabel?: string; step1_termsAndConditionsLink?: string; step1_searchForCurrencyText?: string; step2_indirectTax?: string; step2_indirectTaxDescription?: string; step2_indirectTaxDetails?: string; step2_otherRegion?: string; step2_otherRegionSubtext?: string; step2_notRegistered?: string; step2_notRegisteredSubtext?: string; step2_selectedRegion?: string; step2_indirectTaxNumber?: string; step2_province?: string; step2_indirectTaxNumberError?: string; step2_qstNumber?: string; step2_isRegisteredQST?: string; step2_isRegisteredSubRegionIncomeTax?: string; step2_subRegion?: string; step2_subRegionTaxNumberLabel?: string; step2_cannotChangeInfoAlert?: string; step3_taxForm?: string; step3_taxFormLabel?: string; step3_participantType?: string; step3_businessEntity?: string; step3_individualParticipant?: string; step3_taxFormDescription?: string; step3_taxFormDescriptionIndividualParticipant?: string; step3_taxFormDescriptionBusinessEntity?: string; step3_docusignExpired?: string; step3_docusignSessionWarning?: string; step3_docusignError?: string; step3_refreshButton?: string; step3_exitButton?: string; step3_modalTitle?: string; step3_modalDescription?: string; step3_modalButtonText?: string; step4_taxAndPayouts?: string; step4_directlyToBankAccount?: string; step4_toPayPalAccount?: string; step4_paymentScheduleBalanceThreshold?: string; step4_paymentScheduleFixedDay?: string; step4_paymentDaySelectLabel?: string; step4_paymentThresholdSelectLabel?: string; step4_paymentDayFirstOfMonthLabelText?: string; step4_paymentDayFifteenthOfMonthLabelText?: string; step4_paymentMethod?: string; step4_paymentSchedule?: string; step4_paymentMethodSubtext?: string; step4_payPalInputLabel?: string; step4_bankLocationLabel?: string; step4_beneficiaryAccountNameLabel?: string; step4_beneficiaryAccountNameDescription?: string; step4_bankAccountTypeLabel?: string; step4_checkingSelectItemLabel?: string; step4_savingsSelectItemLabel?: string; step4_bankAccountNumberLabel?: string; step4_ibanLabel?: string; step4_swiftCodeLabel?: string; step4_routingCodeLabel?: string; step4_bankNameLabel?: string; step4_classificationEntityLabel?: string; step4_businessSelectItemLabel?: string; step4_individualSelectItemLabel?: string; step4_foreignSelectItemLabel?: string; step4_classificationCPFLabel?: string; step4_patronymicNameLabel?: string; step4_voCodeLabel?: string; step4_agencyCodeLabel?: string; step4_branchCodeLabel?: string; step4_classificationLabel?: string; step4_taxPayerIdLabel?: string; step4_bankAddressLabel?: string; step4_bankCityLabel?: string; step4_bankStateLabel?: string; step4_bankPostalCodeLabel?: string; step4_eftWithdrawalLabel?: string; step4_fxWireProcessingFeeLabel?: string; step4_verifyEmailHeaderText?: string; step4_verifyEmailDescriptionText?: string; step4_modalTitle?: string; step4_modalDescription?: string; step4_modalButtonText?: string; dashboard_statusTextActive?: string; dashboard_statusTextNotActive?: string; dashboard_statusTextNotVerified?: string; dashboard_badgeTextSubmittedOn?: string; dashboard_badgeTextSubmittedOnW8?: string; dashboard_badgeTextAwaitingReview?: string; dashboard_taxAlertHeaderNotActiveW9?: string; dashboard_taxAlertHeaderNotActiveW8?: string; dashboard_taxAlertNotActiveMessageW9?: string; dashboard_taxAlertNotActiveMessageW8?: string; dashboard_invalidForm?: string; dashboard_bankingInformationSectionHeader?: string; dashboard_taxDocumentSectionHeader?: string; dashboard_taxDocumentSectionSubHeader?: string; dashboard_noFormNeededSubtext?: string; dashboard_indirectTaxInfoSectionHeader?: string; dashboard_indirectTaxInfoCanada?: string; dashboard_indirectTaxInfoOtherCountry?: string; dashboard_indirectTaxInfoSpain?: string; dashboard_indirectTaxTooltipSupport?: string; dashboard_indirectTaxDetails?: string; dashboard_newFormButton?: string; dashboard_editPaymentInformationButton?: string; dashboard_notRegisteredForTax?: string; dashboard_qstNumber?: string; dashboard_subRegionTaxNumber?: string; dashboard_statusBadgeText?: string; dashboard_thresholdPayoutText?: string; dashboard_accountText?: string; dashboard_invoiceColumnTitle?: string; dashboard_dateColumnTitle?: string; dashboard_earningsColumnTitle?: string; dashboard_indirectTaxColumnTitle?: string; dashboard_payoutFromImpact?: string; dashboard_earningsAfterTaxColumnTitle?: string; dashboard_payoutHoldAlertHeader?: string; dashboard_payoutHoldAlertDescription?: string; dashboard_payoutMissingInformationText?: string; dashboard_invoiceDescription?: string; dashboard_invoicePrevLabel?: string; dashboard_invoiceMoreLabel?: string; dashboard_invoiceHeader?: string; dashboard_invoiceEmptyStateHeader?: string; dashboard_invoiceEmptyStateText?: string; dashboard_replaceTaxFormModalHeader?: string; dashboard_replaceTaxFormModalBodyText?: string; dashboard_verificationRequiredHeader?: string; dashboard_verificationRequiredDescription?: string; dashboard_verificationRequiredInternalHeader?: string; dashboard_verificationRequiredInternalDescription?: string; dashboard_verificationReviewInternalHeader?: string; dashboard_verificationReviewInternalDescription?: string; dashboard_verificationFailedInternalHeader?: string; dashboard_verificationFailedInternalDescription?: string; dashboard_verificationRequiredButtonText?: string; formStep?: string; generalErrorTitle?: string; generalErrorDescription?: string; fieldRequiredError?: string; invalidCharacterError?: string; fieldInvalidError?: string; continueButton?: string; backButton?: string; cancelButton?: string; isPartnerAlertHeader?: string; isPartnerAlertDescription?: string; searchForCountryText?: string; loadingErrorAlertHeader?: string; loadingErrorAlertDescription?: string; taxAndPayoutsDescription?: string; supportLink?: string; stateController?: string; demoData?: Partial<Pick<TaxAndCashMonolith, \"step1_firstName\" | \"step1_lastName\" | \"step1_email\" | \"step1_country\" | \"step1_phoneNumber\" | \"step1_address\" | \"step1_city\" | \"step1_state\" | \"step1_province\" | \"step1_region\" | \"step1_postalCode\" | \"step1_currency\" | \"step1_currencyHelpText\" | \"step1_allowBankingCollection\" | \"step1_personalInformation\" | \"step1_termsAndConditionsLabel\" | \"step1_termsAndConditionsLink\" | \"step1_searchForCurrencyText\" | \"step2_indirectTax\" | \"step2_indirectTaxDescription\" | \"step2_indirectTaxDetails\" | \"step2_otherRegion\" | \"step2_otherRegionSubtext\" | \"step2_notRegistered\" | \"step2_notRegisteredSubtext\" | \"step2_selectedRegion\" | \"step2_indirectTaxNumber\" | \"step2_province\" | \"step2_indirectTaxNumberError\" | \"step2_qstNumber\" | \"step2_isRegisteredQST\" | \"step2_isRegisteredSubRegionIncomeTax\" | \"step2_subRegion\" | \"step2_subRegionTaxNumberLabel\" | \"step2_cannotChangeInfoAlert\" | \"step3_taxForm\" | \"step3_taxFormLabel\" | \"step3_participantType\" | \"step3_businessEntity\" | \"step3_individualParticipant\" | \"step3_taxFormDescription\" | \"step3_taxFormDescriptionIndividualParticipant\" | \"step3_taxFormDescriptionBusinessEntity\" | \"step3_docusignExpired\" | \"step3_docusignSessionWarning\" | \"step3_docusignError\" | \"step3_refreshButton\" | \"step3_exitButton\" | \"step3_modalTitle\" | \"step3_modalDescription\" | \"step3_modalButtonText\" | \"step4_taxAndPayouts\" | \"step4_directlyToBankAccount\" | \"step4_toPayPalAccount\" | \"step4_paymentScheduleBalanceThreshold\" | \"step4_paymentScheduleFixedDay\" | \"step4_paymentDaySelectLabel\" | \"step4_paymentThresholdSelectLabel\" | \"step4_paymentDayFirstOfMonthLabelText\" | \"step4_paymentDayFifteenthOfMonthLabelText\" | \"step4_paymentMethod\" | \"step4_paymentSchedule\" | \"step4_paymentMethodSubtext\" | \"step4_payPalInputLabel\" | \"step4_bankLocationLabel\" | \"step4_beneficiaryAccountNameLabel\" | \"step4_beneficiaryAccountNameDescription\" | \"step4_bankAccountTypeLabel\" | \"step4_checkingSelectItemLabel\" | \"step4_savingsSelectItemLabel\" | \"step4_bankAccountNumberLabel\" | \"step4_ibanLabel\" | \"step4_swiftCodeLabel\" | \"step4_routingCodeLabel\" | \"step4_bankNameLabel\" | \"step4_classificationEntityLabel\" | \"step4_businessSelectItemLabel\" | \"step4_individualSelectItemLabel\" | \"step4_foreignSelectItemLabel\" | \"step4_classificationCPFLabel\" | \"step4_patronymicNameLabel\" | \"step4_voCodeLabel\" | \"step4_agencyCodeLabel\" | \"step4_branchCodeLabel\" | \"step4_classificationLabel\" | \"step4_taxPayerIdLabel\" | \"step4_bankAddressLabel\" | \"step4_bankCityLabel\" | \"step4_bankStateLabel\" | \"step4_bankPostalCodeLabel\" | \"step4_eftWithdrawalLabel\" | \"step4_fxWireProcessingFeeLabel\" | \"step4_verifyEmailHeaderText\" | \"step4_verifyEmailDescriptionText\" | \"step4_modalTitle\" | \"step4_modalDescription\" | \"step4_modalButtonText\" | \"dashboard_statusTextActive\" | \"dashboard_statusTextNotActive\" | \"dashboard_statusTextNotVerified\" | \"dashboard_badgeTextSubmittedOn\" | \"dashboard_badgeTextSubmittedOnW8\" | \"dashboard_badgeTextAwaitingReview\" | \"dashboard_taxAlertHeaderNotActiveW9\" | \"dashboard_taxAlertHeaderNotActiveW8\" | \"dashboard_taxAlertNotActiveMessageW9\" | \"dashboard_taxAlertNotActiveMessageW8\" | \"dashboard_invalidForm\" | \"dashboard_bankingInformationSectionHeader\" | \"dashboard_taxDocumentSectionHeader\" | \"dashboard_taxDocumentSectionSubHeader\" | \"dashboard_noFormNeededSubtext\" | \"dashboard_indirectTaxInfoSectionHeader\" | \"dashboard_indirectTaxInfoCanada\" | \"dashboard_indirectTaxInfoOtherCountry\" | \"dashboard_indirectTaxInfoSpain\" | \"dashboard_indirectTaxTooltipSupport\" | \"dashboard_indirectTaxDetails\" | \"dashboard_newFormButton\" | \"dashboard_editPaymentInformationButton\" | \"dashboard_notRegisteredForTax\" | \"dashboard_qstNumber\" | \"dashboard_subRegionTaxNumber\" | \"dashboard_statusBadgeText\" | \"dashboard_thresholdPayoutText\" | \"dashboard_accountText\" | \"dashboard_invoiceColumnTitle\" | \"dashboard_dateColumnTitle\" | \"dashboard_earningsColumnTitle\" | \"dashboard_indirectTaxColumnTitle\" | \"dashboard_payoutFromImpact\" | \"dashboard_earningsAfterTaxColumnTitle\" | \"dashboard_payoutHoldAlertHeader\" | \"dashboard_payoutHoldAlertDescription\" | \"dashboard_payoutMissingInformationText\" | \"dashboard_invoiceDescription\" | \"dashboard_invoicePrevLabel\" | \"dashboard_invoiceMoreLabel\" | \"dashboard_invoiceHeader\" | \"dashboard_invoiceEmptyStateHeader\" | \"dashboard_invoiceEmptyStateText\" | \"dashboard_replaceTaxFormModalHeader\" | \"dashboard_replaceTaxFormModalBodyText\" | \"dashboard_verificationRequiredHeader\" | \"dashboard_verificationRequiredDescription\" | \"dashboard_verificationRequiredInternalHeader\" | \"dashboard_verificationRequiredInternalDescription\" | \"dashboard_verificationReviewInternalHeader\" | \"dashboard_verificationReviewInternalDescription\" | \"dashboard_verificationFailedInternalHeader\" | \"dashboard_verificationFailedInternalDescription\" | \"dashboard_verificationRequiredButtonText\" | \"formStep\" | \"generalErrorTitle\" | \"generalErrorDescription\" | \"fieldRequiredError\" | \"invalidCharacterError\" | \"fieldInvalidError\" | \"continueButton\" | \"backButton\" | \"cancelButton\" | \"isPartnerAlertHeader\" | \"isPartnerAlertDescription\" | \"searchForCountryText\" | \"loadingErrorAlertHeader\" | \"loadingErrorAlertDescription\" | \"taxAndPayoutsDescription\" | \"supportLink\" | \"stateController\" | \"demoData\" | \"disconnectedCallback\" | \"getGeneralStepTextProps\" | \"render\">>; disconnectedCallback?: () => void; getGeneralStepTextProps?: (prefix: string) => PickPrefix<TaxAndCashMonolith, string> & { generalErrorTitle: string; generalErrorDescription: string; fieldRequiredError: string; invalidCharacterError: string; fieldInvalidError: string; continueButton: string; backButton: string; cancelButton: string; isPartnerAlertHeader: string; isPartnerAlertDescription: string; loadingErrorAlertHeader: string; loadingErrorAlertDescription: string; taxAndPayoutsDescription: string; searchForCountryText: string; formStep: string; supportLink: string; }; render?: () => any; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../../global/demo"
           },
-          "UseTaxAndCashResultType": {
-            "location": "import",
-            "path": "./useTaxAndCash"
+          "TaxAndCashMonolith": {
+            "location": "global"
           }
         }
       },
@@ -5037,9 +5289,6 @@ export class TaxAndCashMonolith {
         "tags": [{
             "text": undefined,
             "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
           }],
         "text": ""
       }
@@ -5051,8 +5300,13 @@ function useDemoTaxAndCash(props) {
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
+  console.log("PROPS", props);
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-tax-and-cash"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return deepmerge({
     step,
     setStep,
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
 }