sakeel-103 · sakeel-103 · Oct 31, 2024 · Oct 30, 2024 · Oct 30, 2024
diff --git a/netlify.toml b/netlify.toml
@@ -1,6 +1,6 @@
 [build]
-  publish = "dist/eccom-prj/browser" 
-  command = "ng build"  
+  publish = "dist/eccom-prj/browser"
+  command = "ng build --prod"
 
 [[redirects]]
   from = "/*"

diff --git a/src/app/components/contact-us/contact-us.component.css b/src/app/components/contact-us/contact-us.component.css
@@ -0,0 +1,77 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f7f7f7;
+  }
+
+  .box {
+    display: flex;
+    width: 80%;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  .div-first {
+    margin-top: 80px;
+    padding-top: 80px; /* Ensures visibility under the navbar */
+    text-align: center;
+
+    background-color: #040507; /* Blue background to highlight the section */
+    padding: 20px 0;
+
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .div-first h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: white;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    margin: 0;
+  }
+
+
+  .left {
+    flex: 1;
+    padding: 20px;
+  }
+
+  .right {
+    flex: 1;
+    padding: 20px;
+  }
+
+  .input-box {
+    position: relative;
+    margin-bottom: 20px;
+  }
+
+  .input-box input,
+  .input-box textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .btn {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .btn:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  .contact-text {
+    margin-top: 10px;
+  }
+
diff --git a/src/app/components/contact-us/contact-us.component.html b/src/app/components/contact-us/contact-us.component.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
+  <link href="contact-us.component.css" rel="stylesheet" />
+
+</head>
+
+<body>
+  <app-navbar></app-navbar>
+  <div class="div-first">
+    <h2>CONTACT US</h2>
+  </div>
+  <div class="container">
+    <div class="box">
+      <div class="left">
+        <h1>We Value Your Feedback!</h1>
+        <p>Use this form to ask questions, give feedback, or suggest improvements.</p>
+      </div>
+      <div class="right">
+        <h2>Get in Touch</h2>
+        <!-- Cross Button -->
+
+        <form [formGroup]="contactForm" id="contactForm" (ngSubmit)="onSubmit()">
+          <div class="input-box">
+            <i class="bx bxs-envelope"></i>
+            <input type="email" id="email" placeholder="Your Email" formControlName="email" required />
+          </div>
+          <div class="input-box">
+            <i class="bx bx-help-circle"></i>
+            <textarea id="question" placeholder="Your Question" formControlName="question" required></textarea>
+          </div>
+          <div class="input-box">
+            <i class="bx bx-comment"></i>
+            <textarea id="feedback" placeholder="Your Feedback" formControlName="feedback"></textarea>
+          </div>
+          <div class="input-box">
+            <i class="bx bx-lightbulb"></i>
+            <textarea id="suggestion" placeholder="Suggestions for Development" formControlName="suggestion"></textarea>
+          </div>
+
+          <button type="submit" class="btn" [disabled]="!contactForm.valid">
+            Submit
+          </button>
+          <p class="contact-text">
+            Need help? <a routerLink="/help">Visit our Help Center</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/src/app/components/contact-us/contact-us.component.spec.ts b/src/app/components/contact-us/contact-us.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactUsComponent } from './contact-us.component';
+
+describe('ContactUsComponent', () => {
+  let component: ContactUsComponent;
+  let fixture: ComponentFixture<ContactUsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactUsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/contact-us/contact-us.component.ts b/src/app/components/contact-us/contact-us.component.ts
@@ -0,0 +1,66 @@
+import { Component, Inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import {  OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NavbarComponent } from '../navbar/navbar.component';
+
+import {
+  ReactiveFormsModule,
+  FormBuilder,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { Router } from '@angular/router';
+ // Import CommonModule
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-contact-us',
+  standalone: true,
+  templateUrl: './contact-us.component.html',
+  styleUrls: ['./contact-us.component.css'],
+  imports: [RouterModule, ReactiveFormsModule, CommonModule,NavbarComponent,FormsModule], // Add CommonModule here
+})
+export class ContactUsComponent {
+  contactForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private toastr: ToastrService,
+    @Inject(AuthService) private contactService: AuthService,
+    private router: Router
+  ) {
+    this.contactForm = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      question: ['', Validators.required],
+      feedback: [''],
+      suggestion: ['']
+    });
+  }
+
+  onSubmit() {
+    const contactData = this.contactForm.value;
+
+    if (this.contactForm.valid) {
+      this.contactService.submitContactForm(contactData).subscribe(
+        (response: any) => {
+          console.log('Form submitted successfully!', response);
+          this.toastr.success('Thank you for your feedback!', 'Success');
+          this.resetForm();
+        },
+        (error: any) => {
+          console.error('Error submitting form:', error);
+          this.toastr.error('There was an error submitting your form. Please try again later.', 'Error');
+        }
+      );
+    } else {
+      this.toastr.error('Please fill out the form correctly.', 'Error');
+    }
+  }
+
+  resetForm() {
+    this.contactForm.reset();
+  }
+}