Skip to content

Passing phone through query params is partially broken (format makes validation not go through) #22992

@kwai-egg

Description

@kwai-egg

Found a bug? Please fill out the sections below. 👍

Issue Summary

When pre-filling any of the phone params (location, attendeePhoneNumber, smsReminderNumber) and trying to click confirm right away I'm greeted with an "Invalid format" error -- deleting the spaces between the numbers fixes the issue, I believe it has to do with the way query param numbers are getting formatted when they're rendered in the input field

Extra context: what's interesting is the format is not wrong, I've tried sending over the phone:

  • with "+"
  • with "%2B52"
  • without "+"
  • with "521" (old formatting of Mexican phone numbers)
  • etc

And nothing seemed to work... Until I deleted the blank characters between the numbers, that made it go through.

Steps to Reproduce

  1. Click on this event's URL (see how we're piping the number through query params) -- https://cal.com/bunopro-intro/repro-introduccion?name=Emilio+Gonzalez+Guerra&email=emiliogzz24%40gmail.com&smsReminderNumber=%7B%22value%22%3A%22phone%22%2C%22optionValue%22%3A%22+528112886677%22%7D
  2. Click on any date, see how the phone number appears in the field
  3. Try clicking "Confirm" right away... You'll see an error "invalid phone"

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

  • Because I'm piping the query params so the user doesn't have to make any changes in order to go through, this bug makes it such that piping the phone number without user interaction is impossible

Actual Results

User has to modify the phone slightly in order to finish booking the event

Expected Results

User only has to click confirm to book the event

Technical details

NA -- tried digging in the code to see if on packages/features/components/phone-input/PhoneInput.tsx there's a formatter that could be responsible for adding extra spaces while formatting the phone but wasn't able to find it

Evidence

Repro video: https://drive.google.com/file/d/1zNn0Tm5mzdsgLcAvX_M6sbPMHfZsA0fo/view?usp=sharing

Metadata

Metadata

Assignees

No one assigned

    Labels

    booking-pagearea: booking page, public booking page, booker🐛 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions