ACSS: Refactor unsupported deferred intent in the blocks checkout

[ricardo]

Fixes #3851

This PR is complementary to #3805.

Changes proposed in this Pull Request:

• Add the required changes for mounting non-deferred intent payment methods in the blocks checkout.
• Fix minor issue with fonts in the blocks checkout.
• Implement loading state for non-deferred intent payment methods while the PI is being created.

Testing instructions

Follow testing instructions from #3805, but using the blocks checkout.

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Added changelog entry in both changelog.txt and readme.txt (or does not apply)
• Tested on mobile (or does not apply)

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
• Added the needs docs label (or does not apply)
• Included this PR in the Release Thread scope (or does not apply)

[ricardo]

Here we're also fixing a missing fonts prop which resulted in a minor style issue:

Before:

After:

[ricardo]

Assigned @cesarcosta99 and @wjrosa as reviewers since this PR is a follow up from #3805.

[wjrosa]

Code is good and works as expected! I was able to place an order following the test steps.

One bug I noticed (maybe it is something related to my environment only) is that if I don't provide a phone number I get the following error:

If it is something happening to everyone, we need to make the phone number required for this method.

[cesarcosta99]

Code looks good and tests well 🎉 I spotted some issues, though:

1. I experienced the same as @wjrosa and get the error Please provide complete payment details. when I don't provide a phone number. I tested this in both classic and Blocks checkouts and both errored. We'll likely need to enforce a phone requirement in the forms, maybe not something to address in this PR, but at least something to add to ACSS: Handle Errors and Edge Cases #3830.
2. When trying to checkout with ACSS in a clean session (e.g. incognito mode), the payment method doesn't display as I fill out the form. Instead, I need to refresh the page to be able to see and select the method. I only experienced this in Blocks checkout:

output.mp4

[ricardo]

When trying to checkout with ACSS in a clean session (e.g. incognito mode), the payment method doesn't display as I fill out the form.

@cesarcosta99 This was fixed by @asumaran here, so now it should work, can you try one more time?

[cesarcosta99]

@cesarcosta99 This was fixed by @asumaran here, so now it should work, can you try one more time?

That fixed it 👍 It was not clear if we're going to address the phone requirement here, so I held off the full review for now.

Also, we have a new process for handling changelogs and you need to run npm run changelog to provide one.

[ricardo]

@cesarcosta99 I fixed the phone number issue in e09db26. Can you give a final review?

Here's what was happening:

• In the classic checkout, we check if a field is required by checking if it's visible (src). This makes sense since there are extensions to hide fields from the classic checkout.
• However, the phone number field can be optional in WooCommerce's native settings but isn't hidden by default. In case we pass phone: never to the PI creation, it will expect a phone number in the payment method creation (which inherits the PI that was created, so this is only valid for ACSS and non-deferred intent PMs).
• If phone: auto, the phone number parameter also can't be an empty string.

As far as I know, this change shouldn't affect deferred intent payment methods, but phone: auto should fix it for ACSS.

cc @wjrosa in case you have thoughts about e09db26 since you mentioned this as well.

[cesarcosta99]

LGTM and tests well! Thank you for working on the changes!

• Test 1: Successful checkout ✅
  • Blocks and shortcode with no phone provided
• Test 2: Checkout with micro deposits verification + delayed notification ✅
  • Blocks and shortcode with no phone provided
• Test 3: Disable feature flag ✅

[wjrosa]

@cesarcosta99 I fixed the phone number issue in e09db26. Can you give a final review?

Here's what was happening:

• In the classic checkout, we check if a field is required by checking if it's visible (src). This makes sense since there are extensions to hide fields from the classic checkout.
• However, the phone number field can be optional in WooCommerce's native settings but isn't hidden by default. In case we pass phone: never to the PI creation, it will expect a phone number in the payment method creation (which inherits the PI that was created, so this is only valid for ACSS and non-deferred intent PMs).
• If phone: auto, the phone number parameter also can't be an empty string.

As far as I know, this change shouldn't affect deferred intent payment methods, but phone: auto should fix it for ACSS.

cc @wjrosa in case you have thoughts about e09db26 since you mentioned this as well.

I think it is a nice solution. Thanks for looking into it 👍