chore(clerk-js,types): Display info tooltip for past due amounts in checkout #6097
Conversation
🦋 Changeset detectedLatest commit: 1073464 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughA tooltip feature was added to the checkout form to display additional information about past due amounts. This involved updating UI components to support icons and tooltips, and introducing a new localization key and string for the past due notice in both type definitions and English language resources. Changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🪛 markdownlint-cli2 (0.17.2).changeset/tiny-cameras-battle.md5-5: First line in a file should be a top-level heading (MD041, first-line-heading, first-line-h1) ⏰ Context from checks skipped due to timeout of 90000ms (11)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
.changeset/tiny-cameras-battle.md(1 hunks).changeset/violet-views-sip.md(1 hunks)packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx(2 hunks)packages/clerk-js/src/ui/elements/LineItems.tsx(4 hunks)packages/localizations/src/en-US.ts(1 hunks)packages/types/src/localization.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx (3)
packages/clerk-js/src/ui/elements/Tooltip.tsx (1)
Tooltip(229-233)packages/clerk-js/src/ui/elements/LineItems.tsx (1)
LineItems(285-290)packages/clerk-js/src/ui/customizables/index.ts (1)
localizationKeys(11-11)
packages/clerk-js/src/ui/elements/LineItems.tsx (1)
packages/clerk-js/src/ui/customizables/index.ts (1)
Span(68-68)
🪛 LanguageTool
.changeset/tiny-cameras-battle.md
[uncategorized] ~5-~5: The preposition “at” seems more likely in this position than the preposition “in”.
Context: ...splay info tooltip for past due amounts in checkout.
(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_IN_AT)
🪛 markdownlint-cli2 (0.17.2)
.changeset/violet-views-sip.md
6-6: First line in a file should be a top-level heading
null
(MD041, first-line-heading, first-line-h1)
⏰ Context from checks skipped due to timeout of 90000ms (24)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (nextjs, chrome, 13)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Static analysis
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
packages/localizations/src/en-US.ts (1)
41-41: New localization key added correctly.The
pastDueNoticestring aligns with the new tooltip feature and is placed correctly undercommerce.checkout. The value clearly explains the past due status.packages/types/src/localization.ts (1)
181-181: Type definition forpastDueNoticelooks good.The new
pastDueNotice: LocalizationValuekey aligns with the localization resource and matches the addition inen-US.ts.packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx (1)
83-91: Verify Tooltip API usage.Please confirm that
Tooltip.Contentaccepts atextprop rather than children, and thatTooltip.Triggercorrectly forwards refs through theLineItems.Titlecomponent.packages/clerk-js/src/ui/elements/LineItems.tsx (2)
86-86: LGTM: Clean addition of optional icon prop.The optional icon prop is well-typed and follows React component patterns.
107-122: Well-implemented icon integration with proper accessibility.The flex layout implementation is clean and follows good practices:
- Proper spacing with
gap: t.space.$1- Correct alignment with
alignItems: 'center'- Conditional icon rendering with null safety
- Appropriate icon size (
'md') and accessibility (aria-hidden)- Clean separation of title text in its own Span component
| '@clerk/types': patch | ||
| --- | ||
|
|
||
| Introduce `commerce.checkout.pastDueNotice` localization key. |
There was a problem hiding this comment.
🧹 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.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| <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> |
There was a problem hiding this comment.
Technically breaking, but given the fact that we still use span and that there were no child elements it should be fine.
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit