Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Hide the shipping address form from Checkout Block in Editor and rename the Billing Address label when "Force shipping to the customer billing address" is enabled. #7800

Merged

Conversation

tarunvijwani
Copy link

In PRs #7268 and #7393, we hide the shipping address form from the front end for the Checkout block when Force shipping to the customer billing address is enabled.

In this PR, we hide the shipping address form from the Editor and rename the billing address label when Force shipping to the customer billing address is enabled.

Fixes #7513
Fixes #7394

Changes in the PR

  • Moved default title and descriptions in constants.tsx.
  • Fixed TypeScript errors for attributes.
  • Hide the Shipping Address block from the editor.
  • Rename Billing Address labels.

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Editor Before Editor After
image image
Frontend Before Frontend After
image image

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Go to wp-admin/admin.php?page=wc-settings&tab=shipping&section=options page.
  2. Enable the Force shipping to the customer billing address option and save the changes.
  3. Go to Checkout block Editor, and confirm Shipping Address form is not visible.
  4. Confirm Billing Address form label is Billing and shipping address and the description is Enter the billing and shipping address that matches your payment method.
  5. Go to the Checkout block front-end, and confirm Shipping Address form is not visible.
  6. Confirm Billing Address form label is Billing and shipping address and the description is Enter the billing and shipping address that matches your payment method.
  7. Change the billing address, confirm the shipping address in the order summary gets changed, and shipping methods are updated.
  8. Disable the Force shipping to the customer billing address option and save the changes.
  9. Confirm Shipping Address form is visible in both the frontend and Editor.
  10. Please test around this issue with multiple use cases.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Hide the shipping address form from Checkout Block in Editor and rename the Billing Address label when "Force shipping to the customer billing address" is enabled.

…hen Force shipping to the customer billing address is enabled
@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7800.zip

@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

TypeScript Errors Report

Files with errors: 431
Total errors: 2066

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

Size Change: +288 B (0%)

Total Size: 972 kB

Filename Size Change
build/cart-blocks/order-summary-taxes-frontend.js 436 B +1 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.09 kB +131 B (+14%) ⚠️
build/checkout-blocks/contact-information-frontend.js 1.79 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB -3 B (0%)
build/checkout.js 40.3 kB +162 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.1 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.14 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 27.1 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB
build/cart-blocks/cart-express-payment-frontend.js 779 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 5.99 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 46.2 kB
build/cart.js 46.1 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.89 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.31 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 48.3 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.95 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 289 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 kB
build/price-filter.js 8.37 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 227 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-add-to-cart.js 8.37 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button-frontend.js 2.13 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.13 kB
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 2.16 kB
build/product-image.js 3.93 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 2.15 kB
build/product-price.js 1.53 kB
build/product-query.js 4.44 kB
build/product-rating-frontend.js 1.44 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.38 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.52 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 1.12 kB
build/product-tag-list.js 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.87 kB
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 17.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.8 kB
build/stock-filter-wrapper-frontend.js 6.04 kB
build/stock-filter.js 6.71 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.2 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.7 kB
build/wc-blocks-editor-style-rtl.css 5.19 kB
build/wc-blocks-editor-style.css 5.19 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 24.2 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

@tarunvijwani tarunvijwani marked this pull request as ready for review December 1, 2022 07:35
@rubikuserbot rubikuserbot requested review from a team and senadir and removed request for a team December 1, 2022 07:35
@tarunvijwani tarunvijwani self-assigned this Dec 1, 2022
@tarunvijwani tarunvijwani added status: needs review type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels Dec 1, 2022
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @tarunvijwani thanks for working on this, it looks great! I have added a few comments, but nothing major.


export default {
export const attributes: Record< string, Record< string, unknown > > = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use the Gutenberg type BlockAttributes here?

You'd need to import { BlockAttributes } from '@wordpress/blocks';

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's a better way to define types. Added the BlockAttributes type. 👍


if ( forcedBillingAddress ) {
attributes.title =
attributes.title === DEFAULT_TITLE
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ternary operator is a little hard to reason with, maybe adding comments would be useful here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also consider if we need the if/else structure here, or if it would be better to move this logic into a separate function, remove the use of ternary operators and make this easier to read, what do you think?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's actually a good idea! I have moved the logic to a different function and added the comments for better understanding. Thank you! 🙂

@@ -43,7 +49,19 @@ const FrontendBlock = ( {
if ( ! showBillingFields && ! forcedBillingAddress ) {
return null;
}

if ( forcedBillingAddress ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please see my comment about if/else and ternary operators in the edit.tsx file and consider if the same applies here.


export default {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come we removed this and now only export a named const?

Should we add export default attributes at the bottom of this file?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I missed that. This is fixed now. Thank you!

@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

forcedBillingAddress: boolean
): string => {
if ( forcedBillingAddress ) {
// returns default forced billing title when forced billing address is enabled and there is no title set
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight nit pick on these comments: please ensure we follow the WP Coding guidelines here: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/#comments

Besides this, these new functions look good!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the guide! I have fixed the comments. 👍

@tarunvijwani tarunvijwani requested a review from opr December 1, 2022 20:24
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work Tarun, this looks good to merge now! 🥳

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
2 participants