Re-add priority text field to admissions

frontend/src/routes/ApplicationForm/FormStructure.tsx

@@ -31,6 +31,7 @@ import { SelectedGroups } from ".";
 import JsonFieldEditor from "src/components/JsonFieldEditor";
 import { Button } from "@webkom/lego-bricks";
 import LinkButton from "src/components/LinkButton";
+import PriorityTextField from "./PriorityTextField";
 
 interface FormStructureProps extends FormikValues {
   admission?: Admission;
@@ -76,6 +77,25 @@ const FormStructure: React.FC<FormStructureProps> = ({
             Mobilnummeret vil bli brukt til å kalle deg inn på intervju.
           </HelpText>
           <Field name="phoneNumber" component={PhoneNumberField} />
+          <HelpText>
+            {!isRevy && (
+              <>
+                <Icon name="information-circle-outline" />
+                Kun leder av Abakus kan se det du skriver inn i prioriterings-
+                og kommentarfeltet.
+              </>
+            )}
+            <Icon name="information-circle-outline" />
+            Det er ikke sikkert prioriteringslisten vil bli tatt hensyn til.
+            Ikke søk på en {isRevy ? "gruppe" : "komité"} du ikke ønsker å bli
+            med i.
+          </HelpText>
+          <Field
+            name="priorityText"
+            component={PriorityTextField}
+            label="Prioriteringer, og andre kommentarer"
+            optional
+          />
           <JsonFieldEditor
             sectionName="headerFields"
             fields={admission?.header_fields}

frontend/src/routes/ApplicationForm/PriorityTextField.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from "react";
+import { FieldLabel, StyledTextAreaField } from "src/components/styledFields";
+import styled from "styled-components";
+import { media } from "src/styles/mediaQueries";
+import useDebouncedState from "src/utils/useDebouncedState";
+import { savePriorityTextDraft } from "src/utils/draftHelper";
+import { FormikValues } from "formik";
+
+type PriorityTextFieldProps = FormikValues;
+
+const PriorityTextField: React.FC<PriorityTextFieldProps> = ({
+  label,
+  optional = false,
+  field: { name, onChange, value },
+  form: { handleBlur },
+  disabled,
+}) => {
+  const debouncedValue = useDebouncedState(value);
+
+  useEffect(() => {
+    savePriorityTextDraft(value);
+  }, [debouncedValue]);
+
+  return (
+    <Wrapper>
+      <LabelWrapper>
+        <FieldLabel htmlFor={name}>{label}</FieldLabel>
+        {optional && <Optional>(valgfritt)</Optional>}
+      </LabelWrapper>
+      <StyledTextAreaField
+        name={name}
+        id={name}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={handleBlur}
+        placeholder="Skriv dine kommentarer her..."
+        value={value}
+        rows={5}
+      />
+    </Wrapper>
+  );
+};
+
+export default PriorityTextField;
+
+/** Styles **/
+
+const Wrapper = styled.div`
+  grid-area: prioritytext;
+  ${media.portrait`
+    margin-top: 0.5rem;
+  `};
+`;
+
+const LabelWrapper = styled.span`
+  display: flex;
+  ${media.handheld`
+    flex-direction: column;
+    margin-bottom: 5px;
+  `};
+`;
+
+const Optional = styled.span`
+  font-size: 0.8rem;
+  color: rgba(57, 75, 89, 0.75);
+  font-weight: 500;
+  margin-left: 0.3rem;
+  line-height: 1rem;
+`;

frontend/src/routes/ReceiptForm/FormStructure.tsx

@@ -36,6 +36,7 @@ import { clearAllDrafts } from "src/utils/draftHelper";
 import JsonFieldEditor from "src/components/JsonFieldEditor";
 import { Button } from "@webkom/lego-bricks";
 import LinkButton from "src/components/LinkButton";
+import PriorityTextField from "../ApplicationForm/PriorityTextField";
 
 interface FormStructureProps {
   toggleIsEditing: () => void;
@@ -143,6 +144,26 @@ const FormStructure: React.FC<FormStructureProps> = ({ toggleIsEditing }) => {
             component={PhoneNumberField}
             disabled={true}
           />
+          <HelpText>
+            {!isRevy && (
+              <>
+                <Icon name="information-circle-outline" />
+                Kun leder av Abakus kan se det du skriver inn i prioriterings-
+                og kommentarfeltet.
+              </>
+            )}
+            <Icon name="information-circle-outline" />
+            Det er ikke sikkert prioriteringslisten vil bli tatt hensyn til.
+            Ikke søk på en {isRevy ? "gruppe" : "komité"} du ikke ønsker å bli
+            med i.
+          </HelpText>
+          <Field
+            name="priorityText"
+            component={PriorityTextField}
+            label="Prioriteringer, og andre kommentarer"
+            optional
+            disabled={true}
+          />
           <JsonFieldEditor
             sectionName="headerFields"
             fields={admission?.header_fields}