Checkout block

[pmcpinto]

User Story

As a merchant I want a block that allows adding an optimized checkout layout So I can improve my checkout conversion rate and quickly change some of the cart settings

Acceptance Criteria

Restrictions

• [x] The block is only available in the Checkout page (see #1305) It was decided we'd allow the block to be used alongside core checkout on a different page.

Tooltip

• [ ] When the user selects the block in the block picker he should see a notification drawing his attention to the block settings (see #1469)

Payments

• [x] The first version of the checkout block is only going to support Paypal and Stripe (#1471, #1473)
• [x] The checkout displays an express checkout section If the store has a payment gateway connected with express checkout (#1349)
  • [x] If the store doesn't have a payment gateway installed, the user should see a message in the Payment options layout pushing the user to install and activate a payment method (#1478)

Displaying products

• [x] The checkout layout it's displayed with an existing product (#1479) (first iteration will be sample product only which is implemented) Decision was made to use sample data.
  • [x] If the user doesn't have a product in the store he should see the checkout layout with a sample product (#1479)

Shipping

• [x] If the store doesn't have any shipping option configured, the user should see a message in the Shipping Options layout pushing the user to configure the shipping options (#1351)
• [x] The user can enable/disable using the shipping address as the billing address. Using the shipping address as the billing address is enabled by default (currently we don't provide this option on WooCommerce Settings > Shipping > Shipping options) (#1485)
• [x] If the user disables it – we add a new section to the form for a custom billing address – which inherits the same fields (with settings) as the Shipping address above it (#1485)

Address 2 form (see #1480 for all the below items)

• [x] The user can show/hide the Address 2 input field
• [x] The Address 2 input field should be on by default
  • [x] The user can choose to make Address 2 a required field by selecting the checkbox (this removes the optional text on the label). The required field option should be off by default Decision made to make this optional and based on locale rather than user setting.

Company name (see #1481 for all the below items)

• [x] The user can show/hide the Company Name input field
• [x] The Company Name input field should be off by default
• [x] The user can choose to make Company Name a required field by selecting the checkbox (this removes the optional text on the label). The required field option should be off by default

Phone number (see #1482 for all the below items)

• [x] The user can show/hide the Phone Number input field
• [x] The Phone Number input field should be off by default
• [x] The user can choose to make Phone Number a required field by selecting the checkbox (this removes the optional text on the label). The required field option should be off by default

Order notes (it can be backlogged if we don't have enough time in this cycle) (see #1483 for the below items. I've (@nerrad) also backlogged this)

• [ ] The user can enable/disable having order notes in the checkout. Having an order notes field is enabled by default.
• [ ] Order notes are always optional and if enabled the user only sees a checkbox in the block layout. When the order notes are disabled the checkbox is removed from the block layout.

Coupons (See #1411 - components will be re-used for checkout)

• [x] If the user has the coupons' usage disabled on WC Settings we hide it in the checkout layout (both on the block editor and in the front-end)

Legal (see #1484 for below items)

• [x] When the user has set a Terms & Condition page in the Customizer or in the WC Settings, he should see the T&C link below the Place Order button
• [x] When the user has set a Privacy Policy page in the Customizer he should see the PP link below the Place Order button

Feedback

• [x] The user can give feedback about the block by clicking in the "Give feedback" section. Destination tbd (done in #1356)

Front-end behavior

• [x] The order summary should be automatically updated when the shopper changes the shipping option (#1486)
• [x] The order summary should be automatically updated when the shopper adds a valid coupon (#1486)
• [x] The shipping options and order summary should be automatically updated when the shopper changes his shipping address (#1486)
• [x] A shopper can select to use the shipping address as the billing address by selecting the checkbox (if the user has preferred to give their customer the option to add a custom billing address by default) (#1485)
• [x] The shopper can switch between two payment gateways by clicking in the tabs with the logos (only happens when the store has Stripe and Paypal) (#1349)

Links

MT Final mockups desktop Final mockups mobile Validation Error Indicators for fields: figma

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label type: feature request to this issue, with a confidence of 0.94. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[pmcpinto]

@nerrad the acceptance criteria was difficult to digest, so I broke it down in different sections. I'm going to do the same for the Cart epic.

[nerrad]

You'll note that as of this post there are a number of items not checked off. This is because the user stories required a lot of supporting work as a part of completing them. I've gone through and linked to issues that will:

• Ensure the user story is completed (there may be pulls in progress or done that have been completed, if that's the case the issue will be closed)
• Can be used to track what is left to do (and includes the estimate in our release chart planning).
• Can be used to identify what we might want to tweak/modify for the initial iteration if we need to reduce scope to meet our cycle targets.

[nerrad]

The release of 2.6.0 fulfills the purpose of this epic (initial MVP of checkout block).