Bug Fix: #91, #89

bizmatch/src/app/app.component.html

@@ -1,9 +1,11 @@
 <!-- <div class="container"> -->
-<div [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }">
+<div class="min-h-screen flex flex-col" [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }">
   @if (actualRoute !=='home'){
   <header></header>
   }
+  <main class="flex-grow">
     <router-outlet></router-outlet>
+  </main>
 
   <app-footer></app-footer>
 </div>

bizmatch/src/app/components/footer/footer.component.html

@@ -1,35 +1,10 @@
-<!-- <div class="surface-0 px-4 py-4 md:px-6 lg:px-8">
-  <div class="surface-0">
-    <div class="grid">
-      <div class="col-12 md:col-3 md:mb-0 mb-3 cursor-pointer" routerLink="/home">
-        <img src="assets/images/header-logo.png" alt="footer sections" height="30" class="mr-3" />
-        <div class="text-500">© 2024 Bizmatch All rights reserved.</div>
-      </div>
-      <div class="col-12 md:col-3">
-        <div class="text-black mb-4 flex flex-wrap" style="max-width: 290px">BizMatch, Inc., 1001 Blucher Street, Corpus Christi, Texas 78401</div>
-        <div class="text-black mb-3"><i class="text-white pi pi-phone surface-800 border-round p-1 mr-2"></i>1-800-840-6025</div>
-        <div class="text-black mb-3"><i class="text-white pi pi-inbox surface-800 border-round p-1 mr-2"></i>info&#64;bizmatch.net</div>
-      </div>
-      <div class="col-12 md:col-3 text-500">
-        <div class="text-black font-bold line-height-3 mb-3">Legal</div>
-        <a class="line-height-3 block cursor-pointer mb-2" (click)="termsVisible = true">Terms of use</a>
-        <a class="line-height-3 block cursor-pointer mb-2" (click)="privacyVisible = true">Privacy statement</a>
-      </div>
-      <div class="col-12 md:col-3 text-500">
-        <div class="text-black font-bold line-height-3 mb-3">Actions</div>
-        <a *ngIf="!keycloakService.isLoggedIn()" (click)="login()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a>
-        <a *ngIf="!keycloakService.isLoggedIn()" (click)="register()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Register</a>
-        <a *ngIf="keycloakService.isLoggedIn()" [routerLink]="['/account']" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a>
-        <a *ngIf="keycloakService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="keycloakService.logout()">Log Out</a>
-      </div>
-    </div>
-  </div>
-</div> -->
-
 <footer class="bg-white px-4 py-2 md:px-6 mt-auto w-full">
   <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
     <div class="flex flex-col lg:flex-row items-center mb-4 lg:mb-0">
-      <img src="assets/images/header-logo.png" alt="BizMatch Logo" class="h-8 mb-2 lg:mb-0 lg:mr-4" />
+      <!-- <img src="assets/images/header-logo.png" alt="BizMatch Logo" class="h-8 mb-2 lg:mb-0 lg:mr-4" /> -->
+      <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/images/header-logo.png" class="h-8" class="h-8 mb-2 lg:mb-0 lg:mr-4" />
+      </a>
       <p class="text-sm text-gray-600 text-center lg:text-left">© {{ currentYear }} Bizmatch All rights reserved.</p>
     </div>
 

bizmatch/src/app/pages/subscription/email-us/email-us.component.html

@@ -2,59 +2,15 @@
   <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>
-          <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 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-            required
-          />
-        </div>
-        <div>
-          <label for="email" class="block text-sm font-medium text-gray-700">Your Email</label>
-          <input
-            type="email"
-            id="email"
-            name="email"
-            [(ngModel)]="mailinfo.sender.email"
-            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
-          />
-        </div>
-      </div>
-      <div>
-        <label for="phone" class="block text-sm font-medium text-gray-700">Your Phone</label>
-        <input
-          type="tel"
-          id="phone"
-          name="phone"
-          [(ngModel)]="mailinfo.sender.phoneNumber"
-          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
-        />
-      </div>
-      <div>
-        <label for="message" class="block text-sm font-medium text-gray-700">How can we help you ?</label>
-        <textarea
-          id="message"
-          name="message"
-          rows="4"
-          [(ngModel)]="mailinfo.sender.comments"
-          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" mask="(000) 000-0000"></app-validated-input>
-        <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
+        <div>
+          <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state" [items]="selectOptions?.states"></app-validated-ng-select>
+        </div>
       </div>
       <div>
         <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
@@ -71,37 +27,3 @@
     </form>
   </div>
 </div>
-<!-- <div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
-  <div class="p-fluid flex flex-column lg:flex-row">
-    <menu-account></menu-account>
-    <div class="surface-card p-5 shadow-2 border-round flex-auto">
-      <div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
-      <p-divider></p-divider>
-      <div class="flex gap-5 flex-column-reverse md:flex-row">
-        <div class="flex-auto p-fluid formgrid">
-          <div class="grid">
-            <div class="mb-4 col-12 md:col-6">
-              <label for="name" class="block font-medium text-900 mb-2">Your name</label>
-              <input [ngClass]="{ 'ng-invalid': containsError('name'), 'ng-dirty': containsError('name') }" name="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
-            </div>
-            <div class="mb-4 col-12 md:col-6">
-              <label for="email" class="block font-medium text-900 mb-2">Your Email</label>
-              <input name="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
-            </div>
-          </div>
-          <div class="mb-4">
-            <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone</label>
-            <p-inputMask id="phoneNumber" name="phoneNumber" mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
-          </div>
-          <div class="mb-4">
-            <label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label>
-            <textarea name="help" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="mailinfo.sender.comments"></textarea>
-          </div>
-          <div>
-            <button pButton pRipple label="Submit" class="w-auto" (click)="mail()"></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div> -->

bizmatch/src/app/pages/subscription/email-us/email-us.component.scss

@@ -0,0 +1,7 @@
+:host ::ng-deep .ng-select-container {
+  height: 42px !important;
+  border-radius: 0.5rem;
+  .ng-value-container .ng-input {
+    top: 10px;
+  }
+}

bizmatch/src/app/pages/subscription/email-us/email-us.component.ts

@@ -6,16 +6,18 @@ import { ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatc
 import { environment } from '../../../../environments/environment';
 import { MessageService } from '../../../components/message/message.service';
 import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
 import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
 import { ValidationMessagesService } from '../../../components/validation-messages.service';
 import { MailService } from '../../../services/mail.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
 import { createMailInfo, map2User } from '../../../utils/utils';
 @Component({
   selector: 'app-email-us',
   standalone: true,
-  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent],
   providers: [],
   templateUrl: './email-us.component.html',
   styleUrl: './email-us.component.scss',
@@ -31,6 +33,7 @@ export class EmailUsComponent {
     public keycloakService: KeycloakService,
     private validationMessagesService: ValidationMessagesService,
     private messageService: MessageService,
+    public selectOptions: SelectOptionsService,
   ) {
     this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
   }