File
Implements
Metadata
| selector |
app-penalty |
| styleUrls |
./penalty.component.scss |
| templateUrl |
./penalty.component.html |
Index
Properties
|
|
|
Methods
|
|
|
HostListeners
|
|
|
HostListeners
|
window:popstate
|
window:popstate()
|
|
|
Methods
|
Async
checkout
|
checkout(e)
|
|
|
|
|
|
displayConfirmationMessage
|
Default value : () => {...}
|
|
|
|
loading
|
Default value : false
|
|
|
|
onConfirmation
|
Default value : () => {...}
|
|
|
After user confirm the book lost request should be placed, this method should be executed
This will focus on writing the relavant information on the firebase database
|
import { AngularFireFunctions } from '@angular/fire/functions';
import { Component, OnInit, HostListener } from '@angular/core';
import { UserService } from 'src/app/services/user/user.service';
import { SwalService } from 'src/app/services/swal/swal.service';
import { Borrowing } from 'src/app/models/Borrowings';
@Component({
selector: 'app-penalty',
templateUrl: './penalty.component.html',
styleUrls: ['./penalty.component.scss']
})
export class PenaltyComponent implements OnInit {
handler: any;
loading = false;
borrowings: Borrowing[];
constructor(
private aff: AngularFireFunctions,
private swal: SwalService,
private user: UserService
) {
this.borrowings = user.getAllBorrowings();
}
ngOnInit() {
this.handler = (<any>window).StripeCheckout.configure({
key: 'pk_test_pKqUR1gh4wxiZvBTN41bLsvV00ce1RDELI',
image: '../assets/img/icon.png',
locale: 'auto',
source: async source => {
this.loading = true;
const user = this.user.getCurrentUser();
const fun = this.aff.functions.httpsCallable('penaltyPayment');
fun({
source: source.id,
uid: user.uid,
amount: 250.25
})
.then(data => {
this.swal.viewSuccessMessage(
'Payment',
'Thanks for the payment wait till the confirmation'
);
console.log('data', data);
})
.catch(error => {
console.error('error', error);
this.swal.viewErrorMessage(
'Payment',
'Sorry error occured while processing the payment'
);
});
}
});
}
// Open the checkout handler
async checkout(e) {
const user = this.user.getCurrentUser();
this.handler.open({
name: 'Fireship Store',
description: 'Late book return',
amount: 250.85,
email: user.email
});
e.preventDefault();
}
// Close on navigate
@HostListener('window:popstate')
onPopstate() {
this.handler.close();
}
displayConfirmationMessage = () => {
this.swal.displayConfirmation(
'Request',
'Are you sure you want to place this book as a lost book',
this.onConfirmation
);
};
/**
* After user confirm the book lost request should be placed, this method should be executed
* This will focus on writing the relavant information on the firebase database
*/
onConfirmation = () => {
console.log('object', 'confirmed');
};
}
<ion-content class="ion-padding">
<ion-text>
Please consider this service is highly depending on library authority. They have the full right
to accept the fines. Please contact your library before initiating the payment. The penalty
payment may be rejected depending on various reasons.
</ion-text>
<div>
<div style="padding-bottom: 2vh;padding-top:10px;font-weight: bold">Overdues</div>
<div class="wrapper">
<ion-card padding>
<ion-card-title>Harry potter & Deathly Hallows</ion-card-title>
<ion-card-subtitle class="subtitle">
<div>
<span>Issue : </span>
<span>2019/05/05</span>
</div>
<div>
<span>Return: </span>
<span>2019/05/21</span>
</div>
</ion-card-subtitle>
<hr />
<ion-card-content
style="display: flex;justify-content: space-between;padding: 0;align-items: flex-end"
>
<div>
<div>
<span> Type : </span>
<span> Over due </span>
</div>
<div>
<span> No of days : </span>
<span> 30 </span>
</div>
</div>
<div>
<ion-button shape="round" (click)="checkout($event)">
<ion-icon slot="start" name="cash"></ion-icon>
Rs.250.47
</ion-button>
</div>
</ion-card-content>
</ion-card>
</div>
</div>
<mat-expansion-panel style="margin-top: 2vh;padding: 0;" expanded>
<mat-expansion-panel-header style="background-color: #056571;color: white">
File a book-lost
</mat-expansion-panel-header>
<mat-panel-description style="background-color: white;">
<div>
<ion-text style="padding-top: 5px">
Select a borrowed book to file a <b>Book Lost request</b>. The library administrative have
to accept the request and after that only you can pay the penalty using that book. Please
consider the <b>Penalty</b> may exceed the book value and it will add extra charges if it
is overdue and depending on the book
</ion-text>
<ion-list>
<ion-item *ngFor="let borrowing of borrowings">
<ion-label>{{ borrowing.title }}</ion-label>
<ion-checkbox (click)="displayConfirmationMessage()"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</mat-panel-description>
</mat-expansion-panel>
</ion-content>
.subtitle {
display: flex;
justify-content: space-between;
}
.wrapper {
background: linear-gradient(to right, red, purple);
padding: 1px;
}
ion-card {
background-color: white;
margin: 1px;
}
::ng-deep .mat-expansion-panel-body {
padding: 0 0 0 5px !important;
}
Legend
Html element with directive