Merge branch 'main' of github.com:RequestNetwork/web-components into 143-add-builderid-and-createdwith-to-request-invoicing

Author: sstefdev

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -26,21 +26,35 @@
   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 = "";
 
   $: {
     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) => {
@@ -178,7 +192,13 @@
                 type="email"
                 value={formData.sellerInfo?.email}
                 placeholder="Email"
-                handleInput={handleAdditionalInfo}
+                handleInput={(e) => {
+                  handleAdditionalInfo(e);
+                }}
+                onBlur={(e) => validateEmail(e?.target?.value, "sellerInfo")}
+                error={validationErrors.sellerInfo.email
+                  ? "Please enter a valid email"
+                  : ""}
               />
               <Input
                 id="sellerInfo-country"
@@ -228,10 +248,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
@@ -267,7 +287,13 @@
                 type="email"
                 value={formData.buyerInfo?.email}
                 placeholder="Email"
-                handleInput={handleAdditionalInfo}
+                handleInput={(e) => {
+                  handleAdditionalInfo(e);
+                }}
+                onBlur={(e) => validateEmail(e?.target?.value, "buyerInfo")}
+                error={validationErrors.buyerInfo.email
+                  ? "Please enter a valid email"
+                  : ""}
               />
               <Input
                 id="buyerInfo-country"
@@ -336,10 +362,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">

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: #e89e14ee;
+  }
+
+  .error-message {
+    color: #e89e14ee;
+    font-size: 12px;
+    margin-top: 5px;
+  }
 </style>