latest
This commit is contained in:
Le Deng
@@ -9,479 +9,489 @@
|
||||
<img class="img-responsive" src="../../../assets/image/wood.png" style="position: absolute;margin-top: 90px;z-index: -2;" />
|
||||
</div>
|
||||
<hr style="position: absolute; width:85%; height:6px; background-color: #333; z-index: -1; margin-top: -170px " />
|
||||
<div *ngIf="!dataFetched" style="margin-top: 50px;">
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-md-offset-5">
|
||||
<md-spinner></md-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col-xs-3"></div>
|
||||
<div class="col-xs-9">
|
||||
<div class="panel-group">
|
||||
<div class="panel panel-default panel-faq" style="border: none;">
|
||||
<div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
|
||||
<md-tab-group [selectedIndex]="selectedProfileTab">
|
||||
<md-tab label="Edit">
|
||||
<div style="margin-top:20px;">
|
||||
<div class="alert alert-danger" *ngIf="incorrectPassword">
|
||||
<strong>Incorrect Password!</strong> Please enter the correct password for the current user.
|
||||
</div>
|
||||
<div class="alert alert-success" *ngIf="updateSuccess">
|
||||
<strong>Update Success!</strong>
|
||||
</div>
|
||||
<form (ngSubmit)="onUpdateUserInfo()" >
|
||||
<input type="hidden" name="id" [(ngModel)]="user.id" />
|
||||
<div class="bg-info" *ngIf="updateUserInfo">User info updated.</div>
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" name="firstName" [(ngModel)]="user.firstName" />
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" name="lastName" [(ngModel)]="user.lastName" />
|
||||
<div *ngIf="dataFetched">
|
||||
<div class="col-xs-9">
|
||||
<div class="panel-group">
|
||||
<div class="panel panel-default panel-faq" style="border: none;">
|
||||
<div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
|
||||
<md-tab-group [selectedIndex]="selectedProfileTab">
|
||||
<md-tab label="Edit">
|
||||
<div style="margin-top:20px;">
|
||||
<div class="alert alert-danger" *ngIf="incorrectPassword">
|
||||
<strong>Incorrect Password!</strong> Please enter the correct password for the current user.
|
||||
</div>
|
||||
<div class="alert alert-success" *ngIf="updateSuccess">
|
||||
<strong>Update Success!</strong>
|
||||
</div>
|
||||
<form (ngSubmit)="onUpdateUserInfo()">
|
||||
<input type="hidden" name="id" [(ngModel)]="user.id" />
|
||||
<div class="bg-info" *ngIf="updateUserInfo">User info updated.</div>
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" name="firstName" [(ngModel)]="user.firstName" />
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" name="lastName" [(ngModel)]="user.lastName" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="username">Username *</label> <span *ngIf="usernameExists" style="color:red;">Username already exists. Choose a different one.</span>
|
||||
<input required="required" type="text" class="form-control" id="username" name="username" [(ngModel)]="user.username" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="currentPassword">Current password</label>
|
||||
<input type="password" class="form-control" id="currentPassword" name="password" [(ngModel)]="currentPassword" />
|
||||
<p style="color: #828282;"> Enter your current password to change the E-mail address or Password.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail Address *</label> <span *ngIf="emailExists" style="color:red;">Email already exists. Choose a different one.</span>
|
||||
<input required="required" type="text" class="form-control" id="email" name="email" [(ngModel)]="user.email" />
|
||||
<p style="color: #828282;"> A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="txtNewPassword">Password</label> <span id="checkPasswordMatch" style="color:red;"></span>
|
||||
<input type="password" class="form-control" id="txtNewPassword" name="newPassword" [(ngModel)]="newPassword" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="txtConfirmPassword">Confirm Password</label>
|
||||
<input type="password" class="form-control" id="txtConfirmPassword" />
|
||||
<p style="color: #828282;"> To change the current user password, enter the new password in both fields.</p>
|
||||
</div>
|
||||
<button md-raised-button type="submit" class="mat-primary" id="updateUserInfoButton">Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab label="Orders">
|
||||
<div class="panel-group">
|
||||
<div class="panel panel-default panel-faq" style="border: none;">
|
||||
|
||||
<div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
|
||||
<table class="table table-sm table-inverse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order Date</th>
|
||||
<th>Order Number</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let order of orderList">
|
||||
<td>
|
||||
<a class="pointer" (click)="onDisplayOrder(order)"><span
|
||||
<div class="form-group">
|
||||
<label for="username">Username *</label> <span *ngIf="usernameExists" style="color:red;">Username already exists. Choose a different one.</span>
|
||||
<input required="required" type="text" class="form-control" id="username" name="username" [(ngModel)]="user.username" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="currentPassword">Current password</label>
|
||||
<input type="password" class="form-control" id="currentPassword" name="password" [(ngModel)]="currentPassword" />
|
||||
<p style="color: #828282;"> Enter your current password to change the E-mail address or Password.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail Address *</label> <span *ngIf="emailExists" style="color:red;">Email already exists. Choose a different one.</span>
|
||||
<input required="required" type="text" class="form-control" id="email" name="email" [(ngModel)]="user.email" />
|
||||
<p style="color: #828282;"> A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="txtNewPassword">Password</label> <span id="checkPasswordMatch" style="color:red;"></span>
|
||||
<input type="password" class="form-control" id="txtNewPassword" name="newPassword" [(ngModel)]="newPassword" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="txtConfirmPassword">Confirm Password</label>
|
||||
<input type="password" class="form-control" id="txtConfirmPassword" />
|
||||
<p style="color: #828282;"> To change the current user password, enter the new password in both fields.</p>
|
||||
</div>
|
||||
<button md-raised-button type="submit" class="mat-primary" id="updateUserInfoButton">Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab label="Orders">
|
||||
<div class="panel-group">
|
||||
<div class="panel panel-default panel-faq" style="border: none;">
|
||||
<div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
|
||||
<table class="table table-sm table-inverse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order Date</th>
|
||||
<th>Order Number</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let order of orderList">
|
||||
<td>
|
||||
<a class="pointer" (click)="onDisplayOrder(order)"><span
|
||||
>{{order.orderDate}}</span></a>
|
||||
</td>
|
||||
<td>{{order.id}}</td>
|
||||
<td>{{order.orderTotal}}</td>
|
||||
<td>{{order.orderStatus}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div *ngIf="displayOrderDetail">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="text-center">
|
||||
<h2>Order Detail for purchase #<span>{{order.id}}</span></h2>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-default height">
|
||||
<div class="panel-heading"><strong>Billing Details</strong>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span>{{order.billingAddress.billingAddressName}}</span><br/>
|
||||
<span>{{order.billingAddress.billingAddressStreet1}} {{order.billingAddress.billingAddressStreet2}}</span><br/>
|
||||
<span>{{order.billingAddress.billingAddressCity}}</span><br/>
|
||||
<span>{{order.billingAddress.billingAddressState}}</span><br/>
|
||||
<span>{{order.billingAddress.billingAddressZipcode}}</span><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-default height">
|
||||
<div class="panel-heading"><strong>Payment Information</strong>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span>{{order.payment.holderName}}</span><br/>
|
||||
Visa<br/>
|
||||
<span>{{order.payment.cardNumber}}</span><br/>
|
||||
<span>Exp Date:</span> <span
|
||||
>{{order.payment.expiryMonth}}</span>/<span
|
||||
>{{order.payment.expiryYear}}</span><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-default height">
|
||||
<div class="panel-heading"><strong>Shipping Address</strong>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span>{{order.shippingAddress.shippingAddressName}}</span><br/>
|
||||
<span>{{order.shippingAddress.shippingAddressStreet1}}' '{{order.shippingAddress.shippingAddressStreet2}}</span><br/>
|
||||
<span>{{order.shippingAddress.shippingAddressCity}}</span><br/>
|
||||
<span>{{order.shippingAddress.shippingAddressState}}</span><br/>
|
||||
<span>{{order.shippingAddress.shippingAddressZipcode}}</span><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="text-center"><strong>Order summary</strong></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><strong>Item Name</strong></td>
|
||||
<td class="text-center"><strong>Item Price</strong></td>
|
||||
<td class="text-center"><strong>Item Quantity</strong>
|
||||
</td>
|
||||
<td class="text-right"><strong>Total</strong></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let cartItem of cartItemList">
|
||||
<td>{{cartItem.book.title}}
|
||||
</td>
|
||||
<td
|
||||
class="text-center">{{cartItem.book.ourPrice}}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{cartItem.qty}}
|
||||
</td>
|
||||
<td
|
||||
class="text-right">{{cartItem.subtotal}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="highrow"></td>
|
||||
<td class="highrow"></td>
|
||||
<td class="highrow text-center">
|
||||
<strong>Subtotal</strong></td>
|
||||
<td
|
||||
class="highrow text-right">{{order.orderTotal}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="emptyrow"></td>
|
||||
<td class="emptyrow"></td>
|
||||
<td class="emptyrow text-center"><strong>Tax</strong>
|
||||
</td>
|
||||
<td
|
||||
class="emptyrow text-right">{{order.orderTotal*0.06}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="emptyrow"><i
|
||||
class="fa fa-barcode iconbig"></i></td>
|
||||
<td class="emptyrow"></td>
|
||||
<td class="emptyrow text-center"><strong>Total</strong>
|
||||
</td>
|
||||
<td
|
||||
class="emptyrow text-right">{{order.orderTotal*1.06}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab label="Billing">
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<p *ngIf="defaultPaymentSet">Default payment set successfully!</p>
|
||||
<md-tab-group (selectedIndexChange)="selectedBillingChange($event)" [selectedIndex]="selectedBillingTab">
|
||||
<md-tab label="List of Credit Cards">
|
||||
<form (ngSubmit)="setDefaultPayment()" method="post">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Default</th>
|
||||
<th>Credit Card</th>
|
||||
<th>Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let userPayment of userPaymentList">
|
||||
<td>
|
||||
<input type="radio" name="defaultUserPaymentId" [(ngModel)]="defaultUserPaymentId" [value]="userPayment.id" />
|
||||
<span>default</span>
|
||||
</td>
|
||||
<td>{{userPayment.cardName}}</td>
|
||||
<td>
|
||||
<a md-button (click)="onUpdatePayment(userPayment)"><i
|
||||
class="fa fa-pencil"></i></a>
|
||||
<a md-button (click)="onRemovePayment(userPayment.id)"><i
|
||||
class="fa fa-times"></i></a>
|
||||
</td>
|
||||
<td>{{order.id}}</td>
|
||||
<td>{{order.orderTotal}}</td>
|
||||
<td>{{order.orderStatus}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button md-raised-button class="mat-primary" type="submit">Save</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
<md-tab label="Add(Update) Credit Card">
|
||||
<form (ngSubmit)="onNewPayment()" method="post">
|
||||
<div class="bg-info" *ngIf="updateUserPaymentInfo">User info updated.</div>
|
||||
<input hidden="hidden" name="id" [(ngModel)]="userPayment.id" />
|
||||
<div class="form-group">
|
||||
<h5>* Give a name for your card: </h5>
|
||||
<input type="text" class="form-control" id="cardName" placeholder="Card Name" name="cardName" required="required" [(ngModel)]="userPayment.cardName" />
|
||||
</div>
|
||||
<!--Billing Address-->
|
||||
<hr/>
|
||||
<div class="form-group">
|
||||
<h4>Billing Address</h4>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="billingName">* Name</label>
|
||||
<input type="text" class="form-control" id="billingName" placeholder="Recevier Name" name="userBillingName" required="required" [(ngModel)]="userBilling.userBillingName" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="billingAddress">* Street Address</label>
|
||||
<input type="text" class="form-control" id="billingAddress" required="required" placeholder="Street Address 1" name="userBillingStreet1" [(ngModel)]="userBilling.userBillingStreet1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Street Address 2" name="userBillingStreet2" [(ngModel)]="userBilling.userBillingStreet2" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="billingCity">* City</label>
|
||||
<input type="text" class="form-control" id="billingCity" required="required" placeholder="Your billing city" name="userBillingCity" [(ngModel)]="userBilling.userBillingCity" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="billingState">* State</label>
|
||||
<select id="billingState" class="form-control" name="userBillingState" [(ngModel)]="userBilling.userBillingState" required="required">
|
||||
<option value="" disabled>-- state --</option>
|
||||
<option *ngFor="let state of stateList">{{state}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="billingZipcode">* Zipcode</label>
|
||||
<input type="text" class="form-control" id="billingZipcode" required="required" placeholder="Zipcode" name="userBillingZipcode" [(ngModel)]="userBilling.userBillingZipcode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--User Payment-->
|
||||
<hr/>
|
||||
<div class="form-group">
|
||||
<h4>Credit Card Information</h4>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<img src="../../../assets/image/creditcard.png" class="img-responsive" />
|
||||
<br/>
|
||||
<div class="form-group">
|
||||
<label for="cardType">* Select Card Type:</label>
|
||||
<select class="form-control" id="cardType" name="type" [(ngModel)]="userPayment.type">
|
||||
<option value="" disabled="disabled">
|
||||
-- Card Type --
|
||||
</option>
|
||||
<option value="visa">Visa</option>
|
||||
<option value="mastercard">Mastercard</option>
|
||||
<option value="discover">Discover</option>
|
||||
<option value="amex">American Express</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cardHolder">* Card Holder</label>
|
||||
<input type="text" class="form-control" id="cardHolder" required="required" placeholder="Card Holder Name" name="holderName" [(ngModel)]="userPayment.holderName" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cardNumber">* Card Number</label>
|
||||
<div class="input-group">
|
||||
<input required="required" id="cardNumber" type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" name="cardNumber" [(ngModel)]="userPayment.cardNumber" />
|
||||
<span class="input-group-addon"><i class="fa fa-credit-card"
|
||||
aria-hidden="true"></i></span>
|
||||
<div *ngIf="displayOrderDetail">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="text-center">
|
||||
<h2>Order Detail for purchase #<span>{{order.id}}</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-7 col-md-7">
|
||||
<div class="form-group">
|
||||
<label>* Expiration Date</label>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<select class="form-control" name="expiryMonth" required="required" [(ngModel)]="userPayment.expiryMonth">
|
||||
<option value="" disabled="disabled">
|
||||
--Month--
|
||||
</option>
|
||||
<option value="1">Jan (01)</option>
|
||||
<option value="2">Feb (02)</option>
|
||||
<option value="3">Mar (03)</option>
|
||||
<option value="4">Apr (04)</option>
|
||||
<option value="5">May (05)</option>
|
||||
<option value="6">June (06)</option>
|
||||
<option value="7">July (07)</option>
|
||||
<option value="8">Aug (08)</option>
|
||||
<option value="9">Sep (09)</option>
|
||||
<option value="10">Oct (10)</option>
|
||||
<option value="11">Nov (11)</option>
|
||||
<option value="12">Dec (12)</option>
|
||||
</select>
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-default height">
|
||||
<div class="panel-heading"><strong>Billing Details</strong>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span>{{order.billingAddress.billingAddressName}}</span>
|
||||
<br/>
|
||||
<span>{{order.billingAddress.billingAddressStreet1}} {{order.billingAddress.billingAddressStreet2}}</span>
|
||||
<br/>
|
||||
<span>{{order.billingAddress.billingAddressCity}}</span>
|
||||
<br/>
|
||||
<span>{{order.billingAddress.billingAddressState}}</span>
|
||||
<br/>
|
||||
<span>{{order.billingAddress.billingAddressZipcode}}</span>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<select class="form-control" name="expiryYear" [(ngModel)]="userPayment.expiryYear">
|
||||
<option value="" disabled="disabled">--Year--
|
||||
</option>
|
||||
<option value="17">2017</option>
|
||||
<option value="18">2018</option>
|
||||
<option value="19">2019</option>
|
||||
<option value="20">2020</option>
|
||||
<option value="21">2021</option>
|
||||
<option value="22">2022</option>
|
||||
<option value="23">2023</option>
|
||||
<option value="23">2024</option>
|
||||
<option value="23">2025</option>
|
||||
<option value="23">2026</option>
|
||||
<option value="23">2027</option>
|
||||
<option value="23">2028</option>
|
||||
<option value="23">2029</option>
|
||||
</select>
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-default height">
|
||||
<div class="panel-heading"><strong>Payment Information</strong>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span>{{order.payment.holderName}}</span>
|
||||
<br/> Visa
|
||||
<br/>
|
||||
<span>{{order.payment.cardNumber}}</span>
|
||||
<br/>
|
||||
<span>Exp Date:</span> <span>{{order.payment.expiryMonth}}</span>/<span>{{order.payment.expiryYear}}</span>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="panel panel-default height">
|
||||
<div class="panel-heading"><strong>Shipping Address</strong>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<span>{{order.shippingAddress.shippingAddressName}}</span>
|
||||
<br/>
|
||||
<span>{{order.shippingAddress.shippingAddressStreet1}}' '{{order.shippingAddress.shippingAddressStreet2}}</span>
|
||||
<br/>
|
||||
<span>{{order.shippingAddress.shippingAddressCity}}</span>
|
||||
<br/>
|
||||
<span>{{order.shippingAddress.shippingAddressState}}</span>
|
||||
<br/>
|
||||
<span>{{order.shippingAddress.shippingAddressZipcode}}</span>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5 col-md-5 pull-right">
|
||||
<div class="form-group">
|
||||
<label for="cardCVC">CV Code</label>
|
||||
<input id="cardCVC" type="tel" class="form-control" name="cardCVC" placeholder="CVC" name="cvc" [(ngModel)]="userPayment.cvc" />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="text-center"><strong>Order summary</strong></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><strong>Item Name</strong></td>
|
||||
<td class="text-center"><strong>Item Price</strong></td>
|
||||
<td class="text-center"><strong>Item Quantity</strong>
|
||||
</td>
|
||||
<td class="text-right"><strong>Total</strong></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let cartItem of cartItemList">
|
||||
<td>{{cartItem.book.title}}
|
||||
</td>
|
||||
<td class="text-center">{{cartItem.book.ourPrice}}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{cartItem.qty}}
|
||||
</td>
|
||||
<td class="text-right">{{cartItem.subtotal}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="highrow"></td>
|
||||
<td class="highrow"></td>
|
||||
<td class="highrow text-center">
|
||||
<strong>Subtotal</strong></td>
|
||||
<td class="highrow text-right">{{order.orderTotal}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="emptyrow"></td>
|
||||
<td class="emptyrow"></td>
|
||||
<td class="emptyrow text-center"><strong>Tax</strong>
|
||||
</td>
|
||||
<td class="emptyrow text-right">{{order.orderTotal*0.06}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="emptyrow"><i class="fa fa-barcode iconbig"></i></td>
|
||||
<td class="emptyrow"></td>
|
||||
<td class="emptyrow text-center"><strong>Total</strong>
|
||||
</td>
|
||||
<td class="emptyrow text-right">{{order.orderTotal*1.06}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<button md-raised-button type="submit" class="mat-primary">Save All</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab label="Shipping">
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<p *ngIf="defaultShippingSet">Default shipping address set successfully!</p>
|
||||
<md-tab-group (selectedIndexChange)="selectedShippingChange($event)" [selectedIndex]="selectedShippingTab">
|
||||
<md-tab label="List of Shipping Addresses">
|
||||
<form (ngSubmit)="setDefaultShipping()" method="post">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Default</th>
|
||||
<th>Shipping Address</th>
|
||||
<th>Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let userShipping of userShippingList">
|
||||
<td>
|
||||
<input type="radio" name="defaultUserShippingId" [(ngModel)]="defaultUserShippingId" [value]="userShipping.id" />
|
||||
<span>default</span>
|
||||
</td>
|
||||
<td>{{userShipping.userShippingStreet1}}, {{userShipping.userShippingCity}}, {{userShipping.userShippingState}}</td>
|
||||
<td>
|
||||
<a md-button (click)="onUpdateShipping(userShipping)"><i
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab label="Billing">
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<p *ngIf="defaultPaymentSet">Default payment set successfully!</p>
|
||||
<md-tab-group (selectedIndexChange)="selectedBillingChange($event)" [selectedIndex]="selectedBillingTab">
|
||||
<md-tab label="List of Credit Cards">
|
||||
<form (ngSubmit)="setDefaultPayment()" method="post">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Default</th>
|
||||
<th>Credit Card</th>
|
||||
<th>Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let userPayment of userPaymentList">
|
||||
<td>
|
||||
<input type="radio" name="defaultUserPaymentId" [(ngModel)]="defaultUserPaymentId" [value]="userPayment.id" />
|
||||
<span>default</span>
|
||||
</td>
|
||||
<td>{{userPayment.cardName}}</td>
|
||||
<td>
|
||||
<a md-button (click)="onUpdatePayment(userPayment)"><i
|
||||
class="fa fa-pencil"></i></a>
|
||||
<a md-button (click)="onRemoveShipping(userShipping.id)"><i
|
||||
<a md-button (click)="onRemovePayment(userPayment.id)"><i
|
||||
class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button md-raised-button class="mat-primary" type="submit">Save</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
<md-tab label="Add(Update) Shipping Address">
|
||||
<form (ngSubmit)="onNewShipping()" method="post">
|
||||
<input hidden="hidden" name="id" [(ngModel)]="userShipping.id" />
|
||||
<!--Shipping Address-->
|
||||
<div class="form-group">
|
||||
<h4>Shipping Address</h4>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="shippingName">* Name</label>
|
||||
<input type="text" class="form-control" id="shippingName" required="required" placeholder="Recevier Name" name="userShippingName" [(ngModel)]="userShipping.userShippingName" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="shippingAddress">* Street Address</label>
|
||||
<input type="text" class="form-control" id="shippingAddress" required="required" placeholder="Street Address 1" name="userShippingStreet1" [(ngModel)]="userShipping.userShippingStreet1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Street Address 2" name="userShippingStreet2" [(ngModel)]="userShipping.userShippingStreet2" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="shippingCity">* City</label>
|
||||
<input type="text" class="form-control" id="shippingCity" required="required" placeholder="Your Shipping City" name="userShippingCity" [(ngModel)]="userShipping.userShippingCity" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button md-raised-button class="mat-primary" type="submit">Save</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
<md-tab label="Add(Update) Credit Card">
|
||||
<form (ngSubmit)="onNewPayment()" method="post">
|
||||
<div class="bg-info" *ngIf="updateUserPaymentInfo">User info updated.</div>
|
||||
<input hidden="hidden" name="id" [(ngModel)]="userPayment.id" />
|
||||
<div class="form-group">
|
||||
<h5>* Give a name for your card: </h5>
|
||||
<input type="text" class="form-control" id="cardName" placeholder="Card Name" name="cardName" required="required" [(ngModel)]="userPayment.cardName" />
|
||||
</div>
|
||||
<!--Billing Address-->
|
||||
<hr/>
|
||||
<div class="form-group">
|
||||
<h4>Billing Address</h4>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="billingName">* Name</label>
|
||||
<input type="text" class="form-control" id="billingName" placeholder="Recevier Name" name="userBillingName" required="required" [(ngModel)]="userBilling.userBillingName" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="billingAddress">* Street Address</label>
|
||||
<input type="text" class="form-control" id="billingAddress" required="required" placeholder="Street Address 1" name="userBillingStreet1" [(ngModel)]="userBilling.userBillingStreet1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Street Address 2" name="userBillingStreet2" [(ngModel)]="userBilling.userBillingStreet2" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="billingCity">* City</label>
|
||||
<input type="text" class="form-control" id="billingCity" required="required" placeholder="Your billing city" name="userBillingCity" [(ngModel)]="userBilling.userBillingCity" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="billingState">* State</label>
|
||||
<select id="billingState" class="form-control" name="userBillingState" [(ngModel)]="userBilling.userBillingState" required="required">
|
||||
<option value="" disabled>-- state --</option>
|
||||
<option *ngFor="let state of stateList">{{state}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="billingZipcode">* Zipcode</label>
|
||||
<input type="text" class="form-control" id="billingZipcode" required="required" placeholder="Zipcode" name="userBillingZipcode" [(ngModel)]="userBilling.userBillingZipcode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="shippingState">* State</label>
|
||||
<select id="shippingState" class="form-control" name="userShippingState" [(ngModel)]="userShipping.userShippingState" required="required">
|
||||
<option value="" disabled>-- state --</option>
|
||||
<option *ngFor="let state of stateList">{{state}}
|
||||
</option>
|
||||
</select>
|
||||
<!--User Payment-->
|
||||
<hr/>
|
||||
<div class="form-group">
|
||||
<h4>Credit Card Information</h4>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<img src="../../../assets/image/creditcard.png" class="img-responsive" />
|
||||
<br/>
|
||||
<div class="form-group">
|
||||
<label for="cardType">* Select Card Type:</label>
|
||||
<select class="form-control" id="cardType" name="type" [(ngModel)]="userPayment.type">
|
||||
<option value="" disabled="disabled">
|
||||
-- Card Type --
|
||||
</option>
|
||||
<option value="visa">Visa</option>
|
||||
<option value="mastercard">Mastercard</option>
|
||||
<option value="discover">Discover</option>
|
||||
<option value="amex">American Express</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cardHolder">* Card Holder</label>
|
||||
<input type="text" class="form-control" id="cardHolder" required="required" placeholder="Card Holder Name" name="holderName" [(ngModel)]="userPayment.holderName" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cardNumber">* Card Number</label>
|
||||
<div class="input-group">
|
||||
<input required="required" id="cardNumber" type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" name="cardNumber" [(ngModel)]="userPayment.cardNumber" />
|
||||
<span class="input-group-addon"><i class="fa fa-credit-card"
|
||||
aria-hidden="true"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="shippingZipcode">* Zipcode</label>
|
||||
<input type="text" class="form-control" id="shippingZipcode" required="required" placeholder="Zipcode" name="userShippingZipcode" [(ngModel)]="userShipping.userShippingZipcode" />
|
||||
<div class="row">
|
||||
<div class="col-xs-7 col-md-7">
|
||||
<div class="form-group">
|
||||
<label>* Expiration Date</label>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<select class="form-control" name="expiryMonth" required="required" [(ngModel)]="userPayment.expiryMonth">
|
||||
<option value="" disabled="disabled">
|
||||
--Month--
|
||||
</option>
|
||||
<option value="1">Jan (01)</option>
|
||||
<option value="2">Feb (02)</option>
|
||||
<option value="3">Mar (03)</option>
|
||||
<option value="4">Apr (04)</option>
|
||||
<option value="5">May (05)</option>
|
||||
<option value="6">June (06)</option>
|
||||
<option value="7">July (07)</option>
|
||||
<option value="8">Aug (08)</option>
|
||||
<option value="9">Sep (09)</option>
|
||||
<option value="10">Oct (10)</option>
|
||||
<option value="11">Nov (11)</option>
|
||||
<option value="12">Dec (12)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<select class="form-control" name="expiryYear" [(ngModel)]="userPayment.expiryYear">
|
||||
<option value="" disabled="disabled">--Year--
|
||||
</option>
|
||||
<option value="17">2017</option>
|
||||
<option value="18">2018</option>
|
||||
<option value="19">2019</option>
|
||||
<option value="20">2020</option>
|
||||
<option value="21">2021</option>
|
||||
<option value="22">2022</option>
|
||||
<option value="23">2023</option>
|
||||
<option value="23">2024</option>
|
||||
<option value="23">2025</option>
|
||||
<option value="23">2026</option>
|
||||
<option value="23">2027</option>
|
||||
<option value="23">2028</option>
|
||||
<option value="23">2029</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5 col-md-5 pull-right">
|
||||
<div class="form-group">
|
||||
<label for="cardCVC">CV Code</label>
|
||||
<input id="cardCVC" type="tel" class="form-control" name="cardCVC" placeholder="CVC" name="cvc" [(ngModel)]="userPayment.cvc" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<button md-raised-button type="submit" class="mat-primary">Save All</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</div>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
<hr/>
|
||||
<button md-raised-button type="submit" class="mat-primary">Save All</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab label="Shipping">
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<p *ngIf="defaultShippingSet">Default shipping address set successfully!</p>
|
||||
<md-tab-group (selectedIndexChange)="selectedShippingChange($event)" [selectedIndex]="selectedShippingTab">
|
||||
<md-tab label="List of Shipping Addresses">
|
||||
<form (ngSubmit)="setDefaultShipping()" method="post">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Default</th>
|
||||
<th>Shipping Address</th>
|
||||
<th>Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let userShipping of userShippingList">
|
||||
<td>
|
||||
<input type="radio" name="defaultUserShippingId" [(ngModel)]="defaultUserShippingId" [value]="userShipping.id" />
|
||||
<span>default</span>
|
||||
</td>
|
||||
<td>{{userShipping.userShippingStreet1}}, {{userShipping.userShippingCity}}, {{userShipping.userShippingState}}</td>
|
||||
<td>
|
||||
<a md-button (click)="onUpdateShipping(userShipping)"><i
|
||||
class="fa fa-pencil"></i></a>
|
||||
<a md-button (click)="onRemoveShipping(userShipping.id)"><i
|
||||
class="fa fa-times"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button md-raised-button class="mat-primary" type="submit">Save</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
<md-tab label="Add(Update) Shipping Address">
|
||||
<form (ngSubmit)="onNewShipping()" method="post">
|
||||
<input hidden="hidden" name="id" [(ngModel)]="userShipping.id" />
|
||||
<!--Shipping Address-->
|
||||
<div class="form-group">
|
||||
<h4>Shipping Address</h4>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="shippingName">* Name</label>
|
||||
<input type="text" class="form-control" id="shippingName" required="required" placeholder="Recevier Name" name="userShippingName" [(ngModel)]="userShipping.userShippingName" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="shippingAddress">* Street Address</label>
|
||||
<input type="text" class="form-control" id="shippingAddress" required="required" placeholder="Street Address 1" name="userShippingStreet1" [(ngModel)]="userShipping.userShippingStreet1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Street Address 2" name="userShippingStreet2" [(ngModel)]="userShipping.userShippingStreet2" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="shippingCity">* City</label>
|
||||
<input type="text" class="form-control" id="shippingCity" required="required" placeholder="Your Shipping City" name="userShippingCity" [(ngModel)]="userShipping.userShippingCity" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="shippingState">* State</label>
|
||||
<select id="shippingState" class="form-control" name="userShippingState" [(ngModel)]="userShipping.userShippingState" required="required">
|
||||
<option value="" disabled>-- state --</option>
|
||||
<option *ngFor="let state of stateList">{{state}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="form-group">
|
||||
<label for="shippingZipcode">* Zipcode</label>
|
||||
<input type="text" class="form-control" id="shippingZipcode" required="required" placeholder="Zipcode" name="userShippingZipcode" [(ngModel)]="userShipping.userShippingZipcode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<button md-raised-button type="submit" class="mat-primary">Save All</button>
|
||||
</form>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</div>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,6 +21,7 @@ import {Order} from '../../models/order';
|
||||
export class MyProfileComponent implements OnInit {
|
||||
|
||||
private serverPath = AppConst.serverPath;
|
||||
private dataFetched=false;
|
||||
private loginError:boolean = false;
|
||||
private loggedIn = false;
|
||||
private credential = {'username':'', 'password':''};
|
||||
@@ -260,6 +261,8 @@ export class MyProfileComponent implements OnInit {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.dataFetched=true;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
@@ -304,5 +307,7 @@ export class MyProfileComponent implements OnInit {
|
||||
this.userShipping.userShippingState="";
|
||||
this.defaultShippingSet=false;
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user