wishlist

28c6ade0 · Adarsh K · b3067227 · 86664af8 · 28c6ade0 · 28c6ade0
Commit 28c6ade0 authored Feb 06, 2020 by Adarsh K
20 changed files
--- a/package-lock.json
+++ b/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
            }
          }
        },

--- a/package.json
+++ b/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": [

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

--- a/src/app/app.module.ts
+++ b/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]
 })

--- a/src/app/cart/cart.page.html
+++ b/src/app/cart/cart.page.html
@@ -29,11 +29,7 @@
        </ul>
      </div>
      <div class="cart_content">
-        <ion-slides
+        <ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
-          pager="false"
-          [options]="cartwizard"
-          (ionSlideDidChange)="slideChanged()"
-        >
          <ion-slide>
            <div class="cart_list" *ngIf="cartService.carts">
              <ul *ngIf="cartService.carts.length > 0">
@@ -67,10 +63,7 @@
                  </ion-col>
                </ion-row>
              </div>
-              <div
+              <div class="no-items-wrapper" *ngIf="cartService.carts.length == 0">
-                class="no-items-wrapper"
-                *ngIf="cartService.carts.length == 0"
-              >
                <img src="../../assets/noitem.png" />
                <h1>There is no products added</h1>
                <button (click)="goToPage('home')">Shop Now</button>
@@ -81,15 +74,10 @@
            <div class="checkout_list">
              <h5>
                <span class="floatLeft">ITEMS</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal"
+                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
-                  >A$ {{cartService.cartTotal}}</span
-                >
                <div class="clear"></div>
              </h5>
-              <ion-grid
+              <ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
-                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">{{carts.prodName}}</h6>
@@ -128,44 +116,22 @@
                <div class="clear"></div>
              </h5>
              <div class="payment_method">
-                <input
+                <input type="radio" name="payments" id="cod" name="radio-group" checked="true" (click)="getwaycod()" />
-                  type="radio"
-                  name="payments"
-                  id="cod"
-                  name="radio-group"
-                  checked="true"
-                  (click)="getwaycod()"
-                />
                <label for="cod">
                  <p>COD</p>
                </label>
              </div>
              <div class="payment_method">
-                <input
+                <input type="radio" name="payments" id="paypal" name="radio-group" (click)="getwaypaypal()" />
-                  type="radio"
-                  name="payments"
-                  id="paypal"
-                  name="radio-group"
-                  (click)="getwaypaypal()"
-                />
                <label for="paypal">
                  <p>PayPal</p>
                </label>
              </div>
              <div class="card_div" [hidden]="gateway !=1">
-                <input
+                <input class="card_no borderNone widthFull" placeholder="PayPal ID" />
-                  class="card_no borderNone widthFull"
-                  placeholder="PayPal ID"
-                />
              </div>
              <div class="payment_method">
-                <input
+                <input type="radio" name="payments" id="afterpay" name="radio-group" (click)="getwayafterpay()" />
-                  type="radio"
-                  name="payments"
-                  id="afterpay"
-                  name="radio-group"
-                  (click)="getwayafterpay()"
-                />
                <label for="afterpay">
                  <p>AfterPay</p>
                </label>
@@ -175,22 +141,13 @@
                <input class="cv_number" placeholder="CVV" />
              </div>
              <div class="payment_method">
-                <input
+                <input type="radio" name="payments" id="payk" name="radio-group" (click)="getwaypayk()" />
-                  type="radio"
-                  name="payments"
-                  id="payk"
-                  name="radio-group"
-                  (click)="getwaypayk()"
-                />
                <label for="payk">
                  <p>PayK</p>
                </label>
              </div>
              <div class="card_div" [hidden]="gateway !=3">
-                <input
+                <input class="card_no borderNone widthFull" placeholder="PafyK ID" />
-                  class="card_no borderNone widthFull"
-                  placeholder="PafyK ID"
-                />
              </div>
              <!-- <div class="delivery_time">
                                <ul>
@@ -206,39 +163,30 @@
                            </div> -->
              <hr />
              <div class="coupon_code">
