Add submit confirmation modal.
This commit is contained in:
codevictory
@@ -1,5 +1,4 @@
|
||||
import { Button, Form, Input, Select } from 'antd';
|
||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { Button, Form, Input, Modal, Select } from 'antd';
|
||||
import { useParams } from 'react-router';
|
||||
|
||||
import './RegForm.scss';
|
||||
@@ -40,7 +39,7 @@ const welcomeDrinks = ['alcoholBubbles', 'alcoholFreeBubbles'].map(
|
||||
return (
|
||||
<Option key={welcomeDrink} value={welcomeDrink}>
|
||||
<FormattedMessage
|
||||
id={'registration.form.welcomeDrinks.' + welcomeDrink}
|
||||
id={'registration.form.welcomeDrink.' + welcomeDrink}
|
||||
/>
|
||||
</Option>
|
||||
);
|
||||
@@ -51,156 +50,190 @@ export const RegForm = () => {
|
||||
const { id } = useParams<ParamTypes>();
|
||||
const intl = useIntl();
|
||||
const [visitorCount, setVisitorCount] = useState(0);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
|
||||
const onFinish = (values: FormValues) => {
|
||||
const onSubmit = (values: FormValues) => {
|
||||
values.visitors.map((visitor) => {
|
||||
addVisitor({
|
||||
...visitor,
|
||||
allergies: visitor.allergies ? arrayToString(visitor.allergies) : '',
|
||||
services: visitor.services ? arrayToString(visitor.services) : '',
|
||||
preferences: visitor.preferences ?? '',
|
||||
welcomeDrink: visitor.welcomeDrink ?? '',
|
||||
invitationId: (visitor.invitationId = atob(id)),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onOk = () => {
|
||||
form.submit();
|
||||
|
||||
setIsModalVisible(false);
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
setIsModalVisible(false);
|
||||
};
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
name='registration'
|
||||
onFinish={onFinish}
|
||||
autoComplete='off'
|
||||
>
|
||||
<Form.List name='visitors'>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<div className='visitors'>
|
||||
{fields.map((field) => (
|
||||
<div className='visitor' key={field.key}>
|
||||
<Form.Item
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.name',
|
||||
})}
|
||||
name={[field.name, 'name']}
|
||||
fieldKey={[field.fieldKey, 'name']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage({
|
||||
id: 'registration.form.name.missing',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'registration.form.name.placeholder',
|
||||
})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[field.name, 'allergies']}
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.allergies',
|
||||
})}
|
||||
fieldKey={[field.fieldKey, 'allergies']}
|
||||
>
|
||||
<Select
|
||||
mode='tags'
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'registration.form.allergies.placeholder',
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
name='registration'
|
||||
onFinish={onSubmit}
|
||||
autoComplete='off'
|
||||
>
|
||||
<Form.List name='visitors'>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<div className='visitors'>
|
||||
{fields.map((field) => (
|
||||
<div className='visitor' key={field.key}>
|
||||
<Form.Item
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.name',
|
||||
})}
|
||||
name={[field.name, 'name']}
|
||||
fieldKey={[field.fieldKey, 'name']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage({
|
||||
id: 'registration.form.name.missing',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{allergies}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[field.name, 'preferences']}
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.preferences',
|
||||
})}
|
||||
fieldKey={[field.fieldKey, 'preferences']}
|
||||
>
|
||||
<Select defaultValue='everything'>{preferences}</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[field.name, 'welcomeDrinks']}
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.welcomeDrinks',
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage({
|
||||
id: 'registration.form.welcomeDrinks.missing',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
fieldKey={[field.fieldKey, 'preferences']}
|
||||
>
|
||||
<Select
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'registration.form.welcomeDrinks.placeholder',
|
||||
<Input
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'registration.form.name.placeholder',
|
||||
})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[field.name, 'allergies']}
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.allergies',
|
||||
})}
|
||||
fieldKey={[field.fieldKey, 'allergies']}
|
||||
>
|
||||
{welcomeDrinks}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Button
|
||||
danger
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
setVisitorCount(visitorCount - 1);
|
||||
}}
|
||||
shape='round'
|
||||
size='large'
|
||||
>
|
||||
<FormattedMessage id='registration.form.remove' />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Form.Item>
|
||||
<Button
|
||||
className='addVisitorButton'
|
||||
size='large'
|
||||
onClick={() => {
|
||||
add();
|
||||
setVisitorCount(visitorCount + 1);
|
||||
}}
|
||||
shape='round'
|
||||
>
|
||||
<FormattedMessage id='registration.addVisitor' />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
<Select
|
||||
mode='tags'
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'registration.form.allergies.placeholder',
|
||||
})}
|
||||
>
|
||||
{allergies}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[field.name, 'preferences']}
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.preferences',
|
||||
})}
|
||||
fieldKey={[field.fieldKey, 'preferences']}
|
||||
>
|
||||
<Select defaultValue='everything'>{preferences}</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[field.name, 'welcomeDrink']}
|
||||
label={intl.formatMessage({
|
||||
id: 'registration.form.welcomeDrink',
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage({
|
||||
id: 'registration.form.welcomeDrink.missing',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
fieldKey={[field.fieldKey, 'welcomeDrink']}
|
||||
>
|
||||
<Select
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'registration.form.welcomeDrink.placeholder',
|
||||
})}
|
||||
>
|
||||
{welcomeDrinks}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Button
|
||||
danger
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
setVisitorCount(visitorCount - 1);
|
||||
}}
|
||||
shape='round'
|
||||
size='large'
|
||||
>
|
||||
<FormattedMessage id='registration.form.remove' />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Form.Item>
|
||||
<Button
|
||||
className='addVisitorButton'
|
||||
size='large'
|
||||
onClick={() => {
|
||||
add();
|
||||
setVisitorCount(visitorCount + 1);
|
||||
}}
|
||||
shape='round'
|
||||
>
|
||||
<FormattedMessage id='registration.addVisitor' />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
{visitorCount == 0 ? (
|
||||
<Form.Item>
|
||||
<Button
|
||||
className='submitButton'
|
||||
type='dashed'
|
||||
htmlType='submit'
|
||||
shape='round'
|
||||
>
|
||||
<FormattedMessage id='registration.form.decline' />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item>
|
||||
<Button
|
||||
className='submitButton'
|
||||
onClick={(e) => setIsModalVisible(true)}
|
||||
size='large'
|
||||
shape='round'
|
||||
>
|
||||
<FormattedMessage id='registration.form.submit' />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form.List>
|
||||
{visitorCount == 0 ? (
|
||||
<Form.Item>
|
||||
<Button
|
||||
className='submitButton'
|
||||
type='dashed'
|
||||
htmlType='submit'
|
||||
shape='round'
|
||||
>
|
||||
<FormattedMessage id='registration.form.decline' />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item>
|
||||
<Button
|
||||
className='submitButton'
|
||||
htmlType='submit'
|
||||
size='large'
|
||||
shape='round'
|
||||
>
|
||||
<FormattedMessage id='registration.form.submit' />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</Form>
|
||||
<Modal
|
||||
title={intl.formatMessage(
|
||||
{
|
||||
id: 'registration.form.submitModal.title',
|
||||
},
|
||||
{ visitorCount: visitorCount }
|
||||
)}
|
||||
visible={isModalVisible}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
okText={intl.formatMessage({
|
||||
id: 'registration.form.submitModal.save',
|
||||
})}
|
||||
cancelText={intl.formatMessage({
|
||||
id: 'registration.form.submitModal.back',
|
||||
})}
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage id='registration.form.submitModal.description' />
|
||||
</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user