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

Blockified Order Confirmation #10056

Merged
merged 54 commits into from
Sep 20, 2023
Merged

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Jun 30, 2023

What

This PR introduces new blocks for the individual parts of the order confirmation page. This includes blocks to display:

  • The order status
  • The order summary (ID, purchaser, date, total)
  • Order details/totals
  • Shipping and billing addresses

This replaces the legacy confirmation block which can be found under Appearance > Editor > Templates > Order Confirmation. The switch between legacy and new blocks is a manual process that involves editing the template and clicking the "transform into blocks" button.

Fixes #10021

Why

This change allows merchants to control the appearance of the order confirmation page. It also modernises how the order confirmation page is rendered.

Testing Instructions

Perform the following tests as a logged in admin user unless otherwise specified.

  1. Go to Appearance > Editor > Templates > Order Confirmation
  2. Convert the legacy order confirmation block to individual blocks using the "transform into blocks" button. Confirm the new blocks appear.
  3. Focus on each new block and confirm there is an appropriate icon, title, description, and style controls for each. Play around with text colours, background colours, and any other options available to ensure changes apply in the editor.
  4. Save changes.
  5. Go to the store frontend, add some items to the cart, and place an order.
  6. Confirm the confirmation page matches the styling you applied and all blocks are present. You can leave this tab open for testing.
  7. Edit the order confirmation page again. Remove some blocks, for example headings.
  8. Save changes, then refresh the confirmation page on the frontend. Confirm changes have applied.

Downloadable Products

  1. Add a downloadable product to your cart and complete checkout.
  2. The order confirmation page will be shown—no downloads will be visible. Leave this tab open.
  3. In a new tab, go to store admin and edit the order you just placed. Change its status to "processing". This will grant access to downloads.
  4. Go back to the confirmation page and refresh.
  5. Confirm the download section is now visible.

Unauthenticated Views

  1. Place an order as a logged in admin user. Leave the confirmation page open.
  2. Copy the page address.
  3. Open up a new incognito browser window, or better yet, using a different browser. Paste the URL from earlier.
  4. Confirm no order details are visible—you should only see some text and a login link as follows:

Screenshot 2023-09-01 at 13 14 39

  1. Close all tabs and log out from your store.
  2. Place a new order as a guest. Confirm the order confirmation page shows some order details, but hides email address, payment method, and the full billing/shipping address. This is the limited view that guests can see.
  3. Leave the confirmation page open. Copy the page address.
  4. Open up a new incognito browser window, or better yet, using a different browser. Paste the URL from earlier.
  5. You should still see details if within 10 minutes of placing the order.
  6. Wait 10 minutes then refresh the page.
  7. Confirm you see a message asking you to either login or fill out the form to see order details as follows:

Screenshot 2023-09-01 at 13 17 39

  1. Enter the incorrect email. See a notice rejecting the request "We were unable to verify the email address you provided. Please try again.".
  2. Enter the correct email. See limited order details.
  3. Edit the URL of the page to remove the order key. For example, checkout/order-received/1772/?key=wc_order_GAE4XxQ4k7E77 would become checkout/order-received/1772
  4. You should no longer be able to provide your email and see order details. The key is required. You will see a generic message only.

Screenshot 2023-09-01 at 13 53 30

Developer tests

Install a 3rd party extension which adds something to the order confirmation page. Confirm that the extension renders it's content on the new order confirmation page. You can find examples on WooComerce.com. One I tried was "Share your purchase" which appends social sharing to the confirmation page.

  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

Screenshot 2023-09-01 at 13 53 50

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • 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.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Feature: For users of block based themes, the order confirmation template can now be converted to individual blocks for greater control over layout, styling, and appearance. Go to Appearance > Editor > Templates > Order Confirmation and use the "transform into blocks" button to enable this functionality.

@github-actions
Copy link
Contributor

github-actions bot commented Jun 30, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10056.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-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, 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 ⚠️
classic-shortcode.js wc-settings, wp-block-editor, wp-blocks, wp-components, 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 ⚠️
page-content-wrapper.js wc-settings, wp-block-editor, wp-blocks, 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-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-gallery.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-gallery-large-image.js wc-settings, wp-block-editor, wp-blocks, wp-element, wp-polyfill ⚠️
product-gallery-large-image-next-previous.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-gallery-pager.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-gallery-thumbnails.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
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 react, 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-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-polyfill ⚠️
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 ⚠️
collection-filters.js wc-settings, wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives ⚠️
order-confirmation-summary.js wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-date, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-totals-wrapper.js wc-settings, wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-totals.js wc-price-format, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-downloads-wrapper.js wc-settings, wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-downloads.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
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-shipping-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 ⚠️
order-confirmation-additional-information.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives ⚠️

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