-                <input
+                <input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn"
-                  class=""
+                  (click)="promoApply(promo.value)">
-                  placeholder="COUPON CODE: GET50"
-                  #promo
-                /><button class="add_btn" (click)="promoApply(promo.value)">
                  ADD
                </button>
-                <span *ngIf="discountApplied" style="color: red"
+                <span *ngIf="discountApplied" style="color: red">Promocode applied successfully
-                  >Promocode applied successfully
                </span>
              </div>
              <br />
              <h6>
                <span class="floatLeft">PRODUCT COST</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal"
+                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
-                  >A$ {{cartService.cartTotal}}</span
-                >
                <div class="clear"></div>
              </h6>
              <h6>
                <span class="floatLeft">DELIVERY CHARGE</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal"
+                <span class="floatRight" *ngIf="cartService.cartTotal">A$
-                  >A$ {{getDeliveryCharge(cartService.cartTotal)}}</span
+                  {{getDeliveryCharge(cartService.cartTotal)}}</span>
-                >
                <div class="clear"></div>
              </h6>
              <h6>
                <span class="floatLeft">GST/TAX</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal"
+                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getTax(cartService.cartTotal)}}</span>
-                  >A$ {{getTax(cartService.cartTotal)}}</span
-                >
                <div class="clear"></div>
              </h6>
              <h6 *ngIf="discountApplied">
@@ -269,8 +217,7 @@
              <h3>The product will be delivered in</h3>
              <h1>60:00 Mins</h1>
              <button class="view_order" (click)="goToPage('myorder')">
-                VIEW ORDERS</button
+                VIEW ORDERS</button><br />
-              ><br />
              <button class="home_btn" (click)="goToPage('home')">HOME</button>
            </div>
          </ion-slide>
@@ -280,22 +227,14 @@
  </div>
 </ion-content>
 <ion-footer>
-  <div
+  <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
-    class="footer_btnbay"
-    *ngIf="cartService.carts && cartService.carts.length > 0"
-    [hidden]="currentIndex != 0"
-  >
    <div class="continue" (click)="goToPage('productlist')">
-      CONTINUE SHOPING
+      CONTINUE SHOPPING
    </div>
    <div class="checkout" (click)="next(1)">CHECKOUT</div>
  </div>
-  <div
+  <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1"
-    class="footer_btn"
+    (click)="next(2);">
-    *ngIf="cartService.carts && cartService.carts.length > 0"
-    [hidden]="currentIndex != 1"
-    (click)="next(2);"
-  >
    PAY
  </div>
  <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
@@ -311,10 +250,7 @@
 <div *ngIf="isShow" [@slideInOut]>
  <div class="nav_header">
-    <button
+    <button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()">
-      class="nav_btn nav_back floatLeft"
-      (click)="istoggle(); setAddress()"
-    >
      <img src="../assets/Group17_2.png" />
    </button>
    <div class="nav_title floatLeft">
@@ -323,40 +259,23 @@
    <div class="clear"></div>
  </div>
  <ion-content class="sort_wrappper">
-    <agm-map
+    <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false"
-      [zoom]="20"
+      [backgroundColor]="'rgba(29, 27, 130,0.2)'">
-      [latitude]="lat"
-      [longitude]="lng"
-      [disableDefaultUI]="false"
-      [zoomControl]="false"
-      [backgroundColor]="'rgba(29, 27, 130,0.2)'"
-    >
      <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
    <div class="add_address_wrapper">
      <h5>
        <span class="floatLeft">NEW ADDRESS</span>
-        <span class="floatRight" (click)="istoggle(); goToPage('nearby')"
+        <span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
-          >ADD NEW</span
-        >
        <div class="clear"></div>
      </h5>
-      <ul
+      <ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
-        *ngIf="addressService.addressList && addressService.addressList.length > 0"
-      >
        <li *ngFor="let address of addressService.addressList; let i = index">
          <div class="floatLeft">
            {{address.default}}
