Merge branch 'adarsh' into 'master'

.gitignore

@@ -28,7 +28,7 @@ plugins/
 plugins/android.json
 plugins/ios.json
 $RECYCLE.BIN/
-
+package-lock.json
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate

config.xml

@@ -103,5 +103,4 @@
     </plugin>
     <plugin name="cordova-plugin-nativegeocoder" spec="3.2.2" />
     <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
-    <engine name="android" spec="7.1.4" />
 </widget>

package.json

@@ -18,6 +18,7 @@
         "@angular/common": "~8.1.2",
         "@angular/compiler": "~8.1.2",
         "@angular/core": "~8.1.2",
+        "@angular/fire": "^5.2.1",
         "@angular/forms": "~8.1.2",
         "@angular/platform-browser": "~8.1.2",
         "@angular/platform-browser-dynamic": "~8.1.2",
@@ -28,8 +29,9 @@
         "@ionic-native/splash-screen": "^5.0.0",
         "@ionic-native/status-bar": "^5.12.0",
         "@ionic/angular": "^4.7.1",
+        "@ionic/storage": "^2.2.0",
         "agm-direction": "^0.7.8",
-        "cordova-android": "7.1.4",
+        "cordova-android": "^8.0.0",
         "cordova-plugin-device": "^2.0.2",
         "cordova-plugin-geolocation": "4.0.2",
         "cordova-plugin-ionic-keyboard": "^2.1.3",
@@ -38,7 +40,9 @@
         "cordova-plugin-splashscreen": "^5.0.2",
         "cordova-plugin-statusbar": "^2.4.2",
         "cordova-plugin-whitelist": "^1.3.3",
+        "cordova-sqlite-storage": "^3.3.0",
         "core-js": "^2.5.4",
+        "firebase": "^6.4.0",
         "rxjs": "~6.5.1",
         "tslib": "^1.9.0",
         "zone.js": "~0.9.1"
@@ -83,10 +87,11 @@
             "cordova-plugin-geolocation": {
                 "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
             },
-            "cordova-plugin-nativegeocoder": {}
+            "cordova-plugin-nativegeocoder": {},
+            "cordova-sqlite-storage": {}
         },
         "platforms": [
             "android"
         ]
     }
-}
+}
\ No newline at end of file

resources/README.md

-These are Cordova resources. You can replace icon.png and splash.png and run
-`ionic cordova resources` to generate custom icons and splash screens for your
-app. See `ionic cordova resources --help` for details.
-
-Cordova reference documentation:
-
-- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
-- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

src/app/app.component.ts

@@ -15,10 +15,8 @@ export class AppComponent {
     private splashScreen: SplashScreen,
     private statusBar: StatusBar
   ) {
-    
     this.initializeApp();
   }
-  
 
 
   initializeApp() {

src/app/app.module.ts

@@ -6,10 +6,23 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { IonicStorageModule } from '@ionic/storage';
+
+
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { AngularFireModule } from '@angular/fire';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { AngularFireAuthModule } from '@angular/fire/auth';
+
+import { environment } from '../environments/environment';
+import { ServiceService } from './../config/service.service';
+import { AuthService } from './../config/auth.service';
+import { from } from 'rxjs';
+
 
 
 
@@ -19,14 +32,19 @@ import { AppComponent } from './app.component';
   entryComponents: [],
   imports: [BrowserModule,
      IonicModule.forRoot(),
+     IonicStorageModule.forRoot(),
       AppRoutingModule,
       BrowserAnimationsModule,
-    
+      AngularFireModule.initializeApp(environment.firebase),
+      AngularFireAuthModule,
+      AngularFirestoreModule
   ],
   providers: [
     StatusBar,
     SplashScreen,
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    ServiceService,
+    AuthService
   ],
   bootstrap: [AppComponent]
 })

src/app/cart/cart.page.html

@@ -26,17 +26,17 @@
                 </ul>
             </div>
             <div class="cart_content">
-                <ion-slides pager="false" [options]="cart_wizard" (ionSlideDidChange)="slideChanged()">
+                <ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
                     <ion-slide>
-                        <div class="cart_list">
-                            <ul>
-                                <li>
+                        <div class="cart_list" *ngIf="cartService.carts">
+                            <ul *ngIf="cartService.carts.length > 0">
+                                <li *ngFor="let carts of cartService.carts">
                                     <div class="close"></div>
-                                    <div class="cart_image"></div>
+                                    <div class="cart_image"><img [src]="carts.image" onerror="this.src=''" /></div>
                                     <div class="cart_detail">
-                                        <h4>European Style V neck</h4>
-                                        <h4>Green, Red</h4>
-                                        <h5>AU$99.00</h5>
+                                        <h4>{{carts.prodName}}</h4>
+                                        <h4>{{carts.size}}, {{carts.color}}</h4>
+                                        <h5>A$ {{carts.price}}</h5>
                                     </div>
                                     <div class="cart_count">
                                         <div class="add" (click)="addCount()">+</div>
@@ -44,45 +44,15 @@
                                         <div class="remove" (click)="removeCount()">-</div>
                                     </div>
                                     <div class="clear"></div>
-                                </li>
-                                <li>
-                                    <div class="close"></div>
-                                    <div class="cart_image"></div>
-                                    <div class="cart_detail">
-                                        <h4>European Style V neck</h4>
-                                        <h4>Green, Red</h4>
-                                        <h5>AU$99.00</h5>
-                                    </div>
-                                    <div class="cart_count">
-                                        <div class="add" (click)="addCount()">+</div>
-                                        <div class="count">{{count}}</div>
-                                        <div class="remove" (click)="removeCount()">-</div>
-                                    </div>
-                                    <div class="clear"></div>
-                                </li>
-                                <li>
-                                    <div class="close"></div>
-                                    <div class="cart_image"></div>
-                                    <div class="cart_detail">
-                                        <h4>European Style V neck</h4>
-                                        <h4>Green, Red</h4>
-                                        <h5>AU$99.00</h5>
-                                    </div>
-                                    <div class="cart_count">
-                                        <div class="add" (click)="addCount()">+</div>
-                                        <div class="count">{{count}}</div>
-                                        <div class="remove" (click)="removeCount()">-</div>
-                                    </div>
-                                    <div class="clear"></div>
-                                </li>
+                                </li>                                
                             </ul>
