From 489a7db4f6578bed8c86afa36147160bf28cacde Mon Sep 17 00:00:00 2001
From: Jonas Brunvoll Larsson <59939294+jonasbrunvoll@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:03:00 +0200
Subject: [PATCH] feat: update means of transport state machine and forms
 (#373)

* Update state machine and forms.

* Extend API with submitMeansOfTransportForm endpoint.

* Remove unused condition from commonInputValidator.

* remove console.log.

* Add missing context properties.

* Update src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

---------

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>
---
 .../contact/means-of-transport/events.ts      |   5 +-
 .../means-of-transport/forms/delayForm.tsx    |   8 +-
 .../means-of-transport/forms/driverForm.tsx   |  53 +----
 .../means-of-transport/forms/injuryForm.tsx   |  53 +----
 .../forms/serviceOfferingForm.tsx             |   8 +-
 .../means-of-transport/forms/stopForm.tsx     |  14 +-
 .../forms/transportationForm.tsx              |  55 ++---
 .../means-of-transport-form-machine.ts        | 222 +++++++++++-------
 .../contact/server/contact/index.ts           |  10 +
 .../validation/commonInputValidator.ts        |   6 +-
 src/pages/api/contact/means-of-transport.ts   |  12 +
 src/translations/pages/contact.ts             |  33 ++-
 12 files changed, 243 insertions(+), 236 deletions(-)
 create mode 100644 src/pages/api/contact/means-of-transport.ts

diff --git a/src/page-modules/contact/means-of-transport/events.ts b/src/page-modules/contact/means-of-transport/events.ts
index cf906e52..d8572e16 100644
--- a/src/page-modules/contact/means-of-transport/events.ts
+++ b/src/page-modules/contact/means-of-transport/events.ts
@@ -1,12 +1,13 @@
 import { TranslatedString } from '@atb/translations';
 import { commonEvents } from '../commoneEvents';
+import { Line } from '..';
 
 export type Area = { id: string; name: TranslatedString };
 
 const meansOfTransportSpecificFormEvents = {} as {
   type: 'ON_INPUT_CHANGE';
-  inputName: 'area' | 'formType' | 'wantsToBeContacted';
-  value: Area | string | boolean;
+  inputName: 'area' | 'formType' | 'isResponseWanted' | 'stop';
+  value: Area | string | boolean | Line['quays'][0];
 };
 
 export const meansOfTransportFormEvents = {} as
diff --git a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx
index 8655b7ab..583c01a0 100644
--- a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx
+++ b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx
@@ -172,7 +172,7 @@ export const DelayForm = ({ state, send }: DelayFormProps) => {
           {t(PageText.Contact.input.feedback.description)}
         </Typo.p>
         <Textarea
-          value={state.context.feedback}
+          value={state.context.feedback || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -203,7 +203,7 @@ export const DelayForm = ({ state, send }: DelayFormProps) => {
           label={PageText.Contact.input.firstName.label}
           type="text"
           name="firstName"
-          value={state.context.firstName}
+          value={state.context.firstName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -217,7 +217,7 @@ export const DelayForm = ({ state, send }: DelayFormProps) => {
           label={PageText.Contact.input.lastName.label}
           type="text"
           name="lastName"
-          value={state.context.lastName}
+          value={state.context.lastName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -231,7 +231,7 @@ export const DelayForm = ({ state, send }: DelayFormProps) => {
           label={PageText.Contact.input.email.label}
           type="email"
           name="email"
-          value={state.context.email}
+          value={state.context.email || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
diff --git a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx
index 7b81c61f..abb3ab14 100644
--- a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx
+++ b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx
@@ -10,7 +10,6 @@ import { TransportModeType } from '@atb-as/config-specs';
 import { Line } from '../..';
 import { FileInput } from '../../components/input/file';
 import { Textarea } from '../../components/input/textarea';
-import { RadioInput } from '../../components/input/radio';
 import { meansOfTransportFormEvents } from '../events';
 
 type DriverFormProps = {
@@ -195,7 +194,7 @@ export const DriverForm = ({ state, send }: DriverFormProps) => {
           {t(PageText.Contact.input.feedback.description)}
         </Typo.p>
         <Textarea
-          value={state.context.feedback}
+          value={state.context.feedback || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -226,7 +225,7 @@ export const DriverForm = ({ state, send }: DriverFormProps) => {
           label={PageText.Contact.input.firstName.label}
           type="text"
           name="firstName"
-          value={state.context.firstName}
+          value={state.context.firstName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -240,7 +239,7 @@ export const DriverForm = ({ state, send }: DriverFormProps) => {
           label={PageText.Contact.input.lastName.label}
           type="text"
           name="lastName"
-          value={state.context.lastName}
+          value={state.context.lastName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -250,49 +249,19 @@ export const DriverForm = ({ state, send }: DriverFormProps) => {
           }
         />
 
-        <Typo.p textType="body__primary">
-          {t(PageText.Contact.input.email.wantsToBeContacted.question)}
-        </Typo.p>
-
-        <RadioInput
-          label={t(PageText.Contact.input.email.wantsToBeContacted.yes)}
-          name="wantsToBeContacted"
-          checked={state.context.wantsToBeContacted}
-          onChange={() =>
-            send({
-              type: 'ON_INPUT_CHANGE',
-              inputName: 'wantsToBeContacted',
-              value: !state.context.wantsToBeContacted,
-            })
-          }
-        />
-        <RadioInput
-          label={t(PageText.Contact.input.email.wantsToBeContacted.no)}
-          name="wantsToBeContacted"
-          checked={!state.context.wantsToBeContacted}
-          onChange={() =>
+        <Input
+          label={PageText.Contact.input.email.label}
+          type="email"
+          name="email"
+          value={state.context.email || ''}
+          onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
-              inputName: 'wantsToBeContacted',
-              value: !state.context.wantsToBeContacted,
+              inputName: 'email',
+              value: e.target.value,
             })
           }
         />
-        {state.context.wantsToBeContacted && (
-          <Input
-            label={PageText.Contact.input.email.wantsToBeContacted.label}
-            type="email"
-            name="email"
-            value={state.context.email}
-            onChange={(e) =>
-              send({
-                type: 'ON_INPUT_CHANGE',
-                inputName: 'email',
-                value: e.target.value,
-              })
-            }
-          />
-        )}
       </SectionCard>
     </div>
   );
diff --git a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
index deb3e942..a1150f6a 100644
--- a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
+++ b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
@@ -10,7 +10,6 @@ import { TransportModeType } from '@atb-as/config-specs';
 import { Line } from '../..';
 import { FileInput } from '../../components/input/file';
 import { Textarea } from '../../components/input/textarea';
-import { RadioInput } from '../../components/input/radio';
 import { meansOfTransportFormEvents } from '../events';
 
 type InjuryFormProps = {
@@ -194,7 +193,7 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => {
           {t(PageText.Contact.input.feedback.description)}
         </Typo.p>
         <Textarea
-          value={state.context.feedback}
+          value={state.context.feedback || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -225,7 +224,7 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => {
           label={PageText.Contact.input.firstName.label}
           type="text"
           name="firstName"
-          value={state.context.firstName}
+          value={state.context.firstName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -239,7 +238,7 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => {
           label={PageText.Contact.input.lastName.label}
           type="text"
           name="lastName"
-          value={state.context.lastName}
+          value={state.context.lastName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -249,49 +248,19 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => {
           }
         />
 
-        <Typo.p textType="body__primary">
-          {t(PageText.Contact.input.email.wantsToBeContacted.question)}
-        </Typo.p>
-
-        <RadioInput
-          label={t(PageText.Contact.input.email.wantsToBeContacted.yes)}
-          name="wantsToBeContacted"
-          checked={state.context.wantsToBeContacted}
-          onChange={() =>
-            send({
-              type: 'ON_INPUT_CHANGE',
-              inputName: 'wantsToBeContacted',
-              value: !state.context.wantsToBeContacted,
-            })
-          }
-        />
-        <RadioInput
-          label={t(PageText.Contact.input.email.wantsToBeContacted.no)}
-          name="wantsToBeContacted"
-          checked={!state.context.wantsToBeContacted}
-          onChange={() =>
+        <Input
+          label={PageText.Contact.input.email.label}
+          type="email"
+          name="email"
+          value={state.context.email || ''}
+          onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
-              inputName: 'wantsToBeContacted',
-              value: !state.context.wantsToBeContacted,
+              inputName: 'email',
+              value: e.target.value,
             })
           }
         />
-        {state.context.wantsToBeContacted && (
-          <Input
-            label={PageText.Contact.input.email.wantsToBeContacted.label}
-            type="email"
-            name="email"
-            value={state.context.email}
-            onChange={(e) =>
-              send({
-                type: 'ON_INPUT_CHANGE',
-                inputName: 'email',
-                value: e.target.value,
-              })
-            }
-          />
-        )}
       </SectionCard>
     </div>
   );
diff --git a/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx b/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
index d01d13c4..5f023b63 100644
--- a/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
+++ b/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
@@ -22,7 +22,7 @@ export const ServiceOfferingForm = ({
   send,
 }: ServiceOfferingFormProps) => {
   const { t } = useTranslation();
-  const { getLinesByMode, getQuaysByLine } = useLines();
+  const { getLinesByMode } = useLines();
 
   return (
     <div>
@@ -117,7 +117,7 @@ export const ServiceOfferingForm = ({
           {t(PageText.Contact.input.feedback.description)}
         </Typo.p>
         <Textarea
-          value={state.context.feedback}
+          value={state.context.feedback || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -148,7 +148,7 @@ export const ServiceOfferingForm = ({
           label={PageText.Contact.input.firstName.label}
           type="text"
           name="firstName"
-          value={state.context.firstName}
+          value={state.context.firstName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -162,7 +162,7 @@ export const ServiceOfferingForm = ({
           label={PageText.Contact.input.lastName.label}
           type="text"
           name="lastName"
-          value={state.context.lastName}
+          value={state.context.lastName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
diff --git a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx
index 71d28e76..5c92ea75 100644
--- a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx
+++ b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx
@@ -81,14 +81,14 @@ export const StopForm = ({ state, send }: StopFormProps) => {
         />
 
         <Select
-          label={t(PageText.Contact.input.fromStop.labelWhitoutSpecification)}
-          value={state.context.fromStop}
+          label={t(PageText.Contact.input.stop.label)}
+          value={state.context.stop}
           disabled={!state.context.line}
           onChange={(value) => {
             if (!value) return;
             send({
               type: 'ON_INPUT_CHANGE',
-              inputName: 'fromStop',
+              inputName: 'stop',
               value: value,
             });
           }}
@@ -126,7 +126,7 @@ export const StopForm = ({ state, send }: StopFormProps) => {
           {t(PageText.Contact.input.feedback.description)}
         </Typo.p>
         <Textarea
-          value={state.context.feedback}
+          value={state.context.feedback || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -157,7 +157,7 @@ export const StopForm = ({ state, send }: StopFormProps) => {
           label={PageText.Contact.input.firstName.label}
           type="text"
           name="firstName"
-          value={state.context.firstName}
+          value={state.context.firstName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -171,7 +171,7 @@ export const StopForm = ({ state, send }: StopFormProps) => {
           label={PageText.Contact.input.lastName.label}
           type="text"
           name="lastName"
-          value={state.context.lastName}
+          value={state.context.lastName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -185,7 +185,7 @@ export const StopForm = ({ state, send }: StopFormProps) => {
           label={PageText.Contact.input.email.label}
           type="email"
           name="email"
-          value={state.context.email}
+          value={state.context.email || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
diff --git a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
index 23019746..9522eb51 100644
--- a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
+++ b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
@@ -10,8 +10,8 @@ import { TransportModeType } from '@atb-as/config-specs';
 import { Line } from '../..';
 import { FileInput } from '../../components/input/file';
 import { Textarea } from '../../components/input/textarea';
-import { RadioInput } from '../../components/input/radio';
 import { meansOfTransportFormEvents } from '../events';
+import { Checkbox } from '../../components/input/checkbox';
 
 type TransportationFormProps = {
   state: { context: ContextProps };
@@ -176,7 +176,7 @@ export const TransportationForm = ({
           {t(PageText.Contact.input.feedback.description)}
         </Typo.p>
         <Textarea
-          value={state.context.feedback}
+          value={state.context.feedback || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -207,7 +207,7 @@ export const TransportationForm = ({
           label={PageText.Contact.input.firstName.label}
           type="text"
           name="firstName"
-          value={state.context.firstName}
+          value={state.context.firstName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -221,7 +221,7 @@ export const TransportationForm = ({
           label={PageText.Contact.input.lastName.label}
           type="text"
           name="lastName"
-          value={state.context.lastName}
+          value={state.context.lastName || ''}
           onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
@@ -231,49 +231,32 @@ export const TransportationForm = ({
           }
         />
 
-        <Typo.p textType="body__primary">
-          {t(PageText.Contact.input.email.wantsToBeContacted.question)}
-        </Typo.p>
-
-        <RadioInput
-          label={t(PageText.Contact.input.email.wantsToBeContacted.yes)}
-          name="wantsToBeContacted"
-          checked={state.context.wantsToBeContacted}
-          onChange={() =>
+        <Input
+          label={PageText.Contact.input.email.isResponseWanted.label}
+          type="email"
+          name="email"
+          value={state.context.email || ''}
+          errorMessage={state.context?.errorMessages['email']?.[0]}
+          onChange={(e) =>
             send({
               type: 'ON_INPUT_CHANGE',
-              inputName: 'wantsToBeContacted',
-              value: !state.context.wantsToBeContacted,
+              inputName: 'email',
+              value: e.target.value,
             })
           }
         />
-        <RadioInput
-          label={t(PageText.Contact.input.email.wantsToBeContacted.no)}
-          name="wantsToBeContacted"
-          checked={!state.context.wantsToBeContacted}
+
+        <Checkbox
+          label={t(PageText.Contact.input.email.isResponseWanted.checkbox)}
+          checked={state.context.isResponseWanted}
           onChange={() =>
             send({
               type: 'ON_INPUT_CHANGE',
-              inputName: 'wantsToBeContacted',
-              value: !state.context.wantsToBeContacted,
+              inputName: 'isResponseWanted',
+              value: !state.context.isResponseWanted,
             })
           }
         />
-        {state.context.wantsToBeContacted && (
-          <Input
-            label={PageText.Contact.input.email.wantsToBeContacted.label}
-            type="email"
-            name="email"
-            value={state.context.email}
-            onChange={(e) =>
-              send({
-                type: 'ON_INPUT_CHANGE',
-                inputName: 'email',
-                value: e.target.value,
-              })
-            }
-          />
-        )}
       </SectionCard>
     </div>
   );
diff --git a/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts b/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
index f02d33f5..6d570d60 100644
--- a/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
+++ b/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
@@ -21,41 +21,126 @@ export enum FormType {
 }
 
 type submitInput = {
-  formType: string;
-  areaName: string;
-  transportMode: string;
-  lineName: string;
-  fromStopName: string;
-  toStopName: string;
-  date: string;
-  plannedDepartureTime: string;
-  feedback: string;
+  formType?: string;
+  areaName?: string;
+  transportMode?: string;
+  lineName?: string;
+  fromStopName?: string;
+  toStopName?: string;
+  stopName?: string;
+  date?: string;
+  plannedDepartureTime?: string;
+  feedback?: string;
   attachments?: File[];
-  firstName: string;
-  lastName: string;
-  email: string;
+  firstName?: string;
+  lastName?: string;
+  isResponseWanted?: boolean;
+  email?: string;
 };
 
 export type ContextProps = {
-  formType: FormType | undefined;
-  area: Area | undefined;
-  transportMode: TransportModeType | undefined;
-  line: Line | undefined;
-  fromStop: Line['quays'][0] | undefined;
-  toStop: Line['quays'][0] | undefined;
-  date: string;
-  plannedDepartureTime: string;
-  feedback: string;
+  formType?: FormType;
+  area?: Area;
+  transportMode?: TransportModeType;
+  line?: Line;
+  fromStop?: Line['quays'][0];
+  toStop?: Line['quays'][0];
+  stop?: Line['quays'][0];
+  date?: string;
+  plannedDepartureTime?: string;
+  feedback?: string;
   attachments?: File[];
-  firstName: string;
-  lastName: string;
-  email: string;
-  target?: string;
-  isContactInfoOptional: boolean;
-  wantsToBeContacted: boolean;
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  isResponseWanted: boolean;
   errorMessages: InputErrorMessages;
 };
 
+const setInputToValidate = (context: ContextProps) => {
+  const {
+    formType,
+    area,
+    transportMode,
+    line,
+    fromStop,
+    toStop,
+    stop,
+    date,
+    plannedDepartureTime,
+    feedback,
+    email,
+    isResponseWanted,
+  } = context;
+
+  switch (formType) {
+    case FormType.Driver:
+      return {
+        area,
+        transportMode,
+        line,
+        fromStop,
+        toStop,
+        stop,
+        date,
+        plannedDepartureTime,
+        feedback,
+      };
+
+    case FormType.Transportation:
+      return {
+        transportMode,
+        line,
+        fromStop,
+        toStop,
+        date,
+        plannedDepartureTime,
+        feedback,
+        ...(isResponseWanted && { email }), // Include email if response is wanted.
+      };
+
+    case FormType.Delay:
+      return {
+        transportMode,
+        line,
+        fromStop,
+        toStop,
+        date,
+        plannedDepartureTime,
+        feedback,
+      };
+
+    case FormType.Stop:
+      return {
+        transportMode,
+        line,
+        stop,
+        date,
+        feedback,
+      };
+
+    case FormType.ServiceOffering:
+      return {
+        area,
+        transportMode,
+        line,
+        feedback,
+      };
+
+    case FormType.Injury:
+      return {
+        area,
+        transportMode,
+        line,
+        fromStop,
+        toStop,
+        date,
+        plannedDepartureTime,
+        feedback,
+      };
+  }
+};
+
 export const meansOfTransportFormMachine = setup({
   types: {
     context: {} as ContextProps,
@@ -63,7 +148,8 @@ export const meansOfTransportFormMachine = setup({
   },
   guards: {
     validateInputs: ({ context }) => {
-      context.errorMessages = commonInputValidator(context);
+      const inputToValidate = setInputToValidate(context);
+      context.errorMessages = commonInputValidator(inputToValidate);
       return Object.keys(context.errorMessages).length > 0 ? false : true;
     },
   },
@@ -72,8 +158,6 @@ export const meansOfTransportFormMachine = setup({
       if (event.type === 'ON_INPUT_CHANGE') {
         const { inputName, value } = event;
 
-        // Remove all errorMessages if changing form type.
-        // Else, remove errorMessages related to type.
         if (inputName === 'formType') {
           context.errorMessages = {};
         } else {
@@ -117,6 +201,7 @@ export const meansOfTransportFormMachine = setup({
           lineName,
           fromStopName,
           toStopName,
+          stopName,
           date,
           plannedDepartureTime,
           feedback,
@@ -124,6 +209,7 @@ export const meansOfTransportFormMachine = setup({
           firstName,
           lastName,
           email,
+          isResponseWanted,
         },
       }: {
         input: submitInput;
@@ -131,7 +217,8 @@ export const meansOfTransportFormMachine = setup({
         const base64EncodedAttachments = await convertFilesToBase64(
           attachments || [],
         );
-        return await fetch('api/contact/means-of-transport', {
+
+        return await fetch('/api/contact/means-of-transport', {
           method: 'POST',
           body: JSON.stringify({
             formType: formType,
@@ -140,13 +227,15 @@ export const meansOfTransportFormMachine = setup({
             line: lineName,
             fromStop: fromStopName,
             toStop: toStopName,
+            stop: stopName,
             date: date,
-            plannedDepartureTime: plannedDepartureTime,
-            additionalInfo: feedback,
+            departureTime: plannedDepartureTime,
+            feedback: feedback,
+            attachments: base64EncodedAttachments,
             firstName: firstName,
             lastName: lastName,
             email: email,
-            attachments: base64EncodedAttachments,
+            isResponseWanted: isResponseWanted,
           }),
         }).then((response) => {
           // throw an error to force onError
@@ -160,20 +249,9 @@ export const meansOfTransportFormMachine = setup({
   /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAZQFUAhAWQEkAVAbQAYBdRUAAcA9rFwAXXMPwCQAD0QBGAGzcSAZgCsATnXLlAJi2rN6gDQgAnkoDsmktxsAObstN7FN5eoC+Pi2hYeISk5FTU7ADyAOLRADIAojz8SCAiYpLSsgoIACyKJNpFxSUlFtYIRvZO6rUqBg3c3Fp+ARg4BMRklDTsAIIAGqzJsukSUjKpOSpqWrr6VSbmVojqueoaBk6K3AbOqjYGyq0ggR0hJJDj+FB0TGxcfKOi41lTiJqaBdyKmoaKTmcTkB2nKtnsjhcblqyk83hOZ2CXSukhudAS7AA+uwAEp9ABytAACpEcVjmJEACJJJ6pMaZSagHJ2NSKXKudnqGw7TSAsGVdTaEhOYpOTQ2ZqmZS5BHtJGkCjCdAQAi3CDSMBkfAAN2EAGtNYjOgqlSqbggCLrMOgGckRnSXgzsh8vg5fv9AcCQfztiRcsVnHpuO4bLKgsaSIrlarqGAAE5x4RxkiCCg2gBmSdQJCNFyjZqgFp1wmttr49qEjomzoQn2+7oMAKB3pWlQM9nF20cn20nj8-hA+GEEDgslzxGeGWr7wQAFplA4mkvl8ubPz52Hzl0wmBJ69GfIPkLcgZtMpudovmze6DW7UbH7FGzT9wnA12TKB+PSCjVXunTO2wPq47anmK3DaGKuT8msBS5M4EFit4Ng2OoBifm04Z5qaf4OlObxMqsmi5H6TjrGRhwoV4wb8r8BgOAh5FNCo56bvKJCwAArpgmBwPAeH7jWQEOIYmhgZoiHEbRzQkKY2jBl83C5GKnihv2QA */
   initial: 'editing',
   context: {
-    formType: undefined,
-    area: undefined,
-    transportMode: undefined,
-    line: undefined,
-    fromStop: undefined,
-    toStop: undefined,
     date: getCurrentDateString(),
     plannedDepartureTime: getCurrentTimeString(),
-    feedback: '',
-    firstName: '',
-    lastName: '',
-    email: '',
-    isContactInfoOptional: true,
-    wantsToBeContacted: false,
+    isResponseWanted: false,
     errorMessages: {},
   },
   states: {
@@ -211,44 +289,22 @@ export const meansOfTransportFormMachine = setup({
     submitting: {
       invoke: {
         src: 'submit',
-        input: ({ context }) => {
-          const {
-            formType,
-            area,
-            transportMode,
-            line,
-            fromStop,
-            toStop,
-            date,
-            plannedDepartureTime,
-            feedback,
-            firstName,
-            lastName,
-            email,
-          } = context;
-          if (
-            !formType ||
-            !area ||
-            !transportMode ||
-            !line ||
-            !fromStop ||
-            !toStop
-          ) {
-            throw new Error(`Missing required field(s)`);
-          }
+        input: ({ context }: { context: ContextProps }) => {
           return {
-            formType: formType,
-            areaName: area.name.no,
-            transportMode: transportMode,
-            lineName: line.name,
-            fromStopName: fromStop.name,
-            toStopName: toStop.name,
-            date: date,
-            plannedDepartureTime: plannedDepartureTime,
-            feedback: feedback,
-            firstName: firstName,
-            lastName: lastName,
-            email: email,
+            formType: context.formType,
+            areaName: context.area?.name.no,
+            transportMode: context.transportMode,
+            lineName: context.line?.name,
+            fromStopName: context.fromStop?.name,
+            toStopName: context.toStop?.name,
+            stopName: context.stop?.name,
+            date: context.date,
+            plannedDepartureTime: context.plannedDepartureTime,
+            feedback: context.feedback,
+            firstName: context.firstName,
+            lastName: context.lastName,
+            email: context.email,
+            isResponseWanted: context.isResponseWanted,
           };
         },
 
diff --git a/src/page-modules/contact/server/contact/index.ts b/src/page-modules/contact/server/contact/index.ts
index 3442bb60..260de1c9 100644
--- a/src/page-modules/contact/server/contact/index.ts
+++ b/src/page-modules/contact/server/contact/index.ts
@@ -4,6 +4,7 @@ import { ContactApiReturnType } from '../types';
 export type ContactApi = {
   submitTicketControlForm(formData: any): Promise<ContactApiReturnType>;
   submitTravelGuaranteeForm(formData: any): Promise<ContactApiReturnType>;
+  submitMeansOfTransportForm(formData: any): Promise<ContactApiReturnType>;
 };
 
 export function createContactApi(
@@ -27,5 +28,14 @@ export function createContactApi(
       const data: ContactApiReturnType = await response.json();
       return data;
     },
+
+    async submitMeansOfTransportForm(formData) {
+      const response = await request('/means-of-transport', {
+        method: 'POST',
+        body: formData,
+      });
+      const data: ContactApiReturnType = await response.json();
+      return data;
+    },
   };
 }
diff --git a/src/page-modules/contact/validation/commonInputValidator.ts b/src/page-modules/contact/validation/commonInputValidator.ts
index 53eaf7be..ea92ff9f 100644
--- a/src/page-modules/contact/validation/commonInputValidator.ts
+++ b/src/page-modules/contact/validation/commonInputValidator.ts
@@ -6,18 +6,18 @@ export const commonInputValidator = (context: any) => {
   const inputRules = [
     {
       inputName: 'firstName',
-      validCondition: context.firstName || context.isContactInfoOptional,
+      validCondition: context.firstName,
 
       errorMessage: PageText.Contact.input.firstName.errorMessages.empty,
     },
     {
       inputName: 'lastName',
-      validCondition: context.lastName || context.isContactInfoOptional,
+      validCondition: context.lastName,
       errorMessage: PageText.Contact.input.lastName.errorMessages.empty,
     },
     {
       inputName: 'email',
-      validCondition: context.email || context.isContactInfoOptional,
+      validCondition: context.email,
       errorMessage: PageText.Contact.input.email.errorMessages.empty,
     },
     {
diff --git a/src/pages/api/contact/means-of-transport.ts b/src/pages/api/contact/means-of-transport.ts
new file mode 100644
index 00000000..9da0cfb5
--- /dev/null
+++ b/src/pages/api/contact/means-of-transport.ts
@@ -0,0 +1,12 @@
+import { tryResult } from '@atb/modules/api-server';
+import { handlerWithContactFormClient } from '@atb/page-modules/contact/server';
+import { ContactApiReturnType } from '@atb/page-modules/contact/server/types';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default handlerWithContactFormClient<ContactApiReturnType>({
+  async POST(req: NextApiRequest, res: NextApiResponse, { client, ok }) {
+    return tryResult(req, res, async () => {
+      return ok(await client.submitMeansOfTransportForm(req.body));
+    });
+  },
+});
diff --git a/src/translations/pages/contact.ts b/src/translations/pages/contact.ts
index d5e48dc4..7441674c 100644
--- a/src/translations/pages/contact.ts
+++ b/src/translations/pages/contact.ts
@@ -481,20 +481,17 @@ export const Contact = {
 
     email: {
       label: _('E-post', 'Email', 'E-post'),
-      wantsToBeContacted: {
+      isResponseWanted: {
         label: _(
           'E-post (må fylles ut hvis du vil ha svar)',
           'Email (must be entered if you want to receive an answer)',
           'E-post (må fyllast ut viss du vil ha svar)',
         ),
-        question: _(
-          'Ønsker du svar på angående saken?',
-          'Do you want an answer to the case?',
-          'Ønsker du svar på angåande saka?',
+        checkbox: _(
+          'Ja, jeg ønsker å motta svar på epost',
+          'Yes, I want to receive an answer on email',
+          'Ja, eg ønsker å motta svar på epost',
         ),
-
-        yes: _('Ja', 'Yes', 'Ja'),
-        no: _('Nei', 'No', 'Nei'),
       },
       errorMessages: {
         empty: _(
@@ -598,11 +595,6 @@ export const Contact = {
 
     fromStop: {
       label: _('Fra holdeplass/kai', 'From stop/harbor', 'Frå haldeplass/kai'),
-      labelWhitoutSpecification: _(
-        'Holdeplass/kai',
-        'Stop/harbor',
-        'Haldeplass/kai',
-      ),
       optionLabel: _(
         'Velg holdeplass/kai',
         'Select stop/harbor',
@@ -632,6 +624,21 @@ export const Contact = {
         ),
       },
     },
+    stop: {
+      label: _('Holdeplass/kai', 'Stop/harbor', 'Haldeplass/kai'),
+      optionLabel: _(
+        'Velg holdeplass/kai',
+        'Select stop/harbor',
+        'Vel haldeplass/kai',
+      ),
+      errorMessages: {
+        empty: _(
+          'Velg holdeplass/kai',
+          'Select stop/harbor',
+          'Vel haldeplass/kai',
+        ),
+      },
+    },
     date: {
       label: _('Dato', 'Date', 'Dato'),
       errorMessages: {