From f58448679ddd867619db0d16f517f509537cb0fe Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Fri, 2 Aug 2024 20:18:19 +0200
Subject: [PATCH] conversion to components part 2

---
 .../subscription/email-us/email-us.component.html   | 13 ++++++++++++-
 .../subscription/email-us/email-us.component.ts     |  4 +++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/bizmatch/src/app/pages/subscription/email-us/email-us.component.html b/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
index 3880682..807908f 100644
--- a/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
+++ b/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
@@ -2,7 +2,7 @@
   <div class="bg-white rounded-lg shadow-md p-6">
     <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
     <form #contactForm="ngForm" class="space-y-4">
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div>
           <label for="name" class="block text-sm font-medium text-gray-700">Your name</label>
           <input
@@ -47,6 +47,17 @@
           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
           required
         ></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>
         <button
diff --git a/bizmatch/src/app/pages/subscription/email-us/email-us.component.ts b/bizmatch/src/app/pages/subscription/email-us/email-us.component.ts
index 4f56a52..4ae32dc 100644
--- a/bizmatch/src/app/pages/subscription/email-us/email-us.component.ts
+++ b/bizmatch/src/app/pages/subscription/email-us/email-us.component.ts
@@ -4,6 +4,8 @@ import { KeycloakService } from 'keycloak-angular';
 import { User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { 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 { MailService } from '../../../services/mail.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
@@ -11,7 +13,7 @@ import { map2User } from '../../../utils/utils';
 @Component({
   selector: 'app-email-us',
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
   providers: [],
   templateUrl: './email-us.component.html',
   styleUrl: './email-us.component.scss',