Vf 94 lag nytt utlegg skjema (#269)

* Install datepicker and react-hook-form * Add mobile friendly disbursement form * Add validation and user feedback VF-94 * Fix sonarcloud issues * Fix typing errors from yarn build * VF-94 Create Utlegg page * VF-94 Fix Nytt Utlegg button bug and styling * VF-94 Adjust table and line width based on screen width * Fix lint and build errors --------- Co-authored-by: ErlendMariusOmmundsen <[email protected]>
vektorprogrammet · Apr 10, 2024 · 46db0d0 · 46db0d0
1 parent 91ccfe6
commit 46db0d0
Show file tree

Hide file tree

Showing 5 changed files with 278 additions and 26 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,8 +11,8 @@ import "./App.css";
 import MainPage from "pages/public";
 import ControlPanel from "pages/controlpanel";
 import Profil from "pages/public/Profil/components/Profil";
-import Utlegg from "pages/public/User/Utlegg";
 import MineSoknader from "pages/public/MineSoknader";
+import Utlegg from "pages/public/User/components/Utlegg";
 import appRoutes from "./pages/public/routes";
 import controlPanelRoutes from "./pages/controlpanel/routes";
 
@@ -53,7 +53,16 @@ const routes = createBrowserRouter([
           },
         ],
       },
-      { path: "/utlegg", element: <Utlegg /> },
+      {
+        path: "",
+        element: <MainPage />,
+        children: [
+          {
+            path: "/utlegg",
+            element: <Utlegg />,
+          },
+        ],
+      },
     ],
   },
 ]);

