Checkout Block: Phone field missing from checkout page when shipping is not configured

[eduardozulian]

Describe the bug

Phone field missing from checkout page when shipping is not configured

To reproduce

Steps to reproduce the behavior:

1. Add the Checkout Block to your page
2. Make sure that Phone is checked
3. Save and check your page

Expected behavior

To see the phone field in the public page. Currently, it is not displayed when you go to checkout.

Enviroment

WordPress (please complete the following information):

• Core version: 5.5.1
• Gutenberg version: 9.1.0
• WooCommerce version: 4.5.2
• WooCommerce Blocks version: 3.5.0

Desktop (please complete the following information):

• OS: macOS
• Browser: Chome and Firefox

[nerrad]

Hi there @eduardozulian 👋

This is tricky to reproduce, it took me a few tries and here's what I discovered so far:

• It only happens for logged in users.
• It only happens if the logged in user doesn't have a phone number attached to their account.

Given those two conditions the following steps will reproduce with Blocks 3.5.0

• Update and save the page with the Checkout block configured to not show phone field.
• Load the checkout block on the frontend.
• Update and save the page with the Checkout block configured to show the phone field.
• Load the checkout block on the frontend.

With the above steps I can reliably reproduce this for the conditions above. However:

• If I immediately try to checkout in an incognito browser tab after the above, the checkout loads as expected. So it appears to be something "cached" to the logged in user.
• I can reproduce this in a production build on the current trunk branch with the following steps.
• It looks like having the Gutenberg plugin active doesn't matter.

I suspect, there's some kind of caching going on with the cart that is preventing the phone number field for the current cart to render.

Given the above, it looks like this is only and issue for active carts where the block configuration was changed while they were active. Still something that needs to be fixed but reduces the urgency.

[haszari]

I saw this on Safari and Chrome, incognito and logged in – not sure if I was just lucky or if it's more easily reproducible than we think. Even if it check Require phone number I don't see the field!

(logged out, Safari)

(logged in, Chrome)

Notes/details:

• I was testing without Gutenberg plugin.
• My logged-in admin user has a phone number set.

[haszari]

I think there's an issue with the component logic – I can't see the Use same address for billing checkbox, which should also be at the bottom of the address step, under the phone number.

AHA figured it out. This issue happens if you have no shipping methods/zones set up. I recently reset/wiped my dev env and it has no shipping methods set up. This causes the checkout to only render the billing address.

I'll tweak the bug title to include this.

[haszari]

This issue happens if you have no shipping methods/zones set up.

@eduardozulian How's shipping set up on your store?

[eduardozulian]

@haszari it wasn't :) Once I added a local/free shipping the phone field appeared back. Thanks for narrowing it down!

[mikejolley]

This issue is the same as #3346