From f521347a0d67048c1f0dc5b0d33d6f326074f29c Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 21 Oct 2024 17:10:28 +0200
Subject: [PATCH 1/3] feat: added validation object, updated input component
 and added email validation

---
 .../src/lib/invoice/form.svelte               | 50 ++++++++++++++-----
 shared/components/input.svelte                | 21 +++++++-
 2 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 3762f3c1..a0fe14ad 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -26,8 +26,17 @@
   export let handleNetworkChange: (chainId: string) => void;
   export let networks;
   export let defaultCurrencies: any = [];
-  export let payeeAddressError = false;
-  export let clientAddressError = false;
+
+  let validationErrors = {
+    payeeAddress: false,
+    clientAddress: false,
+    sellerInfo: {
+      email: false,
+    },
+    buyerInfo: {
+      email: false,
+    },
+  };
 
   let creatorId = "";
 
@@ -35,12 +44,17 @@
     creatorId = formData.creatorId;
   }
 
+  const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    validationErrors[`${type}`].email = !emailRegex.test(email);
+  };
+
   const checkPayeeAddress = () => {
-    payeeAddressError = !checkAddress(formData.payeeAddress);
+    validationErrors.payeeAddress = !checkAddress(formData.payeeAddress);
   };
 
   const checkClientAddress = () => {
-    clientAddressError = !checkAddress(formData.payerAddress);
+    validationErrors.clientAddress = !checkAddress(formData.payerAddress);
   };
 
   const calculateInputWidth = (value: string) => {
@@ -177,7 +191,13 @@
                 type="email"
                 value={formData.sellerInfo?.email}
                 placeholder="Email"
-                handleInput={handleAdditionalInfo}
+                handleInput={(e) => {
+                  handleAdditionalInfo(e);
+                  validateEmail(e?.target?.value, "sellerInfo");
+                }}
+                error={validationErrors.sellerInfo.email
+                  ? "Please enter a valid email"
+                  : ""}
               />
               <Input
                 id="sellerInfo-country"
@@ -227,10 +247,10 @@
             placeholder="Client Wallet Address"
             {handleInput}
             onBlur={checkClientAddress}
+            error={validationErrors.clientAddress
+              ? "Please enter a valid Ethereum address"
+              : ""}
           />
-          {#if clientAddressError}
-            <p class="error-address">Please enter a valid Ethereum address</p>
-          {/if}
           <Accordion title="Add Client Info">
             <div class="invoice-form-info">
               <Input
@@ -266,7 +286,13 @@
                 type="email"
                 value={formData.buyerInfo?.email}
                 placeholder="Email"
-                handleInput={handleAdditionalInfo}
+                handleInput={(e) => {
+                  handleAdditionalInfo(e);
+                  validateEmail(e?.target?.value, "buyerInfo");
+                }}
+                error={validationErrors.buyerInfo.email
+                  ? "Please enter a valid email"
+                  : ""}
               />
               <Input
                 id="buyerInfo-country"
@@ -335,10 +361,10 @@
           placeholder="0x..."
           {handleInput}
           onBlur={checkPayeeAddress}
+          error={validationErrors.payeeAddress
+            ? "Please enter a valid Ethereum address"
+            : ""}
         />
-        {#if payeeAddressError}
-          <p class="error-address">Please enter a valid Ethereum address</p>
-        {/if}
       </div>
     </div>
     <div class="invoice-form-dates">
diff --git a/shared/components/input.svelte b/shared/components/input.svelte
index 053586ca..23ad94e8 100644
--- a/shared/components/input.svelte
+++ b/shared/components/input.svelte
@@ -14,12 +14,14 @@
   export let max = 0;
   export let style = "";
   export let width = "";
+  export let error: string | null = null;
 </script>
 
 <div class="input-wrapper">
   {#if label}
     <label for={id} class="input-label">{label}</label>
   {/if}
+
   <div class={`input-container ${width}`}>
     <div class={`${$$slots.icon ? "text-input-icon" : ""}`}>
       <slot name="icon" />
@@ -33,7 +35,7 @@
         {placeholder}
         maxlength={max}
         on:input={handleInput}
-        class={`textarea-input ${className}`}
+        class={`textarea-input ${className} ${error ? "input-error" : ""}`}
       />
     {:else}
       <input
@@ -46,10 +48,14 @@
         {placeholder}
         on:blur={onBlur}
         on:input={handleInput}
-        class={`text-input ${className} `}
+        class={`text-input ${className} ${error ? "input-error" : ""}`}
       />
     {/if}
   </div>
+
+  {#if error?.length > 0}
+    <p class="error-message">{error}</p>
+  {/if}
 </div>
 
 <style>
@@ -122,4 +128,15 @@
   .input-wrapper .text-input-icon {
     margin-right: 10px;
   }
+
+  /* Error styles */
+  .input-error {
+    border-color: red;
+  }
+
+  .error-message {
+    color: red;
+    font-size: 12px;
+    margin-top: 5px;
+  }
 </style>

From 092cd9a16be9d3aac1544f562be9ca2a04ca068f Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 21 Oct 2024 18:38:10 +0200
Subject: [PATCH 2/3] fix: error color change

---
 shared/components/input.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/shared/components/input.svelte b/shared/components/input.svelte
index 23ad94e8..98edbfc3 100644
--- a/shared/components/input.svelte
+++ b/shared/components/input.svelte
@@ -131,11 +131,11 @@
 
   /* Error styles */
   .input-error {
-    border-color: red;
+    border-color: #e89e14ee;
   }
 
   .error-message {
-    color: red;
+    color: #e89e14ee;
     font-size: 12px;
     margin-top: 5px;
   }

From 90c75f064ca6bb4a9d362237f494fd47e770aba8 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Tue, 22 Oct 2024 09:54:37 +0200
Subject: [PATCH 3/3] fix: updated to onBlure for email validation

---
 packages/create-invoice-form/src/lib/invoice/form.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index a0fe14ad..f58c0686 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -193,8 +193,8 @@
                 placeholder="Email"
                 handleInput={(e) => {
                   handleAdditionalInfo(e);
-                  validateEmail(e?.target?.value, "sellerInfo");
                 }}
+                onBlur={(e) => validateEmail(e?.target?.value, "sellerInfo")}
                 error={validationErrors.sellerInfo.email
                   ? "Please enter a valid email"
                   : ""}
@@ -288,8 +288,8 @@
                 placeholder="Email"
                 handleInput={(e) => {
                   handleAdditionalInfo(e);
-                  validateEmail(e?.target?.value, "buyerInfo");
                 }}
+                onBlur={(e) => validateEmail(e?.target?.value, "buyerInfo")}
                 error={validationErrors.buyerInfo.email
                   ? "Please enter a valid email"
                   : ""}