-            <input
+            <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio"
-              class="styled-checkbox"
+              (click)="setDefault(address.addressId, i)" [value]="address.addressId" #addressType
-              name="addressId"
+              [checked]="address.defaultVal == 1" />
-              id="styled-checkbox-{{i}}"
-              type="radio"
-              (click)="setDefault(address.addressId, i)"
-              [value]="address.addressId"
-              #addressType
-              [checked]="address.defaultVal == 1"
-            />
            <label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
          </div>
          <div class="floatLeft">
@@ -369,4 +288,4 @@
      </ul>
    </div>
  </ion-content>
 </div>
\ No newline at end of file
--- a/src/app/catagory/catagory.page.scss
+++ b/src/app/catagory/catagory.page.scss
 .home_wrapper {
+  width: 100%;
+  .home_banner {
    width: 100%;
-    .home_banner {
+    height: 300px;
+    padding-top: 80px;
+    position: relative;
+    background-color: #fff;
+    .home_banner_title {
+      padding: 10px;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      img {
+        width: 100px;
+      }
+      p {
+        margin: 0px;
+        text-align: right;
+        background-image: url('../../assets/Path 55_2.png');
+        background-position: left;
+        background-repeat: no-repeat;
+        background-size: 12px;
+        padding-left: 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    ion-slides {
+      width: 100%;
+      height: 100%;
+      ion-slide {
        width: 100%;
-        height: 300px;
+        height: 100%;
-        padding-top: 80px;
        position: relative;
-        background-color: #fff;
+        img {
-        .home_banner_title {
+          width: 100%;
-            padding: 10px;
+          height: 100%;
-            position: absolute;
+          object-fit: cover;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            img {
-                width: 100px;
-            }
-            p {
-                margin: 0px;
-                text-align: right;
-                background-image: url("../../assets/Path 55_2.png");
-                background-position: left;
-                background-repeat: no-repeat;
-                background-size: 12px;
-                padding-left: 20px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
        }
-        ion-slides {
+        .banner_slide {
-            width: 100%;
+          position: absolute;
-            height: 100%;
+          top: 0px;
-            ion-slide {
+          left: 0px;
-                width: 100%;
+          right: 0px;
-                height: 100%;
+          bottom: 0px;
-                position: relative;
+          -webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-                img {
+          -moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-                    width: 100%;
+          box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-                    height: 100%;
+          padding-top: 160px;
-                    object-fit: cover;
+          padding-left: 20px;
-                }
+          padding-right: 20px;
-                .banner_slide {
+          h5 {
-                    position: absolute;
+            color: #fff;
-                    top: 0px;
+            margin: 0px;
-                    left: 0px;
+            padding: 0px;
-                    right: 0px;
+            text-align: left;
-                    bottom: 0px;
+            font-weight: bold;
-                    -webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
+            letter-spacing: 2px;
-                    -moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
+            padding-bottom: 5px;
-                    box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
+            font-size: 14px;
-                    padding-top: 160px;
+          }
-                    padding-left: 20px;
+          p {
-                    padding-right: 20px;
+            color: #fff;
-                    h5 {
+            margin: 0px;
-                        color: #fff;
+            padding: 0px;
-                        margin: 0px;
+            text-align: left;
-                        padding: 0px;
+            font-size: 20px;
-                        text-align: left;
+            font-weight: lighter;
-                        font-weight: bold;
+          }
-                        letter-spacing: 2px;
-                        padding-bottom: 5px;
-                        font-size: 14px;
-                    }
-                    p {
-                        color: #fff;
-                        margin: 0px;
-                        padding: 0px;
-                        text-align: left;
-                        font-size: 20px;
-                        font-weight: lighter;
-                    }
-                }
-            }
        }
+      }
    }
-    .home_sub_header {
+  }
-        padding: 10px;
+  .home_sub_header {
-        padding-top: 20px;
+    padding: 10px;
-        padding-bottom: 20px;
+    padding-top: 20px;
-        color: rgba(59, 57, 77, 1);
+    padding-bottom: 20px;
-        font-weight: 900;
+    color: rgba(59, 57, 77, 1);
+    font-weight: 900;
+  }
+  .featured_slider {
+    padding-left: 10px;
+    padding-right: 10px;
+    .feature_product {
+      width: 100%;
+      height: 130px;
+      position: relative;
+      background-color: #a8a8a8;
+      border: 2px solid #fff;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+      .feature_overlay {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        background-color: rgba(0, 0, 0, 0.75);
+        padding: 15px;
+        padding-top: 60px;
+        h5 {
+          color: #fff;
+          margin: 0px;
+          padding: 0px;
+          text-align: left;
+          font-weight: bold;
+          letter-spacing: 2px;
+          padding-bottom: 2px;
+          font-size: 14px;
+        }
+        p {
+          color: #fff;
+          margin: 0px;
+          padding: 0px;
+          text-align: left;
+          font-size: 20px;
+          font-weight: lighter;
+        }
+      }
    }
-    .featured_slider {
+  }
-        padding-left: 10px;
+  .nearby_shop_list {
-        padding-right: 10px;
+    ul {
-        .feature_product {
+      margin: 0px;
+      padding-left: 10px;
+      padding-right: 10px;
+      li {
+        list-style: none;
+        padding-bottom: 10px;
+        .nearby_image {
+          width: 120px;
+          height: 125px;
+          float: left;
+          background-color: #a8a8a8;
+          border-radius: 8px;
+          img {
            width: 100%;
-            height: 130px;
+            height: 100%;
-            position: relative;
+            object-fit: cover;
-            background-color: #a8a8a8;
+            object-position: center;
-            border: 2px solid #fff;
+          }
-            img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                object-position: center;
-            }
-            .feature_overlay {
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                right: 0px;
-                bottom: 0px;
-                background-color: rgba(0, 0, 0, 0.75);
-                padding: 15px;
-                padding-top: 60px;
-                h5 {
-                    color: #fff;
-                    margin: 0px;
-                    padding: 0px;
-                    text-align: left;
-                    font-weight: bold;
-                    letter-spacing: 2px;
-                    padding-bottom: 2px;
-                    font-size: 14px;
-                }
-                p {
-                    color: #fff;
-                    margin: 0px;
-                    padding: 0px;
-                    text-align: left;
-                    font-size: 20px;
-                    font-weight: lighter;
-                }
-            }
        }
-    }
+        .nearby_detail {
-    .nearby_shop_list {
+          width: calc(100% - 120px);
-        ul {
+          float: left;
+          padding-left: 20px;
+          padding-top: 40px;
+          h5 {
            margin: 0px;
-            padding-left: 10px;
+            padding: 0px;
-            padding-right: 10px;
+            color: rgba(59, 57, 77, 1);
-            li {
+            font-weight: 900;
-                list-style: none;
+            padding-bottom: 2px;
-                padding-bottom: 10px;
+            img {
-                .nearby_image {
+              width: 16px;
-                    width: 120px;
-                    height: 125px;
-                    float: left;
-                    background-color: #a8a8a8;
-                    border-radius: 8px;
-                    img {
-                        width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                        object-position: center;
-                    }
-                }
-                .nearby_detail {
-                    width: calc(100% - 120px);
-                    float: left;
-                    padding-left: 20px;
-                    padding-top: 40px;
-                    h5 {
-                        margin: 0px;
-                        padding: 0px;
-                        color: rgba(59, 57, 77, 1);
-                        font-weight: 900;
-                        padding-bottom: 2px;
-                        img {
-                            width: 16px;
-                        }
-                    }
-                    p {
-                        margin: 0px;
-                        padding: 0px;
-                        color: rgba(176, 174, 199);
-                    }
-                }
            }
-        }
+          }
-    }
+          p {
-    .featured_catagory_list {
-        padding: 10px;
-        ul {
            margin: 0px;
            padding: 0px;
-            li {
+            color: rgba(176, 174, 199);
-                list-style: none;
+          }
-                position: relative;
-                height: 120px;
-                width: 100%;
-                border-radius: 8px;
-                margin-bottom: 10px;
-                &:nth-child(odd) {
-                    text-align: left;
-                }
-                &:nth-child(even) {
-                    text-align: right;
-                }
-                img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                    object-position: center;
-                }
-                .featured_overlay {
-                    position: absolute;
-                    top: 0px;
-                    left: 0px;
-                    right: 0px;
-                    bottom: 0px;
-                    border-radius: 8px;
-                    background-color: rgba(0, 0, 0, 0.75);
-                    color: #fff;
-                    padding: 45px;
-                    padding-left: 20px;
-                    padding-right: 20px;
-                    h4 {
-                        margin: 0px;
-                        font-size: 26px;
-                        font-weight: 900;
-                    }
-                }
-            }
        }
+      }
    }
-}
+  }
+  .featured_catagory_list {
-.sort_wrappper {
+    padding: 10px;
-    height: 100vh;
+    padding-bottom: 14%;
-    width: 100%;
+    ul {
-    position: fixed;
+      margin: 0px;
-    top: 0px;
+      padding: 0px;
-    left: 0px;
+      li {
-    right: 0px;
+        list-style: none;
-    bottom: 0px;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 99;
-    .sort_inner {
-        margin: 0 auto;
-        width: 90%;
-        padding: 10px;
-        padding-left: 15px;
-        padding-right: 15px;
-        padding-bottom: 15px;
-        background-color: #fff;
        position: relative;
-        -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+        height: 120px;
-        -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+        width: 100%;
-        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+        border-radius: 8px;
-        top: 25%;
+        margin-bottom: 10px;
-        border-radius: 0px;
+        &:nth-child(odd) {
-        h4 {
+          text-align: left;
-            text-align: center;
-            color: rgba(59, 57, 77, 1);
-            margin: 0px;
-            font-weight: bold;
-            padding: 10px;
-            font-size: 18px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.16);
-            padding-bottom: 20px;
-            margin-bottom: 30px;
        }
-        .search_box {
+        &:nth-child(even) {
-            width: calc(100% - 100px);
+          text-align: right;
-            height: 45px;
-            border: none;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.16);
        }
-        .search_btn {
+        img {
-            width: 100px;
+          width: 100%;
-            height: 45px;
+          height: 100%;
-            background-color: rgba(41, 40, 91, 1);
+          object-fit: cover;
-            border: none;
+          object-position: center;
-            color: #fff;
-            font-size: 16px;
        }
-        ul {
+        .featured_overlay {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          right: 0px;
+          bottom: 0px;
+          border-radius: 8px;
+          background-color: rgba(0, 0, 0, 0.75);
+          color: #fff;
+          padding: 45px;
+          padding-left: 20px;
+          padding-right: 20px;
+          h4 {
            margin: 0px;
-            padding: 0px;
+            font-size: 26px;
-            li {
+            font-weight: 900;
-                list-style: none;
+          }
-                border-bottom: 1px solid rgba(0, 0, 0, 0.16);
-                padding-top: 10px;
-                padding-bottom: 10px;
-                .styled-checkbox {
-                    position: absolute; // take it out of document flow
-                    opacity: 0; // hide it
-                    &+label {
-                        position: relative;
-                        cursor: pointer;
-                        padding: 0;
-                        width: 100%;
-                    }
-                    // Box.
-                    &+label:before {
-                        content: '';
-                        margin-right: 10px;
-                        display: inline-block;
-                        vertical-align: text-top;
-                        width: 20px;
-                        height: 20px;
-                        border-radius: 5px;
-                        background: white;
-                        border: 1px solid rgba(215, 213, 228, 1);
-                    }
-                    &:checked+label:before {
-                        background: #29285b;
-                    }
-                    // Disabled state label.
-                    &:disabled+label {
-                        color: #b8b8b8;
-                        cursor: auto;
-                    }
-                    // Disabled box.
-                    &:disabled+label:before {
-                        box-shadow: none;
-                        background: #ddd;
-                    }
-                    // Checkmark. Could be replaced with an image
-                    &:checked+label:after {
-                        content: '';
-                        position: absolute;
-                        left: 6px;
-                        top: 10px;
-                        background: white;
-                        width: 2px;
-                        height: 2px;
-                        box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
-                        transform: rotate(45deg);
-                    }
-                }
-            }
        }
-        .sort_footer {
+      }
-            padding-top: 10px;
+    }
-            button {
+  }
-                border-radius: 8px;
+}
-                height: 40px;
-                width: 48%;
+.sort_wrappper {
-                color: #fff;
+  height: 100vh;
-                font-size: 15px;
+  width: 100%;
-                font-weight: lighter;
+  position: fixed;
-            }
+  top: 0px;
-            .submit {
+  left: 0px;
-                background-color: rgba(41, 40, 91, 1);
+  right: 0px;
-            }
+  bottom: 0px;
-            .cancel {
+  background: rgba(0, 0, 0, 0.6);
-                background-color: rgba(215, 213, 228, 1);
+  z-index: 99;
-            }
+  .sort_inner {
+    margin: 0 auto;
+    width: 90%;
+    padding: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-bottom: 15px;
+    background-color: #fff;
+    position: relative;
+    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+    top: 25%;
+    border-radius: 0px;
+    h4 {
+      text-align: center;
+      color: rgba(59, 57, 77, 1);
+      margin: 0px;
+      font-weight: bold;
+      padding: 10px;
+      font-size: 18px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+      padding-bottom: 20px;
+      margin-bottom: 30px;
+    }
+    .search_box {
+      width: calc(100% - 100px);
+      height: 45px;
+      border: none;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+    }
+    .search_btn {
+      width: 100px;
+      height: 45px;
+      background-color: rgba(41, 40, 91, 1);
+      border: none;
+      color: #fff;
+      font-size: 16px;
+    }
+    ul {
+      margin: 0px;
+      padding: 0px;
+      li {
+        list-style: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+        padding-top: 10px;
+        padding-bottom: 10px;
+        .styled-checkbox {
+          position: absolute; // take it out of document flow
+          opacity: 0; // hide it
+          & + label {
+            position: relative;
+            cursor: pointer;
+            padding: 0;
+            width: 100%;
+          }
+          // Box.
+          & + label:before {
+            content: '';
+            margin-right: 10px;
+            display: inline-block;
+            vertical-align: text-top;
+            width: 20px;
+            height: 20px;
+            border-radius: 5px;
+            background: white;
+            border: 1px solid rgba(215, 213, 228, 1);
+          }
+          &:checked + label:before {
+            background: #29285b;
+          }
+          // Disabled state label.
+          &:disabled + label {
+            color: #b8b8b8;
+            cursor: auto;
+          }
+          // Disabled box.
+          &:disabled + label:before {
+            box-shadow: none;
+            background: #ddd;
+          }
+          // Checkmark. Could be replaced with an image
+          &:checked + label:after {
+            content: '';
+            position: absolute;
+            left: 6px;
+            top: 10px;
+            background: white;
+            width: 2px;
+            height: 2px;
+            box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
+              4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+            transform: rotate(45deg);
+          }
        }
+      }
+    }
+    .sort_footer {
+      padding-top: 10px;
+      button {
+        border-radius: 8px;
+        height: 40px;
+        width: 48%;
+        color: #fff;
+        font-size: 15px;
+        font-weight: lighter;
+      }
+      .submit {
+        background-color: rgba(41, 40, 91, 1);
+      }
+      .cancel {
+        background-color: rgba(215, 213, 228, 1);
+      }
    }
-}
+  }
\ No newline at end of file
+}
--- a/src/app/changedetails/changedetails.page.html
+++ b/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">
+        <div class="row">
-        <input class="" type="password" placeholder="Current Password" />
+          <input
-      </div> -->
+            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="">
+          <div *ngIf="confirmPassword.errors">
-            Password should match
+            {{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>
--- a/src/app/changedetails/changedetails.page.ts
+++ b/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.service.get('userData').then(val => {
-      this.userData = val;
+      console.log(JSON.parse(val));
-      console.log(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 (
+      if (form.value.currentPassword && form.value.password) {
-        form.value.password &&
+        if (
-        form.value.password != form.value.confirmPassword
+          form.value.password &&
-      ) {
+          form.value.password === form.value.confirmPassword
-        // this.register.updatePassword(form.value.password);
+        ) {
+          // 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);
      }
+      // console.log('valid form values', form.value);
-      // Calls update user data fn
+    } else {
-      // this.register.updateData(form.value, this.userData.uid);
+      console.log(form);
-      console.log('valid form values', form.value);
    }
  }
 }
--- a/src/app/productdetail/productdetail.page.html
+++ b/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
-      <button class="fav"></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>

--- a/src/app/productdetail/productdetail.page.ts
+++ b/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);
+  }
 }
--- a/src/app/productlist/productlist.page.scss
+++ b/src/app/productlist/productlist.page.scss
@@ -108,7 +108,7 @@
        img {
          width: 100%;
          height: 100%;
-          object-fit: cover;
+          object-fit: contain;
          object-position: center;
        }
      }

--- a/src/app/productlist/productlist.page.ts
+++ b/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;

--- a/src/app/profile/profile.page.html
+++ b/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')">
+        <ion-col class="textRight p0">
-          <h6>(0)</h6>
+          <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>

--- a/src/app/profile/profile.page.ts
+++ b/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 => {
+    // Listens to url
-      if (data) {
+    route.params.subscribe(val => {
-        this.loggedUser = JSON.parse(data);
+      // 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;

--- a/src/app/wishlist/wishlist.page.html
+++ b/src/app/wishlist/wishlist.page.html
@@ -10,44 +10,50 @@
 <ion-content>
  <div class="wishlist-wrapper">
-    <ul>
+    <ul *ngIf="wishService.whishItem && wishService.whishItem.length > 0">
-      <li>
+      <li *ngFor="let product of wishService.whishItem; let i = index">
-        <div class="wishlist_image">
+        <div class="wishlist_image" (click)="prodDetails(i)">
-          <img src="../../assets/img-list.png" />
+          <img
+            [src]="product.image"
+            onerror="this.src='../../assets/img-list.png'"
+          />
        </div>
        <div class="wishlist_detail">
-          <p class="floatLeft">European Style V Neck</p>
+          <p class="floatLeft" (click)="prodDetails(i)">{{product.prodName}}</p>
-          <span class="floatRight"><img src="../../assets/heart.png"/></span>
+          <span class="floatRight"
+            ><img
+              src="../../assets/heart.png"
+              (click)="removeItem(product.prodId)"
+          /></span>
          <div class="clear"></div>
-          <p>Green, Small</p>
+          <p (click)="prodDetails(i)">
-          <h1>AU$88.00</h1>
+            <span *ngIf="product.color[0] !=='No-Color'"
-        </div>
+              >{{product.color[0]}}</span
-        <div class="clear"></div>
+            >,
-      </li>
+            <span *ngIf="product.size[0] !=='Any-Size'"
-      <li>
+              >{{product.size[0]}}</span
-        <div class="wishlist_image">
+            >
-          <img src="../../assets/img-list.png" />
+          </p>
-        </div>
+          <h1 (click)="prodDetails(i)">A$ {{product.price}}</h1>
-        <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>
        </div>
        <div class="clear"></div>
      </li>
    </ul>
  </div>
+  <div class="empty-wishlist-wrapper" *ngIf="wishService.whishItem.length == 0">
-  <div class="empty-wishlist-wrapper">
    <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">
+  <div class="footer-btns-wrapper" *ngIf="wishService.whishItem.length > 0">
-    <button class="btn-clear">Clear All</button>
+    <button class="btn-clear" (click)="clearAll()">Clear All</button>
-    <button class="btn-cart">add all to cart</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>
--- a/src/app/wishlist/wishlist.page.ts
+++ b/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;
+  }
 }
--- a/src/config/services/wishlist.ts
+++ b/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;
+}
--- a/src/config/update.service.ts
+++ b/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.service
-        this.router.navigateByUrl('profile');
+          .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;
+          });
      });
  }
 }
--- a/src/config/wish.service.ts
+++ b/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;
+  }
+}