[Enhancement]: Optimise shipping calculations flow when using the Checkout block

[tarunvijwani]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

We're optimizing shipping calculations flow when using the Checkout block. With this PR, we're making the following changes:

• We are changing the wording No shipping options available in the order summary section to Enter the address to calculate, and displaying it in 80% of the font size of the Shipping label and normal, neither <strong> nor <em> when no address is provided.
• We are changing the wording Shipping options will be displayed here after entering your full shipping address to Enter a shipping address to view shipping options with the text vertically and horizontally centered and a grey background when no address is provided.
• We are changing the wording Add a shipping address to view shipping options to Enter a shipping address to view shipping options with the text vertically and horizontally centered and a grey background when a partial address is provided.
• When a full address is provided, but no shipping options are available for that address, we're changing the wording There are no shipping options available. Please check your shipping address. to No shipping options are available for this address. Please verify the address is correct or try a different address..
• When a full address is provided, but no shipping options are available for that address, we're changing the wording No shipping options available in the order summary section to No available delivery option, and displaying it in 80% of the font size of the Shipping label and normal, neither <strong> nor <em>.

Closes #46951.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

• Go to /wp-admin/admin.php?page=wc-settings&tab=shipping&section=options.
• Enable the option Enable the shipping calculator on the cart page.
• Go to /wp-admin/admin.php?page=wc-settings&tab=shipping&section=pickup_location
• Disable local pickup.
• Go to /wp-admin/admin.php?page=wc-settings&tab=shipping&section.
• Remove all shipping methods.
• Add one shipping method to one country only (Example: UAE).
• Open an incognito window.
• Add a product to the cart.
• Go to the Checkout page that is using the Checkout block.

1. Confirm the text in the order summary section is Enter the address to calculate.

Before	After

2. Confirm the text in the shipping rate selector is Enter a shipping address to view shipping options vertically and horizontally centered and with a grey background.

Before	After

3. Enter the partial shipping address and confirm the text in the shipping rate selector is Enter a shipping address to view shipping options vertically and horizontally centered and with a grey background.

Before	After

4. Enter the full shipping address for the other country where no shipping method is available (Example: US).
5. Confirm the text in the order summary section is No available delivery option.

Before	After

6. Confirm there is a notice in the shipping rate selector, and the text of the notice is No shipping options are available for this address. Please verify the address is correct or try a different address..

Before	After

Changelog entry

• Automatically create a changelog entry from the details below.

• This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Optimise shipping calculations flow when using the Checkout block

Changelog Entry Comment

Comment

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[github-actions]

Size Change: +582 B (+0.02%)

Total Size: 2.49 MB

_{compressed-size-action}

[github-actions]

Hi @nielslange,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[nielslange]

Thanks for working on this, @tarunvijwani. I've successfully tested this PR and the code looks good. Let's ⛴️ this improvement.

[tarunvijwani]

Quick update: I'm holding the merge until #47953 is merged into the featured branch.