src/components/Section/Citizenship/Multiple/PassportItem.jsx
import React from 'react'
import i18n from 'util/i18n'
import {
ValidationElement,
Field,
Branch,
Show,
Country,
DateControl,
Location,
Name,
Text,
Accordion,
} from 'components/Form'
import { Summary, DateSummary } from 'components/Summary'
import TravelItem from './TravelItem'
export default class PassportItem extends ValidationElement {
constructor(props) {
super(props)
this.update = this.update.bind(this)
this.updateCountry = this.updateCountry.bind(this)
this.updateIssued = this.updateIssued.bind(this)
this.updateLocation = this.updateLocation.bind(this)
this.updateName = this.updateName.bind(this)
this.updateNumber = this.updateNumber.bind(this)
this.updateExpiration = this.updateExpiration.bind(this)
this.updateUsed = this.updateUsed.bind(this)
this.updateCountries = this.updateCountries.bind(this)
}
update(queue) {
this.props.onUpdate({
Country: this.props.Country,
Issued: this.props.Issued,
Location: this.props.Location,
Name: this.props.Name,
Number: this.props.Number,
Expiration: this.props.Expiration,
Used: this.props.Used,
Countries: this.props.Countries,
...queue,
})
}
updateCountry(values) {
this.update({
Country: values,
})
}
updateIssued(values) {
this.update({
Issued: values,
})
}
updateLocation(values) {
this.update({
Location: values,
})
}
updateName(values) {
this.update({
Name: values,
})
}
updateNumber(values) {
this.update({
Number: values,
})
}
updateExpiration(values) {
this.update({
Expiration: values,
})
}
updateUsed(values) {
this.update({
Used: values,
})
}
updateCountries(values) {
this.update({
Countries: values,
})
}
summary = (item, index) => {
const itemProperties = (item || {}).Item || {}
const dates = DateSummary(itemProperties.Dates)
const country = itemProperties.Country && itemProperties.Country.value
? itemProperties.Country.value
: ''
return Summary({
type: i18n.t('citizenship.multiple.collection.travel.summary.item'),
index,
left: country,
right: dates,
placeholder: i18n.t(
'citizenship.multiple.collection.travel.summary.unknown'
),
})
}
render() {
const { errors } = this.props
const accordionErrors = errors && errors.filter(e => e.indexOf('Countries.accordion') === 0)
return (
<div className="passport-item">
<Field
title={i18n.t('citizenship.multiple.heading.passport.country')}
scrollIntoView={this.props.scrollIntoView}
>
<Country
name="Country"
className="passport-country"
{...this.props.Country}
onUpdate={this.updateCountry}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t('citizenship.multiple.heading.passport.issued')}
adjustFor="labels"
shrink={true}
scrollIntoView={this.props.scrollIntoView}
>
<DateControl
name="Issued"
{...this.props.Issued}
className="passport-issued"
minDateEqualTo={true}
onUpdate={this.updateIssued}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t('citizenship.multiple.heading.passport.location')}
adjustFor="labels"
scrollIntoView={this.props.scrollIntoView}
>
<Location
name="Location"
{...this.props.Location}
layout={Location.CITY_COUNTRY}
className="passport-location"
onUpdate={this.updateLocation}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t('citizenship.multiple.heading.passport.name')}
optional={true}
filterErrors={Name.requiredErrorsOnly}
scrollIntoView={this.props.scrollIntoView}
>
<Name
name="Name"
{...this.props.Name}
className="passport-name"
onUpdate={this.updateName}
onError={this.props.onError}
required={this.props.required}
scrollIntoView={this.props.scrollIntoView}
/>
</Field>
<Field
title={i18n.t('citizenship.multiple.heading.passport.number')}
scrollIntoView={this.props.scrollIntoView}
>
<Text
name="Number"
{...this.props.Number}
className="passport-number"
onUpdate={this.updateNumber}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t('citizenship.multiple.heading.passport.expiration')}
adjustFor="labels"
shrink={true}
scrollIntoView={this.props.scrollIntoView}
>
<DateControl
name="Expiration"
{...this.props.Expiration}
prefix="passport.expiration"
className="passport-expiration"
onUpdate={this.updateExpiration}
onError={this.props.onError}
minDate={this.props.Issued}
minDateEqualTo={true}
noMaxDate={true}
required={this.props.required}
/>
</Field>
<Branch
name="Used"
label={i18n.t('citizenship.multiple.heading.passport.used')}
labelSize="h4"
className="passport-used"
{...this.props.Used}
onUpdate={this.updateUsed}
onError={this.props.onError}
required={this.props.required}
scrollIntoView={this.props.scrollIntoView}
/>
<Show when={this.props.Used.value === 'Yes'}>
<Accordion
{...this.props.Countries}
className="foreign-countries"
defaultState={this.props.defaultState}
onUpdate={this.updateCountries}
onError={this.props.onError}
summary={this.summary}
description={i18n.t(
'citizenship.multiple.collection.travel.summary.title'
)}
required={this.props.required}
errors={accordionErrors}
scrollIntoView={this.props.scrollIntoView}
appendLabel={i18n.t(
'citizenship.multiple.collection.travel.append'
)}
>
<TravelItem
name="Item"
bind={true}
required={this.props.required}
scrollIntoView={this.props.scrollIntoView}
/>
</Accordion>
</Show>
</div>
)
}
}
PassportItem.defaultProps = {
Country: {},
Issued: {},
Location: {},
Name: {},
Number: {},
Expiration: {},
Used: {},
Countries: {},
onUpdate: () => {},
onError: (value, arr) => arr,
defaultState: true,
}