77 fix validation of input fields on receiptpage

src/pages/ReceiptPage.tsx

@@ -48,8 +48,10 @@ interface ReceiptRequestBody {
 const ReceiptPage = () => {
   const navigate = useNavigate();
 
+  const [cardInputType, setCardInputType] = useState<"number" | "committee">("number");
   const [usedOnlineCard, setUsedOnlineCard] = useState(false);
   const [disableSubmit, setDisableSubmit] = useState(false);
+  const [amountInput, setAmountInput] = useState("");
 
   const [attachments, setAttachments] = useState<File[]>([]);
 
@@ -78,6 +80,67 @@ const ReceiptPage = () => {
 
 
   const submitform = async () => {
+
+    // Validate card number length to be exactly 16 numbers
+    if (!usedOnlineCard) {
+      const accountNumber = formdata.account_number || "";
+      const isValidAccountNumber = /^\d{11}$/.test(accountNumber);
+      if (!isValidAccountNumber) {
+        alert("Kontonummer må være 11 sifre");
+        return;
+      }
+    }
+
+    if (usedOnlineCard) {
+      const cardNumber = formdata.card_number || "";
+      if (cardInputType === "number") {
+        if (!(/^\d{16}$/.test(cardNumber))) {
+          alert("Kortnummer må være 16 sifre");
+          return;
+        }
+      }
+      if (cardInputType === "committee") {
+        if (cardNumber.trim() === "") {
+          alert("Vennligst skriv inn navn på komité");
+          return;
+        }
+      }
+    }
+
+    // Validate beløp 
+    if (!amountInput) {
+      alert("Beløp må fylles inn");
+      return;
+    }
+
+    if (isNaN(formdata.amount) || amountInput === null || amountInput === undefined) {
+      alert("Beløp må være et tall");
+      return;
+    }
+
+    if (formdata.amount < 0) {
+      alert("Beløp kan ikke være negativt");
+      return;
+    }
+
+    if (formdata.name.length <= 0) {
+      alert("Vennligst skriv annledning");
+      return;
+    }
+
+    if (!formdata.committee_id) {
+      alert("Velg en ansvarlig enhet");
+      return;
+    }
+
+    if (attachments.length === 0) {
+      alert("Last opp minst én kviterring/ett vedlegg");
+      return;
+    }
+
+    const numericAmount = parseFloat(amountInput);
+    const updatedFormData = { ...formdata, amount: numericAmount };
+
     setDisableSubmit(true);
     const paymentInfo: PaymentInformation = {
       usedOnlineCard: usedOnlineCard,
@@ -92,22 +155,20 @@ const ReceiptPage = () => {
       id: 0,
     };
     const body: ReceiptRequestBody = {
-      receipt: formdata,
+      receipt: updatedFormData,
       attachments: await Promise.all(
         [...attachments].map(async (file) => await fileToBase64(file)),
       ),
       receiptPaymentInformation: paymentInfo,
     };
 
     try {
-    await submitReceipt(body);
-    alert("Kvittering sendt inn!");
-    // TODO: Fix with popup success message in home something
-    navigate("/?receiptsubmittedsuccess=1");
+      await submitReceipt(body);
+      alert("Kvittering sendt inn!");
+      // TODO: Fix with popup success message in home something
+      navigate("/?receiptsubmittedsuccess=1");
     } catch (e) {
-
       alert("Noe gikk galt, prøv igjen senere");
-
     }
 
     setDisableSubmit(false);
@@ -171,14 +232,11 @@ const ReceiptPage = () => {
             <div className="flex-col w-[20rem]">
               <p className="text-left tracking-wide">Beløp</p>
               <input
+                type="number"
                 placeholder={"530"}
                 className="text-black p-3 rounded w-full"
-                onChange={(e) => {
-                  setFormdata({
-                    ...formdata,
-                    amount: parseInt(e.target.value),
-                  });
-                }}
+                value={amountInput}
+                onChange={(e) => setAmountInput(e.target.value)}
               ></input>
             </div>
           </div>
@@ -221,26 +279,49 @@ const ReceiptPage = () => {
         <div className={`${!usedOnlineCard ? "hidden" : ""} text-white`}>
           <div className="flex justify-center gap-3 flex-col md:gap-10 md:flex-row items-center">
             <div className="flex-col w-[20rem]">
-              <p className="text-left tracking-wide">Kortinformasjon</p>
+              <p className="text-left tracking-wide mb-2 underline">Kortinformasjon</p>
+              <div className="flex gap-4 mb-3">
+                <label className="flex items-center gap-1 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="cardType"
+                    value="number"
+                    checked={cardInputType === "number"}
+                    onChange={() => setCardInputType("number")}
+                  />
+                  Kortnummer
+                </label>
+
+                <label className="flex items-center gap-1 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="cardType"
+                    value="committee"
+                    checked={cardInputType === "committee"}
+                    onChange={() => setCardInputType("committee")}
+                  />
+                  Komité
+                </label>
+              </div>
               <input
-                placeholder={"Kortnummer/Hvilken komite korter tilhører"}
+                type={cardInputType === "number" ? "text" : "text"}
+                placeholder={
+                  cardInputType === "number"
+                    ? "2345 XXXX XXXX XXXX"
+                    : "Skriv inn hvilken komité kortet tilhører"
+                }
                 className="text-black p-3 rounded w-full"
                 onChange={(e) => {
                   setFormdata({ ...formdata, card_number: e.target.value });
                 }}
-              ></input>
+              />
             </div>
-            <div className="flex-col w-[20rem]">
+            <div className="flex-col w-[20rem] md:mt-11">
               <p className="text-left tracking-wide">Beløp</p>
               <input
                 placeholder={"530"}
                 className="text-black p-3 rounded w-full"
-                onChange={(e) => {
-                  setFormdata({
-                    ...formdata,
-                    amount: parseInt(e.target.value),
-                  });
-                }}
+                onChange={(e) => setAmountInput(e.target.value)}
               ></input>
             </div>
           </div>
@@ -267,7 +348,7 @@ const ReceiptPage = () => {
                   });
                 }}
               >
-                <option value="None">Ingen</option>
+                <option value="">Ingen</option>
                 {data && data.length
                   ? data.map((committee: any) => {
                       return (