feat(contact-form): redesigned get contact modal

apps/valor-software-site/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { articlesList, articlesRefactoringTitlesList } from '../../../../assets/
 import { projectsList } from '../assets/portfolio/portfolio.list';
 import { linksFromOldSite } from '../../../../assets/articles/brokenRoutes';
 import { NotFoundComponent } from './404.component';
+import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
 
 @NgModule({
 	declarations: [
@@ -29,13 +30,15 @@ import { NotFoundComponent } from './404.component';
 		CommonDocsModule,
 		BrowserAnimationsModule,
 		ScullyLibModule,
+		RecaptchaV3Module,
 	],
 	providers: [
 		SeoService,
 		{ provide: ARTICLES_LIST, useValue: articlesList },
 		{ provide: ARTICLES_REFACTORED_TITLE_LIST, useValue: articlesRefactoringTitlesList },
 		{ provide: PORTFOLIO_LIST, useValue: projectsList },
 		{ provide: OLD_ROUTES_FROM_OLD_SITE, useValue: linksFromOldSite },
+		{ provide: RECAPTCHA_V3_SITE_KEY, useValue: '6LeXDiUoAAAAABZ2FU4l2GZTJ0v5otDAQkC3UZxs' }
 	],
 	bootstrap: [AppComponent],
 })

apps/valor-software-site/src/assets/styles/variables.scss

@@ -1,6 +1,13 @@
 $light_font_col: #E1E1E1;
 $light_title_col: #E3E3E3;
 
+/* Breakpoints */
+$bp-small: 640px;
+$bp-medium: 768px;
+$bp-large: 1024px;
+$bp-xlarge: 1280px;
+$bp-2xlarge: 1536px;
+
 :root {
   --light_font_col: #E1E1E1;
 }

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

@@ -4,12 +4,12 @@ import { PopoverComponent } from './components/popover/popover.component';
 import { TopMenuComponent } from './components/top-menu/top-menu.component';
 import { RouterModule } from '@angular/router';
 import { ImgHoverDirective } from './directives/img-hover.directive';
-import { ContactModalComponent } from './components/contact-modal/contactModal.components';
+import { ContactModalComponent } from './components/contact-modal/contact-modal.components';
 import { ModalService } from './services/modal.service';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { FileUploaderModule } from '@valor-software/file-uploader';
-import { SendEmailService } from './services/senEmail.service';
+import { SendEmailService } from './services/send-email.service';
 import { ResultModalComponent } from './components/result-modal/result-modal.component';
 import { AppFooterComponent } from './components/app-footer/app-footer.component';
 import { ServicesBlockComponent } from './components/services_block/services-block.component';
@@ -37,7 +37,7 @@ export { TopMenuComponent } from './components/top-menu/top-menu.component';
 export { ImgHoverDirective } from './directives/img-hover.directive';
 export { AppFooterComponent } from './components/app-footer/app-footer.component';
 export { ServicesBlockComponent } from './components/services_block/services-block.component';
-export { ContactModalComponent } from './components/contact-modal/contactModal.components';
+export { ContactModalComponent } from './components/contact-modal/contact-modal.components';
 export { ModalService } from './services/modal.service';
 export { BreadCrumbsComponent } from './components/breadCrumbs/breadCrumbs.component';
 export { ShowHideDirective } from './directives/showHide.directive';

