@saasquatch/mint-components 1.15.0-99 → 1.16.0-1

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

@@ -24,6 +24,18 @@ export class TaxAndCashDashboard {
      * @uiName Not verified tax form badge label
      */
     this.statusTextNotVerified = "Not Verified";
+    /**
+     * Displayed when the participant has not submitted their required tax form.
+     *
+     * @uiName Required tax form badge label
+     */
+    this.statusTextRequired = "Required";
+    /**
+     * Additional text displayed next to the tax form's status badge
+     *
+     * @uiName Required tax form description
+     */
+    this.requiredTaxForm = "Your payouts are on hold until you submit a {taxFormType} tax form.";
     /**
      * Additional text displayed next to the tax form's status badge
      *
@@ -90,13 +102,6 @@ export class TaxAndCashDashboard {
      * @uiName Tax documents section description
      */
     this.taxDocumentSectionSubHeader = "{documentType} tax form";
-    /**
-     * No other statuses or badges will be displayed in the tax form section in this case.
-     *
-     * @uiName Tax form not required text
-     * @uiWidget textArea
-     */
-    this.noFormNeededSubtext = "Tax documents are only required if you are based in the US or joining the referral program of a US based brand.";
     /**
      *
      * @uiName Indirect tax section header
@@ -226,6 +231,18 @@ export class TaxAndCashDashboard {
      * @uiName Verification required alert button text
      */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName W9 payment threshold alert header
+     */
+    this.w9RequiredHeader = "Your next payout is on hold";
+    /**
+     * @uiName W9 payment threshold alert description
+     */
+    this.w9RequiredDescription = "You have surpassed the $600 threshold for a W9 tax form. To remove the hold, you need to submit a W9 tax form as outlined in our {termsAndConditions}. Please click 'Submit W9' to start the process.";
+    /**
+     * @uiName W9 payment threshold alert button text
+     */
+    this.w9RequiredButtonText = "Submit W9";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -314,11 +331,6 @@ export class TaxAndCashDashboard {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
-    /**
-     * @undocumented
-     * @componentState { "title": "Payouts on hold", "props": { "payoutStatus": "HOLD" }, "uiGroup": "Dashboard Properties" }
-     */
-    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -409,6 +421,48 @@ export class TaxAndCashDashboard {
       "reflect": false,
       "defaultValue": "\"Not Verified\""
     },
+    "statusTextRequired": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Required tax form badge label",
+            "name": "uiName"
+          }],
+        "text": "Displayed when the participant has not submitted their required tax form."
+      },
+      "attribute": "status-text-required",
+      "reflect": false,
+      "defaultValue": "\"Required\""
+    },
+    "requiredTaxForm": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Required tax form description",
+            "name": "uiName"
+          }],
+        "text": "Additional text displayed next to the tax form's status badge"
+      },
+      "attribute": "required-tax-form",
+      "reflect": false,
+      "defaultValue": "\"Your payouts are on hold until you submit a {taxFormType} tax form.\""
+    },
     "badgeTextSubmittedOn": {
       "type": "string",
       "mutable": false,
@@ -652,30 +706,6 @@ export class TaxAndCashDashboard {
       "reflect": false,
       "defaultValue": "\"{documentType} tax form\""
     },
-    "noFormNeededSubtext": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Tax form not required text",
-            "name": "uiName"
-          }, {
-            "text": "textArea",
-            "name": "uiWidget"
-          }],
-        "text": "No other statuses or badges will be displayed in the tax form section in this case."
-      },
-      "attribute": "no-form-needed-subtext",
-      "reflect": false,
-      "defaultValue": "\"Tax documents are only required if you are based in the US or joining the referral program of a US based brand.\""
-    },
     "indirectTaxInfoSectionHeader": {
       "type": "string",
       "mutable": false,
@@ -1240,6 +1270,69 @@ export class TaxAndCashDashboard {
       "reflect": false,
       "defaultValue": "\"Start Verification\""
     },
+    "w9RequiredHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W9 payment threshold alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "w-9-required-header",
+      "reflect": false,
+      "defaultValue": "\"Your next payout is on hold\""
+    },
+    "w9RequiredDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W9 payment threshold alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "w-9-required-description",
+      "reflect": false,
+      "defaultValue": "\"You have surpassed the $600 threshold for a W9 tax form. To remove the hold, you need to submit a W9 tax form as outlined in our {termsAndConditions}. Please click 'Submit W9' to start the process.\""
+    },
+    "w9RequiredButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W9 payment threshold alert button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "w-9-required-button-text",
+      "reflect": false,
+      "defaultValue": "\"Submit W9\""
+    },
     "generalErrorTitle": {
       "type": "string",
       "mutable": false,
@@ -1725,59 +1818,27 @@ export class TaxAndCashDashboard {
           }],
         "text": ""
       }
