class ProductItem extends React.Component { static defaultProps = { renderImage: renderName: renderDescription: renderActionButtons: renderPrice: renderQuantity: renderRatings:

// Expandable
renderCancelFormAndReturnForm: 

} }

class ProductList extends React.Component { }

class OrderItem extends React.Component { static defaultProps = { // === order onlly === // status like delivered, and the date delivered, etc renderStatus:

// this is the list of product images at the top of the order
// or when it's just 1 product, the preview product
renderPreviewItem: <Placeholder breedType="media" width={'50%'} />

renderPaymentSummary: <Placeholder breedType="paragraph" />

// order has some buttons
// shown on hover
renderActionButtons: ActionButtons
// Expandable - can return an order or an item in that order
renderCancelFormAndReturnForm: 

// === passed to product ===

// passed to product as renderActionButtons
// or we can name renderItemActionButtons in ProductItem
renderItemActionButtons: 
renderItemCancelFormAndReturnForm: 

// item + list
renderProductItem: ProductItem
renderProductList: Array<ProductItem>

} }

class OrderList extends React.Component { static defaultProps = { renderList: Array renderOrderItem: OrderItem

// pass these down to each order so we can simply render an order list 
// and pass all render props
// ^ that part is optional though if we just want to KISS
...Order.defaultProps,

} }