-                            <div class="total_div">
+                            <div class="total_div" *ngIf="cartService.cartTotal">
                                 <ion-row>
                                     <ion-col>
                                         <p class="textLeft">Total Price:</p>
                                     </ion-col>
                                     <ion-col>
-                                        <p class="textRight">AU$ 239.00</p>
+                                        <p class="textRight">A$ {{cartService.cartTotal}}</p>
                                     </ion-col>
                                 </ion-row>
                             </div>
@@ -92,43 +62,21 @@
                         <div class="checkout_list">
                             <h5>
                                 <span class="floatLeft">ITEMS</span>
-                                <span class="floatRight">AU$239.00</span>
+                                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
                                 <div class="clear"></div>
                             </h5>
-                            <ion-grid class="p0">
-                                <ion-row>
+                            <ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
+                                <ion-row *ngFor="let carts of cartService.carts">
                                     <ion-col size="6" class="p0">
-                                        <h6 class="textLeft">European Style V Neck</h6>
+                                        <h6 class="textLeft">{{carts.prodName}}</h6>
                                     </ion-col>
                                     <ion-col size="2" class="p0">
                                         <h6 class="textRight"><strong>1 X</strong></h6>
                                     </ion-col>
                                     <ion-col size="4" class="p0">
-                                        <h6 class="textRight"><strong>AU$99.00</strong></h6>
-                                    </ion-col>
-                                </ion-row>
-                                <ion-row>
-                                    <ion-col size="6" class="p0">
-                                        <h6 class="textLeft">Simple Night Wear black doted</h6>
-                                    </ion-col>
-                                    <ion-col size="2" class="p0">
-                                        <h6 class="textRight"><strong>3 X</strong></h6>
-                                    </ion-col>
-                                    <ion-col size="4" class="p0">
-                                        <h6 class="textRight"><strong>AU$60.00</strong></h6>
+                                        <h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6>
                                     </ion-col>
-                                </ion-row>
-                                <ion-row>
-                                    <ion-col size="6" class="p0">
-                                        <h6 class="textLeft">European Style V Neck</h6>
-                                    </ion-col>
-                                    <ion-col size="2" class="p0">
-                                        <h6 class="textRight"><strong>3 X</strong></h6>
-                                    </ion-col>
-                                    <ion-col size="4" class="p0">
-                                        <h6 class="textRight"><strong>AU$90.00</strong></h6>
-                                    </ion-col>
-                                </ion-row>
+                                </ion-row>                                
                             </ion-grid>
                             <hr>
                             <h5>
@@ -192,7 +140,7 @@
                             <h4>Order Placed</h4>
                             <p>June 26th 2019, 03:00 PM</p>
                             <h3>The product will be delivered in</h3>
-                            <h1>10:00 Mins</h1>
+                            <h1>60:00 Mins</h1>
                             <button class="view_order" (click)="goToPage('myorder')">VIEW ORDERS</button><br>
                             <button class="home_btn" (click)="goToPage('home')">HOME</button>
                         </div>
@@ -200,14 +148,14 @@
                 </ion-slides>
             </div>
         </div>
-        <div class="footer_btn" [hidden]="currentIndex != 0" (click)="next()">
+        <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0" (click)="next(1)">
             CHECKOUT
         </div>
-        <div class="footer_btn" [hidden]="currentIndex != 1" (click)="next()">
+        <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
             PAY
         </div>
-        <div class="footer_btn" [hidden]="currentIndex != 2" (click)="goToPage('orderplaced')">
+        <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="goToPage('orderplaced')">
             FINISH
-        </div>
+        </div> -->
     </div>
 </ion-content>
\ No newline at end of file

src/app/cart/cart.page.scss

