wishlist

package-lock.json

@@ -1493,6 +1493,21 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/social-sharing": {
+      "version": "5.20.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/social-sharing/-/social-sharing-5.20.0.tgz",
+      "integrity": "sha512-YPu4mLf/oOk7Te1A/bxXC5roozAstpRXGSD3G9NdnFVRF6Vd/IT6heKg+grtQCzQXAgr3XP5hcTVhUb+5Tp17w==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/splash-screen": {
       "version": "5.19.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.19.1.tgz",
@@ -3555,6 +3570,11 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.4.tgz",
       "integrity": "sha512-EYC5eQFVkoYXq39l7tYKE6lEjHJ04mvTmKXxGL7quHLdFPfJMNzru/UYpn92AOfpl3PQaZmou78C7EgmFOwFQQ=="
     },
+    "cordova-plugin-x-socialsharing": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-x-socialsharing/-/cordova-plugin-x-socialsharing-5.6.3.tgz",
+      "integrity": "sha512-veAoIOgviGL9RCUyol9e6BxBRpyPV5OWaAmFKglbLjF2uGvj73k+jPe2+2p39ySPetxC8KERAz+1I6tfjk42Zg=="
+    },
     "cordova-sqlite-storage": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/cordova-sqlite-storage/-/cordova-sqlite-storage-3.4.1.tgz",
@@ -4304,6 +4324,11 @@
       "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
       "dev": true
     },
+    "es6-promise-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/es6-promise-plugin/-/es6-promise-plugin-4.2.2.tgz",
+      "integrity": "sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA=="
+    },
     "es6-promisify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
@@ -11655,7 +11680,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -11698,7 +11724,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -11709,7 +11736,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11826,7 +11854,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11838,6 +11867,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11867,6 +11897,7 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -11885,6 +11916,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11978,6 +12010,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12063,7 +12096,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12099,6 +12133,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -12118,6 +12153,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12161,12 +12197,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -12689,6 +12727,7 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12707,6 +12746,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -12886,7 +12926,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12992,7 +13033,8 @@
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

package.json

@@ -27,6 +27,7 @@
         "@ionic-native/geolocation": "^5.19.1",
         "@ionic-native/google-plus": "^5.19.1",
         "@ionic-native/native-geocoder": "^5.19.1",
+        "@ionic-native/social-sharing": "^5.20.0",
         "@ionic-native/splash-screen": "^5.19.1",
         "@ionic-native/status-bar": "^5.19.1",
         "@ionic/angular": "^4.11.8",
@@ -43,8 +44,10 @@
         "cordova-plugin-splashscreen": "^5.0.3",
         "cordova-plugin-statusbar": "^2.4.3",
         "cordova-plugin-whitelist": "^1.3.4",
+        "cordova-plugin-x-socialsharing": "^5.6.3",
         "cordova-sqlite-storage": "^3.4.1",
         "core-js": "^2.6.11",
+        "es6-promise-plugin": "^4.2.2",
         "firebase": "^6.6.2",
         "rxjs": "^6.5.4",
         "rxjs-compat": "^6.5.4",
