feat: added angular material and improvements to contact-modal

apps/valor-software-site/project.json

@@ -40,6 +40,7 @@
           "apps/valor-software-site/src/sitemap.xml"
         ],
         "styles": [
+          "@angular/material/prebuilt-themes/indigo-pink.css",
           "apps/valor-software-site/src/assets/styles/styles.scss",
           "apps/valor-software-site/src/assets/styles/prettify-angulario.css"
         ],
@@ -161,4 +162,4 @@
     "route-pages-for-clients",
     "route-pages-blog"
   ]
-}
+}

libs/common-docs/src/common-docs.module.ts

@@ -30,6 +30,7 @@ import { UtilService } from './services/utils.service';
 import { TechnologiesCardComponent } from './components/technologies-card/technologies-card.component';
 import { TechnologiesComponent } from './components/technologies/technologies.component';
 import { CookieConsentBannerComponent } from './components/cookie-consent-banner/cookie-consent-banner.component';
+import { MatSelectModule } from '@angular/material/select';
 
 export { PopoverComponent } from './components/popover/popover.component';
 export { TopMenuComponent } from './components/top-menu/top-menu.component';
@@ -95,7 +96,8 @@ export { CookieConsentBannerComponent } from './components/cookie-consent-banner
 		HttpClientModule,
 		FileUploaderModule,
 		SwiperModule,
-		RecaptchaV3Module
+		RecaptchaV3Module,
+		MatSelectModule
 	],
 	exports: [
 		TopMenuComponent,

libs/common-docs/src/components/contact-modal/contact-modal.component.html

@@ -93,34 +93,30 @@ <h3 class="font-bold text-light_title_col text-3xl lg:text-large leading-44 w-fu
 					</div>
 
 					<div class="row mb-8">
-						<div class="form-control-wrapper">
+						<div class="form-control-wrapper select">
 							<p class="text-grey_font_col text-sm mb-2">Your job role (optional)</p>
-							<input class="text-input p-4"
-							       formControlName="jobRole"
-							       type="text"
-							       placeholder="Enter your job">
-
-							<ng-container *ngFor="let validation of validationMessages.jobRole;">
-								<small class="text-pink"
-								       *ngIf="hasFieldError(validation.type, 'jobRole')">
-									{{ validation.message }}
-								</small>
-							</ng-container>
+							<mat-select class="placeholder text-input" disableRipple
+							            placeholder="Your Job Title"
+							            formControlName="jobRole">
+								<mat-option>None</mat-option>
+								<mat-option [value]="option.value"
+								            *ngFor="let option of jobTitleOptions">
+									{{option.value}}
+								</mat-option>
+							</mat-select>
 						</div>
 
-						<div class="form-control-wrapper">
+						<div class="form-control-wrapper select">
 							<p class="text-grey_font_col text-sm mb-2">Size of the company (optional)</p>
-							<input class="text-input p-4"
-							       formControlName="companySize"
-							       type="text"
-							       placeholder="Enter size of the company">
-
-							<ng-container *ngFor="let validation of validationMessages.companySize;">
-								<small class="text-pink"
-								       *ngIf="hasFieldError(validation.type, 'companySize')">
-									{{ validation.message }}
-								</small>
-							</ng-container>
+							<mat-select class="placeholder text-input" disableRipple
+							            placeholder="Select size of the company"
+							            formControlName="companySize">
+								<mat-option>None</mat-option>
+								<mat-option [value]="option.value"
+								            *ngFor="let option of sizeOfCompanyOptions">
+									{{option.value}}
+								</mat-option>
+							</mat-select>
 						</div>
 					</div>
 

libs/common-docs/src/components/contact-modal/contact-modal.component.scss

@@ -98,3 +98,36 @@ $bp-medium: 768px;
     background-color: #E24E63 !important;
   }
 }
+
+::ng-deep .cdk-overlay-pane .mat-mdc-select-panel {
+  --tw-bg-opacity: 1;
+  background-color: rgba(39, 39, 39, var(--tw-bg-opacity));
+
+  mat-option {
+    color: white;
+  }
+}
+
+::ng-deep .mat-mdc-select-value {
+  color: white;
+
+  .mat-mdc-select-placeholder {
+    opacity: 0.4;
+    color: #a1a1aa;
+  }
+}
+
+::ng-deep .mat-mdc-select-arrow svg {
+  opacity: 0.4;
+  color: #a1a1aa;
+}
+
+::ng-deep .mat-mdc-select-trigger {
+  padding: 16px;
+}
+
+.select {
+  .text-input {
+    padding: 0;
+  }
+}

libs/common-docs/src/components/contact-modal/contact-modal.components.ts

@@ -22,6 +22,10 @@ interface ContactModalForm {
 	['g-recaptcha-response']: FormControl<string | null>;
 }
 
