Add submit confirmation modal.
This commit is contained in:
codevictory
@@ -20,7 +20,7 @@ export const addVisitor = async (visitor: Visitor) => {
|
|||||||
await setDoc(doc(db, "visitors", visitor.name), {
|
await setDoc(doc(db, "visitors", visitor.name), {
|
||||||
invitationId: visitor.invitationId,
|
invitationId: visitor.invitationId,
|
||||||
allergies: visitor.allergies,
|
allergies: visitor.allergies,
|
||||||
services: visitor.services,
|
welcomeDrink: visitor.welcomeDrink,
|
||||||
preferences: visitor.preferences
|
preferences: visitor.preferences
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { Button, Form, Input, Select } from 'antd';
|
import { Button, Form, Input, Modal, Select } from 'antd';
|
||||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
|
||||||
import { useParams } from 'react-router';
|
import { useParams } from 'react-router';
|
||||||
|
|
||||||
import './RegForm.scss';
|
import './RegForm.scss';
|
||||||
@@ -40,7 +39,7 @@ const welcomeDrinks = ['alcoholBubbles', 'alcoholFreeBubbles'].map(
|
|||||||
return (
|
return (
|
||||||
<Option key={welcomeDrink} value={welcomeDrink}>
|
<Option key={welcomeDrink} value={welcomeDrink}>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id={'registration.form.welcomeDrinks.' + welcomeDrink}
|
id={'registration.form.welcomeDrink.' + welcomeDrink}
|
||||||
/>
|
/>
|
||||||
</Option>
|
</Option>
|
||||||
);
|
);
|
||||||
@@ -51,156 +50,190 @@ export const RegForm = () => {
|
|||||||
const { id } = useParams<ParamTypes>();
|
const { id } = useParams<ParamTypes>();
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [visitorCount, setVisitorCount] = useState(0);
|
const [visitorCount, setVisitorCount] = useState(0);
|
||||||
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||||
|
|
||||||
const onFinish = (values: FormValues) => {
|
const onSubmit = (values: FormValues) => {
|
||||||
values.visitors.map((visitor) => {
|
values.visitors.map((visitor) => {
|
||||||
addVisitor({
|
addVisitor({
|
||||||
...visitor,
|
...visitor,
|
||||||
allergies: visitor.allergies ? arrayToString(visitor.allergies) : '',
|
allergies: visitor.allergies ? arrayToString(visitor.allergies) : '',
|
||||||
services: visitor.services ? arrayToString(visitor.services) : '',
|
|
||||||
preferences: visitor.preferences ?? '',
|
preferences: visitor.preferences ?? '',
|
||||||
|
welcomeDrink: visitor.welcomeDrink ?? '',
|
||||||
invitationId: (visitor.invitationId = atob(id)),
|
invitationId: (visitor.invitationId = atob(id)),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onOk = () => {
|
||||||
|
form.submit();
|
||||||
|
|
||||||
|
setIsModalVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
setIsModalVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<>
|
||||||
form={form}
|
<Form
|
||||||
name='registration'
|
form={form}
|
||||||
onFinish={onFinish}
|
name='registration'
|
||||||
autoComplete='off'
|
onFinish={onSubmit}
|
||||||
>
|
autoComplete='off'
|
||||||
<Form.List name='visitors'>
|
>
|
||||||
{(fields, { add, remove }) => (
|
<Form.List name='visitors'>
|
||||||
<>
|
{(fields, { add, remove }) => (
|
||||||
<div className='visitors'>
|
<>
|
||||||
{fields.map((field) => (
|
<div className='visitors'>
|
||||||
<div className='visitor' key={field.key}>
|
{fields.map((field) => (
|
||||||
<Form.Item
|
<div className='visitor' key={field.key}>
|
||||||
label={intl.formatMessage({
|
<Form.Item
|
||||||
id: 'registration.form.name',
|
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',
|
|
||||||
})}
|
})}
|
||||||
|
name={[field.name, 'name']}
|
||||||
|
fieldKey={[field.fieldKey, 'name']}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: intl.formatMessage({
|
||||||
|
id: 'registration.form.name.missing',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
{allergies}
|
<Input
|
||||||
</Select>
|
placeholder={intl.formatMessage({
|
||||||
</Form.Item>
|
id: 'registration.form.name.placeholder',
|
||||||
<Form.Item
|
})}
|
||||||
name={[field.name, 'preferences']}
|
/>
|
||||||
label={intl.formatMessage({
|
</Form.Item>
|
||||||
id: 'registration.form.preferences',
|
<Form.Item
|
||||||
})}
|
name={[field.name, 'allergies']}
|
||||||
fieldKey={[field.fieldKey, 'preferences']}
|
label={intl.formatMessage({
|
||||||
>
|
id: 'registration.form.allergies',
|
||||||
<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',
|
|
||||||
})}
|
})}
|
||||||
|
fieldKey={[field.fieldKey, 'allergies']}
|
||||||
>
|
>
|
||||||
{welcomeDrinks}
|
<Select
|
||||||
</Select>
|
mode='tags'
|
||||||
</Form.Item>
|
placeholder={intl.formatMessage({
|
||||||
<Button
|
id: 'registration.form.allergies.placeholder',
|
||||||
danger
|
})}
|
||||||
onClick={() => {
|
>
|
||||||
remove(field.name);
|
{allergies}
|
||||||
setVisitorCount(visitorCount - 1);
|
</Select>
|
||||||
}}
|
</Form.Item>
|
||||||
shape='round'
|
<Form.Item
|
||||||
size='large'
|
name={[field.name, 'preferences']}
|
||||||
>
|
label={intl.formatMessage({
|
||||||
<FormattedMessage id='registration.form.remove' />
|
id: 'registration.form.preferences',
|
||||||
</Button>
|
})}
|
||||||
</div>
|
fieldKey={[field.fieldKey, 'preferences']}
|
||||||
))}
|
>
|
||||||
</div>
|
<Select defaultValue='everything'>{preferences}</Select>
|
||||||
<Form.Item>
|
</Form.Item>
|
||||||
<Button
|
<Form.Item
|
||||||
className='addVisitorButton'
|
name={[field.name, 'welcomeDrink']}
|
||||||
size='large'
|
label={intl.formatMessage({
|
||||||
onClick={() => {
|
id: 'registration.form.welcomeDrink',
|
||||||
add();
|
})}
|
||||||
setVisitorCount(visitorCount + 1);
|
rules={[
|
||||||
}}
|
{
|
||||||
shape='round'
|
required: true,
|
||||||
>
|
message: intl.formatMessage({
|
||||||
<FormattedMessage id='registration.addVisitor' />
|
id: 'registration.form.welcomeDrink.missing',
|
||||||
</Button>
|
}),
|
||||||
</Form.Item>
|
},
|
||||||
</>
|
]}
|
||||||
|
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>
|
</Form>
|
||||||
{visitorCount == 0 ? (
|
<Modal
|
||||||
<Form.Item>
|
title={intl.formatMessage(
|
||||||
<Button
|
{
|
||||||
className='submitButton'
|
id: 'registration.form.submitModal.title',
|
||||||
type='dashed'
|
},
|
||||||
htmlType='submit'
|
{ visitorCount: visitorCount }
|
||||||
shape='round'
|
)}
|
||||||
>
|
visible={isModalVisible}
|
||||||
<FormattedMessage id='registration.form.decline' />
|
onOk={onOk}
|
||||||
</Button>
|
onCancel={onCancel}
|
||||||
</Form.Item>
|
okText={intl.formatMessage({
|
||||||
) : (
|
id: 'registration.form.submitModal.save',
|
||||||
<Form.Item>
|
})}
|
||||||
<Button
|
cancelText={intl.formatMessage({
|
||||||
className='submitButton'
|
id: 'registration.form.submitModal.back',
|
||||||
htmlType='submit'
|
})}
|
||||||
size='large'
|
>
|
||||||
shape='round'
|
<p>
|
||||||
>
|
<FormattedMessage id='registration.form.submitModal.description' />
|
||||||
<FormattedMessage id='registration.form.submit' />
|
</p>
|
||||||
</Button>
|
</Modal>
|
||||||
</Form.Item>
|
</>
|
||||||
)}
|
|
||||||
</Form>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -28,9 +28,14 @@ export const registration: Record<string, string> = {
|
|||||||
"registration.form.preferences.vegan": "Vegan",
|
"registration.form.preferences.vegan": "Vegan",
|
||||||
"registration.form.preferences.vegetarian": "Vegetarian",
|
"registration.form.preferences.vegetarian": "Vegetarian",
|
||||||
|
|
||||||
"registration.form.welcomeDrinks": "Welcome drink",
|
"registration.form.welcomeDrink": "Welcome drink",
|
||||||
"registration.form.welcomeDrinks.placeholder": "What fancy you?",
|
"registration.form.welcomeDrink.placeholder": "What fancy you?",
|
||||||
"registration.form.welcomeDrinks.missing": "Missing welcome drink",
|
"registration.form.welcomeDrink.missing": "Missing welcome drink",
|
||||||
"registration.form.welcomeDrinks.alcoholBubbles": "Alcohol bubbles",
|
"registration.form.welcomeDrink.alcoholBubbles": "Alcohol bubbles",
|
||||||
"registration.form.welcomeDrinks.alcoholFreeBubbles": "Alcohol-free bubbles"
|
"registration.form.welcomeDrink.alcoholFreeBubbles": "Alcohol-free bubbles",
|
||||||
|
|
||||||
|
"registration.form.submitModal.title": "You want to add {visitorCount} visitors?",
|
||||||
|
"registration.form.submitModal.description": "The link will not work after the submit.",
|
||||||
|
"registration.form.submitModal.save": "Yes, please",
|
||||||
|
"registration.form.submitModal.back": "No, something is missing...",
|
||||||
}
|
}
|
||||||
@@ -28,9 +28,14 @@ export const registration: Record<string, string> = {
|
|||||||
"registration.form.preferences.vegan": "Vegaaninen",
|
"registration.form.preferences.vegan": "Vegaaninen",
|
||||||
"registration.form.preferences.vegetarian": "Kasvis",
|
"registration.form.preferences.vegetarian": "Kasvis",
|
||||||
|
|
||||||
"registration.form.welcomeDrinks": "Tervetuliasmalja",
|
"registration.form.welcomeDrink": "Tervetuliasmalja",
|
||||||
"registration.form.welcomeDrinks.placeholder": "Mitä saisi olla?",
|
"registration.form.welcomeDrink.placeholder": "Mitä saisi olla?",
|
||||||
"registration.form.welcomeDrinks.missing": "Tervetulias malja puuttuu",
|
"registration.form.welcomeDrink.missing": "Tervetulias malja puuttuu",
|
||||||
"registration.form.welcomeDrinks.alcoholBubbles": "Holillista kuplivaa",
|
"registration.form.welcomeDrink.alcoholBubbles": "Holillista kuplivaa",
|
||||||
"registration.form.welcomeDrinks.alcoholFreeBubbles": "Holitonta kuplivaa"
|
"registration.form.welcomeDrink.alcoholFreeBubbles": "Holitonta kuplivaa",
|
||||||
|
|
||||||
|
"registration.form.submitModal.title": "Lisätään siis {visitorCount} vierasta listalle?",
|
||||||
|
"registration.form.submitModal.description": "Tämä linkki lakkaa toimimasta tallennuksen jälkeen.",
|
||||||
|
"registration.form.submitModal.save": "Tallenna",
|
||||||
|
"registration.form.submitModal.back": "Takaisin",
|
||||||
}
|
}
|
||||||
@@ -2,6 +2,6 @@ export type Visitor = {
|
|||||||
name: string;
|
name: string;
|
||||||
invitationId: string;
|
invitationId: string;
|
||||||
allergies: any;
|
allergies: any;
|
||||||
services: any;
|
welcomeDrink: any;
|
||||||
preferences: string;
|
preferences: string;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user