Skip to content

Mint/Update Tax Dashboard Tax Section #488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndiLuo merged 9 commits into from
Mar 31, 2026
Merged

Mint/Update Tax Dashboard Tax Section #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b2fea8b
Added conditional rendering for tax section when user previously subm…
AndiLuo Mar 25, 2026
fd3dc73
Update tax section conditional to display tax section if there's a st…
AndiLuo Mar 26, 2026
c3f0765
Updated spec
AndiLuo Mar 26, 2026
2e73dec
Add general Tax form header when there's no requiredTaxFormType. Upda…
AndiLuo Mar 30, 2026
82e592f
Fix INACTIVE tax form banner having legacy styles. Update some storie…
AndiLuo Mar 31, 2026
8322a65
Update copy when no documentTypeString is present and add story
AndiLuo Mar 31, 2026
d69ce39
Update copy and fix stories
AndiLuo Mar 31, 2026
f0cb1fb
Merge remote-tracking branch 'origin/master' into dashboard-tax-ui-up…
AndiLuo Mar 31, 2026
17eb26b
Release stable version 2.1.6 and added changelog
AndiLuo Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/mint-components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

## [2.1.6] - 2026-03-31

- \<sqm-tax-and-cash-dashboard>
- Update tax section to always display if there's data for tax form status
- Fix INVALID tax form alert when no tax form type is available
- Update "w9RequiredDescription" threshold text from $600 to $2000
- \<sqm-payout-status-alert>
- Update "w9RequiredDescription" threshold text from $600 to $2000

