sgpl/components/statement.js

import { h } from 'preact'
import Row from './row'
import formatMoney from '../helpers/format-money'
const borderClasses = 'mb3 ph2 pv2 br2 ba b--black-10'

const rightRow = (title, content) =>
  h(Row, {
    title,
    align: 'right',
    width: 5
  }, content)

const longDate = date =>
  `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`

const getProjectName = proj => {
  let name = proj.name
  if (proj.internalLabel) {
    name += ` (${proj.internalLabel})`
  }
  return name
}

export default props => {
  const {
    name,
    year,
    month,
    address1,
    address2,
    totalDonations,
    totalFees,
    projects,
    donors
  } = props.data

  const monthYearString = (new Date(year, month - 1)).toLocaleDateString('en-US', {year: 'numeric', month: 'long'})

  return (
    h('div', null,
      rightRow('Statement month:', monthYearString),
      rightRow('Statement for:', name),
      rightRow('', address1),
      rightRow('', address2),
      h('h3', null, 'Summary:'),
      h('div', {className: borderClasses},
        rightRow('Total collected:', formatMoney(totalDonations)),
        rightRow('Total fees:', formatMoney(totalFees)),
        rightRow('Net collected', formatMoney(totalDonations - totalFees))
      ),
      h('h3', null, 'Donation totals by project:'),
      h('div', {className: borderClasses},
        projects.map(proj => h(Row, {
          title: getProjectName(proj),
          align: 'right',
          width: 5
        }, formatMoney(proj.total)))
      ),
      h('h3', null, 'Donations by donor:'),
      h('div', null,
        donors.map(donor => h('div', {className: 'mt3 pt2 br2 ba b--black-10'},
          h('div', {className: 'ph2'},
            h(Row, {
              title: 'Name:',
              width: 3
            },
              h('span', {className: 'pl3'}, donor.name || '(not supplied)')
            ),
            h(Row, {
              title: 'Email:',
              width: 3
            },
              h('span', {className: 'pl3'}, donor.email)
            )
          ),
          h('ul', {className: 'list pa0 mb0 mt2'},
            donor.lineItems.map(item => {
              const date = new Date(item.date)
              const isRefund = item.type === 'refundedCharge'
              const chargeId = `****${item.chargeId.slice(-8)}`
              const projectName = getProjectName(item.project)
              const fee = formatMoney(item.fee)
              const chargeDate = item.chargeDate ? new Date(item.chargeDate) : null
              return (
                h('li', null,
                  isRefund && h('div', {className: 'pt2 pb1 mh2 bt b--black-10 f6'},
                    h('div', {className: 'fw6 f6 red'}, `Refund of charge id: ${chargeId}`),
                    h('div', {className: 'pb2'}, 'The entire donation and all fees have been reversed'),
                    rightRow('Donation amount returned:', formatMoney(item.amount)),
                    rightRow('Fee credited back:', fee),
                    rightRow('Project name:', projectName),
                    rightRow('Original charge date:', longDate(chargeDate)),
                    rightRow('Refund date:', longDate(date))
                  ),
                  !isRefund && h('div', {className: 'pv2 mh2 bt b--black-10 f6'},
                    h('div', {className: 'flex items-center justify-start'},
                      h('div', {className: 'w4 fg0 fs0'},
                        h('div', null, formatMoney(item.amount)),
                        h('div', {className: 'red'}, fee)
                      ),
                      h('div', {className: 'pl2 pr2 fg2'},
                        h('div', null, projectName),
                        item.refunded && h('div', null, '(related refund below)')
                      ),
                      h('div', {className: 'tr fg1'},
                        h('div', null, longDate(date)),
                        h('div', {className: 'tr mt1 black-60'}, `id: ${chargeId}`)
                      )
                    )
                  )
                )
              )
            })
          )
        ))
      )
    )
  )
}