Response handling for the invitation registeration.

src/App.tsx

@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { currentLanguage } from './atoms/language';
 import { Main } from './pages/Main';
 import { Registration } from './pages/Registration';
+import { Confirmation } from './pages/Confirmation';
 import { IntlProvider } from 'react-intl';
 import { localization } from './constants/localization';
 import { ConfigProvider } from 'antd';
@@ -23,6 +24,7 @@ export default function App() {
       <Router>
         <Switch>
           <Route path='/' exact component={Main} />
+          <Route path='/confirmation' exact component={Confirmation} />
           <Route path='/:page' exact component={Main} />
           <Route path='/registration/:id' component={Registration} />
         </Switch>

src/components/RegForm.tsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input, Modal, Select } from 'antd';
+import { Button, Form, Input, Modal, notification, Select } from 'antd';
 import { useParams } from 'react-router';
 
 import './RegForm.scss';
@@ -7,6 +7,7 @@ import { arrayToString } from './utils';
 import { Visitor } from '../model/visitor';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useState } from 'react';
+import { withRouter } from 'react-router-dom';
 
 const { Option } = Select;
 
@@ -46,7 +47,7 @@ const welcomeDrinks = ['alcoholBubbles', 'alcoholFreeBubbles'].map(
   }
 );
 
-export const RegForm = () => {
+const RegForm = ({ history }: any) => {
   const { id } = useParams<ParamTypes>();
   const intl = useIntl();
   const [visitorCount, setVisitorCount] = useState(0);
@@ -60,7 +61,11 @@ export const RegForm = () => {
         preferences: visitor.preferences ?? '',
         welcomeDrink: visitor.welcomeDrink ?? '',
         invitationId: (visitor.invitationId = atob(id)),
-      });
+      }).then((res) =>
+        res === 'permission-denied'
+          ? showError()
+          : history.push('/confirmation')
+      );
     });
   };
 
@@ -74,6 +79,15 @@ export const RegForm = () => {
     setIsModalVisible(false);
   };
 
+  const showError = () => {
+    notification.error({
+      message: intl.formatMessage({ id: 'registration.error.title' }),
+      description: intl.formatMessage({ id: 'registration.error.text' }),
+      duration: 0,
+      placement: 'bottomLeft',
+    });
+  };
+
   const [form] = Form.useForm();
 
   return (
@@ -237,3 +251,5 @@ export const RegForm = () => {
     </>
   );
 };
+
+export default withRouter(RegForm);

src/constants/localization/confirmation/en.ts

@@ -0,0 +1,5 @@
+export const confirmation: Record<string, string> = {
+    "confirmation.title": "Your answer is registered",
+    "confirmation.text": "Please let Iveta or Veikko know if there comes up any changes in your plans. The given link does not work any longer after this.",
+    "confirmation.link": "More wedding related info can be found in here",
+}

src/constants/localization/confirmation/fi.ts

@@ -0,0 +1,5 @@
+export const confirmation: Record<string, string> = {
+    "confirmation.title": "Vastuksesi on vahvistettu",
+    "confirmation.text": "Ilmoitathan Ivetalle tai Veikolle mikäli suunnitelmiisi tulee muutos. Antamamme linkki ei toimi enää tämän jälkeen.",
+    "confirmation.link": "Lisää juhliin liittyvää infoa löytyy täältä",
+}

src/constants/localization/en.ts

@@ -1,11 +1,13 @@
 import { common } from "./common/en";
 import { registration } from './registration/en';
 import { main } from "./main/en";
+import { confirmation } from './confirmation/en';
 
 const en: Record<string, string> = {
     ...common,
     ...registration,
-    ...main
+    ...main,
+    ...confirmation
 }
 
 export default en;

src/constants/localization/fi.ts

@@ -1,11 +1,13 @@
 import { common } from "./common/fi";
 import { registration } from "./registration/fi";
 import { main } from "./main/fi";
+import { confirmation } from './confirmation/fi';
 
 const fi: Record<string, string> = {
     ...common,
     ...registration,
-    ...main
+    ...main,
+    ...confirmation
 }
 
 export default fi;

src/constants/localization/registration/en.ts

@@ -38,4 +38,7 @@ export const registration: Record<string, string> = {
     "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...",
+
+    "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

@@ -38,4 +38,7 @@ export const registration: Record<string, string> = {
     "registration.form.submitModal.description": "Tämä linkki lakkaa toimimasta tallennuksen jälkeen.",
     "registration.form.submitModal.save": "Tallenna",
     "registration.form.submitModal.back": "Takaisin",
+
+    "registration.error.title": "Linkki ei ole enää toiminnassa",
+    "registration.error.text": "Ilmoittautumisesi on jo kirjattu. Pahoittelu ylimääräisestä lomakkeen täyttelystä...",
 }

src/pages/Confirmation.scss

@@ -0,0 +1,36 @@
+@import '../colors.scss';
+
+.Confirmation {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 1rem;
+  font-size: 1.5rem;
+
+  h1 {
+    color: $brown-text;
+    font-size: 3.2rem;
+  }
+
+  p {
+    max-width: 48%;
+  }
+
+  a {
+    color: $brown-text;
+    font-family: 'Montserrat-Medium';
+
+    .infoLink {
+      text-decoration: underline;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .Confirmation {
+    p {
+      max-width: 90%;
+    }
+  }
+}

src/pages/Confirmation.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import './Confirmation.scss';
+
+export const Confirmation = () => {
+  return (
+    <div className='Confirmation'>
+      <h1>
+        <FormattedMessage id='confirmation.title' />
+      </h1>
+      <p>
+        <FormattedMessage id='confirmation.text' />
+      </p>
+      <Link to='/'>
+        &gt;{' '}
+        <span className='infoLink'>
+          <FormattedMessage id='confirmation.link' />
+        </span>{' '}
+        &lt;
+      </Link>
+    </div>
+  );
+};

src/pages/Main.scss

@@ -35,6 +35,13 @@
       margin-top: 0em;
       margin-bottom: 0em;
     }
+
+    .content {
+      h1 {
+        color: $brown-text;
+        font-size: 3.2rem;
+      }
+    }
   }
 
   .extraText {

src/pages/Registration.tsx

@@ -1,7 +1,7 @@
 import './Registration.scss';
 import { FormattedMessage } from 'react-intl';
 
-import { RegForm } from '../components/RegForm';
+import RegForm from '../components/RegForm';
 import { RegistrationHeader } from '../components/RegistrationHeader';
 import { LanguagePicker } from '../components/LanguagePicker';