Skip to content

Commit b594ad5

Browse files
zachharrisonzachharrison
authored
Merge pull request #472 from saasquatch/bug/fix-dashboard-support-link
Fix Cash Tooltip and Support Link
2 parents 3f4cf5b + 96f4d52 commit b594ad5

File tree

6 files changed

+123
-12
lines changed

6 files changed

+123
-12
lines changed

‎packages/mint-components/CHANGELOG.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [2.0.7] - 2025-12-09
11+
12+
- \<sqm-tax-and-cash-dashboard-view>
13+
14+
- Replaced sl-tooltip with custom sl-dropdown to handle clickable tooltip content
15+
- Added ICU string for text prop indirectTaxTooltipSupport
16+
17+
- \<sqm-tax-and-cash-dashboard>
18+
19+
- Updated text prop indirectTaxTooltipSupport to handle ICU string
20+
1021
## [2.0.6] - 2025-12-05
1122

1223
### Changed
@@ -1439,7 +1450,8 @@ This major release represents a significant advancement in the theming capabilit
14391450
- \<sqm-popup-container>
14401451
- \<sqm-stencilbook>
14411452

1442-
[unreleased]: https://github.com/saasquatch/program-tools/compare/[email protected]
1453+
[unreleased]: https://github.com/saasquatch/program-tools/compare/[email protected]
1454+
[2.0.7]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.7
14431455
[2.0.6]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.6
14441456
[2.0.5]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.5
14451457
[2.0.4]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.4

‎packages/mint-components/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mint-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@saasquatch/mint-components",
33
"title": "Mint Components",
4-
"version": "2.0.6",
4+
"version": "2.0.7",
55
"description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
66
"icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
77
"raisins": "docs/raisins.json",

‎packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
| `indirectTaxInfoOtherCountry` | `indirect-tax-info-other-country` | If the participant is registered for indirect tax, display the country they’re registered in. | `string` | `"Registered in {country}"` |
3737
| `indirectTaxInfoSectionHeader` | `indirect-tax-info-section-header` | | `string` | `"Indirect tax"` |
3838
| `indirectTaxInfoSpain` | `indirect-tax-info-spain` | If the participant is registered for indirect tax in Spain, display the region they’re registered in. | `string` | `"Registered in {country}, {subRegion}"` |
39-
| `indirectTaxTooltipSupport` | `indirect-tax-tooltip-support` | | `string` | `"To make changes to your indirect tax information, please contact our Support team."` |
39+
| `indirectTaxTooltipSupport` | `indirect-tax-tooltip-support` | | `string` | `"To make changes to your indirect tax information, please contact our {supportLink}."` |
4040
| `invalidForm` | `invalid-form` | Additional text displayed next to the tax form's status badge. | `string` | `"Make sure your information is correct and submit new form."` |
4141
| `invoiceColumnTitle` | `invoice-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Invoice"` |
4242
| `invoiceDescription` | `invoice-description` | | `string` | `"View and download your invoices to report your earnings and stay tax compliant."` |

‎packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx‎

