From 46db0d006fb86836dd83714b32e54ece48042fb1 Mon Sep 17 00:00:00 2001 From: Julia Dai <125892682+juliadai8@users.noreply.github.com> Date: Wed, 10 Apr 2024 17:55:07 +0200 Subject: [PATCH] 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 --- src/App.tsx | 13 +- .../{Utlegg.tsx => components/NyttUtlegg.tsx} | 96 +++++++-- src/pages/public/User/components/Utlegg.tsx | 188 ++++++++++++++++++ src/pages/public/User/index.ts | 3 + src/pages/public/routes.tsx | 4 +- 5 files changed, 278 insertions(+), 26 deletions(-) rename src/pages/public/User/{Utlegg.tsx => components/NyttUtlegg.tsx} (76%) create mode 100644 src/pages/public/User/components/Utlegg.tsx create mode 100644 src/pages/public/User/index.ts diff --git a/src/App.tsx b/src/App.tsx index 69171dd5..53cf8876 100644 --- 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: }, + { + path: "", + element: , + children: [ + { + path: "/utlegg", + element: , + }, + ], + }, ], }, ]); diff --git a/src/pages/public/User/Utlegg.tsx b/src/pages/public/User/components/NyttUtlegg.tsx similarity index 76% rename from src/pages/public/User/Utlegg.tsx rename to src/pages/public/User/components/NyttUtlegg.tsx index 8241dcf7..abb54c17 100644 --- a/src/pages/public/User/Utlegg.tsx +++ b/src/pages/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>; +} + +const NyttUtlegg = (props: NyttUtleggProps): JSX.Element => { const [currentStep, setCurrentStep] = useState(1); const [dateValue, setDateValue] = useState({ startDate: null, @@ -65,21 +73,32 @@ 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; } @@ -87,7 +106,9 @@ const Utlegg = (): JSX.Element => { 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 = ( { ); const Next = ( - ); const Confirm = ( - ); const Back = ( - @@ -208,7 +254,9 @@ const Utlegg = (): JSX.Element => { case 6: return (
-

Bekrefte utlegg?

+

+ Bekrefte utlegg? +

{Confirm}
); @@ -220,10 +268,12 @@ const Utlegg = (): JSX.Element => { return (
-

- Utlegg -

-
+
{ alt="" /> {stepToComponent(currentStep)} -

{currentErrorMessage}

+

+ {currentErrorMessage} +

{Back} @@ -242,4 +294,4 @@ const Utlegg = (): JSX.Element => { ); }; -export default Utlegg; +export default NyttUtlegg; diff --git a/src/pages/public/User/components/Utlegg.tsx b/src/pages/public/User/components/Utlegg.tsx new file mode 100644 index 00000000..ecf6c1bd --- /dev/null +++ b/src/pages/public/User/components/Utlegg.tsx @@ -0,0 +1,188 @@ +import React, { useState } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faMinus, + faPencil, + faPlus, + faTrashCan, +} from "@fortawesome/free-solid-svg-icons"; +import NyttUtlegg from "./NyttUtlegg"; + +const Bekreftelse = () => { + return ( +
+

Utlegget ditt har blitt registrert

+
+ ); +}; + +const Utlegg: React.FC = () => { + const [showWindow, setWindow] = useState(false); + const [showConfirmation, setConfirmation] = useState(false); + const handleClick = () => { + setWindow(!showWindow); + setConfirmation(false); + }; + + const mapToTable = (utlegg: Utlegg[]) => { + return utlegg.map((u, index) => ( + + {u.Id} + {u.utleggsdato} + {u.beskrivelse} + {u.sum} + + {u.kvittering} + + + {u.status} + + + {u.status === "Til behandling" && ( + <> + Rediger + {" "} + + + )} + + + {u.status === "Til behandling" && ( + <> + Slett + {" "} + + + )} + + + )); + }; + + interface Utlegg { + Id: string; + utleggsdato: string; + beskrivelse: string; + sum: string; + kvittering: string; + status: string; + endre: string; + } + + const MineUtlegg: Utlegg[] = [ + { + Id: "123456789", + utleggsdato: "31.01.2024", + beskrivelse: "Pizza", + sum: "123,00 kr", + kvittering: "Vis kvittering", + status: "Til behandling", + endre: "slett", + }, + { + Id: "123456789", + utleggsdato: "31.01.2024", + beskrivelse: "Teamsosial", + sum: "600,00 kr", + kvittering: "Vis kvittering", + status: "Refundert", + endre: "", + }, + ]; + + return ( +
+ {showConfirmation && } +
+

+ Utlegg +

+
+ Her kan du registrere utlegg du har gjort for vektorprogrammet som du + ønsker å få refundert. For å få refusjon må du laste opp en kvittering + som bekrefter utlegget ditt. +
+ +

+ Hva kan jeg få refundert? +

+
+ {`Du kan typisk få refusjon for bussbilletter til og fra skole, kaffeposer til stand, kake til + arrangementer og lignende. Det er ellers lurt å høre med en leder om du kan få utlegget ditt + refundert før du legger ut. Om du har spørsmål kan du kontakte økonomiteamet på `} + + okonomi@vektorprogrammet.no + +
+ +

+ Mine utlegg +

+
+
+
+ +
+ {!showConfirmation && showWindow && ( + + )} +
+
+ + + + + + + + + + + + {mapToTable(MineUtlegg)} +
Id + Utleggsdato + + Beskrivelse + Sum + Kvittering + Status + +
+
+
+
+ ); +}; + +export default Utlegg; diff --git a/src/pages/public/User/index.ts b/src/pages/public/User/index.ts new file mode 100644 index 00000000..71ab8e12 --- /dev/null +++ b/src/pages/public/User/index.ts @@ -0,0 +1,3 @@ +import Utlegg from "./components/Utlegg"; + +export default Utlegg; diff --git a/src/pages/public/routes.tsx b/src/pages/public/routes.tsx index bc90ba76..1dea3d8f 100644 --- a/src/pages/public/routes.tsx +++ b/src/pages/public/routes.tsx @@ -7,7 +7,7 @@ import Kontakt from "./Kontakt"; import OmOss from "./OmOss"; import ServerOverview from "./StagingServerOverview"; import teamRoutes from "./Team/TeamPages/routes"; -import Utlegg from "./User/Utlegg"; +import Utlegg from "./User/components/Utlegg"; // The route with the corresponding component to render in the route const routes: AppRoute[] = [ @@ -18,7 +18,7 @@ const routes: AppRoute[] = [ { path: "/kontakt", element: , name: "Kontakt" }, { path: "/om-oss", element: , name: "Om oss" }, { path: "/team", name: "Team", children: teamRoutes }, - { path: "/utlegg", element: , name: "Utlegg" }, + { path: "/mineUtlegg", element: , name: "Utlegg" }, ]; export default routes;