Skip to content

chore(clerk-js,types): Display info tooltip for past due amounts in checkout #6097

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
merged 3 commits into from
Jun 10, 2025
Merged

chore(clerk-js,types): Display info tooltip for past due amounts in checkout #6097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c4508c
chore(clerk-js,types): Display info tooltip for past due amounts in c…
panteliselef Jun 10, 2025
f9edecd
Merge branch 'main' into elef/add-icon-in-checkout-credits
panteliselef Jun 10, 2025
1073464
Update .changeset/tiny-cameras-battle.md
panteliselef Jun 10, 2025
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
5 changes: 5 additions & 0 deletions .changeset/tiny-cameras-battle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display info tooltip for past due amounts at checkout.
6 changes: 6 additions & 0 deletions .changeset/violet-views-sip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@clerk/localizations': patch
'@clerk/types': patch
---

Introduce `commerce.checkout.pastDueNotice` localization key.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Add a top-level heading per Markdown lint rules.

The file should begin with an H1 heading to satisfy MD041 (first-line-heading). Please add a leading # violet-views-sip above the patch summary.

🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

6-6: First line in a file should be a top-level heading
null

(MD041, first-line-heading, first-line-h1)

🤖 Prompt for AI Agents 
In the file .changeset/violet-views-sip.md at line 6, add a top-level heading by
inserting "# violet-views-sip" as the first line of the file above the existing
content to comply with Markdown lint rule MD041 requiring a first-line heading.

13 changes: 11 additions & 2 deletions packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@ import { Drawer } from '@/ui/elements/Drawer';
import { LineItems } from '@/ui/elements/LineItems';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
import { Tooltip } from '@/ui/elements/Tooltip';

import { DevOnly } from '../../common/DevOnly';
import { useCheckoutContext, usePaymentSources } from '../../contexts';
import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Text } from '../../customizables';
import { ChevronUpDown } from '../../icons';
import { ChevronUpDown, InformationCircle } from '../../icons';
import { handleError } from '../../utils';
import * as AddPaymentSource from '../PaymentSources/AddPaymentSource';
import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow';
Expand Down Expand Up @@ -79,7 +80,15 @@ export const CheckoutForm = withCardStateProvider(() => {
)}
{showPastDue && (
<LineItems.Group variant='tertiary'>
<LineItems.Title title={localizationKeys('commerce.pastDue')} />
<Tooltip.Root>
<Tooltip.Trigger>
<LineItems.Title
title={localizationKeys('commerce.pastDue')}
icon={InformationCircle}
/>
</Tooltip.Trigger>
<Tooltip.Content text={localizationKeys('commerce.checkout.pastDueNotice')} />
</Tooltip.Root>
<LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />
</LineItems.Group>
)}
Expand Down
23 changes: 20 additions & 3 deletions packages/clerk-js/src/ui/elements/LineItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,10 @@ function Group({ children, borderTop = false, variant = 'primary' }: GroupProps)
interface TitleProps {
title: string | LocalizationKey;
description?: string | LocalizationKey;
icon?: React.ComponentType;
}

function Title({ title, description }: TitleProps) {
const Title = React.forwardRef<HTMLTableCellElement, TitleProps>(({ title, description, icon }, ref) => {
const context = React.useContext(GroupContext);
if (!context) {
throw new Error('LineItems.Title must be used within LineItems.Group');
Expand All @@ -94,6 +95,7 @@ function Title({ title, description }: TitleProps) {
const textVariant = variant === 'primary' ? 'subtitle' : 'caption';
return (
<Dt
ref={ref}
elementDescriptor={descriptors.lineItemsTitle}
elementId={descriptors.lineItemsTitle.setId(variant)}
sx={t => ({
Expand All @@ -102,7 +104,22 @@ function Title({ title, description }: TitleProps) {
...common.textVariants(t)[textVariant],
})}
>
<Span localizationKey={title} />
<Span
sx={t => ({
display: 'inline-flex',
alignItems: 'center',
gap: t.space.$1,
})}
>
{icon ? (
<Icon
size='md'
icon={icon}
aria-hidden
/>
) : null}
<Span localizationKey={title} />
</Span>
Comment on lines +107 to +122
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Technically breaking, but given the fact that we still use span and that there were no child elements it should be fine.

{description ? (
<Span
localizationKey={description}
Expand All @@ -115,7 +132,7 @@ function Title({ title, description }: TitleProps) {
) : null}
</Dt>
);
}
});

/* -------------------------------------------------------------------------------------------------
* LineItems.Description
Expand Down
1 change: 1 addition & 0 deletions packages/localizations/src/en-US.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const enUS: LocalizationResource = {
description__subscriptionSuccessful: 'Your new subscription is all set.',
downgradeNotice:
'You will keep your current subscription and its features until the end of the billing cycle, then you will be switched to this subscription.',
pastDueNotice: 'Your previous subscription was past due, with no payment.',
emailForm: {
subtitle: 'Before you can complete your purchase you must add an email address where receipts will be sent.',
title: 'Add an email address',
Expand Down
1 change: 1 addition & 0 deletions packages/types/src/localization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ type _LocalizationResource = {
subtitle: LocalizationValue;
};
downgradeNotice: LocalizationValue;
pastDueNotice: LocalizationValue;
perMonth: LocalizationValue;
};
};
Expand Down