From 6daae28c395f007ccb77349d9edd5eb423f5d23f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josu=C3=A9=20Brenes?= <josuebrenes3005@gmail.com>
Date: Mon, 30 Sep 2024 20:56:39 -0600
Subject: [PATCH 1/4] fix: validate the goal type input

---
 .../modules/newfunding/FundingStep.tsx        | 65 +++++++++++++------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx b/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx
index 480cccd..e6cc7bb 100644
--- a/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx
+++ b/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx
@@ -1,3 +1,5 @@
+import React, { useState } from 'react';
+
 interface FundingStepProps {
   fundingName: string;
   setFundingName: (name: string) => void;
@@ -10,25 +12,48 @@ const FundingStep: React.FC<FundingStepProps> = ({
   setFundingName,
   name,
   setName,
-}) => (
-  <div className="text-center w-11/12 md:w-3/3 lg:w-1/1">
-    <input
-      type="text"
-      placeholder="Funding name"
-      value={fundingName}
-      onChange={(e) => setFundingName(e.target.value)}
-      className="mt-2 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
-      required
-    />
-    <input
-      type="text"
-      placeholder="Set your goal in STRKs"
-      value={name}
-      onChange={(e) => setName(e.target.value)}
-      className="mt-4 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
-      required
-    />
-  </div>
-);
+}) => {
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const handleGoal = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    if (newValue === '' || !isNaN(Number(newValue))) {
+      setName(newValue);
+      setErrors([]); 
+    } else {
+      setErrors(['The goal has to be of number type']);
+    }
+  };
+
+  return (
+    <div className="text-center w-11/12 md:w-3/3 lg:w-1/1">
+      {errors.length > 0 && (
+        <div className="bg-red-800 text-white p-2 mb-2">
+          {errors.map((error, index) => (
+            <div key={index}>{error}</div>
+          ))}
+        </div>
+      )}
+
+      <input
+        type="text"
+        placeholder="Funding name"
+        value={fundingName}
+        onChange={(e) => setFundingName(e.target.value)}
+        className="mt-2 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
+        required
+      />
+      <input
+        type="number"
+        placeholder="Set your goal in STRKs"
+        value={name}
+        onChange={handleGoal}
+        className="mt-4 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
+        required
+      />
+    </div>
+  );
+};
 
 export default FundingStep;

From 65a03118683b001ff5af19bd3eaa238c2c113e99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josu=C3=A9=20Brenes?= <josuebrenes3005@gmail.com>
Date: Mon, 30 Sep 2024 20:57:01 -0600
Subject: [PATCH 2/4] fix: change the discord link

---
 frontend/gostarkme-web/components/ui/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/gostarkme-web/components/ui/Footer.tsx b/frontend/gostarkme-web/components/ui/Footer.tsx
index 084efb0..bb647eb 100644
--- a/frontend/gostarkme-web/components/ui/Footer.tsx
+++ b/frontend/gostarkme-web/components/ui/Footer.tsx
@@ -47,7 +47,7 @@ const Footer = (): React.JSX.Element => {
               />
             </svg>
           </a>
-          <a className="mx-1" href="https://discord.gg/26sQ6dbY">
+          <a className="mx-1" href="https://discord.gg/sEpnC6JB2U">
             <svg
               height="35"
               viewBox="0 0 24 24"

From 61bcc4d095b2a9fcb875d91c6007e78ac0b868e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josu=C3=A9=20Brenes?= <josuebrenes3005@gmail.com>
Date: Mon, 30 Sep 2024 22:30:19 -0600
Subject: [PATCH 3/4] fix: add warning to form labels empty

---
 .../components/modules/Fund/FundDonate.tsx    | 39 ++++++++++++--
 .../modules/newfunding/FundingStep.tsx        | 54 +++++++++++++------
 .../components/modules/newfunding/Stages.tsx  | 25 +++++++--
 3 files changed, 93 insertions(+), 25 deletions(-)

diff --git a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
index 22840db..a6c41d3 100644
--- a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
+++ b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { LinkButton } from "@/components/ui/LinkButton";
 import ProgressBar from "@/components/ui/ProgressBar";
 import Image, { StaticImageData } from "next/image";
 import { useState } from "react";
@@ -10,13 +9,31 @@ interface FundDonateProps {
 }
 
 const FundDonate = ({ icon }: FundDonateProps) => {
-  const [amount, setAmount] = useState<number>();
+  const [amount, setAmount] = useState<number | "">("");
+  const [error, setError] = useState<string>("");
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Number(e.target.value);
+    const value = e.target.value === "" ? "" : Number(e.target.value);
     setAmount(value);
+    setError("");
   };
 
+  const handleDonateClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (amount === "") {
+      setError("This field is required.");
+    } else if (typeof amount === "number" && amount < 0) {
+      setError("The amount cannot be negative.");
+    } else {
+      console.log("Donating:", amount);
+      setError("");
+      setTimeout(() => {
+        window.location.href = "/"; 
+      }, 0);
+    }
+  };
+  
+
   return (
     <div className="flex flex-col">
       <ProgressBar progress={34} />
@@ -26,14 +43,26 @@ const FundDonate = ({ icon }: FundDonateProps) => {
       </div>
       <div className="flex justify-center">
         <input
-          className="border border-gray-400 p-2 my-5 rounded w-1/4"
+          className={`border p-2 my-5 rounded w-1/4 ${
+            error ? "border-red-500" : "border-gray-400"
+          }`}
           type="number"
           placeholder="Enter the amount of STRK"
           onChange={handleAmountChange}
           value={amount}
+          min={0}
+          required
         />
       </div>
-      <LinkButton label="Donate" href="/" />
+      {error && (
+        <p className="text-red-500 text-center mb-4">{error}</p> 
+      )}
+      <button
+        onClick={handleDonateClick}
+        className="self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400"
+      >
+        Donate
+      </button>
     </div>
   );
 };
