Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Groups and relationships: moneylost page #1500

Merged
merged 3 commits into from
Feb 21, 2020
Merged

Groups and relationships: moneylost page #1500

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e58d7b1
revamped moneylost page
amazingphilippe Feb 20, 2020
23e923a
Merge branch 'master' of github.com:cds-snc/report-a-cybercrime into …
amazingphilippe Feb 20, 2020
b80f348
Merge branch 'master' into a11y-money-pagegroupsandrelationships
amazingphilippe Feb 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 37 additions & 83 deletions f2/src/forms/MoneyLostInfoForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
import { jsx } from '@emotion/core'
import { useLingui } from '@lingui/react'
import { Trans } from '@lingui/macro'
import { Form, Field, useField } from 'react-final-form'
import { Form } from 'react-final-form'
import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
import { TextInput } from '../components/TextInput'
import { FormControl, Stack, Box, Alert, AlertIcon } from '@chakra-ui/core'
Expand All @@ -15,13 +15,8 @@ import { useStateValue } from '../utils/state'
import { ConditionalForm } from '../components/container'
import { P } from '../components/paragraph'
import { CheckboxAdapter } from '../components/checkbox'

const Control = ({ name, ...rest }) => {
const {
meta: { error, touched },
} = useField(name, { subscription: { touched: true, error: true } })
return <FormControl {...rest} isInvalid={error && touched} />
}
import { Field } from '../components/Field'
import { FormArrayControl } from '../components/FormArrayControl'

export const MoneyLostInfoForm = props => {
const { i18n } = useLingui()
Expand Down Expand Up @@ -66,82 +61,41 @@ export const MoneyLostInfoForm = props => {
spacing={6}
shouldWrapChildren
>
<Field name="demandedMoney">
{props => (
<FormControl>
<FormLabel htmlFor="demandedMoney">
<Trans id="moneyLostPage.demandedMoney" />
</FormLabel>
<FormHelperText>
<Trans id="moneyLostPage.demandedMoneyExample" />
</FormHelperText>
<TextInput
id="demandedMoney"
name={props.input.name}
value={props.input.value}
onChange={props.input.onChange}
/>
</FormControl>
)}
</Field>
<Field name="moneyTaken">
{props => (
<FormControl>
<FormLabel htmlFor="moneyTaken">
<Trans id="moneyLostPage.moneyTaken" />
</FormLabel>
<FormHelperText>
<Trans id="moneyLostPage.moneyTakenExample" />
</FormHelperText>
<TextInput
id="moneyTaken"
name={props.input.name}
value={props.input.value}
onChange={props.input.onChange}
/>
</FormControl>
)}
</Field>
<Field
name="demandedMoney"
label={<Trans id="moneyLostPage.demandedMoney" />}
helperText={<Trans id="moneyLostPage.demandedMoneyExample" />}
component={TextInput}
/>

<Field
name="moneyTaken"
label={<Trans id="moneyLostPage.moneyTaken" />}
helperText={<Trans id="moneyLostPage.moneyTakenExample" />}
component={TextInput}
/>

<Control as="fieldset" name="methodsOfPayment">
<FormLabel as="legend" htmlFor="methodsOfPayment" mb={2}>
<Trans id="moneyLostPage.methodPayment" />
</FormLabel>
<FormHelperText>
<Trans id="moneyLostPage.selectMethod" />
</FormHelperText>
<Stack spacing={4} shouldWrapChildren>
{methodsOfPayment.map(key => {
return (
<Box key={key}>
<CheckboxAdapter name="methodPayment" value={key}>
{i18n._(key)}
</CheckboxAdapter>
{key === 'methodPayment.other' &&
values.methodPayment.includes(
'methodPayment.other',
) && (
<ConditionalForm>
<Field name="methodOther">
{props => (
<FormControl>
<FormLabel htmlFor={key}></FormLabel>
<TextInput
id="methodOther"
name={props.input.name}
value={props.input.value}
onChange={props.input.onChange}
/>
</FormControl>
)}
</Field>
</ConditionalForm>
)}
</Box>
)
})}
</Stack>
</Control>
<FormArrayControl
name="methodsOfPayment"
label={<Trans id="moneyLostPage.methodPayment" />}
helperText={<Trans id="moneyLostPage.selectMethod" />}
>
{methodsOfPayment.map(key => {
return (
<Box key={key}>
<CheckboxAdapter name="methodPayment" value={key}>
{i18n._(key)}
</CheckboxAdapter>
{key === 'methodPayment.other' &&
values.methodPayment.includes('methodPayment.other') && (
<ConditionalForm>
<Field name="methodOther" component={TextInput} />
</ConditionalForm>
)}
</Box>
)
})}
</FormArrayControl>

<Stack>
<P fontWeight="bold">
Expand Down