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

Respect core settings for showing the Checkout block #7883

Merged
merged 11 commits into from
Dec 19, 2022

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Dec 8, 2022

Fixes #7823

In #7823, @senadir reported that the following two WooCommerce core settings are not respected by the Checkout block:

  • Guest Checkout: Allow customers to place orders without an account
  • Account creation: Allow customers to create an account during checkout

This PR aims to ensure that these WooCommerce core settings are respected by the Checkout block and that the Checkout block behaves identical to the shortcode-based checkout.

Testing

Show login prompt when guest checkout and account creation (in core) are disabled

  1. Create a test page and add the Checkout block to it.
  2. Head over to /wp-admin/admin.php?page=wc-settings&tab=account.
  3. Deactivate the option Guest checkoutAllow customers to place orders without an account.
  4. Deactivate the option Account creationAllow customers to create an account during checkout.
  5. Open the frontend in an incognito window and ensure that you're not accidentally logged in (from a previous test).
  6. Add a product to the cart and go to the test page with the Checkout block.
  7. Verify that the checkout form is not visible.
  8. Verify that the message You must be logged in to checkout. Click here to log in..

Show checkout when guest checkout is enabled, but account creation is disabled

  1. Create a test page and add the Checkout block to it.
  2. Head over to /wp-admin/admin.php?page=wc-settings&tab=account.
  3. Activate the option Guest checkoutAllow customers to place orders without an account.
  4. Deactivate the option Account creationAllow customers to create an account during checkout.
  5. Open the frontend in an incognito window and ensure that you're not accidentally logged in (from a previous test).
  6. Add a product to the cart and go to the test page with the Checkout block.
  7. Verify that the checkout form is visible.
  8. Place a test order and verify that no account had been created. The order details show Guest as a Customer:

Screenshot 2022-12-16 at 12 26 59

Show checkout when guest checkout is disabled, but account creation is enabled

  1. Create a test page and add the Checkout block to it.
  2. Head over to /wp-admin/admin.php?page=wc-settings&tab=account.
  3. Deactivate the option Guest checkoutAllow customers to place orders without an account.
  4. Activate the option Account creationAllow customers to create an account during checkout.
  5. Open the frontend in an incognito window and ensure that you're not accidentally logged in (from a previous test).
  6. Add a product to the cart and go to the test page with the Checkout block.
  7. Verify that the checkout form is visible.
  8. Place a test order and verify that a new account had been created. The order details shows the new account as a Customer:

Screenshot 2022-12-16 at 12 37 07

Show checkout when guest checkout and account creation are enabled, but don't create account

  1. Create a test page and add the Checkout block to it.
  2. Head over to /wp-admin/admin.php?page=wc-settings&tab=account.
  3. Activate the option Guest checkoutAllow customers to place orders without an account.
  4. Activate the option Account creationAllow customers to create an account during checkout.
  5. Open the frontend in an incognito window and ensure that you're not accidentally logged in (from a previous test).
  6. Add a product to the cart and go to the test page with the Checkout block.
  7. Verify that the checkout form is visible.
  8. Verify that the checkbox Create an account? is not checked.
  9. Place a test order and verify that no account had been created. The order details show Guest as a Customer.

Screenshot 2022-12-16 at 12 26 59

Show checkout when guest checkout and account creation are enabled, and create account

  1. Create a test page and add the Checkout block to it.
  2. Head over to /wp-admin/admin.php?page=wc-settings&tab=account.
  3. Activate the option Guest checkoutAllow customers to place orders without an account.
  4. Activate the option Account creationAllow customers to create an account during checkout.
  5. Open the frontend in an incognito window and ensure that you're not accidentally logged in (from a previous test).
  6. Add a product to the cart and go to the test page with the Checkout block.
  7. Verify that the checkout form is visible.
  8. Verify that the checkbox Create an account? is checked.
  9. Place a test order and verify that a new account had been created. The order details shows the new account as a Customer:

Screenshot 2022-12-16 at 12 37 07