TypeScript Errors Report

  • Files with errors: 506
  • Total errors: 2303

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

assets/js/blocks/order-confirmation/additional-information/index.tsx

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

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

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

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

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

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

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

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 30, 2023

Size Change: +24.8 kB (+2%)

Total Size: 1.4 MB

Filename Size Change
build/active-filters-frontend.js 8.58 kB +1 B (0%)
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 930 B +1 B (0%)
build/active-filters.css 1.99 kB +1 B (0%)
build/active-filters.js 7.5 kB -13 B (0%)
build/add-to-cart-form-rtl.css 367 B +12 B (+3%)
build/add-to-cart-form.css 368 B +14 B (+4%)
build/all-products-frontend.js 9.95 kB +4 B (0%)
build/all-products-rtl.css 4.48 kB +9 B (0%)
build/all-products.css 4.47 kB +11 B (0%)
build/all-products.js 41.6 kB +71 B (0%)
build/all-reviews.js 8.36 kB -2 B (0%)
build/attribute-filter.css 4.13 kB -1 B (0%)
build/attribute-filter.js 13 kB -27 B (0%)
build/breadcrumbs.js 2.27 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-style.js 250 B +1 B (0%)
build/cart-blocks/cart-line-items-style.js 137 B +2 B (+1%)
build/cart-blocks/empty-cart-style.js 346 B +3 B (+1%)
build/cart-blocks/filled-cart-frontend.js 651 B -1 B (0%)
build/cart-blocks/order-summary-coupon-form-style.js 137 B -1 B (-1%)
build/cart-blocks/order-summary-fee-style.js 137 B +1 B (+1%)
build/cart-blocks/order-summary-heading-style.js 327 B +2 B (+1%)
build/cart-blocks/order-summary-shipping-frontend.js 12 kB -1 B (0%)
build/cart-blocks/order-summary-shipping-style.js 177 B -1 B (-1%)
build/cart-blocks/order-summary-subtotal-style.js 137 B +1 B (+1%)
build/cart-frontend.js 29.6 kB +3 B (0%)
build/cart-rtl.css 9.77 kB -1 B (0%)
build/cart.css 9.76 kB -1 B (0%)
build/cart.js 44.8 kB +25 B (0%)
build/catalog-sorting.js 1.71 kB -3 B (0%)
build/checkout-blocks/actions-frontend.js 1.81 kB +2 B (0%)
build/checkout-blocks/actions-style.js 680 B -1 B (0%)
build/checkout-blocks/billing-address-style.js 532 B -1 B (0%)
build/checkout-blocks/contact-information-style.js 607 B +2 B (0%)
build/checkout-blocks/order-summary-cart-items-style.js 138 B +1 B (+1%)
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB +1 B (0%)
build/checkout-blocks/order-summary-style.js 319 B +1 B (0%)
build/checkout-blocks/order-summary-taxes-style.js 177 B -1 B (-1%)
build/checkout-blocks/payment-frontend.js 9.13 kB +2 B (0%)
build/checkout-blocks/payment-style.js 460 B +1 B (0%)
build/checkout-blocks/pickup-options-style.js 441 B +1 B (0%)
build/checkout-blocks/shipping-address-style.js 475 B -2 B (0%)
build/checkout-blocks/shipping-method-style.js 1.35 kB -4 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.68 kB +2 B (0%)
build/checkout-blocks/shipping-methods-style.js 416 B -1 B (0%)
build/checkout-blocks/totals-style.js 276 B +1 B (0%)
build/checkout-frontend.js 31.5 kB +1 B (0%)
build/checkout-rtl.css 9.08 kB -1 B (0%)
build/checkout.css 9.07 kB +1 B (0%)
build/checkout.js 47.4 kB -43 B (0%)
build/classic-shortcode.js 4.63 kB +2 B (0%)
build/collection-filters.js 1.86 kB +4 B (0%)
build/customer-account.js 3.18 kB -2 B (0%)
build/featured-category.js 15.1 kB +10 B (0%)
build/featured-product.js 15.3 kB -53 B (0%)
build/filter-wrapper-frontend.js 14 kB -1 B (0%)
build/filter-wrapper.js 2.39 kB +7 B (0%)
build/handpicked-products.js 7.98 kB -8 B (0%)
build/legacy-template.js 8.22 kB +107 B (+1%)
build/mini-cart-component-frontend.js 30.5 kB +3 B (0%)
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 248 B -1 B (0%)
build/mini-cart-contents-block/cart-button-style.js 384 B -1 B (0%)
build/mini-cart-contents-block/checkout-button-style.js 464 B -2 B (0%)
build/mini-cart-contents-block/empty-cart-style.js 356 B +1 B (0%)
build/mini-cart-contents-block/footer-style.js 2.35 kB +4 B (0%)
build/mini-cart-contents-block/items-style.js 229 B +1 B (0%)
build/mini-cart-contents-block/products-table-style.js 5.32 kB +1 B (0%)
build/mini-cart-contents-block/shopping-button-style.js 398 B +1 B (0%)
build/mini-cart-contents-block/title-label-style.js 300 B -1 B (0%)
build/mini-cart-contents-block/title-style.js 440 B +3 B (+1%)
build/mini-cart-contents.js 17.6 kB +23 B (0%)
build/mini-cart-frontend.js 2.79 kB -1 B (0%)
build/mini-cart-rtl.css 2.56 kB -1 B (0%)
build/mini-cart.css 2.56 kB +1 B (0%)
build/mini-cart.js 6.34 kB +1 B (0%)
build/page-content-wrapper.js 2.02 kB +6 B (0%)
build/price-filter.js 8.51 kB -16 B (0%)
build/product-add-to-cart.js 8.55 kB +3 B (0%)
build/product-average-rating.js 402 B -1 B (0%)
build/product-best-sellers.js 8.34 kB +7 B (0%)
build/product-button-interactivity-frontend.js 9.54 kB -1 B (0%)
build/product-button.js 3.86 kB -1 B (0%)
build/product-categories.js 2.71 kB -7 B (0%)
build/product-category.js 9.3 kB +1 B (0%)
build/product-collection.js 15.5 kB +2 B (0%)
build/product-gallery-frontend.js 649 B -2 B (0%)
build/product-gallery-large-image-next-previous.js 4.07 kB -1 B (0%)
build/product-gallery-pager.js 3.49 kB +2 B (0%)
build/product-gallery-rtl.css 679 B +1 B (0%)
build/product-gallery-thumbnails.js 3.91 kB -1 B (0%)
build/product-gallery.css 679 B +1 B (0%)
build/product-gallery.js 9.34 kB -7 B (0%)
build/product-image.js 1.53 kB -2 B (0%)
build/product-new.js 8.61 kB +4 B (0%)
build/product-on-sale.js 8.6 kB -9 B (0%)
build/product-price.js 1.65 kB +2 B (0%)
build/product-query.js 13.1 kB -5 B (0%)
build/product-rating-counter-frontend.js 2.03 kB -1 B (0%)
build/product-rating-counter.js 689 B -1 B (0%)
build/product-rating-stars.js 939 B +1 B (0%)
build/product-rating.js 1.04 kB +3 B (0%)
build/product-results-count.js 1.67 kB +2 B (0%)
build/product-sku.js 523 B +1 B (0%)
build/product-summary.js 917 B -1 B (0%)
build/product-tag.js 8.62 kB +2 B (0%)
build/product-template.js 2.86 kB -3 B (0%)
build/product-title.js 962 B -1 B (0%)
build/product-top-rated.js 8.89 kB +8 B (0%)
build/products-by-attribute.js 9.64 kB -10 B (0%)
build/rating-filter.css 4.2 kB +1 B (0%)
build/rating-filter.js 6.88 kB -11 B (0%)
build/reviews-by-category.js 12.6 kB +14 B (0%)
build/reviews-by-product.js 14 kB +5 B (0%)
build/reviews-frontend.js 7.12 kB +44 B (+1%)
build/single-product.js 11.4 kB +8 B (0%)
build/stock-filter.css 4 kB -1 B (0%)
build/stock-filter.js 7.59 kB -9 B (0%)
build/store-notices.js 1.69 kB -2 B (0%)
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 629 B +1 B (0%)
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB -10 B (0%)
build/wc-blocks-editor-style-rtl.css 6.76 kB +1 B (0%)
build/wc-blocks-vendors.js 64.4 kB +245 B (0%)
build/order-confirmation-additional-information-rtl.css 356 B +356 B (new file) 🆕
build/order-confirmation-additional-information.css 356 B +356 B (new file) 🆕
build/order-confirmation-additional-information.js 1.6 kB +1.6 kB (new file) 🆕
build/order-confirmation-billing-address-rtl.css 393 B +393 B (new file) 🆕
build/order-confirmation-billing-address.css 393 B +393 B (new file) 🆕
build/order-confirmation-billing-address.js 1.55 kB +1.55 kB (new file) 🆕
build/order-confirmation-billing-wrapper.js 1.5 kB +1.5 kB (new file) 🆕
build/order-confirmation-downloads-rtl.css 477 B +477 B (new file) 🆕
build/order-confirmation-downloads-wrapper.js 1.54 kB +1.54 kB (new file) 🆕
build/order-confirmation-downloads.css 478 B +478 B (new file) 🆕
build/order-confirmation-downloads.js 1.9 kB +1.9 kB (new file) 🆕
build/order-confirmation-shipping-address-rtl.css 394 B +394 B (new file) 🆕
build/order-confirmation-shipping-address.css 393 B +393 B (new file) 🆕
build/order-confirmation-shipping-address.js 1.55 kB +1.55 kB (new file) 🆕
build/order-confirmation-shipping-wrapper.js 1.51 kB +1.51 kB (new file) 🆕
build/order-confirmation-status-rtl.css 277 B +277 B (new file) 🆕
build/order-confirmation-status.css 277 B +277 B (new file) 🆕
build/order-confirmation-status.js 1.54 kB +1.54 kB (new file) 🆕
build/order-confirmation-summary-rtl.css 458 B +458 B (new file) 🆕
build/order-confirmation-summary.css 457 B +457 B (new file) 🆕
build/order-confirmation-summary.js 1.76 kB +1.76 kB (new file) 🆕
build/order-confirmation-totals-rtl.css 593 B +593 B (new file) 🆕
build/order-confirmation-totals-wrapper.js 1.86 kB +1.86 kB (new file) 🆕
build/order-confirmation-totals.css 592 B +592 B (new file) 🆕
build/order-confirmation-totals.js 2.18 kB +2.18 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper-frontend.js 6.18 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.04 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/blocks-checkout.js 35.4 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B
build/cart-blocks/cart-cross-sells-frontend.js 250 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.72 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 kB
build/cart-blocks/cart-express-payment-frontend.js 712 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 284 B
build/cart-blocks/cart-items-style.js 219 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-order-summary-style.js 318 B
build/cart-blocks/cart-totals-frontend.js 288 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 353 B
build/cart-blocks/filled-cart-style.js 309 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-discount-style.js 137 B
build/cart-blocks/order-summary-fee-frontend.js 271 B
build/cart-blocks/order-summary-heading-frontend.js 325 B
build/cart-blocks/order-summary-subtotal-frontend.js 272 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/checkout-blocks/actions--checkout-blocks/terms-style.js 486 B
build/checkout-blocks/billing-address-frontend.js 4.3 kB
build/checkout-blocks/contact-information-frontend.js 2.02 kB
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 299 B
build/checkout-blocks/fields-style.js 249 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.63 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.21 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-subtotal-frontend.js 272 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/pickup-options-frontend.js 4.13 kB
build/checkout-blocks/shipping-address-frontend.js 4.28 kB
build/checkout-blocks/shipping-method-frontend.js 2.58 kB
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 672 B
build/checkout-blocks/totals-frontend.js 333 B
build/classic-shortcode-rtl.css 240 B
build/classic-shortcode.css 239 B
build/customer-account-rtl.css 407 B
build/customer-account.css 407 B
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 359 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 2.36 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 548 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 491 B
build/mini-cart-contents-block/title-frontend.js 1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.6 kB
build/mini-cart-contents-block/title-items-counter-style.js 301 B
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.69 kB
build/price-filter-wrapper-frontend.js 8.59 kB
build/price-filter-wrapper-rtl.css 2.55 kB
build/price-filter-wrapper.css 2.54 kB
build/price-filter.css 2.69 kB
build/price-format.js 1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 272 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B
build/product-add-to-cart--product-image--product-title.js 320 B
build/product-add-to-cart-frontend.js 8.51 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 934 B
build/product-average-rating-frontend.js 1.73 kB
build/product-button-frontend.js 4.88 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-frontend.js 824 B
build/product-gallery-large-image-next-previous-rtl.css 489 B
build/product-gallery-large-image-next-previous.css 490 B
build/product-gallery-large-image-rtl.css 389 B
build/product-gallery-large-image.css 385 B
build/product-gallery-large-image.js 2.34 kB
build/product-gallery-pager-rtl.css 293 B
build/product-gallery-pager.css 294 B
build/product-gallery-thumbnails-rtl.css 293 B
build/product-gallery-thumbnails.css 292 B
build/product-image-frontend.js 2.69 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 988 B
build/product-image.css 986 B
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-rating-frontend.js 2.37 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.27 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating.css 244 B
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.85 kB
build/product-sale-badge-rtl.css 435 B
build/product-sale-badge.css 434 B
build/product-sale-badge.js 699 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.86 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-stock-indicator-frontend.js 2.05 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 710 B
build/product-summary-frontend.js 2.2 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-template-rtl.css 419 B
build/product-template.css 419 B
build/product-title-frontend.js 2.23 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.65 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.85 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/vendors--active-filters-wrapper-frontend.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.29 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/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.38 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--product-add-to-cart-frontend.js 7.5 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 22 kB
build/wc-blocks-editor-style.css 6.77 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks.css 2.46 kB
build/wc-blocks.js 2.63 kB
build/wc-interactivity.js 10.8 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.5 kB

