Exploration - Checkout Block: What components are needed?

[nerrad]

What will be the components needed for the MVP?

Keeping in mind the MVP will not have inner blocks initially, we still need to identify the logical units in the main block. So this exploration should map out the various components and what we already have vs what needs created.

[issue-label-bot]

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

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

[nerrad]

As a part of this exploration, would be good to see what is being done in this package: https://github.com/Automattic/wp-calypso/tree/master/packages/composite-checkout

[Aljullu]

In a similar way as I listed the components I think will be needed for the Cart block (#1207), here it goes the list for the Checkout block. They are also listed with their name and the proposed path.

This exploration doesn't consider if some of these components should rely on other packages as a base (the discussion is ongoing in the Cart block exploration issue).

Express checkout

• ExpressCheckout (/base/components/checkout/express-checkout)
• ExpressCheckoutButton (/base/components/checkout/express-checkout-button)

Form

• CheckoutForm (/base/components/checkout/form)
• CheckoutFormStep (/base/components/checkout/form-step)
  • CheckoutContactInformation (/base/components/checkout/contact-information)
    
  • CheckoutShippingAddress (/base/components/checkout/shipping-address)
    
    • ShippingAddressPlaceholder (/base/components/checkout/shipping-address-placeholder)
      
  • CheckoutBillingAddress (/base/components/checkout/billing-address)
    
  • CheckoutShippingOptions (/base/components/checkout/shipping-options)
    
    • CheckoutOrderNotesCheckbox (/base/components/checkout/order-notes-checkbox)
  • CheckoutPaymentMethod (/base/components/checkout/payment-method)
    
    • PaymentMethodTabs (/base/components/checkout/payment-method-tabs)
    • PaymentMethodTab (/base/components/checkout/payment-method-tab)
    • PaymentMethodPlaceholder (/base/components/checkout/payment-method-placeholder)
      
• BackLink (defined in Exploration - Cart Block: What components will be needed? #1207)
  
• PlaceOrderButton (/base/components/checkout/place-order-button)
  

Form components

• Checkbox (/base/components/checkbox)
• Select (/base/components/select)
• TextInput (/base/components/text-input)
• TextInputTooltip (/base/components/text-input-tooltip)
• PhoneInput (/base/components/phone-input)
• CountryInput (/base/components/country-input)
• CountyInput (/base/components/county-input)
• CreditCardInput (/base/components/credit-card-input)

Other

• Separator (/base/components/separator)
  

Sidebar

• CheckoutSidebar (/base/components/checkout/sidebar)
  • All contents are already defined as Cart Block components.

[nerrad]

Thanks @Aljullu for the excellent work in mapping out this block, I was able to use it to break things down into workable issues 🎉 I'm going to close this issue now that we have things mapped out for working on.