@@ -96,6 +99,9 @@
             "cordova-plugin-googleplus": {
                 "REVERSED_CLIENT_ID": "com.googleusercontent.apps.949385251610-a6lrfr6uhr73991e38t3t013jj3v56a9",
                 "PLAY_SERVICES_VERSION": "15.0.1"
+            },
+            "cordova-plugin-x-socialsharing": {
+                "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
             }
         },
         "platforms": [

src/app/address/address.page.scss

 .address-wrapper {
+  padding: 15px;
+  padding-bottom: 11%;
+  .address-radio {
+    background-image: url('../../assets/radio.png');
+    -webkit-appearance: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 25px;
+    height: auto;
     padding: 15px;
-    .address-radio {
-        background-image: url("../../assets/radio.png");
-        -webkit-appearance: none;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 25px;
-        height: auto;
-        padding: 15px;
-        border-radius: 5px;
-        outline: none;
-        transition: all .6s ease-in-out;
-    }
-    .address-radio:checked {
-        background-image: url("../../assets/radio-checked.png");
-    }
-    .address-radio:checked+.show-btn {
-        opacity: 1;
-    }
-    h1 {
-        font-size: 18px;
-        margin-top: 6px;
-        padding-left: 10px;
-    }
-    p {
-        margin-top: 20px;
-        padding-left: 10px;
-        color: #B0AEC7;
-    }
-    button {
-        background: none;
-        outline: none;
-    }
-    img {
-        width: 35px;
-    }
+    border-radius: 5px;
+    outline: none;
+    transition: all 0.6s ease-in-out;
+  }
+  .address-radio:checked {
+    background-image: url('../../assets/radio-checked.png');
+  }
+  .address-radio:checked + .show-btn {
+    opacity: 1;
+  }
+  h1 {
+    font-size: 18px;
+    margin-top: 6px;
+    padding-left: 10px;
+  }
+  p {
+    margin-top: 20px;
+    padding-left: 10px;
+    color: #b0aec7;
+  }
+  button {
+    background: none;
+    outline: none;
+  }
+  img {
+    width: 35px;
+  }
 }
 
 .address-btn-wrapper {
-    padding: 15px;
-    position: absolute;
-    bottom: 50px;
-    left: 0;
-    right: 0;
-    button {
-        width: 100%;
-        background-color: #29285b;
-        color: #fff;
-        border-radius: 8px;
-        height: 45px;
-        font-size: 16px;
-        text-transform: uppercase;
-    }
-}
+  padding: 15px;
+  padding-top: 0;
+  padding-bottom: 10px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  button {
+    width: 100%;
+    background-color: #29285b;
+    color: #fff;
+    border-radius: 8px;
+    height: 45px;
+    font-size: 16px;
\ No newline at end of file
+    text-transform: uppercase;
+  }
+}

src/app/app.component.ts

@@ -114,7 +114,8 @@ export class AppComponent {
       'signup',
       'address',
       'forgot',
-      'feedback'
+      'feedback',
+      'wishlist'
     ];
     const currentUrl = this.router.url.split('/');
     const index = restrictedUrl.findIndex(x => x === currentUrl[1]);

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { from } from 'rxjs';
 import { DeliverypopPageModule } from './deliverypop/deliverypop.module';
 import { FormsModule } from '@angular/forms';
 import { SearchmodalPageModule } from './searchmodal/searchmodal.module';
+import { SocialSharing } from '@ionic-native/social-sharing/ngx';
 
 @NgModule({
   declarations: [AppComponent],
@@ -54,7 +55,8 @@ import { SearchmodalPageModule } from './searchmodal/searchmodal.module';
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     ServiceService,
     AuthService,
-    GooglePlus
+    GooglePlus,
+    SocialSharing
   ],
   bootstrap: [AppComponent]
 })

src/app/changedetails/changedetails.page.html

@@ -21,7 +21,7 @@
           class=""
           type="text"
           [(ngModel)]="userData && userData.name"
-          [(placeholder)]="userData && userData.name"
+          placeholder="Change your Name"
           #name="ngModel"
         />
         <div
@@ -39,7 +39,7 @@
           class=""
           name="emailId"
           type="mail"
-          [(placeholder)]="userData && userData.emailId"
+          placeholder="email cannot be changed"
         />
       </div>
 
@@ -53,7 +53,7 @@
           pattern="(\(+61\)|\+61|\(0[1-9]\)|0[1-9])?( ?-?[0-9]){6,9}"
           maxlength="10"
           [(ngModel)]="userData && userData.phone"
-          [(placeholder)]="userData && userData.phone"
+          placeholder="Change your Phone Number"
           #phone="ngModel"
         />
         <div
@@ -72,9 +72,22 @@
         <div class="row">
           <h6>Change Password</h6>
         </div>
-        <!-- <div class="row">
-        <input class="" type="password" placeholder="Current Password" />
-      </div> -->
+        <div class="row">
+          <input
+            class=""
+            type="password"
+            minlength="6"
+            #currentPassword="ngModel"
+            [(ngModel)]="updatePassword.currentPassword"
+            name="currentPassword"
+            placeholder="Current Password"
+          />
+          <div
+            *ngIf="currentPassword.errors && currentPassword.errors.minlength"
+          >
+            Password must be at least 6 characters
+          </div>
+        </div>
         <div class="row">
           <input
             class=""
@@ -83,6 +96,7 @@
             type="password"
             placeholder="New Password"
             minlength="6"
