import { h } from "@stencil/core";
import { intl } from "../../../global/global";
import { createStyleSheet } from "../../../styling/JSS";
const style = {
  ErrorAlertContainer: {
    "&::part(base)": {
      backgroundColor: "var(--sl-color-red-100)",
      borderTop: "none",
    },
  },
  WarningAlertContainer: {
    "&::part(base)": {
      backgroundColor: "var(--sl-color-yellow-100)",
      borderTop: "none",
      maxWidth: "600px",
    },
  },
  WarningHoldAlertContainer: {
    marginLeft: "-20px",
    "&::part(base)": {
      maxWidth: "850px",
      border: "none",
      backgroundColor: "transparent",
      color: "var(--sqm-text)",
    },
    "& sl-icon::part(base)": {
      color: "var(--sqm-warning-color-icon)",
    },
  },
  ErrorHoldAlertContainer: {
    marginLeft: "-20px",
    "&::part(base)": {
      maxWidth: "850px",
      border: "none",
      backgroundColor: "transparent",
      color: "var(--sqm-text)",
    },
    "& sl-icon::part(base)": {
      color: "var(--sqm-danger-color-icon)",
    },
  },
  ExpiringSoonAlertContainer: {
    "&::part(base)": {
      backgroundColor: "var(--sl-color-yellow-100)",
      borderTop: "none",
    },
  },
  BankingInformationContainer: {
    maxWidth: "700px",
  },
  IndirectTaxPreviewContainer: {
    marginTop: "var(--sl-spacing-x-large)",
    borderTop: "1px solid var(--sl-color-neutral-200)",
  },
  IndirectTaxPreviewHeaderContainer: {
    marginTop: "var(--sl-spacing-large)",
    marginBottom: "var(--sl-spacing-xx-small)",
    margin: "0",
    display: "flex",
    alignItems: "center",
    gap: "var(--sl-spacing-x-small)",
    "&::part(base)": {
      color: "var(--sqm-text)",
    },
  },
  IndirectTaxPreviewDetails: {
    gap: "var(--sl-spacing-x-small)",
    display: "flex",
    flexDirection: "column",
    lineHeight: "var(--sl-spacing-medium)",
    fontSize: "var(--sl-font-size-small)",
    color: "var(--sqm-text-subdued)",
  },
  InvoiceTableContainer: {
    marginTop: "var(--sl-spacing-medium)",
  },
  NotRegisteredIndirectTaxText: {
    color: "var(--sqm-text-subdued)",
  },
  TaxDocumentsContainer: {
    marginTop: "var(--sl-spacing-xx-large)",
    borderTop: "1px solid var(--sl-color-neutral-200)",
  },
  TaxDocumentsSectionHeaderContainer: {
    marginTop: "var(--sl-spacing-x-large)",
    marginBottom: "var(--sl-spacing-xx-small)",
  },
  StatusContainer: {
    marginTop: "var(--sl-spacing-x-large)",
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-x-small)",
    "& h3": {
      margin: "0",
    },
    "& p": {
      margin: "0",
      paddingTop: "2px",
    },
  },
  StatusAlert: {
    fontSize: "var(--sl-font-size-small)",
  },
  TaxFormDetailsContainer: {
    display: "flex",
    gap: "var(--sl-spacing-small)",
    alignItems: "center",
  },
  NewFormButton: {
    marginTop: "var(--sl-spacing-large)",
    maxWidth: "300px",
  },
  EditBankDetailsButton: {
    marginTop: "var(--sl-spacing-large)",
  },
  TaxSectionSkeletonContainer: {
    display: "flex",
    flexDirection: "column",
    marginTop: "var(--sl-spacing-x-large)",
  },
  TaxDocSubtext: {
    margin: "0",
    color: "var(--sqm-text-subdued)",
    lineHeight: "var(--sl-spacing-medium)",
    fontSize: "var(--sl-font-size-small)",
    marginLeft: "1px",
  },
  TooltipContainer: {
    display: "flex",
    textAlign: "center",
    width: "250px",
    "&::part(body)": {
      pointerEvents: "auto",
    },
  },
  ToolTip: {
    top: "6px",
    width: "16px",
    height: "16px",
  },
  TaxNumberContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "6px",
  },
  DescriptionText: {
    color: "var(--sqm-text-subdued)",
    fontSize: "var(--sl-font-size-x-small)",
    marginBottom: "none",
    maxWidth: "492px",
  },
  PageDescriptionText: {
    color: "var(--sqm-text-subdued)",
    fontSize: "var(--sl-font-size-medium)",
    marginTop: "0",
  },
  Dialog: {
    "&::part(panel)": {
      maxWidth: "420px",
    },
    "&::part(close-button)": {
      marginBottom: "var(--sl-spacing-xx-large)",
    },
    "&::part(title)": {
      fontSize: "var(--sl-font-size-x-large)",
      fontWeight: "600",
      marginTop: "var(--sl-spacing-xxx-large)",
      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
    },
    "&::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%" },
  SuccessBadge: {
    "&::part(base)": {
      textAlign: "center",
      whiteSpace: "pre-line",
      background: "var(--sqm-success-color-icon)",
    },
  },
  WarningBadge: {
    "&::part(base)": {
      textAlign: "center",
      whiteSpace: "pre-line",
      background: "var(--sqm-warning-color-icon)",
    },
  },
  ErrorBadge: {
    "&::part(base)": {
      textAlign: "center",
      whiteSpace: "pre-line",
      background: "var(--sqm-danger-color-icon)",
    },
  },
  SubduedText: {
    color: "var(--sqm-text-subdued)",
  },
  ButtonContainer: {
    display: "flex",
    gap: "var(--sl-spacing-medium)",
    flexWrap: "wrap",
  },
  DropdownTooltipContainer: {
    top: "-4px",
    "&::part(panel)": {
      boxShadow: "none",
      border: "none",
      marginTop: "var(--sl-spacing-x-small)",
    },
  },
  DropdownContent: {
    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
    fontSize: "var(--sl-font-size-small)",
    fontFamily: "var(--sl-font-sans)",
    fontWeight: "var(--sl-font-weight-normal)",
    lineHeight: "var(--sl-line-height-dense)",
    minWidth: "225px",
    backgroundColor: "var(--sl-color-gray-900)",
    color: "var(--sl-color-white)",
    borderRadius: "var(--sl-border-radius-medium)",
    position: "relative",
    marginLeft: "5px",
  },
  DropdownArrow: {
    position: "absolute",
    left: "-5px",
    top: "50%",
    transform: "translateY(-50%)",
    width: "0",
    height: "0",
    borderTop: "5px solid transparent",
    borderBottom: "5px solid transparent",
    borderRight: "5px solid var(--sl-color-gray-900)",
    zIndex: "1",
  },
  DropdownLink: {
    color: "var(--sl-color-white)",
    textDecoration: "underline",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const vanillaStyle = `
    :host{
      display: block;   
    }

    sl-button[type="secondary"]::part(base) {
    font-family: var(--sqm-primary-font);
      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);
      color: var(--sqm-secondary-button-color-hover);
      border-color: var(--sqm-secondary-button-border-color-hover);
    }
    
  `;
export const TaxAndCashDashboardView = (props) => {
  var _a;
  const { states, text, callbacks, slots } = props;
  function getAlert(status) {
    switch (status) {
      case "OVER_W9_THRESHOLD":
        if (states.enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9") {
          return {
            header: text.w9RequiredHeader,
            description: intl.formatMessage({
              id: "w9RequiredDescription",
              defaultMessage: text.w9RequiredDescription,
            }, {
              termsAndConditions: (h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
            }),
            button: (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
            alertType: "warning",
            icon: "info-circle",
            class: sheet.classes.WarningHoldAlertContainer,
          };
        }
        else {
          return {
            header: text.payoutHoldAlertHeader,
            description: intl.formatMessage({
              id: "payoutHoldAlertDescription",
              defaultMessage: text.payoutHoldAlertDescription,
            }, {
              supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
            }),
            buttonText: null,
            alertType: "warning",
            icon: "exclamation-triangle",
            class: sheet.classes.WarningHoldAlertContainer,
          };
        }
      case "VERIFICATION:REQUIRED":
        return {
          header: text.verificationRequiredHeader,
          description: intl.formatMessage({
            id: "verificationRequiredDescription",
            defaultMessage: text.verificationRequiredDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          buttonText: text.verificationRequiredButtonText,
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "VERIFICATION:INTERNAL":
        return {
          header: text.verificationRequiredInternalHeader,
          description: intl.formatMessage({
            id: "verificationRequiredInternalDescription",
            defaultMessage: text.verificationRequiredInternalDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "VERIFICATION:REVIEW":
        return {
          header: text.verificationReviewInternalHeader,
          description: intl.formatMessage({
            id: "verificationReviewInternalDescription",
            defaultMessage: text.verificationReviewInternalDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "VERIFICATION:FAILED":
        return {
          header: text.verificationFailedInternalHeader,
          description: intl.formatMessage({
            id: "verificationFailedInternalDescription",
            defaultMessage: text.verificationFailedInternalDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          alertType: "error",
          icon: "exclamation-octagon",
          class: sheet.classes.ErrorHoldAlertContainer,
        };
      case "NEW_PAYEE_REVIEW":
        return {
          header: text.accountReviewHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.accountReviewDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          buttonText: null,
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "PAYMENT_HOLD_ON_CHANGE":
        return {
          header: text.paymentHoldOnChangeHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.paymentHoldOnChangeDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          buttonText: null,
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "BENEFICIARY_NAME_INVALID":
        return {
          header: text.beneficiaryNameInvalidHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.beneficiaryNameInvalidDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          button: (h("div", { class: sheet.classes.ButtonContainer },
            h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
            h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "BENEFICIARY_NAME_MISMATCH":
        return {
          header: text.beneficiaryNameMismatchHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.beneficiaryNameMismatchDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          button: (h("div", { class: sheet.classes.ButtonContainer },
            h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
            h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "BANK_TAX_NAME_MISMATCH":
        return {
          header: text.bankTaxNameMismatchHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.bankTaxNameMismatchDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          button: (h("div", { class: sheet.classes.ButtonContainer },
            h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
            h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "WITHDRAWAL_SETTINGS_INVALID":
        return {
          header: text.withdrawalSettingsInvalidHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.withdrawalSettingsInvalidDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          button: (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)),
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "PAYMENT_RETURNED":
        return {
          header: text.paymentReturnedHeader,
          description: intl.formatMessage({
            id: "accountReviewDescription",
            defaultMessage: text.paymentReturnedDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          button: (h("sl-button", { disabled: states.disabled || states.loading, type: "primary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)),
          alertType: "error",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      case "HOLD":
        return {
          header: text.payoutHoldAlertHeader,
          description: intl.formatMessage({
            id: "payoutHoldAlertDescription",
            defaultMessage: text.payoutHoldAlertDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }),
          buttonText: null,
          alertType: "warning",
          icon: "exclamation-triangle",
          class: sheet.classes.WarningHoldAlertContainer,
        };
      default:
        return;
    }
  }
  const statusMap = {
    NOT_VERIFIED: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
      h("sl-badge", { class: sheet.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
      h("p", { class: sheet.classes.SubduedText }, intl.formatMessage({
        id: `badgeTextAwaitingReview`,
        defaultMessage: text.badgeTextAwaitingReview,
      }, {
        dateSubmitted: states.dateSubmitted,
      })))),
    ACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
      h("sl-badge", { class: sheet.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
      h("p", { class: sheet.classes.SubduedText }, intl.formatMessage({
        id: `badgeTextSubmittedOn`,
        defaultMessage: states.documentType === "W9" || !states.documentType
          ? text.badgeTextSubmittedOn
          : text.badgeTextSubmittedOnW8,
      }, {
        dateSubmitted: states.dateSubmitted,
      })))),
    INACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
      h("sl-badge", { class: sheet.classes.ErrorBadge, type: "danger", pill: true }, text.statusTextNotActive),
      h("p", { class: sheet.classes.SubduedText }, text.invalidForm))),
    undefined: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
      h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
      h("p", null, intl.formatMessage({
        id: `requiredTaxForm`,
        defaultMessage: text.requiredTaxForm,
      }, {
        taxFormType: states.documentType,
      })))),
  };
  const alertMap = {
    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", class: sheet.classes.ErrorHoldAlertContainer, type: "danger", open: true },
      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
      h("strong", null, intl.formatMessage({
        id: `taxAlertHeaderNotActive`,
        defaultMessage: states.documentType === "W9"
          ? text.taxAlertHeaderNotActiveW9
          : text.taxAlertHeaderNotActiveW8,
      }, {
        documentType: states.documentType || "Your",
      })),
      h("br", null),
      intl.formatMessage({
        id: `taxAlertMessage`,
        defaultMessage: states.documentType === "W9"
          ? text.taxAlertNotActiveMessageW9
          : text.taxAlertNotActiveMessageW8,
      }, {
        documentType: states.documentTypeString || "tax",
      }))),
  };
  const getIndirectTaxRegisteredIn = () => {
    if (states.province) {
      return intl.formatMessage({
        id: `indirectTaxInfoCanada`,
        defaultMessage: text.indirectTaxInfoCanada,
      }, {
        country: "Canada",
        province: states.province,
      });
    }
    else if (states.subRegion) {
      return intl.formatMessage({
        id: `indirectTaxInfoSpain`,
        defaultMessage: text.indirectTaxInfoSpain,
      }, {
        country: states.country,
        subRegion: states.subRegion,
      });
    }
    else {
      return intl.formatMessage({
        id: `indirectTaxInfoOtherCountry`,
        defaultMessage: text.indirectTaxInfoOtherCountry,
      }, {
        country: states.country,
      });
    }
  };
  const alertInfo = getAlert(states.payoutStatus);
  const dropdownHover = (el) => {
    var _a;
    if (!el)
      return;
    const trigger = el.querySelector('[slot="trigger"]');
    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
    if (!trigger || !panel)
      return;
    let hideTimeout;
    const show = () => {
      clearTimeout(hideTimeout);
      el.show();
    };
    const scheduleHide = () => {
      hideTimeout = setTimeout(() => el.hide(), 100);
    };
    trigger.addEventListener("mouseenter", show);
    trigger.addEventListener("mouseleave", scheduleHide);
    panel.addEventListener("mouseenter", show);
    panel.addEventListener("mouseleave", scheduleHide);
    return () => {
      trigger.removeEventListener("mouseenter", show);
      trigger.removeEventListener("mouseleave", scheduleHide);
      panel.removeEventListener("mouseenter", show);
      panel.removeEventListener("mouseleave", scheduleHide);
      clearTimeout(hideTimeout);
    };
  };
  return (h("div", null,
    h("div", null,
      h("style", { type: "text/css" },
        styleString,
        vanillaStyle),
      states.loadingError && (h("div", null,
        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
          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)),
          })))),
      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
        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)),
        }))),
      alertInfo && (h("sqm-form-message", { loading: states.loading, exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
        h("strong", null, alertInfo.header),
        h("p", { style: { margin: "0" } }, alertInfo.description),
        alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
        alertInfo.button ? (alertInfo.button) : (h("div", { style: { display: "none" } })))),
      h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
        h("p", null, text.replaceTaxFormModalBodyText),
        h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
        h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
      states.status === "INACTIVE" && alertMap[states.status],
      h("div", null,
        h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
        h("div", { class: sheet.classes.BankingInformationContainer },
          slots.payoutDetailsCardSlot,
          !states.loading && (h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
      (!states.noFormNeeded || !!states.status) && (h("div", { class: sheet.classes.TaxDocumentsContainer },
        h("div", null, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
          h("sqm-skeleton", { width: "15%", height: "10px" }),
          h("sqm-skeleton", { width: "25%", height: "24px" }))) : (h("div", null,
          h("div", null,
            h("span", { class: sheet.classes.TaxFormDetailsContainer },
              h("div", { class: sheet.classes.StatusContainer },
                h("h3", null, states.documentType
                  ? intl.formatMessage({
                    id: "section-subheader",
                    defaultMessage: text.taxDocumentSectionSubHeader,
                  }, {
                    documentType: states.documentTypeString,
                  })
                  : text.taxDocumentSectionSubHeaderNoDocument),
                h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
            (!states.noFormNeeded || !!states.status) &&
              states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
      h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
        h("sqm-skeleton", { width: "15%", height: "10px" }),
        h("sqm-skeleton", { width: "25%", height: "24px" }))) : (h("div", null,
        h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
          text.indirectTaxInfoSectionHeader,
          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet.classes.DropdownTooltipContainer },
            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet.classes.ToolTip, style: { cursor: "pointer" } }),
            h("div", { class: sheet.classes.DropdownContent },
              h("div", { class: sheet.classes.DropdownArrow }),
              intl.formatMessage({
                id: "indirectTaxTooltipSupport",
                defaultMessage: text.indirectTaxTooltipSupport,
              }, {
                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet.classes.DropdownLink }, text.supportLink)),
              })))),
        h("div", { class: sheet.classes.IndirectTaxPreviewDetails },
          h("span", null, states.notRegistered ? (h("span", { class: sheet.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
            id: "notRegisteredForTax",
            defaultMessage: text.notRegisteredForTax,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          }))) : (getIndirectTaxRegisteredIn())),
          !states.notRegistered && (h("div", { class: sheet.classes.TaxNumberContainer },
            h("span", null, intl.formatMessage({
              id: `indirectTaxDetails`,
              defaultMessage: text.indirectTaxDetails,
            }, {
              indirectTaxType: states.indirectTaxType,
              indirectTaxNumber: states.indirectTaxNumber,
            })),
            h("span", null,
              states.qstNumber &&
                intl.formatMessage({
                  id: `qstNumber`,
                  defaultMessage: text.qstNumber,
                }, {
                  qstNumber: states.qstNumber,
                }),
              states.subRegionTaxNumber &&
                intl.formatMessage({
                  id: `subRegionTaxNumber`,
                  defaultMessage: text.subRegionTaxNumber,
                }, {
                  subRegionTaxNumber: states.subRegionTaxNumber,
                })))),
          !states.notRegistered && (h("div", { class: sheet.classes.InvoiceTableContainer },
            h("sqm-invoice-table", { description: text.invoiceDescription, "prev-label": text.invoicePrevLabel, "more-label": text.invoiceMoreLabel, header: text.invoiceHeader, "empty-state-header": text.invoiceEmptyStateHeader, "empty-state-text": text.invoiceEmptyStateText },
              h("sqm-invoice-table-download-column", null),
              h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
              h("sqm-invoice-table-data-column", { "column-title": text.invoiceColumnTitle, property: "invoiceId" }),
              h("sqm-invoice-table-data-column", { "column-title": text.earningsColumnTitle, property: "earnings" }),
              h("sqm-invoice-table-data-column", { "column-title": text.indirectTaxColumnTitle, property: "indirectTax" }),
              h("sqm-invoice-table-data-column", { "column-title": text.earningsAfterTaxColumnTitle, property: "netEarnings" })))))))))));
};
