customer

src/app/app-routing.module.ts

@@ -97,7 +97,9 @@ const routes: Routes = [
     loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule'
   },
  { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' },
   { path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' },
-  { path: 'address', loadChildren: './address/address.module#AddressPageModule' }
+  { path: 'address', loadChildren: './address/address.module#AddressPageModule' },
+  { path: 'success', loadChildren: './success/success.module#SuccessPageModule' },
+  { path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' }
 
 ];
 @NgModule({

src/app/cart/cart.page.html

@@ -3,37 +3,45 @@
     <div class="cart_head">
       <div class="nav_header">
         <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
-                    <img src="../assets/arrow_white.png">
+          <img src="../assets/arrow_white.png" />
         </button>
         <div class="nav_title floatLeft">
           <h4>CART</h4>
         </div>
-                <button class="nav_btn floatRight">
-                    
-                </button>
+        <button class="nav_btn floatRight"></button>
         <div class="clear"></div>
       </div>
       <div class="cart_menu_header">
         <ul>
-                    <li class="textCenter active" [class.active]="currentIndex == 0">CART</li>
+          <li class="textCenter active" [class.active]="currentIndex == 0">
+            CART
+          </li>
           <li class="textCenter">
-                        <hr>
+            <hr />
+          </li>
+          <li class="textCenter" [class.active]="currentIndex == 1">
+            CHECKOUT
           </li>
-                    <li class="textCenter" [class.active]="currentIndex == 1">CHECKOUT</li>
           <li class="textCenter">
-                        <hr>
+            <hr />
           </li>
           <li class="textCenter" [class.active]="currentIndex == 2">FINISH</li>
         </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">
                 <li *ngFor="let carts of cartService.carts; let i= index">
                   <div class="close" (click)="cartService.removeItem(i)"></div>
-                                    <div class="cart_image"><img [src]="carts.image" onerror="this.src=''" /></div>
+                  <div class="cart_image">
+                    <img [src]="carts.image" onerror="this.src=''" />
+                  </div>
                   <div class="cart_detail">
                     <h4>{{carts.prodName}}</h4>
                     <h4>{{carts.size}}, {{carts.color}}</h4>
@@ -42,7 +50,9 @@
                   <div class="cart_count">
                     <div class="add" (click)="cartService.addCount(i)">+</div>
                     <div class="count">{{carts.qty}}</div>
-                                        <div class="remove" (click)="cartService.removeCount(i)">-</div>
+                    <div class="remove" (click)="cartService.removeCount(i)">
+                      -
+                    </div>
                   </div>
                   <div class="clear"></div>
                 </li>
@@ -57,16 +67,29 @@
                   </ion-col>
                 </ion-row>
               </div>
+              <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>
+              </div>
             </div>
           </ion-slide>
           <ion-slide>
             <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>
@@ -75,11 +98,13 @@
                     <h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
                   </ion-col>
                   <ion-col size="4" class="p0">
-                                        <h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6>
+                    <h6 class="textRight">
+                      <strong>A$ {{carts.price}}</strong>
+                    </h6>
                   </ion-col>
                 </ion-row>
               </ion-grid>
-                            <hr>
+              <hr />
               <h5>
                 <span class="floatLeft">DELIVERY</span>
                 <span class="floatRight" (click)="istoggle()">EDIT</span>
@@ -89,19 +114,27 @@
                 <ion-row>
                   <ion-col class="p0">
                     <h6>
-                                            {{custAddress.building}},<br/> {{custAddress.landmark}},<br/> {{custAddress.address}}
+                      {{custAddress.building}},<br />
+                      {{custAddress.landmark}},<br />
+                      {{custAddress.address}}
                     </h6>
                   </ion-col>
                 </ion-row>
               </ion-grid>
-                            <hr>
+              <hr />
               <h5>
                 <span class="floatLeft">PAYMENT</span>
                 <span class="floatRight">CHANGE</span>
                 <div class="clear"></div>
               </h5>
               <div class="payment_method">
-                                <input type="radio" name="payments" id="cod" name="radio-group" checked="true">
+                <input
+                  type="radio"
+                  name="payments"
+                  id="cod"
+                  name="radio-group"
+                  checked="true"
+                />
                 <label for="paypal">
                   <p>COD</p>
                 </label>
@@ -146,28 +179,42 @@
                                     </li>
                                 </ul>
                             </div> -->
-                            <hr>
+              <hr />
               <div class="coupon_code">
-                                <input class="" placeholder="COUPON CODE" #promo><button class="add_btn" (click)="promoApply(promo.value)">ADD</button>
-                                <br/>&nbsp;<h6>GET50</h6>
-                                <span *ngIf="discountApplied" style="color: red">Promocode applied successfully </span>
+                <input class="" placeholder="COUPON CODE" #promo /><button
+                  class="add_btn"
+                  (click)="promoApply(promo.value)"
+                >
+                  ADD
+                </button>
+                <br />&nbsp;
+                <h6>GET50</h6>
+                <span *ngIf="discountApplied" style="color: red"
+                  >Promocode applied successfully
+                </span>
               </div>
-                            <br/>
+              <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">
@@ -175,14 +222,16 @@
                 <span class="floatRight">(-) A$ {{discount}}</span>
                 <div class="clear"></div>
               </h6>
-                            <hr>
+              <hr />
               <div class="total_div">
                 <ion-row>
                   <ion-col>
                     <p class="textLeft">Total Price:</p>
                   </ion-col>
                   <ion-col>
-                                        <p class="textRight" *ngIf="cartService.cartTotal">A$ {{getTotal(cartService.cartTotal)}}</p>
+                    <p class="textRight" *ngIf="cartService.cartTotal">
+                      A$ {{getTotal(cartService.cartTotal)}}
+                    </p>
                   </ion-col>
                 </ion-row>
               </div>
@@ -190,12 +239,14 @@
           </ion-slide>
           <ion-slide>
             <div class="order_placed_div">
-                            <img src="../assets/[email protected]">
+              <img src="../assets/[email protected]" />
               <h4>Order Placed</h4>
               <p>{{bookDate}}</p>
               <h3>The product will be delivered in</h3>
               <h1>60:00 Mins</h1>
-                            <button class="view_order" (click)="goToPage('myorder')">VIEW ORDERS</button><br>
+              <button class="view_order" (click)="goToPage('myorder')">
+                VIEW ORDERS</button
+              ><br />
               <button class="home_btn" (click)="goToPage('home')">HOME</button>
             </div>
           </ion-slide>
@@ -205,11 +256,22 @@
   </div>
 </ion-content>
 <ion-footer>
-    <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
-        <div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div>
+  <div
+    class="footer_btnbay"
+    *ngIf="cartService.carts && cartService.carts.length > 0"
+    [hidden]="currentIndex != 0"
+  >
+    <div class="continue" (click)="goToPage('productlist')">
+      CONTINUE SHOPING
+    </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()">
@@ -225,8 +287,11 @@
 
 <div *ngIf="isShow" [@slideInOut]>
   <div class="nav_header">
-        <button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()">
-            <img src="../assets/Group17_2.png">
+    <button
+      class="nav_btn nav_back floatLeft"
+      (click)="istoggle(); setAddress()"
+    >
+      <img src="../assets/Group17_2.png" />
     </button>
     <div class="nav_title floatLeft">
       <h4>CHANGE LOCATION</h4>
@@ -234,22 +299,41 @@
     <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">
-                        <label for="styled-checkbox-{{i}}"> {{address.addressType}}
-                        </label>
-
+          <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"
+            />
+            <label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
           </div>
           <div class="floatLeft">
             <p>
@@ -260,7 +344,5 @@
         </li>
       </ul>
     </div>
-
   </ion-content>
 </div>
-

src/app/cart/cart.page.scss

@@ -403,6 +403,30 @@
                     font-weight: 900;
                 }
             }
+            .no-items-wrapper {
+                text-align: center;
+                padding-top: 40%;
+                img {
+                    width: 100px;
+                }
+                h1 {
+                    font-size: 18px;
+                    font-weight: bolder;
+                    text-transform: uppercase;
+                    color: #3B394D;
+                }
+                button {
+                    background-color: #29285b;
+                    border-radius: 8px;
+                    height: 50px;
+                    width: 48%;
+                    color: #fff;
+                    font-size: 18px;
+                    font-weight: lighter;
+                    text-transform: uppercase;
+                    margin-top: 10px;
+                }
+            }
         }
     }
 }

