content: import React from 'react'
  import {connect} from 'react-redux'
  import compose from 'recompose/compose'
  
  import * as selector from '../lib/selector'
  import {formatMaterialInfo} from '../lib/formatter'
  
  import CheckoutStepSection from '../component/checkout-step-section'
  import List from '../component/list'
  import ListItem from '../component/list-item'
  import Link from '../component/link'
  
  import * as navigationAction from '../action/navigation'
  
  const CheckoutCartPartial = ({modelsWithConfig, goToCart}) => (
    <CheckoutStepSection
      title="1. Cart"
      type="done"
      action={
        <Link
          label="edit"
          href="/checkout"
          onClick={event => {
            event.preventDefault()
            goToCart()
          }}
        />
      }
    >
      <List size="s" minor>
        {modelsWithConfig.map(({modelConfig, model, materialConfig, finishGroup}) => (
          <ListItem key={modelConfig.id}>
            {modelConfig.quantity} x <strong>{model.fileName}</strong>{' '}
            {formatMaterialInfo(finishGroup, materialConfig, modelConfig.quoteType)}
          </ListItem>
        ))}
      </List>
    </CheckoutStepSection>
  )
  
  const mapStateToProps = state => ({
    modelsWithConfig: selector.selectConfiguredModelInformation(state)
  })
  
  const mapDispatchToProps = {
    goToCart: navigationAction.goToCart
  }
  
  export default compose(
    connect(
      mapStateToProps,
      mapDispatchToProps
    )
  )(CheckoutCartPartial)
  