fix: Venezuela (+58) phone number formatting in PhoneInput component #22873
Conversation
… Venezuela's specific phone number format Integration of this formatter into both PhoneInput components via the format prop
|
@naaa760 is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughA new helper function, Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
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 (
|
|
Hey there and thank you for opening this pull request! 👋🏼 We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted. Details: |
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/02/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (08/02/25)1 label was added to this PR based on Keith Williams's automation. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
packages/features/components/phone-input/PhoneInput.tsx (3)
75-75: Consider memoizing the format function for better performance.The arrow function is recreated on every render. For better performance, consider extracting it to a stable reference.
+const formatFunction = (value: string, country: { iso2: string }) => + formatVenezuelaPhoneNumber(value, country.iso2); <PhoneInput {...rest} value={value ? value.trim().replace(/^\+?/, "+") : undefined} enableSearch disableSearchIcon country={defaultCountry} - format={(value, country) => formatVenezuelaPhoneNumber(value, country)} + format={formatFunction}
123-123: Apply the same performance optimization as BasePhoneInput.For consistency with the BasePhoneInput component, consider using the same memoized format function approach here.
<PhoneInput {...rest} value={value ? value.trim().replace(/^\+?/, "+") : undefined} country={value ? undefined : defaultCountry} enableSearch disableSearchIcon - format={(value, country) => formatVenezuelaPhoneNumber(value, country)} + format={formatFunction}
24-50: Add comprehensive unit tests for the new formatting function.The new
formatVenezuelaPhoneNumberfunction handles critical user-facing functionality but lacks unit tests. This could lead to regressions or undetected edge case failures.Key test scenarios needed:
- Venezuelan numbers with correct formatting
- Venezuelan numbers with incorrect existing formatting
- Partial Venezuelan numbers
- Non-Venezuelan numbers (should remain unchanged)
- Edge cases (empty strings, malformed inputs)
- Numbers with/without leading "+"
Would you like me to generate comprehensive unit tests for this function?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/features/components/phone-input/PhoneInput.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/features/components/phone-input/PhoneInput.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/features/components/phone-input/PhoneInput.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Detect changes
- GitHub Check: Codacy Static Code Analysis
… Venezuela's specific phone number format Integration of this formatter into both PhoneInput components via the format prop
|
@Devanshusharma2005 |
| // Handle edge cases | ||
| if (!value || typeof value !== 'string') return value || ''; | ||
|
|
||
| if (country === "ve") { |
There was a problem hiding this comment.
Just a quick thought: applying the fail-fast principle here (e.g. if (country !== 've') return value;) might help make the logic a bit cleaner by reducing nesting.
|
@volnei |
What does this PR do?
Close: #22871
+58 XXX XXXXXXXinstead of+58 XXX XXX XXX XVisual Demo (For contributors especially)
Before (Incorrect Format):
After (Correct Format):
+58 XXX XXX XXX Xinstead of the expected+58 XXX XXXXXXXformat.How should this be tested?
Test Configuration:
Test Steps:
+58 424 2457231(correct format)Expected Behavior:
584242457231or+58 424 245 732 1+58 424 2457231Test Cases:
584242457231→+58 424 2457231+58 424 245 732 1→+58 424 245732158424→+58 424