compressed-size-action

@mikejolley mikejolley added type: enhancement The issue is a request for an enhancement. type: new block Applied to work that introduces a new block (typically used on an epic issue). block: checkout Issues related to the checkout block. labels Jun 30, 2023
@mikejolley mikejolley force-pushed the feature/blockify-order-confirmation branch 2 times, most recently from 80b2f19 to 49893c6 Compare July 6, 2023 09:39
@woocommerce woocommerce deleted a comment from github-actions bot Jul 6, 2023
@mikejolley mikejolley force-pushed the feature/blockify-order-confirmation branch from 79d5fc8 to 0ac6f1f Compare July 11, 2023 10:11
@mikejolley mikejolley self-assigned this Jul 14, 2023
@mikejolley mikejolley force-pushed the feature/blockify-order-confirmation branch from be361f6 to 8b638b6 Compare July 18, 2023 09:34
@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 26, 2023
@mikejolley mikejolley removed the status: stale Stale issues and PRs have had no updates for 60 days. label Jul 26, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Aug 3, 2023

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 Aug 3, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Aug 11, 2023
@mikejolley mikejolley force-pushed the feature/blockify-order-confirmation branch from 4d7c0ce to 47e53ee Compare August 14, 2023 12:37
@tarhi-saad tarhi-saad force-pushed the feature/blockify-order-confirmation branch from f087f82 to de8079f Compare August 25, 2023 06:50
@mikejolley mikejolley force-pushed the feature/blockify-order-confirmation branch from f1a1a12 to 7eaa78d Compare September 1, 2023 11:09
@mikejolley mikejolley added this to the 11.1.0 milestone Sep 1, 2023
@mikejolley
Copy link
Member Author

