import * as React from 'react' ; import { connect } from 'react-redux' ; import { RootState , MaybeAccount } from '../../types' ; import { Card , Stack , DisplayText , TextStyle , Caption } from '@shopify/polaris' ; import { pendingEarningsSelector , todaysProjectedEarnings , approvedButNotPaidEarnings } from '../../selectors/hitDatabase' ; import { formatAsUsd } from '../../utils/formatting' ; import DailyEarningsProgressBar from './DailyEarningsProgressBar' ; import { generateTransferEarningsUrl } from '../../utils/urls' ; import EditDailyGoalButton from '../Buttons/EditDailyGoalButton' ; interface Props { readonly accountInfo : MaybeAccount ; readonly pendingEarnings : number ; readonly todaysEarnings : number ; readonly earningsApprovedButNotPaid : number ; } interface FieldProps { readonly caption : React . ReactNode ; } class EarningsSummary extends React . PureComponent < Props , never > { private static Field : React . SFC < FieldProps > = ( { children , caption } ) => { return ( < Stack vertical = { false } alignment = "baseline" spacing = "tight" > < DisplayText size = "medium" > { children } < /DisplayText> < Caption > { caption } < /Caption> < /Stack>); } ; private generateApprovalCaption = ( earningsApprovedButNotPaid ) => earningsApprovedButNotPaid > 0 ? ( < > Pending . { ' ' } < TextStyle variation = { 'positive' } > { formatAsUsd ( earningsApprovedButNotPaid ) } < /TextStyle>{' '} already approved < />) : (<>Pending.</ > ) ; public render ( ) { const { accountInfo , pendingEarnings , todaysEarnings , earningsApprovedButNotPaid } = this . props ; return ( accountInfo && ( < Card title = "Earnings Summary" actions = { [ { content : 'Transfer earnings' , url : generateTransferEarningsUrl ( ) , external : true } ] } > < Card . Section > < EarningsSummary . Field caption = "Available for transfer" > < TextStyle variation = "positive" > { formatAsUsd ( accountInfo . availableEarnings ) } < /TextStyle> < /EarningsSummary.Field> < /Card.Section> < Card . Section > < EarningsSummary . Field caption = { this . generateApprovalCaption ( earningsApprovedButNotPaid ) } > { formatAsUsd ( pendingEarnings ) } < /EarningsSummary.Field> < /Card.Section> < Card . Section > < Stack vertical > < EarningsSummary . Field caption = "Projected for today" > { formatAsUsd ( todaysEarnings ) } < /EarningsSummary.Field> < DailyEarningsProgressBar / > < EditDailyGoalButton /> < /Stack> < /Card.Section> < /Card>)); } } const mapState = ( state ) : Props => ( { accountInfo : state . account , pendingEarnings : pendingEarningsSelector ( state ) , todaysEarnings : todaysProjectedEarnings ( state ) , earningsApprovedButNotPaid : approvedButNotPaidEarnings ( state ) } ) ; export default connect ( mapState ) ( EarningsSummary ) ;