@saasquatch/mint-components 2.3.0-1 → 2.3.0-2

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

@@ -0,0 +1,206 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Host, Prop, h } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../../utils/utils";
+import { PayoutDetailsCardView } from "./sqm-payout-details-card-view";
+import { usePayoutDetailsCard } from "./usePayoutDetailsCard";
+/**
+ * @uiName Payout Details Card
+ * @exampleGroup Tax and Cash Components
+ */
+export class PayoutDetailsCard {
+  constructor() {
+    /**
+     * Badge text indicating payout status
+     * @uiName Payout badge status text
+     */
+    this.statusBadgeText = "{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} other {Failed}}";
+    /**
+     * Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid.
+     * @uiName Payout schedule by threshold text
+     */
+    this.thresholdPayoutText = "Next payout occurs when balance is {thresholdBalance}";
+    /**
+     * Shown before the participant’s bank account information.
+     * @uiName Bank account field label
+     */
+    this.accountText = "Account";
+    /**
+     * Text displayed for existing publishers that do not have saved banking information.
+     * @uiName Payout missing information subtext
+     */
+    this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
+    /**
+     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
+     */
+    this.stateController = "{}";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    const props = getProps(this);
+    return {
+      ...props,
+    };
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoPayoutDetailsCard(this)
+      : usePayoutDetailsCard(this);
+    return (h(Host, null,
+      h(PayoutDetailsCardView, { text: props.text, states: props.states })));
+  }
+  static get is() { return "sqm-payout-details-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "statusBadgeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Payout badge status text",
+            "name": "uiName"
+          }],
+        "text": "Badge text indicating payout status"
+      },
+      "attribute": "status-badge-text",
+      "reflect": false,
+      "defaultValue": "\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} other {Failed}}\""
+    },
+    "thresholdPayoutText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Payout schedule by threshold text",
+            "name": "uiName"
+          }],
+        "text": "Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid."
+      },
+      "attribute": "threshold-payout-text",
+      "reflect": false,
+      "defaultValue": "\"Next payout occurs when balance is {thresholdBalance}\""
+    },
+    "accountText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Bank account field label",
+            "name": "uiName"
+          }],
+        "text": "Shown before the participant\u2019s bank account information."
+      },
+      "attribute": "account-text",
+      "reflect": false,
+      "defaultValue": "\"Account\""
+    },
+    "payoutMissingInformationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Payout missing information subtext",
+            "name": "uiName"
+          }],
+        "text": "Text displayed for existing publishers that do not have saved banking information."
+      },
+      "attribute": "payout-missing-information-text",
+      "reflect": false,
+      "defaultValue": "\"Missing banking information, go to Impact.com to resolve.\""
+    },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<any>",
+        "resolved": "{ [x: string]: any; [x: number]: any; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../../global/demo"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoPayoutDetailsCard(props) {
+  return deepmerge({
+    states: {
+      loading: false,
+      error: false,
+      thresholdBalance: "$50",
+      mainCurrency: { currencyText: "USD", amountText: "100.00" },
+      badgeStatus: "nextPayout",
+      payoutType: "BANK_TRANSFER",
+      nextPayoutDate: "March 14, 2024",
+      paypalEmailAddress: "joesmith@example.com",
+      otherCurrencies: false,
+      hasW9Pending: false,
+      hasDatePending: true,
+      cardNumberPreview: "XX2381",
+      balance: "20.00 USD",
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,61 @@
+import { useParentQueryValue } from "@saasquatch/component-boilerplate";
+import { DateTime } from "luxon";
+import { intl } from "../../../global/global";
+import { USER_QUERY_NAMESPACE } from "../data";
+export function usePayoutDetailsCard(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  const { data, loading } = useParentQueryValue(USER_QUERY_NAMESPACE);
+  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;
+  function getPayoutDetailedStatusText(paymentDay) {
+    var _a;
+    const currentDay = DateTime.now().day;
+    if (paymentDay === "1") {
+      return currentDay === 1
+        ? DateTime.now().toFormat("LLL dd, yyyy")
+        : DateTime.now()
+          .plus({ month: 1 })
+          .startOf("month")
+          .toFormat("LLL dd, yyyy");
+    }
+    else if (paymentDay === "15") {
+      return currentDay <= 15
+        ? DateTime.now()
+          .plus({ day: 15 - currentDay })
+          .toFormat("LLL dd, yyyy")
+        : DateTime.now()
+          .plus({ month: 1 })
+          .startOf("month")
+          .plus({ day: 14 })
+          .toFormat("LLL dd, yyyy");
+    }
+    else {
+      intl.formatMessage({
+        id: `nextPayoutBalance`,
+        defaultMessage: props.thresholdPayoutText,
+      }, {
+        thresholdBalance: (_a = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _a === void 0 ? void 0 : _a.paymentThreshold,
+      });
+    }
+  }
+  const paymentDay = getPayoutDetailedStatusText((_c = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _c === void 0 ? void 0 : _c.paymentDay);
+  const isPayoutToday = DateTime.now().toFormat("LLL dd, yyyy") === paymentDay;
+  return {
+    states: {
+      loading,
+      thresholdBalance: ((_d = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _d === void 0 ? void 0 : _d.paymentThreshold) ? `${publisher === null || publisher === void 0 ? void 0 : publisher.currency}${(_e = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _e === void 0 ? void 0 : _e.paymentThreshold}`
+        : undefined,
+      balance: (_f = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _f === void 0 ? void 0 : _f.balance,
+      badgeStatus: ((_g = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _g === void 0 ? void 0 : _g.paymentSchedulingType) !== "FIXED_DAY"
+        ? "thresholdPayout"
+        : isPayoutToday
+          ? "payoutToday"
+          : "nextPayout",
+      payoutType: (_h = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _h === void 0 ? void 0 : _h.paymentMethod,
+      error: (_j = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _j === void 0 ? void 0 : _j.hold,
+      paypalEmailAddress: (_k = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _k === void 0 ? void 0 : _k.paypalEmailAddress,
+      cardNumberPreview: (_l = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _l === void 0 ? void 0 : _l.bankAccountNumber,
+      nextPayoutDate: paymentDay,
+    },
+    text: props.getTextProps(),
+  };
+}

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

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Payout Status Alert",
+};
+const defaultProps = {
+  error: false,
+  status: "INFORMATION_REQUIRED",
+  loading: false,
+  veriffLoading: false,
+};
+export const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps } }));
+export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:REQUIRED" } } }));
+export const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:INTERNAL" } } }));
+export const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoData: {
+    states: {
+      ...defaultProps,
+      status: "VERIFICATION:REVIEW",
+    },
+  } }));
+export const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:FAILED" } } }));
+export const W9ThresholdReached = () => (h("sqm-payout-status-alert", { demoData: {
+    states: {
+      ...defaultProps,
+      enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
+      status: "OVER_W9_THRESHOLD",
+    },
+  } }));
+export const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
+export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));
+export const Error = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, error: true } } }));
+export const NewPayeeReview = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "NEW_PAYEE_REVIEW" } } }));
+export const PaymentHoldOnChange = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
+export const BeneficiaryNameInvalid = () => (h("sqm-payout-status-alert", { demoData: {
+    states: { ...defaultProps, status: "BENEFICIARY_NAME_INVALID" },
+  } }));
+export const BeneficiaryNameMismatch = () => (h("sqm-payout-status-alert", { demoData: {
+    states: { ...defaultProps, status: "BENEFICIARY_NAME_MISMATCH" },
+  } }));
+export const BankTaxNameMismatch = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "BANK_TAX_NAME_MISMATCH" } } }));
+export const WithdrawalSettingsInvalid = () => (h("sqm-payout-status-alert", { demoData: {
+    states: { ...defaultProps, status: "WITHDRAWAL_SETTINGS_INVALID" },
+  } }));
+export const PaymentReturned = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "PAYMENT_RETURNED" } } }));

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

