Implement better validation and rendering between dialpad and destination number field about dev-phone HOT 5 OPEN

Hi @ayyrickay ,

I'm looking into the issue and I can reproduce it. As I understand this issue should solve:

1. Correct rendering of phone number when there is combination of dialpad and keyboard input (This one I understand)
2. Validation of phone numbers based on the region? If so, can you please elaborate more on the last paragraph?

Thanks!

from dev-phone.

Hey @hatealgebra. The first is correct. I would reframe the second issue as: what is a valid phone number?

There's some amount of form validation we should do. For example, if there are letters or special characters, we shouldn't risk breaking the SDK. But once we get past the basic validation, I think it becomes hard to be very clear about what constitutes a phone number.

We could try and make the Dev Phone very paranoid about phone numbers and reject calls to numbers that don't seem valid. This is the more pessimistic design (e.g., if the input doesn't look valid, we won't bother making a call.) But because there's a lot of variation in the length of phone numbers, maybe it's better to design optimistically, and just assume that users will put in valid numbers.

Still, there could be some cool opportunities if we used a number validator. One fun example might be identifying the country code and rendering it out to the user to show what country that number belongs to in an emoji, for example.

from dev-phone.

Hi @ayyrickay ,

I think the first issue is fixed and I've tested it.

About the second issue/problem, here are some points that I thought/came up with, let me know what you think about it:

Masking the input/validation

I've tried to sort of "mask" the input within the reducer and it's specific action. This way user can only type digits and special chars such as [*#+]:

  case SET_DESTINATION_NUMBER:
            const regex = /[*#+\d]/i;
            const numberLength = action.number.length;
            const lastAddedChar = action.number[numberLength -1];

            if(!regex.test(lastAddedChar) && numberLength !== 0) return state;
            return { ...state, destinationNumber: action.number }

Optimistic approach & flag API

I thought about the optimistic approach and suggestion with the country code recognition and did a bit of exploring. Actually, I've started with Twilio resources, where I've actually stumbled on the solution with int-tel-input plugin, which is also mentioned in this Twilio labs template.

I tried to work it out, but is kind of hacky to set it up in the react and this package would provide easier usage.

Conclusion

I hope that I've actually comprehended your original thought on the topic of the optimistic approach and did not tweak it that much.

My idea is kinda guide the user with entering the phone number, where we would not to worry about the letters in the input the user would just pick up the states code, and then it would be up to him what he types.

Looking forward to hearing your feedback and wish you a nice start to the week.

from dev-phone.

Hi @ayyrickay,

Did you have time to check my last comment? I'm waiting for you (dis)approval. Looking forward for your feedback.

from dev-phone.

@ayyrickay Sending a reminder about the next steps, thanks.

from dev-phone.