## [2.1.4] - 2026-03-23

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion packages/mint-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@saasquatch/mint-components",
"title": "Mint Components",
"version": "2.1.4",
"version": "2.1.6",
"description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
"icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
"raisins": "docs/raisins.json",
Expand Down
10 changes: 10 additions & 0 deletions packages/mint-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6591,6 +6591,11 @@ export namespace Components {
* @uiName Tax documents section description
*/
"taxDocumentSectionSubHeader": string;
/**
* Displayed under the tax document section header.
* @uiName Tax documents section description
*/
"taxDocumentSectionSubHeaderNoDocument": string;
/**
* @uiName Terms and Conditions text
*/
Expand Down Expand Up @@ -14447,6 +14452,11 @@ declare namespace LocalJSX {
* @uiName Tax documents section description
*/
"taxDocumentSectionSubHeader"?: string;
/**
* Displayed under the tax document section header.
* @uiName Tax documents section description
*/
"taxDocumentSectionSubHeaderNoDocument"?: string;
/**
* @uiName Terms and Conditions text
*/
Expand Down
234 changes: 232 additions & 2 deletions packages/mint-components/src/components/tax-and-cash/TaxForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1083,9 +1083,8 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
noFormNeeded: false,
noFormNeeded: true,
canEditPayoutInfo: true,
status: "INACTIVE",
documentType: "W9",
Expand All @@ -1094,12 +1093,62 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
indirectTaxType: "VAT",
indirectTaxNumber: "123456",
showNewFormDialog: false,
payoutStatus: "OVER_W9_THRESHOLD",
hasHold: false,
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardNotActiveW8Form = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
noFormNeeded: false,
canEditPayoutInfo: true,
status: "INACTIVE",
documentType: "W8BEN",
documentTypeString: taxTypeToName("W8BEN"),
country: "United Kingdom",
indirectTaxType: "VAT",
indirectTaxNumber: "123456",
showNewFormDialog: false,
hasHold: false,
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardNotActiveNoForm = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
noFormNeeded: true,
canEditPayoutInfo: true,
status: "INACTIVE",
documentType: "W8BEN",
documentTypeString: "",
Comment thread
AndiLuo marked this conversation as resolved.
country: "United Kingdom",
indirectTaxType: "VAT",
indirectTaxNumber: "123456",
showNewFormDialog: false,
hasHold: false,
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardNotVerifiedW9Form = () => {
return (
<sqm-tax-and-cash-dashboard
Expand Down Expand Up @@ -1499,6 +1548,187 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
);
};

export const TaxAndCashDashboardNoTaxFormRequiredAndBeneficiaryNameInvalid =
() => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "BENEFICIARY_NAME_INVALID",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: true,
status: "ACTIVE",
documentType: undefined,
documentTypeString: taxTypeToName("W9"),
dateSubmitted: "Jan 18th, 2025",
noFormNeeded: true,
indirectTaxNumber: "123456",
country: "USA",
showNewFormDialog: false,
hasHold: false,
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardNoTaxFormRequiredAndBeneficiaryNameInvalidUS =
() => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "BENEFICIARY_NAME_INVALID",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: true,
status: "ACTIVE",
documentType: undefined,
documentTypeString: taxTypeToName("W9"),
dateSubmitted: "Jan 18th, 2025",
noFormNeeded: true,
indirectTaxNumber: "123456",
country: "USA",
showNewFormDialog: false,
hasHold: true,
enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardNoDocumentType = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: false,
status: "ACTIVE",
documentType: undefined,
documentTypeString: "",
dateSubmitted: "Jan 18th, 2025",
noFormNeeded: false,
indirectTaxNumber: "123456",
country: "United Kingdom",
showNewFormDialog: false,
hasHold: false,
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardNoDocumentTypeNoFormNeeded = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: false,
status: undefined,
documentType: undefined,
documentTypeString: "",
dateSubmitted: undefined,
noFormNeeded: true,
indirectTaxNumber: "123456",
country: "United Kingdom",
showNewFormDialog: false,
hasHold: false,
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardFallbackDocumentTypeW9 = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: false,
status: "ACTIVE",
documentType: "W9",
documentTypeString: taxTypeToName("W9"),
dateSubmitted: "Mar 15, 2025",
noFormNeeded: false,
indirectTaxNumber: "123456",
country: "USA",
showNewFormDialog: false,
hasHold: false,
enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardFallbackDocumentTypeW8BEN = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: false,
status: "ACTIVE",
documentType: "W8BEN",
documentTypeString: taxTypeToName("W8BEN"),
dateSubmitted: "Feb 20, 2025",
noFormNeeded: false,
indirectTaxNumber: "654321",
country: "Canada",
showNewFormDialog: false,
hasHold: false,
enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardDeferW9NoDocumentType = () => {
return (
<sqm-tax-and-cash-dashboard
demoData={{
...dashboardProps,
states: {
payoutStatus: "DONE",
veriffLoading: false,
canEditPayoutInfo: true,
disabled: false,
status: undefined,
documentType: undefined,
documentTypeString: "",
dateSubmitted: undefined,
noFormNeeded: true,
indirectTaxNumber: "123456",
country: "USA",
showNewFormDialog: false,
hasHold: false,
enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
},
}}
></sqm-tax-and-cash-dashboard>
);
};

export const TaxAndCashDashboardLoading = () => {
return (
<sqm-tax-and-cash-dashboard
Expand Down
15 changes: 13 additions & 2 deletions ...ponents/src/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@ export const VerifyIdentityRequiredInternal = () => (

export const VerifyIdentityReviewInternal = () => (
<sqm-payout-status-alert
demoData={{ states: { ...defaultProps, status: "VERIFICATION:REVIEW" } }}
demoData={{
states: {
...defaultProps,
status: "VERIFICATION:REVIEW",
},
}}
></sqm-payout-status-alert>
);

Expand All @@ -43,7 +48,13 @@ export const VerifyIdentityFailedInternal = () => (

export const W9ThresholdReached = () => (
<sqm-payout-status-alert
demoData={{ states: { ...defaultProps, status: "OVER_W9_THRESHOLD" } }}
demoData={{
states: {
...defaultProps,
enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
status: "OVER_W9_THRESHOLD",
},
}}
></sqm-payout-status-alert>
);

Expand Down
2 changes: 1 addition & 1 deletion ...s/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
| `verificationReviewInternalDescription` | `verification-review-internal-description` | | `string` | `"Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}."` |
| `verificationReviewInternalHeader` | `verification-review-internal-header` | | `string` | `"Identity Verification under review"` |
| `w9RequiredButtonText` | `w-9-required-button-text` | | `string` | `"Submit W-9"` |
| `w9RequiredDescription` | `w-9-required-description` | | `string` | `"You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form."` |
| `w9RequiredDescription` | `w-9-required-description` | | `string` | `"You have surpassed the $2000 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form."` |
| `w9RequiredHeader` | `w-9-required-header` | | `string` | `"Your next payout is on hold"` |
| `withdrawalSettingsInvalidDescription` | `withdrawal-settings-invalid-description` | | `string` | `"There are missing fields or invalid characters in your payment information. Please review your information and make sure it is correct. Your payouts are on hold until this is resolved."` |
| `withdrawalSettingsInvalidHeader` | `withdrawal-settings-invalid-header` | | `string` | `"Your payment information is incomplete or includes invalid characters"` |
Expand Down
13 changes: 7 additions & 6 deletions ...nents/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ Feature: Cash payout status widget alert
And the alert has <buttons>
And the alert has heading <heading>
And the alert has description <description>

Examples:
| holdReason | color | buttons | heading | description |
| IDV_CHECK_REQUIRED_INTERNAL | yellow | N/A | Identity verification in progress | Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our support team. |
Expand All @@ -81,8 +82,6 @@ Feature: Cash payout status widget alert
| WITHDRAWAL_SETTINGS_INVALID | yellow | Edit payout information | Your payment information includes invalid characters | There are invalid characters in your payment information. Please review your information and make sure it is correct with no invalid characters. Your payouts are on hold until this is resolved. |
| PAYMENT_RETURNED | red | Edit payout information | Payout unsuccessful | Our recent payment attempt for your earnings was unsuccessful. Please review your payment information and make sure it is correct. |



@motivating
Scenario Outline: Alert displays when a user has gone over the tax limit and we require one to pay them out on the "" tax setting
Given a brand on the <type> tax setting
Expand All @@ -93,14 +92,15 @@ Feature: Cash payout status widget alert
And they receive "W9" as their required tax form
Then they <maySee> a yellow banner
And it has heading "Your next payout is on hold"
And it has description "You have surpassed the $600 threshold requiring a W9 form or have multiple accounts with impact.com. To remove the hold, please submit your W9 form."
And it has description "You have surpassed the $2000 threshold requiring a W9 form or have multiple accounts with impact.com. To remove the hold, please submit your W9 form."
When they click the "Submit W9" button
#Ideally this would actually just open the tax form for them to complete, if its not a technical nightmare lets try to do it
Then the page scrolls/redirects to the payouts and tax form

Examples:
| type | maySee |
| 5 | see |
| 4 | don't see |
| 5 | see |
| 4 | don't see |

@motivating
Scenario: User has general hold reasons
Expand Down Expand Up @@ -140,8 +140,9 @@ Feature: Cash payout status widget alert
And the reward <mayHave> partnerFundsTransfer data
And the partnerFundsTransfer status is <status>
Then the payout alert bannner <isShown>

Examples:
| holdReason | mayHave | status | isShown |
| NEW_PAYEE_REVIEW | has | TRANSFERRED | is shown |
| NEW_PAYEE_REVIEW | has | OVERDUE | is not shown |
| NEW_PAYEE_REVIEW | does not have | N/A | is not shown |
| NEW_PAYEE_REVIEW | does not have | N/A | is not shown |
Loading
Loading