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

Ensure shipping rate names show when multiple packages are used #6753

Merged
merged 4 commits into from
Jul 27, 2022

Conversation

opr
Copy link
Contributor

@opr opr commented Jul 25, 2022

This PR will ensure shipping rate names show when multiple shipping packages are in the cart. It will also fix an issue in the editor where shipping rates don't show.

To fix shipping rates not showing in the editor: in the useShippingData hook, we now check if we're in the editor, and if so show the values from previewShippingRates, or else we get it from the wc/store/cart data store.

To fix the issue of names not showing, I checked the value of packageData?.shipping_rates?.length in ShippingRatesControl. This is then used in the condition that determines whether to show the name or not

{ ( showItems || collapsible ) && (
<div className="wc-block-components-shipping-rates-control__package-title">
{ packageData.name }
</div>
) }

it defaulted to false.

Fixes #6437

Screenshots

Before After
image

👆🏻 note the spacing is fixed in #6740 👆🏻

Testing

Automated Tests

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

User Facing Testing

  1. Install the "Multiple Packages for WooCommerce" plugin
  2. Navigate to WooCommerce -> Settings -> Multiple Packages
  3. Adjust the settings to work based on "Per Product"
  4. Add two/three/four different products to the cart and typically need shipping.
  5. Go the checkout page and look at the shipping options, ensure there is a title for each one.
  6. Disable the plugin and reload the Checkout Block, ensure the shipping section still looks OK.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Ensure shipping package names are shown correctly in the Checkout Block when a cart contains multiple packages.

@opr opr added status: needs review type: bug The issue/PR concerns a confirmed bug. focus: blocks Specific work involving or impacting how blocks behave. block: checkout Issues related to the checkout block. labels Jul 25, 2022
@rubikuserbot rubikuserbot requested review from a team and wavvves and removed request for a team July 25, 2022 16:16
@rubikuserbot
Copy link

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

Size Change: +4.11 kB (0%)

Total Size: 877 kB

Filename Size Change
build/active-filters-frontend.js 7.35 kB +3 B (0%)
build/active-filters.js 8 kB +1 B (0%)
build/all-products-frontend.js 18.1 kB -7 B (0%)
build/all-products.js 33.5 kB +3 B (0%)
build/attribute-filter-frontend.js 25.1 kB -1 B (0%)
build/attribute-filter.js 14.4 kB +1 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.07 kB -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 780 B -2 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB +1 B (0%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB +23 B (0%)
build/cart-frontend.js 47 kB +1.34 kB (+3%)
build/cart.js 44.3 kB +71 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB +3 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.83 kB -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.36 kB -2 B (0%)
build/checkout-blocks/order-note-frontend.js 1.08 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB -1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB +2 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.1 kB -1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 602 B -2 B (0%)
build/checkout-blocks/payment-frontend.js 7.67 kB -3 B (0%)
build/checkout-blocks/shipping-address-frontend.js 993 B +2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.76 kB +36 B (+1%)
build/checkout-blocks/terms-frontend.js 1.22 kB -1 B (0%)
build/checkout-frontend.js 49.2 kB +1.33 kB (+3%)
build/checkout.js 45.5 kB +55 B (0%)
build/featured-category.js 13.2 kB +1 B (0%)
build/featured-product.js 13.5 kB +1 B (0%)
build/mini-cart-component-frontend.js 16.6 kB +7 B (0%)
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.68 kB -2 B (0%)
build/mini-cart-contents-block/footer-frontend.js 6.99 kB +1.24 kB (+22%) 🚨
build/mini-cart-contents.js 22.9 kB +33 B (0%)
build/mini-cart-frontend.js 1.71 kB -1 B (0%)
build/mini-cart.js 6.62 kB +1 B (0%)
build/price-filter-frontend.js 13.1 kB -7 B (0%)
build/product-add-to-cart-frontend.js 6.96 kB -2 B (0%)
build/product-category.js 8.69 kB -1 B (0%)
build/product-price-frontend.js 1.94 kB +1 B (0%)
build/reviews-by-category.js 11.2 kB -1 B (0%)
build/reviews-by-product.js 12.3 kB -1 B (0%)
build/reviews-frontend.js 7.01 kB -2 B (0%)
build/single-product-frontend.js 21.4 kB -5 B (0%)
build/single-product.js 10.1 kB +2 B (0%)
build/stock-filter-frontend.js 7.39 kB -1 B (0%)
build/stock-filter.js 7.3 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB +1 B (0%)
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB +2 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.53 kB -1 B (0%)
build/wc-blocks-vendors.js 58.8 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/all-reviews.js 7.8 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 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 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.16 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 890 B
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/totals-frontend.js 326 B
build/handpicked-products.js 7.38 kB
build/legacy-template.js 2.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/price-filter.js 9.04 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 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart.js 6.63 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.85 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 921 B
build/product-category-list.js 502 B
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.08 kB
build/product-new.js 7.72 kB
build/product-on-sale.js 8.04 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 730 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 680 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 917 B
build/product-tag-list-frontend.js 915 B
build/product-tag-list.js 496 B
build/product-tag.js 8.09 kB
build/product-title-frontend.js 1.29 kB
build/product-title.js 911 B
build/product-top-rated.js 7.96 kB
build/products-by-attribute.js 8.64 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.74 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.04 kB
build/wc-blocks-editor-style.css 5.04 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.1 kB
build/wc-blocks-style.css 22.1 kB
build/wc-blocks-vendors-style-rtl.css 1.26 kB
build/wc-blocks-vendors-style.css 1.26 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

Copy link
Contributor

@wavvves wavvves left a comment

Choose a reason for hiding this comment

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

LGTM! 😎

image

@@ -65,7 +65,9 @@ const Packages = ( {
packageData={ packageData }
collapsible={ collapsible }
collapse={ collapse }
showItems={ showItems }
showItems={
showItems || packageData?.shipping_rates?.length > 1
Copy link
Member

Choose a reason for hiding this comment

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

This logic will evaluate to true when you have multiple shipping rates within a single package, not overall.

Copy link
Member

Choose a reason for hiding this comment

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

Logic should be showItems || packages.length > 1

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. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cart packages names and content not rendered
4 participants