+            [required]="currentPassword ? true: false"
             #password="ngModel"
           />
           <div *ngIf="password.errors && password.errors.minlength">
@@ -96,10 +110,11 @@
             [(ngModel)]="updatePassword.confirmPassword"
             name="confirmPassword"
             type="password"
+            [required]="currentPassword ? true: false"
             placeholder="Confirm Password"
           />
-          <div *ngIf="">
-            Password should match
+          <div *ngIf="confirmPassword.errors">
+            {{confPasswordErr}}
           </div>
         </div>
       </div>
@@ -112,3 +127,10 @@
     </form>
   </div>
 </ion-content>
+
+<div class="loader" *ngIf="register.loader">
+  <div class="lds-ripple">
+    <div></div>
+    <div></div>
+  </div>
+</div>

src/app/changedetails/changedetails.page.ts

@@ -17,6 +17,7 @@ export class ChangedetailsPage implements OnInit {
     name: '',
     phone: ''
   };
+  confPasswordErr: string;
 
   updatePassword: UpdatePassword = {
     password: '',
@@ -32,10 +33,18 @@ export class ChangedetailsPage implements OnInit {
     private service: ServiceService
   ) {
     // Gets userdata
-    this.service.get('params').then(val => {
-      this.userData = val;
-      console.log(val);
+    this.service.get('userData').then(val => {
+      console.log(JSON.parse(val));
+      this.userData = JSON.parse(val);
+      console.log(this.userData);
     });
+
+    // this.service.get('user').then(data => {
+    //   if (data) {
+    //     this.userData = JSON.parse(data);
+    //     console.log(this.userData);
+    //   }
+    // });
   }
 
   ngOnInit() {}
@@ -54,18 +63,28 @@ export class ChangedetailsPage implements OnInit {
     console.log(form.value);
     if (form.valid) {
       // Change Password
-      if (
-        form.value.password &&
-        form.value.password != form.value.confirmPassword
-      ) {
-        // this.register.updatePassword(form.value.password);
+      if (form.value.currentPassword && form.value.password) {
+        if (
+          form.value.password &&
+          form.value.password === form.value.confirmPassword
+        ) {
+          // this.register.updateData(form.value, this.userData.uid);
+          this.register.updatePassword(
+            form.value.currentPassword,
+            form.value.password
+          );
+          console.log('Password Changed and profile updated'), form.value;
+        } else {
+          console.log('Password should match');
+          this.confPasswordErr = 'Password should match';
+        }
       } else {
-        alert('Password should match');
+        // this.register.updateData(form.value, this.userData);
+        console.log('profile updated', form.value);
       }
-
-      // Calls update user data fn
-      // this.register.updateData(form.value, this.userData.uid);
-      console.log('valid form values', form.value);
+      // console.log('valid form values', form.value);
+    } else {
+      console.log(form);
     }
   }
 }

src/app/productdetail/productdetail.page.html

@@ -272,11 +272,17 @@
     </div>
   </div>
 </ion-content>
-<ion-footer>
+<ion-footer *ngIf="product">
   <div class="footer_div">
     <div class="footer_options">
-      <button class="share"></button>
-      <button class="fav"></button>
+      <button
+        class="share"
+        (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"
+      ></button>
+      <button
+        [ngClass]="checkFavStatus(product.prodId)"
+        (click)="changeFav(product.prodId)"
+      ></button>
       <button class="cart" (click)="buyNow(product,0)"></button>
     </div>
     <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>

src/app/productdetail/productdetail.page.ts

@@ -8,6 +8,7 @@ import { Order } from './../../config/services/order';
 import { CartsService } from './../../config/cart.service';
 import { ProductsService } from './../../config/products.service';
 import { ServiceService } from './../../config/service.service';
+import { SocialSharing } from '@ionic-native/social-sharing/ngx';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -42,7 +43,8 @@ export class ProductdetailPage implements OnInit {
     private location: Location,
     private cartService: CartsService,
     private prodService: ProductsService,
-    private service: ServiceService
+    private service: ServiceService,
+    private socialSharing: SocialSharing
   ) {
     const params = this.prodService.selItem;
     this.service.state = true;
@@ -144,10 +146,11 @@ export class ProductdetailPage implements OnInit {
 
   checkFavStatus(index) {
     const state = this.prodService.fav.findIndex(x => x === index);
-    return state > -1 ? 'fav_fill' : 'fav_icon';
+    return state > -1 ? 'fav_active' : 'fav';
   }
 
   changeFav(index) {
+    this.prodService.changeFav(index, 'yes');
     const state = this.prodService.fav.findIndex(x => x === index);
     // console.log(state);
     // console.log(this.prodService.fav);
@@ -161,4 +164,15 @@ export class ProductdetailPage implements OnInit {
     return;
     // console.log(this.prodService.fav);
   }
+
+  socialShare(prodName, category, subCate, price, image) {
+    const desc = category + ', ' + subCate + ', ' + price;
+    const content = {
+      message: desc, // not supported on some apps (Facebook, Instagram)
+      subject: prodName, // fi. for email
+      files: image,
+      chooserTitle: 'GetMi'
+    };
+    this.socialSharing.shareWithOptions(content);
+  }
 }

src/app/productlist/productlist.page.scss

@@ -108,7 +108,7 @@
         img {
           width: 100%;
           height: 100%;
-          object-fit: cover;
+          object-fit: contain;
           object-position: center;
         }
       }

src/app/productlist/productlist.page.ts

@@ -33,6 +33,7 @@ export class ProductlistPage implements OnInit {
   sortValue: string;
   loader: boolean;
   shopperId: any;
+  custId: any;
 
   constructor(
     private router: Router,
@@ -54,10 +55,25 @@ export class ProductlistPage implements OnInit {
         this.loader = false;
       }, 2000);
     });
+    const users = this.service.get('user').then(data => {
+      if (data) {
+        data = JSON.parse(data);
+        this.custId = data.uid;
+      }
+    });
   }
 
   ngOnInit() {}
 
+  ionViewWillEnter() {
+    const users = this.service.get('user').then(data => {
+      if (data) {
+        data = JSON.parse(data);
+        this.prodService.getFavlist(data.uid);
+      }
+    });
+  }
+
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;

src/app/profile/profile.page.html

@@ -71,20 +71,22 @@
         </ion-row>
       </div>
       <hr />
-      <ion-row>
+      <ion-row (click)="goToPage('wishlist')">
         <ion-col class="textLeft p0">
           <p>Wishlist</p>
         </ion-col>
-        <ion-col class="textRight p0" (click)="goToPage('wishlist')">
-          <h6>(0)</h6>
+        <ion-col class="textRight p0">
+          <h6 *ngIf="wishService.whishItem">
+            ({{wishService.whishItem.length}})
+          </h6>
         </ion-col>
       </ion-row>
       <hr />
-      <ion-row>
+      <ion-row (click)="goToPage('address')">
         <ion-col class="textLeft p0">
           <p>Address</p>
         </ion-col>
-        <ion-col class="textRight p0" (click)="goToPage('address')">
+        <ion-col class="textRight p0">
           <h6 *ngIf="addressService.addList">
             ({{addressService.addressList.length}})
           </h6>
@@ -102,11 +104,11 @@
         </ion-col>
       </ion-row>
       <hr /> -->
-      <ion-row>
+      <ion-row (click)="goToPage('myorder')">
         <ion-col class="textLeft p0">
           <p>My Order</p>
         </ion-col>
-        <ion-col class="textRight p0" (click)="goToPage('myorder')">
+        <ion-col class="textRight p0">
           <h6>
             <ion-icon name="arrow-forward"></ion-icon>
           </h6>

src/app/profile/profile.page.ts

@@ -7,6 +7,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { finalize, tap } from 'rxjs/operators';
 import { Location } from '@angular/common';
 import { AddressService } from './../../config/address.service';
+import { WishService } from './../../config/wish.service';
 import {
   AngularFireStorage,
   AngularFireStorageReference,
@@ -41,25 +42,32 @@ export class ProfilePage implements OnInit {
   downloadURL;
 
   constructor(
+    private route: ActivatedRoute,
     private router: Router,
     private storage: AngularFireStorage,
     private useService: UserService,
     private service: ServiceService,
     private authService: AuthService,
     private addressService: AddressService,
+    private wishService: WishService,
     private location: Location
   ) {
     this.service.get('user').then(data => {
       if (data) {
         this.userData = JSON.parse(data);
+        this.wishService.wishList(this.userData.uid);
         console.log(this.userData);
       }
     });
 
-    this.service.get('userData').then(data => {
-      if (data) {
-        this.loggedUser = JSON.parse(data);
-      }
+    // Listens to url
+    route.params.subscribe(val => {
+      // Get user Data
+      this.service.get('userData').then(data => {
+        if (data) {
+          this.loggedUser = JSON.parse(data);
+        }
+      });
     });
   }
 
@@ -69,6 +77,7 @@ export class ProfilePage implements OnInit {
   }
 
   ngOnInit() {
+    console.log('profile page');
     const This = this;
     setTimeout(() => {
       this.user = this.useService.users;

src/app/wishlist/wishlist.page.html

@@ -10,44 +10,50 @@
 
 <ion-content>
   <div class="wishlist-wrapper">
-    <ul>
-      <li>
-        <div class="wishlist_image">
-          <img src="../../assets/img-list.png" />
+    <ul *ngIf="wishService.whishItem && wishService.whishItem.length > 0">
+      <li *ngFor="let product of wishService.whishItem; let i = index">
+        <div class="wishlist_image" (click)="prodDetails(i)">
+          <img
+            [src]="product.image"
+            onerror="this.src='../../assets/img-list.png'"
+          />
         </div>
         <div class="wishlist_detail">
-          <p class="floatLeft">European Style V Neck</p>
-          <span class="floatRight"><img src="../../assets/heart.png"/></span>
+          <p class="floatLeft" (click)="prodDetails(i)">{{product.prodName}}</p>
+          <span class="floatRight"
+            ><img
+              src="../../assets/heart.png"
+              (click)="removeItem(product.prodId)"
+          /></span>
           <div class="clear"></div>
-          <p>Green, Small</p>
-          <h1>AU$88.00</h1>
-        </div>
-        <div class="clear"></div>
-      </li>
-      <li>
-        <div class="wishlist_image">
-          <img src="../../assets/img-list.png" />
-        </div>
-        <div class="wishlist_detail">
-          <p class="floatLeft">European Style V Neck</p>
-          <span class="floatRight"><img src="../../assets/heart.png"/></span>
-          <div class="clear"></div>
-          <p>Green, Small</p>
-          <h1>AU$88.00</h1>
+          <p (click)="prodDetails(i)">
+            <span *ngIf="product.color[0] !=='No-Color'"
+              >{{product.color[0]}}</span
+            >,
+            <span *ngIf="product.size[0] !=='Any-Size'"
+              >{{product.size[0]}}</span
+            >
+          </p>
+          <h1 (click)="prodDetails(i)">A$ {{product.price}}</h1>
         </div>
         <div class="clear"></div>
       </li>
     </ul>
   </div>
-
-  <div class="empty-wishlist-wrapper">
+  <div class="empty-wishlist-wrapper" *ngIf="wishService.whishItem.length == 0">
     <img src="../../assets/wishlist.png" />
     <h1>There is no products added</h1>
     <button (click)="goToPage('home')">shop now</button>
   </div>
 
-  <div class="footer-btns-wrapper">
-    <button class="btn-clear">Clear All</button>
-    <button class="btn-cart">add all to cart</button>
+  <div class="footer-btns-wrapper" *ngIf="wishService.whishItem.length > 0">
+    <button class="btn-clear" (click)="clearAll()">Clear All</button>
+    <button class="btn-cart" (click)="addToCart()">add all to cart</button>
   </div>
 </ion-content>
+<div class="loader" *ngIf="loader">
+  <div class="lds-ripple">
+    <div></div>
+    <div></div>
+  </div>
+</div>

src/app/wishlist/wishlist.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
+import { ServiceService } from './../../config/service.service';
+import { WishService } from './../../config/wish.service';
+import { ProductsService } from './../../config/products.service';
 
 @Component({
   selector: 'app-wishlist',
@@ -8,7 +11,27 @@ import { Router, ActivatedRoute } from '@angular/router';
   styleUrls: ['./wishlist.page.scss']
 })
 export class WishlistPage implements OnInit {
-  constructor(private location: Location, private router: Router) {}
+  custId: any;
+  loader: boolean;
+  constructor(
+    private location: Location,
+    private router: Router,
+    public service: ServiceService,
+    public wishService: WishService,
+    public prodService: ProductsService
+  ) {
+    this.loader = true;
+    setTimeout(() => {
+      this.loader = false;
+    }, 2000);
+    const users = this.service.get('user').then(data => {
+      if (data) {
+        data = JSON.parse(data);
+        this.custId = data.uid;
+        this.wishService.wishList(this.custId);
+      }
+    });
+  }
 
   ngOnInit() {}
 
@@ -16,8 +39,80 @@ export class WishlistPage implements OnInit {
     this.location.back();
   }
 
+  clearAll() {
+    this.loader = true;
+    this.wishService
+      .clearWish(this.custId)
+      .then(data => {
+        this.loader = false;
+        this.service.showToast(
+          'Wish list cleared successfully',
+          'top',
+          'my-toast',
+          2000
+        );
+      })
+      .catch(err => {
+        this.loader = false;
+        this.service.showToast('Something went wrong', 'top', 'my-error', 1000);
+      });
+  }
+
+  addToCart() {
+    this.loader = true;
+    this.wishService
+      .addToCart(this.custId, this.wishService.whishItem)
+      .then(data => {
+        this.wishService
+          .clearWish(this.custId)
+          .then(datas => {
+            this.loader = false;
+            this.service.showToast('Added to cart', 'top', 'my-toast', 2000);
+          })
+          .catch(err => {
+            this.loader = false;
+            this.service.showToast(
+              'Something went wrong',
+              'top',
+              'my-error',
+              1000
+            );
+          });
+      })
+      .catch(err => {
+        this.loader = false;
+        this.service.showToast('Something went wrong', 'top', 'my-error', 1000);
+      });
+  }
+
+  removeItem(prodId) {
+    this.loader = true;
+    this.wishService
+      .clearWishItem(this.custId, prodId)
+      .then(data => {
+        this.loader = false;
+        this.service.showToast(
+          'Wish list cleared successfully',
+          'top',
+          'my-toast',
+          2000
+        );
+      })
+      .catch(err => {
+        this.loader = false;
+        this.service.showToast('Something went wrong', 'top', 'my-error', 1000);
+      });
+  }
+
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, { queryParams: data });
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
+
+  prodDetails(index: number) {
+    console.log(this.wishService.whishItem[index]);
+    this.prodService.setProd(this.wishService.whishItem[index]);
+    this.router.navigateByUrl('productdetail');
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
 }

src/config/services/wishlist.ts

+export interface Wishlist {
+  prodId: string;
+  shopperId: any;
+  shopper: any;
+  prodName: any;
+  image: string;
+  size: any;
+  color: any;
+  qty: number;
+  price: number;
+}

src/config/update.service.ts

@@ -21,6 +21,7 @@ export class UpdateService {
   type: number;
   userPostData: any;
   updateStatus: number;
+  loader: boolean;
 
   constructor(
     public afs: AngularFirestore,
@@ -47,25 +48,88 @@ export class UpdateService {
     // });
   }
 
-  updateData(userData: UpdateUserDetails, uid: string) {
+  // Update User Data
+  updateData(userData: UpdateUserDetails, oldData: User) {
+    this.loader = true;
     this.type = 2;
 
     const postData: UpdateUserDetails = {
       phone: userData.phone,
       name: userData.name
     };
+    const updateOldData = {
+      ...oldData,
+      phone: userData.phone,
+      name: userData.name
+    };
     this.userPostData = postData;
 
     this.afs
       .collection('customers')
-      .doc(uid)
+      .doc(oldData.uid)
       .update(postData)
       .then(() => {
-        console.log('success');
-        this.router.navigateByUrl('profile');
+        this.service
+          .set('userData', JSON.stringify(updateOldData))
+          .then(res => {
+            console.log('success', updateOldData, res);
+            this.service
+              .showToast('Profile updated!', 'top', 'my-toast', 1000)
+              .then(res => {
+                this.router.navigateByUrl('profile');
+                this.loader = false;
+              });
+          })
+          .catch(err => console.log(err));
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
+  // Change user password
+  updatePassword(currentPassword: string, newPasswd: string) {
+    this.loader = true;
+
+    let currentUser = this.afAuth.auth.currentUser; // Gets current user
+    // Credential is required for re-authentication
+    const credential = auth.EmailAuthProvider.credential(
+      currentUser.email,
+      currentPassword
+    );
+
+    // Re-authenticate user
+    currentUser
+      .reauthenticateWithCredential(credential)
+      .then(() => {
+        currentUser
+          .updatePassword(newPasswd) // Update password
+          .then(success => {
+            console.log('password changed');
+            this.loader = false;
+            this.service
+              .showToast('Password Changed!', 'top', 'my-toast', 1000) //success toast
+              .then(res => {
+                this.router.navigateByUrl('profile');
+                this.loader = false;
+              });
+          })
+          .catch(error => {
+            console.log('something fishy');
+            this.service
+              .showToast('Something went wrong', 'top', 'my-toast', 1000) //failure toast
+              .then(res => {
+                this.loader = false;
+              });
+          });
       })
       .catch(error => {
         console.log(error);
+        this.service
+          .showToast(error.message, 'top', 'my-error', 3000) //failure toast
+          .then(res => {
+            this.loader = false;
+          });
       });
   }
 }

src/config/wish.service.ts

+import { Injectable } from '@angular/core';
+import {
+  AngularFirestore,
+  AngularFirestoreDocument
+} from '@angular/fire/firestore';
+import { Router } from '@angular/router';
+import { ServiceService } from './service.service';
+import { CartsService } from './cart.service';
+import { Products } from './services/product';
+import { User } from './services/user';
+import { take } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WishService {
+  wish: Products;
+  user: User;
+  whishItem: Products[] = [];
+  wishItems: any;
+  constructor(
+    public afs: AngularFirestore,
+    public router: Router,
+    public service: ServiceService,
+    public cartService: CartsService
+  ) {
+    this.whishItem = [];
+  }
+
+  public async wishList(custId) {
+    console.log(custId);
+    const cartRef: AngularFirestoreDocument<any> = this.afs
+      .collection('favourite')
+      .doc(custId);
+    this.whishItem = [];
+    cartRef.valueChanges().subscribe(value => {
+      this.whishItem = [];
+      console.log(value);
+      this.wishItems = value;
+      /* value = this.service.key2Array(value);
+      console.log(value); */
+      // tslint:disable-next-line:forin
+      for (const i in value) {
+        const prodRef: AngularFirestoreDocument<any> = this.afs
+          .collection('products')
+          .doc(i);
+        prodRef
+          .valueChanges()
+          .pipe(
+            take(1) // Here you can limit to only emit once, using the take operator
+          )
+          .subscribe(prodValue => {
+            console.log(prodValue);
+            if (prodValue) {
+              const item = prodValue;
+              const wishItem: Products = {
+                color: this.service.splitSep(item.color),
+                shopperId: item.shopperId,
+                shopper: item.shopper,
+                prodId: item.prodId,
+                price: item.price,
+                prodName: item.prodName,
+                image: item.image,
+                qty: 1,
+                brand: item.brand,
+                category: item.category,
+                discount: item.discount,
+                featured: item.featured,
+                prodCode: item.prodCode,
+                prodDesc: item.prodDesc,
+                prodStatus: item.prodStatus,
+                rating: item.rating,
+                skuCode: item.skuCode,
+                status: item.status,
+                subCate: item.subCate,
+                tag: this.service.splitSep(item.tag),
+                size: this.service.splitSep(item.size)
+              };
+              const found = this.whishItem.some(
+                el => el.prodId === item.prodId
+              );
+              if (!found) {
+                this.whishItem.push(wishItem);
+              }
+              console.log(this.whishItem);
+            } else {
+              // alert('No Products Found');
+            }
+          });
+      }
+    });
+  }
+
+  clearWish(custId) {
+    const promise = new Promise(resolve => {
+      this.afs
+        .collection('favourite')
+        .doc(custId)
+        .delete();
+      resolve(true);
+    });
+    return promise;
+  }
+
+  clearWishItem(custId, prodId) {
+    delete this.wishItems[prodId];
+    console.log(custId, prodId);
+    const promise = new Promise(resolve => {
+      this.afs
+        .collection('favourite')
+        .doc(custId)
+        .set(this.wishItems);
+      resolve(true);
+    }).catch(err => {
+      console.log(err);
+    });
+    return promise;
+  }
+
+  addToCart(custId, items) {
+    const promise = new Promise(resolve => {
+      items.forEach(item => {
+        this.cartService.buyNow(item);
+      });
+      resolve(true);
+    });
+    return promise;
+  }
+}