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

Add order confirmation wrapper block #10286

Conversation

tarhi-saad
Copy link
Contributor

@tarhi-saad tarhi-saad commented Jul 20, 2023

This PR introduces a parent Block for the Billing Address Block. In this parent Block, we are conditionally displaying the Billing Address Block and the heading. We also updated the titles, descriptions, and icons of the Billing Address and the wrapper Blocks.

Fixes #10094, #10054

User Facing Testing

  1. Select a block theme (e.g., Twenty Twenty-Three)
  2. Go to Editor -> Templates -> Order Confirmation
  3. Select the Order Confirmation Block and click on transform into blocks
  4. Check the Order Confirmation Order Billing Wrapper Block. Ensure it has a heading and Billing Address as Inner Blocks.
  5. Update the billing address block heading and refresh the page. Ensure the changes are applied on the edit and frontend sides.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@tarhi-saad tarhi-saad added type: new block Applied to work that introduces a new block (typically used on an epic issue). skip-changelog PRs that you don't want to appear in the changelog. labels Jul 20, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 20, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
wc-blocks.js wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-edit-site, wp-element, wp-hooks, wp-i18n, wp-plugins, wp-polyfill, wp-primitives ⚠️
active-filters.js wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
all-reviews.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives ⚠️
attribute-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
breadcrumbs.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
cart.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
catalog-sorting.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
checkout.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
customer-account.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
featured-category.js react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url ⚠️
featured-product.js react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url ⚠️
filter-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
handpicked-products.js react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
legacy-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-notices, wp-polyfill, wp-primitives ⚠️
mini-cart.js react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-dom, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart-contents.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
store-notices.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
price-filter.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
product-best-sellers.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-category.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-categories.js wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
product-gallery.js wc-settings, wp-block-editor, wp-blocks, wp-data, wp-element, wp-polyfill ⚠️
product-gallery-large-image.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-polyfill ⚠️
product-new.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-on-sale.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-query.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url ⚠️
product-results-count.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-search.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-tag.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-top-rated.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
products-by-attribute.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
rating-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
reviews-by-category.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
reviews-by-product.js react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
single-product.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
product-collection.js wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url ⚠️
product-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-polyfill ⚠️
order-confirmation-summary.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
order-confirmation-totals.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
order-confirmation-downloads.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
order-confirmation-billing-address.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives ⚠️
order-confirmation-shipping-address.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives ⚠️
order-confirmation-billing-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-status.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️

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

TypeScript Errors Report

  • Files with errors: 477
  • Total errors: 2252

⚠️ ⚠️ This PR introduces new TS errors on 18 files:

assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.js

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-error-boundary.js

assets/js/blocks/classic-template/test/utils.ts

assets/js/blocks/mini-cart/edit.tsx

assets/js/blocks/order-confirmation/billing-address/index.tsx

assets/js/blocks/order-confirmation/billing-wrapper/index.tsx

assets/js/blocks/order-confirmation/downloads/edit.tsx

assets/js/blocks/order-confirmation/downloads/index.tsx

assets/js/blocks/order-confirmation/shipping-address/index.tsx

assets/js/blocks/order-confirmation/status/index.tsx

assets/js/blocks/order-confirmation/summary/edit.tsx

assets/js/blocks/order-confirmation/summary/index.tsx

assets/js/blocks/order-confirmation/totals/edit.tsx

assets/js/blocks/order-confirmation/totals/index.tsx

assets/js/blocks/product-gallery/edit.tsx

assets/js/hocs/test/with-searched-products.js

assets/js/interactivity/router.js

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jul 20, 2023

Size Change: +1.1 kB (0%)

Total Size: 1.37 MB

