cart

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~8.1.2",
     "@angular/platform-browser-dynamic": "~8.1.2",
     "@angular/router": "~8.1.2",
+    "@ionic-native/call-number": "^5.21.4",
     "@ionic-native/core": "^5.19.1",
     "@ionic-native/geolocation": "^5.19.1",
     "@ionic-native/google-plus": "^5.19.1",
@@ -34,6 +35,7 @@
     "@ionic/storage": "^2.2.0",
     "@types/googlemaps": "^3.39.2",
     "agm-direction": "^0.7.9",
+    "call-number": "^1.0.1",
     "cordova-android": "8.0.0",
     "cordova-plugin-device": "^2.0.3",
     "cordova-plugin-geolocation": "^4.0.2",
@@ -102,7 +104,8 @@
       },
       "cordova-plugin-x-socialsharing": {
         "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
-            }
+      },
+      "mx.ferreyra.callnumber": {}
     },
     "platforms": [
       "android"

src/app/addaddresss/addaddresss.page.html

 <div class="nav_header">
   <button class="nav_btn nav_back floatLeft" (click)="goBack()">
-    <img src="../assets/Group17_2.png">
+    <img src="../assets/Group17_2.png" />
   </button>
   <div class="nav_title floatLeft">
     <h4>ADD ADDRESS</h4>
@@ -15,75 +15,209 @@
           <ion-row>
             <ion-col>
               <h6>
-                                <input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="Work" [(ngModel)]="address.addressType" name="addressType" #addressType="ngModel" required>
-                                <label for="styled-checkbox-1"><span>Work</span></label></h6>
+                <input
+                  class="styled-checkbox"
+                  id="styled-checkbox-1"
+                  type="radio"
+                  value="Work"
+                  [(ngModel)]="address.addressType"
+                  name="addressType"
+                  #addressType="ngModel"
+                  required
+                />
+                <label for="styled-checkbox-1"><span>Work</span></label>
+              </h6>
             </ion-col>
             <ion-col>
               <h6>
-                                <input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="Office" [(ngModel)]="address.addressType" name="addressType" #addressType="ngModel" required>
-                                <label for="styled-checkbox-2"><span>Office</span></label></h6>
+                <input
+                  class="styled-checkbox"
+                  id="styled-checkbox-2"
+                  type="radio"
+                  value="Office"
+                  [(ngModel)]="address.addressType"
+                  name="addressType"
+                  #addressType="ngModel"
+                  required
+                />
+                <label for="styled-checkbox-2"><span>Office</span></label>
+              </h6>
             </ion-col>
             <ion-col>
               <h6>
-                                <input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="Other" [(ngModel)]="address.addressType" name="addressType" #addressType="ngModel" required>
-                                <label for="styled-checkbox-3"><span>Others</span></label></h6>
+                <input
+                  class="styled-checkbox"
+                  id="styled-checkbox-3"
+                  type="radio"
+                  value="Other"
+                  [(ngModel)]="address.addressType"
+                  name="addressType"
+                  #addressType="ngModel"
+                  required
+                />
+                <label for="styled-checkbox-3"><span>Others</span></label>
+              </h6>
             </ion-col>
           </ion-row>
-                    <div class="md-errors-spacer" [hidden]="addressType.valid || submitted == false" class="ion-padding-start">
+          <div
+            class="md-errors-spacer"
+            [hidden]="addressType.valid || submitted == false"
+            class="ion-padding-start"
+          >
             Address Type is required
           </div>
         </ion-grid>
 
         <div class="row">
-                    <button class="btn btn-info" (click)="getGeolocation()">Get Current</button>
+          <button class="btn btn-info" (click)="getGeolocation()">
+            Get Current
+          </button>
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="Address 1" [(ngModel)]="address.firstAddress" name="firstAddress" #firstAddress="ngModel" required>
-                </div>
-                <div class="md-errors-spacer" [hidden]="firstAddress.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="Address 1"
+            [(ngModel)]="address.firstAddress"
+            name="firstAddress"
+            #firstAddress="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="firstAddress.valid || submitted == false"
+          class="ion-padding-start"
+        >
           Address 1 is required
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="Address 2" [(ngModel)]="address.secondAddress" name="secondAddress" #secondAddress="ngModel">
+          <input
+            class=""
+            type="text"
+            placeholder="Address 2"
+            [(ngModel)]="address.secondAddress"
+            name="secondAddress"
+            #secondAddress="ngModel"
+          />
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="Country" [(ngModel)]="address.country" name="country" #country="ngModel" required>
-                </div>
-                <div class="md-errors-spacer" [hidden]="country.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="Country"
+            [(ngModel)]="address.country"
+            name="country"
+            #country="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="country.valid || submitted == false"
+          class="ion-padding-start"
+        >
           Country is required
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="State" [(ngModel)]="address.state" name="state" #state="ngModel" required>
-                </div>
-                <div class="md-errors-spacer" [hidden]="state.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="State"
+            [(ngModel)]="address.state"
+            name="state"
+            #state="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="state.valid || submitted == false"
+          class="ion-padding-start"
+        >
           State is required
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="District" [(ngModel)]="address.district" name="district" #district="ngModel" required>
-                </div>
-                <div class="md-errors-spacer" [hidden]="district.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="District"
+            [(ngModel)]="address.district"
+            name="district"
+            #district="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="district.valid || submitted == false"
+          class="ion-padding-start"
+        >
           District is required
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="City" [(ngModel)]="address.city" name="city" #city="ngModel" required>
-                </div>
-                <div class="md-errors-spacer" [hidden]="city.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="City"
+            [(ngModel)]="address.city"
+            name="city"
+            #city="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="city.valid || submitted == false"
+          class="ion-padding-start"
+        >
           City is required
         </div>
         <div class="row">
-                    <input class="" type="text" placeholder="Area" [(ngModel)]="address.area" name="area" #area="ngModel">
+          <input
+            class=""
+            type="text"
+            placeholder="Area"
+            [(ngModel)]="address.area"
+            name="area"
+            #area="ngModel"
+          />
         </div>
 
         <div class="row">
-                    <input class="" type="text" placeholder="Landmark" [(ngModel)]="address.landmark" name="landmark" #landmark="ngModel" required>
-                </div>
-                <div class="md-errors-spacer" [hidden]="landmark.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="Landmark"
+            [(ngModel)]="address.landmark"
+            name="landmark"
+            #landmark="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="landmark.valid || submitted == false"
+          class="ion-padding-start"
+        >
           Landmark is required
         </div>
         <div class="row">
-                        <input class="" type="text" placeholder="ZipCode" [(ngModel)]="address.zip" name="zip" #zip="ngModel" required>
-                    </div>
-                    <div class="md-errors-spacer" [hidden]="zip.valid || submitted == false" class="ion-padding-start">
+          <input
+            class=""
+            type="text"
+            placeholder="ZipCode"
+            [(ngModel)]="address.zip"
+            name="zip"
+            #zip="ngModel"
+            required
+          />
+        </div>
+        <div
+          class="md-errors-spacer"
+          [hidden]="zip.valid || submitted == false"
+          class="ion-padding-start"
+        >
           ZipCode is required
         </div>
         <div class="row">

src/app/app-routing.module.ts

@@ -95,14 +95,36 @@ const routes: Routes = [
   {
     path: 'searchmodal',
     loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule'
-  },
  { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' },
-  { path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' },
-  { path: 'address', loadChildren: './address/address.module#AddressPageModule' },
-  { path: 'success', loadChildren: './success/success.module#SuccessPageModule' },
+  },
+  {
+    path: 'noresult',
+    loadChildren: './noresult/noresult.module#NoresultPageModule'
+  },
+  {
+    path: 'feedback',
+    loadChildren: './feedback/feedback.module#FeedbackPageModule'
+  },
+  {
+    path: 'address',
+    loadChildren: './address/address.module#AddressPageModule'
+  },
+  {
+    path: 'success',
+    loadChildren: './success/success.module#SuccessPageModule'
+  },
   { path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' },
-  { path: 'preference', loadChildren: './preference/preference.module#PreferencePageModule' },
-  { path: 'changeaddress', loadChildren: './changeaddress/changeaddress.module#ChangeaddressPageModule' }
-
+  {
+    path: 'preference',
+    loadChildren: './preference/preference.module#PreferencePageModule'
+  },
+  {
+    path: 'contact',
+    loadChildren: './contact/contact.module#ContactPageModule'
+  },
+  {
+    path: 'changeaddress',
+    loadChildren: './changeaddress/changeaddress.module#ChangeaddressPageModule'
+  }
 ];
 @NgModule({
   imports: [

src/app/app.module.ts

@@ -29,7 +29,7 @@ import { DeliverypopPageModule } from './deliverypop/deliverypop.module';
 import { FormsModule } from '@angular/forms';
 import { SearchmodalPageModule } from './searchmodal/searchmodal.module';
 import { SocialSharing } from '@ionic-native/social-sharing/ngx';
-
+import { CallNumber } from '@ionic-native/call-number/ngx';
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
@@ -48,6 +48,7 @@ import { SocialSharing } from '@ionic-native/social-sharing/ngx';
     FormsModule
   ],
   providers: [
+    CallNumber,
     StatusBar,
     SplashScreen,
     Geolocation,

src/app/contact/contact.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContactPage } from './contact.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContactPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ContactPage]
+})
+export class ContactPageModule {}

src/app/contact/contact.page.html

+<div class="nav_header">
+  <button class="nav_btn nav_back floatLeft" (click)="goBack()">
+    <img src="../assets/Group17_2.png" />
+  </button>
+  <div class="nav_title floatLeft">
+    <h4>Send Us</h4>
+  </div>
+  <div class="clear"></div>
+</div>
+
+<ion-content>
+  <form
+    novalidate
+    #contactUsForm="ngForm"
+    class="contact_wrapper"
+    *ngIf="userData && contactData"
+  >
+    <div class="form_div">
+      <div class="row">
+        <p>Write Us</p>
+        <textarea
+          required
+          name="writeUs"
+          [(ngModel)]="contactData.message"
+          #writeUs="ngModel"
+          class="form-control"
+          rows="8"
+          placeholder="Type here.."
+        ></textarea>
+        <div
+          class="md-errors-spacer"
+          [hidden]="writeUs.valid || submitted == false"
+          class="ion-padding-start"
+        >
+          This is required.
+        </div>
+      </div>
+      <div class="row">
+        <button (click)="onContactSubmit(contactUsForm)" class="login_btn">
+          SENT
+        </button>
+      </div>
+      <div class="row">
+        <span>or</span>
+      </div>
+      <div class="row">
+        <button (click)="callUs()" class="login_btn" [disabled]="submitted">
+          Call Us
+        </button>
+      </div>
+    </div>
+  </form>
+</ion-content>
+
+<div class="loader" *ngIf="contactService.loader">
+  <div class="lds-ripple">
+    <div></div>
+    <div></div>
+  </div>
+</div>

src/app/contact/contact.page.scss

+.contact_wrapper {
+  width: 80%;
+  margin: 0 auto;
+  padding-top: 30px;
+  .form_div {
+    .row {
+      margin: 20px;
+      .form-control {
+        border: 1px solid rgba(215, 213, 228, 1);
+        background: transparent;
+        color: #333;
+        width: 100%;
+        border-radius: 8px;
+        font-size: 16px;
+        padding: 11px 15px;
+        resize: none;
+        &::placeholder {
+          color: rgba(215, 213, 228, 1);
+        }
+      }
+      .login_btn {
+        width: 100%;
+        background-color: #29285b;
+        color: #fff;
+        border-radius: 8px;
+        height: 45px;
+        font-size: 16px;
+      }
+      p {
+        text-align: left;
+        color: rgba(59, 57, 77, 1);
+        margin: 0px;
+        font-weight: bolder;
+        padding-bottom: 10px;
+      }
+
+      span {
+        opacity: 0.6;
+        text-align: center !important;
+        display: block;
+      }
+    }
+  }
+}

src/app/contact/contact.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactPage } from './contact.page';
+
+describe('ContactPage', () => {
+  let component: ContactPage;
+  let fixture: ComponentFixture<ContactPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact/contact.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { ContactData } from 'src/config/services/contact';
+import { SubjectService } from '../../config/subject.service';
+import { NgForm } from '@angular/forms';
+import { ContactService } from 'src/config/contact.service';
+import { ServiceService } from '../../config/service.service';
+import { CallNumber } from '@ionic-native/call-number/ngx';
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.page.html',
+  styleUrls: ['./contact.page.scss']
+})
+export class ContactPage implements OnInit {
+  submitted = false;
+  userData: any;
+  contactData: ContactData = {
+    from: '',
+    message: '',
+    contactId: ''
+  };
+  constructor(
+    private location: Location,
+    public subjectService: SubjectService,
+    public contactService: ContactService,
+    public service: ServiceService,
+    private callNumber: CallNumber
+  ) {
+    // Gets userdata
+    this.subjectService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.userData = JSON.parse(userData);
+        this.contactData.from = JSON.parse(userData).emailId;
+        console.log(userData);
+      } else {
+        console.log(userData);
+      }
+    });
+  }
+
+  ngOnInit() {}
+
+  callUs() {
+    this.callNumber
+      .callNumber('+61 411 622 880', true)
+      .then(res => console.log('Launched dialer!', res))
+      .catch(err => console.log('Error launching dialer', err));
+  }
+
+  onContactSubmit(form: NgForm) {
+    this.submitted = true;
+    console.log(form.value);
+    if (form.valid && form.value.message !== '') {
+      const contData = { ...this.contactData, from: this.userData.emailId };
+      this.contactService.contactCreate(contData);
+    } else {
+      console.log('form not valid');
+      this.submitted = false;
+      this.service.showToast('Invalid request!', 'top', 'my-error', 1000);
+    }
+  }
+
+  goBack() {
+    this.location.back();
+  }
+}
+
+// +61 411 622 880

