Use native select for address form to fix country/state value issues - #53
Conversation
Also unified alerts in checkout
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughThe pull request migrates checkout form components from Radix UI Select components to native HTML select elements, while standardizing UI messaging patterns across multiple components using Alert-based layouts. The custom Select component is removed and replaced with a new NativeSelect component library. Changes
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/ui/native-select.tsx (1)
10-54: Add explicit return types to the new select primitives.These three new TSX functions are part of a shared UI surface, so it would be good to annotate their return types explicitly instead of relying on inference.
Suggested change
-function NativeSelect({ +function NativeSelect({ className, size = "default", ...props -}: NativeSelectProps) { +}: NativeSelectProps): React.JSX.Element { return ( <div @@ -function NativeSelectOption({ ...props }: React.ComponentProps<"option">) { +function NativeSelectOption({ + ...props +}: React.ComponentProps<"option">): React.JSX.Element { return <option data-slot="native-select-option" {...props} />; } @@ function NativeSelectOptGroup({ className, ...props -}: React.ComponentProps<"optgroup">) { +}: React.ComponentProps<"optgroup">): React.JSX.Element { return ( <optgroupAs per coding guidelines "Use strict TypeScript type checking; define explicit return types for functions and avoid 'any' type".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ui/native-select.tsx` around lines 10 - 54, Add explicit return types to the three new components: annotate NativeSelect, NativeSelectOption, and NativeSelectOptGroup with a React component return type (e.g., JSX.Element or React.ReactElement) in their function signatures instead of relying on inference; update the signatures of NativeSelect({ ... }: NativeSelectProps), NativeSelectOption({ ... }: React.ComponentProps<"option">), and NativeSelectOptGroup({ ... }: React.ComponentProps<"optgroup">) to include the chosen explicit return type and ensure React is imported if not already.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/checkout/AddressStep.tsx`:
- Around line 127-135: The Alert in AddressStep.tsx is using the default
role="alert" (from the Alert component) which causes the guest sign-in hint to
be announced as urgent; change the wrapper to a non-urgent role by overriding
the Alert's role prop (e.g., role="status") or replace the Alert with a neutral
wrapper so the content in AlertDescription (and the signInUrl Link) is not
announced as an urgent alert; update the Alert usage in AddressStep.tsx
accordingly.
In `@src/components/checkout/CouponCode.tsx`:
- Around line 67-86: The promotion rows use the Alert component which sets
role="alert" causing screen readers to announce persisted coupons; update the
JSX in CouponCode.tsx to use a neutral container instead (e.g., replace <Alert
key={promotion.id}>...</Alert> with a non-alert wrapper such as a styled <div>
or a Card component that preserves the same visual styles) or explicitly
override the role attribute on the wrapper to a neutral value (role="group" or
no role) so it’s not treated as an urgent announcement; keep the inner content
and handlers (promotion.id, promotion.code/promotion.name,
promotion.display_amount, handleRemove, removing) unchanged.
---
Nitpick comments:
In `@src/components/ui/native-select.tsx`:
- Around line 10-54: Add explicit return types to the three new components:
annotate NativeSelect, NativeSelectOption, and NativeSelectOptGroup with a React
component return type (e.g., JSX.Element or React.ReactElement) in their
function signatures instead of relying on inference; update the signatures of
NativeSelect({ ... }: NativeSelectProps), NativeSelectOption({ ... }:
React.ComponentProps<"option">), and NativeSelectOptGroup({ ... }:
React.ComponentProps<"optgroup">) to include the chosen explicit return type and
ensure React is imported if not already.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3337847f-d2d8-400c-806b-4ed5b74b9c5d
📒 Files selected for processing (6)
src/components/checkout/AddressFormFields.tsxsrc/components/checkout/AddressStep.tsxsrc/components/checkout/CouponCode.tsxsrc/components/checkout/StripePaymentForm.tsxsrc/components/ui/native-select.tsxsrc/components/ui/select.tsx
💤 Files with no reviewable changes (1)
- src/components/ui/select.tsx
CodeRabbit flagged that the guest sign-in hint and applied coupon alerts were using role="alert" (urgent), when they should be role="status" for persistent informational content. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 participant
Also unified alerts in checkout
Summary by CodeRabbit
New Features
Style