-    },
-    "stateController": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "{ \"title\": \"Payouts on hold\", \"props\": { \"payoutStatus\": \"HOLD\" }, \"uiGroup\": \"Dashboard Properties\" }",
-            "name": "componentState"
-          }],
-        "text": ""
-      },
-      "attribute": "state-controller",
-      "reflect": false,
-      "defaultValue": "\"{}\""
     }
   }; }
 }
 function useDemoTaxAndCashDashboard(props) {
-  // @ts-ignore
   return deepmerge({
     states: {
       dateSubmitted: "today",
       documentType: "W9",
       documentTypeString: "W9",
+      status: "ACTIVE",
       country: "United States",
-      indirectTaxNumber: "55555555",
+      indirectTaxNumber: 55555555,
       indirectTaxType: "Indirect Tax",
-      noFormNeeded: false,
+      noFormNeeded: true,
       disabled: false,
       loading: false,
       showNewFormDialog: false,
       hasHold: false,
-      subRegion: "CA",
-      subRegionTaxNumber: undefined,
-      qstNumber: undefined,
-      isBusinessEntity: false,
-      province: undefined,
-      notRegistered: true,
-      loadingError: false,
+      showVerifyIdentity: false,
       payoutStatus: "DONE",
       veriffLoading: false,
-      canEditPayoutInfo: true,
-      status: "ACTIVE",
     },
     callbacks: {
       onClick: () => console.debug("check step"),
@@ -1787,12 +1848,5 @@ function useDemoTaxAndCashDashboard(props) {
       onVerifyClick: () => console.log("verify"),
     },
     text: props.getTextProps(),
-    slots: {
-      payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
-          states: {
-            badgeStatus: "nextPayout",
-          },
-        } })),
-    },
-  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -2,8 +2,8 @@ import { useLocale, useParentQueryValue, useSetParent, } from "@saasquatch/compo
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { DateTime } from "luxon";
 import { vatLabels } from "../countries";
-import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { getStatus } from "../sqm-payout-status-alert/usePayoutStatus";
+import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { useVeriffApp, VERIFF_COMPLETE_EVENT_KEY } from "../useVeriffApp";
 import { taxTypeToName } from "../utils";
@@ -51,6 +51,8 @@ export const useTaxAndCashDashboard = (props) => {
   useEffect(() => {
     // Clear override context once on submitted
     setContext({});
+    if (window.location.hash)
+      setStep(`/${window.location.hash.replace("#", "")}`);
   }, []);
   const { data, loading, errors: userError, refetch, } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;

package/dist/collection/components/tax-and-cash/sqm-user-info-form/small-views/DocusignExpiredView.js

@@ -10,7 +10,7 @@ const style = {
     gap: "10px",
     margin: "auto",
     textAlign: "center",
-    border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+    border: "1px solid var(--sl-color-gray-200)",
   },
 };
 const sheet = createStyleSheet(style);

package/dist/collection/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.js

@@ -25,7 +25,7 @@ const style = {
     gap: "16px",
   },
   HR: {
-    border: "var(--sqm-border-thickness, 1px) solid #E0E0E0",
+    border: "1px solid #E0E0E0",
     margin: "10px 0",
   },
   Input: { maxWidth: "500px" },