e2e tests are still needed, and a decision on #10050, but this feature branch is close to feature complete so I think we're ok to start the final review and approval process @tarhi-saad. Marking as ready to review.

@mikejolley mikejolley marked this pull request as ready for review September 1, 2023 13:52
@woocommercebot woocommercebot requested review from a team and tarunvijwani and removed request for a team September 1, 2023 13:52
@woocommerce woocommerce deleted a comment from github-actions bot Sep 1, 2023
mikejolley and others added 12 commits September 19, 2023 13:53
* Add block which contains hooks

* Use skeleton for placeholder instead of illustration

* Remove duplicate methods
* Add tests for conditional blocks

* Move setup into test
* 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
@mikejolley mikejolley force-pushed the feature/blockify-order-confirmation branch from 090713f to 5221768 Compare September 19, 2023 12:55
@mikejolley mikejolley merged commit f92dba5 into trunk Sep 20, 2023
32 checks passed
@mikejolley mikejolley deleted the feature/blockify-order-confirmation branch September 20, 2023 12:56
@tarunvijwani tarunvijwani changed the title Feature Branch: Blockified Order Confirmation Blockified Order Confirmation Sep 26, 2023
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. status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. type: enhancement The issue is a request for an enhancement. 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.

Blockify the Order Confirmation Template
7 participants