A set of ameliorations for the PhoneNumberInput component

[elazzabi]

Description

The PhoneNumberInput component has been introduced in Core. In order to use it in WooPayments, we need to copy-paste it here (we can't import it from Core due to some technical limitations) and fix a few things.

Here's a list of what needs to be fixed:

• The RTL support's CSS is broken (see screenshot) because of this line that sets the CSS directly on the element, and thus it's not transformed to RTL part of the webpack process. We will need to figure out another way to apply the spacing for RTL, it’s done with JS to adjust the size to the option width.

• We currently have a special case for Japan. If the account country is Japan, only Japanese numbers are accepted. We do this by passing onlyCountries to the component (as can be seen in the documentation). However, this is not possible in the new component. We need a way to pass props to the underlying component.

• We added a custom behavior when you don't need to select a country before putting your number. This means that even if US +1 is selected, you can still put +212, and once you do that, it will automatically 1) detect the new country, 2) automatically select it in the dropdown and 3) remove the +212. This is not working in the new component.

Acceptance criteria

• All the bugs listed above are working.

Designs

[jessy-p]

@elazzabi Could you explain more about

In order to use it in WooPayments, we need to copy-paste it here (we can't import it from Core due to some technical limitations) and fix a few things.

Are these issues already fixed in Core? Do we already have an issue to solve the limitation of not being able to import this from Core?

[elazzabi]

Hey @jessy-p 👋

Thank you for looking into this! Regarding your questions:

Are these issues already fixed in Core?

No. The component works fine in Core and can be used there as it is. However, we have some specific use cases in WooPayments and we need to fix those if we want to use it here.

@ismaeldcom and I think those additions will be good for Core too, but a better approach is to fix (& test) the component here and then move it to Core. Hence creating this issue here instead of Core. Sorry, I didn't include enough information in the issue description.

Do we already have an issue to solve the limitation of not being able to import this from Core?

I don't believe so. @ismaeldcom wanted to work on this in a cooldown week, but not sure if there is an issue for it.

[ismaeldcom]

wanted to work on this in a cooldown week, but not sure if there is an issue for it.

Yes, I'd need to dig a bit more first, to see if it will require changes only on WooPayments or in WC Core too.