Skip to content

B
business-java
Commit 4fbfd1f7 authored by prumde's avatar prumde
Browse files
Options

Updated 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174502 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 54140570
Show whitespace changes
Inline Side-by-side
Showing with 198 additions and 165 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.css
View file @ 4fbfd1f7
......@@ -210,7 +210,6 @@ md-card {
.payment-option{
display: block;
border-bottom: 1px solid #f3f3f3;
padding: 15px 0;
padding-left: 15px;
}
......@@ -282,6 +281,21 @@ md-card {
left: calc(50% - 100px);
}
.cvv-field {
display: inline-block;
padding-right: 20px;
}
.cvv-input {
height: 30px;
vertical-align: inherit;
}
.cvv-form-container {
padding-left: 50px;
padding-bottom: 20px;
}
.payment-button[disabled], .save-button[disabled] {
background: #e0e0e0;
color: #fff;
......@@ -392,35 +406,44 @@ md-card {
/* Review Order End*/
/* .example-headers-align .mat-expansion-panel-header-title, */
/* .example-headers-align .mat-expansion-panel-header-description { */
/* flex-basis: 0; */
/* } */
/* Material Expansion CSS */
.example-headers-align .mat-expansion-panel-header-description {
justify-content: flex-end;
align-items: initial;
.checkout-page > div .mat-stepper-vertical > .mat-step {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
background: white;
margin: 10px;
}
.mat-expansion-panel {
margin: 10px 0 !important;
.mat-vertical-content-container.mat-stepper-vertical-line::BEFORE {
content: initial;
}
.mat-expansion-panel-header-title {
line-height: 35px;
}
.mat-expansion-panel-header {
padding: 0 !important;
}
/* End */
.login-descr {
justify-content: space-between !important;
}
.popular-bank {
padding: 0 30px 30px 0;
width: 200px;
font-size: 15px;
}
.netBankingContainer {
padding-left: 50px;
}
.popular-bank-title {
font-size: 18px;
font-weight: 700;
padding: 15px 0;
}
.cod-order {
padding-left: 45px;
}
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.html
View file @ 4fbfd1f7
......@@ -5,95 +5,74 @@
<div class="medium-8 columns">
<md-accordion class="example-headers-align">
<md-expansion-panel [expanded]="checkStep(0)" (opened)="setStep(0)" (closed)="resetStep(0);" hideToggle="true">
<md-expansion-panel-header [ngClass]="checkStep(0) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'35px'">
<md-panel-title [style.color]="checkStep(0) ? 'white' : 'black'">
<md-icon *ngIf="!checkStep(0)" class="check-icon">check_circle</md-icon>
<span *ngIf="checkStep(0)" class="panel-selected-icon">1</span>
<md-vertical-stepper #stepper [linear]="true">
<md-step [stepControl]="loginFormGroup">
<ng-template mdStepLabel class="panel-selected">
Login
</md-panel-title>
<md-panel-description class="login-descr">
<span class="user-emailid">{{(userInfo | async).emailId}}</span>
<button class="edit-button" *ngIf="!checkStep(0)">
<md-icon class="edit-icon">mode_edit</md-icon> Edit
</button>
</md-panel-description>
</md-expansion-panel-header>
</ng-template>
<ng-container *ngTemplateOutlet="loginPage"></ng-container>
</md-expansion-panel>
<div>
<button style="float: right;margin: 10px;" md-button mdStepperNext>Next</button>
</div>
</md-step>
<md-expansion-panel [expanded]="checkStep(1)" (opened)="setStep(1)" (closed)="resetStep(1);" hideToggle="true">
<md-expansion-panel-header [ngClass]="checkStep(1) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'105px'">
<md-panel-title [style.color]="checkStep(1) ? 'white' : 'black'">
<md-icon *ngIf="!checkStep(1)" class="check-icon">check_circle</md-icon>
<span *ngIf="checkStep(1)" class="panel-selected-icon">2</span>
<md-step [stepControl]="addressFormGroup">
<form [formGroup]="addressFormGroup">
<ng-template mdStepLabel class="panel-selected">
Delivery/Billing Address
</ng-template>
<div class="address-panel">
<span>Delivery/Billing Address</span>
<span *ngIf="!checkStep(1) && (userInfo | async).firstName" class="user-name">{{(userInfo | async).firstName}} {{(userInfo | async).lastName}}</span>
<span *ngIf="!checkStep(1) && selectedAddress" class="user-address">{{selectedAddress.addr1}}, {{selectedAddress.addr2}}, <span *ngIf="selectedAddress.addr3">Near {{selectedAddress.addr3}},</span> {{selectedAddress.city}}<span *ngIf="selectedAddress.stateDescr">, {{selectedAddress?.stateDescr}}</span>-{{selectedAddress.pinCode}}</span>
<md-radio-group [required]="true" formControlName="address" class="example-radio-group" [(ngModel)]="selectedAddress">
<md-radio-button *ngFor = "let address of addressList" class="user-address" [value]="address">
<address-screen [address]="address" class="address-screen"></address-screen>
<div *ngIf="address == selectedAddress">
<button md-button class="save-button" type="button" mdStepperNext>
Deliver Here
</button>
</div>
</md-radio-button>
</md-panel-title>
<md-panel-description>
<button class="edit-button" *ngIf="!checkStep(1)">
<md-icon class="edit-icon">mode_edit</md-icon> Edit
<md-radio-button class="user-address" [value]="'newaddress'">
<span class="address-screen">New Address</span>
</md-radio-button>
<div *ngIf="selectedAddress == 'newaddress'" class="edit-detail-template">
<address-screen #addrAddScreen [editMode]="'E'" [address]="newAddress" class="address-screen"></address-screen>
<button md-button mdStepperNext class="save-button" *ngIf="editForm" [disabled]="!editForm.valid || !editForm.dirty" (click)="saveAddress();">
SAVE AND DELIVER HERE
</button>
</md-panel-description>
</md-expansion-panel-header>
<ng-container *ngTemplateOutlet="userAddress"></ng-container>
</md-expansion-panel>
<md-expansion-panel [expanded]="checkStep(2)" (opened)="setStep(2)" (closed)="resetStep(2);" hideToggle="true">
<md-expansion-panel-header [ngClass]="checkStep(2) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'35px'">
<md-panel-title [style.color]="checkStep(2) ? 'white' : 'black'">
<md-icon *ngIf="!checkStep(2)" class="check-icon">check_circle</md-icon>
<span *ngIf="checkStep(2)" class="panel-selected-icon">3</span>
Review Order({{(cartItems | async)?.length}} Items)
</md-panel-title>
<md-panel-description>
<button class="edit-button" *ngIf="!checkStep(2)">
<md-icon class="edit-icon">mode_edit</md-icon> Edit
<button md-button (click)="selectedAddress = addressList[0]">
Cancel
</button>
</md-panel-description>
</md-expansion-panel-header>
</div>
</md-radio-group>
</form>
</md-step>
<md-step [stepControl]="loginFormGroup">
<ng-template mdStepLabel>Review Order({{cartItems.length}} Items)</ng-template>
<ng-container *ngTemplateOutlet="reviewOrder"></ng-container>
<div>
<button class="save-button" style="float: right;margin: 10px;" md-button mdStepperNext>Continue</button>
</div>
</md-step>
</md-expansion-panel>
<md-expansion-panel [expanded]="checkStep(3)" (opened)="setStep(3)" (closed)="resetStep(3);" hideToggle="true">
<md-expansion-panel-header [ngClass]="checkStep(3) ? 'panel-selected' : ''" [expandedHeight]="'35px'" [collapsedHeight]="'35px'">
<md-panel-title [style.color]="checkStep(3) ? 'white' : 'black'">
<md-icon *ngIf="!checkStep(3)" class="check-icon">check_circle</md-icon>
<span *ngIf="checkStep(3)" class="panel-selected-icon">4</span>
Payment Method
</md-panel-title>
<md-panel-description>
<button class="edit-button" *ngIf="!checkStep(3)">
<md-icon class="edit-icon">mode_edit</md-icon> Edit
</button>
</md-panel-description>
</md-expansion-panel-header>
<ng-container *ngTemplateOutlet="usercards"></ng-container>
<md-step [stepControl]="cardFormGroup">
<ng-template mdStepLabel>Payment Method</ng-template>
<ng-container *ngTemplateOutlet="paymentOptions"></ng-container>
</md-step>
</md-expansion-panel>
</md-accordion>
</md-vertical-stepper>
</div>
<div *ngIf="(cartItems | async)?.length > 0" class="medium-4 columns">
<div *ngIf="cartItems.length > 0" class="medium-4 columns">
<md-card>
<div class="order-summary-header">Order Summary({{(cartItems | async)?.length}} Items)</div>
<div class="order-summary-header">Order Summary({{cartItems.length}} Items)</div>
<div class="orderSummary">
<div *ngFor="let item of cartItems | async" class="order-item-container">
<div *ngFor="let item of cartItems" class="order-item-container">
<span class="order-item-descr">{{item.itemHeader.itemDescr}}</span>
<span class="order-item-qty">Quantity: {{item.itemQuantity}}</span>
<span class="order-item-rate">Rs. {{item.itemHeader.itemDiscountedRate}}</span>
......@@ -121,34 +100,27 @@
</div>
<ng-template #loginPage>
<form [formGroup]="loginFormGroup">
<div class="username-field">
<md-form-field>
<input mdInput id="username" name="username" [placeholder]="'User Name'" [required]="true" type="text">
<input mdInput required formControlName="username" id="username" name="username" [placeholder]="'User Name'" [required]="true" type="text">
</md-form-field>
</div>
<div class="password-field">
<md-form-field>
<input mdInput id="password" name="password" [placeholder]="'Password'" [required]="true" type="text">
<input mdInput required formControlName="password" id="password" name="password" [placeholder]="'Password'" [required]="true" type="text">
</md-form-field>
</div>
<button md-button class="login-button">
Login
</button>
</form>
</ng-template>
<ng-template #newcard>
<card-screen #cardScreen [editMode]="'E'" [isPaymentsPage]="true" [card]="newCard" class="payment-option-title"></card-screen>
<button md-button class="payment-button" *ngIf="childForm" [disabled]="!childForm.valid" (click)="executePayment();">
Pay Rs. {{totalPrice}}
</button>
<span class="ecm-pay-terms">By clicking make payment you agree with Terms & Conditions</span>
</ng-template>
<ng-template #reviewOrder>
<div *ngFor="let item of cartItems | async" class="ecm-item-container row">
<div *ngFor="let item of cartItems" class="ecm-item-container row">
<div class="large-2 columns ecm-item-img">
<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
</div>
......@@ -176,30 +148,25 @@
</div>
</ng-template>
<ng-template #userAddress>
<md-radio-group class="example-radio-group" [(ngModel)]="selectedAddress">
<md-radio-button *ngFor = "let address of addressList" class="user-address" [value]="address">
<address-screen [address]="address" class="address-screen"></address-screen>
</md-radio-button>
<md-radio-button class="user-address" [value]="'newaddress'">
<span class="address-screen">New Address</span>
<ng-template #paymentOptions>
<md-radio-group [(ngModel)]="selectedPaymntOpt">
<span *ngFor = "let card of cardList" >
<md-radio-button class="payment-option" [value]="card.lineNo">
<card-screen [card] = "card" class="payment-option-title"></card-screen>
</md-radio-button>
<div *ngIf="selectedAddress == 'newaddress'" class="edit-detail-template">
<address-screen #addrAddScreen [editMode]="'E'" [address]="newAddress" class="address-screen"></address-screen>
<button md-button class="save-button" *ngIf="editForm" [disabled]="!editForm.valid || !editForm.dirty" (click)="saveAddress();">
SAVE
<div *ngIf="selectedPaymntOpt == card.lineNo" class="cvv-form-container">
<form [formGroup]="cardFormGroup">
<div class="cvv-field">
<md-form-field [floatPlaceholder]="'never'">
<input mdInput required formControlName="cvv" [(ngModel)]="card.cvv" id="cvv" name="cvv" class="cvv-input" [placeholder]="'CVV'" type="text">
</md-form-field>
</div>
<button md-button class="payment-button" [disabled]="cardFormGroup.invalid" (click)="executePayment();">
Pay Rs. {{totalPrice}}
</button>
</form>
</div>
</md-radio-group>
</ng-template>
<ng-template #usercards>
<md-radio-group class="example-radio-group" [(ngModel)]="selectedPaymntOpt">
<md-radio-button *ngFor = "let card of cardList | async" class="payment-option" [value]="card.lineNo">
<card-screen [card] = "card" class="payment-option-title"></card-screen>
</md-radio-button>
</span>
<md-radio-button class="payment-option" [value]="'newcard'" >
<span class="payment-option-title">Credit / Debit / ATM card</span>
......@@ -211,10 +178,18 @@
<md-radio-button class="payment-option" [value]="'netbanking'" >
<span class="payment-option-title">Net Banking</span>
</md-radio-button>
<div *ngIf="selectedPaymntOpt == 'netbanking'" class="netBankingContainer">
<ng-container *ngTemplateOutlet="netBanking"></ng-container>
</div>
<md-radio-button class="payment-option" [value]="'cod'" >
<span class="payment-option-title">Cash On Delivery</span>
</md-radio-button>
<div *ngIf="selectedPaymntOpt == 'cod'" class="cod-order">
<!-- //TODO Check whether all items all applicable for COD -->
<button md-button class="payment-button"> Confirm Order </button>
</div>
<md-radio-button class="payment-option" [value]="'wallet'" >
<span class="payment-option-title">Wallet</span>
......@@ -222,3 +197,41 @@
</md-radio-group>
</ng-template>
<ng-template #newcard>
<card-screen #cardScreen [editMode]="'E'" [isPaymentsPage]="true" [card]="newCard" class="payment-option-title"></card-screen>
<button md-button class="payment-button" *ngIf="childForm" [disabled]="!childForm.valid" (click)="executePayment();">
Pay Rs. {{totalPrice}}
</button>
<span class="ecm-pay-terms">By clicking make payment you agree with Terms & Conditions</span>
</ng-template>
<ng-template #netBanking>
<div class="popular-bank-title">Popular Banks</div>
<md-radio-group>
<md-radio-button class="popular-bank" [value]="'hdfc'">
HDFC Bank
</md-radio-button>
<md-radio-button class="popular-bank" [value]="'icc'">
ICICI Bank
</md-radio-button>
<md-radio-button class="popular-bank" [value]="'sbi'">
State Bank of India
</md-radio-button>
<md-radio-button class="popular-bank" [value]="'axis'">
Axis Bank
</md-radio-button>
<md-radio-button class="popular-bank" [value]="'kotak'">
Kotak Bank
</md-radio-button>
</md-radio-group>
<button md-button class="payment-button" (click)="executePayment();">
Pay Rs. {{totalPrice}}
</button>
</ng-template>
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.ts
View file @ 4fbfd1f7
import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, Validators,NgForm,NgModel } from '@angular/forms';
import { FormBuilder, Validators,NgForm,NgModel,FormGroup } from '@angular/forms';
import { ItemDetail } from '../../ecm-model/product-detail-model';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Location } from '@angular/common';
import { MdSnackBar } from '@angular/material';
import {MatVerticalStepper} from '@angular/material/stepper';
import { Store } from '@ngrx/store';
import {AppState} from '../../ecm-store/reducers';
......@@ -29,16 +30,15 @@ export class EcmCheckoutComponent implements OnInit {
@ViewChild('userForm') currentForm: NgForm;
@Input() unAuthorized: boolean = false;
userForm: NgForm;
checked = false;
cartItemsDetail: ItemDetail[];
totalPrice:number = 0;
activeNGForm: NgForm;
cartItems: Observable<ItemDetail[]>;
cartItems;
userData: any;
selectedStep;
@ViewChild( 'cardScreen' ) child: CardScreenComponent;
@ViewChild('addrAddScreen') addScreen: AddressScreenComponent;
@ViewChild('stepper') stepper: MatVerticalStepper;
cardList;
newCard: Card = new Card();
selectedPaymntOpt;
......@@ -46,10 +46,15 @@ export class EcmCheckoutComponent implements OnInit {
newAddress: Address = new Address();
selectedAddress: Address;
userInfo;
cvv;
public childForm;
public editForm;
constructor(private formBuilder: FormBuilder, private store: Store<AppState>,public checkoutService: EcmCheckoutService,private _location: Location, private cartActions: CartActions, public breadcrumbSerivce: Breadcrumbs, private cardActions: SavedCardAction, private profileActions: ProfileActions, private addressActions: AdressAction, public snackBar: MdSnackBar) {
loginFormGroup: FormGroup;
addressFormGroup: FormGroup;
cardFormGroup: FormGroup;
constructor(private formBuilder: FormBuilder, private store: Store<AppState>,public checkoutService: EcmCheckoutService,private _location: Location, private cartActions: CartActions, public breadcrumbSerivce: Breadcrumbs, private cardActions: SavedCardAction, private profileActions: ProfileActions, private addressActions: AdressAction, public snackBar: MdSnackBar, private _formBuilder: FormBuilder) {
this.store.dispatch(this.profileActions.loadProfile());
this.store.dispatch(this.addressActions.loadAddress());
this.store.dispatch(this.cardActions.loadSavedCards());
......@@ -57,11 +62,7 @@ export class EcmCheckoutComponent implements OnInit {
ngOnInit() {
window.scrollTo(0,0);
var userInfo = localStorage.getItem( 'userInfo' );
console.log( 'EcmUserOptionComponent getUserInfo ::' + userInfo );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
this.userData = JSON.parse( userInfo );
}
this.createUserData();
this.getCartItems();
let breadcrumb = [{label: 'Home', url: '/home'}, {label: 'Checkout', url: 'javascript:void(0)'}];
......
ecm/Angular/ProteusECM/trunk/src/app/user-card/card-manager/card-screen/card-screen.component.ts
View file @ 4fbfd1f7
......@@ -46,10 +46,6 @@ export class CardScreenComponent implements OnInit {
cvv: ['', [<any>Validators.required]]
});
if(!this.isPaymentsPage) {
this.card.cvv = "123";
}
if(this.editMode == 'V'){
this.getCardDetails(this.card.acctNumber);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment