conversion inputs to components

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html

@@ -38,7 +38,7 @@
         <h3 class="text-lg font-semibold mb-4">Contact the Author of this Listing</h3>
         <p class="text-sm mb-4">Please include your contact info below</p>
         <form class="space-y-4">
-          <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+          <!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
             <div class="w-full sm:w-1/2">
               <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
               <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
@@ -53,8 +53,12 @@
                 class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               />
             </div>
+          </div> -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
+            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
           </div>
-          <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+          <!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
             <div class="w-full sm:w-1/2">
               <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
               <input
@@ -76,8 +80,12 @@
                 class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               />
             </div>
+          </div> -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
+            <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
           </div>
-          <div>
+          <!-- <div>
             <label for="comments" class="block text-sm font-medium text-gray-700">Questions/Comments</label>
             <textarea
               id="comments"
@@ -86,6 +94,9 @@
               [(ngModel)]="mailinfo.sender.comments"
               class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             ></textarea>
+          </div> -->
+          <div>
+            <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
           </div>
           @if(listingUser){
           <div class="flex items-center space-x-2">

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts

@@ -7,6 +7,8 @@ import { lastValueFrom } from 'rxjs';
 import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { BusinessListingCriteria, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
 import { HistoryService } from '../../../services/history.service';
 import { ListingsService } from '../../../services/listings.service';
 import { MailService } from '../../../services/mail.service';
@@ -17,7 +19,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
 @Component({
   selector: 'app-details-business-listing',
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
   providers: [],
   templateUrl: './details-business-listing.component.html',
   styleUrl: '../details.scss',

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html

@@ -176,8 +176,8 @@
           <div class="mt-6">
             <h2 class="text-xl font-semibold mb-4">Contact the Author of this Listing</h2>
             <p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
-            <form>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <form class="space-y-4">
+              <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                 <div>
                   <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
                   <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
@@ -198,7 +198,19 @@
               <div class="mb-4">
                 <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Questions/Comments</label>
                 <textarea id="message" name="message" [(ngModel)]="mailinfo.sender.comments" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
+              </div> -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
+                <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
               </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
+                <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
+              </div>
+              <div>
+                <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
+              </div>
+
               <div class="flex items-center justify-between">
                 @if(listingUser){
                 <div class="flex items-center space-x-2">

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts

@@ -7,6 +7,8 @@ import { lastValueFrom } from 'rxjs';
 import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
 import { HistoryService } from '../../../services/history.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
@@ -19,7 +21,7 @@ import { map2User } from '../../../utils/utils';
 @Component({
   selector: 'app-details-commercial-property-listing',
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
   providers: [],
   templateUrl: './details-commercial-property-listing.component.html',
   styleUrl: '../details.scss',