Merge branch 'adarsh' into 'master'

package.json

@@ -24,9 +24,9 @@
         "@angular/platform-browser-dynamic": "~8.1.2",
         "@angular/router": "~8.1.2",
         "@ionic-native/core": "^5.0.0",
-        "@ionic-native/geolocation": "^5.0.0",
+        "@ionic-native/geolocation": "^5.15.1",
         "@ionic-native/google-plus": "^5.0.0-beta.0",
-        "@ionic-native/native-geocoder": "^5.0.0",
+        "@ionic-native/native-geocoder": "^5.15.1",
         "@ionic-native/splash-screen": "^5.0.0",
         "@ionic-native/status-bar": "^5.12.0",
         "@ionic/angular": "^4.7.1",
@@ -46,6 +46,7 @@
         "core-js": "^2.5.4",
         "firebase": "^6.4.0",
         "rxjs": "~6.5.1",
+        "rxjs-compat": "^6.5.3",
         "tslib": "^1.9.0",
         "zone.js": "~0.9.1"
     },

src/app/addaddresss/addaddresss.page.html

@@ -10,56 +10,86 @@
 <ion-content>
     <div class="login_wrapper">
         <div class="form_div">
+            <form #addressForm="ngForm" novalidate>
                 <ion-grid>
                     <ion-row>
                         <ion-col>
                             <h6>
-                            <input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="value1">
+                                <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="value2">
+                                <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="value3">
+                                <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">
+                            Address Type is required
+                    </div>
                 </ion-grid>
 
                 <div class="row">
-
+                    <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">
+                        Address 1 is required
                 </div>
                 <div class="row">
-                <input class="" type="text" placeholder="Full name">
+                    <input class="" type="text" placeholder="Address 2" [(ngModel)]="address.secondAddress" name="secondAddress" #secondAddress="ngModel">
                 </div>
                 <div class="row">
-                <input class="" type="text" placeholder="Phone Number">
+                    <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="Country">
+                    <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="State">
+                    <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="District">
+                    <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="City">
+                    <input class="" type="text" placeholder="Area" [(ngModel)]="address.area" name="area" #area="ngModel">
                 </div>
+                
                 <div class="row">
-                <input class="" type="text" placeholder="Area">
+                    <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="Landmark">
+                        <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">
-                <button class="login_btn" (click)="goToPage('addcard')">ADD</button>
+                    <button class="login_btn" (click)="onAddrss(addressForm)">ADD</button>
                 </div>
+            </form>
         </div>
     </div>
 </ion-content>
\ No newline at end of file

src/app/addaddresss/addaddresss.page.ts

-import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { NgForm } from '@angular/forms';
+import { AuthService } from './../../config/auth.service';
+import { Address } from './../../config/services/user';
+
 
 @Component({
   selector: 'app-addaddresss',
@@ -9,10 +15,37 @@ import { Router, ActivatedRoute } from '@angular/router';
 })
 export class AddaddresssPage implements OnInit {
 
+  geoLatitude: number;
+  geoLongitude: number;
+  geoAccuracy: number;
+  geoAddress: string;
+  address: Address  = {
+    addressType: '',
+    area: '',
+    city: '',
+    country: '',
+    district: '',
+    firstAddress: '',
+    landmark: '',
+    zip: '',
+    secondAddress: '',
+    state: '',
+    default: 0
+  };
+  submitted = false;
+
+  geoencoderOptions: NativeGeocoderOptions = {
+    useLocale: true,
+    maxResults: 5
+  };
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    private geolocation: Geolocation,
+    private nativeGeocoder: NativeGeocoder,
+    private register: AuthService
   ) { }
 
   ngOnInit() {
@@ -27,4 +60,58 @@ export class AddaddresssPage implements OnInit {
     this.location.back();
   }
 
+  getGeolocation() {
+    console.log('getLocation');
+    this.geolocation.getCurrentPosition().then(pos => {
+      console.log('get New location');
+      console.log(pos);
+      this.geoLatitude = pos.coords.latitude;
+      this.geoLongitude = pos.coords.longitude;
+      this.geoAccuracy = pos.coords.accuracy;
+      this.getGeoencoder(this.geoLatitude, this.geoLongitude);
+    }).catch(err => {
+      alert('Error getting location' + JSON.stringify(err));
+    });
+  }
+
+  getGeoencoder(latitude, longitude) {
+    console.log('reached');
+    this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
+    .then((result: NativeGeocoderResult[]) => {
+      console.log(result);
+      this.geoAddress = this.generateAddress(result[0]);
+      console.log(this.geoAddress);
+    })
+    .catch((error: any) => {
+      alert('Error getting location' + JSON.stringify(error));
+    });
+  }
+
+  generateAddress(addressObj) {
+    const obj = [];
+    let address = '';
+    // tslint:disable-next-line:forin
+    for (const key in addressObj) {
+      obj.push(addressObj[key]);
+    }
+    obj.reverse();
+    for (const val in obj) {
+      if (obj[val].length) {
+      address += obj[val] + ', ';
+      }
+    }
+    return address.slice(0, -2);
+}
+
+onAddrss(form: NgForm) {
+  this.submitted = true;
+  console.log(form.value);
+  if (form.valid) {
+    console.log(form.value);
+    this.register.createAddress(form.value);
+  } else {
+    console.log(form.errors);
+  }
+}
+
 }

src/app/app-routing.module.ts

