File

src/app/user/components/orders/order-detail/order-detail.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-order-detail
styleUrls order-detail.component.scss
templateUrl ./order-detail.component.html

Constructor

constructor(userService: UserService, route: ActivatedRoute)

Methods

ngOnInit
ngOnInit()
Returns: void
getProductImageUrl
getProductImageUrl(line_item: LineItem)
Returns: void
ngOnDestroy
ngOnDestroy()
Returns: void

Properties

order
order: Order
orderNumber
orderNumber: String
orderSubscription$
orderSubscription$: Subscription
routeSubscription$
routeSubscription$: Subscription
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../../../../interfaces';
import { UserActions } from '../../../actions/user.actions';
import { UserService } from '../../../services/user.service';
import { Order } from '../../../../core/models/order';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { environment } from '../../../../../environments/environment';
import { LineItem } from '../../../../core/models/line_item';

@Component({
  selector: 'app-order-detail',
  templateUrl: './order-detail.component.html',
  styleUrls: ['./order-detail.component.scss']
})
export class OrderDetailComponent implements OnInit, OnDestroy {
  routeSubscription$: Subscription;
  orderSubscription$: Subscription;
  orderNumber: String;
  order: Order;

  constructor(
    private userService: UserService,
    private route: ActivatedRoute
  ) {
  }

  ngOnInit() {
    this.routeSubscription$ = this.route.params.subscribe(
      (params: any) => {
        this.orderNumber = params['number'];
        this.orderSubscription$ =
          this.userService
          .getOrderDetail(this.orderNumber)
          .subscribe(order => this.order = order);
     }
    );
  }

  getProductImageUrl(line_item: LineItem) {
    const image_url = line_item.variant.images[0].small_url;
    return environment.API_ENDPOINT + image_url;
  }

  ngOnDestroy() {
    this.routeSubscription$.unsubscribe();
    this.orderSubscription$.unsubscribe();
  }

}
<div *ngIf="order">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="row">
        <div class="active col-md-6">
          <div class="row">

            <div class="col-md-4">
              <small>SHIPMENT</small>
              <h5>
                <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
                {{order.total}}
              </h5>
            </div>

            <div class="col-md-4">
              <small>STATUS</small>
              <h5 class="status">
                {{order.shipment_state | uppercase}}
              </h5>
            </div>
            
            <div class="col-md-4">
              <small>ITEMS</small>
              <h5>
                {{order.line_items.length}}
              </h5>
            </div>

          </div>
          </div>
      </div>
      <hr>
      <div class='row' *ngFor="let line_item of order.line_items">
        <br>
        <div class="col-md-2">
          <img class="line_item_image" [src]="getProductImageUrl(line_item)" alt="Line Item">
        </div>
        
        <div class="col-md-3">
          <h5 class="ptitle">
            <a [routerLink]="['/product', line_item.variant.slug]">
              <span class="text-uppercase text-primary">{{line_item.variant.name}}</span>
            </a>
          </h5>
        </div>

        <div class="col-md-3">
          <h5 class="strong">
            <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
            {{line_item.total}}
          </h5>
          <small>
            MRP: 
            <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
            {{line_item.price}}
          </small><br/>
          <small class="text-warning">
            VAT/CST: 
            <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
            {{line_item.total - line_item.price}}
          </small>
        </div>

        <div class="col-md-4">
          <p>
            <strong class="text-warning">Please note:</strong> You can return or exchange this within 30 days. 
          </p>
        </div>
      </div>
    </div>
  </div>

  <br>
  <h5>SHIPPING DETAILS</h5>
  <div class="panel panel-default">
    <div class="row panel-body">
      <div class="col-md-12">
        <h5>Order No: {{order.number}}</h5>
      </div>
      
      <div class="col-md-12">
        <address>
          <strong>{{order.ship_address.full_name}}.</strong><br>
          {{order.ship_address.address1}}<br>
          {{order.ship_address.address2}}<br>
          {{order.ship_address.city}}, {{order.ship_address.zipcode}}<br>
          <abbr title="Phone">P:</abbr> {{order.ship_address.phone}}
        </address>
      </div>

      <dl class="col-md-12">
        <dt>
          Total Amount:
          <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
          {{order.total}}
        </dt>
        
        <dd>
          MRP: 
          <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
          {{order.item_total}}
        </dd>

        <dd>
          Shipping: 
          <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
          {{order.ship_total}}
        </dd>
        
        <dd>
          Adjustment: 
          <i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
          {{order.adjustment_total}}
        </dd>
      </dl>

      <dl class="col-md-12">
        <dt>
          Payment: {{order.payment_state | humanize | uppercase}}
        </dt>
      </dl>
    </div>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""