From 39659c4373ab646f6d0e0d08027d98e6e936c429 Mon Sep 17 00:00:00 2001
From: Mondei1 <klier.nicolas@protonmail.com>
Date: Mon, 1 Feb 2021 13:06:25 +0100
Subject: [PATCH] Fix layout of expire progress bar

---
 src/app/backend.service.ts            |  8 ++++++++
 src/app/payment/payment.component.css |  5 +++--
 src/app/payment/payment.component.ts  | 15 ++++++++++++---
 src/assets/clock.svg                  |  2 +-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/backend.service.ts b/src/app/backend.service.ts
index 94096e6..e8c3e35 100644
--- a/src/app/backend.service.ts
+++ b/src/app/backend.service.ts
@@ -154,6 +154,14 @@ export class BackendService {
     });
   }
 
+  setInvoiceExpired() {
+    // Don't set expired if status is not pending
+    if (this.invoice.status !== PaymentStatus.PENDING) { return; }
+
+    this.invoice.status = PaymentStatus.TOOLATE;
+    this.invoiceUpdate.next(this.invoice);
+  }
+
   /**
    * This will notify the backend that the user just cancelled the payment.
    */
diff --git a/src/app/payment/payment.component.css b/src/app/payment/payment.component.css
index 2e46582..cd82770 100644
--- a/src/app/payment/payment.component.css
+++ b/src/app/payment/payment.component.css
@@ -223,10 +223,11 @@
 .progress div {
     vertical-align: middle;
     align-items: center;
+    padding-bottom: .5rem;
 }
 
-.progress div span {
-    padding-bottom: .5rem;
+.progress div img {
+    transform: translateY(10px);
 }
 
 .progress div * {
diff --git a/src/app/payment/payment.component.ts b/src/app/payment/payment.component.ts
index c77d51c..8a7d498 100644
--- a/src/app/payment/payment.component.ts
+++ b/src/app/payment/payment.component.ts
@@ -103,17 +103,26 @@ export class PaymentComponent implements OnInit {
     return address;
   }
 
-  updateRemainingTime() {
+  updateRemainingTime(): void {
     setInterval(() => {
       const createdAt = new Date(this.backend.invoice.createdAt);
       const dueBy = new Date(this.backend.invoice.dueBy);
+
       const timeTotal = Math.abs(dueBy.getTime() - createdAt.getTime());
       const timeLeft = Math.abs(dueBy.getTime() - Date.now());
       const timeLeftDate = new Date(timeLeft);
+      const timeLeftFormat = timeLeftDate.getMinutes() + ':' +
+        (timeLeftDate.getSeconds() < 10 ? '0' + timeLeftDate.getSeconds() : timeLeftDate.getSeconds());
 
       this.progressTime = timeLeft / timeTotal * 1000;
-      this.formatedTime = `${timeLeftDate.getMinutes()}:${timeLeftDate.getSeconds()} left`;
-    }, 500);
+      this.formatedTime = `${timeLeftFormat} left`;
+
+      // Flag invoice as expired in advance
+      if (timeLeftDate.getMinutes() === 0 && timeLeftDate.getSeconds() === 0) {
+        this.formatedTime = '00:00 left';
+        this.backend.setInvoiceExpired();
+      }
+    }, 200);
   }
 
   async get(): Promise<void> {
diff --git a/src/assets/clock.svg b/src/assets/clock.svg
index 3f6566d..5a97b0d 100644
--- a/src/assets/clock.svg
+++ b/src/assets/clock.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
   <circle cx="12" cy="12" r="9" />
   <polyline points="12 7 12 12 15 15" />