diff --git a/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx b/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx
index e6cc7bb..b46f515 100644
--- a/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx
+++ b/frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 interface FundingStepProps {
   fundingName: string;
   setFundingName: (name: string) => void;
   name: string;
   setName: (name: string) => void;
+  errors: { fundingName: string; name: string }; // Expecting errors as props
+  setErrors: React.Dispatch<React.SetStateAction<{ fundingName: string; name: string }>>; // Specify the type for setErrors
 }
 
 const FundingStep: React.FC<FundingStepProps> = ({
@@ -12,36 +14,45 @@ const FundingStep: React.FC<FundingStepProps> = ({
   setFundingName,
   name,
   setName,
+  errors,
+  setErrors,
 }) => {
-  const [errors, setErrors] = useState<string[]>([]);
-
   const handleGoal = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
 
-    if (newValue === '' || !isNaN(Number(newValue))) {
+    // Check if the input is empty or a valid non-negative number
+    if (newValue === '' || (Number(newValue) >= 0 && !isNaN(Number(newValue)))) {
       setName(newValue);
-      setErrors([]); 
+      setErrors((prev) => ({ ...prev, name: '' })); 
     } else {
-      setErrors(['The goal has to be of number type']);
+      setErrors((prev) => ({ ...prev, name: 'The goal must be a non-negative number.' }));
+    }
+  };
+
+  const handleFundingNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setFundingName(newValue);
+
+    // Validate funding name to allow only alphabetic characters
+    const isValidName = /^[A-Za-z\s]*$/.test(newValue); // Allow letters and spaces only
+
+    if (!newValue) {
+      setErrors((prev) => ({ ...prev, fundingName: 'Funding name is required.' }));
+    } else if (!isValidName) {
+      setErrors((prev) => ({ ...prev, fundingName: 'Funding name cannot contain numbers or symbols.' }));
+    } else {
+      setErrors((prev) => ({ ...prev, fundingName: '' })); 
     }
   };
 
   return (
     <div className="text-center w-11/12 md:w-3/3 lg:w-1/1">
-      {errors.length > 0 && (
-        <div className="bg-red-800 text-white p-2 mb-2">
-          {errors.map((error, index) => (
-            <div key={index}>{error}</div>
-          ))}
-        </div>
-      )}
-
       <input
         type="text"
         placeholder="Funding name"
         value={fundingName}
-        onChange={(e) => setFundingName(e.target.value)}
-        className="mt-2 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
+        onChange={handleFundingNameChange}
+        className={`mt-2 p-2 pl-4 border rounded w-full placeholder:text-base ${errors.fundingName ? 'border-red-500' : 'border-black'}`}
         required
       />
       <input
@@ -49,9 +60,18 @@ const FundingStep: React.FC<FundingStepProps> = ({
         placeholder="Set your goal in STRKs"
         value={name}
         onChange={handleGoal}
-        className="mt-4 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
+        className={`mt-4 p-2 pl-4 border rounded w-full placeholder:text-base ${errors.name ? 'border-red-500' : 'border-black'}`}
         required
+        min={0} 
       />
+
+      {/* Error Messages */}
+      {errors.fundingName && (
+        <p className="mt-5 text-red-500 text-center mb-4">{errors.fundingName}</p>
+      )}
+      {errors.name && (
+        <p className="mt-5 text-red-500 text-center mb-4">{errors.name}</p>
+      )}
     </div>
   );
 };
diff --git a/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx b/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
index 7a570d9..df37ddd 100644
--- a/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
+++ b/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
@@ -8,12 +8,29 @@ const Stages = () => {
   const [fundingName, setFundingName] = useState("");
   const [name, setName] = useState("");
   const [fundingDescription, setFundingDescription] = useState("");
+  const [errors, setErrors] = useState({ fundingName: "", name: "" });
 
   const handleNextStep = () => {
-    if (currentStep === 0 && (!fundingName || !name)) {
-      return;
+    // Reset errors
+    setErrors({ fundingName: "", name: "" });
+
+    // Validate fields
+    let hasErrors = false;
+    if (currentStep === 0) {
+      if (!fundingName) {
+        setErrors((prev) => ({ ...prev, fundingName: "Funding name is required." }));
+        hasErrors = true;
+      }
+      if (!name) {
+        setErrors((prev) => ({ ...prev, name: "The goal is required." }));
+        hasErrors = true;
+      }
+    }
+
+    // If there are no errors, proceed to the next step
+    if (!hasErrors) {
+      setCurrentStep((prev) => (prev === 1 ? 0 : prev + 1));
     }
-    setCurrentStep((prev) => (prev === 1 ? 0 : prev + 1));
   };
 
   const handleSubmit = () => {
@@ -35,6 +52,8 @@ const Stages = () => {
           setFundingName={setFundingName}
           name={name}
           setName={setName}
+          errors={errors} // Pass errors down
+          setErrors={setErrors} // Pass setErrors down
         />
       ) : (
         <DescriptionStep

From 888d14e3f9f754f4afa708188813f1072701e670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josu=C3=A9=20Brenes?= <josuebrenes3005@gmail.com>
Date: Mon, 30 Sep 2024 23:17:32 -0600
Subject: [PATCH 4/4] fix: add back button in new fund fase 2 page

---
 .../modules/newfunding/DescriptionStep.tsx       |  15 ++++++++++++++-
 .../gostarkme-web/public/icons/arrow-right.png   | Bin 0 -> 571 bytes
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 frontend/gostarkme-web/public/icons/arrow-right.png

diff --git a/frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx b/frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx
index 03e0b10..0cd65d8 100644
--- a/frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx
+++ b/frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx
@@ -9,8 +9,9 @@ const DescriptionStep: React.FC<DescriptionStepProps> = ({
   fundingDescription,
   setFundingDescription,
 }) => (
-  <div className="w-11/12 md:w-3/3 lg:w-1/1 font-sans text-2xl font-normal leading-normal text-left">
+  <div className="relative w-11/12 md:w-3/3 lg:w-1/1 font-sans text-2xl font-normal leading-normal text-left">
     <strong>Note:</strong> You can always edit your funding description later ;)
+
     <textarea
       placeholder="Funding description"
       value={fundingDescription}
@@ -18,6 +19,18 @@ const DescriptionStep: React.FC<DescriptionStepProps> = ({
       className="mt-3 p-4 border border-black rounded w-full h-60 resize-none font-sans font-light leading-snug text-left placeholder:text-base placeholder:font-light"
       required
     />
+
+    {/* Back Arrow */}
+    <a
+      href=""
+      className="absolute right-[-270px] top-[-205px]" 
+    >
+      <img 
+        src="/icons/arrow-right.png" 
+        alt="Back Arrow"
+        className="h-8 w-8"
+      />
+    </a>
   </div>
 );
 
diff --git a/frontend/gostarkme-web/public/icons/arrow-right.png b/frontend/gostarkme-web/public/icons/arrow-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..92f3e35ba1d1ab611555123b93c906076605e14b
GIT binary patch
literal 571
zcmV-B0>u4^P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm000XU
z000XU0RWnu7ytkP?MXyIRCt{2+0TnjVI0Ttm&mA5ek`O$EUl#Msj(t4LsuhqXm+G*
zSy-`UVM`YN1T_m;P)IhE*i7;(3$dau<<Y4_({aq4x$e35_B_wKKFiZN@1F1TobUM_
zGMP*!lgY%u5q!i4927Y-_<>O7y@)wlk^P;dWP`+HgT!Qm#AJiSWP`+HgT!Qmh?<Jf
zFkkQ*&u|wvaS6w<6RSle8ycjG2e^#ASQWEusLAKD3ie<{?6RSfmzc$xLC8)IS$1LG
z;UreJDg1T>M5}p>?I{Tde8br`_V@G%m2_S1U~RvpJ0mXr1e;<zslyU^g{`Tr^b4#{
zP5NFNZR$)9((ACT?3;`3X$t3Y9dnrPqx98&3-==3gyP^ige!Q6pFIi}*G(F-bT4cv
z-?jI9ke_ekb+sJn|7Az{G0|OybWtgWCEYJ3O7SKu{uP_GL}$Qb+TD2GK>C^%=?r)f
zKZY9(dhU&eAl)XjOH|jnR`2fbJzadqw$159_I1&Lwa(#EwD@y)U=TON#YI-RIOU_{
z_CJI#h?EUwWmSbAiI`(G!rw72Qi`$9(;DeX5p$wO_>71dD~I_5>$*mPTQvi}s5w<L
z_llZb72!`JXS^cZl>iI>oV<|$`%CFUcHgicCX>lzGMS7&`~vT&<r!Ok5~=_I002ov
JPDHLkV1l1d3vU1b

literal 0
HcmV?d00001