+interface Option {
+	value: string;
+}
+
 const emailRegex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
 const textRegex = /^(?! +$)[a-zA-Z0-9\-_ ']+$/;
 const commentRegex = /^(?!\s*$).+/;
@@ -37,8 +41,49 @@ export class ContactModalComponent implements OnDestroy {
 	showSuccessModalState = false;
 	showErrorModalState = false;
 	submitErrorMessage = '';
+	jobTitleOptions: Option[] = [
+		{
+			value: 'Sales Manager'
+		},
+		{
+			value: 'Product Manager'
+		},
+		{
+			value: 'Project Manager'
+		},
+		{
+			value: 'HR'
+		},
+		{
+			value: 'Designer'
+		},
+		{
+			value: 'Engineer'
+		},
+		{
+			value: 'CEO'
+		},
+		{
+			value: 'Other'
+		},
+	];
+	sizeOfCompanyOptions: Option[] = [
+		{
+			value: '0-50'
+		},
+		{
+			value: '50-200'
+		},
+		{
+			value: '200-500'
+		},
+		{
+			value: '500+'
+		}
+	];
 
 	form = this._createForm();
+	private _isFormSubmitted = false;
 	readonly validationMessages = {
 		firstName: [
 			{ type: 'required', message: 'This field is required field' },
@@ -57,16 +102,6 @@ export class ContactModalComponent implements OnDestroy {
 			{ type: 'maxlength', message: 'Field must be less than 30 characters' },
 			{ type: 'pattern', message: 'Please enter valid data' }
 		],
-		jobRole: [
-			{ type: 'minlength', message: 'Field must be longer than 2 characters' },
-			{ type: 'maxlength', message: 'Field must be less than 30 characters' },
-			{ type: 'pattern', message: 'Please enter valid data' }
-		],
-		companySize: [
-			{ type: 'minlength', message: 'Field must be longer than 2 characters' },
-			{ type: 'maxlength', message: 'Field must be less than 30 characters' },
-			{ type: 'pattern', message: 'Please enter valid data' }
-		],
 		email: [
 			{ type: 'required', message: 'This field is required field' },
 			{ type: 'pattern', message: 'Please enter a valid email' }
@@ -100,7 +135,7 @@ export class ContactModalComponent implements OnDestroy {
 		private readonly sendEmailService: SendEmailService,
 		private readonly recaptchaV3Service: ReCaptchaV3Service,
 		private readonly router: Router,
-		private readonly _cdRef: ChangeDetectorRef
+		private readonly _cdRef: ChangeDetectorRef,
 	) {
 		const element = document.body.querySelector('.grecaptcha-badge') as HTMLElement;
 		if (element) {
@@ -114,11 +149,19 @@ export class ContactModalComponent implements OnDestroy {
 			element.style.display = 'none';
 		}
 
+		this._isFormSubmitted = false;
 		this._internalSub.unsubscribe();
 	}
 
 	closeModal() {
-		this.modalService.close();
+		if (this._isFormSubmitted) {
+			this.modalService.close();
+			return;
+		}
+
+		if (!this._isFormSubmitted && window.confirm('Are you sure you want to close this window? All unsaved data will be lost?')) {
+			this.modalService.close();
+		}
 	}
 
 	onSubmit() {
@@ -132,6 +175,7 @@ export class ContactModalComponent implements OnDestroy {
 				)
 			).subscribe(() => {
 				this.form.reset();
+				this._isFormSubmitted = true;
 				this.showSuccessModal();
 				this.recaptchaV3Service.execute('');
 			}, (error: IError) => {
@@ -192,16 +236,8 @@ export class ContactModalComponent implements OnDestroy {
 				Validators.minLength(2),
 				Validators.pattern(textRegex)
 			]),
-			jobRole: new FormControl<string>('', [
-				Validators.maxLength(30),
-				Validators.minLength(2),
-				Validators.pattern(textRegex)
-			]),
-			companySize: new FormControl<string>('', [
-				Validators.maxLength(30),
-				Validators.minLength(2),
-				Validators.pattern(textRegex)
-			]),
+			jobRole: new FormControl<string>(''),
+			companySize: new FormControl<string>(''),
 			companyServiceName: new FormControl<CompanyServiceName>(this._getDefaultCompanyServiceName()),
 			comment: new FormControl<string>('', [
 				Validators.maxLength(2000),

package.json

@@ -17,10 +17,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "16.0.4",
+    "@angular/cdk": "16.2.12",
     "@angular/common": "16.0.4",
     "@angular/compiler": "16.0.4",
     "@angular/core": "16.0.4",
     "@angular/forms": "16.0.4",
+    "@angular/material": "16.2.12",
     "@angular/platform-browser": "16.0.4",
     "@angular/platform-browser-dynamic": "16.0.4",
     "@angular/router": "16.0.4",
@@ -93,4 +95,4 @@
     "typescript": "5.0.4",
     "xmlbuilder": "^15.1.1"
   }
-}
+}