Filename Size Change
build/all-products.js 41.5 kB +5 B (0%)
build/all-reviews.js 7.87 kB +3 B (0%)
build/attribute-filter.js 13.3 kB +3 B (0%)
build/breadcrumbs.js 2.14 kB +1 B (0%)
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B +1 B (+1%)
build/cart-blocks/cart-cross-sells-style.js 252 B -2 B (-1%)
build/cart-blocks/cart-line-items-style.js 137 B -1 B (-1%)
build/cart-blocks/cart-order-summary-style.js 319 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-style.js 137 B +1 B (+1%)
build/cart-blocks/order-summary-discount-style.js 137 B +1 B (+1%)
build/cart-blocks/order-summary-subtotal-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-taxes-style.js 176 B -1 B (-1%)
build/cart.js 45.4 kB -6 B (0%)
build/catalog-sorting.js 1.71 kB -5 B (0%)
build/checkout-blocks/actions-style.js 685 B -1 B (0%)
build/checkout-blocks/billing-address-style.js 532 B -2 B (0%)
build/checkout-blocks/contact-information-style.js 608 B -1 B (0%)
build/checkout-blocks/order-summary-cart-items-style.js 138 B +1 B (+1%)
build/checkout-blocks/order-summary-coupon-form-style.js 138 B +1 B (+1%)
build/checkout-blocks/order-summary-style.js 321 B +1 B (0%)
build/checkout-blocks/order-summary-subtotal-style.js 137 B -1 B (-1%)
build/checkout-blocks/payment-style.js 460 B -2 B (0%)
build/checkout-blocks/pickup-options-style.js 443 B -1 B (0%)
build/checkout-blocks/shipping-address-style.js 477 B -1 B (0%)
build/checkout-blocks/shipping-method-style.js 1.37 kB -1 B (0%)
build/checkout-blocks/shipping-methods-style.js 417 B -1 B (0%)
build/checkout-blocks/terms-style.js 675 B -1 B (0%)
build/checkout-blocks/totals-style.js 284 B -1 B (0%)
build/checkout.js 48 kB +2 B (0%)
build/customer-account.js 3.19 kB +2 B (0%)
build/featured-category.js 15.1 kB +3 B (0%)
build/featured-product.js 15.3 kB +2 B (0%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 8.11 kB +1 B (0%)
build/legacy-template.js 9.04 kB +2 B (0%)
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 293 B -1 B (0%)
build/mini-cart-contents-block/cart-button-style.js 386 B -1 B (0%)
build/mini-cart-contents-block/checkout-button-style.js 466 B -1 B (0%)
build/mini-cart-contents-block/title-label-style.js 299 B -2 B (-1%)
build/mini-cart-contents-block/title-style.js 441 B -1 B (0%)
build/mini-cart-contents.js 18.1 kB +8 B (0%)
build/mini-cart.js 6.09 kB -3 B (0%)
build/order-confirmation-billing-address.js 1.35 kB -315 B (-19%) 👏
build/order-confirmation-status.js 1.55 kB -2 B (0%)
build/order-confirmation-summary.js 1.54 kB -1 B (0%)
build/order-confirmation-totals.js 1.92 kB -2 B (0%)
build/product-add-to-cart.js 8.84 kB +3 B (0%)
build/product-best-sellers.js 8.45 kB +1 B (0%)
build/product-button--product-image--product-price--product-rating--product-rating-counter--product-ratin--c0971b69.js 955 B +1 B (0%)
build/product-categories.js 2.71 kB -2 B (0%)
build/product-category.js 9.46 kB +1 B (0%)
build/product-collection.js 13.9 kB +1 B (0%)
build/product-gallery-large-image.js 2.01 kB -1 B (0%)
build/product-gallery.js 2.3 kB -1 B (0%)
build/product-new.js 8.75 kB -1 B (0%)
build/product-on-sale.js 8.76 kB -5 B (0%)
build/product-query.js 12.7 kB -1 B (0%)
build/product-rating-stars.js 936 B -2 B (0%)
build/product-results-count.js 1.66 kB -1 B (0%)
build/product-search.js 2.63 kB -1 B (0%)
build/product-summary.js 1.01 kB +2 B (0%)
build/product-tag.js 8.95 kB -1 B (0%)
build/product-template.js 3.35 kB +4 B (0%)
build/product-title.js 3.66 kB +1 B (0%)
build/products-by-attribute.js 9.8 kB +2 B (0%)
build/rating-filter.js 6.94 kB +1 B (0%)
build/reviews-by-product.js 13.4 kB +1 B (0%)
build/single-product.js 11.3 kB +3 B (0%)
build/store-notices.js 1.69 kB -2 B (0%)
build/vendors--checkout-blocks/shipping-method-style.js 11.8 kB +3 B (0%)
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB -1 B (0%)
build/wc-blocks-vendors.js 65.7 kB +2 B (0%)
build/wc-blocks.js 3.75 kB -3 B (0%)
build/order-confirmation-billing-wrapper.js 1.41 kB +1.41 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.7 kB
build/active-filters-rtl.css 2.02 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--7b0ebc06-style.js 958 B
build/active-filters-wrapper-frontend.js 7.64 kB
build/active-filters-wrapper-rtl.css 1.88 kB
build/active-filters-wrapper.css 1.88 kB
build/active-filters.css 2.02 kB
build/active-filters.js 7.59 kB
build/all-products-frontend.js 12.3 kB
build/all-products-rtl.css 4.2 kB
build/all-products.css 4.2 kB
build/all-reviews-rtl.css 1.84 kB
build/all-reviews.css 1.84 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-rtl.css 4.19 kB
build/attribute-filter-wrapper-frontend.js 7.71 kB
build/attribute-filter-wrapper-rtl.css 4.06 kB
build/attribute-filter-wrapper.css 4.06 kB
build/attribute-filter.css 4.19 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 253 B
build/breadcrumbs.css 253 B
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-price-frontend.js 2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.83 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-items-style.js 229 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.47 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/cart-totals-style.js 238 B
build/cart-blocks/empty-cart-frontend.js 347 B
build/cart-blocks/empty-cart-style.js 340 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/filled-cart-style.js 312 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 334 B
build/cart-blocks/order-summary-heading-style.js 335 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-shipping-style.js 178 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.43 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.9 kB
build/cart-rtl.css 9.6 kB
build/cart.css 9.59 kB
build/catalog-sorting-rtl.css 277 B
build/catalog-sorting.css 276 B
build/checkout-blocks/actions--checkout-blocks/terms-style.js 487 B
build/checkout-blocks/actions-frontend.js 1.89 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 318 B
build/checkout-blocks/fields-style.js 260 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.75 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.18 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/totals-frontend.js 348 B
build/checkout-frontend.js 31.8 kB
build/checkout-rtl.css 9.23 kB
build/checkout.css 9.22 kB
build/customer-account-rtl.css 406 B
build/customer-account.css 406 B
build/featured-category-rtl.css 986 B
build/featured-category.css 987 B
build/featured-product-rtl.css 1.03 kB
build/featured-product.css 1.03 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper-rtl.css 399 B
build/filter-wrapper.css 397 B
build/legacy-template-rtl.css 258 B
build/legacy-template.css 257 B
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/empty-cart-style.js 358 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/footer-rtl.css 419 B
build/mini-cart-contents-block/footer-style.js 2.4 kB
build/mini-cart-contents-block/footer.css 418 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/items-style.js 237 B
build/mini-cart-contents-block/products-table--product-summary-style.js 736 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/products-table-rtl.css 2.19 kB
build/mini-cart-contents-block/products-table-style.js 5.1 kB
build/mini-cart-contents-block/products-table.css 2.18 kB
build/mini-cart-contents-block/shopping-button-frontend.js 539 B
build/mini-cart-contents-block/shopping-button-style.js 403 B
build/mini-cart-contents-block/title-frontend.js 1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-items-counter-style.js 300 B
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents-rtl.css 2.73 kB
build/mini-cart-contents.css 2.73 kB
build/mini-cart-frontend.js 2.84 kB
build/mini-cart-rtl.css 2.61 kB
build/mini-cart.css 2.61 kB
build/order-confirmation-billing-address-rtl.css 270 B
build/order-confirmation-billing-address.css 269 B
build/order-confirmation-downloads-rtl.css 349 B
build/order-confirmation-downloads.css 349 B
build/order-confirmation-downloads.js 1.39 kB
build/order-confirmation-shipping-address-rtl.css 271 B
build/order-confirmation-shipping-address.css 271 B
build/order-confirmation-shipping-address.js 1.66 kB
build/order-confirmation-status-rtl.css 268 B
build/order-confirmation-status.css 269 B
build/order-confirmation-summary-rtl.css 337 B
build/order-confirmation-summary.css 336 B
build/order-confirmation-totals-rtl.css 396 B
build/order-confirmation-totals.css 396 B
build/packages-style-rtl.css 3.59 kB
build/packages-style.css 3.59 kB
build/price-filter-frontend.js 14.6 kB
build/price-filter-rtl.css 2.71 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter-wrapper-rtl.css 2.56 kB
build/price-filter-wrapper.css 2.56 kB
build/price-filter.css 2.7 kB
build/price-filter.js 8.58 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-rating-c--0937e03a.js 271 B
build/product-add-to-cart--product-button--product-image--product-rating--product-rating-counter--product--3cd1bd17.js 151 B
build/product-add-to-cart-frontend.js 6.51 kB
build/product-add-to-cart-rtl.css 1.39 kB
build/product-add-to-cart.css 1.4 kB
build/product-button-frontend.js 2.67 kB
build/product-button-rtl.css 889 B
build/product-button.css 891 B
build/product-button.js 3.97 kB
build/product-categories-rtl.css 671 B
build/product-categories.css 670 B
build/product-details-rtl.css 413 B
build/product-details.css 410 B
build/product-gallery-large-image-rtl.css 314 B
build/product-gallery-large-image.css 313 B
build/product-image-frontend.js 2.71 kB
build/product-image-gallery-rtl.css 322 B
build/product-image-gallery.css 322 B
build/product-image-rtl.css 951 B
build/product-image.css 949 B
build/product-image.js 4.21 kB
build/product-price-frontend.js 231 B
build/product-price-rtl.css 696 B
build/product-price.css 695 B
build/product-price.js 1.67 kB
build/product-query-rtl.css 367 B
build/product-query.css 365 B
build/product-rating-counter-frontend.js 2 kB
build/product-rating-counter.js 688 B
build/product-rating-frontend.js 2.35 kB
build/product-rating-rtl.css 262 B
build/product-rating-stars-frontend.js 2.24 kB
build/product-rating-stars-rtl.css 914 B
build/product-rating-stars.css 916 B
build/product-rating.css 262 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 248 B
build/product-results-count.css 247 B
build/product-reviews-rtl.css 474 B
build/product-reviews.css 473 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 392 B
build/product-sale-badge.css 389 B
build/product-sale-badge.js 665 B
build/product-search-rtl.css 435 B
build/product-search.css 434 B
build/product-sku-frontend.js 1.85 kB
build/product-sku-rtl.css 258 B
build/product-sku.css 258 B
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.04 kB
build/product-stock-indicator-rtl.css 250 B
build/product-stock-indicator.css 250 B
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.26 kB
build/product-summary-rtl.css 571 B
build/product-summary.css 572 B
build/product-template-rtl.css 439 B
build/product-template.css 437 B
build/product-title-frontend.js 2.22 kB
build/product-title-rtl.css 718 B
build/product-title.css 719 B
build/product-top-rated.js 9.01 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.25 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter-wrapper-rtl.css 4.11 kB
build/rating-filter-wrapper.css 4.11 kB
build/rating-filter.css 4.24 kB
build/reviews-by-category-rtl.css 1.84 kB
build/reviews-by-category.css 1.84 kB
build/reviews-by-category.js 12.2 kB
build/reviews-by-product-rtl.css 1.84 kB
build/reviews-by-product.css 1.84 kB
build/reviews-frontend.js 7.17 kB
build/single-product-rtl.css 399 B
build/single-product.css 397 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.06 kB
build/stock-filter-wrapper-frontend.js 6.45 kB
build/stock-filter-wrapper-rtl.css 3.93 kB
build/stock-filter-wrapper.css 3.93 kB
build/stock-filter.css 4.06 kB
build/stock-filter.js 7.64 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--4b176c62-style.js 605 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.19 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-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.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--price-filter-wrapper-frontend.js 2.19 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 6.38 kB
build/wc-blocks-editor-style.css 6.39 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-rtl.css 2.54 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks.css 2.54 kB
build/wc-interactivity.js 10.4 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
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jul 29, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Aug 3, 2023
@tarhi-saad tarhi-saad marked this pull request as ready for review August 7, 2023 06:51
@woocommercebot woocommercebot requested review from a team and mikejolley and removed request for a team August 7, 2023 06:52
Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Left a few minor suggestions. In testing, the wrapper worked, but I got this for the contents:

Your site doesn’t include support for the "woocommerce/order-confirmation-billing-address" block. You can leave this block intact or remove it entirely.

Not sure why its not being found. Can you reproduce?

"name": "woocommerce/order-confirmation-billing-wrapper",
"version": "1.0.0",
"title": "Order Confirmation Billing wrapper",
"description": "Display the order confirmation billing wrapper.",
Copy link
Member

Choose a reason for hiding this comment

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

Wrapper is a technical term so let's describe this as "Order Confirmation Billing Section"

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I updated the title and description of the Billing Wrapper as suggested! 👍

protected function render( $attributes, $content, $block ) {
$order = $this->get_order();

if ( ! $order || ! $this->is_current_customer_order( $order ) || ! $order->has_billing_address() ) {
Copy link
Member

Choose a reason for hiding this comment

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

We'll need to tweak this to account for #10414 but its fine for now.

@tarhi-saad
Copy link
Contributor Author

tarhi-saad commented Aug 7, 2023

@mikejolley! I just spotted the bug about the broken block! It was the "parent" keyword in Block.json. I pushed a fix! Could you please check again?

@tarhi-saad tarhi-saad requested a review from mikejolley August 7, 2023 12:02
@tarhi-saad tarhi-saad changed the title [WIP] Add order confirmation wrapper block Add order confirmation wrapper block Aug 7, 2023
'<div class="wc-block-%4$s %1$s %2$s">%3$s</div>',
esc_attr( $classes_and_styles['classes'] ),
esc_attr( $classname ),
$content,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@mikejolley, I ended up using the provided $content attribute directly to render the Billing Address Inner Block. I initially used the following logic to get the Inner Blocks:

$inner_blocks_html = ''; 
 foreach ( $block->inner_blocks as $inner_block ) { 
 	$inner_blocks_html .= $inner_block->render(); 
 } 

$content = $inner_blocks_html;

So, I'm not certain which approach is the best!

Copy link
Member

Choose a reason for hiding this comment

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

Initial content is probably ok for this if it works.

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Works now. Small case change needed but otherwise :shipit:

@tarhi-saad tarhi-saad force-pushed the add/10094-order-confirmation-wrapper-block branch from c26ee92 to 278b116 Compare August 7, 2023 22:00
@tarhi-saad tarhi-saad merged commit 51b80d0 into feature/blockify-order-confirmation Aug 7, 2023
@tarhi-saad tarhi-saad deleted the add/10094-order-confirmation-wrapper-block branch August 7, 2023 22:36
mikejolley added a commit that referenced this pull request Aug 14, 2023
* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>
tarhi-saad added a commit that referenced this pull request Aug 25, 2023
* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>
mikejolley added a commit that referenced this pull request Sep 1, 2023
* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>
mikejolley added a commit that referenced this pull request Sep 19, 2023
* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>
mikejolley added a commit that referenced this pull request Sep 20, 2023
* Main block types for confirmation

* Initial blocks

* Styling and placeholders

* Make blocks experimental

* Update summary icon

* Add name/description for status block and missing text descriptions in the block.

Closes #10057

* Order confirmation: Convert Order Details Templates to Blocks (#10095)

* Move code from templates into the details block

* Details -> Totals

* Downloads block

* Sample content for downloads block

* Add block icon

* Add conversion template (#10077)

* Update inner block name

* Add default title constant

* Revert "Add default title constant"

This reverts commit 1dd3bbf.

* Add global styles for order confirmation status block (#10164)

* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode

* Add global styles for order confirmation summary block (#10179)

* Styles for summary

* Remove __experimentalWritingMode

* Add table styles for order details (#10185)

* Add table styles for order details

* __experimentalFontWeight

* Add link styles

* Handle preview link styles

* Unauthenticated views for Order Confirmation template (#10414)

* Different views by permission

* check user id matches when logged out

* Add order confirmation wrapper block (#10286)

* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Remove "thanks" for authenticated page

* Introduce shipping wrapper based on billing wrapper

Closes #10053

* Order confirmation block: Verify email address for guest customers (#10567)

* Add verify step for guest orders

* Render content to pass through block content

* Revert package changes

* Customer orders cannot use email to verify

* Add style controls for order shipping and billing address blocks (#10633)

* Order confirmation block styling (#10780)

* Add missing heading to order details

* Summary block spacing

* Update css variables

* table styles

* Inherit border styles for cells

* Alignment and address styles

* Add downloads wrapper

* Style controls

* Fix typo

* Update Download Wrapper's Icon

* Fix TS error

* Disable Download Block's server side rendering in the editor

This fixes the loading after each style change from the style controls

* Clean up Downloads render functions

* Fix client side Downloads Block's table border

* Download + Total wrappers and tables styling

* small screen

* Remove server side render for previews

---------

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Shorten template description

* Update test address data

* Avoid leaking order key in permission form

* Remove todo

* Make email form required.

* Remove edit page link

* Remove empty columns from address wrapper

* Remove IIFE

* typo

* Update description to mention billing

* Adjust link scss

* Fix wrapper markup and spacing controls

* Add link preview in editor

* Add initial E2E setup for the Order Confirmation Block (#10840)

* Fix WC_DateTime check

* Move form outside of block markup

* Add additional information block (#10842)

* Add block which contains hooks

* Use skeleton for placeholder instead of illustration

* Remove duplicate methods

* Remove duplicate align tag

* Update meta styles

* Tests for order confirmation conditional blocks (#10972)

* Add tests for conditional blocks

* Move setup into test

* Add E2E to the the Order Confirmation Block (#10863)

* Add editor util functions

* Update editor template E2E test

* Add the "exact" property for consistency

* Skip test

Can't get the element in the page. More investigation needed! Skipping
for now.

* Fix "transformIntoBlocks" logic

* Add tests for logged in user

* Fix "beforeAll" config

* Confirm downloads section is visible when logged in

* Create "verifyOrderConfirmationDetails" util function

* Add logged in test case

* Add Guest user test case

* Fix editor e2e testing

* Apply a proper teardown

* Fix failing tests after logout

* Ensure we are logged in before visiting the editor

* Ensure to have shipping selected

* Wait for changes to be saved on the editor

* Ensure shipping options is selected

* Remove comment

* Ensure we are logged in before going to the admin page

* Mark the Order Confirmation as a side effect test

* OrderConfirmation blocks are not experimental

* resolve merge conflict

* Revert package lock changes

* Fix enqueue_assets

* Fix CSS 404s

* Make template tests more robust

* Fix page URL for default confirmation page

* Try afterEach to log back in

* Skip guest/logout use cases

Login out causes other tests to fail. We will implement these case when
the multiple sign in roles are introduced in the codebase.

* Remove tests requiring login out & add comments

* Remove unused util functions

* Hide confirmation blocks from post editor

---------

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog. type: new block Applied to work that introduces a new block (typically used on an epic issue).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants