ECL & CLT Invoice modal should wait for payment status #710 (#881)

ECL & CLT Invoice modal should wait for payment status #710
pull/882/head
ShahanaFarooqui 3 years ago committed by GitHub
parent f7c80d33e3
commit 69fc130c89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -13,6 +13,6 @@
<style>@font-face{font-family:Roboto;src:url(Roboto-Thin.dbd56bd3357dc3617fe5.woff2) format("woff2"),url(Roboto-Thin.e7f7c82374bd0ebef14b.woff) format("woff");font-weight:100;font-style:normal;}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.a8cef84f735ef887abdc.woff2) format("woff2"),url(Roboto-ThinItalic.5dd9349c940073834e9a.woff) format("woff");font-weight:100;font-style:italic;}@font-face{font-family:Roboto;src:url(Roboto-Light.c27d89ac77468ae18f28.woff2) format("woff2"),url(Roboto-Light.d923dfafc0c5183b59aa.woff) format("woff");font-weight:300;font-style:normal;}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.506274c7228cf81cae4d.woff2) format("woff2"),url(Roboto-LightItalic.d4b8c137518d9d92bb28.woff) format("woff");font-weight:300;font-style:italic;}@font-face{font-family:Roboto;src:url(Roboto-Regular.64cfb66c866ea50cad47.woff2) format("woff2"),url(Roboto-Regular.e02e9d6ff5547f7e9962.woff) format("woff");font-weight:400;font-style:normal;}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.4dd2af1e8df532f41db8.woff2) format("woff2"),url(Roboto-RegularItalic.5ea38fff9eebef99c5df.woff) format("woff");font-weight:400;font-style:italic;}@font-face{font-family:Roboto;src:url(Roboto-Medium.1d3bced88509b0838984.woff2) format("woff2"),url(Roboto-Medium.092c6130df8fd2199888.woff) format("woff");font-weight:500;font-style:normal;}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.d620b8f53f75966fe42e.woff2) format("woff2"),url(Roboto-MediumItalic.18ff1628c628080166c1.woff) format("woff");font-weight:500;font-style:italic;}@font-face{font-family:Roboto;src:url(Roboto-Bold.92fbd4e93cf0a5dbebaa.woff2) format("woff2"),url(Roboto-Bold.73288d91c325e82a5b92.woff) format("woff");font-weight:700;font-style:normal;}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.5f600d98a73d800ae575.woff2) format("woff2"),url(Roboto-BoldItalic.6d89acbd21d7e3fbecb2.woff) format("woff");font-weight:700;font-style:italic;}@font-face{font-family:Roboto;src:url(Roboto-Black.41ed1105a6ebb8ffe34e.woff2) format("woff2"),url(Roboto-Black.937491dfcbe64ca9a9f1.woff) format("woff");font-weight:900;font-style:normal;}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.50ca4c51ebc27e7e7d2f.woff2) format("woff2"),url(Roboto-BlackItalic.2e1ee657996854c6f427.woff) format("woff");font-weight:900;font-style:italic;}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:62.5%;}body{box-sizing:border-box;margin:0;}body{height:100%;overflow:hidden;}*{margin:0;padding:0;}</style><link rel="stylesheet" href="styles.3d3ee2a46a070a00611c.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.3d3ee2a46a070a00611c.css"></noscript></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.9d260307bcfd2f845ad3.js" defer></script><script src="polyfills.a979cbbe16939013cdcf.js" defer></script><script src="main.93294ff6f3d99d835586.js" defer></script>
<script src="runtime.a3c1181536df5dde3e35.js" defer></script><script src="polyfills.a979cbbe16939013cdcf.js" defer></script><script src="main.8da5a665134445c17f59.js" defer></script>
</body></html>

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(()=>{"use strict";var e,r,t,o={},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={id:e,loaded:!1,exports:{}};return o[e].call(t.exports,t,t.exports,n),t.loaded=!0,t.exports}n.m=o,e=[],n.O=(r,t,o,a)=>{if(!t){var l=1/0;for(s=0;s<e.length;s++){for(var[t,o,a]=e[s],i=!0,d=0;d<t.length;d++)(!1&a||l>=a)&&Object.keys(n.O).every(e=>n.O[e](t[d]))?t.splice(d--,1):(i=!1,a<l&&(l=a));i&&(e.splice(s--,1),r=o())}return r}a=a||0;for(var s=e.length;s>0&&e[s-1][2]>a;s--)e[s]=e[s-1];e[s]=[t,o,a]},n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce((r,t)=>(n.f[t](e,r),r),[])),n.u=e=>e+"."+{145:"da900f009e3498908aab",336:"6cfeed7948c83c0abbc4",727:"f3636c001b27347b439b",891:"b17f2c3249588f302419"}[e]+".js",n.miniCssF=e=>"styles.3d3ee2a46a070a00611c.css",n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r={},t="rtl:",n.l=(e,o,a,l)=>{if(r[e])r[e].push(o);else{var i,d;if(void 0!==a)for(var s=document.getElementsByTagName("script"),u=0;u<s.length;u++){var c=s[u];if(c.getAttribute("src")==e||c.getAttribute("data-webpack")==t+a){i=c;break}}i||(d=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,n.nc&&i.setAttribute("nonce",n.nc),i.setAttribute("data-webpack",t+a),i.src=e),r[e]=[o];var f=(t,o)=>{i.onerror=i.onload=null,clearTimeout(p);var a=r[e];if(delete r[e],i.parentNode&&i.parentNode.removeChild(i),a&&a.forEach(e=>e(o)),t)return t(o)},p=setTimeout(f.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=f.bind(null,i.onerror),i.onload=f.bind(null,i.onload),d&&document.head.appendChild(i)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),n.p="",(()=>{var e={666:0};n.f.j=(r,t)=>{var o=n.o(e,r)?e[r]:void 0;if(0!==o)if(o)t.push(o[2]);else if(666!=r){var a=new Promise((t,a)=>o=e[r]=[t,a]);t.push(o[2]=a);var l=n.p+n.u(r),i=new Error;n.l(l,t=>{if(n.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var a=t&&("load"===t.type?"missing":t.type),l=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+a+": "+l+")",i.name="ChunkLoadError",i.type=a,i.request=l,o[1](i)}},"chunk-"+r,r)}else e[r]=0},n.O.j=r=>0===e[r];var r=(r,t)=>{var o,a,[l,i,d]=t,s=0;for(o in i)n.o(i,o)&&(n.m[o]=i[o]);if(d)var u=d(n);for(r&&r(t);s<l.length;s++)n.o(e,a=l[s])&&e[a]&&e[a][0](),e[l[s]]=0;return n.O(u)},t=self.webpackChunkrtl=self.webpackChunkrtl||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();
(()=>{"use strict";var e,r,t,o={},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={id:e,loaded:!1,exports:{}};return o[e].call(t.exports,t,t.exports,n),t.loaded=!0,t.exports}n.m=o,e=[],n.O=(r,t,o,a)=>{if(!t){var l=1/0;for(s=0;s<e.length;s++){for(var[t,o,a]=e[s],i=!0,d=0;d<t.length;d++)(!1&a||l>=a)&&Object.keys(n.O).every(e=>n.O[e](t[d]))?t.splice(d--,1):(i=!1,a<l&&(l=a));i&&(e.splice(s--,1),r=o())}return r}a=a||0;for(var s=e.length;s>0&&e[s-1][2]>a;s--)e[s]=e[s-1];e[s]=[t,o,a]},n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce((r,t)=>(n.f[t](e,r),r),[])),n.u=e=>e+"."+{145:"aadace916f80d558ef3c",336:"6cfeed7948c83c0abbc4",727:"f3636c001b27347b439b",891:"b17f2c3249588f302419"}[e]+".js",n.miniCssF=e=>"styles.3d3ee2a46a070a00611c.css",n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r={},t="rtl:",n.l=(e,o,a,l)=>{if(r[e])r[e].push(o);else{var i,d;if(void 0!==a)for(var s=document.getElementsByTagName("script"),c=0;c<s.length;c++){var u=s[c];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==t+a){i=u;break}}i||(d=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,n.nc&&i.setAttribute("nonce",n.nc),i.setAttribute("data-webpack",t+a),i.src=e),r[e]=[o];var f=(t,o)=>{i.onerror=i.onload=null,clearTimeout(p);var a=r[e];if(delete r[e],i.parentNode&&i.parentNode.removeChild(i),a&&a.forEach(e=>e(o)),t)return t(o)},p=setTimeout(f.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=f.bind(null,i.onerror),i.onload=f.bind(null,i.onload),d&&document.head.appendChild(i)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),n.p="",(()=>{var e={666:0};n.f.j=(r,t)=>{var o=n.o(e,r)?e[r]:void 0;if(0!==o)if(o)t.push(o[2]);else if(666!=r){var a=new Promise((t,a)=>o=e[r]=[t,a]);t.push(o[2]=a);var l=n.p+n.u(r),i=new Error;n.l(l,t=>{if(n.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var a=t&&("load"===t.type?"missing":t.type),l=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+a+": "+l+")",i.name="ChunkLoadError",i.type=a,i.request=l,o[1](i)}},"chunk-"+r,r)}else e[r]=0},n.O.j=r=>0===e[r];var r=(r,t)=>{var o,a,[l,i,d]=t,s=0;for(o in i)n.o(i,o)&&(n.m[o]=i[o]);if(d)var c=d(n);for(r&&r(t);s<l.length;s++)n.o(e,a=l[s])&&e[a]&&e[a][0](),e[l[s]]=0;return n.O(c)},t=self.webpackChunkrtl=self.webpackChunkrtl||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();

@ -30,12 +30,26 @@
<span class="foreground-secondary-text">{{(invoice.msatoshi/1000 || 0) | number}} Sats<ng-container *ngIf="!invoice.msatoshi"> (zero amount) </ng-container></span>
</div>
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Date Expiry</h4>
<span class="foreground-secondary-text">{{(invoice.expires_at * 1000) | date:'dd/MMM/YYYY HH:mm'}}</span>
<h4 fxLayoutAlign="start" class="font-bold-500">Amount Received</h4>
<span class="overflow-wrap foreground-secondary-text">
<span *ngIf="invoice.status !== 'unpaid'">{{invoice.msatoshi_received/1000 | number}} {{invoice.msatoshi_received ? 'Sats' : '-'}}</span>
<mat-spinner [diameter]="20" *ngIf="invoice.status === 'unpaid'"></mat-spinner>
</span>
</div>
</div>
<mat-divider class="w-100 my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Date Expiry</h4>
<span class="foreground-secondary-text">{{(invoice.expires_at * 1000) | date:'dd/MMM/YYYY HH:mm'}}</span>
</div>
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Status</h4>
<span class="overflow-wrap foreground-secondary-text">{{invoice.status | titlecase}}</span>
</div>
</div>
<mat-divider class="w-100 my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="100">
<h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
<span class="foreground-secondary-text">{{invoice.description || '-'}}</span>
@ -58,22 +72,11 @@
</div>
<mat-divider class="w-100 my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Status</h4>
<span class="overflow-wrap foreground-secondary-text">{{invoice.status | titlecase}}</span>
</div>
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Label</h4>
<span class="overflow-wrap foreground-secondary-text">{{invoice.label}}</span>
</div>
</div>
<mat-divider class="w-100 my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Amount Received</h4>
<span class="overflow-wrap foreground-secondary-text">{{invoice.msatoshi_received/1000 | number}} {{invoice.msatoshi_received ? 'Sats' : ''}}</span>
</div>
<div fxFlex="50">
<div fxFlex="50">
<h4 fxLayoutAlign="start" class="font-bold-500">Date Settled</h4>
<span class="foreground-secondary-text">{{((invoice.paid_at * 1000) | date:'dd/MMM/YYYY HH:mm') || '-'}}</span>
</div>

@ -1,21 +1,27 @@
import { Component, OnInit, Inject } from '@angular/core';
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { faReceipt, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { CLInvoiceInformation } from '../../../shared/models/alertData';
import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
import { Invoice } from '../../../shared/models/clModels';
import { Invoice, ListInvoices } from '../../../shared/models/clModels';
import { RTLState } from '../../../store/rtl.state';
import { listInvoices } from '../../store/cl.selector';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
@Component({
selector: 'rtl-cl-invoice-information',
templateUrl: './invoice-information.component.html',
styleUrls: ['./invoice-information.component.scss']
})
export class CLInvoiceInformationComponent implements OnInit {
export class CLInvoiceInformationComponent implements OnInit, OnDestroy {
public faReceipt = faReceipt;
public faExclamationTriangle = faExclamationTriangle;
@ -25,8 +31,9 @@ export class CLInvoiceInformationComponent implements OnInit {
public qrWidth = 240;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(public dialogRef: MatDialogRef<CLInvoiceInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: CLInvoiceInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar) { }
constructor(public dialogRef: MatDialogRef<CLInvoiceInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: CLInvoiceInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar, private store: Store<RTLState>) { }
ngOnInit() {
this.invoice = this.data.invoice;
@ -35,6 +42,12 @@ export class CLInvoiceInformationComponent implements OnInit {
if (this.screenSize === ScreenSizeEnum.XS) {
this.qrWidth = 220;
}
this.store.select(listInvoices).pipe(takeUntil(this.unSubs[0])).
subscribe((invoicesSeletor: { listInvoices: ListInvoices, apiCallStatus: ApiCallStatusPayload }) => {
const invoices = invoicesSeletor.listInvoices.invoices || [];
this.invoice = invoices.find((invoice) => invoice.payment_hash === this.invoice.payment_hash);
this.logger.info(invoicesSeletor);
});
}
onClose() {
@ -50,4 +63,11 @@ export class CLInvoiceInformationComponent implements OnInit {
this.logger.info('Copied Text: ' + payload);
}
ngOnDestroy() {
this.unSubs.forEach((completeSub) => {
completeSub.next(null);
completeSub.complete();
});
}
}

@ -33,8 +33,9 @@
<ng-container matColumnDef="expires_at">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Expiry Date </th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice.status === 'paid'" class="dot green" matTooltip="Settled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice.status !== 'paid'" class="dot yellow" matTooltip="Unsettled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice.status === 'paid'" class="dot green" matTooltip="Paid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice.status === 'expired'" class="dot red" matTooltip="Expired" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
{{(invoice.expires_at * 1000) | date:'dd/MMM/YYYY HH:mm'}}
</td>
</ng-container>

@ -27,7 +27,10 @@
<h4 fxLayoutAlign="start" class="font-bold-500">Amount Settled</h4>
<span class="foreground-secondary-text">
<ng-container *ngIf="invoice.amountSettled">{{invoice.amountSettled | number}} Sats</ng-container>
<ng-container *ngIf="!invoice.amountSettled">-</ng-container>
<ng-container *ngIf="!invoice.amountSettled">
<span *ngIf="invoice.status !== 'unpaid'">-</span>
<mat-spinner [diameter]="20" *ngIf="invoice.status === 'unpaid'"></mat-spinner>
</ng-container>
</span>
</div>
</div>

@ -1,20 +1,26 @@
import { Component, OnInit, Inject } from '@angular/core';
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { faReceipt, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { Invoice } from '../../../shared/models/eclModels';
import { ECLInvoiceInformation } from '../../../shared/models/alertData';
import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
import { RTLState } from '../../../store/rtl.state';
import { invoices } from '../../store/ecl.selector';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
@Component({
selector: 'rtl-ecl-invoice-information',
templateUrl: './invoice-information.component.html',
styleUrls: ['./invoice-information.component.scss']
})
export class ECLInvoiceInformationComponent implements OnInit {
export class ECLInvoiceInformationComponent implements OnInit, OnDestroy {
public faReceipt = faReceipt;
public faExclamationTriangle = faExclamationTriangle;
@ -24,8 +30,9 @@ export class ECLInvoiceInformationComponent implements OnInit {
public qrWidth = 240;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(public dialogRef: MatDialogRef<ECLInvoiceInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: ECLInvoiceInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar) { }
constructor(public dialogRef: MatDialogRef<ECLInvoiceInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: ECLInvoiceInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar, private store: Store<RTLState>) { }
ngOnInit() {
this.invoice = this.data.invoice;
@ -34,6 +41,12 @@ export class ECLInvoiceInformationComponent implements OnInit {
if (this.screenSize === ScreenSizeEnum.XS) {
this.qrWidth = 220;
}
this.store.select(invoices).pipe(takeUntil(this.unSubs[0])).
subscribe((invoicesSelector: { invoices: Invoice[], apiCallStatus: ApiCallStatusPayload }) => {
const invoices = (invoicesSelector.invoices && invoicesSelector.invoices.length > 0) ? invoicesSelector.invoices : [];
this.invoice = invoices.find((invoice) => invoice.paymentHash === this.invoice.paymentHash);
this.logger.info(invoicesSelector);
});
}
onClose() {
@ -49,4 +62,11 @@ export class ECLInvoiceInformationComponent implements OnInit {
this.logger.info('Copied Text: ' + payload);
}
ngOnDestroy() {
this.unSubs.forEach((completeSub) => {
completeSub.next(null);
completeSub.complete();
});
}
}

Loading…
Cancel
Save