@@ -27,13 +27,13 @@ const routes: Routes = [
   { path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
   { path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' },
   { path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' },
+  { path: 'catstorelist', loadChildren: './catstorelist/catstorelist.module#CatStorelistPageModule' },
   { path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' },
   { path: 'review', loadChildren: './review/review.module#ReviewPageModule' },
   { path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' },
   { path: 'addcard', loadChildren: './addcard/addcard.module#AddcardPageModule' }
 
 
-  
 ];
 @NgModule({
   imports: [

src/app/app.component.html

@@ -15,20 +15,24 @@
                     </div>
                     <div class="sidemenu_list">
                         <ul>
-                            <li>Shop</li>
+                            <ion-menu-toggle>
+                            <li (click)="vieworder('home')">Shop</li>
+                            </ion-menu-toggle>
                             <li>About us</li>
                             <ion-menu-toggle>
                                 <li (click)="vieworder('myorder')">View Order</li>
                             </ion-menu-toggle>
 
                             <div class="sub_menu">
-                                <ul>
-                                    <li>Men's Fashion</li>
-                                    <li>Women's Fashion</li>
+                                <ul *ngIf="categoryService.activecategories">
+                                    <ion-menu-toggle>
+                                        <li *ngFor="let category of categoryService.activecategories" (click)="goToPage('catstorelist', category)">{{category.catName}}</li>
+                                    </ion-menu-toggle>
+                                    <!-- <li>Women's Fashion</li>
                                     <li>Features</li>
                                     <li>Bags</li>
                                     <li>Shoes</li>
-                                    <li>Electronics</li>
+                                    <li>Electronics</li> -->
                                 </ul>
                             </div>
                             <li>Complaints & Feedback</li>
@@ -45,7 +49,7 @@
         <ion-router-outlet main></ion-router-outlet>
     </ion-split-pane>
 </ion-app>
-<div class="common_tab">
+<div class="common_tab" [hidden]="getState()">
     <ul>
         <li>
             <div class="icon_sec m1_icon" [class.m1_icon_act]="sec_active1" (click)="setActive1()"></div>

src/app/app.component.ts

@@ -8,7 +8,8 @@ import * as firebase from 'firebase';
 import { ModalController } from '@ionic/angular';
 import { DeliverypopPage } from './deliverypop/deliverypop.page';
 import { AuthService } from './../config/auth.service';
-
+import { ServiceService } from './../config/service.service';
+import { CategoriesService } from './../config/category.service';
 
 @Component({
   selector: 'app-root',
@@ -33,7 +34,9 @@ export class AppComponent {
     private router: Router,
     public afs: AngularFirestore,
     public modalController: ModalController,
-    public authService: AuthService
+    public authService: AuthService,
+    public service: ServiceService,
+    public categoryService: CategoriesService
   ) {
     this.initializeApp();
     this.orderState();
@@ -106,6 +109,10 @@ export class AppComponent {
     
   }
 
+  getState() {
+    return this.service.state;
+  }
+
   orderState() {
     console.log('called');
     const custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2';
@@ -147,4 +154,10 @@ export class AppComponent {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
+
+  goToPage(path, data = null) {
+    this.service.set('params', data);
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
 }

src/app/app.module.ts

@@ -17,11 +17,16 @@ import { AngularFirestore } from '@angular/fire/firestore';
 import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { AngularFireAuthModule } from '@angular/fire/auth';
 
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
+
+
 import { environment } from '../environments/environment';
 import { ServiceService } from './../config/service.service';
 import { AuthService } from './../config/auth.service';
 import { from } from 'rxjs';
 import { DeliverypopPageModule} from './deliverypop/deliverypop.module';
+import { FormsModule } from '@angular/forms';
 
 
 
@@ -40,11 +45,14 @@ import { DeliverypopPageModule} from './deliverypop/deliverypop.module';
       AngularFireModule.initializeApp(environment.firebase),
       DeliverypopPageModule,
       AngularFireAuthModule,
-      AngularFirestoreModule
+      AngularFirestoreModule,
+      FormsModule
   ],
   providers: [
     StatusBar,
     SplashScreen,
+    Geolocation,
+    NativeGeocoder,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     ServiceService,
     AuthService,

src/app/cart/cart.page.html

@@ -30,8 +30,8 @@
                     <ion-slide>
                         <div class="cart_list" *ngIf="cartService.carts">
                             <ul *ngIf="cartService.carts.length > 0">
-                                <li *ngFor="let carts of cartService.carts">
-                                    <div class="close"></div>
+                                <li *ngFor="let carts of cartService.carts; let i= index">
+                                    <div class="close" (click)="cartService.removeItem(i)"></div>
                                     <div class="cart_image"><img [src]="carts.image" onerror="this.src=''" /></div>
                                     <div class="cart_detail">
                                         <h4>{{carts.prodName}}</h4>
@@ -39,9 +39,9 @@
                                         <h5>A$ {{carts.price}}</h5>
                                     </div>
                                     <div class="cart_count">
-                                        <div class="add" (click)="addCount()">+</div>
-                                        <div class="count">{{count}}</div>
-                                        <div class="remove" (click)="removeCount()">-</div>
+                                        <div class="add" (click)="cartService.addCount(i)">+</div>
+                                        <div class="count">{{carts.qty}}</div>
+                                        <div class="remove" (click)="cartService.removeCount(i)">-</div>
                                     </div>
                                     <div class="clear"></div>
                                 </li>

src/app/cart/cart.page.ts

@@ -18,7 +18,7 @@ export class CartPage implements OnInit {
   @ViewChild(IonSlides, { static: false }) slides: IonSlides;
   currentIndex: any;
   count: any;
-  gateway:any;
+  gateway: any;
   loader = false;
   cartwizard = {
     initialSlide: 0,
@@ -44,7 +44,7 @@ export class CartPage implements OnInit {
   ngOnInit() {
   }
 
-  getwaypaypal(){
+  getwaypaypal() {
     this.gateway = 1;
   }
 
@@ -103,7 +103,7 @@ export class CartPage implements OnInit {
 
   removeCount() {
     // this.count = this.count - 1;
-    if (this.count <0){
+    if (this.count < 0) {
       this.count = 0;
     }
   }

src/app/catagory/catagory.page.html

@@ -13,30 +13,12 @@
         <div class="home_sub_header">
             Featured Catagories
         </div>
-        <div class="featured_catagory_list">
-            <ul>
-                <li (click)="goToPage('productlist')">
-                    <img src="../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png">
+        <div class="featured_catagory_list" >
+            <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
+                <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
+                    <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'">
                     <div class="featured_overlay">
-                        <h4>Men's Fashion</h4>
-                    </div>
-                </li>
-                <li (click)="goToPage('productlist')">
-                    <img src="../assets/beautiful-woman-with-cocktail-suitcase-bed-hootel-room_118454-1593@3x.png">
-                    <div class="featured_overlay">
-                        <h4>Women's Fashion</h4>
-                    </div>
-                </li>
-                <li (click)="goToPage('productlist')">
-                    <img src="./assets/top-view-travel-accessories-luggage_23-2148232312@3x.png">
-                    <div class="featured_overlay">
-                        <h4>Bags</h4>
-                    </div>
-                </li>
-                <li (click)="goToPage('productlist')">
-                    <img src="../assets/blue-striped-female-sneakers-colorful-background-top-view-flat-lay-minimal-background_77190-500@3x.png">
-                    <div class="featured_overlay">
-                        <h4>Shoes</h4>
+                        <h4>{{categories.catName}}</h4>
                     </div>
                 </li>
             </ul>

src/app/catagory/catagory.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
+import { CategoriesService } from './../../config/category.service';
+import { ServiceService } from './../../config/service.service';
 
 @Component({
   selector: 'app-catagory',
@@ -8,16 +10,23 @@ import { Location } from '@angular/common';
   styleUrls: ['./catagory.page.scss'],
 })
 export class CatagoryPage implements OnInit {
-
+  data: any;
   constructor(
     public router: Router,
-    public location: Location
-  ) { }
+    public location: Location,
+    public categoriesService: CategoriesService,
+    public service: ServiceService
+  ) {
+    this.service.get('params').then((val) => {
+      this.data = val;
+    });
+  }
 
   ngOnInit() {
   }
 
   goToPage(path, data = null) {
+    this.service.set('params', data);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }

src/app/catstorelist/catstorelist.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 { CatStorelistPage } from './catstorelist.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CatStorelistPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CatStorelistPage]
+})
+export class CatStorelistPageModule {}

src/app/catstorelist/catstorelist.page.html

+<div class="nav_header">
+    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
+    </button>
+    <div class="nav_title floatLeft">
+        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div>
+    <button class="nav_btn nav_search floatRight">
+    </button>
+    <div class="clear"></div>
+</div>
+<ion-content>
+    <div class="home_wrapper">
+        <div class="home_sub_header">
+            Featured Stores
+        </div>
+        <div class="featured_slider">
+            <ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
+                <ion-slide *ngFor="let shopper of shopperService.activeshoppers">
+                    <div class="feature_product" (click)="goToPage('productlist', shopper)">
+                        <img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'">
+                        <div class="feature_overlay">
+                            <h5>{{shopper.name}}</h5>
+                            <p>{{shopper.caption}}</p>
+                        </div>
+                    </div>
+                </ion-slide>
+            </ion-slides>
+        </div>
+        <div class="home_sub_header" *ngIf="data">
+            {{data.catName}}
+        </div>
+        <div class="nearby_shop_list">
+            <ul *ngIf="shopperService.shoppers && shopperService.shoppers.length > 0">
+                <li *ngFor="let shopper of shopperService.shoppers" (click)="goToPage('productlist', shopper)">
+                    <div class="nearby_image">
+                        <img [src]="shopper.profilePic" onerror="this.src='./../../assets/getmi_malls/store298/stores1.png'">
+                    </div>
+                    <div class="nearby_detail">
+                        <h5>
+                            <span class="floatLeft">{{shopper.name}}</span>
+                            <span class="floatRight">0
+                                 <img src="../assets/Path61_2.png">
+                             </span>
+                            <div class="clear"></div>
+                        </h5>
+                        <p>{{shopper.caption}}</p>
+                    </div>
+                    <div class="clear"></div>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+</ion-content>
\ No newline at end of file

src/app/catstorelist/catstorelist.page.scss

+.home_wrapper {
+    width: 100%;
+    .home_banner {
+        width: 100%;
+        height: 300px;
+        padding-top: 80px;
+        position: relative;
+        background-color: #fff;
+        .home_banner_title {
+            padding: 10px;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            img {
+                width: 100px;
+            }
+            p {
+                margin: 0px;
+                text-align: right;
+                background-image: url("../../assets/Path 55_2.png");
+                background-position: left;
+                background-repeat: no-repeat;
+                background-size: 12px;
+                padding-left: 20px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+        ion-slides {
+            width: 100%;
+            height: 100%;
+            ion-slide {
+                width: 100%;
+                height: 100%;
+                position: relative;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                .banner_slide {
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
+                    right: 0px;
+                    bottom: 0px;
+                    -webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
+                    -moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
+                    box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
+                    padding-top: 160px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                    h5 {
+                        color: #fff;
+                        margin: 0px;
+                        padding: 0px;
+                        text-align: left;
+                        font-weight: bold;
+                        letter-spacing: 2px;
+                        padding-bottom: 5px;
+                        font-size: 14px;
+                    }
+                    p {
+                        color: #fff;
+                        margin: 0px;
+                        padding: 0px;
+                        text-align: left;
+                        font-size: 20px;
+                        font-weight: lighter;
+                    }
+                }
+            }
+        }
+    }
+    .home_sub_header {
+        padding: 10px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        color: rgba(59, 57, 77, 1);
+        font-weight: 900;
+    }
+    .featured_slider {
+        padding-left: 10px;
+        padding-right: 10px;
+        .feature_product {
+            width: 100%;
+            height: 130px;
+            position: relative;
+            background-color: #a8a8a8;
+            border: 2px solid #fff;
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                object-position: center;
+            }
+            .feature_overlay {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                right: 0px;
+                bottom: 0px;
+                background-color: rgba(0, 0, 0, 0.75);
+                padding: 15px;
+                padding-top: 60px;
+                h5 {
+                    color: #fff;
+                    margin: 0px;
+                    padding: 0px;
+                    text-align: left;
+                    font-weight: bold;
+                    letter-spacing: 2px;
+                    padding-bottom: 2px;
+                    font-size: 14px;
+                }
+                p {
+                    color: #fff;
+                    margin: 0px;
+                    padding: 0px;
+                    text-align: left;
+                    font-size: 20px;
+                    font-weight: lighter;
+                }
+            }
+        }
+    }
+    .nearby_shop_list {
+        ul {
+            margin: 0px;
+            padding-left: 10px;
+            padding-right: 10px;
+            li {
+                list-style: none;
+                padding-bottom: 10px;
+                .nearby_image {
+                    width: 120px;
+                    height: 125px;
+                    float: left;
+                    background-color: #a8a8a8;
+                    border-radius: 8px;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                        object-position: center;
+                    }
+                }
+                .nearby_detail {
+                    width: calc(100% - 120px);
+                    float: left;
+                    padding-left: 20px;
+                    padding-top: 40px;
+                    h5 {
+                        margin: 0px;
+                        padding: 0px;
+                        color: rgba(59, 57, 77, 1);
+                        font-weight: 900;
+                        padding-bottom: 2px;
+                        img {
+                            width: 16px;
+                        }
+                    }
+                    p {
+                        margin: 0px;
+                        padding: 0px;
+                        color: rgba(176, 174, 199);
+                    }
+                }
+            }
+        }
+    }
+    .featured_catagory_list {
+        padding: 10px;
+        ul {
+            margin: 0px;
+            padding: 0px;
+            li {
+                list-style: none;
+                position: relative;
+                height: 120px;
+                width: 100%;
+                border-radius: 8px;
+                margin-bottom: 10px;
+                &:nth-child(odd) {
+                    text-align: left;
+                }
+                &:nth-child(even) {
+                    text-align: right;
+                }
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    object-position: center;
+                }
+                .featured_overlay {
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
+                    right: 0px;
+                    bottom: 0px;
+                    border-radius: 8px;
+                    background-color: rgba(0, 0, 0, 0.75);
+                    color: #fff;
+                    padding: 45px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                    h4 {
+                        margin: 0px;
+                        font-size: 26px;
+                        font-weight: 900;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.sort_wrappper {
+    height: 100vh;
+    width: 100%;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 99;
+    .sort_inner {
+        margin: 0 auto;
+        width: 90%;
+        padding: 10px;
+        padding-left: 15px;
+        padding-right: 15px;
+        padding-bottom: 15px;
+        background-color: #fff;
+        position: relative;
+        -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+        top: 25%;
+        border-radius: 0px;
+        h4 {
+            text-align: center;
+            color: rgba(59, 57, 77, 1);
+            margin: 0px;
+            font-weight: bold;
+            padding: 10px;
+            font-size: 18px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+            padding-bottom: 20px;
+            margin-bottom: 30px;
+        }
+        .search_box {
+            width: calc(100% - 100px);
+            height: 45px;
+            border: none;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+        }
+        .search_btn {
+            width: 100px;
+            height: 45px;
+            background-color: rgba(41, 40, 91, 1);
+            border: none;
+            color: #fff;
+            font-size: 16px;
+        }
+        ul {
+            margin: 0px;
+            padding: 0px;
+            li {
+                list-style: none;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+                padding-top: 10px;
+                padding-bottom: 10px;
+                .styled-checkbox {
+                    position: absolute; // take it out of document flow
+                    opacity: 0; // hide it
+                    &+label {
+                        position: relative;
+                        cursor: pointer;
+                        padding: 0;
+                        width: 100%;
+                    }
+                    // Box.
+                    &+label:before {
+                        content: '';
+                        margin-right: 10px;
+                        display: inline-block;
+                        vertical-align: text-top;
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 5px;
+                        background: white;
+                        border: 1px solid rgba(215, 213, 228, 1);
+                    }
+                    &:checked+label:before {
+                        background: #29285b;
+                    }
+                    // Disabled state label.
+                    &:disabled+label {
+                        color: #b8b8b8;
+                        cursor: auto;
+                    }
+                    // Disabled box.
+                    &:disabled+label:before {
+                        box-shadow: none;
+                        background: #ddd;
+                    }
+                    // Checkmark. Could be replaced with an image
+                    &:checked+label:after {
+                        content: '';
+                        position: absolute;
+                        left: 6px;
+                        top: 10px;
+                        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;
+                        transform: rotate(45deg);
+                    }
+                }
+            }
+        }
+        .sort_footer {
+            padding-top: 10px;
+            button {
+                border-radius: 8px;
+                height: 40px;
+                width: 48%;
+                color: #fff;
+                font-size: 15px;
+                font-weight: lighter;
+            }
+            .submit {
+                background-color: rgba(41, 40, 91, 1);
+            }
+            .cancel {
+                background-color: rgba(215, 213, 228, 1);
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/catstorelist/catstorelist.page.spec.ts

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

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';
+
+@Component({
+  selector: 'app-catstorelist',
+  templateUrl: './catstorelist.page.html',
+  styleUrls: ['./catstorelist.page.scss'],
+})
+export class CatStorelistPage implements OnInit {
+
+  slideOpts = {
+    slidesPerView: 1.5
+  };
+  data: any;
+
+  constructor(
+    public router: Router,
+    public location: Location,
+    public service: ServiceService,
+    public shopperService: ShoppersService,
+  ) {
+    this.service.get('params').then((val) => {
+      this.data = val;
+      this.shopperService.shopperList(this.data.catId, 'catId');
+    });
+  }
+
+  ngOnInit() {}
+
+  goToPage(path, data = null) {
+    this.service.set('params', data);
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/home/home.module.ts

@@ -23,7 +23,7 @@ const routes: Routes = [
     IonicModule,
     AgmDirectionModule,
     AgmCoreModule.forRoot({
-      apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
+      apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
     }),
     RouterModule.forChild(routes)
   ],

src/app/home/home.page.html

@@ -23,27 +23,13 @@
                     </ion-col>
                 </ion-row>
             </div> 
-            <ion-slides pager="true">
-                <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('storelist')">
-                        <h5>Chadstone</h5>
-                        <p>The fashion capital</p>
+            <ion-slides pager="true" *ngIf="centerService.centers && centerService.centers.length > 0">
+                <ion-slide *ngFor="let center of centerService.centers">
+                    <div class="banner_slide" (click)="goToPage('storelist', center)">
+                        <h5>{{center.centerName}}</h5>
+                        <p>{{center.description}}</p>
                     </div>
-                    <img src="./../../assets/getmi_malls/mall_banner/mall_4.png">
-                </ion-slide>
-                <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('storelist')">
-                        <h5>Westfield Knox</h5>
-                        <p>Your one-stop hub for Shopping & Fun</p>
-                    </div>
-                    <img src="./../../assets/getmi_malls/mall_banner/mall_1.png">
-                </ion-slide>
-                <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('storelist')">
-                        <h5>Emporium Melbourne</h5>
-                        <p>The luxury shopping centre</p>
-                    </div>
-                    <img src="./../../assets/getmi_malls/mall_banner/mall_5.png">
+                    <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'">
                 </ion-slide>
             </ion-slides>
         </div>
@@ -51,22 +37,13 @@
             Featured Stores
         </div>
         <div class="featured_slider">
-            <ion-slides pager="false" [options]="slideOpts">
-                <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
-                        <img src="./../../assets/getmi_malls/featured/featured1.png">
-                        <div class="feature_overlay">
-                            <h5>Witchery</h5>
-                            <p>Shop Women's Fashion</p>
-                        </div>
-                    </div>
-                </ion-slide>
-                <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
-                        <img src="./../../assets/getmi_malls/featured/featured2.png">
+            <ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
+                <ion-slide *ngFor="let shopper of shopperService.activeshoppers">
+                    <div class="feature_product" (click)="goToPage('productlist', shopper)">
+                        <img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'">
                         <div class="feature_overlay">
-                            <h5>VonZipper</h5>
-                            <p>Lifestyle & Personality</p>
+                            <h5>{{shopper.name}}</h5>
+                            <p>{{shopper.caption}}</p>
                         </div>
                     </div>
                 </ion-slide>
@@ -90,69 +67,21 @@
             <div class="clear"></div>
         </div>
         <div class="nearby_shop_list">
-            <ul>
-                <li (click)="goToPage('storelist')">
-                    <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/mall_298/mall1.png">
-                    </div>
-                    <div class="nearby_detail">
-                        <h5>
-                            <span class="floatLeft">Queen Victoria Building</span>
-                            <span class="floatRight">5
-                                 <img src="../assets/Path61_2.png">
-                             </span>
-                            <div class="clear"></div>
-                        </h5>
-                        <p>Men's & Women's Fashion</p>
-                    </div>
-                    <div class="clear"></div>
-                </li>
-                <li (click)="goToPage('storelist')">
-                    <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/mall_298/mall2.png">
-                    </div>
-                    <div class="nearby_detail">
-                        <h5>
-                            <span class="floatLeft">Westfield Knox</span>
-                            <span class="floatRight">4
-                              <img src="../assets/Path61_2.png">
-                            </span>
-                            <div class="clear"></div>
-                        </h5>
-                        <p>Your one-stop hub for Shopping & Fun</p>
-                    </div>
-                    <div class="clear"></div>
-                </li>
-                <li (click)="goToPage('storelist')">
-                    <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/mall_298/mall4.png">
-                    </div>
-                    <div class="nearby_detail">
-                        <h5>
-                            <span class="floatLeft">Chadstone</span>
-                            <span class="floatRight">5
-                        <img src="../assets/Path61_2.png">
-                      </span>
-                            <div class="clear"></div>
-                        </h5>
-                        <p>The fashion capital</p>
-                    </div>
-                    <div class="clear"></div>
-                </li>
+            <ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0">
+                <li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)">
                         
-                <li (click)="goToPage('storelist')">
                    <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/mall_298/mall5.png">
+                        <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'">
                     </div>
                     <div class="nearby_detail">
                         <h5>
-                            <span class="floatLeft">Emporium Melbourne</span>
-                            <span class="floatRight">4
+                            <span class="floatLeft">{{center.centerName}}</span>
+                            <span class="floatRight">0
                                  <img src="../assets/Path61_2.png">
                              </span>
                             <div class="clear"></div>
                         </h5>
-                        <p>The luxury shopping centre</p>
+                        <p>{{center.description}}</p>
                     </div>
                     <div class="clear"></div>
                 </li>
@@ -162,29 +91,11 @@
             Featured Catagories
         </div>
         <div class="featured_catagory_list">
-            <ul>
-                <li (click)="goToPage('productlist')">
-                    <img src="../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png">
-                    <div class="featured_overlay">
-                        <h4>Men's Fashion</h4>
-                    </div>
-                </li>
-                <li (click)="goToPage('productlist')">
-                    <img src="../assets/beautiful-woman-with-cocktail-suitcase-bed-hootel-room_118454-1593@3x.png">
-                    <div class="featured_overlay">
-                        <h4>Women's Fashion</h4>
-                    </div>
-                </li>
-                <li (click)="goToPage('productlist')">
-                    <img src="./assets/top-view-travel-accessories-luggage_23-2148232312@3x.png">
-                    <div class="featured_overlay">
-                        <h4>Bags</h4>
-                    </div>
-                </li>
-                <li (click)="goToPage('productlist')">
-                    <img src="../assets/blue-striped-female-sneakers-colorful-background-top-view-flat-lay-minimal-background_77190-500@3x.png">
+            <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
+                <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
+                    <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'">
                     <div class="featured_overlay">
-                        <h4>Shoes</h4>
+                        <h4>{{categories.catName}}</h4>
                     </div>
                 </li>
             </ul>

src/app/home/home.page.ts

@@ -3,6 +3,12 @@ import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
 import {  MenuController } from '@ionic/angular';
+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 { from } from 'rxjs';
+
 @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
@@ -33,7 +39,11 @@ export class HomePage implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
-    public menuCtrl: MenuController
+    public menuCtrl: MenuController,
+    public centerService: CenterService,
+    public shopperService: ShoppersService,
+    public categoriesService: CategoriesService,
+    public service: ServiceService
   ) { }
 
   ngOnInit() {
@@ -45,6 +55,8 @@ export class HomePage implements OnInit {
   }
 
   goToPage(path, data = null) {
+    console.log(data);
+    this.service.set('params', data);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }

src/app/login/login.page.html

@@ -29,10 +29,10 @@
             </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()">
+                    <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()">
+                    <div class="social_btn" (click)="authService.google(1)">
                         Google
                     </div>
                 </div>
@@ -40,7 +40,9 @@
             <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>
+                
             </div>
+            <!-- <button (click)="goToPage('addaddresss')">Address</button> -->
         </div>
     </div>
 </ion-content>
\ No newline at end of file

src/app/nearby/nearby.module.ts

@@ -23,7 +23,7 @@ const routes: Routes = [
     IonicModule,
     AgmDirectionModule,
     AgmCoreModule.forRoot({
-      apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
+      apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
     }),
     RouterModule.forChild(routes)
   ],

src/app/productdetail/productdetail.page.html

@@ -19,7 +19,9 @@
             <ion-row>
                 <ion-col size="8">
                     <h3>{{product.prodName}}</h3>
-                    <p><strong><span><img src="../assets/Path61_2.png"></span>4</strong>Lulu Fashion, {{product.category}}
+                    <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong>&nbsp; {{product.category}}, {{product.subCate}}
+                    <br/>
+                    <span *ngFor="let tag of product.tag">#{{tag}}</span>
                     </p>
                 </ion-col>
                 <ion-col size="4">
@@ -37,8 +39,8 @@
                             <li>
                                 <button id="custom_check_button">
                               <label>
-                                <input id="{{size.sizeId}}" type="radio" name="services" value="{{size.sizeId}}" (click)="cartService.choose_size(size.sizeName)" [checked]="i==0">
-                                <p>{{size.sizeName}}</p>
+                                <input id="{{size}}" type="radio" name="services" value="{{size}}" (click)="cartService.choose_size(size)" [checked]="i==0">
+                                <p>{{size}}</p>
                               </label>
                             </button>
                             </li>
@@ -49,7 +51,7 @@
             <h5>Description</h5>
             <p>{{product.prodDesc}}
             </p>
-            <h5>
+            <!--<h5>
                 <span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
                 <div class="clear"></div>
             </h5>
@@ -112,57 +114,23 @@
                         <div class="clear"></div>
                     </li>
                 </ul>
-            </div>
-            <h5>
-                <span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
+            </div> -->
+            <h5 *ngIf="product.similar && product.similar.length > 0">
+                <span class="floatLeft">Related Products</span><span class="floatRight" (click)="goToPage('productlist', data)">MORE</span>
                 <div class="clear"></div>
             </h5>
             <div class="related_product_slider">
-                <ul>
+                <ul *ngIf="product.similar && product.similar.length > 0">
                     <ion-slides pager="false" [options]="relatedProd">
-                        <ion-slide>
-                            <li (click)="goToPage('productdetail')">
-                                <div class="product_image">
-                                    <img src="../assets/model1@3x.png">
-                                    <div class="fav_icon">
-                                    </div>
-                                </div>
-                                <h5>European Style V Neck</h5>
-                                <p>AU$99.00</p>
-                            </li>
-                        </ion-slide>
-                        <ion-slide>
-                            <li (click)="goToPage('productdetail')">
-                                <div class="product_image">
-                                    <img src="../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
-                                    <div class="fav_icon">
-                                    </div>
-                                </div>
-                                <h5>European Style V Neck</h5>
-                                <p>AU$99.00</p>
-                            </li>
-                        </ion-slide>
-                        <ion-slide>
-                            <li (click)="goToPage('productdetail')">
-                                <div class="product_image">
-                                    <img src="../assets/51oNoK8JdCL._UY550_@3x.png">
-                                    <div class="fav_icon">
-                                    </div>
-                                </div>
-                                <h5>European Style V Neck</h5>
-                                <p>AU$99.00 <span class="offer">-8%</span></p>
-                            </li>
-                        </ion-slide>
-                        <ion-slide>
-                            <li (click)="goToPage('productdetail')">
+                        <ion-slide *ngFor="let similar of product.similar">
+                            <li (click)="viewProd(similar)">
                                 <div class="product_image">
-                                    <img src="../assets/DOGTS033-111-495x660@3x.png">
+                                    <img [src]="similar.image" onerror="this.src='../assets/model1@3x.png'">
                                     <div class="fav_icon">
                                     </div>
-                                    <div class="featured_badge">Featured</div>
                                 </div>
-                                <h5>European Style V Neck</h5>
-                                <p>AU$99.00<span>AU$110.00</span></p>
+                                <h5>{{similar.prodName}}</h5>
+                                <p>{{similar.price}}</p>
                             </li>
                         </ion-slide>
                     </ion-slides>

src/app/productdetail/productdetail.page.ts

@@ -5,6 +5,7 @@ import { Products } from './../../config/services/product';
 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 { map } from 'rxjs/operators';
 
 @Component({
@@ -15,7 +16,7 @@ import { map } from 'rxjs/operators';
 export class ProductdetailPage implements OnInit {
   product: Products;
   order: Order;
-
+  data: any;
   slideOpts = {
     slidesPerView: 3.5
   };
@@ -29,16 +30,29 @@ export class ProductdetailPage implements OnInit {
     private route: ActivatedRoute,
     private location: Location,
     private cartService: CartsService,
-    private prodService: ProductsService
+    private prodService: ProductsService,
+    private service: ServiceService
   ) {
+    const params = this.prodService.selItem;
+    this.service.state = true;
+    this.prodService.similarProd(params.shopperId, params.category, params.subCate, params.prodId);
+    this.service.get('params').then((val) => {
+      this.data = val;
+    });
   }
 
   ngOnInit() {
-    console.log('here');
+    console.log(this.prodService.selItem);
     const params = this.prodService.selItem;
+    this.getProd(params);
+  }
+
+  getProd(params) {
     if (params) {
       const prod: Products = {
           prodId: params.prodId,
+          subCate: params.subCate,
+          tag: params.tag,
           prodName: params.prodName,
           prodCode: params.prodCode,
           prodDesc: params.prodDesc,
@@ -55,8 +69,7 @@ export class ProductdetailPage implements OnInit {
           shopper: params.shopper,
           skuCode: params.skuCode,
           status: params.status,
-          size: params.size,
-          currency: params.currency
+          size: params.size
       };
       this.product = prod;
     } else {
@@ -79,6 +92,7 @@ export class ProductdetailPage implements OnInit {
   }
 
   goBack() {
+    this.service.state = false;
     this.location.back();
   }
 
@@ -87,9 +101,13 @@ export class ProductdetailPage implements OnInit {
       if (type === 1) {
         this.router.navigateByUrl('cart');
       } else {
-        alert('Product added to cart');
+        // alert('Product added to cart');
       }
     });
   }
 
+  viewProd(prod) {
+    this.getProd(prod);
+  }
+
 }

src/app/productlist/productlist.page.html

@@ -23,19 +23,19 @@
             </div>
             <div class="clear"></div>
         </div>
-        <div class="product_title">
-            Women's Fashion
+        <div class="product_title" *ngIf="data">
+            {{data.shopName}}
         </div>
         <ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
-            <li *ngFor="let product of prodService.product; let i = index" (click)="prodDetails(i)">
+            <li *ngFor="let product of prodService.product; let i = index">
                 <div class="product_image">
-                    <img [src]="product.image" onerror="this.src='../assets/model1@3x.png'">
-                    <div class="fav_icon">
+                    <img [src]="product.image" onerror="this.src='../assets/model1@3x.png'" (click)="prodDetails(i)">
+                    <div class="fav_icon" (click)="changeFav(product.prodId)" *ngIf="checkFavStatus(product.prodId)">
                     </div>
                     <div class="featured_badge" *ngIf="product.featured">Featured</div>
                 </div>
-                <h5>{{product.prodName}}</h5>
-                <p>A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
+                <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>
             </li>
         </ul>
     </div>

src/app/productlist/productlist.page.scss

@@ -126,6 +126,12 @@
             }
         }
     }
+    .ellipse {
+        white-space: nowrap; 
+        width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis; 
+    }
 }
 
 .sort_wrappper {

src/app/productlist/productlist.page.ts

@@ -3,7 +3,7 @@ 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';
 
 @Component({
   selector: 'app-productlist',
@@ -25,18 +25,25 @@ export class ProductlistPage implements OnInit {
 
   onGrid = false;
   isShow = false;
+  data: any;
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
-    public prodService: ProductsService
-  ) { }
-
-  ngOnInit() {
-    this.prodService.prodList();
+    public prodService: ProductsService,
+    public service: ServiceService
+  ) {
+    this.service.state = false;
+    this.service.get('params').then((val) => {
+      this.data = val;
+      console.log(this.data);
+      this.prodService.prodList(this.data.uid);
+    });
   }
 
+  ngOnInit() {}
+
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
@@ -51,7 +58,7 @@ export class ProductlistPage implements OnInit {
     window.history.back();
   }
 
-  gridToggle(){
+  gridToggle() {
     this.onGrid = !this.onGrid;
   }
 
@@ -60,4 +67,22 @@ export class ProductlistPage implements OnInit {
     this.router.navigateByUrl('productdetail');
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
+
+  changeFav(index) {
+    const state = this.prodService.fav.findIndex(x => x === index);
+    if (state > -1) {
+      this.prodService.fav.splice(state, 1);
+      this.prodService.changeFav(index, 'yes');
+    } else {
+      this.prodService.fav.push(index);
+      this.prodService.changeFav(index, 'no');
+    }
+    console.log(this.prodService.fav);
+  }
+
+  checkFavStatus(index) {
+    const state = this.prodService.fav.findIndex(x => x === index);
+    console.log(state);
+    return state > -1 ? true : true;
+  }
 }

src/app/signup/signup.page.html

@@ -13,40 +13,71 @@
             <img src="../assets/logo.png">
         </div>
         <div class="form_div">
+            <form #signupForm="ngForm" novalidate>
             <div class="row">
-                <input class="" type="text" placeholder="Your name">
+                <input class="" type="text" placeholder="Your name" [(ngModel)]="signup.name" name="name" #name="ngModel" required>
+                <div class="md-errors-spacer" [hidden]="name.valid || submitted == false" class="ion-padding-start">
+                    Name is required
+                </div>
             </div>
             <div class="row">
-                <input class="" type="text" placeholder="Email Address">
+                <input class="" type="email" placeholder="Email Address" [(ngModel)]="signup.emailId" name="emailId" #emailId="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>
+                <div class="md-errors-spacer" [hidden]="emailId.valid || submitted == false">
+                    <div  *ngIf="emailId.errors && emailId.errors.required">
+                        Email is required
+                    </div>
+                    <div  *ngIf="emailId.errors && emailId.errors.pattern">
+                        Email is invalid
+                    </div>
+                </div>
             </div>
             <div class="row">
-                <input class="" type="text" placeholder="Phone number">
+                <input class="" type="text" placeholder="Phone number" [(ngModel)]="signup.phone" name="phone" #phone="ngModel" pattern="(\(+61\)|\+61|\(0[1-9]\)|0[1-9])?( ?-?[0-9]){6,9}" maxlength="10" required>
+                <div class="md-errors-spacer" [hidden]="phone.valid || submitted == false">
+                    <div  *ngIf="phone.errors && phone.errors.required">
+                        Phone number is required
+                    </div>
+                    <div *ngIf="phone.errors && phone.errors.pattern">
+                        Phone is invalid
+                    </div>
+                </div>
             </div>
             <div class="row">
-                <input class="" type="password" placeholder="Create A Password">
+                <input class="" type="password" placeholder="Create A Password" [(ngModel)]="signup.password" name="password" #password="ngModel" minlength="6" required>
+                <div class="md-errors-spacer" [hidden]="password.valid || submitted == false">
+                    <div *ngIf="password.errors && password.errors.required">Password is required</div>
+                    <div *ngIf="password.errors && password.errors.minlength">Password must be at least 6 characters</div>
+                </div>
             </div>
             <div class="row">
-                <ion-datetime displayFormat="DD-MM-YY" placeholder="Date of Birth"></ion-datetime>
+                <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="signup.dob" name="dob" #dob="ngModel" placeholder="Date of Birth" max="{{minDate}}" required></ion-datetime>
+                <div class="md-errors-spacer" [hidden]="dob.valid || submitted == false">
+                    <div *ngIf="dob.errors && dob.errors.required">DOB is required</div>
+                </div>
             </div>
             <div class="row">
                 <h6>
-                    <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
+                    <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="true"  [(ngModel)]="signup.terms" required name="terms" #terms="ngModel">
                     <label for="styled-checkbox-1"><span>I agree with <a (click)="menuToggle()">Terms and
                                 Conditions</a></span></label></h6>
+                    <div class="md-errors-spacer" [hidden]="terms.valid || submitted == false">
+                            <div *ngIf="terms.errors && terms.errors.required">Please accept Terms and Conditions</div>
+                    </div>
             </div>
             <div class="row">
-                <button class="login_btn" (click)="goToPage('verification')">SIGN UP</button>
+                <button class="login_btn" (click)="onSignup(signupForm)">SIGN UP</button>
             </div>
+            </form>
             <div class="row">
                 <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);">
+                    <div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);" (click)="register.facebook()">
                         Facebook
                     </div>
-                    <div class="social_btn">
+                    <div class="social_btn" (click)="register.google(2)">
                         Google
                     </div>
                 </div>

src/app/signup/signup.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { NgForm } from '@angular/forms';
+import { AuthService } from './../../config/auth.service';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
+import { Signup } from './../../config/services/user';
 
 @Component({
   selector: 'app-signup',
@@ -22,12 +25,32 @@ import { trigger, transition, animate, style } from '@angular/animations';
 export class SignupPage implements OnInit {
 
   menuShow = false;
+  currDate = new Date();
+  mobnumPattern = '(\(+61\)|\+61|\(0[1-9]\)|0[1-9])?( ?-?[0-9]){6,10}';
+  minDate: any;
+  signup: Signup  = {
+    emailId: '',
+    name: '',
+    password: '',
+    phone: '',
+    dob: '',
+    terms: false
+  };
+  submitted = false;
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { }
+    private location: Location,
+    public register: AuthService
+  ) {
+    this.currDate.setFullYear(this.currDate.getFullYear() - 10);
+    console.log(this.currDate);
+    const month = '' + (this.currDate.getMonth() + 1),
+    day = '' + this.currDate.getDate(),
+    year = this.currDate.getFullYear();
+    this.minDate = [year, month, day].join('-');
+  }
 
   ngOnInit() {
   }
@@ -45,6 +68,15 @@ export class SignupPage implements OnInit {
     this.menuShow = !this.menuShow;
   }
 
+  onSignup(form: NgForm) {
+    this.submitted = true;
+    console.log(form.value);
+    if (form.valid) {
+      console.log(form.value);
+      this.register.signup(form.value);
+    }
+  }
+
 
 
 }

src/app/storelist/storelist.page.html

@@ -13,77 +13,36 @@
             Featured Stores
         </div>
         <div class="featured_slider">
-            <ion-slides pager="false" [options]="slideOpts">
-                <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
-                        <img src="./../../assets/getmi_malls/featured/featured1.png">
+            <ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
+                <ion-slide *ngFor="let shopper of shopperService.activeshoppers">
+                    <div class="feature_product" (click)="goToPage('productlist', shopper)">
+                        <img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'">
                         <div class="feature_overlay">
-                            <h5>Witchery</h5>
-                            <p>Shop Women's Fashion</p>
-                        </div>
-                    </div>
-                </ion-slide>
-                <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
-                        <img src="./../../assets/getmi_malls/featured/featured2.png">
-                        <div class="feature_overlay">
-                            <h5>VonZipper</h5>
-                            <p>Lifestyle & Personality</p>
+                            <h5>{{shopper.name}}</h5>
+                            <p>{{shopper.caption}}</p>
                         </div>
                     </div>
                 </ion-slide>
             </ion-slides>
         </div>
-        <div class="home_sub_header">
-            Stores in Chadstone
+        <div class="home_sub_header" *ngIf="data">
+            {{data.centerName}}
         </div>
         <div class="nearby_shop_list">
-            <ul>
-                <li (click)="goToPage('catagory')">
-                    <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/store298/stores1.png">
-                    </div>
-                    <div class="nearby_detail">
-                        <h5>
-                            <span class="floatLeft">Witchery</span>
-                            <span class="floatRight">5
-                                 <img src="../assets/Path61_2.png">
-                             </span>
-                            <div class="clear"></div>
-                        </h5>
-                        <p>Shop Women's Fashion</p>
-                    </div>
-                    <div class="clear"></div>
-                </li>
-                <li (click)="goToPage('catagory')">
-                    <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/store298/stores2.png">
-                    </div>
-                    <div class="nearby_detail">
-                        <h5>
-                            <span class="floatLeft">Tigerlily</span>
-                            <span class="floatRight">4
-                              <img src="../assets/Path61_2.png">
-                            </span>
-                            <div class="clear"></div>
-                        </h5>
-                        <p>Fun, Free-Spirited Clothing</p>
-                    </div>
-                    <div class="clear"></div>
-                </li>
-                <li (click)="goToPage('catagory')">
+            <ul *ngIf="shopperService.shoppers && shopperService.shoppers.length > 0">
+                <li *ngFor="let shopper of shopperService.shoppers" (click)="goToPage('productlist', shopper)">
                     <div class="nearby_image">
-                        <img src="./../../assets/getmi_malls/store298/stores3.png">
+                        <img [src]="shopper.profilePic" onerror="this.src='./../../assets/getmi_malls/store298/stores1.png'">
                     </div>
                     <div class="nearby_detail">
                         <h5>
-                            <span class="floatLeft">VonZipper</span>
-                            <span class="floatRight">5
+                            <span class="floatLeft">{{shopper.name}}</span>
+                            <span class="floatRight">0
                                  <img src="../assets/Path61_2.png">
                              </span>
                             <div class="clear"></div>
                         </h5>
-                        <p>Lifestyle & Personality</p>
+                        <p>{{shopper.caption}}</p>
                     </div>
                     <div class="clear"></div>
                 </li>

src/app/storelist/storelist.page.ts

 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
 import { Location } from '@angular/common';
+import { ServiceService } from './../../config/service.service';
+import { ShoppersService } from './../../config/shopper.service';
 
 @Component({
   selector: 'app-storelist',
@@ -12,16 +14,24 @@ export class StorelistPage implements OnInit {
   slideOpts = {
     slidesPerView: 1.5
   };
+  data: any;
 
   constructor(
     public router: Router,
-    public location: Location
-  ) { }
-
-  ngOnInit() {
+    public location: Location,
+    public service: ServiceService,
+    public shopperService: ShoppersService,
+  ) {
+    this.service.get('params').then((val) => {
+      this.data = val;
+      this.shopperService.shopperList(this.data.cId, 'centerId');
+    });
   }
 
+  ngOnInit() {}
+
   goToPage(path, data = null) {
+    this.service.set('params', data);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }

src/app/verification/verification.page.html

@@ -12,17 +12,18 @@
         <div class="form_div">
             <div class="row">
                 <p>We have sent and OTP to</p>
-                <h6>+01 4265 259 482 </h6>
+                <h6>+01 {{authService.userPostData.phone}} </h6>
             </div>
             <div class="row">
-                <input class="" type="text" placeholder="Type OTP">
+                <input class="" type="number" placeholder="Type OTP" maxlength="4" #otp required>
             </div>
             <div class="row">
-                <button class="login_btn" (click)="goToPage('addaddresss')">SUBMIT</button>
+                <button class="login_btn"  (click)="authService.verify(otp.value)">SUBMIT</button>
             </div>
             <div class="row">
-                <button class="resend_btn">RESEND</button>
+                <button class="resend_btn"  (click)="authService.resend()">RESEND</button>
             </div>
+            <h6>OTP: {{authService.userPostData.otp}}</h6>
         </div>
     </div>
 

src/app/verification/verification.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
+import { AuthService } from './../../config/auth.service';
 
 @Component({
   selector: 'app-verification',
@@ -12,7 +13,8 @@ export class VerificationPage implements OnInit {
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    public authService: AuthService
   ) { }
 
   ngOnInit() {

src/config/auth.service.ts

 import { Injectable } from '@angular/core';
-import { User } from './services/user';
+import { User, Signup, Address } from './services/user';
 import { auth } from 'firebase/app';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AngularFireAuth } from '@angular/fire/auth';
-import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
 import { ServiceService } from './../config/service.service';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
+import { take } from 'rxjs/operators';
 import { from } from 'rxjs';
 
 @Injectable({
@@ -13,6 +14,8 @@ import { from } from 'rxjs';
 })
 export class AuthService {
   userData: any;
+  type: number;
+  userPostData: any;
 
   constructor(
     public afs: AngularFirestore,
@@ -21,12 +24,18 @@ export class AuthService {
     private service: ServiceService,
     private googlePlus: GooglePlus
   ) {
+      this.type = 1;
       this.afAuth.authState.subscribe(user => {
         if (user) {
           this.userData = user;
+          console.log(this.userData);
           this.service.set('user', JSON.stringify(this.userData));
+          if (this.type === 1) {
             this.router.navigateByUrl('home');
           } else {
+           this.router.navigateByUrl('verification');
+          }
+        } else {
           this.service.set('user', null);
           JSON.parse(localStorage.getItem('user'));
           this.router.navigateByUrl('login');
@@ -44,16 +53,37 @@ export class AuthService {
     });
   }
 
+  public async verify(otp: string) {
+    console.log(this.userData.uid, otp);
+    // tslint:disable-next-line:radix
+    // const otpnew = parseInt(otp);
+    const custRef: AngularFirestoreCollection<any> = this.afs.collection('customers', ref => ref.where('otp', '==', otp)
+    .where('uid', '==', this.userData.uid)
+    );
+    custRef.valueChanges().pipe(take(1)).subscribe((value: User[]) => {
+      if (value.length > 0) {
+        this.afs.collection('customers').doc(this.userData.uid).update({otp: ''});
+        this.router.navigateByUrl('addaddresss');
+      } else {
+        window.alert('Please input valid OTP');
+      }
+    });
 
-  public async google() {
+  }
+
+
+  public async google(type: number) {
+    this.type = type;
     // this.googlePlus.login({}).then(res => console.log(res)).catch(err => console.error(err));
     this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider()).then((result) => {
       console.log('success');
       console.log(result);
+      this.socialSignUp(result);
     });
   }
 
-  public async facebook() {
+  public async facebook(type: number) {
+    this.type = type;
     this.afAuth.auth.signInWithPopup(new auth.FacebookAuthProvider()).then((result) => {
       console.log('success');
       console.log(result);
@@ -62,7 +92,7 @@ export class AuthService {
 
   get isLoggedIn(): boolean {
     const user = JSON.parse(localStorage.getItem('user'));
-    return (user !== null && user.emailVerified !== false) ? true : false;
+    return(user !== null && user.emailVerified !== false) ? true : false;
   }
 
   SetUserData(user: any) {
@@ -78,7 +108,9 @@ export class AuthService {
         phone: value.phone,
         phoneVerified: value.phoneVerified,
         status: value.status,
-        currency: value.currency
+        currency: value.currency,
+        otp: value.otp,
+        loginType: value.loginType
         };
       console.log(userData);
     });
@@ -91,5 +123,116 @@ export class AuthService {
     });
   }
 
+  socialSignUp(userData: any) {
+    this.type = 2;
+    console.log(userData.user);
+    const currencyData = {
+      currId: '123',
+      currName: 'Australian dollar',
+      symbol: 'A$'
+    };
+    const otp = Math.floor(1000 + Math.random() * 9000);
+    userData = userData.user;
+    const postData: User =  {
+      uid: userData.uid,
+      status: true,
+      profilePhoto: userData.photoURL,
+      phoneVerified: false,
+      phone: userData.phoneNumber,
+      name: userData.displayName,
+      emailVerified: userData.emailVerified,
+      emailId: userData.email,
+      currency: currencyData,
+      otp: otp.toString(),
+      loginType: 1
+    };
+    this.userPostData = postData;
+    console.log(postData);
+    this.afs.collection('customers').doc(userData.uid).set(postData).then(() => {
+      console.log('successs');
+    });
+  }
 
+  signup(userData: Signup) {
+    this.type = 2;
+    console.log(userData);
+    const otp = Math.floor(1000 + Math.random() * 9000);
+    this.afAuth.auth.createUserWithEmailAndPassword(userData.emailId, userData.password).then((result) => {
+      console.log(result.user);
+      this.afAuth.auth.currentUser.sendEmailVerification();
+      const currencyData = {
+        currId: '123',
+        currName: 'Australian dollar',
+        symbol: 'A$'
+      };
+      const custData = result.user;
+      const postData: User =  {
+        uid: custData.uid,
+        status: true,
+        profilePhoto: '',
+        phoneVerified: false,
+        phone: userData.phone,
+        name: userData.name,
+        emailVerified: false,
+        emailId: userData.emailId,
+        currency: currencyData,
+        otp: otp.toString(),
+        loginType: 0
+      };
+      this.userPostData = postData;
+      console.log(postData);
+      this.afs.collection('customers').doc(custData.uid).set(postData).then(() => {
+        console.log('successs');
+      });
+    }).catch((error) => {
+      window.alert(error.message);
+    });
+  }
+
+  createAddress(addressData: Address) {
+    console.log(addressData);
+    console.log(this.userData.uid);
+
+    this.afs.collection('address').add({
+      uid: this.userData.uid
+    }).then((docRef) => {
+      console.log(docRef);
+      const addrData =  {
+        uid: this.userData.uid,
+        addressType: addressData.addressType,
+        area: addressData.area,
+        city: addressData.city,
+        country: addressData.country,
+        district: addressData.district,
+        firstAddress: addressData.firstAddress,
+        landmark: addressData.landmark,
+        zip: addressData.zip,
+        secondAddress: addressData.secondAddress,
+        state: addressData.state,
+        addrId: docRef.id,
+        default: 1
+      };
+      const neworderId = docRef.id;
+      console.log(addrData);
+      this.afs.collection('address').doc(neworderId).set(addrData).then(() => {
+        console.log('Address add Successfully');
+        this.service.set('user', JSON.stringify(this.userData));
+        this.router.navigateByUrl('home');
+        document.body.scrollTop = document.documentElement.scrollTop = 0;
+      });
+    });
+    return false;
+  }
 }
+
+
+/*displayName: "Adarsh Techware"
+email: "adarsh.techware@gmail.com"
+emailVerified: true
+: "https://lh4.googleusercontent.com/-h0rs2pE-Azw/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rcjNtapRhKoG09NKifQsv_lQPC_2A/photo.jpg"
+: "vT498Fz6X0Z6l5l5iNn5hxfwz692"
+providerData: [Gl]*/
+
+
+
+

src/config/cart.service.ts

@@ -41,20 +41,21 @@ export class CartsService {
   }
 
   public async buyNow(product: Products) {
-    this.color = 'Blue';
     this.prodId = product.prodId;
     const prodRef = firebase.firestore().collection('products').doc(this.prodId);
 
     const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('size', '==', this.size)
-    .where('color', '==', this.color)
+    .where('color', '==', Object.keys(product.color)[0])
     .where('custId', '==', this.custId)
     .where('product', '==', prodRef)
     );
-    cartRef.valueChanges().pipe(take(1)).subscribe((value: Cart[]) => {
+    ;
+    cartRef.valueChanges().pipe(take(1)).subscribe((value) => {
       console.log(value);
       if (value.length === 0) {
+        product.image = product.image === undefined ? '../assets/model1@3x.jpg' : product.image;
         const cart: Cart = {
-          color: this.color,
+          color: Object.keys(product.color)[0],
           custId: this.custId,
           shopperId: product.shopperId,
           product: firebase.firestore().doc(`products/${this.prodId}`),
@@ -66,6 +67,7 @@ export class CartsService {
           qty: 1,
           size: this.size
         };
+        console.log(cart);
         this.afs.collection('carts').add(cart).then((docRef) => {
           const neworderId = docRef.id;
           this.afs.collection('carts').doc(neworderId).update({cartId: docRef.id}).then(() => {
@@ -76,7 +78,16 @@ export class CartsService {
           console.error('Error adding document: ', error);
         });
       } else {
-        alert('Item already added in the cart');
+        console.log(value);
+        // alert('Item already added in the cart');
+        const cartId = value[0].cartId;
+        // tslint:disable-next-line:radix
+        const qty = parseInt(value[0].qty) + 1;
+        this.afs.collection('carts').doc(cartId).update({qty: `${qty}`}).then(() => {
+          console.log('Booking Successfully');
+          document.body.scrollTop = document.documentElement.scrollTop = 0;
+        });
+        
       }
     });
   }
@@ -101,7 +112,10 @@ export class CartsService {
             qty: item.qty,
             size: item.size,
           };
-          this.cartTotal += item.price;
+          console.log(item.price, item.qty);
+          if (item.price) {
+            this.cartTotal += item.price * item.qty;
+          }
           /*const prodItem = item.product.get().then((property) => {
             const response = property.data();
             cartItem.prodName = response.prodName;
@@ -123,6 +137,32 @@ export class CartsService {
     this.size = size;
   }
 
+  removeCount(index) {
+    // tslint:disable-next-line:radix
+    const qty = this.carts[index].qty > 1 ?  this.carts[index].qty - 1 : this.carts[index].qty;
+    this.carts[index].qty = qty;
+    console.log(this.carts[index].qty);
+    this.afs.collection('carts').doc(this.carts[index].cartId).update({
+      qty: this.carts[index].qty
+    });
+
+  }
+
+  addCount(index) {
+    const qty = this.carts[index].qty + 1;
+    this.cartTotal = 0;
+    this.carts[index].qty =  qty;
+    this.afs.collection('carts').doc(this.carts[index].cartId).update({
+      qty: this.carts[index].qty
+    });
+  }
+
+  removeItem(index) {
+    this.afs.collection('carts').doc(this.carts[index].cartId).delete();
+  }
+
+
+
 
 
 }

src/config/category.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Category } from './services/category';
+import * as firebase from 'firebase';
+import { ServiceService } from './service.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CategoriesService {
+  categories: Category[] = [];
+  activecategories: Category[] = [];
+  constructor(
+    public afs: AngularFirestore,
+    public service: ServiceService
+  ) {
+    this.categoryList();
+    this.activeCategory();
+  }
+
+  public async categoryList() {
+    const This = this;
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('shopcategory');
+    orderRef.valueChanges().subscribe((value) => {
+      this.categories = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          const category: Category = {
+            catId: item.catId,
+            catName: item.catName,
+            catImage: item.catImage,
+            featured: item.featured,
+            status: item.status
+          };
+          this.categories.push(category);
+        });
+        console.log(this.categories);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+
+  public async activeCategory() {
+    const This = this;
+    const state = true;
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('shopcategory', ref => ref.where('status', '==', state));
+    orderRef.valueChanges().subscribe((value) => {
+      this.activecategories = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          const category: Category = {
+            catId: item.catId,
+            catName: item.catName,
+            catImage: item.catImage,
+            featured: item.featured,
+            status: item.status
+          };
+          this.activecategories.push(category);
+        });
+        console.log(this.activecategories);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+}

src/config/center.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Centers, CenterData } from './services/center';
+import * as firebase from 'firebase';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CenterService {
+  centers: Centers[] = [];
+  nearcenters: Centers[] = [];
+  constructor(
+    public afs: AngularFirestore
+  ) {
+    this.centerList();
+    this.getNearBy(10.0159, 76.3419, 10);
+  }
+
+  public async centerList() {
+    const This = this;
+    const state = true;
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('centers', ref => ref.where('featured', '==', state)
+    .where('status', '==', state));
+    orderRef.valueChanges().subscribe((value) => {
+      this.centers = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          if (item.centerName === undefined) {
+            return;
+          }
+          const center: Centers = {
+            centerName: item.centerName,
+            description: item.description,
+            location: item.location,
+            latLng: item.latLng,
+            featured: item.featured,
+            centerImg: item.centerImg,
+            status: item.status,
+            cId: item.cId
+          };
+          this.centers.push(center);
+        });
+        console.log(this.centers);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+
+  public async getNearBy(latitude, longitude, distance) {
+    const This = this;
+    const state = true;
+
+    const lat = 0.0144927536231884;
+    const lon = 0.0181818181818182;
+
+    const lowerLat = latitude - (lat * distance);
+    const lowerLon = longitude - (lon * distance);
+
+    const greaterLat = latitude + (lat * distance);
+    const greaterLon = longitude + (lon * distance);
+
+    const lesserGeopoint = new firebase.firestore.GeoPoint(lowerLat, lowerLon);
+    const greaterGeopoint = new firebase.firestore.GeoPoint(greaterLat, greaterLon);
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('centers', ref => ref.where('latLng', '>', lesserGeopoint)
+    .where('latLng', '<', greaterGeopoint).where('status', '==', state));
+    orderRef.valueChanges().subscribe((value) => {
+      this.nearcenters = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          if (item.centerName === undefined) {
+            return;
+          }
+          const center: Centers = {
+            centerName: item.centerName,
+            description: item.description,
+            location: item.location,
+            latLng: item.latLng,
+            featured: item.featured,
+            centerImg: item.centerImg,
+            status: item.status,
+            cId: item.cId
+          };
+          this.nearcenters.push(center);
+        });
+        console.log(this.nearcenters);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+
+}

src/config/products.service.ts

@@ -8,16 +8,26 @@ import { ServiceService } from './../config/service.service';
 })
 export class ProductsService {
   product: Products[] = [];
+  fav: any[];
   selItem: Products;
-
+  similar: Products[] = [];
+  user: any;
   constructor(
     public afs: AngularFirestore,
     public service: ServiceService
-  ) { }
+  ) {
+    this.service.get('user').then(data => {
+      this.user = JSON.parse(data);
+      this.getFavlist(this.user.uid);
+    });
+  }
 
-  public async prodList() {
+  public async prodList(shopperId: string) {
     const This = this;
-    const prodRef: AngularFirestoreCollection<any> = this.afs.collection(`products`);
+    const state = true;
+    console.log(shopperId);
+    const prodRef: AngularFirestoreCollection<any> = this.afs.collection(`products`, ref => ref.where('shopperId', '==', shopperId)
+    .where('status', '==', state));
     prodRef.valueChanges().subscribe((value) => {
       this.product = [];
       const res = value;
@@ -30,8 +40,8 @@ export class ProductsService {
             prodCode: item.prodCode,
             prodDesc: item.prodDesc,
             prodStatus: item.prodStatus,
-            brand: item.brand.brandName,
-            category: item.category.catName,
+            brand: item.brand,
+            category: item.category,
             shopperId: item.shopperId,
             color: item.color,
             discount: item.discount,
@@ -42,20 +52,91 @@ export class ProductsService {
             shopper: item.shopper,
             skuCode: item.skuCode,
             status: item.status,
-            size: this.service.key2Array(item.size),
-            currency: item.currency
+            size: this.service.splitSep(item.size),
+            subCate: item.subCate,
+            tag: this.service.splitSep(item.tag)
           };
           this.product.push(prod);
         });
         console.log(this.product);
       } else {
-        alert('No Products Found');
+        // alert('No Products Found');
+      }
+    });
+  }
+
+
+  similarProd(shopperId, category, subCate, prodId) {
+    const This = this;
+    const state = true;
+    console.log(shopperId);
+    const prodRef: AngularFirestoreCollection<any> = this.afs.collection(`products`, ref => ref.where('shopperId', '==', shopperId)
+    .where('status', '==', state).where('category', '==', category).where('subCate', '==', subCate).where('prodId', '>', prodId)
+    .where('prodId', '<', prodId));
+    prodRef.valueChanges().subscribe((value) => {
+      this.similar = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item.size);
+          const prod: Products = {
+            prodId: item.prodId,
+            prodName: item.prodName,
+            prodCode: item.prodCode,
+            prodDesc: item.prodDesc,
+            prodStatus: item.prodStatus,
+            brand: item.brand,
+            category: item.category,
+            shopperId: item.shopperId,
+            color: item.color,
+            discount: item.discount,
+            featured: item.featured,
+            image: item.image,
+            price: item.price,
+            qty: item.qty,
+            shopper: item.shopper,
+            skuCode: item.skuCode,
+            status: item.status,
+            size: this.service.splitSep(item.size),
+            subCate: item.subCate,
+            tag: this.service.splitSep(item.tag)
+          };
+          this.similar.push(prod);
+        });
+        console.log(this.similar);
+      } else {
+        // alert('No Products Found');
       }
     });
   }
 
+
   public async setProd(item: Products) {
     this.selItem = item;
   }
 
+  public async getFavlist(userId: string) {
+    const favRef: AngularFirestoreDocument<any> = this.afs.collection(`favourite`).doc(userId);
+    favRef.valueChanges().subscribe((value) => {
+      if (Object.keys(value).length > 0) {
+        this.fav = this.service.splitSep(value);
+        console.log(this.fav);
+      }
+      console.log(value);
+    });
+  }
+
+  public async changeFav(index, type) {
+    console.log(index, type);
+    if (type === 'yes') {
+      this.afs.collection('favourite').doc(this.user.uid).update({
+        [index]: true
+      });
+    } else {
+      this.afs.collection(`favourite`).doc(this.user.uid).update({
+        [index]: null
+      });
+    }
+  }
+
 }

src/config/service.service.ts

@@ -6,7 +6,11 @@ import { Storage } from '@ionic/storage';
 })
 export class ServiceService {
 
-  constructor(public storage: Storage) { }
+  state: boolean;
+
+  constructor(public storage: Storage) {
+    this.state = true;
+  }
 
   public set(settingName: string, value: any) {
     return this.storage.set(`setting:${ settingName }`, value);
@@ -36,5 +40,16 @@ export class ServiceService {
     return response;
   }
 
+  public splitSep(item: object) {
+    const response = [];
+    for (const key in item) {
+      if (item.hasOwnProperty(key)) {
+          response.push(key);
+      }
+    }
+    return response;
+  }
+
+
 
 }

src/config/services/category.ts

+export interface Category {
+    catId: string;
+    catName: string;
+    catImage: any;
+    featured: boolean;
+    status: boolean;
+}
+
+export class Categories {
+    constructor(
+        public catName: string,
+        public featured: boolean,
+        public catImage: any,
+        public status: boolean,
+        public catId?: string,
+    ) {
+
+    }
+}
+

src/config/services/center.ts

+export class Centers {
+    constructor(
+        public centerName: string,
+        public location: string,
+        public description: string,
+        public latLng: any,
+        public featured: boolean,
+        public centerImg: any,
+        public status: boolean,
+        public cId?: string,
+    ) {
+
+    }
+}
+
+export interface CenterData {
+    centerName: string;
+    location: string;
+    description: string;
+    latLng: any;
+    centerImg: any;
+    featured: boolean;
+    status: boolean;
+    cId: string;
+}

src/config/services/product.ts

 export interface Products {
     brand: string;
     category: string;
-    color: string;
+    color: any;
     discount: number;
     featured: boolean;
     image: string;
@@ -14,17 +14,9 @@ export interface Products {
     shopperId: string;
     qty: number;
     shopper: string;
-    size: Size[];
+    size: string[];
     skuCode: string;
     status: boolean;
-    currency: {
-        currId: string;
-        currName: string;
-        symbol: string
-    };
-}
-
-export interface Size {
-    sizeId: string;
-    sizeName: string;
+    subCate: boolean;
+    tag: string[];
 }

src/config/services/shopper.ts

+export interface Shopper {
+    name: string;
+    emailId: string;
+    phone: string;
+    caption: string;
+    profilePhoto: string;
+    status: boolean;
+    uid: string;
+    shopName: string;
+    address: string;
+    featured: boolean;
+    shopStatus: boolean;
+    centre: object;
+    rate: any;
+    workingHours: string;
+    featuredImage: string;
+}
+
+export interface ShopperData {
+    centre: object;
+    abn: string;
+    category: object;
+    name: string;
+    address: string;
+    emailId: string;
+    phone: string;
+    caption: string;
+    featured: boolean;
+    profilePic: any;
+    featuredImage: string;
+    shopStatus: boolean;
+    centerId: string;
+    uid: string;
+    shopName: string;
+    status: boolean;
+    rate: any;
+    workingHours: string;
+}
+

src/config/services/user.ts

@@ -7,9 +7,39 @@ export interface User {
     profilePhoto: string;
     emailVerified: boolean;
     status: boolean;
+    loginType: number;
+    otp: string;
     currency: {
         currId: string;
         currName: string;
         symbol: string
     };
 }
+
+export interface Signup {
+    name: string;
+    emailId: string;
+    phone: string;
+    password: string;
+    dob: any;
+    terms: boolean;
+}
+
+export interface Otp {
+    uid: string;
+    otp: number;
+}
+
+export interface Address {
+    addressType: string;
+    firstAddress: string;
+    secondAddress: string;
+    city: string;
+    state: string;
+    district: string;
+    landmark: string;
+    area: string;
+    zip: string;
+    country: string;
+    default: number;
+}

src/config/shopper.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Shopper } from './services/shopper';
+import * as firebase from 'firebase';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShoppersService {
+  shoppers: Shopper[] = [];
+  activeshoppers: Shopper[] = [];
+  nearshoppers: Shopper[] = [];
+  constructor(
+    public afs: AngularFirestore,
+    public afAuth: AngularFireAuth,
+  ) {
+    this.featuredshopperList();
+    this.getNearBy(10.0159, 76.3419, 10);
+  }
+
+  public async shopperList(centerId: string, type: string) {
+    const This = this;
+    const state = true;
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('shoppers', ref => ref.where(type, '==', centerId)
+    .where('status', '==', state));
+    orderRef.valueChanges().subscribe((value) => {
+      this.shoppers = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          const shopper: Shopper = {
+            name: item.name,
+            emailId: item.emailId,
+            phone: item.phone,
+            uid: item.uid,
+            profilePhoto: item.profilePic,
+            status: item.status,
+            address: item.address,
+            featured: item.featured,
+            featuredImage:  item.featuredImage,
+            shopName: item.shopName,
+            shopStatus: item.shopStatus,
+            workingHours: item.workingHours,
+            caption: item.caption,
+            centre: item.centre,
+            rate: item.rate
+          };
+          this.shoppers.push(shopper);
+        });
+        console.log(this.shoppers);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+
+  public async featuredshopperList() {
+    const This = this;
+    const state = true;
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('shoppers', ref => ref.where('featured', '==', state)
+    .where('status', '==', state));
+    orderRef.valueChanges().subscribe((value) => {
+      this.activeshoppers = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          const shopper: Shopper = {
+            name: item.name,
+            emailId: item.emailId,
+            phone: item.phone,
+            uid: item.uid,
+            profilePhoto: item.profilePic,
+            status: item.status,
+            address: item.address,
+            featured: item.featured,
+            featuredImage:  item.featuredImage,
+            shopName: item.shopName,
+            shopStatus: item.shopStatus,
+            workingHours: item.workingHours,
+            caption: item.caption,
+            centre: item.centre,
+            rate: item.rate
+          };
+          this.activeshoppers.push(shopper);
+        });
+        console.log(this.activeshoppers);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+
+  public async getNearBy(latitude, longitude, distance) {
+    const This = this;
+    const state = true;
+
+    const lat = 0.0144927536231884;
+    const lon = 0.0181818181818182;
+
+    const lowerLat = latitude - (lat * distance);
+    const lowerLon = longitude - (lon * distance);
+
+    const greaterLat = latitude + (lat * distance);
+    const greaterLon = longitude + (lon * distance);
+
+    const lesserGeopoint = new firebase.firestore.GeoPoint(lowerLat, lowerLon);
+    const greaterGeopoint = new firebase.firestore.GeoPoint(greaterLat, greaterLon);
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('shoppers', ref => ref.where('centre.latLng', '>', lesserGeopoint)
+    .where('centre.latLng', '<', greaterGeopoint).where('status', '==', state));
+    orderRef.valueChanges().subscribe((value) => {
+      this.nearshoppers = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          const shopper: Shopper = {
+            name: item.name,
+            emailId: item.emailId,
+            phone: item.phone,
+            uid: item.uid,
+            profilePhoto: item.profilePic,
+            status: item.status,
+            address: item.address,
+            featured: item.featured,
+            featuredImage:  item.featuredImage,
+            shopName: item.shopName,
+            shopStatus: item.shopStatus,
+            workingHours: item.workingHours,
+            caption: item.caption,
+            centre: item.centre,
+            rate: item.rate
+          };
+          this.nearshoppers.push(shopper);
+        });
+        console.log(this.nearshoppers);
+      } else {
+        // alert('No Orders Found');
+      }
+    });
+  }
+
+
+}