@@ -0,0 +1,285 @@
+import { h } from "@stencil/core";
+import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
+const style = {
+  ButtonContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-medium)",
+    flexWrap: "wrap",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  AlertDescriptionText: {
+    margin: "0",
+    marginBottom: "var(--sl-spacing-small)",
+  },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
+};
+const vanillaStyle = `
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PayoutStatusAlertView(props) {
+  const { text, states, data, callbacks } = props;
+  function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "error",
+      };
+    switch (status) {
+      case "INFORMATION_REQUIRED":
+        return {
+          header: text.informationRequiredHeader,
+          description: text.informationRequiredDescription,
+          buttonText: text.informationRequiredButtonText,
+          alertType: "info",
+        };
+      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",
+        };
+      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",
+        };
+      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",
+        };
+      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",
+        };
+      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)),
+            }),
+            buttonText: text.w9RequiredButtonText,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+          };
+        }
+        else {
+          return {
+            header: text.holdHeader,
+            description: intl.formatMessage({
+              id: "holdDescription",
+              defaultMessage: text.holdDescription,
+            }, {
+              supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+            }),
+            buttonText: null,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+          };
+        }
+      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",
+        };
+      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",
+        };
+      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.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      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.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      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.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      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("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      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("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "error",
+          icon: "exclamation-triangle",
+        };
+      case "HOLD":
+        return {
+          header: text.holdHeader,
+          description: intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+        };
+      default:
+        return;
+    }
+  }
+  function getButton(status) {
+    switch (status) {
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
+          return;
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        // Demo case
+        h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
+      case "INFORMATION_REQUIRED":
+        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("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
+      case "VERIFICATION:REQUIRED":
+        return (h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
+      default:
+        if (alertDetails.button)
+          return alertDetails.button;
+        return;
+    }
+  }
+  const alertDetails = getAlert(states.status);
+  if (states.status === "DONE" || !alertDetails) {
+    return h("div", null);
+  }
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h("style", { type: "text/css" }, vanillaStyle),
+    h("sqm-form-message", { loading: states.loading, type: alertDetails.alertType },
+      h("p", { part: "alert-title" }, alertDetails.header),
+      h("p", { part: "alert-description" }, alertDetails.description),
+      getButton(states.status))));
+}