From 5ced66195790643f0451607acdb4d7e73f1d9f70 Mon Sep 17 00:00:00 2001
From: Ivan Mitev <imitev@solvedeu.com>
Date: Tue, 21 Jul 2026 14:25:29 +0300
Subject: [PATCH 1/2] FEAT: Contact us support type

---
 .../contact-us/contact-us-form.component.css  | 52 +++++++++++++++++++
 .../contact-us/contact-us-form.component.html | 28 ++++++++++
 .../contact-us-form.component.spec.ts         |  3 ++
 .../contact-us/contact-us-form.component.ts   |  9 +++-
 src/assets/i18n/en.json                       | 10 ++++
 src/assets/i18n/es.json                       | 10 ++++
 6 files changed, 111 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/contact-us/contact-us-form.component.css b/src/app/pages/contact-us/contact-us-form.component.css
index eefb9e36..e2c8d182 100644
--- a/src/app/pages/contact-us/contact-us-form.component.css
+++ b/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;
diff --git a/src/app/pages/contact-us/contact-us-form.component.html b/src/app/pages/contact-us/contact-us-form.component.html
index dbec228e..1277aacb 100644
--- a/src/app/pages/contact-us/contact-us-form.component.html
+++ b/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">
diff --git a/src/app/pages/contact-us/contact-us-form.component.spec.ts b/src/app/pages/contact-us/contact-us-form.component.spec.ts
index 3197ecee..c67fa523 100644
--- a/src/app/pages/contact-us/contact-us-form.component.spec.ts
+++ b/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: "",
diff --git a/src/app/pages/contact-us/contact-us-form.component.ts b/src/app/pages/contact-us/contact-us-form.component.ts
index 3e9853b5..a7d914cd 100644
--- a/src/app/pages/contact-us/contact-us-form.component.ts
+++ b/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: "",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 4818fcd8..7370816a 100644
--- a/src/assets/i18n/en.json
+++ b/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"
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 4818fcd8..7370816a 100644
--- a/src/assets/i18n/es.json
+++ b/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"

From bde281b2ff65ac5ea40f0486c4a371c76fb18575 Mon Sep 17 00:00:00 2001
From: Ivan Mitev <imitev@solvedeu.com>
Date: Wed, 22 Jul 2026 00:26:41 +0300
Subject: [PATCH 2/2] FIX: Add same CTA on customers page as the one on the
 providers page

---
 ...ding-customers-procure-steps.component.css | 39 +++++++++++++++++++
 ...ing-customers-procure-steps.component.html |  6 +++
 ...nding-customers-procure-steps.component.ts |  4 +-
 .../landing-page-customers.component.html     |  2 +-
 src/assets/i18n/en.json                       |  3 +-
 src/assets/i18n/es.json                       |  3 +-
 6 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css
index 3c2103b8..22c27fbf 100644
--- a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css
+++ b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css
@@ -82,6 +82,45 @@
   color: #0b1528;
 }
 
+.procure-steps-cta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  margin-top: 32px;
+  text-align: center;
+}
+
+.procure-steps-cta__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 12px 28px;
+  border-radius: 6px;
+  background: #2d58a7;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.procure-steps-cta__button:hover {
+  background: #18b5d9;
+  color: #ffffff;
+}
+
+@media (min-width: 1024px) {
+  .procure-steps-cta {
+    margin-top: 48px;
+    gap: 24px;
+  }
+}
+
 .procure-step-connector {
   display: none;
   width: 56px;
diff --git a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html
index 137f9f15..62533802 100644
--- a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html
+++ b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html
@@ -34,5 +34,11 @@ <h3 class="procure-step-title">
     }
     }
   </div>
+
+  <div class="procure-steps-cta">
+    <a [href]="url()" class="procure-steps-cta__button">
+      {{ 'LANDINGPAGE.customers.procureSteps._ctaButton' | translate }}
+    </a>
+  </div>
   </div>
 </section>
diff --git a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts
index 8f894883..add0b1dc 100644
--- a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts
+++ b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, input } from "@angular/core";
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faBagShopping, faHandshake, faMagnifyingGlass, faUser } from '@fortawesome/pro-solid-svg-icons';
 import { TranslateModule } from '@ngx-translate/core';
@@ -17,6 +17,8 @@ type ProcureStep = {
   styleUrl: "./landing-customers-procure-steps.component.css"
 })
 export class LandingCustomersProcureStepsComponent {
+  url = input.required<string>();
+
   steps: ProcureStep[] = [
     { key: 'step1', icon: faUser },
     { key: 'step2', icon: faMagnifyingGlass },
diff --git a/src/app/pages/landing-pages/customers/landing-page-customers.component.html b/src/app/pages/landing-pages/customers/landing-page-customers.component.html
index 65c60249..4643be9c 100644
--- a/src/app/pages/landing-pages/customers/landing-page-customers.component.html
+++ b/src/app/pages/landing-pages/customers/landing-page-customers.component.html
@@ -3,6 +3,6 @@
 <app-landingpage-customers-why-join></app-landingpage-customers-why-join>
 <app-landingpage-customers-right-for-you></app-landingpage-customers-right-for-you>
 <app-landing-customers-buy-options></app-landing-customers-buy-options>
-<app-landing-customers-procure-steps></app-landing-customers-procure-steps>
+<app-landing-customers-procure-steps [url]="ONBOARDING_CUSTOMERS_LINK"></app-landing-customers-procure-steps>
 <app-landing-customers-faqs></app-landing-customers-faqs>
 <app-landing-customers-finalCta [url]="ONBOARDING_CUSTOMERS_LINK"></app-landing-customers-finalCta>
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 7370816a..a6a3ca09 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -531,7 +531,8 @@
           "step4": {
             "_title": "Engage providers and complete procurement"
           }
-        }
+        },
+        "_ctaButton": "Start your onboarding journey"
       },
       "buyOptions": {
         "_title": "Choose how you buy",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 7370816a..a6a3ca09 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -531,7 +531,8 @@
           "step4": {
             "_title": "Engage providers and complete procurement"
           }
-        }
+        },
+        "_ctaButton": "Start your onboarding journey"
       },
       "buyOptions": {
         "_title": "Choose how you buy",