FEAT: Contact us support type

src/app/pages/contact-us/contact-us-form.component.css

@@ -121,6 +121,58 @@
   color: #858b99;
 }
 
+.contact-select-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.contact-select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #bcbfc7;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #131b25;
+  padding: 8px 40px 8px 12px;
+  font-size: clamp(0.95rem, 0.92rem + 0.1vw, 1rem);
+  line-height: 24px;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.contact-select-placeholder {
+  color: #858b99;
+}
+
+.contact-select:hover {
+  border-color: #9da6b2;
+}
+
+.contact-select:focus {
+  border-color: #3d71cc;
+  box-shadow: 0 0 0 3px rgba(61, 113, 204, 0.14);
+}
+
+.contact-select-wrap::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  width: 10px;
+  height: 10px;
+  transform: translateY(-70%) rotate(45deg);
+  border-right: 2px solid #4c5a6b;
+  border-bottom: 2px solid #4c5a6b;
+  pointer-events: none;
+}
+
 .contact-input:hover,
 .contact-textarea:hover {
   border-color: #9da6b2;

src/app/pages/contact-us/contact-us-form.component.html

@@ -33,6 +33,34 @@ <h3 class="text-[24px] font-bold text-[#14274A]">
       </div>
 
       <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="flex flex-col gap-6">
+        <div class="contact-field">
+          <label class="contact-label">
+            {{ "ContactUs.fields.supportType.label" | translate }}
+          </label>
+
+          <div class="contact-select-wrap">
+            <select formControlName="supportType" class="contact-select"
+              [class.contact-input-error]="hasError('supportType')"
+              [class.contact-select-placeholder]="!f.supportType.value">
+              <option value="" disabled>
+                {{ "ContactUs.fields.supportType.placeholder" | translate }}
+              </option>
+
+              @for (option of supportOptions; track option) {
+              <option [value]="option">
+                {{ "ContactUs.fields.supportType.options." + option | translate }}
+              </option>
+              }
+            </select>
+          </div>
+
+          @if (hasError('supportType')) {
+          <span class="contact-error">
+            {{ "ContactUs.validation.required" | translate }}
+          </span>
+          }
+        </div>
+
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div class="contact-field">
             <label class="contact-label">

src/app/pages/contact-us/contact-us-form.component.spec.ts

@@ -15,6 +15,7 @@ describe("ContactUsFormComponent", () => {
   let router: Router;
 
   const validFormValue: IContactUs = {
+    supportType: "technical",
     firstName: "Luigi",
     lastName: "Borriello",
     email: "luigi@test.com",
@@ -65,6 +66,7 @@ describe("ContactUsFormComponent", () => {
 
   it("should initialize form with default values", () => {
     expect(component.form.getRawValue()).toEqual({
+      supportType: "",
       firstName: "",
       lastName: "",
       email: "",
@@ -188,6 +190,7 @@ describe("ContactUsFormComponent", () => {
     expect(component.submitted).toBeFalse();
     expect(component.submittedSuccessfully).toBeFalse();
     expect(component.form.getRawValue()).toEqual({
+      supportType: "",
       firstName: "",
       lastName: "",
       email: "",

src/app/pages/contact-us/contact-us-form.component.ts

@@ -15,6 +15,7 @@ import { Subject, takeUntil } from 'rxjs';
 import { ContactUsService } from '../../services/contactUs.service';
 
 export interface IContactUs {
+  supportType: string;
   firstName: string;
   lastName: string;
   email: string;
@@ -53,7 +54,10 @@ export class ContactUsFormComponent implements OnDestroy {
   submitted = false;
   submittedSuccessfully = false;
 
+  readonly supportOptions: string[] = ["general", "technical", "onboarding", "legal"];
+
   form: FormGroup<IContactUsForm> = this.fb.nonNullable.group({
+    supportType: ["", [Validators.required]],
     firstName: ["", [Validators.required]],
     lastName: ["", [Validators.required]],
     email: ["", [Validators.required, Validators.email]],
@@ -82,7 +86,9 @@ export class ContactUsFormComponent implements OnDestroy {
     }
 
 
-    this.contactUsService.sendEmail(this.form.getRawValue()).pipe(takeUntil(this.unsub)).subscribe({
+    const rawValue = this.form.getRawValue();
+
+    this.contactUsService.sendEmail(rawValue).pipe(takeUntil(this.unsub)).subscribe({
       next: () => {
         this.submittedSuccessfully = true;
       },
@@ -93,6 +99,7 @@ export class ContactUsFormComponent implements OnDestroy {
     this.submittedSuccessfully = false;
     this.submitted = false;
     this.form.reset({
+      supportType: "",
       firstName: "",
       lastName: "",
       email: "",

src/assets/i18n/en.json

@@ -245,6 +245,16 @@
       "subtitle": "Fill out the form and our team will be in touch as soon as possible."
     },
     "fields": {
+      "supportType": {
+        "label": "How can we help?",
+        "placeholder": "Select the type of support you need",
+        "options": {
+          "general": "General inquiries",
+          "technical": "Technical support",
+          "onboarding": "Onboarding support",
+          "legal": "Legal support"
+        }
+      },
       "firstName": {
         "label": "First name",
         "placeholder": "Enter your first name"

src/assets/i18n/es.json

@@ -245,6 +245,16 @@
       "subtitle": "Fill out the form and our team will be in touch as soon as possible."
     },
     "fields": {
+      "supportType": {
+        "label": "How can we help?",
+        "placeholder": "Select the type of support you need",
+        "options": {
+          "general": "General inquiries",
+          "technical": "Technical support",
+          "onboarding": "Onboarding support",
+          "legal": "Legal support"
+        }
+      },
       "firstName": {
         "label": "First name",
         "placeholder": "Enter your first name"