src/app/failed/failed.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FailedPage } from './failed.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FailedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [FailedPage]
+})
+export class FailedPageModule {}

src/app/failed/failed.page.html

+<ion-content>
+    <div class="orderfailed-wrapper">
+        <div class="head">
+            <img src="../../assets/failed.png">
+            <h1>Order Failed</h1>
+        </div>
+        <div class="content">
+            <h1>Something went wrong</h1>
+            <h2>Please check your network or details you <br> provided and try again</h2>
+        </div>
+        <button>View Orders</button>
+        <h3>home</h3>
+
+    </div>
+</ion-content>
\ No newline at end of file

src/app/failed/failed.page.scss

+.orderfailed-wrapper {
+    padding: 20px;
+    text-align: center;
+    .head {
+        img {
+            width: 60px;
+        }
+        h1 {
+            font-size: 18px;
+            text-transform: uppercase;
+            color: #29285B;
+            font-weight: bolder;
+            margin-top: 15px;
+        }
+    }
+    .content {
+        margin-top: 30px;
+        h1 {
+            color: #B0AEC7;
+            font-weight: bolder;
+            margin: 0;
+            font-size: 16px;
+        }
+        h2 {
+            color: #B0AEC7;
+            margin-top: 5px;
+            font-size: 16px;
+        }
+    }
+    button {
+        background-color: #29285b;
+        border-radius: 8px;
+        height: 50px;
+        width: 48%;
+        color: #fff;
+        font-size: 18px;
+        font-weight: lighter;
+        text-transform: uppercase;
+        margin-top: 25px;
+        margin-bottom: 50px;
+    }
+    h3 {
+        color: #29285b;
+        background: none;
+        font-size: 20px;
+        font-weight: bolder;
+        text-transform: uppercase;
+        margin-top: 50px;
+        margin-bottom: 50px;
+    }
+}
\ No newline at end of file