diff --git a/src/pages/public/User/Utlegg.tsx → ...ges/public/User/components/NyttUtlegg.tsx b/src/pages/public/User/Utlegg.tsx → ...ges/public/User/components/NyttUtlegg.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable react/jsx-props-no-spreading */
 import {
-  faCaretLeft, faCaretRight, faCheckToSlot,
+  faCaretLeft,
+  faCaretRight,
+  faCheckToSlot,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
@@ -10,13 +12,19 @@ import Datepicker, { DateValueType } from "react-tailwindcss-datepicker";
 import validateAccountNumber from "norwegian-utils/validateAccountNumber";
 
 type Inputs = {
-  amount: number
-  description: string
-  receipt: File
-  bankAccountNumber: string
+  amount: number;
+  description: string;
+  receipt: File;
+  bankAccountNumber: string;
 };
 
-const Utlegg = (): JSX.Element => {
+interface NyttUtleggProps {
+  showConfirmation: boolean;
+  setNew: () => void;
+  setConfirmation: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const NyttUtlegg = (props: NyttUtleggProps): JSX.Element => {
   const [currentStep, setCurrentStep] = useState(1);
   const [dateValue, setDateValue] = useState<DateValueType>({
     startDate: null,
@@ -65,29 +73,42 @@ const Utlegg = (): JSX.Element => {
         break;
 
       case 2:
-        if (formState.errors.description || !formState.dirtyFields.description) {
-          setCurrentErrorMessage("Beskrivelse må være lengre enn to bokstaver.");
+        if (
+          formState.errors.description
+          || !formState.dirtyFields.description
+        ) {
+          setCurrentErrorMessage(
+            "Beskrivelse må være lengre enn to bokstaver.",
+          );
           return false;
         }
         break;
 
       case 3:
         if (!validateDate(date)) {
-          setCurrentErrorMessage("Utleggsdato må være en gyldig dato etter 1. januar 2024 (DD-MM-YYYY).");
+          setCurrentErrorMessage(
+            "Utleggsdato må være en gyldig dato etter 1. januar 2024 (DD-MM-YYYY).",
+          );
           return false;
         }
         break;
 
       case 4:
-        if (formState.errors.receipt || file.name === "filename" || !file.type.includes("image")) {
+        if (
+          formState.errors.receipt
+          || file.name === "filename"
+          || !file.type.includes("image")
+        ) {
           setCurrentErrorMessage("Kvittering må være et opplastet bilde.");
           return false;
         }
         break;
 
       case 5:
         if (formState.errors.bankAccountNumber) {
-          setCurrentErrorMessage("Kontonummer må være et gyldig norsk kontonummer.");
+          setCurrentErrorMessage(
+            "Kontonummer må være et gyldig norsk kontonummer.",
+          );
           return false;
         }
         break;
@@ -98,6 +119,13 @@ const Utlegg = (): JSX.Element => {
     setCurrentErrorMessage("");
     return true;
   };
+
+  const handleConfirm = () => {
+    const { showConfirmation, setConfirmation, setNew } = props;
+    setConfirmation(!showConfirmation);
+    setNew();
+  };
+
   const handleNext = () => {
     if (isCurrentInputValid()) {
       setCurrentStep(currentStep + 1);
@@ -154,7 +182,10 @@ const Utlegg = (): JSX.Element => {
   );
   const BankAccountNumber = (
     <input
-      {...register("bankAccountNumber", { required: true, validate: validateAccountNumber })}
+      {...register("bankAccountNumber", {
+        required: true,
+        validate: validateAccountNumber,
+      })}
       type="text"
       id="bankAccountNumber"
       name="bankAccountNumber"
@@ -173,21 +204,36 @@ const Utlegg = (): JSX.Element => {
   );
 
   const Next = (
-    <button type="button" onClick={handleNext} className="btn btn-md hidden" disabled={currentStep === 6}>
+    <button
+      type="button"
+      onClick={handleNext}
+      className="btn btn-md hidden"
+      disabled={currentStep === 6}
+    >
       <span>Neste</span>
       <FontAwesomeIcon className="text-white pl-4" icon={faCaretRight} />
     </button>
   );
 
   const Confirm = (
-    <button type="submit" className="btn btn-success btn-md m-6" hidden={currentStep !== 6}>
+    <button
+      type="submit"
+      onClick={handleConfirm}
+      className="btn btn-success btn-md m-6"
+      hidden={currentStep !== 6}
+    >
       <span>Bekreft</span>
       <FontAwesomeIcon className="text-white pl-4" icon={faCheckToSlot} />
     </button>
   );
 
   const Back = (
-    <button type="button" onClick={handlePrevious} className="btn btn-md" disabled={currentStep === 1}>
+    <button
+      type="button"
+      onClick={handlePrevious}
+      className="btn btn-md"
+      disabled={currentStep === 1}
+    >
       <FontAwesomeIcon className="text-white pr-4" icon={faCaretLeft} />
       <span>Forrige</span>
     </button>
@@ -208,7 +254,9 @@ const Utlegg = (): JSX.Element => {
       case 6:
         return (
           <div className="flex flex-col items-center justify-center">
-            <h1 className="text-vektor-darblue text-2xl font-bold">Bekrefte utlegg?</h1>
+            <h1 className="text-vektor-darblue text-2xl font-bold">
+              Bekrefte utlegg?
+            </h1>
             {Confirm}
           </div>
         );
@@ -220,18 +268,22 @@ const Utlegg = (): JSX.Element => {
 
   return (
     <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center">
-      <h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3">
-        Utlegg
-      </h1>
-      <form id="disbursementForm" name="disbursementForm" className="bg-vektor-blue w-5/6 rounded-xl my-16 flex flex-col pt-8" onSubmit={handleSubmit(onSubmit)}>
+      <form
+        id="disbursementForm"
+        name="disbursementForm"
+        className="bg-vektor-blue w-5/6 rounded-xl my-16 flex flex-col pt-8"
+        onSubmit={handleSubmit(onSubmit)}
+      >
         <div className="rounded-t-xl w-11/12 h-36 m-6 px-3 justify-center self-center">
           <img
             className="w-1/4 -mt-6 float-right hidden md:block"
             src="images/team/OkonomiTor.png"
             alt=""
           />
           {stepToComponent(currentStep)}
-          <p className="text-red-600 text-sm my-4 m-1 w-full max-w-xs">{currentErrorMessage}</p>
+          <p className="text-red-600 text-sm my-4 m-1 w-full max-w-xs">
+            {currentErrorMessage}
+          </p>
         </div>
         <div className="flex justify-around space-x-6 py-5 bg-slate-800 rounded-b-xl">
           {Back}
@@ -242,4 +294,4 @@ const Utlegg = (): JSX.Element => {
   );
 };
 
-export default Utlegg;
+export default NyttUtlegg;