src/components/Section/Foreign/Activities/DirectActivity/DirectInterest.jsx
import React from 'react'
import { i18n } from '../../../../../config'
import {
ValidationElement,
Currency,
Field,
Text,
DateControl,
Textarea,
NotApplicable,
Checkbox,
CheckboxGroup,
Show,
} from '../../../../Form'
import CoOwners from '../CoOwners'
export default class DirectInterest extends ValidationElement {
update = (queue) => {
this.props.onUpdate({
InterestTypes: this.props.InterestTypes,
InterestType: this.props.InterestType,
Acquired: this.props.Acquired,
HowAcquired: this.props.HowAcquired,
Cost: this.props.Cost,
CostEstimated: this.props.CostEstimated,
Value: this.props.Value,
ValueEstimated: this.props.ValueEstimated,
Relinquished: this.props.Relinquished,
RelinquishedNotApplicable: this.props.RelinquishedNotApplicable,
Explanation: this.props.Explanation,
CoOwners: this.props.CoOwners,
...queue,
})
}
updateInterestTypes = (values) => {
const interestType = values.value
const selected = [...((this.props.InterestTypes || {}).values || [])]
if (selected.includes(interestType)) {
selected.splice(selected.indexOf(interestType), 1)
} else {
selected.push(interestType)
}
this.update({
InterestTypes: { values: selected },
})
}
updateInterestType = (values) => {
this.update({
InterestType: values,
})
}
updateAcquired = (values) => {
this.update({
Acquired: values,
})
}
updateHowAcquired = (values) => {
this.update({
HowAcquired: values,
})
}
updateCost = (values) => {
this.update({
Cost: values,
})
}
updateCostEstimated = (values) => {
this.update({
CostEstimated: values,
})
}
updateValue = (values) => {
this.update({
Value: values,
})
}
updateValueEstimated = (values) => {
this.update({
ValueEstimated: values,
})
}
updateRelinquished = (values) => {
this.update({
Relinquished: values,
})
}
updateRelinquishedNotApplicable = (values) => {
this.update({
RelinquishedNotApplicable: values,
Relinquished: values.applicable ? this.props.Relinquished : {},
Explanation: values.applicable ? this.props.Explanation : {},
})
}
updateExplanation = (values) => {
this.update({
Explanation: values,
})
}
updateCoOwners = (values) => {
this.update({
CoOwners: values,
})
}
render() {
const { prefix } = this.props
return (
<div className="interest">
<Field
title={i18n.t(
'foreign.activities.direct.interest.heading.interestTypes'
)}
adjustFor="p"
scrollIntoView={this.props.scrollIntoView}
>
<p>{i18n.t('foreign.activities.direct.interest.para.checkAll')}</p>
<CheckboxGroup
className="interest-types option-list option-list-vertical"
onError={this.props.onError}
required={this.props.required}
selectedValues={(this.props.InterestTypes || {}).values}
>
<Checkbox
name="interest-type"
label={i18n.m(
'foreign.activities.direct.interest.label.interestTypes.yourself'
)}
value="Yourself"
className="yourself"
onError={this.props.onError}
onUpdate={this.updateInterestTypes}
/>
<Checkbox
name="interest-type"
label={i18n.m(
'foreign.activities.direct.interest.label.interestTypes.spouse'
)}
value="Spouse"
className="spouse"
onError={this.props.onError}
onUpdate={this.updateInterestTypes}
/>
<Checkbox
name="interest-type"
label={i18n.m(
'foreign.activities.direct.interest.label.interestTypes.cohabitant'
)}
value="Cohabitant"
className="cohabitant"
onError={this.props.onError}
onUpdate={this.updateInterestTypes}
/>
<Checkbox
name="interest-type"
label={i18n.m(
'foreign.activities.direct.interest.label.interestTypes.dependentChildren'
)}
value="DependentChildren"
className="dependent-children"
onError={this.props.onError}
onUpdate={this.updateInterestTypes}
/>
</CheckboxGroup>
</Field>
<Field
title={i18n.t(
'foreign.activities.direct.interest.heading.interestType'
)}
scrollIntoView={this.props.scrollIntoView}
>
<Text
name="InterestType"
className="interest-type"
{...this.props.InterestType}
onUpdate={this.updateInterestType}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t('foreign.activities.direct.interest.heading.acquired')}
adjustFor="labels"
scrollIntoView={this.props.scrollIntoView}
>
<DateControl
name="Acquired"
className="acquired"
minDateEqualTo
{...this.props.Acquired}
onUpdate={this.updateAcquired}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t(
'foreign.activities.direct.interest.heading.howAcquired'
)}
adjustFor="p"
scrollIntoView={this.props.scrollIntoView}
>
{i18n.t('foreign.activities.direct.interest.para.howAcquired')}
<Textarea
name="HowAcquired"
className="how-acquired"
{...this.props.HowAcquired}
onUpdate={this.updateHowAcquired}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
<Field
title={i18n.t('foreign.activities.direct.interest.heading.cost')}
scrollIntoView={this.props.scrollIntoView}
>
<Currency
name="Cost"
className="cost"
{...this.props.Cost}
onUpdate={this.updateCost}
min="0"
onError={this.props.onError}
required={this.props.required}
/>
<div className="flags">
<Checkbox
name="CostEstimated"
label={i18n.t(
'foreign.activities.direct.interest.label.costEstimated'
)}
toggle="false"
{...this.props.CostEstimated}
onUpdate={this.updateCostEstimated}
onError={this.props.onError}
/>
</div>
</Field>
<Field
title={i18n.t('foreign.activities.direct.interest.heading.value')}
scrollIntoView={this.props.scrollIntoView}
>
<Currency
name="Value"
className="value"
{...this.props.Value}
onUpdate={this.updateValue}
min="0"
onError={this.props.onError}
required={this.props.required}
/>
<div className="flags">
<Checkbox
name="ValueEstimated"
label={i18n.t(
'foreign.activities.direct.interest.label.valueEstimated'
)}
toggle="false"
{...this.props.ValueEstimated}
onUpdate={this.updateValueEstimated}
onError={this.props.onError}
/>
</div>
</Field>
<Field
title={i18n.t(
'foreign.activities.direct.interest.heading.relinquished'
)}
help="foreign.activities.direct.interest.help.relinquished"
adjustFor="labels"
scrollIntoView={this.props.scrollIntoView}
>
<NotApplicable
name="RelinquishedNotApplicable"
{...this.props.RelinquishedNotApplicable}
label={i18n.t(
'foreign.activities.direct.interest.label.relinquishedNotApplicable'
)}
or={i18n.m('foreign.activities.direct.interest.label.or')}
onError={this.props.onError}
required={this.props.required}
onUpdate={this.updateRelinquishedNotApplicable}
>
<DateControl
name="Relinquished"
minDate={this.props.Acquired}
minDateEqualTo
className="relinquished"
{...this.props.Relinquished}
onUpdate={this.updateRelinquished}
prefix="directControl"
onError={this.props.onError}
required={this.props.required}
/>
</NotApplicable>
</Field>
<Show when={(this.props.RelinquishedNotApplicable || {}).applicable}>
<Field
title={i18n.t(
'foreign.activities.direct.interest.heading.explanation'
)}
scrollIntoView={this.props.scrollIntoView}
>
<Textarea
name="Explanation"
className="explanation"
{...this.props.Explanation}
onUpdate={this.updateExplanation}
onError={this.props.onError}
required={this.props.required}
/>
</Field>
</Show>
<CoOwners
prefix={prefix}
{...this.props.CoOwners}
addressBooks={this.props.addressBooks}
dispatch={this.props.dispatch}
onUpdate={this.updateCoOwners}
onError={this.props.onError}
required={this.props.required}
scrollIntoView={this.props.scrollIntoView}
/>
</div>
)
}
}
DirectInterest.defaultProps = {
prefix: 'activities.direct.interest',
addressBooks: {},
RelinquishedNotApplicable: { applicable: true },
dispatch: () => {},
onUpdate: () => {},
onError: (value, arr) => arr,
}