Invitation declining modal and functionality.

src/api.ts

@@ -27,6 +27,14 @@ export const addVisitor = async (visitor: Visitor): Promise<string> => {
   } catch(error: any) {
     return error.code;
   }
-  await setDoc(doc(db, "submitted", visitor.invitationId), {});
+  return 'success';
+}
+
+export const submitInvitation = async (invitationId: string): Promise<string> => {
+  try {
+    await setDoc(doc(db, "submitted", invitationId), {});
+  } catch(error: any) {
+    return error.code;
+  }
   return 'success';
 }

src/components/RegForm.tsx

@@ -2,7 +2,7 @@ import { Button, Form, Input, Modal, notification, Select } from 'antd';
 import { useParams } from 'react-router';
 
 import './RegForm.scss';
-import { addVisitor } from '../api';
+import { addVisitor, submitInvitation } from '../api';
 import { arrayToString } from './utils';
 import { Visitor } from '../model/visitor';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -51,32 +51,53 @@ const RegForm = ({ history }: any) => {
   const { id } = useParams<ParamTypes>();
   const intl = useIntl();
   const [visitorCount, setVisitorCount] = useState(0);
-  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isSubmitModalVisible, setIsSubmitModalVisible] = useState(false);
+  const [isDeclineModalVisible, setIsDeclineModalVisible] = useState(false);
+  const [isDeclined, setIsDeclined] = useState(false);
+
+  var decodedInvitationId = atob(id);
 
   const onSubmit = (values: FormValues) => {
+    let responseCode: string = '';
+    values.visitors = values.visitors ?? [];
+
     values.visitors.map((visitor) => {
       addVisitor({
         ...visitor,
         allergies: visitor.allergies ? arrayToString(visitor.allergies) : '',
         preferences: visitor.preferences ?? '',
         welcomeDrink: visitor.welcomeDrink ?? '',
-        invitationId: (visitor.invitationId = atob(id)),
+        invitationId: (visitor.invitationId = decodedInvitationId),
-      }).then((res) =>
+      }).then((res) => (responseCode = res));
-        res === 'permission-denied'
-          ? showError()
-          : history.push('/confirmation')
-      );
     });
+
+    submitInvitation(decodedInvitationId).then((res) => (responseCode = res));
+
+    responseCode !== 'success' ? showError() : history.push('/confirmation');
   };
 
-  const onOk = () => {
+  const onDecline = () => {
+    let responseCode: string = '';
+    submitInvitation(decodedInvitationId).then((res) => (responseCode = res));
+    responseCode !== 'success' ? showError() : history.push('/confirmation');
+  };
+
+  const onSubmitOk = () => {
     form.submit();
-
+    setIsSubmitModalVisible(false);
-    setIsModalVisible(false);
   };
 
-  const onCancel = () => {
+  const onSubmitCancel = () => {
-    setIsModalVisible(false);
+    setIsSubmitModalVisible(false);
+  };
+
+  const onDeclineOk = () => {
+    form.submit();
+    setIsDeclineModalVisible(false);
+  };
+
+  const onDeclineCancel = () => {
+    setIsDeclineModalVisible(false);
   };
 
   const showError = () => {
@@ -95,7 +116,7 @@ const RegForm = ({ history }: any) => {
       <Form
         form={form}
         name='registration'
-        onFinish={onSubmit}
+        onFinish={isDeclined ? onDecline : onSubmit}
         autoComplete='off'
       >
         <Form.List name='visitors'>
@@ -147,8 +168,9 @@ const RegForm = ({ history }: any) => {
                         id: 'registration.form.preferences',
                       })}
                       fieldKey={[field.fieldKey, 'preferences']}
+                      initialValue='everything'
                     >
-                      <Select defaultValue='everything'>{preferences}</Select>
+                      <Select>{preferences}</Select>
                     </Form.Item>
                     <Form.Item
                       name={[field.name, 'welcomeDrink']}
@@ -207,8 +229,11 @@ const RegForm = ({ history }: any) => {
           <Form.Item>
             <Button
               className='submitButton'
+              onClick={(_) => {
+                setIsDeclined(true);
+                setIsDeclineModalVisible(true);
+              }}
               type='dashed'
-              htmlType='submit'
               shape='round'
             >
               <FormattedMessage id='registration.form.decline' />
@@ -218,7 +243,7 @@ const RegForm = ({ history }: any) => {
           <Form.Item>
             <Button
               className='submitButton'
-              onClick={(e) => setIsModalVisible(true)}
+              onClick={(_) => setIsSubmitModalVisible(true)}
               size='large'
               shape='round'
             >
@@ -234,9 +259,9 @@ const RegForm = ({ history }: any) => {
           },
           { visitorCount: visitorCount }
         )}
-        visible={isModalVisible}
+        visible={isSubmitModalVisible}
-        onOk={onOk}
+        onOk={onSubmitOk}
-        onCancel={onCancel}
+        onCancel={onSubmitCancel}
         okText={intl.formatMessage({
           id: 'registration.form.submitModal.save',
         })}
@@ -248,6 +273,24 @@ const RegForm = ({ history }: any) => {
           <FormattedMessage id='registration.form.submitModal.description' />
         </p>
       </Modal>
+      <Modal
+        title={intl.formatMessage({
+          id: 'registration.form.declineModal.title',
+        })}
+        visible={isDeclineModalVisible}
+        onOk={onDeclineOk}
+        onCancel={onDeclineCancel}
+        okText={intl.formatMessage({
+          id: 'registration.form.declineModal.save',
+        })}
+        cancelText={intl.formatMessage({
+          id: 'registration.form.declineModal.back',
+        })}
+      >
+        <p>
+          <FormattedMessage id='registration.form.declineModal.description' />
+        </p>
+      </Modal>
     </>
   );
 };

src/constants/localization/registration/en.ts

@@ -39,6 +39,11 @@ export const registration: Record<string, string> = {
     "registration.form.submitModal.save": "Yes, please",
     "registration.form.submitModal.back": "No, something is missing...",
     
+    "registration.form.declineModal.title": "You are sure you cannot attend?",
+    "registration.form.declineModal.description": "Sad to hear that.",
+    "registration.form.declineModal.save": "Unfortunately yes",
+    "registration.form.declineModal.back": "Let me still think about this...",
+
     "registration.error.title": "Link is no longer valid",
     "registration.error.text": "Your registration is already filled in. Apologies for the excess form filling...",
 }

src/constants/localization/registration/fi.ts

@@ -39,6 +39,11 @@ export const registration: Record<string, string> = {
     "registration.form.submitModal.save": "Tallenna",
     "registration.form.submitModal.back": "Takaisin",
     
-    "registration.error.title": "Linkki ei ole enää toiminnassa",
+    "registration.form.declineModal.title": "Et siis tosiaankaan pääse paikalle?",
+    "registration.form.declineModal.description": "Harmin paikka.",
+    "registration.form.declineModal.save": "Valitettavasti en",
+    "registration.form.declineModal.back": "Takaisin",
+
+    "registration.error.title": "Linkki ei ole enää voimassa",
     "registration.error.text": "Ilmoittautumisesi on jo kirjattu. Pahoittelu ylimääräisestä lomakkeen täyttelystä...",
 }