@@ -179,6 +179,8 @@
             }
             .cart_list {
                 width: 100%;
+                height: calc(100vh - 200px);
+                overflow: scroll;
                 ul {
                     margin: 0px;
                     padding: 10px;

src/app/cart/cart.page.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
+import { CartsService } from './../../config/cart.service';
+import { OrdersService } from './../../config/order.service';
 
 
 @Component({
@@ -13,22 +15,31 @@ export class CartPage implements OnInit {
 
   @ViewChild(IonSlides, { static: false }) slides: IonSlides;
   currentIndex: any;
-  count:any;
+  count: any;
+  cartwizard = {
+    initialSlide: 0,
+    speed: 1000,
+    allowTouchMove: false
+  };
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { 
+    private location: Location,
+    public cartService: CartsService,
+    public orderService: OrdersService
+  ) {
 
     this.currentIndex = 0;
-    this.count = 0;
+    this.count = 1;
+    this.cartService.cartList();
   }
 
   ngOnInit() {
   }
 
- 
+
+
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
@@ -36,30 +47,33 @@ export class CartPage implements OnInit {
 
   goBack() {
     this.location.back();
-  }  
-  
-  cart_wizard = {
-    initialSlide: 0,
-    speed: 1000,
-    allowTouchMove: false
-  };
+  }
 
 
-  next() {
-    this.slides.slideNext();
+
+  next(index: number = null) {
+    console.log(index);
+    if (index === 2) {
+      const state = this.orderService.checkOut(this.cartService.carts).then((data) => {
+        console.log('ready for slide');
+        this.slides.slideNext();
+      });
+    } else {
+      this.slides.slideNext();
+    }
   }
 
   prev() {
     this.slides.slidePrev();
   }
 
-  addCount(){
-    this.count = this.count+1
+  addCount() {
+    // this.count = this.count+1
   }
 
   removeCount() {
-    this.count = this.count - 1;
-    if(this.count <0){
+    // this.count = this.count - 1;
+    if (this.count <0){
       this.count = 0;
     }
   }
@@ -69,8 +83,16 @@ export class CartPage implements OnInit {
     this.slides.getActiveIndex().then(index => {
       this.currentIndex = index;
       console.log(this.currentIndex);
-
     });
   } 
 
+  sliderChange() {
+    this.orderService.checkout.subscribe(state => {
+      if (state) {
+        this.next();
+        this.orderService.checkout.next(false);
+      }
+    });
+  }
+
 }

src/app/catagory/catagory.page.html

 <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft">
+    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
     <img src="../assets/Group22_2.png">
   </button>
     <div class="nav_title floatLeft">

src/app/catagory/catagory.page.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-catagory',
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CatagoryPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    public router: Router,
+    public location: Location
+  ) { }
 
   ngOnInit() {
   }
 
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
 }

src/app/home/home.page.html

@@ -24,21 +24,21 @@
             </div>
             <ion-slides pager="true">
                 <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('productlist')">
+                    <div class="banner_slide" (click)="goToPage('storelist')">
                         <h5>Lulu Fashion</h5>
                         <p>Women Fashion</p>
                     </div>
                     <img src="../assets/portrait-smiling-woman-with-shopping-bags-smartphone_1262-14313_2.png">
                 </ion-slide>
                 <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('productlist')">
+                    <div class="banner_slide" (click)="goToPage('storelist')">
                         <h5>Lulu Fashion</h5>
                         <p>Women Fashion</p>
                     </div>
                     <img src="../assets/portrait-smiling-woman-with-shopping-bags-smartphone_1262-14313_2.png">
                 </ion-slide>
                 <ion-slide>
-                    <div class="banner_slide" (click)="goToPage('productlist')">
+                    <div class="banner_slide" (click)="goToPage('storelist')">
                         <h5>Lulu Fashion</h5>
                         <p>Women Fashion</p>
                     </div>

src/app/home/home.page.ts

@@ -23,8 +23,9 @@ export class HomePage implements OnInit {
   isShow = false;
 
   slideOpts = {
-    slidesPerView:1.5
-  }
+    slidesPerView: 1.5
+  };
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -47,5 +48,4 @@ export class HomePage implements OnInit {
     this.isShow = !this.isShow;
   }
 
- 
 }

src/app/landing/landing.page.ts

 import { Component, OnInit, ViewChild, } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
 import { Router, ActivatedRoute } from '@angular/router';
+import { ServiceService } from './../../config/service.service';
 
 @Component({
   selector: 'app-landing',
@@ -9,25 +10,35 @@ import { Router, ActivatedRoute } from '@angular/router';
 })
 export class LandingPage implements OnInit {
 
+  slideOpts = {
+    initialSlide: 0,
+    speed: 1000,
+    allowTouchMove: false
+  };
+
   @ViewChild(IonSlides, { static: false })slides: IonSlides;
   currentIndex: any;
-  constructor(private router: Router, private route: ActivatedRoute) { }
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private service: ServiceService
+    ) {
+      this.service.get('landing').then((data) => {
+        if (data === true) {
+          this.goToPage('login');
+        }
+      });
+    }
 
   ngOnInit() {
   }
 
   goToPage(path, data = null) {
+    this.service.set('landing', true);
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
-  slideOpts = {
-    initialSlide: 0,
-    speed: 1000,
-    allowTouchMove: false
-  };
-
-
   next() {
     this.slides.slideNext();
   }
@@ -42,6 +53,6 @@ export class LandingPage implements OnInit {
       console.log(this.currentIndex);
 
     });
-  } 
+  }
 
 }

src/app/login/login.page.html

@@ -15,13 +15,13 @@
         </div>
         <div class="form_div">
             <div class="row">
-                <input class="" type="text" placeholder="User Name/ Email">
+                <input class="" type="text" placeholder="User Name/ Email" #userName required>
             </div>
             <div class="row">
-                <input class="" type="password" placeholder="Password">
+                <input class="" type="password" placeholder="Password" #userPassword required>
             </div>
             <div class="row">
-                <button class="login_btn" (click)="goToPage('home')">LOGIN</button>
+                <button class="login_btn" (click)="authService.SignIn(userName.value, userPassword.value)">LOGIN</button>
             </div>
             <div class="row">
                 <hr>

src/app/login/login.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { async } from "q";
+import { AuthService } from './../../config/auth.service';
+import { async } from 'q';
 
 @Component({
   selector: 'app-login',
@@ -9,7 +10,11 @@ import { async } from "q";
 })
 export class LoginPage implements OnInit {
 
-  constructor(private router: Router, private route: ActivatedRoute) { }
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public authService: AuthService
+    ) { }
 
   ngOnInit() {
   }

src/app/myorder/myorder.page.html

@@ -7,25 +7,25 @@
     <div class="clear"></div>
 </div>
 <ion-content>
-    <div class="myorder_wrapper">
-        <ul>
-            <li>
-                <div class="order_image"></div>
+    <div class="myorder_wrapper" *ngIf="myorder.orders">
+        <ul *ngIf="myorder.orders.length > 0">
+            <li *ngFor="let order of myorder.orders; let i = index">
+                <div class="order_image"><img [src]="order.image" onerror="" /></div>
                 <div class="order_detail">
-                    <h5 class="floatLeft">European Style V Neck</h5>
+                    <h5 class="floatLeft">{{order.prodName}}</h5>
                     <div class="clear"></div>
-                    <h5>Green, Small <span>3</span></h5>
-                    <p>AU$99.00</p>
+                    <h5>{{order.color}}, {{order.size}} <span>{{order.qty}}</span></h5>
+                    <p>{{order.amount}}</p>
                 </div>
                 <div class="order_other">
-                    <h6 class="floatRight">June 26th 2019</h6>
+                    <h6 class="floatRight">{{ order.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</h6>
                     <div class="clear"></div>
-                    <button class="track_btn" (click)=" goToPage('trackorder')">TRACK</button>
+                    <button class="track_btn" *ngIf="order.orderStatus == 3" (click)="orderDetails(i)">TRACK</button>
                     <div class="clear"></div>
                 </div>
                 <div class="clear"></div>
             </li>
-            <li>
+            <!-- <li>
                 <div class="order_image"></div>
                 <div class="order_detail">
                     <h5 class="floatLeft">European Style V Neck</h5>
@@ -70,7 +70,7 @@
                     <div class="clear"></div>
                 </div>
                 <div class="clear"></div>
-            </li>
+            </li> -->
         </ul>
     </div>
 </ion-content>
\ No newline at end of file

src/app/myorder/myorder.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
+import { MyordersService } from './../../config/myorder.service';
 
 @Component({
   selector: 'app-myorder',
@@ -12,7 +13,8 @@ export class MyorderPage implements OnInit {
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    public myorder: MyordersService
   ) { }
 
   ngOnInit() {
@@ -25,6 +27,12 @@ export class MyorderPage implements OnInit {
 
   goBack() {
     this.location.back();
-  } 
+  }
+
+  orderDetails(index: number) {
+      this.myorder.trackOrder(this.myorder.orders[index]);
+      this.router.navigateByUrl('trackorder');
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
 
 }

src/app/productdetail/productdetail.page.html

@@ -9,75 +9,45 @@
     <div class="clear"></div>
 </div>
 <ion-content>
-    <div class="product_detail_wrapper">
+    <div class="product_detail_wrapper" *ngIf="product">
         <div class="product_banner">
             <div class="fav_icon"></div>
-            <div class="featured_badge">Featured</div>
-            <img src="../assets/[email protected]">
+            <div class="featured_badge" *ngIf="product.featured">Featured</div>
+            <img [src]="product.image" onerror="this.src='../assets/[email protected]'">
         </div>
         <div class="product_header">
             <ion-row>
                 <ion-col size="8">
-                    <h3>European style V Neck</h3>
-                    <p><strong><span><img src="../assets/Path61_2.png"></span>4</strong>Lulu Fashion, Women's Fashion
+                    <h3>{{product.prodName}}</h3>
+                    <p><strong><span><img src="../assets/Path61_2.png"></span>4</strong>Lulu Fashion, {{product.category}}
                     </p>
                 </ion-col>
                 <ion-col size="4">
-                    <h5>AU$99.00</h5>
+                    <h5>A$ {{product.price}}</h5>
+                    <p><span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
                 </ion-col>
             </ion-row>
         </div>
         <div class="product_div_content">
             <h5>Size</h5>
             <div class="size_div">
-                <ul>
+                <ul *ngIf="product.size">
                     <ion-slides pager="false" [options]="slideOpts">
-                        <ion-slide>
-                            <li>
-                                <button id="custom_check_button">
-                              <label>
-                                <input id="1" type="radio" name="services" value="">
-                                <p>Small</p>
-                              </label>
-                            </button>
-                            </li>
-                        </ion-slide>
-                        <ion-slide>
-                            <li>
-                                <button id="custom_check_button">
-                              <label>
-                                <input id="2" type="radio" name="services" value="">
-                                <p>Medium</p>
-                              </label>
-                            </button>
-                            </li>
-                        </ion-slide>
-                        <ion-slide>
-                            <li>
-                                <button id="custom_check_button">
-                               <label>
-                                 <input id="3" type="radio" name="services" value="">
-                                 <p>Large</p>
-                               </label>
-                             </button>
-                            </li>
-                        </ion-slide>
-                        <ion-slide>
+                        <ion-slide *ngFor="let size of product.size; let i = index">
                             <li>
                                 <button id="custom_check_button">
                               <label>
-                                <input id="4" type="radio" name="services" value="">
-                                <p>Xtra Large</p>
+                                <input id="{{size.sizeId}}" type="radio" name="services" value="{{size.sizeId}}" (click)="cartService.choose_size(size.sizeName)" [checked]="i==0">
+                                <p>{{size.sizeName}}</p>
                               </label>
                             </button>
                             </li>
-                        </ion-slide>
+                        </ion-slide>                        
                     </ion-slides>
                 </ul>
             </div>
             <h5>Description</h5>
-            <p>Brand - SMART SHOP Fabric- Net Work - Embroidered Colour- White Occasion - Wedding,Festival Wash Care- Normal Wash Type- Anarkali Sleeve- Full Sleeve Dupatta- No Neck- Round This product make you more beautiful and pretty from other. This
-                product has good quality material. Buy only original that product with us for get satisfy. Buy only original Buy only that
+            <p>{{product.prodDesc}}
             </p>
             <h5>
                 <span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
@@ -206,6 +176,6 @@
             <button class="fav"></button>
             <button class="cart" (click)="goToPage('cart')"></button>
         </div>
-        <div class="footer_btn" (click)="goToPage('cart')">BUY NOW</div>
+        <div class="footer_btn" (click)="cartService.buyNow(product)">BUY NOW</div>
     </div>
 </ion-content>
\ No newline at end of file

src/app/productdetail/productdetail.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
+import { Products } from './../../config/services/product';
+import { Order } from './../../config/services/order';
+import { CartsService } from './../../config/cart.service';
+import { ProductsService } from './../../config/products.service';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-productdetail',
@@ -8,22 +13,63 @@ import { Router, ActivatedRoute } from '@angular/router';
   styleUrls: ['./productdetail.page.scss'],
 })
 export class ProductdetailPage implements OnInit {
+  product: Products;
+  order: Order;
 
   slideOpts = {
     slidesPerView: 3.5
-  }
+  };
 
   relatedProd = {
     slidesPerView: 2
-  }
+  };
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { }
+    private location: Location,
+    private cartService: CartsService,
+    private prodService: ProductsService
+  ) {
+  }
 
   ngOnInit() {
+    console.log('here');
+    const params = this.prodService.selItem;
+    if (params) {
+      const prod: Products = {
+          prodId: params.prodId,
+          prodName: params.prodName,
+          prodCode: params.prodCode,
+          prodDesc: params.prodDesc,
+          prodStatus: params.prodStatus,
+          brand: params.brand,
+          category: params.category,
+          color: params.color,
+          discount: params.discount,
+          featured: params.featured,
+          image: params.image,
+          price: params.price,
+          qty: params.qty,
+          shopper: params.shopper,
+          skuCode: params.skuCode,
+          status: params.status,
+          size: params.size,
+          currency: params.currency
+      };
+      this.product = prod;
+    } else {
+      this.product = undefined;
+    }
+    console.log(this.product);
+  }
+
+  stringObject(items: any) {
+    items.forEach(element => {
+      console.log(element.sizeId);
+      element = JSON.parse(element);
+      console.log(element);
+    });
   }
 
   goToPage(path, data = null) {

src/app/productlist/productlist.page.html

@@ -27,44 +27,17 @@
         <div class="product_title">
             Lulu Fashion
         </div>
-        <ul [class.grid_view]="onGrid">
-            <li (click)="goToPage('productdetail')">
+        <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)">
                 <div class="product_image">
-                    <img src="../assets/[email protected]">
+                    <img [src]="product.image" onerror="this.src='../assets/[email protected]'">
                     <div class="fav_icon">
                     </div>
+                    <div class="featured_badge" *ngIf="product.featured">Featured</div>
                 </div>
-                <h5>European Style V Neck</h5>
-                <p>AU$99.00</p>
-            </li>
-            <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>
-            <li (click)="goToPage('productdetail')">
-                <div class="product_image">
-                    <img src="../assets/[email protected]">
-                    <div class="fav_icon">
-                    </div>
-                </div>
-                <h5>European Style V Neck</h5>
-                <p>AU$99.00 <span class="offer">-8%</span></p>
-            </li>
-            <li (click)="goToPage('productdetail')">
-                <div class="product_image">
-                    <img src="../assets/[email protected]">
-                    <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>
-            </li>
+                <h5>{{product.prodName}}</h5>
+                <p>A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
+            </li> 
         </ul>
     </div>
     <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>

src/app/productlist/productlist.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
+import { ProductsService } from './../../config/products.service';
 
 
 @Component({
@@ -28,10 +29,12 @@ export class ProductlistPage implements OnInit {
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    public prodService: ProductsService
   ) { }
 
   ngOnInit() {
+    this.prodService.prodList();
   }
 
   goToPage(path, data = null) {
@@ -51,4 +54,10 @@ export class ProductlistPage implements OnInit {
   gridToggle(){
     this.onGrid = !this.onGrid;
   }
+
+  prodDetails(index: number) {
+    this.prodService.setProd(this.prodService.product[index]);
+    this.router.navigateByUrl('productdetail');
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
 }

src/app/storelist/storelist.page.html

 <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft">
+    <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>
@@ -15,7 +15,7 @@
         <div class="featured_slider">
             <ion-slides pager="false" [options]="slideOpts">
                 <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
+                    <div class="feature_product" (click)="goToPage('catagory')">
                         <img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
                         <div class="feature_overlay">
                             <h5>Flames Fashion</h5>
@@ -24,7 +24,7 @@
                     </div>
                 </ion-slide>
                 <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
+                    <div class="feature_product" (click)="goToPage('catagory')">
                         <img src="../assets/[email protected]">
                         <div class="feature_overlay">
                             <h5>Flames Fashion</h5>
@@ -33,7 +33,7 @@
                     </div>
                 </ion-slide>
                 <ion-slide>
-                    <div class="feature_product" (click)="goToPage('productlist')">
+                    <div class="feature_product" (click)="goToPage('catagory')">
                         <img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
                         <div class="feature_overlay">
                             <h5>Flames Fashion</h5>
@@ -48,7 +48,7 @@
         </div>
         <div class="nearby_shop_list">
             <ul>
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/[email protected]">
                     </div>
@@ -64,7 +64,7 @@
                     </div>
                     <div class="clear"></div>
                 </li>
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/[email protected]">
                     </div>
@@ -80,7 +80,7 @@
                     </div>
                     <div class="clear"></div>
                 </li>
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/[email protected]">
                     </div>
@@ -97,7 +97,7 @@
                     <div class="clear"></div>
                 </li>
 
-                <li (click)="goToPage('productlist')">
+                <li (click)="goToPage('catagory')">
                     <div class="nearby_image">
                         <img src="../assets/2193bb91-3be9-4de9-96f4-4ce7aab8547e1558436499234-RARE-Women-Black-Printed-A-Line-Dress-6731558436495088-1@3x.png">
                     </div>

src/app/storelist/storelist.page.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-storelist',
@@ -9,11 +11,23 @@ export class StorelistPage implements OnInit {
 
   slideOpts = {
     slidesPerView: 1.5
-  }
+  };
 
-  constructor() { }
+  constructor(
+    public router: Router,
+    public location: Location
+  ) { }
 
   ngOnInit() {
   }
 
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
 }

src/app/trackorder/trackorder.page.html

@@ -17,14 +17,14 @@
 
         </div> -->
     </div>
-    <div class="rider_footer ">
+    <div class="rider_footer" *ngIf="order">
         <div class="rider_image "></div>
         <div class="rider_detail ">
-            <h5>John Doe</h5>
+            <h5>{{order.riderName}}</h5>
             <p>Rider</p>
         </div>
         <div class="rider_time ">
-            18<span>Mins</span>
+            {{order.time}}<span>Mins</span>
         </div>
         <div class="rider_call ">Call Rider</div>
         <div class="clear "></div>

src/app/trackorder/trackorder.page.ts

@@ -2,6 +2,8 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
+import { MyordersService } from './../../config/myorder.service';
+import { Myorder } from './../../config/services/myorder';
 
 declare var google;
 
@@ -13,7 +15,8 @@ declare var google;
 export class TrackorderPage implements OnInit {
 
   map: any;
-  address: string
+  address: string;
+  order: Myorder;
 
   public lat: number = 51.678418;
   public lng: number = 7.809007;
@@ -25,10 +28,11 @@ export class TrackorderPage implements OnInit {
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
+    private location: Location,
+    public myorder: MyordersService
   ) { }
 
-  
+
   ngOnInit() {
     this.getDirection();
   }
@@ -46,8 +50,9 @@ export class TrackorderPage implements OnInit {
 
 
   getDirection() {
-    this.origin = { lat: 51.678418, lng: 7.809007 };
-    this.destination = { lat: 51.678418, lng: 7.81900 };
+    this.order = this.myorder.selItem;
+    this.origin = { lat: this.order.pickupLocation._lat, lng: this.order.pickupLocation._long };
+    this.destination = { lat: this.order.deliveryLocation._lat, lng: this.order.deliveryLocation._long };
     this.renderOptions = { polylineOptions: { strokeColor: 'rgba(69, 67, 152,1)' }, suppressMarkers: true };
     this.markerOptions = {
       origin: {

src/config/auth.service.ts

+import { Injectable } from '@angular/core';
+import { User } 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 { ServiceService } from './../config/service.service';
+import { from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  userData: any;
+
+  constructor(
+    public afs: AngularFirestore,
+    public afAuth: AngularFireAuth,
+    private router: Router,
+    private service: ServiceService
+  ) {
+      this.afAuth.authState.subscribe(user => {
+        if (user) {
+          this.userData = user;
+          this.service.set('user', JSON.stringify(this.userData));
+        } else {
+          this.service.set('user', null);
+          JSON.parse(localStorage.getItem('user'));
+        }
+      });
+  }
+
+  public async SignIn(email: string, password: string) {
+    return this.afAuth.auth.signInWithEmailAndPassword(email, password).then((result) => {
+      console.log('success');
+      this.router.navigateByUrl('home');
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
+      this.SetUserData(result.user);
+    }).catch((error) => {
+      window.alert(error.message);
+    });
+  }
+
+  get isLoggedIn(): boolean {
+    const user = JSON.parse(localStorage.getItem('user'));
+    return (user !== null && user.emailVerified !== false) ? true : false;
+  }
+
+  SetUserData(user: any) {
+
+    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`customers/${user.uid}`);
+    userRef.valueChanges().subscribe((value) => {
+      const userData: User = {
+        uid: value.uid,
+        emailId: value.emailId,
+        name: value.name,
+        profilePhoto: value.profilePhoto,
+        emailVerified: value.emailVerified,
+        phone: value.phone,
+        phoneVerified: value.phoneVerified,
+        status: value.status,
+        currency: value.currency
+        };
+      console.log(userData);
+    });
+  }
+
+  public async SignOut() {
+    return this.afAuth.auth.signOut().then(() => {
+      this.service.remove('user');
+      console.log('logout');
+    });
+  }
+
+
+}

src/config/cart.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Products } from './services/product';
+import { Cart, CartItem } from './services/cart';
+import { ServiceService } from './service.service';
+import * as firebase from 'firebase';
+import { take } from 'rxjs/operators';
+import { User } from './services/user';
+import { from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CartsService {
+  size: string;
+  color: string;
+  custId: string;
+  prodId: string;
+  cart: Cart;
+  user: User;
+  carts: CartItem[] = [];
+  cartTotal: number;
+
+  constructor(
+    public afs: AngularFirestore,
+    public router: Router,
+    public service: ServiceService
+  ) {
+    this.size = 'Small';
+    this.custId = '';
+    const users = this.service.get('user').then((data) => {
+      if (data) {
+        data = JSON.parse(data);
+        this.custId = data.uid;
+        console.log(this.custId);
+      } else {
+        this.custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2';
+      }
+    });
+  }
+
+  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('custId', '==', this.custId)
+    .where('product', '==', prodRef)
+    );
+    cartRef.valueChanges().pipe(take(1)).subscribe((value: Cart[]) => {
+      console.log(value);
+      if (value.length === 0) {
+        const cart: Cart = {
+          color: this.color,
+          custId: this.custId,
+          product: firebase.firestore().doc(`products/${this.prodId}`),
+          image: product.image,
+          prodId: product.prodId,
+          price: product.price,
+          prodName: product.prodName,
+          shopper: product.shopper,
+          qty: 1,
+          size: this.size
+        };
+        this.afs.collection('carts').add(cart).then((docRef) => {
+          const neworderId = docRef.id;
+          this.afs.collection('carts').doc(neworderId).update({cartId: docRef.id}).then(() => {
+            console.log('Booking Successfully');
+            this.router.navigateByUrl('cart');
+            document.body.scrollTop = document.documentElement.scrollTop = 0;
+          });
+        }).catch((error) => {
+          console.error('Error adding document: ', error);
+        });
+      } else {
+        alert('Item already added in the cart');
+      }
+    });
+  }
+
+  public async cartList() {
+    const cartRef: AngularFirestoreCollection<any> = this.afs.collection('carts', ref => ref.where('custId', '==', this.custId));
+    cartRef.valueChanges().subscribe((value) => {
+      this.carts = [];
+      const res = value;
+      this.cartTotal = 0;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          const cartItem: CartItem = {
+            cartId: item.cartId,
+            color: item.color,
+            shopperId: item.shopper,
+            prodId: item.prodId,
+            price: item.price,
+            prodName: item.prodName,
+            image: item.image,
+            qty: item.qty,
+            size: item.size,
+          };
+          this.cartTotal += item.price;
+          /*const prodItem = item.product.get().then((property) => {
+            const response = property.data();
+            cartItem.prodName = response.prodName;
+            cartItem.price = response.price;
+            cartItem.image = response.image;
+            cartItem.prodId = response.prodId;
+            cartItem.shopperId = response.shopper;
+            this.cartTotal += response.price;
+          });*/
+          this.carts.push(cartItem);
+        });
+      } else {
+       // alert('No Products Found');
+      }
+    });
+  }
+
+  choose_size(size: string) {
+    this.size = size;
+  }
+
+
+
+}

src/config/myorder.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Myorder } from './services/myorder';
+import { ServiceService } from './../config/service.service';
+import * as firebase from 'firebase';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyordersService {
+  product: Myorder[] = [];
+  custId: string;
+  orders: Myorder[];
+  selItem: Myorder;
+
+  constructor(
+    public afs: AngularFirestore,
+    public service: ServiceService
+  ) {
+    const users = this.service.get('user').then((data) => {
+      if (data) {
+        data = JSON.parse(data);
+        this.custId = data.uid;
+        if (this.custId !== undefined) {
+          this.orderList(this.custId);
+        }
+      } else {
+        this.custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2';
+      }
+    });
+  }
+
+  public async orderList(custId) {
+    console.log('called');
+    console.log(custId);
+    const This = this;
+    const orderRef: AngularFirestoreCollection<any> = this.afs.collection('orders', ref => ref.where('custId', '==', custId)
+    .orderBy('bookDate', 'desc'));
+    orderRef.valueChanges().subscribe((value) => {
+      console.log(value);
+      this.orders = [];
+      const res = value;
+      if (res.length > 0) {
+        res.forEach((item) => {
+          console.log(item);
+          const order: Myorder = {
+            prodName: item.prodName,
+            color: item.color,
+            image: item.image,
+            amount: item.amount,
+            qty: item.qty,
+            status: item.status,
+            orderStatus: item.orderStatus,
+            bookDate: item.bookDate,
+            deliveryLocation: item.deliveryLocation,
+            pickupLocation: item.pickupLocation,
+            riderName: 'John',
+            size: item.size,
+            time: '60'
+          };
+          this.orders.push(order);
+        });
+        console.log(this.orders);
+      } else {
+        alert('No Orders Found');
+      }
+    });
+  }
+
+  public async trackOrder(order) {
+      this.selItem = order;
+  }
+
+}

src/config/order.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Order } from './services/order';
+import { Products } from './services/product';
+import { ServiceService } from './service.service';
+import * as firebase from 'firebase';
+import { CartItem } from './services/cart';
+import { BehaviorSubject } from 'rxjs';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OrdersService {
+  order: Order;
+  size: string;
+  color: string;
+  custId: string;
+  shopperId: any;
+  checkout = new BehaviorSubject(false);
+
+  constructor(
+    public afs: AngularFirestore,
+    public router: Router,
+    public service: ServiceService
+  ) {
+    this.size = 'small';
+    this.color = 'Blue';
+    this.custId = '';
+    const users = this.service.get('user').then((data) => {
+      if (data) {
+        data = JSON.parse(data);
+        this.custId = data.uid;
+        console.log(this.custId);
+      } else {
+        this.custId = 'WwHnLICVY2dvZGUHuKqasiTB91a2';
+      }
+    });
+  }
+
+  public async checkOut(cart: CartItem[]) {
+    console.log(cart);
+    let currProcess = 0;
+    const cartCount = cart.length;
+    cart.forEach((product) => {
+      this.afs.collection('orders').add({
+        bookDate: firebase.firestore.FieldValue.serverTimestamp()
+      }).then((docRef) => {
+        const neworderId = docRef.id;
+        const delivery = new firebase.firestore.GeoPoint(10.0237, 76.3116);
+        const pickup = new firebase.firestore.GeoPoint(10.7231, 76.1234);
+        const orderItem: Order = {
+          amount: 'A$ 175',
+          customer: firebase.firestore().doc('/customer/' + this.custId),
+          shopper: product.shopperId,
+          deliveryAddress: 'Techware Software solution, Carnival Infopark, Kochi',
+          deliveryCharge: 'A$ 0.5',
+          deliveryLocation: delivery,
+          bookDate: firebase.firestore.FieldValue.serverTimestamp(),
+          discount: 'A$ 12.00',
+          orderCode: this.orderCode(),
+          orderId: neworderId,
+          orderStatus: 1,
+          pickupAddress: 'GetMi, Canberra, AUS',
+          pickupLocation: pickup,
+          price: 'A$ ' + product.price,
+          product: firebase.firestore().doc('/product/' + product.prodId),
+          promoId: null,
+          qty: product.qty,
+          rider: firebase.firestore().doc('/riders/qbTKza18mWVzYG9NLIbmjMbrYjG2'),
+          status: 1,
+          tax: 'A$ 7.5',
+          size: product.size,
+          color: product.color,
+          custId: this.custId,
+          image: product.image,
+          prodId: product.prodId,
+          prodName: product.prodName,
+          riderId: 'qbTKza18mWVzYG9NLIbmjMbrYjG2',
+          shopperId: 'qbTKza18mWVzYG9NLIbmjMbrYjG2'
+        };
+        this.afs.collection('orders').doc(neworderId).set(orderItem).then(() => {
+          currProcess += 1;
+          console.log('Booking Successfully');
+          this.afs.doc(`carts/${product.cartId}`).delete();
+          // this.router.navigateByUrl('cart');
+          console.log(currProcess, cartCount);
+          document.body.scrollTop = document.documentElement.scrollTop = 0;
+          if (currProcess === cartCount) {
+            // this.router.navigateByUrl('cart');
+            return true;
+          }
+        });
+      }).catch((error) => {
+        console.error('Error adding document: ', error);
+      });
+    });
+
+  }
+
+  public async buyNow(product: Products) {
+    //
+  }
+
+  orderCode() {
+    const newpin =  Math.round(Math.random() * 1000000);
+    const orderCode = 'GM' + this.pad(newpin, 6, null);
+    return orderCode;
+  }
+
+  pad(n, width, z) {
+    z = z || '0';
+    n = n + '';
+    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+  }
+
+  choose_size(size: string) {
+    this.size = size;
+  }
+
+}

src/config/products.service.ts

+import { Injectable } from '@angular/core';
+import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Products } from './services/product';
+import { ServiceService } from './../config/service.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductsService {
+  product: Products[] = [];
+  selItem: Products;
+
+  constructor(
+    public afs: AngularFirestore,
+    public service: ServiceService
+  ) { }
+
+  public async prodList() {
+    const This = this;
+    const prodRef: AngularFirestoreCollection<any> = this.afs.collection(`products`);
+    prodRef.valueChanges().subscribe((value) => {
+      this.product = [];
+      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.brandName,
+            category: item.category.catName,
+            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.key2Array(item.size),
+            currency: item.currency
+          };
+          this.product.push(prod);
+        });
+        console.log(this.product);
+      } else {
+        alert('No Products Found');
+      }
+    });
+  }
+
+  public async setProd(item: Products) {
+    this.selItem = item;
+  }
+
+}

