Feature/contact us (#264)

* Add jquery to lock file * Move Blog RSS API link to config * Add emailjs-com * Send email init * Rm count * Update phone number * :: -> : * Set env
sliit-foss · May 10, 2021 · 5d70fb6 · 5d70fb6
1 parent 5750cf1
commit 5d70fb6
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "bootstrap": "^4.4.1",
+    "emailjs-com": "^2.6.4",
     "jquery": "^3.5.1",
     "ngx-owl-carousel-o": "^5.0.0",
     "ngx-pagination": "^5.0.0",

diff --git a/src/app/components/contact/contact.component.css b/src/app/components/contact/contact.component.css
@@ -43,18 +43,14 @@ p {
 }
 
 .headerText {
-  font-size: 4rem;
+  font-size: 5rem;
   font-weight: bold;
-  line-height: 4rem;
+  line-height: normal;
 }
 
 .lead {
-  font-size: 1.2rem;
-  line-height: 2rem;
-  color: #525151;
-  text-align: justify;
+  text-align: left;
 }
-
 .contact .info-box {
   color: #444;
   text-align: center;
@@ -86,21 +82,21 @@ p {
   margin-bottom: 0;
 }
 
-.contact .php-email-form {
+.contact .email-form {
   box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
   padding: 30px;
   margin-bottom: 30px;
   border-radius: 12px;
 }
 
-.contact .php-email-form .validate {
+.contact .email-form .validate {
   color: red;
   margin: 0 0 15px 0;
   font-weight: 400;
   font-size: 13px;
 }
 
-.contact .php-email-form .error-message {
+.contact .email-form .error-message {
   display: none;
   color: #fff;
   background: #ed3c0d;
@@ -109,11 +105,11 @@ p {
   font-weight: 600;
 }
 
-.contact .php-email-form .error-message br + br {
+.contact .email-form .error-message br + br {
   margin-top: 25px;
 }
 
-.contact .php-email-form .sent-message {
+.contact .email-form .sent-message {
   display: none;
   color: #fff;
   background: #18d26e;
@@ -122,14 +118,14 @@ p {
   font-weight: 600;
 }
 
-.contact .php-email-form .loading {
+.contact .email-form .loading {
   display: none;
   background: #fff;
   text-align: center;
   padding: 15px;
 }
 
-.contact .php-email-form .loading:before {
+.contact .email-form .loading:before {
   content: '';
   display: inline-block;
   border-radius: 50%;
@@ -142,29 +138,29 @@ p {
   animation: animate-loading 1s linear infinite;
 }
 
-.contact .php-email-form input,
-.contact .php-email-form textarea {
+.contact .email-form input,
+.contact .email-form textarea {
   border-radius: 0;
   box-shadow: none;
   font-size: 14px;
 }
 
-.contact .php-email-form input::focus,
-.contact .php-email-form textarea::focus {
+.contact .email-form input:focus,
+.contact .email-form textarea:focus {
   background-color: #68a4c4;
 }
 
-.contact .php-email-form input {
+.contact .email-form input {
   padding: 20px 15px;
   border-radius: 12px;
 }
 
-.contact .php-email-form textarea {
+.contact .email-form textarea {
   padding: 12px 15px;
   border-radius: 12px;
 }
 
-.contact .php-email-form button[type='submit'] {
+.contact .email-form button[type='submit'] {
   background: #5a5af3;
   border: 0;
   padding: 10px 24px;
@@ -173,7 +169,7 @@ p {
   border-radius: 12px;
 }
 
-.contact .php-email-form button[type='submit']:hover {
+.contact .email-form button[type='submit']:hover {
   background: #8dbad2;
 }
 

diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html
@@ -1,26 +1,36 @@
 <!-- ======= Contact Section ======= -->
-<section class="auto-space auto-space-vertical">
-  <div class="row align-items-center">
-    <div
-      class="col-12 col-md-6 col-lg-6"
-      data-aos="fade-up"
-      data-aos-duration="1000"
-    >
-      <h1 class="headerText">Contact Us</h1>
-      <p class="lead">
-        Fill up the form and our Team will get back to you within 24 hours.
-      </p>
-    </div>
-    <div class="col-12 col-md-6 ml-md-auto mt-4 mt-md-0" data-aos="fade-left">
-      <img alt="image" class="img-fluid" src="../../../assets/img/2.svg" />
+<section class="fdb-block">
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col-12 col-md-6 col-lg-6">
+        <h1 class="headerText">Contact Us</h1>
+        <p class="lead">
+          Fill up the form and our Team will get back to you within 24 hours.
+        </p>
+      </div>
+      <div class="col-12 col-md-6 ml-md-auto mt-4 mt-md-0">
+        <img alt="image" class="img-fluid" src="../../../assets/img/2.svg" />
+      </div>
     </div>
   </div>
 </section>
-<section class="contact-overlay auto-space auto-space-vertical">
-  <div class="contact">
-    <div data-aos="fade-up" data-aos-duration="2000">
+<div class="contact-overlay">
+  <!-- rm data-aos='fade-up' form below section as it isn't visible -->
+  <section
+    class="contact"
+    data-aos-easing="ease-in-out"
+    data-aos-duration="500"
+  >
+    <div class="container">
       <div class="row">
-        <div class="col-lg-6 contact-row px-0">
+        <div class="col-lg-12">
+          <div class="contact-us-cover-img d-sm-none d-md-block d-none">
+            <div class="d-flex justify-content-center"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 contact-row">
           <div class="row">
             <div class="col-md-12">
               <div class="info-box">
@@ -40,7 +50,7 @@ <h3>Email Us</h3>
               <div class="info-box">
                 <fa-icon [icon]="faPhoneAlt"></fa-icon>
                 <h3>Call Us</h3>
-                <p>121212121212</p>
+                <p>+94775633985</p>
               </div>
             </div>
           </div>
@@ -49,8 +59,8 @@ <h3>Call Us</h3>
         <div class="col-lg-6">
           <form
             [formGroup]="contactForm"
-            (ngSubmit)="contact()"
-            class="php-email-form"
+            (submit)="contact($event)"
+            class="email-form"
           >
             <div class="form-row">
               <div class="col-md-6 form-group">
@@ -83,6 +93,7 @@ <h3>Call Us</h3>
                   placeholder="Your Email"
                   data-rule="email"
                   data-msg="Please enter a valid email"
+                  name="user_email"
                 />
                 <div
                   *ngIf="
@@ -112,6 +123,7 @@ <h3>Call Us</h3>
                 placeholder="Subject"
                 data-rule="minlen:4"
                 data-msg="Please enter at least 8 chars of subject"
+                name="subject"
               />
               <div
                 *ngIf="
@@ -132,6 +144,7 @@ <h3>Call Us</h3>
                 data-rule="required"
                 data-msg="Please write something for us"
                 placeholder="Message"
+                name="message"
               ></textarea>
               <div
                 *ngIf="
@@ -160,6 +173,6 @@ <h3>Call Us</h3>
         </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
+</div>
 <!-- End Contact Section -->
diff --git a/src/app/components/contact/contact.component.ts b/src/app/components/contact/contact.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import emailjs, { EmailJSResponseStatus } from 'emailjs-com';
 import {
   faAddressBook,
   faEnvelope,
   faPhoneAlt,
 } from '@fortawesome/free-solid-svg-icons';
+import { environment } from '../../../environments/environment.prod';
 
 @Component({
   selector: 'app-contact',
@@ -29,7 +31,21 @@ export class ContactComponent implements OnInit {
     });
   }
 
-  contact() {
-    console.log(this.contactForm.value);
+  contact(e: Event) {
+    emailjs
+      .sendForm(
+        environment.emailServiceId,
+        environment.emailTemplateId,
+        e.target as HTMLFormElement,
+        environment.emailUserId
+      )
+      .then(
+        (result: EmailJSResponseStatus) => {
+          console.log('EmailJs Resp : ' + result.text);
+        },
+        (error) => {
+          console.log(error.text);
+        }
+      );
   }
 }
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -1,3 +1,6 @@
 export const environment = {
-  production: true
+  production: true,
+  emailServiceId: 'service_664o6wc',
+  emailTemplateId: 'template_1nhqybf',
+  emailUserId: 'user_WyMiG19mwb6vTGJwqJq5C',
 };
diff --git a/yarn.lock b/yarn.lock
@@ -3434,6 +3434,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emailjs-com@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/emailjs-com/-/emailjs-com-2.6.4.tgz#c3bac8f7ee58d536ab34923e73013ad39f299f46"
+  integrity sha512-4G8rxq+1mbL4rGntMa9tqNJ4N9BhuCl8lFJASDHxZVXeC82ivwL6qw+Zu48cAWHpNK2/F3vScaAZk8zoTAfiAA==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz"