Merge branch 'adarsh' into 'master'

src/app/app.component.html

@@ -6,7 +6,10 @@
           <ion-menu-toggle *ngIf="userData">
             <div class="top_banner">
               <div class="top_image">
-                <img [src]="userData.profilePhoto" />
+                <img
+                  [src]="userData.profilePhoto"
+                  onerror="this.src='./../assets/asset_avatar.png'"
+                />
               </div>
               <div class="top_detail">
                 <h4>{{ userData.name }}</h4>

src/app/app.component.ts

@@ -38,6 +38,7 @@ export class AppComponent {
 
   menuw: number;
   userData: any;
+  tabData = true;
 
   constructor(
     private platform: Platform,
@@ -52,7 +53,9 @@ export class AppComponent {
     public subjectService: SubjectService,
     private route: ActivatedRoute
   ) {
+    console.log(this.router.url);
     this.state = true;
+
     this.initializeApp();
     this.subjectService.getLoginData().subscribe(loginData => {
       this.state = loginData;
@@ -67,13 +70,20 @@ export class AppComponent {
         console.log(userData);
       }
     });
+
+    this.subjectService.getTabData().subscribe(tabData => {
+      console.log(tabData);
+      if (tabData !== null) {
+        this.tabData = tabData;
+        console.log(this.tabData);
+      }
+    });
   }
 
   initializeApp() {
     this.platform.ready().then(() => {
       this.statusBar.styleDefault();
       this.statusBar.overlaysWebView(false);
-      this.statusBar.show();
       this.statusBar.backgroundColorByHexString('#29285b');
     });
   }
@@ -88,16 +98,22 @@ export class AppComponent {
 
   fetchCase() {
     const restrictedUrl = [
+      '',
       'productdetail',
       'cart',
       'nearby',
       'verification',
-      'orderplaced'
+      'orderplaced',
+      'landing',
+      'login',
+      'signup',
+      'address'
     ];
     const currentUrl = this.router.url.split('/');
     const index = restrictedUrl.findIndex(x => x === currentUrl[1]);
     // console.log(currentUrl[1], index, this.state);
-    if (index > -1 || this.state === true) {
+    console.log(this.tabData);
+    if (index > -1 || this.tabData === false) {
       return true;
     } else {
       return false;

src/app/cart/cart.page.ts

@@ -12,7 +12,6 @@ import { AddressList } from './../../config/services/address';
 import { trigger, transition, animate, style } from '@angular/animations';
 import { zip } from 'rxjs';
 
-
 @Component({
   selector: 'app-cart',
   templateUrl: './cart.page.html',
@@ -30,7 +29,6 @@ import { zip } from 'rxjs';
   ]
 })
 export class CartPage implements OnInit {
-
   @ViewChild(IonSlides, { static: false }) slides: IonSlides;
   currentIndex: any;
   isShow = false;
@@ -70,14 +68,17 @@ export class CartPage implements OnInit {
     this.discountApplied = false;
     this.discount = 0;
     this.cartService.cartList();
-    const users = this.service.get('user').then((data) => {
+    this.loader = true;
+    const users = this.service.get('user').then(data => {
       if (data) {
         data = JSON.parse(data);
         this.custId = data.uid;
         this.addressService.addList(data.uid);
       }
     });
-
+    setTimeout(() => {
+      this.loader = false;
+    }, 1000);
   }
 
   ngOnInit() {
@@ -85,10 +86,11 @@ export class CartPage implements OnInit {
     this.setAddress();
   }
 
-
   setAddress() {
     if (this.addressService.addressList.length > 0) {
-      let address = this.addressService.addressList.find(x => x.defaultVal === 1);
+      let address = this.addressService.addressList.find(
+        x => x.defaultVal === 1
+      );
       if (!address) {
         address = this.addressService.addressList[0];
       }
@@ -114,7 +116,7 @@ export class CartPage implements OnInit {
   }
 
   getTax(amount) {
-    return this.taxAmount = (amount * 10) / 100;
+    return (this.taxAmount = (amount * 10) / 100);
   }
 
   getwaypayk() {
@@ -128,8 +130,6 @@ export class CartPage implements OnInit {
     return await modal.present();
   }
 
-
-
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
@@ -146,8 +146,6 @@ export class CartPage implements OnInit {
     this.custAddress = this.addressService.addressList[index];
   }
 
-
-
   next(index: number = null) {
     this.loader = true;
     const This = this;
@@ -158,14 +156,16 @@ export class CartPage implements OnInit {
     if (index === 2) {
       if (this.custAddress !== undefined) {
         const otherCharges = {
-          deliveryCharge : this.deliveryCharge,
+          deliveryCharge: this.deliveryCharge,
           taxAmount: this.taxAmount,
           discount: this.discount,
           discountApplied: this.discountApplied,
           totalAmt: this.totalAmt,
           custAddress: this.custAddress
         };
-        const state = this.orderService.checkOut(this.cartService.carts, otherCharges).then((data) => {
+        const state = this.orderService
+          .checkOut(this.cartService.carts, otherCharges)
+          .then(data => {
             console.log('ready for slide');
             this.slides.slideNext();
           });
@@ -192,7 +192,6 @@ export class CartPage implements OnInit {
     }
   }
 
-
   slideChanged() {
     this.slides.getActiveIndex().then(index => {
       this.currentIndex = index;
@@ -210,14 +209,15 @@ export class CartPage implements OnInit {
   }
 
   getTotal(total) {
-    const actualTotal = (this.deliveryCharge + this.taxAmount + total) - this.discount;
+    const actualTotal =
+      this.deliveryCharge + this.taxAmount + total - this.discount;
     this.totalAmt = actualTotal;
     return actualTotal;
   }
 
   promoApply(code) {
     console.log(code);
-    this.cartService.checkPromo(code).subscribe((value) => {
+    this.cartService.checkPromo(code).subscribe(value => {
       if (value.length > 0) {
         const promo = value[0];
         this.discountApplied = true;
@@ -239,7 +239,20 @@ export class CartPage implements OnInit {
 
   formatDate() {
     const date = new Date();
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'June',
+      'July',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec'
+    ];
     let hours = date.getHours();
     const minutes = date.getMinutes();
     const ampm = hours >= 12 ? 'PM' : 'AM';
@@ -247,7 +260,14 @@ export class CartPage implements OnInit {
     hours = hours ? hours : 12; // the hour '0' should be '12'
     const newminutes = minutes < 10 ? '0' + minutes : minutes;
     const strTime = hours + ':' + newminutes + ' ' + ampm;
-    return months[date.getMonth()] + ' ' + date.getDate() + ',' + date.getFullYear() + '  ' + strTime;
+    return (
+      months[date.getMonth()] +
+      ' ' +
+      date.getDate() +
+      ',' +
+      date.getFullYear() +
+      '  ' +
+      strTime
+    );
   }
-
 }

src/app/catstorelist/catstorelist.page.ts

-import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { Location } from "@angular/common";
-import { ServiceService } from "./../../config/service.service";
-import { ShoppersService } from "./../../config/shopper.service";
-import { SearchService } from "../../config/search.service";
-import { trigger, transition, animate, style } from "@angular/animations";
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { ServiceService } from './../../config/service.service';
+import { ShoppersService } from './../../config/shopper.service';
+import { SearchService } from '../../config/search.service';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { ModalController } from '@ionic/angular';
+import { SearchmodalPage } from '../searchmodal/searchmodal.page';
+import { SubjectService } from './../../config/subject.service';
 
 @Component({
-  selector: "app-catstorelist",
-  templateUrl: "./catstorelist.page.html",
-  styleUrls: ["./catstorelist.page.scss"],
+  selector: 'app-catstorelist',
+  templateUrl: './catstorelist.page.html',
+  styleUrls: ['./catstorelist.page.scss'],
   animations: [
-    trigger("slideInOut", [
-      transition(":enter", [
-        style({ transform: "translateY(100%)" }),
-        animate("200ms ease-in", style({ transform: "translateY(0%)" }))
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateY(100%)' }),
+        animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
       ]),
-      transition(":leave", [
-        animate("200ms ease-out", style({ transform: "translateY(100%)" }))
+      transition(':leave', [
+        animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
       ])
     ])
   ]
@@ -34,17 +37,25 @@ export class CatStorelistPage implements OnInit {
     public location: Location,
     public service: ServiceService,
     public shopperService: ShoppersService,
-    private searchService: SearchService
+    private searchService: SearchService,
+    private modalController: ModalController,
+    private subjectService: SubjectService
   ) {
-    this.service.get("params").then(val => {
+    this.service.get('params').then(val => {
       this.data = val;
-      this.shopperService.shopperList(this.data.catId, "catId");
+      this.shopperService.shopperList(this.data.catId, 'catId');
     });
   }
 
-  clickSearch() {
-    this.searchShow = true;
-    this.searchService.searchList = [];
+  async clickSearch() {
+    this.subjectService.setTabData(false);
+    const modal = await this.modalController.create({
+      component: SearchmodalPage
+    });
+    modal.onDidDismiss().then(dataReturned => {
+      this.subjectService.setTabData(true);
+    });
+    return await modal.present();
   }
 
   searchClose() {
@@ -53,7 +64,7 @@ export class CatStorelistPage implements OnInit {
   ngOnInit() {}
 
   goToPage(path, data = null) {
-    this.service.set("params", data);
+    this.service.set('params', data);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }

src/app/home/home.page.ts

@@ -8,6 +8,7 @@ import { CenterService } from './../../config/center.service';
 import { ShoppersService } from './../../config/shopper.service';
 import { CategoriesService } from './../../config/category.service';
 import { ServiceService } from './../../config/service.service';
+import { SubjectService } from './../../config/subject.service';
 import { AddressService } from './../../config/address.service';
 import { SearchService } from './../../config/search.service';
 import { ProductsService } from './../../config/products.service';
@@ -56,7 +57,8 @@ export class HomePage implements OnInit {
     public modalController: ModalController,
     private mapsAPILoader: MapsAPILoader,
     private searchService: SearchService,
-    private productsService: ProductsService
+    private productsService: ProductsService,
+    private subjectService: SubjectService
   ) {}
 
   ngOnInit() {
@@ -135,6 +137,8 @@ export class HomePage implements OnInit {
 
   istoggle() {
     this.isShow = !this.isShow;
+    console.log(this.isShow);
+    this.subjectService.setTabData(!this.isShow);
   }
 
   viewPage(datas: any) {
@@ -167,10 +171,13 @@ export class HomePage implements OnInit {
   }
 
   async searchModal() {
+    this.subjectService.setTabData(false);
     const modal = await this.modalController.create({
       component: SearchmodalPage
     });
-    modal.onDidDismiss().then(dataReturned => {});
+    modal.onDidDismiss().then(dataReturned => {
+      this.subjectService.setTabData(true);
+    });
     return await modal.present();
   }
 }

src/app/landing/landing.page.html

 <ion-content>
   <div class="start_wizard_wrapper">
-        <ion-slides pager="true" [options]="landingOptions" (ionSlideDidChange)="slideChanged()">
+    <ion-slides
+      pager="true"
+      [options]="landingOptions"
+      (ionSlideDidChange)="slideChanged()"
+    >
       <ion-slide>
         <div class="wizard_inner_wrapper">
-                    <img src="../assets/Group 229_2.png">
+          <img src="../assets/Group 229_2.png" />
           <div class="wizard_textarea">
             <h3>EASY PURCHASE</h3>
             <p>
-                            Purchase your products from your<br> favourite shops
+              Purchase your products from your<br />
+              favourite shops
             </p>
           </div>
         </div>
       </ion-slide>
       <ion-slide>
         <div class="wizard_inner_wrapper">
-                    <img src="../assets/Group 230_2.png">
+          <img src="../assets/Group 230_2.png" />
           <div class="wizard_textarea">
             <h3>1 HOUR DELIVERY</h3>
-                        <p>
-                            The products will be delivered<br>within 1 hour
-                        </p>
+            <p>The products will be delivered<br />within 1 hour</p>
           </div>
         </div>
       </ion-slide>
       <ion-slide>
         <div class="wizard_inner_wrapper">
-                    <img src="../assets/Group 231_2.png">
+          <img src="../assets/Group 231_2.png" />
           <div class="wizard_textarea">
             <h3>EASY PAYMENT</h3>
             <p>
@@ -49,4 +52,10 @@
       </div>
     </div>
   </div>
+  <div class="loader" *ngIf="loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>

src/app/landing/landing.page.ts

-import { Component, OnInit, ViewChild } from "@angular/core";
-import { IonSlides } from "@ionic/angular";
-import { Router, ActivatedRoute } from "@angular/router";
-import { ServiceService } from "./../../config/service.service";
-import { SubjectService } from "./../../config/subject.service";
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ServiceService } from './../../config/service.service';
+import { SubjectService } from './../../config/subject.service';
 
 @Component({
-  selector: "app-landing",
-  templateUrl: "./landing.page.html",
-  styleUrls: ["./landing.page.scss"]
+  selector: 'app-landing',
+  templateUrl: './landing.page.html',
+  styleUrls: ['./landing.page.scss']
 })
 export class LandingPage implements OnInit {
+  loader: boolean;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private service: ServiceService,
     public subjectService: SubjectService
   ) {
-    this.service.get("landing").then(data => {
+    this.loader = true;
+    this.service.get('landing').then(data => {
       if (data === true) {
-        const user = JSON.parse(localStorage.getItem("user"));
+        const user = JSON.parse(localStorage.getItem('user'));
         console.log(user);
         if (user) {
           this.subjectService.sendLoginData(false);
-          this.goToPage("home");
+          this.goToPage('home');
         } else {
           this.subjectService.sendLoginData(true);
-          this.goToPage("login");
+          this.goToPage('login');
         }
       }
+      this.loader = false;
     });
   }
 
@@ -49,7 +52,7 @@ export class LandingPage implements OnInit {
   ngOnInit() {}
 
   goToPage(path, data = null) {
-    this.service.set("landing", true);
+    this.service.set('landing', true);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }

src/app/login/login.page.html

 <div class="nav_header">
-    <button class="nav_btn floatLeft">
-     </button>
+  <button class="nav_btn floatLeft"></button>
   <div class="nav_title floatLeft">
     <h4>LOGIN</h4>
   </div>
   <div class="clear"></div>
 </div>
 
-
 <ion-content>
   <div class="login_wrapper">
     <div class="logo_wrapper">
-            <img src="../assets/logo.png">
+      <img src="../assets/logo.png" />
     </div>
     <div class="form_div">
       <div class="row">
-                <input class="" type="text" placeholder="User Name/ Email" #userName required>
+        <input
+          class=""
+          type="text"
+          placeholder="User Name/ Email"
+          #userName
+          required
+        />
       </div>
       <div class="row">
-                <input class="" type="password" placeholder="Password" #userPassword required>
+        <input
+          class=""
+          type="password"
+          placeholder="Password"
+          #userPassword
+          required
+        />
       </div>
       <div class="row">
-                <button class="login_btn" (click)="authService.SignIn(userName.value, userPassword.value)">LOGIN</button>
+        <button
+          class="login_btn"
+          (click)="authService.SignIn(userName.value, userPassword.value)"
+        >
+          LOGIN
+        </button>
       </div>
       <div class="row">
-                <hr>
+        <hr />
         <p><span>OR</span></p>
       </div>
       <div class="row">
         <div class="social_div">
-                    <div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);" (click)="authService.facebook(1)">
+          <div
+            class="social_btn"
+            style="border-right:1px solid rgba(215, 213, 228, 1);"
+            (click)="authService.facebook(1)"
+          >
             Facebook
           </div>
           <div class="social_btn" (click)="authService.google(1)">
@@ -39,10 +58,18 @@
       </div>
       <div class="row">
         <h4><strong (click)="goToPage('forgot')">FORGOT PASSWORD?</strong></h4>
-                <h4>Don't have an account? <strong (click)="goToPage('signup')">SIGNUP</strong></h4>
-                
+        <h4>
+          Don't have an account?
+          <strong (click)="goToPage('signup')">SIGNUP</strong>
+        </h4>
       </div>
       <!-- <button (click)="goToPage('addaddresss')">Address</button> -->
     </div>
   </div>
+  <div class="loader" *ngIf="authService.loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>

src/app/login/login.page.ts

@@ -4,23 +4,20 @@ import { AuthService } from './../../config/auth.service';
 import { MenuController } from '@ionic/angular';
 import { async } from 'q';
 
-
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
-  styleUrls: ['./login.page.scss'],
+  styleUrls: ['./login.page.scss']
 })
 export class LoginPage implements OnInit {
-
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     public authService: AuthService,
     public menuCtrl: MenuController
-    ) { }
+  ) {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   ionViewWillEnter() {
     this.menuCtrl.enable(false);
@@ -30,8 +27,4 @@ export class LoginPage implements OnInit {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
-
-
-
-
 }

src/app/nearby/nearby.page.html

 <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft" (click)="goBack()" *ngIf="type === 0">
-    <img src="../assets/Group17_2.png">
+  <button
+    class="nav_btn nav_back floatLeft"
+    (click)="goBack()"
+    *ngIf="type === 0"
+  >
+    <img src="../assets/Group17_2.png" />
   </button>
   <div class="nav_title floatLeft">
     <h4>NEAR BY STORES</h4>
@@ -9,46 +13,128 @@
 </div>
 <ion-content>
   <div class="nearby_map">
-
-        <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
-            <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker>
+    <agm-map
+      [latitude]="latitude"
+      [longitude]="longitude"
+      [zoom]="8"
+      [backgroundColor]="'rgba(29, 27, 130,0.2)'"
+    >
+      <agm-marker
+        [latitude]="latitude"
+        [longitude]="longitude"
+        [markerDraggable]="true"
+        (dragEnd)="markerDragEnd($event)"
+      ></agm-marker>
     </agm-map>
-        <form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" class="form-horizontal">
+    <form
+      (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()"
+      #addressForm="ngForm"
+      method="post"
+      class="form-horizontal"
+    >
       <div class="add_address_wrapper">
         <h5>DELIVERY</h5>
         <p>{{address}}</p>
-                <input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required placeholder="House No./ Building No">
-                <div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start">
+        <input
+          [(ngModel)]="addressForm.building"
+          name="building"
+          #building="ngModel"
+          name="building"
+          required
+          placeholder="House No./ Building No"
+        />
+        <div
+          class="md-errors-spacer"
+          [hidden]="building.valid || landmark.pristine"
+          class="ion-padding-start"
+        >
           Building Name is required
         </div>
-                <input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required placeholder="Landmark">
-                <div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start">
+        <input
+          [(ngModel)]="addressForm.landmark"
+          name="landmark"
+          #landmark="ngModel"
+          name="landmark"
+          required
+          placeholder="Landmark"
+        />
+        <div
+          class="md-errors-spacer"
+          [hidden]="landmark.valid || landmark.pristine"
+          class="ion-padding-start"
+        >
           Landmark is required
         </div>
         <ion-grid>
           <ion-row>
             <ion-col>
               <h6>
-                                <input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required>
-                                <label for="styled-check-1"><span>Home</span></label></h6>
+                <input
+                  class="styled-checkbox"
+                  id="styled-check-1"
+                  type="radio"
+                  value="Home"
+                  [(ngModel)]="addressForm.addressType"
+                  name="addressType"
+                  #addressType="ngModel"
+                  required
+                />
+                <label for="styled-check-1"><span>Home</span></label>
+              </h6>
             </ion-col>
             <ion-col>
               <h6>
-                                <input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required>
-                                <label for="styled-check-2"><span>Office</span></label></h6>
+                <input
+                  class="styled-checkbox"
+                  id="styled-check-2"
+                  type="radio"
+                  value="Work"
+                  [(ngModel)]="addressForm.addressType"
+                  name="addressType"
+                  #addressType="ngModel"
+                  required
+                />
+                <label for="styled-check-2"><span>Office</span></label>
+              </h6>
             </ion-col>
             <ion-col>
               <h6>
-                                <input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required>
-                                <label for="styled-check-3"><span>Others</span></label></h6>
+                <input
+                  class="styled-checkbox"
+                  id="styled-check-3"
+                  type="radio"
+                  value="Other"
+                  [(ngModel)]="addressForm.addressType"
+                  name="addressType"
+                  #addressType="ngModel"
+                  required
+                />
+                <label for="styled-check-3"><span>Others</span></label>
+              </h6>
             </ion-col>
           </ion-row>
-                    <div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" class="ion-padding-start">
+          <div
+            class="md-errors-spacer"
+            [hidden]="addressType.valid || addressType.pristine"
+            class="ion-padding-start"
+          >
             Address Type is required
           </div>
         </ion-grid>
-                <button class="add_btn" type="submit" [disabled]="!addressForm.form.valid">ADD</button>
+        <button
+          class="add_btn"
+          type="submit"
+          [disabled]="!addressForm.form.valid"
+        >
+          ADD
+        </button>
       </div>
     </form>
   </div>
+  <div class="loader" *ngIf="loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>

src/app/nearby/nearby.page.ts

-import {Component, OnInit, ViewChild, ElementRef, NgZone} from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  NgZone
+} from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MapsAPILoader, MouseEvent } from '@agm/core';
@@ -14,7 +20,6 @@ import * as firebase from 'firebase';
   templateUrl: './nearby.page.html',
   styleUrls: ['./nearby.page.scss']
 })
-
 export class NearbyPage implements OnInit {
   latitude: number;
   longitude: number;
@@ -26,6 +31,7 @@ export class NearbyPage implements OnInit {
   successState: boolean;
   uid: string;
   type: any;
+  loader: boolean;
   public searchElementRef: ElementRef;
 
   constructor(
@@ -39,14 +45,14 @@ export class NearbyPage implements OnInit {
   ) {
     this.successState = false;
     this.type = 0;
-    const users = this.service.get('user').then((data) => {
+    const users = this.service.get('user').then(data => {
       if (data) {
         data = JSON.parse(data);
         this.uid = data.uid;
       }
     });
 
-    this.service.get('type').then((data) => {
+    this.service.get('type').then(data => {
       this.type = data;
     });
   }
@@ -109,6 +115,7 @@ export class NearbyPage implements OnInit {
   }
 
   onSubmit(data: any) {
+    this.loader = true;
     console.log(data);
     const postData: Address = {
       address: this.address,
@@ -122,7 +129,9 @@ export class NearbyPage implements OnInit {
     };
     this.addressService.addressCreate(postData);
     this.successState = true;
+
     setTimeout(() => {
+      this.loader = false;
       this.successState = false;
       if (this.type === 1) {
         this.service.set('type', 0);

src/app/productdetail/productdetail.page.html

@@ -20,10 +20,7 @@
       <div class="featured_badge" *ngIf="product.featured">Featured</div>
       <ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
         <ion-slide *ngFor="let prodImg of slideData">
-          <img
-            [src]="prodImg"
-            onerror="this.src='../assets/[email protected]'"
-          />
+          <img [src]="prodImg" onerror="this.src='../assets/[email protected]'" />
         </ion-slide>
         <!-- <ion-slide>
           <img
@@ -45,10 +42,13 @@
           <h3>{{product.prodName}}</h3>
           <p>
             <strong
-              ><span><img src="../assets/Path61_2.png"/></span>0</strong
+              ><span><img src="../assets/Path61_2.png"/></span
+              >{{product.rating}}</strong
             >&nbsp; {{product.category}}, {{product.subCate}}
             <br />
-            <span *ngFor="let tag of product.tag">#{{tag}}&nbsp;</span>
+            <span *ngFor="let tag of product.tag"
+              ><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span
+            >
           </p>
         </ion-col>
         <ion-col size="4">
@@ -265,6 +265,12 @@
       </div>
     </div>
   </div>
+  <div class="loader" *ngIf="loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>
 <ion-footer>
   <div class="footer_div">

src/app/productdetail/productdetail.page.scss

@@ -9,7 +9,7 @@
     .fav_icon {
       width: 30px;
       height: 30px;
-            background-image: url("../../assets/Group32_2.png");
+      background-image: url('../../assets/Group32_2.png');
       background-position: center;
       background-repeat: no-repeat;
       background-size: 24px;
@@ -21,7 +21,7 @@
     .fav_fill {
       width: 30px;
       height: 30px;
-            background-image: url("../../assets/fav_fill.png");
+      background-image: url('../../assets/fav_fill.png');
       background-position: center;
       background-repeat: no-repeat;
       background-size: 24px;
@@ -122,6 +122,9 @@
             height: 100%;
             outline: none;
             font-size: 17px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
           #custom_check_button p {
             margin: 0px;
@@ -147,7 +150,7 @@
             top: 0px;
             opacity: 0;
           }
-                    #custom_check_button input:checked+p {
+          #custom_check_button input:checked + p {
             background-color: rgba(41, 40, 91, 1);
             color: #fff;
             border-radius: 10px !important;
@@ -210,7 +213,7 @@
             top: 0px;
             opacity: 0;
           }
-                    #custom_check_button input:checked+p {
+          #custom_check_button input:checked + p {
             border: 3px dashed #29285b;
             color: transparent;
             border-radius: 10px !important;
@@ -309,7 +312,7 @@
               font-size: 27px;
               width: 30px;
               height: 30px;
-                            background-image: url("../../assets/Group32_2.png");
+              background-image: url('../../assets/Group32_2.png');
               background-position: center;
               background-repeat: no-repeat;
               background-size: 24px;
@@ -321,7 +324,7 @@
               font-size: 27px;
               width: 30px;
               height: 30px;
-                            background-image: url("../../assets/fav_fill.png");
+              background-image: url('../../assets/fav_fill.png');
               background-position: center;
               background-repeat: no-repeat;
               background-size: 24px;
@@ -354,7 +357,7 @@
             span {
               text-decoration: line-through;
               margin-left: 10px;
-                            color: rgba(215, 213, 228, 1)
+              color: rgba(215, 213, 228, 1);
             }
             .offer {
               color: #fff;
@@ -400,13 +403,13 @@
       cursor: pointer;
     }
     .cart {
-            background-image: url("../../assets/cart_2.png");
+      background-image: url('../../assets/cart_2.png');
     }
     .fav {
-            background-image: url("../../assets/Group56_2.png");
+      background-image: url('../../assets/Group56_2.png');
     }
     .share {
-            background-image: url("../../assets/Group57_2.png");
+      background-image: url('../../assets/Group57_2.png');
     }
   }
   .footer_btn {

src/app/productdetail/productdetail.page.ts

@@ -21,6 +21,7 @@ export class ProductdetailPage implements OnInit {
   order: Order;
   data: any;
   slideData: any[];
+  loader: boolean;
 
   bannerOptions = {
     slidesPerView: 1,
@@ -45,6 +46,7 @@ export class ProductdetailPage implements OnInit {
   ) {
     const params = this.prodService.selItem;
     this.service.state = true;
+    this.loader = true;
     this.prodService.similarProd(
       params.shopperId,
       params.category,
@@ -55,6 +57,9 @@ export class ProductdetailPage implements OnInit {
       this.data = val;
     });
     this.cartService.cartList();
+    setTimeout(() => {
+      this.loader = false;
+    }, 1000);
     // console.log(this.prodService.fav);
   }
 
@@ -87,6 +92,7 @@ export class ProductdetailPage implements OnInit {
         image: params.image,
         price: params.price,
         qty: params.qty,
+        rating: params.rating,
         shopper: params.shopper,
         skuCode: params.skuCode,
         status: params.status,

src/app/productlist/productlist.page.html

@@ -3,22 +3,34 @@
     <img src="../assets/Group17_2.png" />
   </button>
   <div class="nav_title floatLeft">
-        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" />
+    <input
+      class="search_bar"
+      placeholder="Search here.. eg:shirts, retailers etc..."
+      (click)="clickSearch()"
+    />
   </div>
-    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="clickSearch()"></button>
-    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
+  <button
+    class="nav_btn nav_search floatRight"
+    *ngIf="!searchShow"
+    (click)="clickSearch()"
+  ></button>
+  <button
+    class="nav_btn nav_close floatRight"
+    *ngIf="searchShow"
+    (click)="searchClose()"
+  ></button>
   <div class="clear"></div>
 </div>
 <ion-content>
-
   <div class="product_list">
     <div class="product_taskbar">
-            <div class="filter floatLeft" (click)="istoggle()">
-
-            </div>
+      <div class="filter floatLeft" (click)="istoggle()"></div>
       <div class="viewset floatRight">
-                <div class="grid_view grid_act floatRight" (click)="gridToggle()" [class.line_view]="onGrid">
-                </div>
+        <div
+          class="grid_view grid_act floatRight"
+          (click)="gridToggle()"
+          [class.line_view]="onGrid"
+        ></div>
         <div class="clear"></div>
       </div>
       <div class="clear"></div>
@@ -26,35 +38,64 @@
     <div class="product_title" *ngIf="data">
       {{data.shopName}}
     </div>
-        <ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
+    <ul
+      [class.grid_view]="onGrid"
+      *ngIf="prodService.product && prodService.product.length > 0"
+    >
       <li *ngFor="let product of prodService.product; let i = index">
         <div class="product_image">
           <div class="load-back">
-                        <img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)">
-                    </div>
-                    <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)">
+            <img
+              [src]="product.image"
+              onerror="this.src='../assets/[email protected]'"
+              (click)="prodDetails(i)"
+            />
           </div>
+          <div
+            [ngClass]="checkFavStatus(product.prodId)"
+            (click)="changeFav(product.prodId)"
+          ></div>
           <div class="featured_badge" *ngIf="product.featured">Featured</div>
         </div>
         <h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
-                <p (click)="prodDetails(i)">A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
+        <p (click)="prodDetails(i)">
+          A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0"
+            >-{{product.discount}}%</span
+          >
+        </p>
       </li>
     </ul>
   </div>
-    <ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
+  <ul
+    [class.grid_view]="onGrid"
+    *ngIf="prodService.product && prodService.product.length > 0"
+  >
     <li *ngFor="let product of prodService.product; let i = index">
       <div class="product_image">
-                <img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)" />
-                <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
+        <img
+          [src]="product.image"
+          onerror="this.src='../assets/[email protected]'"
+          (click)="prodDetails(i)"
+        />
+        <div
+          [ngClass]="checkFavStatus(product.prodId)"
+          (click)="changeFav(product.prodId)"
+        ></div>
         <div class="featured_badge" *ngIf="product.featured">Featured</div>
       </div>
       <h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
       <p (click)="prodDetails(i)">
-                A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span
+        A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0"
+          >-{{product.discount}}%</span
         >
       </p>
     </li>
   </ul>
+
+  <div class="no-result-wrapper" *ngIf="prodService.product.length === 0">
+    <img src="../../assets/basket.png" />
+    <h1>No result found</h1>
+    <button (click)="goToPage('home')">home</button>
   </div>
   <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
     <div class="sort_inner">
@@ -104,9 +145,20 @@
       </div>
     </div>
   </div>
+  <div class="loader" *ngIf="loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>
 <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
   <ul *ngIf="searchService.searchList">
-        <li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
+    <li
+      *ngFor="let search of searchService.searchList"
+      (click)="viewPage(search)"
+    >
+      {{search.text}}
+    </li>
   </ul>
 </div>

src/app/productlist/productlist.page.scss

@@ -13,7 +13,7 @@
     height: 45px;
     width: calc(100% - 20px);
     margin: 0 auto;
-        background-image: url("../../assets/Group109_2.png");
+    background-image: url('../../assets/Group109_2.png');
     background-position: left;
     background-repeat: no-repeat;
     background-size: 12px;
@@ -33,10 +33,10 @@
         background-position: center;
         background-repeat: no-repeat;
         background-size: 15px;
-                background-image: url("../../assets/Group111_2.png");
+        background-image: url('../../assets/Group111_2.png');
       }
       .line_view {
-                background-image: url("../../assets/Group110_2.png");
+        background-image: url('../../assets/Group110_2.png');
         cursor: pointer;
       }
     }
@@ -88,7 +88,7 @@
           font-size: 27px;
           width: 30px;
           height: 30px;
-                    background-image: url("../../assets/Group32_2.png");
+          background-image: url('../../assets/Group32_2.png');
           background-position: center;
           background-repeat: no-repeat;
           background-size: 24px;
@@ -100,7 +100,7 @@
           font-size: 27px;
           width: 30px;
           height: 30px;
-                    background-image: url("../../assets/fav_fill.png");
+          background-image: url('../../assets/fav_fill.png');
           background-position: center;
           background-repeat: no-repeat;
           background-size: 24px;
@@ -126,7 +126,7 @@
         span {
           text-decoration: line-through;
           margin-left: 10px;
-                    color: rgba(215, 213, 228, 1)
+          color: rgba(215, 213, 228, 1);
         }
         .offer {
           color: #fff;
@@ -192,14 +192,14 @@
         .styled-checkbox {
           position: absolute; // take it out of document flow
           opacity: 0; // hide it
-                    &+label {
+          & + label {
             position: relative;
             cursor: pointer;
             padding: 0;
             width: 100%;
           }
           // Box.
-                    &+label:before {
+          & + label:before {
             content: '';
             margin-right: 10px;
             display: inline-block;
@@ -210,21 +210,21 @@
             background: white;
             border: 1px solid rgba(215, 213, 228, 1);
           }
-                    &:checked+label:before {
+          &:checked + label:before {
             background: #29285b;
           }
           // Disabled state label.
-                    &:disabled+label {
+          &:disabled + label {
             color: #b8b8b8;
             cursor: auto;
           }
           // Disabled box.
-                    &:disabled+label:before {
+          &:disabled + label:before {
             box-shadow: none;
             background: #ddd;
           }
           // Checkmark. Could be replaced with an image
-                    &:checked+label:after {
+          &:checked + label:after {
             content: '';
             position: absolute;
             left: 6px;
@@ -232,7 +232,8 @@
             background: white;
             width: 2px;
             height: 2px;
-                        box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+            box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
+              4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
             transform: rotate(45deg);
           }
         }
@@ -261,6 +262,31 @@
 .load-back {
   height: 100%;
   width: 100%;
-    background-image: url("../../assets/giphy.gif");
+  background-image: url('../../assets/giphy.gif');
   background-position: center;
 }
+
+.no-result-wrapper {
+  text-align: center;
+  padding-top: 40%;
+  img {
+    width: 100px;
+  }
+  h1 {
+    font-size: 18px;
+    font-weight: bolder;
+    text-transform: uppercase;
+    color: #3b394d;
+  }
+  button {
+    background-color: #29285b;
+    border-radius: 8px;
+    height: 50px;
+    width: 48%;
+    color: #fff;
+    font-size: 18px;
+    font-weight: lighter;
+    text-transform: uppercase;
+    margin-top: 10px;
+  }
+}

src/app/productlist/productlist.page.ts

-import { Component, OnInit } from "@angular/core";
-import { Location } from "@angular/common";
-import { trigger, transition, animate, style } from "@angular/animations";
-import { Router, ActivatedRoute, NavigationExtras } from "@angular/router";
-import { ProductsService } from "./../../config/products.service";
-import { ServiceService } from "./../../config/service.service";
-import { SearchService } from "./../../config/search.service";
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
+import { ProductsService } from './../../config/products.service';
+import { ServiceService } from './../../config/service.service';
+import { SearchService } from './../../config/search.service';
+import { ModalController } from '@ionic/angular';
+import { SearchmodalPage } from '../searchmodal/searchmodal.page';
+import { SubjectService } from './../../config/subject.service';
 
 @Component({
-  selector: "app-productlist",
-  templateUrl: "./productlist.page.html",
-  styleUrls: ["./productlist.page.scss"],
+  selector: 'app-productlist',
+  templateUrl: './productlist.page.html',
+  styleUrls: ['./productlist.page.scss'],
   animations: [
-    trigger("slideInOut", [
-      transition(":enter", [
-        style({ transform: "translateY(100%)" }),
-        animate("200ms ease-in", style({ transform: "translateY(0%)" }))
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateY(100%)' }),
+        animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
       ]),
-      transition(":leave", [
-        animate("200ms ease-out", style({ transform: "translateY(100%)" }))
+      transition(':leave', [
+        animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
       ])
     ])
   ]
@@ -28,6 +31,7 @@ export class ProductlistPage implements OnInit {
   data: any;
   searchShow = false;
   sortValue: string;
+  loader: boolean;
 
   constructor(
     private router: Router,
@@ -35,12 +39,18 @@ export class ProductlistPage implements OnInit {
     private location: Location,
     public prodService: ProductsService,
     public service: ServiceService,
-    public searchService: SearchService
+    public searchService: SearchService,
+    private modalController: ModalController,
+    private subjectService: SubjectService
   ) {
-    this.service.get("params").then(val => {
+    this.loader = true;
+    this.service.get('params').then(val => {
       this.data = val;
       console.log(this.data);
       this.prodService.prodList(this.data.uid);
+      setTimeout(() => {
+        this.loader = false;
+      }, 2000);
     });
   }
 
@@ -64,9 +74,15 @@ export class ProductlistPage implements OnInit {
     this.onGrid = !this.onGrid;
   }
 
-  clickSearch() {
-    this.searchShow = true;
-    this.searchService.searchList = [];
+  async clickSearch() {
+    this.subjectService.setTabData(false);
+    const modal = await this.modalController.create({
+      component: SearchmodalPage
+    });
+    modal.onDidDismiss().then(dataReturned => {
+      this.subjectService.setTabData(true);
+    });
+    return await modal.present();
   }
 
   searchClose() {
@@ -75,7 +91,7 @@ export class ProductlistPage implements OnInit {
 
   prodDetails(index: number) {
     this.prodService.setProd(this.prodService.product[index]);
-    this.router.navigateByUrl("productdetail");
+    this.router.navigateByUrl('productdetail');
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
@@ -85,10 +101,10 @@ export class ProductlistPage implements OnInit {
     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);
@@ -106,7 +122,7 @@ export class ProductlistPage implements OnInit {
 
   checkFavStatus(index) {
     const state = this.prodService.fav.findIndex(x => x === index);
-    return state > -1 ? "fav_fill" : "fav_icon";
+    return state > -1 ? 'fav_fill' : 'fav_icon';
   }
 
   searchFun(data: string) {
@@ -117,19 +133,19 @@ export class ProductlistPage implements OnInit {
     console.log(datas);
     let data;
     let url;
-    if (datas.type === "shopper") {
+    if (datas.type === 'shopper') {
       data = datas.data;
-      this.service.set("params", data);
-      url = "productlist";
-    } else if (datas.type === "category") {
+      this.service.set('params', data);
+      url = 'productlist';
+    } else if (datas.type === 'category') {
       data = datas.data;
-      this.service.set("params", data);
-      url = "catstorelist";
+      this.service.set('params', data);
+      url = 'catstorelist';
     } else {
       data = datas.data;
       data.size = this.service.splitSep(data.size);
       data.tag = this.service.splitSep(data.tag);
-      (data.color = this.service.splitSep(data.color)), (url = "productdetail");
+      (data.color = this.service.splitSep(data.color)), (url = 'productdetail');
       this.prodService.setProd(data);
     }
     this.searchClose();

src/app/profile/profile.page.html

@@ -8,7 +8,6 @@
   <div class="clear"></div>
 </div>
 
-
 <ion-content>
   <div class="profile_wrapper" *ngIf="loggedUser">
     <div class="profile_banner">
@@ -17,7 +16,10 @@
       </div> -->
 
       <div class="profile_circle">
-                <img [src]="loggedUser.profilePhoto" onerror="this.src='./../../assets/profile_banner.png'" />
+        <img
+          [src]="loggedUser.profilePhoto"
+          onerror="this.src='./../../assets/profile_banner.png'"
+        />
         <div class="edit"></div>
         <input type="file" accept="image/*" (change)="fileChange($event)" />
       </div>
@@ -28,8 +30,11 @@
     <div class="account_wrapper">
       <div class="account_header">
         <h5 class="floatLeft">ACCOUNT INFORMATION</h5>
-                <span class="floatRight" (click)="goToPage('changedetails', user && user)"><img
-            src="../../assets/edit.png" /></span>
+        <span
+          class="floatRight"
+          (click)="goToPage('changedetails', user && user)"
+          ><img src="../../assets/edit.png"
+        /></span>
         <div class="clear"></div>
       </div>
       <div class="row">
@@ -38,7 +43,9 @@
             <p>
               Phone
               <span *ngIf="loggedUser.phoneVerified == true">Verified</span>
-                            <span *ngIf="loggedUser.phoneVerified == false">Not Verified yet</span>
+              <span *ngIf="loggedUser.phoneVerified == false"
+                >Not Verified yet</span
+              >
             </p>
           </ion-col>
           <ion-col class="textRight p0">
@@ -50,8 +57,12 @@
         <ion-row>
           <ion-col class="textLeft p0">
             <p>
-                            Email<span *ngIf="userData && userData.emailVerified == true">Verified</span>
-                            <span *ngIf="loggedUser.emailVerified == false">Not Verified yet</span>
+              Email<span *ngIf="userData && userData.emailVerified == true"
+                >Verified</span
+              >
+              <span *ngIf="loggedUser.emailVerified == false"
+                >Not Verified yet</span
+              >
             </p>
           </ion-col>
           <ion-col class="textRight p0">
@@ -64,8 +75,8 @@
         <ion-col class="textLeft p0">
           <p>Wishlist</p>
         </ion-col>
-                <ion-col class="textRight p0">
-                    <h6>(3)</h6>
+        <ion-col class="textRight p0" (click)="goToPage('wishlist')">
+          <h6>(0)</h6>
         </ion-col>
       </ion-row>
       <hr />
@@ -73,22 +84,24 @@
         <ion-col class="textLeft p0">
           <p>Address</p>
         </ion-col>
-                <ion-col class="textRight p0">
-                    <h6>(1)</h6>
+        <ion-col class="textRight p0" (click)="goToPage('address')">
+          <h6 *ngIf="addressService.addList">
+            ({{addressService.addressList.length}})
+          </h6>
         </ion-col>
       </ion-row>
       <hr />
-            <ion-row>
+      <!-- <ion-row>
         <ion-col class="textLeft p0">
           <p>My Cards</p>
         </ion-col>
-                <ion-col class="textRight p0">
+        <ion-col class="textRight p0" (click)="goToPage('addcard')">
           <h6>
             <ion-icon name="arrow-forward"></ion-icon>
           </h6>
         </ion-col>
       </ion-row>
-            <hr />
+      <hr /> -->
       <ion-row>
         <ion-col class="textLeft p0">
           <p>My Order</p>
@@ -119,14 +132,16 @@
           <button class="btn-cancel floatLeft" (click)="istoggle();">
             Cancel
           </button>
-                    <button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">
+          <button
+            class="btn-logout floatRight"
+            (click)="authService.SignOut(); istoggle()"
+          >
             Logout
           </button>
+        </div>
 
         <div class="clear"></div>
       </div>
     </div>
   </div>
-    </div>
-    </div>
 </ion-content>

src/app/signup/signup.page.html

@@ -174,6 +174,12 @@
       </div>
     </div>
   </div>
+  <div class="loader" *ngIf="register.loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>
 <div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]>
   <div class="terms_inner">

src/app/storelist/storelist.page.html

@@ -4,13 +4,13 @@
     <input
       class="search_bar"
       placeholder="Search here.. eg:shirts, retailers etc..."
-      (click)="clickSearch()"
+      (click)="searchModal()"
     />
   </div>
   <button
     class="nav_btn nav_search floatRight"
     *ngIf="!searchShow"
-    (click)="clickSearch()"
+    (click)="searchModal()"
   ></button>
   <button
     class="nav_btn nav_close floatRight"
@@ -78,6 +78,12 @@
       </ul>
     </div>
   </div>
+  <div class="loader" *ngIf="loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>
 
 <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>

src/app/storelist/storelist.page.ts

-import { Component, OnInit } from "@angular/core";
-import { trigger, transition, animate, style } from "@angular/animations";
-import { Router } from "@angular/router";
-import { Location } from "@angular/common";
-import { ServiceService } from "./../../config/service.service";
-import { ShoppersService } from "./../../config/shopper.service";
-import { SearchService } from "../../config/search.service";
+import { Component, OnInit } from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { ServiceService } from './../../config/service.service';
+import { ShoppersService } from './../../config/shopper.service';
+import { SearchService } from '../../config/search.service';
+import { ModalController } from '@ionic/angular';
+import { SearchmodalPage } from '../searchmodal/searchmodal.page';
+import { SubjectService } from './../../config/subject.service';
 @Component({
-  selector: "app-storelist",
-  templateUrl: "./storelist.page.html",
-  styleUrls: ["./storelist.page.scss"],
+  selector: 'app-storelist',
+  templateUrl: './storelist.page.html',
+  styleUrls: ['./storelist.page.scss'],
   animations: [
-    trigger("slideInOut", [
-      transition(":enter", [
-        style({ transform: "translateY(100%)" }),
-        animate("200ms ease-in", style({ transform: "translateY(0%)" }))
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateY(100%)' }),
+        animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
       ]),
-      transition(":leave", [
-        animate("200ms ease-out", style({ transform: "translateY(100%)" }))
+      transition(':leave', [
+        animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
       ])
     ])
   ]
@@ -27,24 +30,31 @@ export class StorelistPage implements OnInit {
     slidesPerView: 1.5
   };
   data: any;
+  loader: boolean;
 
   constructor(
     public router: Router,
     public location: Location,
     public service: ServiceService,
     public shopperService: ShoppersService,
-    private searchService: SearchService
+    private searchService: SearchService,
+    private modalController: ModalController,
+    private subjectService: SubjectService
   ) {
-    this.service.get("params").then(val => {
+    this.loader = true;
+    this.service.get('params').then(val => {
       this.data = val;
-      this.shopperService.shopperList(this.data.cId, "centerId");
+      this.shopperService.shopperList(this.data.cId, 'centerId');
+      setTimeout(() => {
+        this.loader = false;
+      }, 2000);
     });
   }
 
   ngOnInit() {}
 
   goToPage(path, data = null) {
-    this.service.set("params", data);
+    this.service.set('params', data);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
@@ -58,6 +68,17 @@ export class StorelistPage implements OnInit {
     this.searchService.searchList = [];
   }
 
+  async searchModal() {
+    this.subjectService.setTabData(false);
+    const modal = await this.modalController.create({
+      component: SearchmodalPage
+    });
+    modal.onDidDismiss().then(dataReturned => {
+      this.subjectService.setTabData(true);
+    });
+    return await modal.present();
+  }
+
   searchClose() {
     this.searchShow = false;
   }

src/app/verification/verification.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>VERIFICATION</h4>
@@ -8,23 +8,39 @@
   <div class="clear"></div>
 </div>
 <ion-content>
-    <div class="verification_div">
+  <div class="verification_div" *ngIf="authService.userPostData">
     <div class="form_div">
       <div class="row">
         <p>We have sent and OTP to</p>
-                <h6>+01 {{authService.userPostData.phone}} </h6>
+        <h6>+01 {{authService.userPostData.phone}}</h6>
       </div>
       <div class="row">
-                <input class="" type="number" placeholder="Type OTP" maxlength="4" #otp required>
+        <input
+          class=""
+          type="number"
+          placeholder="Type OTP"
+          maxlength="4"
+          #otp
+          required
+        />
       </div>
       <div class="row">
-                <button class="login_btn"  (click)="authService.verify(otp.value)">SUBMIT</button>
+        <button class="login_btn" (click)="authService.verify(otp.value)">
+          SUBMIT
+        </button>
       </div>
       <div class="row">
-                <button class="resend_btn"  (click)="authService.resend()">RESEND</button>
+        <button class="resend_btn" (click)="authService.resend()">
+          RESEND
+        </button>
       </div>
       <h6>OTP: {{authService.userPostData.otp}}</h6>
     </div>
   </div>
-
+  <div class="loader" *ngIf="authService.loader">
+    <div class="lds-ripple">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
 </ion-content>

src/app/wishlist/wishlist.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>WISHLIST</h4>
@@ -9,8 +9,7 @@
 </div>
 
 <ion-content>
-
-    <div class="wishlist-wrapper">
+  <!-- <div class="wishlist-wrapper">
         <ul>
             <li>
                 <div class="wishlist_image">
@@ -39,17 +38,16 @@
                 <div class="clear"></div>
             </li>
         </ul>
-    </div>
+    </div> -->
 
   <div class="empty-wishlist-wrapper">
-        <img src="../../assets/wishlist.png">
+    <img src="../../assets/wishlist.png" />
     <h1>There is no products added</h1>
-        <button>shop now</button>
+    <button (click)="goToPage('home')">shop now</button>
   </div>
 
   <div class="footer-btns-wrapper">
     <button class="btn-clear">Clear All</button>
     <button class="btn-cart">add all to cart</button>
   </div>
-
 </ion-content>

src/app/wishlist/wishlist.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-wishlist',
@@ -7,11 +8,16 @@ import { Location } from '@angular/common';
   styleUrls: ['./wishlist.page.scss']
 })
 export class WishlistPage implements OnInit {
-  constructor(private location: Location) {}
+  constructor(private location: Location, private router: Router) {}
 
   ngOnInit() {}
 
   goBack() {
     this.location.back();
   }
+
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
 }

src/config/products.service.ts

 import { Injectable } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
+import {
+  AngularFirestore,
+  AngularFirestoreCollection,
+  AngularFirestoreDocument
+} from '@angular/fire/firestore';
 import { take } from 'rxjs/operators';
 import { ServiceService } from './../config/service.service';
 import { Products } from './services/product';
@@ -30,7 +34,7 @@ export class ProductsService {
     const state = true;
 
     // firebase query
-    return new Promise (resolve => {
+    return new Promise(resolve => {
       const prodRef: AngularFirestoreCollection<any> = this.afs.collection(
         `product_gallery`,
         ref => ref.where('skuId', '==', skuID)
@@ -39,7 +43,7 @@ export class ProductsService {
         this.prodSlideImg = [];
         const res = value;
         if (res.length > 0) {
-          res.forEach((item) => {
+          res.forEach(item => {
             this.prodSlideImg.push(item.downloadURL);
           });
           resolve(this.prodSlideImg);
@@ -83,6 +87,7 @@ export class ProductsService {
             shopper: item.shopper,
             skuCode: item.skuCode,
             status: item.status,
+            rating: item.rating,
             size: this.service.splitSep(item.size),
             subCate: item.subCate,
             tag: this.service.splitSep(item.tag)
@@ -143,6 +148,7 @@ export class ProductsService {
             image: item.image,
             price: item.price,
             qty: item.qty,
+            rating: item.rating,
             shopper: item.shopper,
             skuCode: item.skuCode,
             status: item.status,
@@ -196,6 +202,7 @@ export class ProductsService {
             price: item.price,
             qty: item.qty,
             shopper: item.shopper,
+            rating: item.rating,
             skuCode: item.skuCode,
             status: item.status,
             size: this.service.splitSep(item.size),

src/config/services/product.ts

@@ -18,5 +18,6 @@ export interface Products {
   skuCode: string;
   status: boolean;
   subCate: boolean;
+  rating: string;
   tag: string[];
 }

src/config/subject.service.ts

@@ -8,6 +8,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 export class SubjectService {
   private loginState = new BehaviorSubject<any>(null);
   private DataState = new BehaviorSubject<any>(null);
+  private TabState = new BehaviorSubject<any>(null);
 
   sendLoginData(state: any) {
     this.loginState.next(state);
@@ -24,4 +25,12 @@ export class SubjectService {
   getUserData(): Observable<any> {
     return this.DataState.asObservable();
   }
+
+  setTabData(state: any) {
+    return this.TabState.next(state);
+  }
+
+  getTabData(): Observable<any> {
+    return this.TabState.asObservable();
+  }
 }