Commit 54140570 authored by prumde's avatar prumde

Updated


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174501 ce508802-f39f-4f6c-b175-0d175dae99d5
parent db160178
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
<div *ngIf="category" class="ecm-card" (click)="viewCategories()"> <div *ngIf="category" class="ecm-card" (click)="viewCategories()">
<!-- <img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image"> --> <!-- <img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image"> -->
<ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'"></ecm-image> <ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-footer"> <div class="ecm-card-footer">
<ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'"></ecm-image> <ecm-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-info"> <div class="ecm-card-info">
<span class="ecm-card-info-title">{{category.shDescr}}</span> <span class="ecm-card-info-title">{{category.shDescr}}</span>
<span class="ecm-card-info-subhead">{{category.descr}}</span> <span class="ecm-card-info-subhead">{{category.descr}}</span>
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
<div *ngIf="subcategory" class="ecm-card" (click)="viewProducts()"> <div *ngIf="subcategory" class="ecm-card" (click)="viewProducts()">
<!-- <img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">--> <!-- <img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">-->
<ecm-image [refId]="subcategory.scatCode + ':' + subcategory.catCode" [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'"></ecm-image> <ecm-image [refId]="subcategory.scatCode + ':' + subcategory.catCode" [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-footer"> <div class="ecm-card-footer">
<ecm-image [refId]='subcategory.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'"></ecm-image> <ecm-image [refId]='subcategory.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></ecm-image>
<div class="ecm-card-info"> <div class="ecm-card-info">
<span class="ecm-card-info-title">{{subcategory.shDescr}}</span> <span class="ecm-card-info-title">{{subcategory.shDescr}}</span>
<span class="ecm-card-info-subhead">{{subcategory.descr}}</span> <span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
......
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
<div *ngIf="!attachType" class="img-loading" #loadingImage></div> <div *ngIf="!attachType" class="img-loading" #loadingImage></div>
<div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div> <div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div>
<img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage /> <!-- <img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage /> -->
<img *ngIf="attachType == 'Icon'" [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetImage /> <!-- <img *ngIf="attachType == 'Icon'" [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetImage /> -->
<div *ngIf=" attachType == 'Image' " class="ecm-image" #targetAttachImage></div>
<div *ngIf=" attachType == 'Icon' " [ngClass]="isSmallIcon ? 'ecm-small-image-icon' : 'ecm-image-icon'" #targetAttachImage></div>
\ No newline at end of file
...@@ -33,13 +33,15 @@ export class EcmImageComponent implements OnInit, AfterViewChecked { ...@@ -33,13 +33,15 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
{ {
if( this.attachType ) if( this.attachType )
{ {
this.initImage(this.object,this.refSer, this.refId, this.attachType); //this.initImage(this.object,this.refSer, this.refId, this.attachType);
} }
else else
{ {
//this.initAttachImage(this.object,this.refSer, this.refId, 'V', this.isSingleImage, this.height, this.width); ////this.initAttachImage(this.object,this.refSer, this.refId, 'V', this.isSingleImage, this.height, this.width);
this.initSingleImage(this.object,this.refSer, this.refId); //this.initSingleImage(this.object,this.refSer, this.refId);
this.attachType = "";
} }
this.initSingleImage(this.object,this.refSer, this.refId);
} }
//192.168.0.222:9090/ibase/rest/E12ExtService/getAttachDocument? //192.168.0.222:9090/ibase/rest/E12ExtService/getAttachDocument?
...@@ -113,7 +115,8 @@ export class EcmImageComponent implements OnInit, AfterViewChecked { ...@@ -113,7 +115,8 @@ export class EcmImageComponent implements OnInit, AfterViewChecked {
REF_SER : refSer, REF_SER : refSer,
REF_ID : refId,//ITEM_CODE REF_ID : refId,//ITEM_CODE
HOST_URL : "", HOST_URL : "",
DOC_TYPE : "", //DOC_TYPE : "",
DOC_TYPE : this.attachType,
IS_HOSTED_MODE : true || false, IS_HOSTED_MODE : true || false,
ENABLE_SINGLE_IMAGE : true ENABLE_SINGLE_IMAGE : true
}, this, 'imageCallback'); }, this, 'imageCallback');
......
md-card {
margin: 10px 20px;
padding: 0;
}
.checkout-page { .checkout-page {
margin-top: 70px; margin-top: 70px;
} }
.medium-btn { .check-icon {
color: rgba(49, 184, 105, 0.92);
font-size: 26px;
line-height: 35px;
padding-right: 10px;
padding-left: 5px;
height: 35px;
}
.edit-button {
display: inline-block; display: inline-block;
box-sizing: border-box; height: 28px;
border: 2px solid mediumvioletred; line-height: 30px;
background-color: #FFF;
font-size: 14px;
font-weight: 500;
color: #202020;
margin: 0;
left: 14px;
padding: 2px 47px;
text-align: center; text-align: center;
text-decoration: none; background: #fff;
text-transform: uppercase; color: mediumvioletred !important;
border-radius: 0; padding-right: 20px;
outline: none; font-size: 12px;
-webkit-appearance: none; font-weight: bold;
position: relative; margin-right: 15px;
top: 140px;
} }
.head { .edit-icon{
font-size: 18px; font-size: 16px;
display: block; vertical-align: sub;
padding-left: 20px;
padding-right: 20px;
} }
.medium-btn:hover {
background-color: mediumvioletred; .right-panel-sec {
cursor: pointer; display: inline-block;
color: white; width: 65%;
padding-left: 5px;
} }
.head-Shipping { .user-emailid {
font-size: 18px; padding-top: 5px;
}
.user-address {
display: block; display: block;
padding-left: 20px; font-size: 13px;
padding-right: 20px; padding-bottom: 20px;
} }
.shippingaddress {
position: relative; .edit-section {
top: 9px; width: 34%;
text-align: right;
display: inline-block;
} }
.Country {
position: relative; .collapse-panel {
top: 8px; min-height: 35px;
padding: 6px 0;
color: #787878;
font-size: 17px;
} }
.select-country { .edit-panel {
width: calc(100% - 20px);
margin: 20px 20px 20px 25px;
} }
.billingAddress { .panel-selected {
background-color: rgba(49, 184, 105, 0.92) !important;
color: white;
}
.panel-selected:HOVER {
background-color:rgba(49, 184, 105, 0.92) !important;
color: white;
} }
.countryValue { .panel-selected-icon {
font-size: 18px; height: 22px;
display: block; width: 22px;
padding-left: 20px; display: inline-block;
padding-right: 20px; background-color: white;
border-radius: 100%;
text-align: center;
line-height: 24px;
font-size: 12px;
color: black;
margin: 6px 10px 6px 6px;
} }
.order-summary-header {
text-align: center;
padding: 12px;
border-bottom: 1px solid #f3f3f3;
font-weight: 700;
font-size: 16px;
}
.orderSummary { .orderSummary {
padding: 0 15px;
}
.order-item-container {
padding: 15px 0;
border-bottom: 1px solid #f3f3f3;
color: #787878;
font-weight: 700;
} }
.order {
.order-item-descr {
display: block; display: block;
font-size: 18px; padding-bottom: 15px;
padding: 10px;
} }
.orderItems{
display: block; .order-item-qty {
top: 34px; display: inline-block;
padding: 10px; width: 49%;
} }
.totalCost{
display: block; .order-item-rate {
top: 50px; display: inline-block;
padding: 10px; width: 49%;
text-align: right;
color: black;
} }
.expiryDetails{ .order-total-container {
font-size: 18px; padding: 12px;
color: #787878;
font-weight: 700;
} }
.payment {
padding-right: 20px; .order-total-title {
padding-left: 20px; display: inline-block;
display: block;
font-size: 18px;
} }
.billing-add-title { .order-shipping-title {
padding-right: 20px; display: inline-block;
padding-left: 20px; }
.order-amount-title {
display: inline-block;
}
.order-total-price {
display: inline-block;
text-align: right;
float: right;
}
.order-shipping-price {
display: inline-block;
float: right;
color: green;
}
.total-amt-container, .shipping-detl-container {
padding-bottom: 5px;
}
.amt-payble-container {
color: black;
padding-top: 10px;
font-size: 16px;
}
.order-amnt-pyble {
display: inline-block;
float: right;
}
.ecm-secure-payment {
margin: 20px;
padding: 0 15px;
color: #787878;
}
.secure-icon {
font-size: 25px !important;
display: inline-block;
width: 25px;
vertical-align: top;
padding: 4px 0;
}
.secure-payment-info{
font-size: 17px;
display: inline-block;
width: calc(100% - 30px);
line-height: initial;
padding-left: 5px;
}
.payment-option-title{
display: block; display: block;
padding-left: 12px;
font-size: 18px; font-size: 18px;
} }
/* .mat-select-trigger { */ .address-panel {
/* font-size: 19px; */ }
/* } */
.userEmail { .user-name {
display: block; display: block;
margin-left: 20px; color: black;
margin-right: 20px; font-weight: 700;
} }
.userInfo {
.payment-option{
display: block; display: block;
margin-left: 20px; border-bottom: 1px solid #f3f3f3;
margin-right: 20px; padding: 15px 0;
padding-left: 15px;
} }
.userAdress {
.user-address{
display: block; display: block;
margin-left: 20px; color: #787878;
margin-right: 20px; line-height: initial;
} }
.userCity {
.address-screen {
display: block; display: block;
margin-left: 20px; padding-left: 12px;
margin-right: 20px;
} }
.userState {
display: block; .edit-detail-template {
margin-left: 20px; padding: 20px 15px 15px 40px;
margin-right: 20px;
} }
.userPostal {
display: block; .payment-button {
width: 200px;
height: 50px;
font-size: 18px;
line-height: 46px;
text-align: center;
border-radius: 2px;
position: relative;
padding: 0;
margin: 38px 0 0px 0;
background: mediumvioletred;
color: #fff;
font-weight: 700;
margin: 0 12px;
} }
.Cardholder {
margin-left: 20px; .login-button {
margin-right: 20px; width: 160px;
height: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
border-radius: 2px;
position: relative;
padding: 0;
background: mediumvioletred;
color: #fff;
font-weight: 700;
margin: 0 12px;
} }
.CardNumber {
margin-left: 20px; .save-button {
margin-right: 20px; display: inline-block;
height: 40px;
line-height: 40px;
background: mediumvioletred;
color: #fff !important;
max-width: 190px;
text-align: center;
box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
border-radius: 3px;
min-width: 120px;
font-weight: 700;
margin: 0 12px 0 40px;
}
.username-field, .password-field{
width: 200px !important;
display: block;
left: calc(50% - 100px);
} }
.expiry-title { .payment-button[disabled], .save-button[disabled] {
padding-left: 20px; background: #e0e0e0;
padding-bottom: 20px; color: #fff;
} }
.months { .ecm-pay-terms {
margin-left: 20px; display: block;
margin-right: 20px; padding-left: 12px;
padding-top: 5px;
} }
.years { .address-screen {
margin-left: 20px; padding: 15px 40px;
margin-right: 20px;
} }
.cvv{ /* Review Order */
padding: 20px;
@media screen and (max-width: 64em) {
.columns {
padding: 0;
}
.ecm-item-container{
padding: 20px 20px !important;
}
.ecm-item-img {
left: calc(50% - 125px) !important;
}
} }
.cvv-input { @media screen and (min-width: 64em)
{
.ecm-item-info {
padding-top: 0 !important;
}
.delivery-offers {
font-size: 14px !important;
}
.link_button[_ngcontent-c1] {
float: inherit !important;
padding-left: 25px !important;
font-size: 13px;
}
.product-price {
text-align: start !important;
}
.discounted-price {
font-size: 14px !important;
}
} }
.diff-bill-chkbox { .ecm-item-container {
margin-left: 20px; border-top: 1px solid lightgray;
margin-right: 20px; padding: 20px 0;
margin: 0;
} }
.place-order-button { .ecm-item-img {
width: 100%; position: relative;
height: 50px; max-height: 250px;
font-size: 15px; max-width: 250px;
border-radius: 2px;
background: mediumvioletred;
color:#fff !important;
margin-top: 20px;
} }
.place-order-button[disabled] { .ecm-item-info {
background: #e0e0e0; padding-top: 15px;
color: #fff;
} }
.error-msg { .delivery-offers {
color: red; padding-top: 18px;
padding-left: 25px; padding-bottom: 10px;
font-size: 12px;
} }
.item-name, .item-cost, .order-summary-title, .total, .total-price { .link_button {
padding: 20px; color: mediumvioletred;
font-weight: bold;
padding: 0;
float: right;
font-size: 13px;
} }
.order-summary-title { .arrow {
text-align: left; vertical-align: middle;
padding-left: 20px; margin-left: -2px;
font-size: 21px;
} }
.total { .product-price {
padding-top: 25px; text-align: end;
padding-left: 5px;
} }
.item-cost{ .discounted-price {
width: 40%; display: block;
font-size: 10px;
}
.individual-price {
display: block;
font-size: 12px;
} }
/* md-error { */ /* Review Order End*/
/* padding-top: 12px; */
/* .example-headers-align .mat-expansion-panel-header-title, */
/* .example-headers-align .mat-expansion-panel-header-description { */
/* flex-basis: 0; */
/* } */ /* } */
.example-headers-align .mat-expansion-panel-header-description {
justify-content: flex-end;
align-items: initial;
}
/* form starting stylings ------------------------------- */ .mat-expansion-panel {
.group margin: 10px 0 !important;
{ }
position:relative;
margin-bottom:45px;
.mat-expansion-panel-header-title {
line-height: 35px;
} }
md-card { .mat-expansion-panel-header {
margin: 20px; padding: 0 !important;
}
.login-descr {
justify-content: space-between !important;
} }
...@@ -5,12 +5,18 @@ import { Observable } from 'rxjs/Observable'; ...@@ -5,12 +5,18 @@ import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { MdSnackBar } from '@angular/material';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import {AppState} from '../../ecm-store/reducers'; import {AppState} from '../../ecm-store/reducers';
import { EcmCheckoutService } from './ecm-checkout.service'; import { EcmCheckoutService } from './ecm-checkout.service';
import {CartActions} from '../../ecm-store/actions'; import {CartActions, SavedCardAction, ProfileActions, AdressAction} from '../../ecm-store/actions';
import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component'; import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component';
import { Card } from '../../user-card/card-manager/card.model';
import { Address } from '../../user-address/address-manager/address.model';
import { Item } from '../../ecm-model/product-model';
import { CardScreenComponent } from '../../user-card/card-manager/card-screen/card-screen.component';
import { AddressScreenComponent } from '../../user-address/address-manager/address-screen/address-screen.component';
@Component( { @Component( {
selector: 'ecm-checkout', selector: 'ecm-checkout',
...@@ -22,47 +28,31 @@ import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component'; ...@@ -22,47 +28,31 @@ import { Breadcrumbs } from '../../ecm-breadcrumbs/ecm-breadcrumbs.component';
export class EcmCheckoutComponent implements OnInit { export class EcmCheckoutComponent implements OnInit {
@ViewChild('userForm') currentForm: NgForm; @ViewChild('userForm') currentForm: NgForm;
@Input() unAuthorized: boolean = false;
userForm: NgForm; userForm: NgForm;
checked = false; checked = false;
cartItemsDetail: ItemDetail[]; cartItemsDetail: ItemDetail[];
totalPrice:number = 0; totalPrice:number = 0;
@Input() unAuthorized: boolean = false;
countries;
months;
years;
activeNGForm: NgForm; activeNGForm: NgForm;
cartItems: Observable<ItemDetail[]>; cartItems: Observable<ItemDetail[]>;
userData: any; userData: any;
constructor(private formBuilder: FormBuilder, private store: Store<AppState>,public checkoutService: EcmCheckoutService,private _location: Location, private cartActions: CartActions, public breadcrumbSerivce: Breadcrumbs) { @ViewChild( 'cardScreen' ) child: CardScreenComponent;
this.countries = [ @ViewChild('addrAddScreen') addScreen: AddressScreenComponent;
{ viewValue: 'India' }, cardList;
{ viewValue: 'UAE' }, newCard: Card = new Card();
{ viewValue: 'Canada' } selectedPaymntOpt;
]; addressList;
this.months = [ newAddress: Address = new Address();
{ viewValue: 'January' }, selectedAddress: Address;
{ viewValue: 'Febuary' }, userInfo;
{ viewValue: 'march' }, public childForm;
{ viewValue: 'April' }, public editForm;
{ viewValue: 'May' },
{ viewValue: 'June' },
{ viewValue: 'July' },
{ viewValue: 'August' },
{ viewValue: 'September' },
{ viewValue: 'October' },
{ viewValue: 'November' },
{ viewValue: 'December' }];
this.years = [
{ viewValue: 2017 },
{ viewValue: 2017 },
{ viewValue: 2018 },
{ viewValue: 2019 },
{ viewValue: 2020 },
{ viewValue: 2021 },
{ viewValue: 2022 }];
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) {
this.store.dispatch(this.profileActions.loadProfile());
this.store.dispatch(this.addressActions.loadAddress());
this.store.dispatch(this.cardActions.loadSavedCards());
} }
ngOnInit() { ngOnInit() {
...@@ -76,6 +66,36 @@ export class EcmCheckoutComponent implements OnInit { ...@@ -76,6 +66,36 @@ export class EcmCheckoutComponent implements OnInit {
let breadcrumb = [{label: 'Home', url: '/home'}, {label: 'Checkout', url: 'javascript:void(0)'}]; let breadcrumb = [{label: 'Home', url: '/home'}, {label: 'Checkout', url: 'javascript:void(0)'}];
this.breadcrumbSerivce.breadcrumbs = breadcrumb; this.breadcrumbSerivce.breadcrumbs = breadcrumb;
this.cardList = this.store.select('savedCards');
this.userInfo = this.store.select('profileInfo');
//this.addressList = this.store.select('Address');
this.store.select('Address').subscribe( addressList => {
console.log( 'loadUser addressList >> ', addressList );
this.addressList = addressList;
this.selectedAddress = addressList[0];
});
this.cardList.subscribe( cardList => {
console.log( 'loadUser cardList >> ', cardList );
if(cardList[0]){
this.selectedPaymntOpt = cardList[0].lineNo;
}
});
if(this.checkUser() == 'undefined' && this.checkUser() == null && this.checkUser() == 'null'){
this.step = 0;
}
}
ngAfterViewChecked(): void {
if(this.child){
this.childForm = this.child.cardForm;
}
if(this.addScreen){
this.editForm = this.addScreen.addressForm;
}
} }
onSubmit(data) { onSubmit(data) {
...@@ -124,6 +144,113 @@ export class EcmCheckoutComponent implements OnInit { ...@@ -124,6 +144,113 @@ export class EcmCheckoutComponent implements OnInit {
} }
); );
} }
executePayment() {
console.log('card details: ',this.newCard);
if(this.selectedPaymntOpt == 'newcard'){
}
let order = { "billAddress": this.selectedAddress };
console.log('-----order-----',order);
}
saveAddress(){
console.log('entered address',this.newAddress);
this.onAddNew(this.newAddress);
this.selectedAddress = this.newAddress;
this.newAddress = new Address();
}
increment(item : ItemDetail) {
item.itemQuantity++;
let cartData = new Item;
cartData.itemCode = item.itemCode;
cartData.itemQuantity = item.itemQuantity;
this.store.dispatch(this.cartActions.updateCart(cartData));
this.openSnackBar( 'Quantity increased of ' + item.itemHeader.itemShDescr );
}
decrement(item : ItemDetail) {
item.itemQuantity--;
let cartData = new Item;
cartData.itemCode = item.itemCode;
cartData.itemQuantity = item.itemQuantity;
this.store.dispatch(this.cartActions.updateCart(cartData));
this.openSnackBar( 'Quantity decreased of ' + item.itemHeader.itemShDescr );
}
openSnackBar( message: string ) {
this.snackBar.open( message, '', {
duration: 2000,
});
}
checkUser(){
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
return userInfo;
}
else
{
return userInfo;
}
}
step;
setStep(index: number) {
this.step = index;
}
resetStep(index: number){
if(this.step == index){
this.step = undefined;
} }
}
checkStep(index: number){
if(index == this.step){
return true;
}else {
return false;
}
}
onAddNew(address: Address)
{
let lineNo = this.getMaxLineNo();
//this.selectedAddress = lineNo;
console.log( 'loadUser addressList >> ', lineNo);
address.lineNo = lineNo+'';
address.userName = address.firstName + " " + address.lastName;
console.log('On Add new Click the userAddress name is ', address.userName);
this.addressList.push( address );
console.log('On Save Click From Add New ', address);
this.store.dispatch(this.addressActions.addNewAdddress(address));
}
getMaxLineNo() : number {
let maxLineNo = 0;
for( let address of this.addressList){
let addrLineNo : number = Number(address.lineNo);
if(addrLineNo > maxLineNo){
maxLineNo = addrLineNo;
}
}
console.log('maxLineno--',maxLineNo);
return maxLineNo + 1;
}
}
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
/* width: calc( 100% - 350px); */ /* width: calc( 100% - 350px); */
width: 70%; width: 70%;
left: 25px; left: 25px;
max-height: 450px; /* max-height: 450px; */
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<md-accordion> <md-accordion>
<ng-template ngFor let-link [ngForOf]="navLinks" > <ng-template ngFor let-link [ngForOf]="navLinks" >
<md-expansion-panel hideToggle="true" [expanded] = "link.isOpen" (closed) ="link.isOpen = false;" (opened) = "selectLink(link); "> <md-expansion-panel hideToggle="true" [expanded] = "link.isOpen" (closed) ="link.isOpen = false;" (opened) = "selectLink(link); ">
<md-expansion-panel-header class= "expannd-panel-header" [ngClass]="{selected: link.isOpen}"> <md-expansion-panel-header class= "expannd-panel-header" [ngClass]="{selected: link.isOpen}" [expandedHeight]="'60px'" [collapsedHeight]="'60px'">
<md-panel-title> <md-panel-title>
{{link.name}} {{link.name}}
</md-panel-title> </md-panel-title>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<div class="row"> <div class="row">
<form #userAddress="ngForm"> <form #userAddress="ngForm">
<div class="user-current-location" > <div class="user-current-location large-12 columns">
<button class="user-location-container"> <button class="user-location-container">
<i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span> <i class="material-icons user-location-icon">&#xE0C8;</i> <span (click)="updateuserLocation();" class="user-location-link"> Use current location </span>
</button> </button>
......
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
color: mediumvioletred !important; color: mediumvioletred !important;
min-width: 200px; min-width: 200px;
margin: 12px; margin: 12px;
font-weight: 700;
} }
......
import { Component,Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@angular/core'; import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Card } from './card.model'; import { Card } from './card.model';
import { IScreenEditor } from '../screen-editor'; import { IScreenEditor } from '../screen-editor';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MdDialog, MdDialogRef } from '@angular/material';
...@@ -6,7 +6,11 @@ import { MdDialog, MdDialogRef } from '@angular/material'; ...@@ -6,7 +6,11 @@ import { MdDialog, MdDialogRef } from '@angular/material';
import { CardScreenComponent } from './card-screen/card-screen.component'; import { CardScreenComponent } from './card-screen/card-screen.component';
import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component'; import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component';
@Component({ import { Observable } from 'rxjs/Observable';
declare var require: any;
@Component( {
selector: 'card-manager', selector: 'card-manager',
templateUrl: './card-manager.component.html', templateUrl: './card-manager.component.html',
styleUrls: ['./card-manager.component.css'], styleUrls: ['./card-manager.component.css'],
...@@ -15,31 +19,32 @@ import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component'; ...@@ -15,31 +19,32 @@ import { ECMConfirmDialog } from '../../ecm-view/ecm-cart/ecm-cart.component';
export class CardEditor implements OnInit, IScreenEditor { export class CardEditor implements OnInit, IScreenEditor {
@Input() editorId : string; @Input() editorId: string;
@Input() editMode : string = 'V'; @Input() editMode: string = 'V';
@Input() card : Card; @Input() card: Card;
@Output() onDelete : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onDelete: EventEmitter<Card> = new EventEmitter<Card>();
@Output() onAddNew : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onAddNew: EventEmitter<Card> = new EventEmitter<Card>();
@Output() onSave : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onSave: EventEmitter<Card> = new EventEmitter<Card>();
@Output() onDiscard : EventEmitter<Card> = new EventEmitter<Card>(); @Output() onDiscard: EventEmitter<Card> = new EventEmitter<Card>();
@ViewChild('cardScreen') child: CardScreenComponent; @ViewChild( 'cardScreen' ) child: CardScreenComponent;
public childForm; public childForm;
newCard : Card; newCard: Card;
oldCard : Card; oldCard: Card;
showAdd : boolean = false; showAdd: boolean = false;
addType = [ { viewValue: 'Home'},{ viewValue: 'Office/Commercial'} ]; addType = [{ viewValue: 'Home' }, { viewValue: 'Office/Commercial' }];
advance = [ { viewValue: 'Set as delivery address'},{ viewValue: 'Set as Billing address'},{ viewValue: 'Set as default'} ]; advance = [{ viewValue: 'Set as delivery address' }, { viewValue: 'Set as Billing address' }, { viewValue: 'Set as default' }];
constructor( public dialog: MdDialog ){ constructor( public dialog: MdDialog ) {
} }
ngOnInit(){ ngOnInit() {
console.log("ID", this.editorId ); console.log( "ID", this.editorId );
//this.setCardBank( this.card.acctNumber );
} }
ngAfterViewChecked(): void { ngAfterViewChecked(): void {
...@@ -48,58 +53,59 @@ export class CardEditor implements OnInit, IScreenEditor { ...@@ -48,58 +53,59 @@ export class CardEditor implements OnInit, IScreenEditor {
} }
} }
addNew(){ addNew() {
this.newCard = new Card(); this.newCard = new Card();
this.showAdd = true; this.showAdd = true;
localStorage.setItem('editorId', this.editorId ); localStorage.setItem( 'editorId', this.editorId );
} }
edit() { edit() {
this.oldCard = this.simpleClone( this.card ); this.oldCard = this.simpleClone( this.card );
this.editMode = 'E'; this.editMode = 'E';
localStorage.setItem('editorId', this.editorId ); localStorage.setItem( 'editorId', this.editorId );
} }
save(){ save() {
console.log('save', this.showAdd, this.card, this.newCard); console.log( 'save', this.showAdd, this.card, this.newCard );
if( this.showAdd ) { this.newCard.acctNumber = this.newCard.acctNumber.replace( /\D/g, '' );
this.onAddNew.emit(this.newCard);
if ( this.showAdd ) {
this.setCardType( this.newCard.acctNumber );
} }
else { else {
this.onSave.emit(this.card); this.onSave.emit( this.card );
} }
console.log('save...'); console.log( 'save...' );
}
reInitialize() {
this.showAdd = false; this.showAdd = false;
this.newCard = new Card(); this.newCard = new Card();
localStorage.removeItem('editorId'); localStorage.removeItem( 'editorId' );
if( this.editMode == 'E'){ if ( this.editMode == 'E' ) {
this.editMode = 'V'; this.editMode = 'V';
} }
} }
cancel(){ cancel() {
this.showAdd = false; this.showAdd = false;
//console.log('cancel', this.address, this.oldAddress); //console.log('cancel', this.address, this.oldAddress);
this.card = this.oldCard; this.card = this.oldCard;
this.newCard = new Card(); this.newCard = new Card();
localStorage.removeItem('editorId'); localStorage.removeItem( 'editorId' );
if( this.editMode == 'E'){ if ( this.editMode == 'E' ) {
this.editMode = 'V'; this.editMode = 'V';
} }
} }
remove(){ remove() {
this.onDelete.emit(this.card); this.onDelete.emit( this.card );
} }
confirmDialog( item: any ) { confirmDialog( item: any ) {
let dialogRef = this.dialog.open( ECMConfirmDialog,{ let dialogRef = this.dialog.open( ECMConfirmDialog, {
width:'300px', width: '300px',
height:'180px', height: '180px',
disableClose: true disableClose: true
}); });
dialogRef.componentInstance.dialogTitle = "Remove Card ?"; dialogRef.componentInstance.dialogTitle = "Remove Card ?";
...@@ -107,17 +113,44 @@ export class CardEditor implements OnInit, IScreenEditor { ...@@ -107,17 +113,44 @@ export class CardEditor implements OnInit, IScreenEditor {
dialogRef.componentInstance.cancelText = "No"; dialogRef.componentInstance.cancelText = "No";
dialogRef.componentInstance.confirmText = "Yes"; dialogRef.componentInstance.confirmText = "Yes";
dialogRef.afterClosed().subscribe( result => { dialogRef.afterClosed().subscribe( result => {
if( result == 'true') if ( result == 'true' ) {
{ this.onDelete.emit( this.card );
this.onDelete.emit(this.card);
} }
}); });
} }
simpleClone(obj: any) { simpleClone( obj: any ) {
return Object.assign({}, obj); return Object.assign( {}, obj );
} }
// setCardBank( cardNumber: string ) {
// var lookup = require( 'binlookup' )();
//
// console.log( 'cardNumber[' + cardNumber + ']' );
//
// lookup( cardNumber ).then(
// data => {
// console.log( 'credit card details', data );
// this.card.bankName = data.bank.name;
// });
// }
setCardType( cardNumber ) {
var lookup = require( 'binlookup' )();
console.log( 'cardNumber[' + cardNumber + ']' );
lookup( cardNumber ).then(
data => {
console.log( 'credit card details', data );
if ( data.type == 'credit' ) {
this.newCard.payMthdType = '0';
} else {
this.newCard.payMthdType = '1';
}
this.onAddNew.emit( this.newCard );
this.reInitialize();
});
}
} }
...@@ -48,6 +48,10 @@ ...@@ -48,6 +48,10 @@
vertical-align: middle; vertical-align: middle;
} }
.card-input-field {
width: 100%;
}
/*------------------------------- UPDATED CSS -------------------------------------------------*/ /*------------------------------- UPDATED CSS -------------------------------------------------*/
......
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</div> </div>
<div class="user-bank-info"> <div class="user-bank-info">
<div class="bname"> <div class="bname">
<span class="bname-span">HDFC BANK LTD.{{card?.bankName}}</span> <span class="bname-span">{{card?.bankName}}</span>
</div> </div>
<div class="card-number"> <div class="card-number">
<span class="bnumber-span">{{format(card?.acctNumber)}} </span> <span class="bnumber-span" #cardNumberEl>{{card?.acctNumber}}</span>
</div> </div>
<div class="cardtype"> <div class="cardtype">
<span class="ctype-span">{{card?.payServiceProvider}} </span> <span class="ctype-span">{{card?.payServiceProvider}} </span>
...@@ -24,24 +24,36 @@ ...@@ -24,24 +24,36 @@
<div class="row"> <div class="row">
<form [formGroup]="cardForm" (ngSubmit)="submitCard(cardForm)"> <form [formGroup]="cardForm" (ngSubmit)="submitCard(cardForm)">
<div class="small-6 medium-12 large-6 columns"> <div class="small-6 medium-12 large-6 columns">
<md-form-field> <md-form-field class="card-input-field">
<input mdInput formControlName="creditCard" id="cc-number" name="acctNumber" [(ngModel)]="card.acctNumber" [placeholder]="'Card Number'" [required]="true" (changeType)="changeType($event);" (setCardLength)="setCardLength($event)" type="text" autocomplete="cc-number" ccNumber> <input mdInput formControlName="creditCard" id="cc-number" name="acctNumber" [(ngModel)]="card.acctNumber" [placeholder]="'Card Number'" [required]="true" (changeType)="changeType($event);" (setCardLength)="setCardLength($event)" type="text" autocomplete="cc-number" ccNumber>
<img *ngIf="card.payServiceProvider && card.payServiceProvider!='unknown'" class="pay-svcp-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" /> <img *ngIf="card.payServiceProvider && card.payServiceProvider!='unknown'" class="pay-svcp-icon" src="/ecm/assets/images/{{card?.payServiceProvider.trim()}}.png" />
</md-form-field> </md-form-field>
</div> </div>
<div class="small-6 medium-6 large-3 columns"> <div class="small-6 medium-6 large-3 columns">
<md-form-field [floatPlaceholder]="'never'"> <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
<input mdInput formControlName="expiryMonth" id="cc-month" name="expiryMonth" [(ngModel)]="card.expiryMonth" [placeholder]="'MM'" type="number"> <input mdInput formControlName="expiryMonth" id="cc-month" name="expiryMonth" [(ngModel)]="card.expiryMonth" [placeholder]="'MM'" type="number">
</md-form-field> </md-form-field>
</div> </div>
<div class="small-6 medium-6 large-3 columns"> <div class="small-6 medium-6 large-3 columns">
<md-form-field [floatPlaceholder]="'never'"> <md-form-field [floatPlaceholder]="'never'" class="card-input-field">
<input mdInput formControlName="expiryYear" id="cc-year" name="expiryYear" [(ngModel)]="card.expiryYear" [placeholder]="'YYYY'"type="number"> <input mdInput formControlName="expiryYear" id="cc-year" name="expiryYear" [(ngModel)]="card.expiryYear" [placeholder]="'YYYY'"type="number">
</md-form-field> </md-form-field>
</div> </div>
<div class="small-6 medium-12 large-6 columns"> <div class="small-6 medium-12 large-6 columns">
<bb-textbox formControlName="acctName" [id]="'cc-name'" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'"></bb-textbox> <!-- <bb-textbox formControlName="acctName" [id]="'cc-name'" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'"></bb-textbox> -->
<md-form-field class="card-input-field">
<input mdInput formControlName="acctName" id="cc-name" name="acctName" [(ngModel)]="card.acctName" [placeholder]="'Cardholder Name'">
</md-form-field>
</div>
<input *ngIf="!isPaymentsPage" formControlName="cvv" type="hidden" [(ngModel)]="card.cvv">
<div class="small-6 medium-6 large-3 columns" *ngIf="isPaymentsPage">
<md-form-field [floatPlaceholder]="'never'" class="card-input-field">
<input mdInput formControlName="cvv" id="cvv" name="cvv" [(ngModel)]="card.cvv" [placeholder]="'CVV'"type="number">
</md-form-field>
</div> </div>
</form> </form>
</div> </div>
......
import { Component, OnInit, Input, ViewChild } from '@angular/core'; import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { Card } from '../card.model'; import { Card } from '../card.model';
import { NgForm, NgModel, FormBuilder, FormGroup, NgModelGroup, Validators } from '@angular/forms'; import { NgForm, NgModel, FormBuilder, FormGroup, NgModelGroup, Validators } from '@angular/forms';
...@@ -8,6 +8,10 @@ import { AppState } from '../../../ecm-store/reducers'; ...@@ -8,6 +8,10 @@ import { AppState } from '../../../ecm-store/reducers';
import { CreditCardValidator } from 'base-blocks'; import { CreditCardValidator } from 'base-blocks';
import { CreditCard } from './credit-card';
declare var require: any;
@Component( { @Component( {
selector: 'card-screen', selector: 'card-screen',
templateUrl: './card-screen.component.html', templateUrl: './card-screen.component.html',
...@@ -17,29 +21,51 @@ export class CardScreenComponent implements OnInit { ...@@ -17,29 +21,51 @@ export class CardScreenComponent implements OnInit {
@Input() editMode: string = 'V'; @Input() editMode: string = 'V';
@Input() card: Card; @Input() card: Card;
@Input() isPaymentsPage: boolean = false;
//@ViewChild('savecard') form: NgForm; //@ViewChild('savecard') form: NgForm;
@ViewChild('cardNumberEl') cardNumberEl: ElementRef;
public target;
cardForm: FormGroup; cardForm: FormGroup;
cardLength = 16; cardLength = 16;
currentTime = new Date(); currentTime = new Date();
currentYear: number = this.currentTime.getFullYear(); currentYear: number = this.currentTime.getFullYear();
constructor( private store: Store<AppState>, private _fb: FormBuilder ) { } cardDetails;
constructor( private store: Store<AppState>, private _fb: FormBuilder ){}
ngOnInit() { ngOnInit() {
this.cardForm = this._fb.group({ this.cardForm = this._fb.group({
creditCard: ['', [<any>CreditCardValidator.validateCCNumber]], creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
expiryMonth: ['', [<any>Validators.required, <any>Validators.min(1), <any>Validators.max(12)]], expiryMonth: ['', [<any>Validators.required, <any>Validators.min(1), <any>Validators.max(12)]],
expiryYear: ['', [<any>Validators.required, <any>Validators.min(this.currentYear)]], expiryYear: ['', [<any>Validators.required, <any>Validators.min(this.currentYear)]],
acctName: ['', [<any>Validators.required]] acctName: ['', [<any>Validators.required]],
cvv: ['', [<any>Validators.required]]
}); });
this.card.acctNumber = this.replaceFullWidthChars(this.card.acctNumber.trim());
if(!this.isPaymentsPage) {
this.card.cvv = "123";
}
if(this.editMode == 'V'){
this.getCardDetails(this.card.acctNumber);
}
//this.form.addFormGroup(dir) //this.form.addFormGroup(dir)
} }
ngAfterViewInit(){
if(this.editMode == 'V'){
this.target = this.cardNumberEl.nativeElement;
this.reFormatCardNumber(this.card.acctNumber);
}
}
changeType($event){ changeType($event){
this.card.payServiceProvider = $event ; this.card.payServiceProvider = $event;
console.log('Type==>',$event); console.log('Type==>',$event);
} }
...@@ -50,34 +76,48 @@ export class CardScreenComponent implements OnInit { ...@@ -50,34 +76,48 @@ export class CardScreenComponent implements OnInit {
console.log('Card Length==>',$event); console.log('Card Length==>',$event);
} }
format(value: string) {
return value.replace(/ /g, '-');
}
submitCard(card) { submitCard(card) {
console.log('Submitted Card Data', card); console.log('Submitted Card Data', card);
} }
public replaceFullWidthChars(str) { private reFormatCardNumber(e) {
if (str === null) { let formattedValue;
str = ''; let cardNumber = this.target.innerHTML;
}
setTimeout(() => {
console.log('this.target.value',cardNumber);
let value = CreditCard.replaceFullWidthChars(cardNumber);
value = CreditCard.formatCardNumber(value);
console.log('--value--['+value+']');
formattedValue = value.replace(/ /g, '-');
this.target.selectionStart = this.target.selectionEnd = CreditCard.safeVal(value, this.target);
this.target.innerHTML = this.creditCardMask(formattedValue);
});
let chr,
idx,
fullWidth = '\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19',
halfWidth = '0123456789',
value = '',
chars = str.split('');
for (let i = 0; i < chars.length; i++) {
chr = chars[i];
idx = fullWidth.indexOf(chr);
if (idx > -1) {
chr = halfWidth[idx];
} }
value += chr;
private creditCardMask(number, character = "X"){
console.log('creditCardMask',number);
//number = number.replace(/[^0-9]+/g, ''); /*ensureOnlyNumbers*/
var firstOccurence = number.indexOf("-");
var lastOccurence = number.lastIndexOf("-");
console.log('Occurences',firstOccurence,lastOccurence);
var l = number.length;
return number.substring(0,firstOccurence+1) + character.repeat(l-8) + number.substring(lastOccurence,l);
} }
return value;
getCardDetails(cardNumber){
var lookup = require( 'binlookup' )();
console.log( 'cardNumber[' + cardNumber + ']' );
lookup( cardNumber ).then(
data => {
console.log( 'credit card details', data );
this.card.bankName = data.bank.name;
});
} }
} }
...@@ -10,7 +10,8 @@ export class Card { ...@@ -10,7 +10,8 @@ export class Card {
public expiryYear: string = '', public expiryYear: string = '',
public lineNo: string = '', public lineNo: string = '',
public payMthdType: string = '', public payMthdType: string = '',
public entityType: string = '' public entityType: string = '',
public cvv: string = ''
) { ) {
} }
} }
...@@ -55,9 +55,7 @@ export class UserCardComponent implements OnInit { ...@@ -55,9 +55,7 @@ export class UserCardComponent implements OnInit {
console.log('On Save Click From Add New--', newCard); console.log('On Save Click From Add New--', newCard);
let lineNo = this.getMaxLineNo(); let lineNo = this.getMaxLineNo();
newCard.payMthdType = "1";
newCard.lineNo = lineNo + ''; newCard.lineNo = lineNo + '';
newCard.acctNumber.trim();
console.log('cardnumber--',newCard.acctNumber); console.log('cardnumber--',newCard.acctNumber);
this.store.dispatch(this.cardActions.addNewCardSuccess(newCard)); this.store.dispatch(this.cardActions.addNewCardSuccess(newCard));
......
...@@ -240,15 +240,17 @@ function getImagePluginUI(data, caller, callback) ...@@ -240,15 +240,17 @@ function getImagePluginUI(data, caller, callback)
metadata.put(MetadataKey.OBJ_NAME, new MetadataValue(data.OBJ_NAME)); metadata.put(MetadataKey.OBJ_NAME, new MetadataValue(data.OBJ_NAME));
metadata.put(MetadataKey.REF_SERIES, new MetadataValue(data.REF_SER)); metadata.put(MetadataKey.REF_SERIES, new MetadataValue(data.REF_SER));
metadata.put(MetadataKey.REF_ID, new MetadataValue(data.REF_ID)); metadata.put(MetadataKey.REF_ID, new MetadataValue(data.REF_ID));
metadata.put(MetadataKey.DOC_TYPE, new MetadataValue(data.DOC_TYPE)); metadata.put(MetadataKey.DOC_TYPE_ATTACH_FILTER, new MetadataValue(data.DOC_TYPE));
metadata.put(MetadataKey.HOST_URL, new MetadataValue(data.HOST_URL)); metadata.put(MetadataKey.HOST_URL, new MetadataValue(data.HOST_URL));
metadata.put(MetadataKey.ENABLE_SINGLE_IMAGE, new MetadataValue(data.ENABLE_SINGLE_IMAGE)); metadata.put(MetadataKey.ENABLE_SIGNLE_IMAGE, new MetadataValue(data.ENABLE_SINGLE_IMAGE));
metadata.put(MetadataKey.IS_HOSTED_MODE, new MetadataValue(!! data.IS_HOSTED_MODE)); metadata.put(MetadataKey.IS_HOSTED_MODE, new MetadataValue(!! data.IS_HOSTED_MODE));
//
metadata.put(MetadataKey.VIEW_ONLY, new MetadataValue(true));
attchPlugin = new AttachmentsPlugin(); attchPlugin = new AttachmentsPlugin();
attchPlugin.init(metadata); attchPlugin.init(metadata);
attchPlugin.requestImageArray(function(imgArr) { attchPlugin.requestImagesArray(function(imgArr) {
console.log("On requestImageArray : caller >> imgArr["+imgArr+"][" + Object.keys(caller) + "] "); console.log("On requestImageArray : caller >> imgArr["+imgArr+"][" + Object.keys(caller) + "] ");
console.log("callback >> [" + callback + " = " + caller[callback] + "] "); console.log("callback >> [" + callback + " = " + caller[callback] + "] ");
......
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