@@ -40,7 +40,7 @@ const style = {
   ErrorInput: {
     maxWidth: "500px",
     "&::part(base)": {
-      border: "var(--sqm-border-thickness, 1px) solid var(--sl-color-danger-500)",
+      border: "1px solid var(--sl-color-danger-500)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {

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

@@ -1,24 +1,23 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-// import { GeneralLoadingView } from "../TaxForm.stories";
-import { FORM_STEPS } from "../data";
-import { PHONE_EXTENSIONS } from "../phoneExtensions";
-import LoadingView from "../sqm-tax-and-cash/LoadingView";
+import { GeneralLoadingView } from "../TaxForm.stories";
+import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 import { formatErrorMessage, validateBillingField } from "../utils";
+import { PHONE_EXTENSIONS } from "../phoneExtensions";
 const style = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-icon)",
+      border: "1px solid var(--sl-color-danger-500)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-danger-500)",
     },
   },
   ErrorText: {
-    color: "var(--sqm-danger-color-icon)",
+    color: "var(--sl-color-danger-500)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -49,6 +48,9 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
+  DescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -57,8 +59,28 @@ const style = {
       borderRadius: "50%",
     },
   },
+  AlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  PartnerAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
   PageDescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -92,15 +114,11 @@ const vanillaStyle = `
        padding: 0;
        box-sizing: border-box;
     }
-    a {
-      color: var(--sqm-text);
-      color: inherit !important;
-      text-decoration: underline;
-    }
 
     p {
       line-height: 18px;
-      font-size: var(--sl-font-size-small);
+      color: var(--sl-color-gray-800);
+       font-size: var(--sl-font-size-small);
     }
 
     sl-radio-group::part(base) {
@@ -111,145 +129,7 @@ const vanillaStyle = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-
-    sl-button[type="primary"]::part(base){
-        background-color: var(--sqm-primary-button-background);
-        color: var(--sqm-primary-button-color);
-        border-color: var(--sqm-primary-button-color-border);
-        border-radius: var(--sqm-primary-button-radius);
-    }
-
-    sl-button[type="primary"]::part(base):hover{
-        background-color: var(--sqm-primary-button-background-hover);
-    }
-
-    sl-button[type="primary"]::part(base):focus{
-        box-shadow: none;
-    }
-
-    sl-button[type="secondary"]::part(base){
-        background-color: var(--sqm-secondary-button-background);
-        color: var(--sqm-secondary-button-color);
-        border-color: var(--sqm-secondary-button-color-border);
-        border-radius: var(--sqm-secondary-button-radius);
-    }
-
-    sl-button[type="secondary"]::part(base):hover{
-        background-color: var(--sqm-secondary-button-background-hover);
-    }
-
-
-
-*::part(primarybutton-base){
-  background-color: var(--sqm-primary-button-background);
-  color: var(--sqm-primary-button-color);
-  border-color: var(--sqm-primary-button-color-border);
-  border-radius: var(--sqm-primary-button-radius);
-}
-
-*::part(primarybutton-base):hover{
-  background-color: var(--sqm-primary-button-background-hover);
-}
-
-*::part(primarybutton-base):focus{
-  box-shadow: none;
-}
-
-*::part(secondarybutton-base){
-  background-color: var(--sqm-secondary-button-background);
-  color: var(--sqm-secondary-button-color);
-  border-color: var(--sqm-secondary-button-color-border);
-  border-radius: var(--sqm-secondary-button-radius);
-}
-
-*::part(secondarybutton-base):hover{
-  background-color: var(--sqm-secondary-button-background-hover);
-}
-
-*::part(secondarybutton-base){
-  background-color: var(--sqm-secondary-button-background);
-  color: var(--sqm-secondary-button-color);
-  border-color: var(--sqm-secondary-button-color-border);
-  border-radius: var(--sqm-secondary-button-radius);
-  width: max-content;
-  display: flex;
-  margin: auto;
-}
-
-*::part(secondarybutton-base):hover{
-  background: var(--sqm-secondary-button-background-hover);
-}
-
-    sl-input::part(label),
-    sl-select::part(label),
-    sl-textarea::part(label){
-      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
-      font-weight: var(--sl-font-weight-semibold);
-      color: var(--sqm-input-label-color, var(--sqm-text), black);
-    }
-
-    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
-    sl-input::part(base),
-    sl-dropdown::part(base),
-    sl-textarea::part(base){
-      background-color: var(--sqm-input-background, #fff);
-      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
-      color: var(--sqm-input-color, white);
-      border-width: var(--sqm-border-thickness, 1px);
-      border-style: solid; 
-      border-color: var(--sqm-input-border-color, #ccc); 
-    }
-
-
-    sl-select::part(menu) {
-      background: var(--sqm-input-background, inherit);
-      color: var(--sqm-input-color, inherit);
-      border:none;
-    }
-
-    sl-select::part(panel) {
-      border-radius: var(--sqm-border-radius-normal);
-    }
-
-    sl-select::part(help-text) {
-      color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
-    }
-
-    sl-input::part(base):focus,
-    sl-select::part(base):focus, /* Corrected part name for sl-select */
-    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
-      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
-    }
-
-    sl-input[disabled]::part(label),
-    sl-select[disabled]::part(label),
-    sl-textarea[disabled]::part(label){
-      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
-    }
-
-    sl-input[disabled]::part(base),
-    sl-select[disabled]::part(base),
-    sl-textarea[disabled]::part(base){
-      background: var(--sqm-input-disabled-background, #f5f5f5);
-      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
-    }
-
-
-    sl-input::part(input):-webkit-autofill {
-      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
-      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
-    }
-
-    sl-input::part(input):-webkit-autofill:hover {
-      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
-      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
-    }
-
-    sl-input::part(input):-webkit-autofill:focus {
-      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
-      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
-    }
-`;
+  `;
 export const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
@@ -279,15 +159,18 @@ export const UserInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     states.loadingError && (h("div", null,
-      h("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
-        h("p", { part: "alert-description" }, intl.formatMessage({
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.AlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        h("strong", null, text.error.loadingErrorAlertHeader),
+        h("br", null),
+        intl.formatMessage({
           id: "loadingErrorAlertDescription",
           defaultMessage: text.error.loadingErrorAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))))),
-    states.loading ? (h(LoadingView, null)) : (h("div", null,
+        })),
+      h("br", null))),
+    states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
           !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -296,25 +179,29 @@ export const UserInfoFormView = (props) => {
           }, { step: states.step, count: FORM_STEPS }))),
           h("h3", null, text.personalInformation),
           h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.generalTitle),
-        h("p", { part: "alert-description" }, intl.formatMessage({
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        h("strong", null, text.error.generalTitle),
+        h("br", null),
+        intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })))),
-      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
-        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
-        h("p", { part: "alert-description" }, intl.formatMessage({
+        }))),
+      (states.isPartner || states.isUser) && (h("sl-alert", { type: "primary", open: true, class: sheet.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+        h("sl-icon", { slot: "icon", name: "info-circle" }),
+        h("strong", null, text.isPartnerAlertHeader),
+        h("br", null),
+        intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })))),
+        }))),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }

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

@@ -1,9 +1,9 @@
 import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
+import { Component, Host, Prop, State, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../data";
+import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
 import { UserInfoFormView } from "./sqm-user-info-form-view";
 import { useUserInfoForm } from "./useUserInfoForm";
 /**
@@ -183,12 +183,13 @@ export class TaxForm {
   }
   render() {
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h(UserInfoFormView, { data: props.data, 
-      // @ts-ignore
-      states: props.states, callbacks: {
-        ...props.callbacks,
-        onSubmit: props.onSubmit,
-      }, text: props.text, refs: props.refs }));
+    return (h(Host, null,
+      h(UserInfoFormView, { data: props.data, 
+        // @ts-ignore
+        states: props.states, callbacks: {
+          ...props.callbacks,
+          onSubmit: props.onSubmit,
+        }, text: props.text, refs: props.refs })));
   }
   static get is() { return "sqm-user-info-form"; }
   static get encapsulation() { return "shadow"; }
@@ -923,10 +924,9 @@ export class TaxForm {
 }
 function useDemoUserInfoForm(props) {
   const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
-  // @ts-ignore
   return deepmerge({
     setStep,
-    onSubmit: async () => {
+    onSubmit: () => {
       setStep("/2");
     },
     onRadioClick: () => { },