src/app/failed/failed.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FailedPage } from './failed.page';
+
+describe('FailedPage', () => {
+  let component: FailedPage;
+  let fixture: ComponentFixture<FailedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FailedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FailedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/failed/failed.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-failed',
+  templateUrl: './failed.page.html',
+  styleUrls: ['./failed.page.scss'],
+})
+export class FailedPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/productlist/productlist.page.html

@@ -44,6 +44,34 @@
     >
       <li *ngFor="let product of prodService.product; let i = index">
         <div class="product_image">
+          <div class="load-back">
+            <img
+              [src]="product.image"
+              onerror="this.src='../assets/[email protected]'"
+              (click)="prodDetails(i)"
+            />
+          </div>
+          <div
+            [ngClass]="checkFavStatus(product.prodId)"
+            (click)="changeFav(product.prodId)"
+          ></div>
+          <div class="featured_badge" *ngIf="product.featured">Featured</div>
+        </div>
+        <h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
+        <p (click)="prodDetails(i)">
+          A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0"
+            >-{{product.discount}}%</span
+          >
+        </p>
+      </li>
+    </ul>
+  </div>
+  <ul
+    [class.grid_view]="onGrid"
+    *ngIf="prodService.product && prodService.product.length > 0"
+  >
+    <li *ngFor="let product of prodService.product; let i = index">
+      <div class="product_image">
         <img
           [src]="product.image"
           onerror="this.src='../assets/[email protected]'"
@@ -63,12 +91,12 @@
       </p>
     </li>
   </ul>
+
   <div class="no-result-wrapper" *ngIf="prodService.product.length === 0">
     <img src="../../assets/basket.png" />
     <h1>No result found</h1>
     <button (click)="goToPage('home')">home</button>
   </div>
-  </div>
   <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
     <div class="sort_inner">
       <h4>Sort By</h4>

src/app/productlist/productlist.page.scss

@@ -259,6 +259,13 @@
   }
 }
 
+.load-back {
+  height: 100%;
+  width: 100%;
+  background-image: url('../../assets/giphy.gif');
+  background-position: center;
+}
+
 .no-result-wrapper {
   text-align: center;
   padding-top: 40%;

src/app/profile/profile.page.html

@@ -7,6 +7,7 @@
   </div>
   <div class="clear"></div>
 </div>
+
 <ion-content>
   <div class="profile_wrapper" *ngIf="loggedUser">
     <div class="profile_banner">
@@ -123,7 +124,6 @@
         </ion-col>
       </ion-row>
     </div>
-  </div>
     <div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
       <div class="logout_inner">
         <h4>Logout</h4>
@@ -138,6 +138,7 @@
           >
             Logout
           </button>
+        </div>
 
         <div class="clear"></div>
       </div>

src/app/profile/profile.page.scss

-        .profile_wrapper {
+.profile_wrapper {
     .profile_banner {
         width: 100%;
         background-image: url('../../assets/profile_banner.png');
@@ -173,4 +173,4 @@
             }
         }
     }
-        }
+}
\ No newline at end of file

src/app/success/success.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SuccessPage } from './success.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SuccessPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [SuccessPage]
+})
+export class SuccessPageModule {}

src/app/success/success.page.html