src/config/service.service.ts

+import { Injectable } from '@angular/core';
+import { Storage } from '@ionic/storage';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServiceService {
+
+  constructor(public storage: Storage) { }
+
+  public set(settingName: string, value: any) {
+    return this.storage.set(`setting:${ settingName }`, value);
+  }
+
+  public async get(settingName: string) {
+    return await this.storage.get(`setting:${ settingName }`);
+  }
+
+  public async remove(settingName: string) {
+    return await this.storage.remove(`setting:${ settingName }`);
+  }
+
+  public clear() {
+    this.storage.clear().then(() => {
+      console.log('all keys cleared');
+    });
+  }
+
+  public key2Array(item: object) {
+    const response = [];
+    for (const key in item) {
+      if (item.hasOwnProperty(key)) {
+          response.push(item[key]);
+      }
+    }
+    return response;
+  }
+
+
+}

src/config/services/cart.ts

+export interface Cart {
+    custId: string;
+    shopper: any;
+    product: any;
+    prodName: any;
+    prodId: string;
+    image: string;
+    size: string;
+    color: string;
+    qty: number;
+    price: number;
+}
+
+export interface CartItem {
+    cartId: string;
+    prodId: string;
+    shopperId: any;
+    prodName: any;
+    image: string;
+    size: string;
+    color: string;
+    qty: number;
+    price: number;
+}
+

