feat: booker atom automatic phone country code detection
What does this PR do?
This PR fixes the phone field in Booker Atom (Platform mode) to auto-detect the user's country, matching the behavior of the main web app. Previously, the phone field always defaulted to US (+1) regardless of the user's actual location.
- Fixes #24214
- Fixes CAL-6501
Before:
- Phone field in Booker Atom was hardcoded to always show US flag 🇺🇸 and +1 prefix
- No country detection logic in the platform code path
- Inconsistent behavior between web app (which worked correctly) and Booker Atom
After:
- Created
BasePhoneInputPlatformcomponent that uses the sameuseDefaultCountry()hook asBasePhoneInputWeb - Both web and platform modes now use identical country detection logic
- Maintains backward compatibility and all existing functionality
Visual Demo (For contributors especially)
Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code (A decent size PR without self-review might be rejected).
- [x] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
How should this be tested?
- No special environment variables needed
- Standard Cal.com development setup
Checklist
@Anshumancanrock is attempting to deploy a commit to the cal Team on Vercel.
A member of the Team first needs to authorize it.
Walkthrough
Replaces platform-specific rendering in PhoneInput.tsx with a single unified BasePhoneInput that always renders one PhoneInput. Removes useIsPlatform branching and BasePhoneInputWeb/platform variants. Derives defaultCountry via a new useDefaultCountry hook and updates the signature to Omit<PhoneInputProps, "defaultCountry">. Merges inputStyle and flagButtonStyle into the underlying component’s style/ button props and preserves value normalization and onChange (including prefix handling).
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run `@coderabbitai generate docstrings` to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title Check | ✅ Passed | The title clearly summarizes the core change of the pull request by stating it adds automatic phone country code detection in the Booker Atom component, which aligns with the PR’s main objective of replicating the web app’s behavior. |
| Linked Issues Check | ✅ Passed | The implemented useDefaultCountry hook and unified BasePhoneInput component satisfy the linked issues’ requirement to replicate the web app’s country detection logic in Booker Atom and eliminate the hardcoded US default, fully addressing #24214 and CAL-6501. |
| Out of Scope Changes Check | ✅ Passed | All modifications—including removing platform-specific branches, updating the BasePhoneInput signature, and merging style props—directly support implementing automatic country detection and do not introduce any unrelated or out-of-scope changes. |
| Description Check | ✅ Passed | The description directly addresses the changes made to enable automatic country detection in the Booker Atom phone field, outlines the before and after behavior, references the relevant issues, and describes testing steps, so it is clearly related to the changeset. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
📜 Recent review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 24f13eef33cd7180afe98e5cb9924c348cb496da and d95f760f8b35c334ca9096b388d2bfb979eb3e65.
📒 Files selected for processing (1)
-
packages/features/components/phone-input/PhoneInput.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/features/components/phone-input/PhoneInput.tsx
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 help to get the list of available commands and usage tips.
@dhairyashiil I’ve made the changes as requested. Please review now. Thanks !
Hi @supalarry , Could you please review this PR? Thank you !
Hi @supalarry , Could you please review this PR? Thank you !
@dhairyashiil I have resolved the conflicts and no need to be sorry ser 🙂
@dhairyashiil please review it now . Fixed the conflicts.
@dhairyashiil please review it now . Fixed the conflicts.
Yes, I already asked Lauris for the review in our Slack. Thank you 🙏🏼
Marking this draft until
Hey guys, We'd really appreciate this simple fix, we've kinda been forced to use the regular text Input field on platform. Since it does not make sense at all for our (European) user to have to see & update a US phone field..
Thanks again!