latest push

src/app/app.component.html

@@ -87,9 +87,13 @@
         (click)="setActive3()"
       ></div>
     </li>
-    <!-- <li (click)="goToPage('cart')">
-            <div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div>
-        </li> -->
+    <li (click)="goToPage('cart')">
+      <div
+        class="icon_sec m4_icon"
+        [class.m4_icon_act]="sec_active4"
+        (click)="setActive4()"
+      ></div>
+    </li>
     <li (click)="goToPage('myorder')">
       <div
         class="icon_sec m5_icon"

src/app/app.component.scss

@@ -46,6 +46,7 @@
         }
     }
 }
+
 .sidemenu_list {
     padding-top: 30px;
     ul {
@@ -101,10 +102,11 @@
         padding: 0px;
         width: 100%;
         height: 100%;
+        display: flex;
+        justify-content: space-between;
         li {
             list-style: none;
             display: inline-block;
-      width: 20%;
             height: 100%;
             text-align: center;
             background-repeat: no-repeat;

src/app/app.component.ts

@@ -89,10 +89,6 @@ export class AppComponent {
     });
   }
 
-  hideTab() {
-    alert('asdasdas');
-  }
-
   async finishpop(data: any) {
     const modal = await this.modalController.create({
       component: DeliverypopPage,

src/app/cart/cart.page.html

@@ -29,7 +29,11 @@
         </ul>
       </div>
       <div class="cart_content">
-        <ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
+        <ion-slides
+          pager="false"
+          [options]="cartwizard"
+          (ionSlideDidChange)="slideChanged()"
+        >
           <ion-slide>
             <div class="cart_list" *ngIf="cartService.carts">
               <ul *ngIf="cartService.carts.length > 0">
@@ -63,7 +67,10 @@
                   </ion-col>
                 </ion-row>
               </div>
-              <div class="no-items-wrapper" *ngIf="cartService.carts.length == 0">
+              <div
+                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>
@@ -74,10 +81,15 @@
             <div class="checkout_list">
               <h5>
                 <span class="floatLeft">ITEMS</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
+                <span class="floatRight" *ngIf="cartService.cartTotal"
+                  >A$ {{cartService.cartTotal}}</span
+                >
                 <div class="clear"></div>
               </h5>
-              <ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
+              <ion-grid
+                class="p0"
+                *ngIf="cartService.carts && cartService.carts.length > 0"
+              >
                 <ion-row *ngFor="let carts of cartService.carts">
                   <ion-col size="6" class="p0">
                     <h6 class="textLeft">{{carts.prodName}}</h6>
@@ -116,39 +128,67 @@
                 <div class="clear"></div>
               </h5>
               <div class="payment_method">
-                <input type="radio" name="payments" id="cod" name="radio-group" checked="true" (click)="getwaycod()" />
+                <input
+                  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 type="radio" name="payments" id="paypal" name="radio-group" (click)="getwaypaypal()" />
+                <input
+                  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">
+              <!-- <div class="card_div" [hidden]="gateway !=1">
                 <input class="card_no borderNone widthFull" placeholder="PayPal ID" />
-              </div>
+              </div> -->
               <div class="payment_method">
-                <input type="radio" name="payments" id="afterpay" name="radio-group" (click)="getwayafterpay()" />
+                <input
+                  type="radio"
+                  name="payments"
+                  id="afterpay"
+                  name="radio-group"
+                  (click)="getwayafterpay()"
+                />
                 <label for="afterpay">
                   <p>AfterPay</p>
                 </label>
               </div>
-              <div class="card_div" [hidden]="gateway !=2">
+              <!-- <div class="card_div" [hidden]="gateway !=2">
                 <input class="card_no" placeholder="**** **** **** 1458" />
                 <input class="cv_number" placeholder="CVV" />
-              </div>
+              </div> -->
               <div class="payment_method">
-                <input type="radio" name="payments" id="payk" name="radio-group" (click)="getwaypayk()" />
+                <input
+                  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 class="card_no borderNone widthFull" placeholder="PafyK ID" />
-              </div>
+              <!-- <div class="card_div" [hidden]="gateway !=3">
+                <input
+                  class="card_no borderNone widthFull"
+                  placeholder="PafyK ID"
+                />
+              </div> -->
               <!-- <div class="delivery_time">
                                 <ul>
                                     <li>
@@ -163,30 +203,39 @@
                             </div> -->
               <hr />
               <div class="coupon_code">
-                <input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn"
-                  (click)="promoApply(promo.value)">
-                  ADD
+                <input
+                  class=""
+                  placeholder="COUPON CODE: GET50"
+                  #promo
+                /><button class="add_btn" (click)="promoApply(promo.value)">
+                  APPLY
                 </button>
-                <span *ngIf="discountApplied" style="color: red">Promocode applied successfully
+                <span *ngIf="discountApplied" style="color: red"
+                  >Promocode applied successfully
                 </span>
               </div>
               <br />
 
               <h6>
                 <span class="floatLeft">PRODUCT COST</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
+                <span class="floatRight" *ngIf="cartService.cartTotal"
+                  >A$ {{cartService.cartTotal}}</span
+                >
                 <div class="clear"></div>
               </h6>
 
               <h6>
                 <span class="floatLeft">DELIVERY CHARGE</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal">A$
-                  {{getDeliveryCharge(cartService.cartTotal)}}</span>
+                <span class="floatRight" *ngIf="cartService.cartTotal"
+                  >A$ {{getDeliveryCharge(cartService.cartTotal)}}</span
+                >
                 <div class="clear"></div>
               </h6>
               <h6>
                 <span class="floatLeft">GST/TAX</span>
-                <span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getTax(cartService.cartTotal)}}</span>
+                <span class="floatRight" *ngIf="cartService.cartTotal"
+                  >A$ {{getTax(cartService.cartTotal)}}</span
+                >
                 <div class="clear"></div>
               </h6>
               <h6 *ngIf="discountApplied">
@@ -215,9 +264,10 @@
               <h4>Order Placed</h4>
               <p>{{bookDate}}</p>
               <h3>The product will be delivered in</h3>
-              <h1>60:00 Mins</h1>
+              <h1>{{deliveryTime}} Mins</h1>
               <button class="view_order" (click)="goToPage('myorder')">
-                VIEW ORDERS</button><br />
+                VIEW ORDERS</button
+              ><br />
               <button class="home_btn" (click)="goToPage('home')">HOME</button>
             </div>
           </ion-slide>
@@ -227,14 +277,22 @@
   </div>
 </ion-content>
 <ion-footer>
-  <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
+  <div
+    class="footer_btnbay"
+    *ngIf="cartService.carts && cartService.carts.length > 0"
+    [hidden]="currentIndex != 0"
+  >
     <div class="continue" (click)="goToPage('productlist')">
       CONTINUE SHOPPING
     </div>
     <div class="checkout" (click)="next(1)">CHECKOUT</div>
   </div>
-  <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1"
-    (click)="next(2);">
+  <div
+    class="footer_btn"
+    *ngIf="cartService.carts && cartService.carts.length > 0"
+    [hidden]="currentIndex != 1"
+    (click)="next(2);"
+  >
     PAY
   </div>
   <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
@@ -250,7 +308,10 @@
 
 <div *ngIf="isShow" [@slideInOut]>
   <div class="nav_header">
-    <button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()">
+    <button
+      class="nav_btn nav_back floatLeft"
+      (click)="istoggle(); setAddress()"
+    >
       <img src="../assets/Group17_2.png" />
     </button>
     <div class="nav_title floatLeft">
@@ -259,23 +320,40 @@
     <div class="clear"></div>
   </div>
   <ion-content class="sort_wrappper">
-    <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false"
-      [backgroundColor]="'rgba(29, 27, 130,0.2)'">
+    <agm-map
+      [zoom]="20"
+      [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')">ADD NEW</span>
+        <span class="floatRight" (click)="istoggle(); goToPage('nearby')"
+          >ADD NEW</span
+        >
         <div class="clear"></div>
       </h5>
-      <ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
+      <ul
+        *ngIf="addressService.addressList && addressService.addressList.length > 0"
+      >
         <li *ngFor="let address of addressService.addressList; let i = index">
           <div class="floatLeft">
             {{address.default}}
-            <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio"
-              (click)="setDefault(address.addressId, i)" [value]="address.addressId" #addressType
-              [checked]="address.defaultVal == 1" />
+            <input
+              class="styled-checkbox"
+              name="addressId"
+              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">

src/app/cart/cart.page.ts

@@ -48,6 +48,7 @@ export class CartPage implements OnInit {
   discount: number;
   totalAmt: number;
   bookDate: any;
+  timeinterval: any;
 
   constructor(
     private router: Router,
@@ -59,6 +60,7 @@ export class CartPage implements OnInit {
     public service: ServiceService,
     public addressService: AddressService
   ) {
+    console.log('cart loaded');
     this.bookDate = this.formatDate();
     this.currentIndex = 0;
     this.count = 1;
@@ -67,7 +69,7 @@ export class CartPage implements OnInit {
     this.taxAmount = 0;
     this.discountApplied = false;
     this.discount = 0;
-    this.cartService.cartList();
+    // this.cartService.cartList();
     this.loader = true;
     const users = this.service.get('user').then(data => {
       if (data) {
@@ -86,6 +88,15 @@ export class CartPage implements OnInit {
     this.setAddress();
   }
 
+  ionViewWillEnter() {
+    const users = this.service.get('user').then(data => {
+      if (data) {
+        data = JSON.parse(data);
+        this.cartService.cartList();
+      }
+    });
+  }
+
   setAddress() {
     if (this.addressService.addressList.length > 0) {
       let address = this.addressService.addressList.find(
@@ -171,6 +182,10 @@ export class CartPage implements OnInit {
           .checkOut(this.cartService.carts, otherCharges)
           .then(data => {
             console.log('ready for slide');
+            const timeStamp = Math.floor(Date.now() / 1000);
+            this.timeinterval = setInterval(() => {
+              this.getDeliveryTime(timeStamp);
+            }, 1000);
             this.slides.slideNext();
           });
       } else {
@@ -181,6 +196,31 @@ export class CartPage implements OnInit {
     }
   }
 
+  getDeliveryTime(timeStamp) {
+    console.log(timeStamp);
+    const endDate = new Date(timeStamp * 1000);
+    console.log(endDate);
+    endDate.setHours(endDate.getHours() + 1);
+    const t = this.getTimeRemaining(endDate, new Date());
+    const minutes = t.minutes < 10 ? '0' + t.minutes : t.minutes;
+    const seconds = t.seconds < 10 ? '0' + t.seconds : t.seconds;
+    this.deliveryTime = minutes + ' : ' + seconds;
+    if (t.t <= 0) {
+      clearInterval(this.timeinterval);
+    }
+  }
+
+  getTimeRemaining(endtime, currDate) {
+    const t = Date.parse(endtime) - Date.parse(currDate);
+    const seconds = Math.floor((t / 1000) % 60);
+    const minutes = Math.floor((t / 1000 / 60) % 60);
+    return {
+      t,
+      minutes,
+      seconds
+    };
+  }
+
   prev() {
     this.slides.slidePrev();
   }

src/app/home/home.page.html

@@ -6,22 +6,10 @@
     <div class="nav_title floatLeft relative">
         <!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
 
-    <input
-      class="search_bar"
-      placeholder="Search here.. eg:shirts, retailers etc..."
-      (click)="searchModal()"
-    />
-  </div>
-  <button
-    class="nav_btn nav_search floatRight"
-    *ngIf="!searchShow"
-    (click)="searchModal()"
-  ></button>
-  <button
-    class="nav_btn nav_close floatRight"
-    *ngIf="searchShow"
-    (click)="searchClose()"
-  ></button>
+        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="searchModal()" />
+    </div>
+    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="searchModal()"></button>
+    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
     <div class="clear"></div>
 </div>
 <ion-content>
@@ -37,19 +25,13 @@
                     </ion-col>
                 </ion-row>
             </div>
-      <ion-slides
-        pager="true"
-        *ngIf="centerService.centers && centerService.centers.length > 0"
-      >
+            <ion-slides pager="true" *ngIf="centerService.centers && centerService.centers.length > 0">
                 <ion-slide *ngFor="let center of centerService.centers">
                     <div class="banner_slide" (click)="goToPage('storelist', center)">
                         <h5>{{center.centerName}}</h5>
                         <p>{{center.description}}</p>
                     </div>
-          <img
-            [src]="center.centerImg"
-            onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'"
-          />
+                    <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'" />
                 </ion-slide>
             </ion-slides>
         </div>
@@ -57,20 +39,10 @@
             Featured Stores
         </div>
         <div class="featured_slider">
-      <ion-slides
-        pager="false"
-        [options]="slideOpts"
-        *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0"
-      >
+            <ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
                 <ion-slide *ngFor="let shopper of shopperService.activeshoppers">
-          <div
-            class="feature_product"
-            (click)="goToPage('productlist', shopper)"
-          >
-            <img
-              [src]="shopper.featuredImage"
-              onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'"
-            />
+                    <div class="feature_product" (click)="goToPage('productlist', shopper)">
+                        <img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'" />
                         <div class="feature_overlay">
                             <h5>{{shopper.name}}</h5>
                             <p>{{shopper.caption}}</p>
@@ -96,24 +68,15 @@
             <div class="clear"></div>
         </div>
         <div class="nearby_shop_list">
-      <ul
-        *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0"
-      >
-        <li
-          *ngFor="let center of centerService.nearcenters"
-          (click)="goToPage('storelist', center)"
-        >
+            <ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0">
+                <li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)">
                     <div class="nearby_image">
-            <img
-              [src]="center.centerImg"
-              onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'"
-            />
+                        <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'" />
                     </div>
                     <div class="nearby_detail">
                         <h5>
                             <span class="floatLeft">{{center.centerName}}</span>
-              <span class="floatRight"
-                >0
+                            <span class="floatRight">0
                 <img src="../assets/Path61_2.png" />
               </span>
                             <div class="clear"></div>
@@ -128,17 +91,9 @@
             Featured Catagories
         </div>
         <div class="featured_catagory_list">
-      <ul
-        *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0"
-      >
-        <li
-          *ngFor="let categories of categoriesService.activecategories"
-          (click)="goToPage('catstorelist', categories)"
-        >
-          <img
-            [src]="categories.catImage"
-            onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'"
-          />
+            <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
+                <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
+                    <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
                     <div class="featured_overlay">
                         <h4>{{categories.catName}}</h4>
                     </div>
@@ -158,40 +113,20 @@
         <div class="clear"></div>
     </div>
     <ion-content class="sort_wrappper">
-    <agm-map
-      [zoom]="20"
-      [latitude]="lat"
-      [longitude]="lng"
-      [disableDefaultUI]="false"
-      [zoomControl]="false"
-      [backgroundColor]="'rgba(29, 27, 130,0.2)'"
-    >
+        <agm-map [zoom]="20" [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')"
-          >ADD NEW</span
-        >
+                <span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
                 <div class="clear"></div>
             </h5>
-      <ul
-        *ngIf="addressService.addressList && addressService.addressList.length > 0"
-      >
+            <ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
                 <li *ngFor="let address of addressService.addressList; let i = index">
                     <div class="floatLeft">
                         {{address.default}}
-            <input
-              class="styled-checkbox"
-              name="addressId"
-              id="styled-checkbox-{{i}}"
-              type="radio"
-              (click)="setDefault(address.addressId)"
-              [value]="address.addressId"
-              #addressType
-              [checked]="address.defaultVal == 1"
-            />
+                        <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
                         <label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
                     </div>
                     <div class="floatLeft">

src/app/home/home.page.scss

@@ -258,25 +258,9 @@
         width: 100%;
         height: 100vh;
     }
-  .add_address_wrapper {
-    position: fixed;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    padding: 20px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    background: #fff;
-    -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-    box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-    h5 {
-      color: rgba(41, 40, 91, 1);
-      margin: 0px;
-      padding: 0px;
-      font-weight: 800;
-    }
-    .add_address_wrapper {
+}
+
+.add_address_wrapper {
     position: fixed;
     bottom: 0px;
     left: 0px;
@@ -297,14 +281,14 @@
     .styled-checkbox {
         position: absolute; // take it out of document flow
         opacity: 0; // hide it
-        & + label {
+        &+label {
             position: relative;
             cursor: pointer;
             padding: 0;
             width: 100%;
         }
         // Box.
-        & + label:before {
+        &+label:before {
             content: '';
             margin-right: 10px;
             display: inline-block;
@@ -315,21 +299,21 @@
             background: white;
             border: 1px solid rgba(215, 213, 228, 1);
         }
-        &:checked + label:before {
+        &:checked+label:before {
             background: #29285b;
         }
         // Disabled state label.
-        &:disabled + label {
+        &:disabled+label {
             color: #b8b8b8;
             cursor: auto;
         }
         // Disabled box.
-        &:disabled + label:before {
+        &:disabled+label:before {
             box-shadow: none;
             background: #ddd;
         }
         // Checkmark. Could be replaced with an image
-        &:checked + label:after {
+        &:checked+label:after {
             content: '';
             position: absolute;
             left: 6px;
@@ -337,11 +321,15 @@
             background: white;
             width: 2px;
             height: 2px;
-          box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
-            4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+            box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
             transform: rotate(45deg);
         }
     }
-    }
+}
+
+.address-ul {
+    padding-left: 0 !important;
+    li {
+        list-style: none;
     }
 }
\ No newline at end of file

src/app/nearby/nearby.page.scss

@@ -46,11 +46,12 @@
     padding: 0px;
     font-weight: 800;
   }
-    p {}
+  p {
+  }
   input {
     width: 100%;
     height: 45px;
-        border: 1px solid #E1E0EB;
+    border: 1px solid #e1e0eb;
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 10px;
@@ -59,23 +60,22 @@
   .add_btn {
     width: 100%;
     height: 45px;
-        background-color: #29285B;
+    background-color: #29285b;
     color: #fff;
     border-radius: 4px;
   }
-    
 }
 
 .styled-checkbox {
   position: absolute; // take it out of document flow
   opacity: 0; // hide it
-    &+label {
+  & + label {
     position: relative;
     cursor: pointer;
     padding: 0;
   }
   // Box.
-    &+label:before {
+  & + label:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
@@ -88,21 +88,21 @@
   }
   // Box hover
   // Box checked
-    &:checked+label:before {
+  &:checked + label:before {
     background: #29285b;
   }
   // Disabled state label.
-    &:disabled+label {
+  &:disabled + label {
     color: #b8b8b8;
     cursor: auto;
   }
   // Disabled box.
-    &:disabled+label:before {
+  &:disabled + label:before {
     box-shadow: none;
     background: #ddd;
   }
   // Checkmark. Could be replaced with an image
-    &:checked+label:after {
+  &:checked + label:after {
     content: '';
     position: absolute;
     left: 6px;
@@ -110,7 +110,8 @@
     background: white;
     width: 2px;
     height: 2px;
-        box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
+      4px -6px 0 white, 4px -8px 0 white;
     transform: rotate(45deg);
   }
 }

src/app/ordercancelled/ordercancelled.page.html

 <ion-content>
-    <div class="cart_wrapper">
+  <div class="cart_wrapper" *ngIf="data">
     <div class="cart_head">
       <div class="nav_header">
-                <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
-                    <img src="../assets/arrow_white.png">
+        <button
+          class="nav_btn nav_back_white floatLeft"
+          (click)="goToPage('myorder')"
+        >
+          <img src="../assets/arrow_white.png" />
         </button>
         <div class="nav_title floatLeft">
           <h4></h4>
         </div>
-                <button class="nav_btn floatRight">
-        </button>
+        <button class="nav_btn floatRight"></button>
         <div class="clear"></div>
       </div>
-            <img [src]="data.product[0].image" onerror="this.src='../assets/[email protected]'">
+      <img onerror="this.src='../assets/[email protected]'" />
       <h4>ORDER CANCELLED</h4>
-            <p>June 26th 2019, 03:00 PM</p>
+      <p>{{orderCancelled | date:'MMMM dd, y'}}</p>
     </div>
     <div class="nearby_shop_list">
       <ul>
         <li (click)="goToPage('productlist')">
           <div class="nearby_image">
-                        <img src="../assets/[email protected]">
+            <img
+              [src]="data.product[0].image"
+              onerror="this.src='../assets/[email protected]'"
+            />
           </div>
           <div class="nearby_detail">
             <h5>
-                            <span class="floatLeft">Carnival Life</span>
-                            <span class="floatRight">4
-                     <img src="../assets/Path61_2.png">
+              <span class="floatLeft">{{data.shopperName}}</span>
+              <span class="floatRight"
+                >4
+                <img src="../assets/Path61_2.png" />
               </span>
               <div class="clear"></div>
             </h5>
@@ -36,22 +42,34 @@
         </li>
       </ul>
     </div>
-        <div class="product_detail">
-            <h6>Green, Small</h6>
-            <h5>Quantity : <span>3</span></h5>
-            <h5>Amount : <strong>AU$99.00</strong></h5>
-            <h5>Delivery time : <span>Delivery in 1 hour</span></h5>
+    <div class="product_detail" *ngFor="let product of data.product">
+      <h6>
+        <span *ngIf="product.color !== 'No-Color'">{{product.color}}, </span>
+        <span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span>
+      </h6>
+      <h5>Quantity : <span>{{product.qty}}</span></h5>
+      <h5>Amount : <strong>A$ {{product.price}}</strong></h5>
+      <h5>Delivery time : <span> 1 hour</span></h5>
       <h4>DELIVERY</h4>
-            <h5>
-                Shamjith KS<br> +00 0000 888 888<br> Carnival InfoparkInfopark Kochi<br> 682030, Kerala, India
+      <h5 *ngIf="data.deliveryAddress">
+        {{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
+        <br />
+        {{data.deliveryAddress.building}}, <br />
+        {{data.deliveryAddress.landmark}}
       </h5>
-            <button class="cancel_btn" (click)="goToPage('productdetail')">BUY NOW</button>
-            <hr>
+      <!-- <button
+        class="cancel_btn"
+        (click)="goToPage('ordercancelled')"
+      >
+        BUY NOW
+      </button> -->
+      <!-- <hr /> -->
     </div>
 
-        <div class="related_product_slider">
+    <!-- <div class="related_product_slider">
       <h5>
-                <span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
+        <span class="floatLeft">Related Products</span
+        ><span class="floatRight">MORE</span>
         <div class="clear"></div>
       </h5>
       <ul>
@@ -59,9 +77,8 @@
           <ion-slide>
             <li (click)="goToPage('productdetail')">
               <div class="product_image">
-                                <img src="../assets/[email protected]">
-                                <div class="fav_icon">
-                                </div>
+                <img src="../assets/[email protected]" />
+                <div class="fav_icon"></div>
               </div>
               <h5>European Style V Neck</h5>
               <p>AU$99.00</p>
@@ -70,9 +87,10 @@
           <ion-slide>
             <li (click)="goToPage('productdetail')">
               <div class="product_image">
-                                <img src="../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
-                                <div class="fav_icon">
-                                </div>
+                <img
+                  src="../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png"
+                />
+                <div class="fav_icon"></div>
               </div>
               <h5>European Style V Neck</h5>
               <p>AU$99.00</p>
@@ -81,9 +99,8 @@
           <ion-slide>
             <li (click)="goToPage('productdetail')">
               <div class="product_image">
-                                <img src="../assets/[email protected]">
-                                <div class="fav_icon">
-                                </div>
+                <img src="../assets/[email protected]" />
+                <div class="fav_icon"></div>
               </div>
               <h5>European Style V Neck</h5>
               <p>AU$99.00 <span class="offer">-8%</span></p>
@@ -92,9 +109,8 @@
           <ion-slide>
             <li (click)="goToPage('productdetail')">
               <div class="product_image">
-                                <img src="../assets/[email protected]">
-                                <div class="fav_icon">
-                                </div>
+                <img src="../assets/[email protected]" />
+                <div class="fav_icon"></div>
                 <div class="featured_badge">Featured</div>
               </div>
               <h5>European Style V Neck</h5>
@@ -103,6 +119,6 @@
           </ion-slide>
         </ion-slides>
       </ul>
-        </div>
+    </div> -->
   </div>
 </ion-content>

src/app/ordercancelled/ordercancelled.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';
 
 @Component({
   selector: 'app-ordercancelled',
   templateUrl: './ordercancelled.page.html',
-  styleUrls: ['./ordercancelled.page.scss'],
+  styleUrls: ['./ordercancelled.page.scss']
 })
 export class OrdercancelledPage implements OnInit {
-
+  data: any;
+  orderCancelled = new Date();
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location
-  ) { }
-
-  ngOnInit() {
+    private location: Location,
+    private service: ServiceService
+  ) {
+    this.service.get('order').then(val => {
+      this.data = val;
+    });
   }
 
+  ngOnInit() {}
+
   relatedProd = {
     slidesPerView: 2
-  }
+  };
 
   goToPage(path, data = null) {
     this.router.navigateByUrl(path, { queryParams: data });
@@ -30,5 +36,4 @@ export class OrdercancelledPage implements OnInit {
   goBack() {
     this.location.back();
   }
-
 }

src/app/orderplaced/orderplaced.page.html

@@ -89,7 +89,10 @@
         Amount : <strong>A$ {{product.price}}</strong
         ><span class="afterpay">COD</span>
       </h5>
-      <h5>Delivery time : <span>{{deliveryTime}}</span></h5>
+      <h5 *ngIf="data.orderStatus >= 3 && data.orderStatus < 7">
+        Delivery time : <span>{{deliveryTime}}</span>
+      </h5>
+      <h5>Order Status : <span>{{getStatus(data.orderStatus)}}</span></h5>
       <h4>DELIVERY</h4>
       <h5 *ngIf="data.deliveryAddress">
         {{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
@@ -97,10 +100,14 @@
         {{data.deliveryAddress.building}}, <br />
         {{data.deliveryAddress.landmark}}
       </h5>
-      <button class="cancel_btn" (click)="goToPage('ordercancelled')">
+      <button
+        class="cancel_btn"
+        (click)="cancellOrder(data.orderId)"
+        *ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8"
+      >
         CANCEL THIS ORDER
       </button>
-      <hr />
+      <!-- <hr /> -->
     </div>
 
     <!-- <div class="related_product_slider">

src/app/orderplaced/orderplaced.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ServiceService } from './../../config/service.service';
+import { MyordersService } from './../../config/myorder.service';
 
 @Component({
   selector: 'app-orderplaced',
@@ -10,12 +11,14 @@ import { ServiceService } from './../../config/service.service';
 })
 export class OrderplacedPage implements OnInit {
   deliveryTime: any;
+  cancelDelivery: any;
   timeinterval: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private location: Location,
-    private service: ServiceService
+    private service: ServiceService,
+    private myOrder: MyordersService
   ) {
     this.deliveryTime = '';
     this.service.get('order').then(val => {
@@ -47,6 +50,7 @@ export class OrderplacedPage implements OnInit {
 
   getTimeRemaining(endtime, currDate) {
     const t = Date.parse(endtime) - Date.parse(currDate);
+    this.cancelDelivery = t;
     const seconds = Math.floor((t / 1000) % 60);
     const minutes = Math.floor((t / 1000 / 60) % 60);
     return {
@@ -66,4 +70,55 @@ export class OrderplacedPage implements OnInit {
   goBack() {
     this.location.back();
   }
+
+  cancellOrder(orderId) {
+    console.log(orderId);
+    this.myOrder.cancelOrder(orderId).then(() => {
+      this.service.showToast('Order cancelled!', 'top', 'my-toast', 1000);
+      const This = this;
+      setTimeout(() => {
+        This.goToPage('ordercancelled');
+      }, 1100);
+    });
+  }
+
+  getStatus(status: number) {
+    switch (status) {
+      case 1:
+        return 'Booked';
+        break;
+      case 2:
+        return 'Shop Accepted';
+        break;
+      case 3:
+        return 'Rider Assigned';
+        break;
+      case 4:
+        return 'Reached Shop';
+        break;
+      case 5:
+        return 'Picked Up';
+        break;
+      case 6:
+        return 'Reached Location';
+        break;
+      case 7:
+        return 'Delivered';
+        break;
+      case 9:
+        return 'Completed';
+        break;
+      case 8:
+        return 'Rejected';
+        break;
+      case 10:
+        return 'Not Received';
+        break;
+      case 0:
+        return 'Cancelled';
+        break;
+      default:
+        return 'Finished';
+    }
+  }
 }

src/app/productdetail/productdetail.page.ts

@@ -134,7 +134,7 @@ export class ProductdetailPage implements OnInit {
       if (type === 1) {
         this.router.navigateByUrl('cart');
       } else {
-        // alert('Product added to cart');
+        this.service.showToast('Added into cart', 'top', 'my-toast', 2000);
       }
       this.cartService.cartList();
     });

src/app/profile/profile.page.html

@@ -42,14 +42,16 @@
           <ion-col class="textLeft p0">
             <p>
               Phone
-              <span *ngIf="loggedUser.phoneVerified == true">Verified</span>
-              <span *ngIf="loggedUser.phoneVerified == false"
-                >Not Verified yet</span
-              >
             </p>
           </ion-col>
           <ion-col class="textRight p0">
             <h6>{{loggedUser.phone}}</h6>
+            <span class="ar-span" *ngIf="loggedUser.phoneVerified == true"
+              >Verified</span
+            >
+            <span class="ar-span" *ngIf="loggedUser.phoneVerified == false"
+              >Not Verified yet</span
+            >
           </ion-col>
         </ion-row>
       </div>
@@ -57,16 +59,17 @@
         <ion-row>
           <ion-col class="textLeft p0">
             <p>
-              Email<span *ngIf="userData && userData.emailVerified == true"
-                >Verified</span
-              >
-              <span *ngIf="loggedUser.emailVerified == false"
-                >Not Verified yet</span
-              >
+              Email
             </p>
           </ion-col>
           <ion-col class="textRight p0">
             <h6>{{loggedUser.emailId}}</h6>
+            <span class="ar-span" *ngIf="loggedUser.emailVerified == true"
+              >Verified</span
+            >
+            <span class="ar-span" *ngIf="loggedUser.emailVerified == false"
+              >Not Verified yet</span
+            >
           </ion-col>
         </ion-row>
       </div>

src/app/profile/profile.page.scss

@@ -83,15 +83,15 @@
         }
       }
     }
+    .ar-span {
+      color: rgba(206, 153, 76, 1);
+      margin-left: 10px;
+    }
     p {
       margin: 0px;
       padding: 0px;
       color: rgba(176, 174, 199, 1);
       font-size: 18px;
-            span {
-                color: rgba(206, 153, 76, 1);
-                margin-left: 10px;
-            }
     }
     h6 {
       margin: 0px;
@@ -162,8 +162,8 @@
           text-transform: uppercase;
         }
         .btn-cancel {
-                    border: 1px solid #29285B;
-                    background-color: #29285B;
+          border: 1px solid #29285b;
+          background-color: #29285b;
         }
         .btn-logout {
           background-color: #fff;

src/config/cart.service.ts

@@ -121,6 +121,7 @@ export class CartsService {
   }
 
   public async cartList() {
+    console.log('called');
     const cartRef: AngularFirestoreCollection<any> = this.afs.collection(
       'carts',
       ref => ref.where('custId', '==', this.custId)

src/config/myorder.service.ts

@@ -79,6 +79,20 @@ export class MyordersService {
     });
   }*/
 
+  public async cancelOrder(orderId) {
+    const promise = new Promise(resolve => {
+      this.afs
+        .collection('orders')
+        .doc(orderId)
+        .update({
+          orderStatus: 0,
+          cancelTime: firebase.firestore.FieldValue.serverTimestamp()
+        });
+      resolve(true);
+    });
+    return promise;
+  }
+
   public async orderList(custId) {
     // console.log('called');
     // console.log(custId);
@@ -86,7 +100,7 @@ export class MyordersService {
     this.orders = [];
     const orderRef: AngularFirestoreCollection<any> = this.afs.collection(
       'orders',
-      ref => ref.where('custId', '==', custId).orderBy('bookDate', 'desc')
+      ref => ref.where('custId', '==', custId).orderBy('orderDate', 'desc')
     );
     orderRef.stateChanges().subscribe(value => {
       // console.log(value);
@@ -100,6 +114,7 @@ export class MyordersService {
           const order: Myorder = {
             amount: item.amount,
             status: item.status,
+            orderDate: item.orderDate,
             orderStatus: item.orderStatus,
             bookDate: item.bookDate,
             deliveryLocation: item.deliveryLocation,
@@ -122,6 +137,7 @@ export class MyordersService {
             }
           }
         });
+        this.orders.sort((a, b) => Number(b.orderDate) - Number(a.orderDate));
         // console.log(this.orders);
       }
     });

src/config/order.service.ts

@@ -170,6 +170,7 @@ export class OrdersService {
               deliveryCharge: 'A$ ' + otherCharge.deliveryCharge,
               deliveryLocation: delivery,
               bookDate: firebase.firestore.FieldValue.serverTimestamp(),
+              orderDate: Math.floor(Date.now() / 1000),
               orderCode: this.orderCode(),
               orderId: neworderId,
               orderStatus: 1,

src/config/services/myorder.ts

 export interface Myorder {
   amount: string;
   bookDate: any;
+  orderDate: any;
   pickupLocation: any;
   deliveryLocation: any;
   deliveryAddress: any;
@@ -12,4 +13,3 @@ export interface Myorder {
   product: any;
   orderCode: string;
 }
-

src/config/services/order.ts

@@ -53,6 +53,7 @@ export interface Order {
   pickupAddress: string;
   pickupLocation: object;
   bookDate: any;
+  orderDate: any;
   custId: string;
   promoId: any;
   rider: any;
@@ -68,6 +69,3 @@ export interface Order {
   discount: string;
   promoApplied: boolean;
 }
-
-
-

src/global.scss

@@ -9,6 +9,7 @@
  * https://ionicframework.com/docs/layout/global-stylesheets
  */
 
+
 /* Core CSS required for Ionic components to work properly */
 
 @import '~@ionic/angular/css/core.css';
@@ -53,6 +54,7 @@
 
 */
 
+
 /*-------------------------------
 
 01. FONTS-N-SIZES
@@ -163,6 +165,7 @@ button {
     }
 }
 
+
 /*-------------------------------
 
 02. FONTS-SETTINGS
@@ -213,6 +216,7 @@ button {
     font-weight: 600 !important;
 }
 
+
 /*-------------------------------
 
 03. THEMES-N-BACKGROUNDS
@@ -244,6 +248,7 @@ button {
     background-color: rgba(243, 243, 243, 0.6) !important;
 }
 
+
 /*-------------------------------
 
 04. SPACING-N-POSITIONS
@@ -362,6 +367,7 @@ button {
     border: none !important;
 }
 
+
 /*-------------------------------
 
 05. ALIGMENTS
@@ -656,10 +662,8 @@ ion-header {
 // .successToast {
 //   color: #29285b;
 // }
-
 // .toast-content {
 // }
-
 .my-toast {
     --background: #29285b;
     --border-radius: 4px;