Orderplaced Design fix

src/app/orderplaced/orderplaced.page.html

@@ -66,41 +66,42 @@
         </div>
         <div class="nearby_shop_list">
             <ul>
-                <li>
+                <li *ngFor="let product of data.product; let i = index">
                     <div class="nearby_image">
-                        <img [src]="data.product[0].image"
-                            onerror="this.src='../assets/[email protected]'" />
+                        <img [src]="product.image" onerror="this.src='../assets/[email protected]'" />
                     </div>
                     <div class="nearby_detail">
                         <h5>
-                            <span class="floatLeft">{{data.shopperName}}</span>
-                            <span class="floatRight">{{data.product[0].qty}}
+                            <span class="floatLeft">{{unEscape(product.prodName)}}</span>
+                            <span class="floatRight">0
                                 <img src="../assets/Path61_2.png" />
                             </span>
                             <div class="clear"></div>
                         </h5>
-                        <p class="prodName">{{unEscape(data.product[0].prodName)}}</p>
+                        <p class="prodName"></p>
                     </div>
                     <div class="clear"></div>
-                </li>
-            </ul>
-        </div>
-        <div class="product_detail" *ngFor="let product of data.product; let i = index">
+                    <div class="product_detail">
                         <h5 *ngIf="data.orderStatus >= 3 || data.orderStatus < 7 && i == 0">
                             Delivery time : <span><b>{{deliveryTime}}</b></span>
                         </h5>
                         <h6>
+                            <!-- <span *ngIf="product.color !== 'No-Color'">Product: {{unEscape(product.prodName)}},
+                            </span> -->
                             <span *ngIf="product.color !== 'No-Color'">Color: {{product.color}}, </span>
                             <span *ngIf="product.size !== 'Any-Size'">Size: {{product.size}}</span>
                         </h6>
                         <h5>Quantity : <span>{{product.qty}}</span></h5>
                         <h5>
-                Amount : <strong>A$ {{service.formatNumber(product.price)}}</strong><span
-                    class="afterpay">{{data.paymentMode}}</span>
+                            Amount : <strong>A$ {{service.formatNumber(product.price)}}</strong>
                         </h5>
 
                         <h5>Order Status : <span>{{getStatus(data.orderStatus)}}</span></h5>
                     </div>
+                </li>
+            </ul>
+        </div>
+
 
         <div class="product_detail">
 

src/app/orderplaced/orderplaced.page.scss

@@ -81,7 +81,8 @@
             padding-right: 10px;
             li {
                 list-style: none;
-                padding-bottom: 10px;
+                border-bottom: 1px solid #e8e8e8;
+                margin-bottom: 30px;
                 .nearby_image {
                     width: 120px;
                     height: 120px;

src/app/orderplaced/orderplaced.page.ts

@@ -34,7 +34,7 @@ export class OrderplacedPage implements OnInit {
   ionViewWillEnter() {
     this.deliveryTime = '00:00:00';
     this.service.get('order').then(val => {
-      console.log(val);
+      console.log('My Orders value', val);
       this.data = val;
       const This = this;
       console.log(Math.round(Date.now() / 1000) + ' < ' + this.data.bookDate.seconds);