Lines changed: 105 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ const style = {
184184
marginBottom: "var(--sl-spacing-xx-small)",
185185
margin: "0",
186186
display: "flex",
187+
alignItems: "center",
187188
gap: "var(--sl-spacing-x-small)",
188189
"&::part(base)": {
189190
color: "var(--sqm-text)",
@@ -265,6 +266,9 @@ const style = {
265266
display: "flex",
266267
textAlign: "center",
267268
width: "250px",
269+
"&::part(body)": {
270+
pointerEvents: "auto",
271+
},
268272
},
269273
ToolTip: {
270274
top: "6px",
@@ -344,6 +348,43 @@ const style = {
344348
gap: "var(--sl-spacing-medium)",
345349
flexWrap: "wrap",
346350
},
351+
DropdownTooltipContainer: {
352+
top: "-4px",
353+
"&::part(panel)": {
354+
boxShadow: "none",
355+
border: "none",
356+
marginTop: "var(--sl-spacing-x-small)",
357+
},
358+
},
359+
DropdownContent: {
360+
padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
361+
fontSize: "var(--sl-font-size-small)",
362+
fontFamily: "var(--sl-font-sans)",
363+
fontWeight: "var(--sl-font-weight-normal)",
364+
lineHeight: "var(--sl-line-height-dense)",
365+
minWidth: "225px",
366+
backgroundColor: "var(--sl-color-gray-900)",
367+
color: "var(--sl-color-white)",
368+
borderRadius: "var(--sl-border-radius-medium)",
369+
position: "relative",
370+
marginLeft: "5px",
371+
},
372+
DropdownArrow: {
373+
position: "absolute",
374+
left: "-5px",
375+
top: "50%",
376+
transform: "translateY(-50%)",
377+
width: "0",
378+
height: "0",
379+
borderTop: "5px solid transparent",
380+
borderBottom: "5px solid transparent",
381+
borderRight: "5px solid var(--sl-color-gray-900)",
382+
zIndex: "1",
383+
},
384+
DropdownLink: {
385+
color: "var(--sl-color-white)",
386+
textDecoration: "underline",
387+
},
347388
};
348389

349390
const sheet = createStyleSheet(style);
@@ -909,6 +950,39 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
909950

910951
const alertInfo = getAlert(states.payoutStatus);
911952

953+
const dropdownHover = (el) => {
954+
if (!el) return;
955+
956+
const trigger = el.querySelector('[slot="trigger"]');
957+
const panel = el.shadowRoot?.querySelector(".dropdown__panel");
958+
959+
if (!trigger || !panel) return;
960+
961+
let hideTimeout: ReturnType<typeof setTimeout> | undefined;
962+
963+
const show = () => {
964+
clearTimeout(hideTimeout);
965+
el.show();
966+
};
967+
968+
const scheduleHide = () => {
969+
hideTimeout = setTimeout(() => el.hide(), 100);
970+
};
971+
972+
trigger.addEventListener("mouseenter", show);
973+
trigger.addEventListener("mouseleave", scheduleHide);
974+
panel.addEventListener("mouseenter", show);
975+
panel.addEventListener("mouseleave", scheduleHide);
976+
977+
return () => {
978+
trigger.removeEventListener("mouseenter", show);
979+
trigger.removeEventListener("mouseleave", scheduleHide);
980+
panel.removeEventListener("mouseenter", show);
981+
panel.removeEventListener("mouseleave", scheduleHide);
982+
clearTimeout(hideTimeout);
983+
};
984+
};
985+
912986
return (
913987
<div>
914988
<div>
@@ -1108,14 +1182,39 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
11081182
<div>
11091183
<h3 class={sheet.classes.IndirectTaxPreviewHeaderContainer}>
11101184
{text.indirectTaxInfoSectionHeader}
1111-
<sl-tooltip
1112-
trigger="hover"
1185+
<sl-dropdown
11131186
placement="right"
1114-
content={text.indirectTaxTooltipSupport}
1115-
class={sheet.classes.TooltipContainer}
1187+
distance={1}
1188+
ref={dropdownHover}
1189+
class={sheet.classes.DropdownTooltipContainer}
11161190
>
1117-
<sl-icon name="info-circle" class={sheet.classes.ToolTip} />
1118-
</sl-tooltip>
1191+
<sl-icon
1192+
slot="trigger"
1193+
name="info-circle"
1194+
class={sheet.classes.ToolTip}
1195+
style={{ cursor: "pointer" }}
1196+
/>
1197+
<div class={sheet.classes.DropdownContent}>
1198+
<div class={sheet.classes.DropdownArrow}></div>
1199+
{intl.formatMessage(
1200+
{
1201+
id: "indirectTaxTooltipSupport",
1202+
defaultMessage: text.indirectTaxTooltipSupport,
1203+
},
1204+
{
1205+
supportLink: (
1206+
<a
1207+
target="_blank"
1208+
href={`mailto:[email protected]`}
1209+
class={sheet.classes.DropdownLink}
1210+
>
1211+
{text.supportLink}
1212+
</a>
1213+
),
1214+
}
1215+
)}
1216+
</div>
1217+
</sl-dropdown>
11191218
</h3>
11201219
<div class={sheet.classes.IndirectTaxPreviewDetails}>
11211220
<span>

‎packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export class TaxAndCashDashboard {
150150
* @uiWidget textArea
151151
*/
152152
@Prop() indirectTaxTooltipSupport: string =
153-
"To make changes to your indirect tax information, please contact our Support team.";
153+
"To make changes to your indirect tax information, please contact our {supportLink}.";
154154
/**
155155
* Displayed to participants who have submitted their indirect tax information.
156156
*

0 commit comments

Comments
 (0)