Verify that display logic is in sync

  1. Execute the previous test cases again, both with the classic checkout and the Checkout block.
  2. Do not place an order, but verify that the display logic of the login link respectively the checkout form is in sync.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix: Ensure that the Checkout block respects the WooCommerce core settings for guest checkout and account creation.

@nielslange nielslange added type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels Dec 8, 2022
@nielslange nielslange self-assigned this Dec 8, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2022

TypeScript Errors Report

Files with errors: 431
Total errors: 2100

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2022

Size Change: -686 B (0%)

Total Size: 1.01 MB

Filename Size Change
build/cart-blocks/order-summary-shipping-frontend.js 5.86 kB -141 B (-2%)
build/cart-frontend.js 46.2 kB +1 B (0%)
build/cart.js 45.9 kB -151 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.75 kB -151 B (-4%)
build/checkout-blocks/order-summary-shipping-frontend.js 5.9 kB -146 B (-2%)
build/checkout-frontend.js 48.3 kB +7 B (0%)
build/checkout.js 40.2 kB -143 B (0%)
build/wc-blocks-style-rtl.css 24.5 kB +19 B (0%)
build/wc-blocks-style.css 24.4 kB +19 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.75 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.2 kB
build/all-reviews.js 7.78 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.66 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 27.2 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.02 kB
build/cart-blocks/cart-express-payment-frontend.js 779 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.23 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.69 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 431 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.23 kB
build/checkout-blocks/actions-frontend.js 1.8 kB
build/checkout-blocks/billing-address-frontend.js 1.09 kB
build/checkout-blocks/contact-information-frontend.js 1.83 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.85 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.86 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 312 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 17.3 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.37 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 225 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-add-to-cart.js 8.37 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 440 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B
build/product-button-frontend.js 2.18 kB
build/product-button.js 3.85 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 503 B
build/product-category.js 8.7 kB
build/product-image-frontend.js 2.17 kB
build/product-image.js 3.93 kB
build/product-new.js 7.7 kB
build/product-on-sale.js 8.02 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.54 kB
build/product-query.js 5.95 kB
build/product-rating-frontend.js 1.48 kB
build/product-rating.js 814 B
build/product-sale-badge-frontend.js 1.4 kB
build/product-sale-badge.js 813 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 628 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 1.27 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 1.14 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.05 kB
build/product-title-frontend.js 1.59 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.93 kB
build/products-by-attribute.js 8.62 kB
build/rating-filter-frontend.js 21.1 kB
build/rating-filter-wrapper-frontend.js 6.19 kB
build/rating-filter.js 7.39 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 17.5 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 20.8 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.13 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart--rating-fil--b8470171-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.82 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 19.4 kB
build/wc-blocks-editor-style-rtl.css 5.22 kB
build/wc-blocks-editor-style.css 5.23 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.7 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

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 15, 2022

Script Dependencies Report

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

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

@nielslange nielslange marked this pull request as ready for review December 16, 2022 05:47
@woocommercebot woocommercebot requested review from a team and mikejolley and removed request for a team December 16, 2022 05:47
Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

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

Nice work Niels, minor comment but feel free to ship without it :)

assets/js/blocks/checkout/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/checkout/block.tsx Outdated Show resolved Hide resolved
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.

I understand this now and tested the main case. Small comments/suggestions but nothing blocking. Pre-approving.

assets/js/base/components/block-error-boundary/types.ts Outdated Show resolved Hide resolved
assets/js/blocks/checkout/block.tsx Show resolved Hide resolved
assets/js/blocks/checkout/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/checkout/block.tsx Outdated Show resolved Hide resolved
@nielslange nielslange merged commit 7d989a5 into trunk Dec 19, 2022
@nielslange nielslange deleted the fix/7823-respect-core-settings-for-showing-checkout branch December 19, 2022 14:19
@ralucaStan ralucaStan added the focus: settings Issues related to managing settings (including wc-settings). label Apr 10, 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. focus: settings Issues related to managing settings (including wc-settings). type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Regression: Checkout still visible, can place orders, even when core settings contradict
4 participants