@saasquatch/mint-components 2.5.0-5 → 2.5.0

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -22,8 +22,7 @@ import deepmerge from "deepmerge";
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
  * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
- * @csspart primarybutton-base - The primary button base
- * @csspart secondarybutton-base - The secondary button base
+ * @csspart button-base - The button base, stable across all button style variants
  * @csspart icon - The share button icon
  */
 export class ShareButton {

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -9,6 +9,7 @@ import { PortalSectionView } from "./sqm-portal-section-view";
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout
  * @example Titled Section - <sqm-titled-section text-align="center" label-margin="small" padding="none"><div slot="label"><h2>Section Label</h2></div><div slot="content"><p>Add your section content here!</p></div></sqm-titled-section>
+ * @csspart sqm-base - The section base container
  * @csspart sqm-label - The section label
  */
 export class TitledSection {

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -40,6 +40,8 @@ const styleString = sheet.toString();
  * @uiName Widget Verification Flow
  * @exampleGroup Widget Verification
  * @example Widget Verification - <sqm-widget-verification></sqm-widget-verification>
+ * @csspart step-base - The base container of the currently rendered step
+ * @csspart primarybutton-base - The primary button base of the currently rendered step
  */
 export class WidgetVerification {
   constructor() {
@@ -202,6 +204,12 @@ export class WidgetVerification {
      * @uiWidget textArea
      */
     this.createPartnerStep_networkErrorText = "An error occurred. Please try again.";
+    /**
+     * @uiName Email verification error text
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_emailVerificationErrorText = "Please log in to {loginLinkText} to review your account status. You may need to complete email verification or other pending steps. Once resolved, refresh this page to proceed.";
     /**
      * @uiName Missing fields error text
      * @uiGroup Partner Creation Step
@@ -240,12 +248,12 @@ export class WidgetVerification {
     const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
     const renderStepContent = () => {
       if (props.showPartnerModal) {
-        return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
+        return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}", exportparts: "sqm-base: step-base, primarybutton-base" })));
       }
       if (props.showCode) {
-        return (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
+        return (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"), { exportparts: "sqm-base: step-base, primarybutton-base" })));
       }
-      return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))));
+      return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"), { exportparts: "sqm-base: step-base, primarybutton-base" })));
     };
     return (h("div", null,
       h("style", { type: "text/css" }, styleString),
@@ -929,6 +937,33 @@ export class WidgetVerification {
       "reflect": false,
       "defaultValue": "\"An error occurred. Please try again.\""
     },
+    "createPartnerStep_emailVerificationErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email verification error text",
+            "name": "uiName"
+          }, {
+            "text": "Partner Creation Step",
+            "name": "uiGroup"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "create-partner-step_email-verification-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please log in to {loginLinkText} to review your account status. You may need to complete email verification or other pending steps. Once resolved, refresh this page to proceed.\""
+    },
     "createPartnerStep_missingFieldsErrorText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -1220,7 +1220,8 @@ export const TaxAndCashDashboardBalanceUnderThreshold = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
-        payoutStatus: "BALANCE_UNDER_THRESHOLD",
+        payoutStatus: "DONE",
+        belowPayoutThreshold: true,
         minPayoutAmount: "USD50.00",
         veriffLoading: false,
         canEditPayoutInfo: true,

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

@@ -188,7 +188,7 @@ export const BankingInfoFormView = (props) => {
       h("div", { class: classes.LargeSkeleton }))));
     return skeletons;
   };
-  return (h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (h("sl-form", { part: "container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),

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

@@ -119,7 +119,7 @@ export const DocusignFormView = (props) => {
   var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
   const { classes } = sheet;
-  return (h("div", { class: classes.Container, part: "form-container" },
+  return (h("div", { class: classes.Container, part: "container" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),

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

@@ -12,6 +12,7 @@ import { useIndirectTaxForm, } from "./useIndirectTaxForm";
 /**
  * @uiName Indirect Tax Form
  * @exampleGroup Tax and Cash Components
+ * @csspart form-container - The form container
  * @csspart alert-title - The alert title
  * @csspart primarybutton-base - The primary button base
  * @csspart secondarybutton-base - The secondary button base

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

@@ -33,7 +33,16 @@ export const PaymentHoldOnChange = () => (h("sqm-payout-status-alert", { demoDat
 export const BalanceUnderThreshold = () => (h("sqm-payout-status-alert", { demoData: {
     states: {
       ...defaultProps,
-      status: "BALANCE_UNDER_THRESHOLD",
+      status: "DONE",
+      belowPayoutThreshold: true,
+      minPayoutAmount: "USD50.00",
+    },
+  } }));
+export const BalanceUnderThresholdWithHold = () => (h("sqm-payout-status-alert", { demoData: {
+    states: {
+      ...defaultProps,
+      status: "NEW_PAYEE_REVIEW",
+      belowPayoutThreshold: true,
       minPayoutAmount: "USD50.00",
     },
   } }));

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

@@ -145,17 +145,6 @@ export function PayoutStatusAlertView(props) {
           alertType: "warning",
           icon: "exclamation-triangle",
         };
-      case "BALANCE_UNDER_THRESHOLD":
-        return {
-          header: text.balanceUnderThresholdHeader,
-          description: intl.formatMessage({
-            id: "balanceUnderThresholdDescription",
-            defaultMessage: text.balanceUnderThresholdDescription,
-          }, { minPayoutAmount: states.minPayoutAmount }),
-          buttonText: null,
-          alertType: "info",
-          icon: "info-circle",
-        };
       case "PAYMENT_HOLD_ON_CHANGE":
         return {
           header: text.paymentHoldOnChangeHeader,
@@ -283,14 +272,21 @@ export function PayoutStatusAlertView(props) {
     }
   }
   const alertDetails = getAlert(states.status);
-  if (states.status === "DONE" || !alertDetails) {
+  const showHoldAlert = states.status !== "DONE" && !!alertDetails;
+  if (!showHoldAlert && !states.belowPayoutThreshold) {
     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 },
+    states.belowPayoutThreshold && (h("sqm-form-message", { loading: states.loading, type: "info" },
+      h("p", { part: "alert-title" }, text.balanceUnderThresholdHeader),
+      h("p", { part: "alert-description" }, intl.formatMessage({
+        id: "balanceUnderThresholdDescription",
+        defaultMessage: text.balanceUnderThresholdDescription,
+      }, { minPayoutAmount: states.minPayoutAmount })))),
+    showHoldAlert && (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))));
+      getButton(states.status)))));
 }

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

@@ -1081,7 +1081,7 @@ export class PayoutStatusAlert {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PayoutStatusAlertViewProps>",
-        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; veriffLoading: boolean; minPayoutAmount?: string; enforceUsTaxComplianceOption?: EnforceUsTaxComplianceOption; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
+        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; veriffLoading: boolean; belowPayoutThreshold?: boolean; minPayoutAmount?: string; enforceUsTaxComplianceOption?: EnforceUsTaxComplianceOption; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -49,23 +49,8 @@ const GET_TAX_SETTING = gql `
     }
   }
 `;
-/** Transient holds that clear automatically, so a balance under the minimum explains the wait better. */
-const DISPLACEABLE_STATUSES = [
-  "DONE",
-  "NEW_PAYEE_REVIEW",
-  "PAYMENT_HOLD_ON_CHANGE",
-];
 export function getStatus(data) {
-  var _a;
-  const status = getHoldStatus(data);
-  const publisher = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
-  return DISPLACEABLE_STATUSES.includes(status) &&
-    isBalanceUnderPayoutThreshold(publisher)
-    ? "BALANCE_UNDER_THRESHOLD"
-    : status;
-}
-function getHoldStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   const hasTransferredReward = (_e = (_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.rewards) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.find((reward) => {
     var _a;
@@ -75,39 +60,41 @@ function getHoldStatus(data) {
   if (!((_g = (_f = data.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.connected) || !account)
     return "INFORMATION_REQUIRED";
   const currentTaxDocument = (_j = (_h = data.user.impactConnection) === null || _h === void 0 ? void 0 : _h.publisher) === null || _j === void 0 ? void 0 : _j.currentTaxDocument;
-  if (((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("NO_W9_DOCUMENT")) && !currentTaxDocument)
+  // A new-payee review only starts once funds reach Impact, so until then nobody can act on it
+  const reviewIsLive = !!hasTransferredReward && account.balanceAmount > 0;
+  const holdReasons = ((_k = account.holdReasons) !== null && _k !== void 0 ? _k : []).filter((reason) => reason !== "NEW_PAYEE_REVIEW" || reviewIsLive);
+  if (holdReasons.includes("NO_W9_DOCUMENT") && !currentTaxDocument)
     return "OVER_W9_THRESHOLD";
-  if ((_l = account.holdReasons) === null || _l === void 0 ? void 0 : _l.includes("IDV_CHECK_REQUIRED"))
+  if (holdReasons.includes("IDV_CHECK_REQUIRED"))
     return "VERIFICATION:REQUIRED";
-  if ((_m = account.holdReasons) === null || _m === void 0 ? void 0 : _m.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+  if (holdReasons.includes("IDV_CHECK_REQUIRED_INTERNAL"))
     return "VERIFICATION:INTERNAL";
-  if ((_o = account.holdReasons) === null || _o === void 0 ? void 0 : _o.includes("IDV_CHECK_REVIEW_INTERNAL"))
+  if (holdReasons.includes("IDV_CHECK_REVIEW_INTERNAL"))
     return "VERIFICATION:REVIEW";
-  if ((_p = account.holdReasons) === null || _p === void 0 ? void 0 : _p.includes("IDV_CHECK_FAILED_INTERNAL"))
+  if (holdReasons.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
-  // only show banner for NEW_PAYEE_REVIEW if a PFT was created
-  if (((_q = account.holdReasons) === null || _q === void 0 ? void 0 : _q.includes("NEW_PAYEE_REVIEW")) && hasTransferredReward)
+  if (holdReasons.includes("NEW_PAYEE_REVIEW"))
     return "NEW_PAYEE_REVIEW";
-  if ((_r = account.holdReasons) === null || _r === void 0 ? void 0 : _r.includes("NEW_PAYEE_REVIEW"))
-    return "DONE";
-  if ((_s = account.holdReasons) === null || _s === void 0 ? void 0 : _s.includes("PAYMENT_HOLD_ON_CHANGE"))
+  if (holdReasons.includes("PAYMENT_HOLD_ON_CHANGE"))
     return "PAYMENT_HOLD_ON_CHANGE";
-  if ((_t = account.holdReasons) === null || _t === void 0 ? void 0 : _t.includes("BENEFICIARY_NAME_INVALID"))
+  if (holdReasons.includes("BENEFICIARY_NAME_INVALID"))
     return "BENEFICIARY_NAME_INVALID";
-  if ((_u = account.holdReasons) === null || _u === void 0 ? void 0 : _u.includes("BENEFICIARY_NAME_MISMATCH"))
+  if (holdReasons.includes("BENEFICIARY_NAME_MISMATCH"))
     return "BENEFICIARY_NAME_MISMATCH";
-  if ((_v = account.holdReasons) === null || _v === void 0 ? void 0 : _v.includes("BANK_TAX_NAME_MISMATCH"))
+  if (holdReasons.includes("BANK_TAX_NAME_MISMATCH"))
     return "BANK_TAX_NAME_MISMATCH";
-  if ((_w = account.holdReasons) === null || _w === void 0 ? void 0 : _w.includes("WITHDRAWAL_SETTINGS_INVALID"))
+  if (holdReasons.includes("WITHDRAWAL_SETTINGS_INVALID"))
     return "WITHDRAWAL_SETTINGS_INVALID";
-  if ((_x = account.holdReasons) === null || _x === void 0 ? void 0 : _x.includes("PAYMENT_RETURNED"))
+  if (holdReasons.includes("PAYMENT_RETURNED"))
     return "PAYMENT_RETURNED";
-  if (account.hold)
+  // A hold whose every reason was suppressed leaves nothing to report
+  const unattributedHold = !((_l = account.holdReasons) === null || _l === void 0 ? void 0 : _l.length);
+  if (account.hold && (holdReasons.length > 0 || unattributedHold))
     return "HOLD";
   return "DONE";
 }
 export function usePayoutStatus(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { type } = getEnvironmentSDK();
   const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
   const { data: taxSettingRes } = useQuery(GET_TAX_SETTING, {});
@@ -157,7 +144,8 @@ export function usePayoutStatus(props) {
       status,
       error: !!errors,
       enforceUsTaxComplianceOption,
-      minPayoutAmount: formatPayoutThreshold((_c = (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher),
+      belowPayoutThreshold: isBalanceUnderPayoutThreshold((_c = (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher),
+      minPayoutAmount: formatPayoutThreshold((_e = (_d = data === null || data === void 0 ? void 0 : data.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher),
     },
     data: { type },
     text: props.getTextProps(),

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export const ErrorView = (props) => {
-  return (h("sqm-form-message", { type: "error" },
+  return (h("sqm-form-message", { type: "error", part: "container" },
     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

@@ -16,6 +16,8 @@ import { intl } from "../../../global/global";
  * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section", "template"]
  * @example Microsite Cash Payout Form - <sqm-tax-and-cash></sqm-tax-and-cash>
  * @csspart container - The base container for the tax and cash component
+ * @csspart alert-title - The error alert title, shown on the error step
+ * @csspart alert-description - The error alert description, shown on the error step
  */
 export class TaxAndCashMonolith {
   constructor() {
@@ -1185,9 +1187,9 @@ export class TaxAndCashMonolith {
       case "/2":
         return (h("sqm-indirect-tax-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step2_"))));
       case "/3":
-        return (h("sqm-docusign-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step3_"))));
+        return (h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
       case "/4":
-        return (h("sqm-banking-info-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step4_"))));
+        return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
         return (h("sqm-tax-and-cash-dashboard", Object.assign({ exportparts: "dashboard-container: container" }, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":

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

@@ -131,7 +131,14 @@ export const AccountUnderReview = () => (h(TaxAndCashDashboardView, { states: {
 export const PaymentHoldOnChange = () => (h(TaxAndCashDashboardView, { states: { ...baseStates, payoutStatus: "PAYMENT_HOLD_ON_CHANGE" }, text: defaultText, callbacks: defaultCallbacks, slots: defaultSlots }));
 export const BalanceUnderThreshold = () => (h(TaxAndCashDashboardView, { states: {
     ...baseStates,
-    payoutStatus: "BALANCE_UNDER_THRESHOLD",
+    payoutStatus: "DONE",
+    belowPayoutThreshold: true,
+    minPayoutAmount: "USD50.00",
+  }, text: defaultText, callbacks: defaultCallbacks, slots: buildSlots({ belowPayoutThreshold: true }) }));
+export const BalanceUnderThresholdWithHold = () => (h(TaxAndCashDashboardView, { states: {
+    ...baseStates,
+    payoutStatus: "NEW_PAYEE_REVIEW",
+    belowPayoutThreshold: true,
     minPayoutAmount: "USD50.00",
   }, text: defaultText, callbacks: defaultCallbacks, slots: buildSlots({ belowPayoutThreshold: true }) }));
 export const BeneficiaryNameInvalid = () => (h(TaxAndCashDashboardView, { states: { ...baseStates, payoutStatus: "BENEFICIARY_NAME_INVALID" }, text: defaultText, callbacks: defaultCallbacks, slots: defaultSlots }));

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

@@ -276,7 +276,7 @@ export const TaxAndCashDashboardView = (props) => {
             }, {
               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)),
+            button: (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", exportparts: "base: primarybutton-base", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
             alertType: "warning",
             icon: "info-circle",
             class: sheet.classes.WarningHoldAlertContainer,
@@ -364,18 +364,6 @@ export const TaxAndCashDashboardView = (props) => {
           icon: "exclamation-triangle",
           class: sheet.classes.WarningHoldAlertContainer,
         };
-      case "BALANCE_UNDER_THRESHOLD":
-        return {
-          header: text.balanceUnderThresholdHeader,
-          description: intl.formatMessage({
-            id: "balanceUnderThresholdDescription",
-            defaultMessage: text.balanceUnderThresholdDescription,
-          }, { minPayoutAmount: states.minPayoutAmount }),
-          buttonText: null,
-          alertType: "info",
-          icon: "info-circle",
-          class: sheet.classes.InfoHoldAlertContainer,
-        };
       case "PAYMENT_HOLD_ON_CHANGE":
         return {
           header: text.paymentHoldOnChangeHeader,
@@ -400,8 +388,8 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-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))),
+            h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.disabled || states.loading, type: "default", exportparts: "base: secondarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningHoldAlertContainer,
@@ -416,8 +404,8 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-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))),
+            h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.disabled || states.loading, type: "default", exportparts: "base: secondarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningHoldAlertContainer,
@@ -432,8 +420,8 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-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))),
+            h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.disabled || states.loading, type: "default", exportparts: "base: secondarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningHoldAlertContainer,
@@ -447,7 +435,7 @@ export const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-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)),
+          button: (h("sl-button", { disabled: states.disabled || states.loading, type: "default", exportparts: "base: primarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningHoldAlertContainer,
@@ -461,7 +449,7 @@ export const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-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)),
+          button: (h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)),
           alertType: "error",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningHoldAlertContainer,
@@ -619,15 +607,21 @@ export const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (h("sqm-form-message", { loading: states.loading, exportparts: "warningalert-base: alert-base, warningalert-icon: alert-icon, erroralert-base: alert-base, erroralert-icon: alert-icon, infoalert-base: alert-base, infoalert-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 },
+      states.belowPayoutThreshold && (h("sqm-form-message", { loading: states.loading, exportparts: "alert-base, alert-icon", type: "info", class: sheet.classes.InfoHoldAlertContainer, icon: "info-circle", transparent: true },
+        h("strong", null, text.balanceUnderThresholdHeader),
+        h("p", { style: { margin: "0" } }, intl.formatMessage({
+          id: "balanceUnderThresholdDescription",
+          defaultMessage: text.balanceUnderThresholdDescription,
+        }, { minPayoutAmount: states.minPayoutAmount })))),
+      alertInfo && (h("sqm-form-message", { loading: states.loading, exportparts: "alert-base, 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.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", exportparts: "base: primarybutton-base", 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)),
+        h("sl-button", { slot: "footer", type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        h("sl-button", { slot: "footer", type: "default", exportparts: "base: secondarybutton-base", 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),

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

@@ -7,6 +7,7 @@ import { TaxAndCashDashboardView } from "./sqm-tax-and-cash-dashboard-view";
 import { useTaxAndCashDashboard, } from "./useTaxAndCashDashboard";
 /**
  * @uiName Tax and Cash Status Dashboard
+ * @csspart dashboard-container - The dashboard container
  * @csspart alert-base - The alert base
  * @csspart alert-icon - The alert icon
  * @csspart primarybutton-base - The primary button base
@@ -2229,7 +2230,7 @@ export class TaxAndCashDashboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseTaxAndCashDashboardResult>",
-        "resolved": "{ states?: { status?: string; documentType: TaxDocumentType; documentTypeString: string; canEditPayoutInfo: boolean; disabled?: boolean; dateSubmitted?: string; noFormNeeded?: boolean; indirectTaxType?: string; qstNumber?: string; subRegionTaxNumber?: string; subRegion?: string; indirectTaxNumber?: string; province?: string; country?: string; notRegistered?: boolean; isBusinessEntity?: boolean; loading?: boolean; loadingError?: boolean; showNewFormDialog: boolean; hasHold: boolean; payoutStatus: PayoutStatus; minPayoutAmount?: string; veriffLoading: boolean; errors?: { general?: boolean; }; enforceUsTaxComplianceOption?: string; }; }",
+        "resolved": "{ states?: { status?: string; documentType: TaxDocumentType; documentTypeString: string; canEditPayoutInfo: boolean; disabled?: boolean; dateSubmitted?: string; noFormNeeded?: boolean; indirectTaxType?: string; qstNumber?: string; subRegionTaxNumber?: string; subRegion?: string; indirectTaxNumber?: string; province?: string; country?: string; notRegistered?: boolean; isBusinessEntity?: boolean; loading?: boolean; loadingError?: boolean; showNewFormDialog: boolean; hasHold: boolean; payoutStatus: PayoutStatus; belowPayoutThreshold?: boolean; minPayoutAmount?: string; veriffLoading: boolean; errors?: { general?: boolean; }; enforceUsTaxComplianceOption?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -6,7 +6,7 @@ import { getStatus, } from "../sqm-payout-status-alert/usePayoutStatus";
 import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { useVeriffApp, VERIFF_COMPLETE_EVENT_KEY } from "../useVeriffApp";
-import { formatPayoutThreshold, taxTypeToName } from "../utils";
+import { formatPayoutThreshold, isBalanceUnderPayoutThreshold, taxTypeToName, } from "../utils";
 import { gql } from "graphql-request";
 const GET_TAX_SETTING = gql `
   query getTenantSettings {
@@ -126,6 +126,7 @@ export const useTaxAndCashDashboard = (props) => {
       showNewFormDialog: showDialog,
       hasHold: !!((_o = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _o === void 0 ? void 0 : _o.hold),
       payoutStatus,
+      belowPayoutThreshold: isBalanceUnderPayoutThreshold(publisher),
       minPayoutAmount: formatPayoutThreshold(publisher),
       veriffLoading,
       enforceUsTaxComplianceOption,

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

@@ -9,6 +9,7 @@ import { useUserInfoForm } from "./useUserInfoForm";
 /**
  * @uiName User Information Form
  * @exampleGroup Tax and Cash Components
+ * @csspart form-container - The form container
  * @csspart alert-title - The alert title
  * @csspart alert-description - The alert description
  * @csspart input-label - The input label

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

@@ -108,9 +108,12 @@ export function formatPayoutThreshold(publisher) {
     return undefined;
   return `${(_b = publisher === null || publisher === void 0 ? void 0 : publisher.currency) !== null && _b !== void 0 ? _b : ""}${threshold}`;
 }
-/** `payoutsAccount.balance` is a formatted string; only `balanceAmount` (minor units) is comparable. */
+/**
+ * `payoutsAccount.balance` is a formatted string; only `balanceAmount` (minor units) is comparable.
+ * A zero balance gets no notice — there is nothing waiting to pay out.
+ */
 export function isBalanceUnderPayoutThreshold(publisher) {
-  var _a;
+  var _a, _b;
   const rawThreshold = (_a = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _a === void 0 ? void 0 : _a.paymentThreshold;
   const account = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount;
   if (!rawThreshold || !account)
@@ -118,11 +121,13 @@ export function isBalanceUnderPayoutThreshold(publisher) {
   const threshold = Number(rawThreshold);
   if (!Number.isFinite(threshold) || !Number.isFinite(account.balanceAmount))
     return false;
+  if (account.balanceAmount <= 0)
+    return false;
   const currency = account.currencyCode || (publisher === null || publisher === void 0 ? void 0 : publisher.currency);
   if (!currency)
     return false;
   const scale = 10 **
-    new Intl.NumberFormat("en-US", { style: "currency", currency })
-      .resolvedOptions().maximumFractionDigits;
+    ((_b = new Intl.NumberFormat("en-US", { style: "currency", currency })
+      .resolvedOptions().maximumFractionDigits) !== null && _b !== void 0 ? _b : 2);
   return account.balanceAmount < Math.round(threshold * scale);
 }

package/dist/esm/{ErrorView-74cb3af8.js → ErrorView-c6fc1d9b.js}

@@ -1,7 +1,7 @@
 import { h } from './index-38ad4957.js';
 
 const ErrorView = (props) => {
-  return (h("sqm-form-message", { type: "error" },
+  return (h("sqm-form-message", { type: "error", part: "container" },
     h("p", { part: "alert-title" }, props.loadingErrorAlertHeader),
     h("p", { part: "alert-description" }, props.loadingErrorAlertDescription)));
 };

package/dist/esm/{ShadowViewAddon-86b5e986.js → ShadowViewAddon-722e6707.js}

@@ -114,7 +114,7 @@ function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base, base: button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }
@@ -327,7 +327,7 @@ const styleString$1 = sheet$1.toString();
 function BaseRegistrationFormView(props) {
   var _a, _b;
   const { states, content, callbacks } = props;
-  return (h("div", { class: sheet$1.classes.Wrapper },
+  return (h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString$1),
@@ -2339,7 +2339,7 @@ function CouponCodeView(props) {
       styleString,
       vanillaStyle),
     h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign }, part: "label" }, props.couponCodeLabel),
-    error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
+    error ? (h("sqm-form-message", { type: props.errorType, exportparts: "alert-icon, erroralert-icon" },
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
 }
 
@@ -3624,8 +3624,8 @@ function RewardExchangeView(props) {
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
         h("div", { class: sheet$8.classes.Button },
-          h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
-          h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
+          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -3644,7 +3644,7 @@ function RewardExchangeView(props) {
         states.content.text.promoCode,
         h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet$8.classes.Button },
-        h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
+        h("sl-button", { exportparts: "base: primarybutton-base", class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
     chooseReward: () => chooseReward(),