+<ion-content>
+    <div class="success_wrapper">
+        <div class="cart_head">
+            <div class="cart_menu_header">
+                <ul>
+                    <li class="textCenter active">CART</li>
+                    <li class="textCenter">
+                        <hr>
+                    </li>
+                    <li class="textCenter">CHECKOUT</li>
+                    <li class="textCenter">
+                        <hr>
+                    </li>
+                    <li class="textCenter">FINISH</li>
+                </ul>
+            </div>
+            <div class="success-set">
+                <img src="../../assets/white_tick.png">
+                <h1>Order is placed</h1>
+                <h2>June 26th 2019, 03:00 PM</h2>
+            </div>
+        </div>
+        <div class="product-countdown">
+            <h1>The product will be delivered in</h1>
+            <h2>00:59<span>30</span></h2>
+            <button>View Orders</button>
+            <h3>home</h3>
+        </div>
+
+    </div>
+</ion-content>
\ No newline at end of file

src/app/success/success.page.scss

+.success_wrapper {
+    width: 100%;
+    .cart_head {
+        width: 100%;
+        height: auto;
+        background-image: url("../../assets/[email protected]");
+        background-position: center bottom;
+        background-repeat: no-repeat;
+        background-size: cover;
+        padding-bottom: 35px;
+        .nav_header {
+            position: static;
+            background-color: transparent;
+            .nav_title {
+                h4 {
+                    color: #FFF;
+                }
+            }
+        }
+        .cart_menu_header {
+            padding: 50px 20px 20px 20px;
+            ul {
+                margin: 0px;
+                padding: 10px;
+                background-color: rgba(273, 273, 273, 0.1);
+                border-radius: 10px;
+                li {
+                    list-style: none;
+                    color: #FFF;
+                    width: 20%;
+                    display: inline-block;
+                    font-weight: 700;
+                    font-size: 13px;
+                    hr {
+                        height: 0px;
+                        border-top: none;
+                        width: 90%;
+                        margin-top: 0px;
+                        margin-bottom: 0px;
+                        position: relative;
+                        margin: 0 auto;
+                        border-bottom: 2px dashed rgba(176, 174, 199, 1);
+                        bottom: 4px;
+                    }
+                }
+            }
+        }
+        .success-set {
+            text-align: center;
+            margin-top: 50px;
+            img {
+                width: 75px;
+            }
+            h1 {
+                color: #fff;
+                font-size: 18px;
+                font-weight: bolder;
+                margin-top: 5px;
+                margin-bottom: 0;
+                text-transform: uppercase;
+            }
+            h2 {
+                color: #fff;
+                font-size: 12px;
+                font-weight: lighter;
+                margin-top: 2px;
+            }
+        }
+    }
+    .product-countdown {
+        padding: 20px;
+        text-align: center;
+        margin-top: 25px;
+        h1 {
+            color: #B0AEC7;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        h2 {
+            color: #3B394D;
+            font-size: 40px;
+            font-weight: bolder;
+            margin-top: 15px;
+            span {
+                font-size: 16px;
+                font-weight: lighter;
+            }
+        }
+        button {
+            background-color: #29285b;
+            border-radius: 8px;
+            height: 50px;
+            width: 48%;
+            color: #fff;
+            font-size: 18px;
+            font-weight: lighter;
+            text-transform: uppercase;
+            margin-top: 25px;
+            margin-bottom: 50px;
+        }
+        h3 {
+            color: #29285b;
+            background: none;
+            font-size: 20px;
+            font-weight: bolder;
+            text-transform: uppercase;
+            margin-top: 20px;
+            margin-bottom: 50px;
+        }
+    }
+}
+
+@media only screen and (max-width: 350px) {
+    .cart_head {
+        padding-bottom: 15px !important;
+        .cart_menu_header {
+            padding: 20px !important;
+            ul {
+                li {
+                    font-size: 12px !important;
+                }
+            }
+        }
+        .success-set {
+            margin-top: 0 !important;
+        }
+    }
+}
\ No newline at end of file

src/app/success/success.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessPage } from './success.page';
+
+describe('SuccessPage', () => {
+  let component: SuccessPage;
+  let fixture: ComponentFixture<SuccessPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SuccessPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SuccessPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/success/success.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-success',
+  templateUrl: './success.page.html',
+  styleUrls: ['./success.page.scss'],
+})
+export class SuccessPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/config/products.service.ts

@@ -148,6 +148,7 @@ export class ProductsService {
             image: item.image,
             price: item.price,
             qty: item.qty,
+            rating: item.rating,
             shopper: item.shopper,
             skuCode: item.skuCode,
             status: item.status,
@@ -201,6 +202,7 @@ export class ProductsService {
             price: item.price,
             qty: item.qty,
             shopper: item.shopper,
+            rating: item.rating,
             skuCode: item.skuCode,
             status: item.status,
             size: this.service.splitSep(item.size),

src/global.scss

@@ -416,6 +416,10 @@ app-deliverypop {
   padding: 0px !important;
 }
 
+app-success {
+    padding: 0px !important;
+}
+
 .nav_header {
   position: fixed;
   top: 0px;