-
Notifications
You must be signed in to change notification settings - Fork 14
/
FundingFormUserInfoSection.tsx
67 lines (62 loc) · 1.97 KB
/
FundingFormUserInfoSection.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { ArrowBackIcon } from '@chakra-ui/icons'
import { Button, HStack, Input, VStack } from '@chakra-ui/react'
import { MouseEventHandler } from 'react'
import { useTranslation } from 'react-i18next'
import { SectionTitle } from '../../../../components/ui'
import { useProjectContext } from '../../../../context'
import { FieldContainer } from '../../../../forms/components/FieldContainer'
import { ProjectFundingFormCommentField } from '../../projectMainBody/components'
type Props = {
onBackClick: MouseEventHandler<HTMLButtonElement>
}
export const FundingFormUserInfoSection = ({ onBackClick }: Props) => {
const { t } = useTranslation()
const {
fundForm: {
setState,
setTarget,
needsShipping,
state: { comment, email },
},
} = useProjectContext()
return (
<VStack alignItems="start" width="100%" spacing={5}>
<HStack>
<Button onClick={onBackClick} variant="transparent">
<ArrowBackIcon />
</Button>
<SectionTitle>{t('Final details')}</SectionTitle>
</HStack>
<FieldContainer title={t('Public comment')}>
<ProjectFundingFormCommentField
comment={comment}
setTarget={setTarget}
setFormState={setState}
width="full"
/>
</FieldContainer>
{needsShipping ? (
<>
<FieldContainer
title="Your email"
subtitle="The seller may want to reach out."
>
<Input
type="email"
name="email"
placeholder="funderemail@gmail.com"
value={email}
onChange={setTarget}
/>
</FieldContainer>
<FieldContainer
title={t('Shipping')}
subtitle={t(
"To receive the selected items, you will need to send your shipping details to the creator's email. Which will be revealed in the success screen.",
)}
/>
</>
) : null}
</VStack>
)
}