### 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)`
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:22

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:30
Returns: `void`

getProductImageUrl
`getProductImageUrl(line_item: LineItem)`
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:42
Returns: `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:47
Returns: `void`

### Properties

order
`order: `Order``
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:22

orderNumber
`orderNumber: `String``
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:21

orderSubscription$
`orderSubscription$: `Subscription``
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:20

routeSubscription$
`routeSubscription$: `Subscription``
Defined in src/app/user/components/orders/order-detail/order-detail.component.ts:19

    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 ""