src/app/home/home.page.scss

@@ -262,11 +262,12 @@
 
 .add_address_wrapper {
     position: fixed;
+    top: 40%;
+    overflow: scroll;
+    height: auto;
     bottom: 0px;
     left: 0px;
     right: 0px;
-    overflow: scroll;
-    top: 40%;
     padding: 20px 20px 50px 20px;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
@@ -280,17 +281,6 @@
         padding: 0px;
         font-weight: 800;
     }
-    .add-address-c {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        span {
-            color: rgba(41, 40, 91, 1);
-            margin: 0px;
-            padding: 0px;
-            font-weight: 800;
-        }
-    }
     .styled-checkbox {
         position: absolute; // take it out of document flow
         opacity: 0; // hide it

src/app/orderplaced/orderplaced.page.html

@@ -59,12 +59,16 @@
       <ul>
         <li (click)="goToPage('productlist')">
           <div class="nearby_image">
-                        <img [src]="data.product[0].image" onerror="this.src='../assets/[email protected]'" />
+            <img
+              [src]="data.product[0].image"
+              onerror="this.src='../assets/[email protected]'"
+            />
           </div>
           <div class="nearby_detail">
             <h5>
               <span class="floatLeft">{{data.shopperName}}</span>
-                            <span class="floatRight">{{data.product[0].qty}}
+              <span class="floatRight"
+                >{{data.product[0].qty}}
                 <img src="../assets/Path61_2.png" />
               </span>
               <div class="clear"></div>
@@ -82,7 +86,8 @@
       </h6>
       <h5>Quantity : <span>{{product.qty}}</span></h5>
       <h5>
-                Amount : <strong>A$ {{product.price}}</strong><span class="afterpay">COD</span>
+        Amount : <strong>A$ {{product.price}}</strong
+        ><span class="afterpay">COD</span>
       </h5>
       <h5 *ngIf="data.orderStatus >= 3 && data.orderStatus < 7">
         Delivery time : <span>{{deliveryTime}}</span>
@@ -90,15 +95,26 @@
       <h5>Order Status : <span>{{getStatus(data.orderStatus)}}</span></h5>
       <div class="delivery-wrap">
         <h4 class="floatLeft">DELIVERY</h4>
-                <span class="floatRight"><img class="ng-tns-c3-0" src="../../assets/edit.png"
-            (click)="goToPage('changeaddress')"></span>
+        <span class="floatRight"
+          ><img
+            class="ng-tns-c3-0"
+            src="../../assets/edit.png"
+            (click)="goToPage('changeaddress')"
+        /></span>
+
         <div class="clear"></div>
       </div>
       <h5 *ngIf="data.deliveryAddress">
         {{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
-                <br /> {{data.deliveryAddress.building}}, <br /> {{data.deliveryAddress.landmark}}
+        <br />
+        {{data.deliveryAddress.building}}, <br />
+        {{data.deliveryAddress.landmark}}
       </h5>
-            <button class="cancel_btn" (click)="cancellOrder(data.orderId)" *ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8">
+      <button
+        class="cancel_btn"
+        (click)="goToPage('contact')"
+        *ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8"
+      >
         CANCEL THIS ORDER
       </button>
       <!-- <hr /> -->

src/app/productdetail/productdetail.page.html

@@ -283,7 +283,11 @@
         [ngClass]="checkFavStatus(product.prodId)"
         (click)="changeFav(product.prodId)"
       ></button>
-      <button class="cart" (click)="buyNow(product,0)"></button>
+      <button
+        class="cart"
+        [disabled]="!disCart"
+        (click)="buyNow(product,0)"
+      ></button>
     </div>
     <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
   </div>

src/app/productdetail/productdetail.page.ts

-import { Component, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Products } from './../../config/services/product';
-import { Slides } from './../../config/services/slides';
-
-import { Order } from './../../config/services/order';
-import { CartsService } from './../../config/cart.service';
-import { ProductsService } from './../../config/products.service';
-import { ServiceService } from './../../config/service.service';
-import { SocialSharing } from '@ionic-native/social-sharing/ngx';
-import { map } from 'rxjs/operators';
+import { Component, OnInit } from "@angular/core";
+import { Location } from "@angular/common";
+import { Router, ActivatedRoute } from "@angular/router";
+import { Products } from "./../../config/services/product";
+import { Slides } from "./../../config/services/slides";
+
+import { Order } from "./../../config/services/order";
+import { CartsService } from "./../../config/cart.service";
+import { ProductsService } from "./../../config/products.service";
+import { ServiceService } from "./../../config/service.service";
+import { SocialSharing } from "@ionic-native/social-sharing/ngx";
+import { map } from "rxjs/operators";
 
 @Component({
-  selector: 'app-productdetail',
-  templateUrl: './productdetail.page.html',
-  styleUrls: ['./productdetail.page.scss']
+  selector: "app-productdetail",
+  templateUrl: "./productdetail.page.html",
+  styleUrls: ["./productdetail.page.scss"]
 })
 export class ProductdetailPage implements OnInit {
+  disCart: boolean = true;
   slide: Slides;
   product: Products;
   order: Order;
@@ -55,7 +56,7 @@ export class ProductdetailPage implements OnInit {
       params.subCate,
       params.prodId
     );
-    this.service.get('params').then(val => {
+    this.service.get("params").then(val => {
       this.data = val;
     });
     this.cartService.cartList();
@@ -132,9 +133,9 @@ export class ProductdetailPage implements OnInit {
   buyNow(product: any, type: number) {
     this.cartService.buyNow(product).then(() => {
       if (type === 1) {
-        this.router.navigateByUrl('cart');
+        this.router.navigateByUrl("cart");
       } else {
-        this.service.showToast('Added into cart', 'top', 'my-toast', 2000);
+        this.service.showToast("Added into cart", "top", "my-toast", 2000);
       }
       this.cartService.cartList();
     });
@@ -146,32 +147,32 @@ export class ProductdetailPage implements OnInit {
 
   checkFavStatus(index) {
     const state = this.prodService.fav.findIndex(x => x === index);
-    return state > -1 ? 'fav_active' : 'fav';
+    return state > -1 ? "fav_active" : "fav";
   }
 
   changeFav(index) {
-    this.prodService.changeFav(index, 'yes');
+    this.prodService.changeFav(index, "yes");
     const state = this.prodService.fav.findIndex(x => x === index);
     // console.log(state);
     // console.log(this.prodService.fav);
     if (state > -1) {
       this.prodService.fav.splice(state, 1);
-      this.prodService.changeFav(index, 'yes');
+      this.prodService.changeFav(index, "yes");
     } else {
       this.prodService.fav.push(index);
-      this.prodService.changeFav(index, 'no');
+      this.prodService.changeFav(index, "no");
     }
     return;
     // console.log(this.prodService.fav);
   }
 
   socialShare(prodName, category, subCate, price, image) {
-    const desc = category + ', ' + subCate + ', ' + price;
+    const desc = category + ", " + subCate + ", " + price;
     const content = {
       message: desc, // not supported on some apps (Facebook, Instagram)
       subject: prodName, // fi. for email
       files: image,
-      chooserTitle: 'GetMi'
+      chooserTitle: "GetMi"
     };
     this.socialSharing.shareWithOptions(content);
   }

src/config/contact.service.ts

+import { Injectable } from '@angular/core';
+import {
+  AngularFirestore,
+  AngularFirestoreCollection
+} from '@angular/fire/firestore';
+import { take } from 'rxjs/operators';
+import { ContactData } from './services/contact';
+import { ServiceService } from './service.service';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactService {
+  loader: boolean;
+  constructor(
+    public afs: AngularFirestore,
+    private router: Router,
+    private service: ServiceService
+  ) {
+    this.loader = false;
+  }
+
+  contactCreate(data: ContactData) {
+    this.loader = true;
+    this.afs
+      .collection('contacts')
+      .add({})
+      .then(docRef => {
+        data.contactId = docRef.id;
+        this.afs
+          .collection('contacts')
+          .doc(data.contactId)
+          .set(data)
+          .then(() => {
+            this.service
+              .showToast('Thank you for your feedback!', 'top', 'my-toast', 500)
+              .then(() => {
+                this.loader = false;
+                console.log('redirected');
+                setTimeout(() => {
+                  this.router.navigateByUrl('home');
+                }, 500);
+              })
+              .catch(err => {
+                this.loader = false;
+              });
+          });
+      });
+  }
+}

src/config/services/contact.ts

+export interface ContactData {
+  from: string;
+  contactId: string;
+  message: string;
+}