libs/common-docs/src/components/app-footer/app-footer.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ModalService } from '../../services/modal.service';
-import { ContactModalComponent } from '../contact-modal/contactModal.components';
+import { ContactModalComponent } from '../contact-modal/contact-modal.components';
 import { FormControl, Validators } from '@angular/forms';
 
 @Component({

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

@@ -0,0 +1,266 @@
+<div class="contact-modal overflow-y-hidden lg:max-h-screen"
+     [class.opacity-100]="(modalService.modalDisplayState | async) === true"
+     [class.opacity-0]="(modalService.modalDisplayState | async) === false"
+     style="transition: opacity ease-in .3s">
+	<div class="backdrop backdrop_show grey" (click)="closeModal()"></div>
+
+	<div
+			class="pink-scroll bg-grey_bg lg:bg-grey_2727_bg lg:mx-auto rounded z-10 p-10 lg:max-w-90% lg:max-h-90% xl:max-w-1010 absolute lg:relative top-0 overflow-y-auto overflow-x-hidden w-full h-full">
+
+		<div class="flex items-center text-center mb-10">
+			<h3 class="font-bold text-light_title_col text-3xl lg:text-large leading-44 w-full">We'd love to hear from
+			                                                                                    you!</h3>
+
+			<div class="flex justify-end w-6">
+				<img src="assets/img/icons/close.png" alt="close icon" class="cursor-pointer w-4 h-4 lg:w-auto lg:h-auto"
+				     (click)="closeModal()">
+			</div>
+		</div>
+
+		<div *ngIf="!showSuccessModalState && !showErrorModalState"
+		     class="flex flex-col items-center justify-center">
+
+			<div [formGroup]="form"
+			     class="flex flex-col lg:max-w-2xl w-full">
+
+				<div class="w-full">
+
+					<div class="row mb-8">
+						<div class="form-control-wrapper">
+							<span class="text-grey_font_col text-sm mb-2">First Name</span>
+							<input class="text-input p-4"
+							       formControlName="firstName"
+							       type="text"
+							       placeholder="Enter first name"
+							       required>
+
+							<ng-container *ngFor="let validation of validationMessages.firstName;">
+								<small class="text-pink"
+								       *ngIf="hasFieldError(validation.type, 'firstName')">
+									{{ validation.message }}
+								</small>
+							</ng-container>
+						</div>
+
+						<div class="form-control-wrapper">
+							<p class="text-grey_font_col text-sm mb-2">Last Name</p>
+							<input class="text-input p-4"
+							       formControlName="lastName"
+							       type="text"
+							       placeholder="Enter last name"
+							       required>
+
+							<ng-container *ngFor="let validation of validationMessages.lastName;">
+								<small class="text-pink"
+								       *ngIf="hasFieldError(validation.type, 'lastName')">
+									{{ validation.message }}
+								</small>
+							</ng-container>
+						</div>
+
+					</div>
+
+					<div class="row mb-8">
+						<div class="form-control-wrapper">
+							<p class="text-grey_font_col text-sm mb-2">Work Email</p>
+							<input class="text-input p-4"
+							       type="email"
+							       formControlName="email"
+							       placeholder="Enter email"
+							       required>
+
+							<ng-container *ngFor="let validation of validationMessages.email;">
+								<small class="text-pink" *ngIf="hasFieldError(validation.type, 'email')">
+									{{ validation.message }}
+								</small>
+							</ng-container>
+						</div>
+
+						<div class="form-control-wrapper">
+							<p class="text-grey_font_col text-sm mb-2">Company name (optional)</p>
+							<input class="text-input p-4"
+							       formControlName="companyName"
+							       type="text"
+							       placeholder="Enter company name">
+
+							<ng-container *ngFor="let validation of validationMessages.companyName;">
+								<small class="text-pink"
+								       *ngIf="hasFieldError(validation.type, 'companyName')">
+									{{ validation.message }}
+								</small>
+							</ng-container>
+						</div>
+					</div>
+
+					<div class="row mb-8">
+						<div class="form-control-wrapper">
+							<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>
+						</div>
+
+						<div class="form-control-wrapper">
+							<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>
+						</div>
+					</div>
+
+					<div class="flex flex-col mb-6">
+						<p class="text-light_title_col text-xl mb-6">How can we help you?</p>
+
+						<div class="row mb-4">
+							<label for="service"
+							       class="text-input radio-input">
+								<input class="opacity-0 w-px h-px"
+								       type="radio"
+								       id="service"
+								       formControlName="companyServiceName"
+								       [value]="CompanyServiceName.Service">
+								<div class="radio-button"
+								     [class.checked]="form.controls.companyServiceName.value === CompanyServiceName.Service"></div>
+								<p class="ml-2.5">Services</p>
+							</label>
+
+							<label for="career"
+							       class="text-input radio-input ">
+								<input class="opacity-0 w-px h-px"
+								       type="radio"
+								       id="career"
+								       formControlName="companyServiceName"
+								       [value]="CompanyServiceName.Career">
+								<div class="radio-button"
+								     [class.checked]="form.controls.companyServiceName.value === CompanyServiceName.Career"></div>
+								<p class="ml-2.5">Careers</p>
+							</label>
+						</div>
+
+						<div class="row">
+							<label for="partner"
+							       class="text-input radio-input ">
+								<input class="opacity-0 w-px h-px"
+								       type="radio"
+								       id="partner"
+								       formControlName="companyServiceName"
+								       [value]="CompanyServiceName.Partner">
+								<div class="radio-button"
+								     [class.checked]="form.controls.companyServiceName.value === CompanyServiceName.Partner"></div>
+								<p class="ml-2.5">Partnerships & Sales</p>
+							</label>
+
+							<label for="other"
+							       class="text-input radio-input ">
+								<input class="opacity-0 w-px h-px"
+								       type="radio"
+								       id="other"
+								       formControlName="companyServiceName"
+								       [value]="CompanyServiceName.Other">
+								<div class="radio-button"
+								     [class.checked]="form.controls.companyServiceName.value === CompanyServiceName.Other"></div>
+								<p class="ml-2.5">Other</p>
+							</label>
+						</div>
+
+					</div>
+
+					<div class="flex flex-col">
+						<p class="text-grey_font_col text-sm mb-2.5">Comment (optional)</p>
+						<textarea class="text-input h-22 resize-none"
+						          formControlName="comment"
+						          placeholder="Your comment"
+						></textarea>
+						<ng-container *ngFor="let validation of validationMessages.comment;">
+							<small class="text-pink" *ngIf="hasFieldError(validation.type, 'comment')">
+								{{ validation.message }}
+							</small>
+						</ng-container>
+					</div>
+
+					<div class="mt-6">
+						<label for="privacy-policy"
+						       class="checkbox-label">
+							<input class="checkbox"
+							       type="checkbox"
+							       id="privacy-policy"
+							       formControlName="hasAcceptedPrivacyPolicy"
+							       required>
+							<p class="ml-2.5">I accept your
+								<a class="link"
+								   href="https://valor-software.com/privacy-policy"
+								   target="_blank">Privacy policy
+								</a>
+							</p>
+						</label>
+
+						<label for="contact-agreement"
+						       class="checkbox-label mt-4">
+							<input class="checkbox"
+							       type="checkbox"
+							       id="contact-agreement"
+							       formControlName="hasAcceptedContactAgreement"
+							       required>
+							<p class="ml-2.5">I agree to be contacted by provided email</p>
+						</label>
+					</div>
+
+					<button class="g-recaptcha btn-pink m-auto flex justify-center w-full mt-10"
+					        (click)="onSubmit()"
+					        [disabled]="!form.valid">Submit
+					</button>
+				</div>
+
+				<div class="flex flex-col items-start mt-10 md:flex-row md:justify-between">
+					<div class="flex flex-col mb-4 md:mb-0">
+						<span class="text-xl text-grey_font_col">Careers:</span>
+						<span class="hover:text-pink text-xl cursor-pointer text-light_font_col">
+                  <a href="mailto:[email protected]">[email protected]</a>
+					</span>
+					</div>
+
+					<div class="flex flex-col">
+						<span class="text-xl text-grey_font_col">Sales:</span>
+						<span class="hover:text-pink text-xl underline cursor-pointer text-light_font_col">
+                  <a href="mailto:[email protected]">[email protected]</a>
+					</span>
+					</div>
+				</div>
+
+			</div>
+		</div>
+
+
+		<div *ngIf="showSuccessModalState || showErrorModalState"
+		     class="w-full h-full md:h-5/6 flex flex-col place-content-around items-center">
+			<div class="invisible"></div>
+			<result-modal [type]="showSuccessModalState ? 'success' : 'error'"
+			              [errorMessage]="submitErrorMessage">
+			</result-modal>
+			<button *ngIf="showSuccessModalState"
+			        class="btn-pink-border text-xs md:text-base"
+			        (click)="closeModal()">Done
+			</button>
+			<button *ngIf="showErrorModalState"
+			        class="btn-pink-border text-xs md:text-base"
+			        (click)="resetError()">Try Again
+			</button>
+		</div>
+	</div>
+</div>