Add submit confirmation modal.

src/api.ts

@@ -20,7 +20,7 @@ export const addVisitor = async (visitor: Visitor) => {
   await setDoc(doc(db, "visitors", visitor.name), {
     invitationId: visitor.invitationId,
     allergies: visitor.allergies,
-    services: visitor.services,
+    welcomeDrink: visitor.welcomeDrink,
     preferences: visitor.preferences
   });
 

src/components/RegForm.tsx

@@ -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 './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,26 +50,38 @@ 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}
+        onFinish={onSubmit}
         autoComplete='off'
       >
         <Form.List name='visitors'>
@@ -126,23 +137,23 @@ export const RegForm = () => {
                       <Select defaultValue='everything'>{preferences}</Select>
                     </Form.Item>
                     <Form.Item
-                    name={[field.name, 'welcomeDrinks']}
+                      name={[field.name, 'welcomeDrink']}
                       label={intl.formatMessage({
-                      id: 'registration.form.welcomeDrinks',
+                        id: 'registration.form.welcomeDrink',
                       })}
                       rules={[
                         {
                           required: true,
                           message: intl.formatMessage({
-                          id: 'registration.form.welcomeDrinks.missing',
+                            id: 'registration.form.welcomeDrink.missing',
                           }),
                         },
                       ]}
-                    fieldKey={[field.fieldKey, 'preferences']}
+                      fieldKey={[field.fieldKey, 'welcomeDrink']}
                     >
                       <Select
                         placeholder={intl.formatMessage({
-                        id: 'registration.form.welcomeDrinks.placeholder',
+                          id: 'registration.form.welcomeDrink.placeholder',
                         })}
                       >
                         {welcomeDrinks}
@@ -193,7 +204,7 @@ export const RegForm = () => {
           <Form.Item>
             <Button
               className='submitButton'
-            htmlType='submit'
+              onClick={(e) => setIsModalVisible(true)}
               size='large'
               shape='round'
             >
@@ -202,5 +213,27 @@ export const RegForm = () => {
           </Form.Item>
         )}
       </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>
+    </>
   );
 };

src/constants/localization/registration/en.ts

@@ -28,9 +28,14 @@ export const registration: Record<string, string> = {
     "registration.form.preferences.vegan": "Vegan",
     "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...",
 }

src/constants/localization/registration/fi.ts

@@ -28,9 +28,14 @@ export const registration: Record<string, string> = {
     "registration.form.preferences.vegan": "Vegaaninen",
     "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",
 }

src/model/visitor.ts

@@ -2,6 +2,6 @@ export type Visitor = {
     name: string;
     invitationId: string;
     allergies: any;
-    services: any;
+    welcomeDrink: any;
     preferences: string;
 }