src/config/services/myorder.ts

+export interface Myorder {
+    amount: string;
+    prodName: any;
+    image: string;
+    size: string;
+    color: string;
+    qty: number;
+    bookDate: any;
+    pickupLocation: any;
+    deliveryLocation: any;
+    status: number;
+    orderStatus: number;
+    riderName: string;
+    time: string;
+}
+

src/config/services/order.ts

+import { AngularFirestoreDocument } from '@angular/fire/firestore';
+import { GeoJsonOptions } from '@agm/core/services/google-maps-types';
+
+export interface Order {
+    amount: string;
+    customer: any;
+    deliveryAddress: string;
+    deliveryCharge: string;
+    deliveryLocation: object;
+    discount: string;
+    orderCode: string;
+    orderId: string;
+    orderStatus: number;
+    pickupAddress: string;
+    pickupLocation: object;
+    price: string;
+    bookDate: any;
+    prodId: string;
+    custId: string;
+    product: any;
+    prodName: any;
+    image: string;
+    size: string;
+    color: string;
+    promoId: any;
+    qty: number;
+    rider: any;
+    riderId: string;
+    shopper: any;
+    shopperId: string;
+    status: number;
+    tax: string;
+}
+

src/config/services/product.ts

+export interface Products {
+    brand: string;
+    category: string;
+    color: string;
+    discount: number;
+    featured: boolean;
+    image: string;
+    price: number;
+    prodCode: string;
+    prodDesc: string;
+    prodId: string;
+    prodName: string;
+    prodStatus: boolean;
+    qty: number;
+    shopper: string;
+    size: Size[];
+    skuCode: string;
+    status: boolean;
+    currency: {
+        currId: string;
+        currName: string;
+        symbol: string
+    };
+}
+
+export interface Size {
+    sizeId: string;
+    sizeName: string;
+}

src/config/services/user.ts

+export interface User {
+    uid: string;
+    emailId: string;
+    name: string;
+    phone: string;
+    phoneVerified: boolean;
+    profilePhoto: string;
+    emailVerified: boolean;
+    status: boolean;
+    currency: {
+        currId: string;
+        currName: string;
+        symbol: string
+    };
+}

src/environments/environment.ts

@@ -3,7 +3,16 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebase: {
+    apiKey: 'AIzaSyDzc8lCO4NAfc3PbXPQjvmSWDbsw-yTqXw',
+    authDomain: 'getmi-4fd26.firebaseapp.com',
+    databaseURL: 'https://getmi-4fd26.firebaseio.com',
+    projectId: 'getmi-4fd26',
+    storageBucket: 'getmi-4fd26.appspot.com',
+    messagingSenderId: '949385251610',
+    appId: '1:949385251610:web:cec06e05a0b1aa58'
+  }
 };
 
 /*