diff --git a/src/app/backend.service.ts b/src/app/backend.service.ts index c1aa87f..ea0ef07 100644 --- a/src/app/backend.service.ts +++ b/src/app/backend.service.ts @@ -128,7 +128,9 @@ export class BackendService { return new Promise(async (resolve, reject) => { if (selector === undefined || selector === 'undefined' || selector === '') { reject(); + return; } + this.http.get(this.SERVER_URL + '/invoice/' + selector, { observe: 'body', responseType: 'json' @@ -142,6 +144,24 @@ export class BackendService { }); } + cancelInvoice(): Promise { + return new Promise(async (resolve, reject) => { + if (this.invoice.selector === '') { + reject('Cannot delete invoice with empty selector.'); + return; + } + + this.http.delete(this.SERVER_URL + '/invoice/' + this.invoice.selector, { + observe: 'body', + responseType: 'json' + }).toPromise().then((invoice) => { + resolve(); + }).catch(err => { + reject(err); + }); + }); + } + setPaymentMethod(method: CryptoUnits): Promise { return new Promise(async (resolve, reject) => { if (this.invoice === null) { reject('Invoice is not set!'); return; } diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index ea17433..b8e54e4 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -30,4 +30,5 @@ float: right; cursor: pointer; grid-column: 2; + transition: .2s ease; } \ No newline at end of file diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 8d81742..25ca8e1 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,4 +1,4 @@
- Cancel payment + {{ startCancelling ? 'Are you sure?' : 'Cancel payment'}}
\ No newline at end of file diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 64cc15e..a3d509d 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -8,9 +8,36 @@ import { BackendService } from '../backend.service'; }) export class HeaderComponent implements OnInit { + startCancelling = false; + cancelProgress = 0; + cancelProgressStyle = ""; // This is the style of the cancel button + constructor(public backend: BackendService) { } ngOnInit(): void { } + cancel() { + if (!this.startCancelling) { + this.startCancelling = true; + const animation = setInterval(() => { + this.cancelProgress += 0.3; + this.cancelProgressStyle = ` + background-image: linear-gradient(90deg, rgba(255,120,120,0.3) ${this.cancelProgress.toFixed(1)}%, rgba(255,255,255,0) ${this.cancelProgress.toFixed(1)}%); + transform: scale(1.1); + `; + + if (this.cancelProgress > 100) { + clearInterval(animation); + this.startCancelling = false; + this.cancelProgress = 0; + this.cancelProgressStyle = ''; + } + }, 15); + return; + } + + this.backend.cancelInvoice(); + } + } diff --git a/src/app/pay/pay.component.css b/src/app/pay/pay.component.css index 3547da4..fc4fe1e 100644 --- a/src/app/pay/pay.component.css +++ b/src/app/pay/pay.component.css @@ -19,6 +19,10 @@ /* box-shadow: 1px 1px 112px 23px rgba(0,0,0,0.75); */ } +#header, #payment { + transition: .3s ease; +} + .smaller { min-width: 200px; width: 40vw !important; @@ -34,6 +38,10 @@ width: 100%; } + +/* + BACKGROUND ANIMATION +*/ .cube { position: absolute; top: 80vh; diff --git a/src/app/pay/pay.component.html b/src/app/pay/pay.component.html index f4158ab..1413345 100644 --- a/src/app/pay/pay.component.html +++ b/src/app/pay/pay.component.html @@ -7,6 +7,6 @@
- - + +
\ No newline at end of file diff --git a/src/app/payment/payment.component.css b/src/app/payment/payment.component.css index 1188699..e75e4df 100644 --- a/src/app/payment/payment.component.css +++ b/src/app/payment/payment.component.css @@ -74,6 +74,7 @@ } .alert p { margin: 0; + line-height: 1.8; } @keyframes coinRoll { @@ -152,7 +153,8 @@ line-height: 0; } #list li:hover { - box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.3) inset; + box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.2) inset; + padding-left: 6%; } #list li img { height: 42px; diff --git a/src/app/payment/payment.component.html b/src/app/payment/payment.component.html index 6fada5b..b7dcc52 100644 --- a/src/app/payment/payment.component.html +++ b/src/app/payment/payment.component.html @@ -1,9 +1,12 @@ -
+ +

Choose your
payment method

-

{{ this.backend.invoice.totalPrice!.toFixed(2) }} €

+

{{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ currencyPrefix() }}

    -
  • +

  • {{ this.backend.findCryptoBySymbol(coin.method) }}

    @@ -12,8 +15,14 @@
-
-
+ + +
+ +
- Send to + Send to

{{ this.backend.invoice?.receiveAddress }}

 - Amount -

{{ this.backend.getAmount() }} BTC | {{ this.backend.invoice.totalPrice!.toFixed(2) }} €

+ Amount +

{{ this.backend.getAmount() }} BTC | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ currencyPrefix() }}

 - Status + Status

{{ status }} -
+
@@ -57,6 +66,9 @@
+

This invoice expired
You cannot pay this invoice anymore. Please try to request a new invoice.

@@ -68,4 +80,8 @@

Looks like you paid not the requested amount of money.
You cannot pay twice! Since sending back funds is complicated we would like you to contact support@example.org

+
+
+

Cancelled +
This invoice has been cancelled by the user and cannot be paid anymore.

\ No newline at end of file diff --git a/src/app/payment/payment.component.ts b/src/app/payment/payment.component.ts index dc93a0c..11934ac 100644 --- a/src/app/payment/payment.component.ts +++ b/src/app/payment/payment.component.ts @@ -1,3 +1,4 @@ +import { getCurrencySymbol } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @@ -39,6 +40,10 @@ export class PaymentComponent implements OnInit { this.backend.setPaymentMethod(coin); } + currencyPrefix(): string { + return getCurrencySymbol(this.backend.invoice.currency, 'narrow'); + } + async get(): Promise { await this.backend.setInvoice(this.paymentSelector); this.backend.getConfirmation().catch();