Timer implemented

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { AppRoutingModule } from 'src/routes';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { CartComponent } from './cart/cart.component';
 import { PushNotificationsModule } from 'ng-push-ivy';
+import { ClipboardModule } from 'ngx-clipboard';
 
 const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
 
@@ -33,7 +34,8 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
     HttpClientModule,
     AppRoutingModule,
     SocketIoModule.forRoot(config),
-    PushNotificationsModule
+    PushNotificationsModule,
+    ClipboardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/backend.service.ts

@@ -52,13 +52,12 @@ export interface IInvoice {
   cart?: ICart[];
   totalPrice?: number;
   currency: string;
-  dueBy: Date;
+  dueBy: string;
   status?: PaymentStatus;
   email?: string;
   successUrl: string;
   cancelUrl: string;
-  createdAt?: number;
+  createdAt: string;
-
 }
 
 @Injectable({
@@ -74,9 +73,10 @@ export class BackendService {
     paymentMethods: [],
     receiveAddress: '',
     currency: 'USD',
-    dueBy: new Date(),
+    dueBy: '',
     successUrl: '',
-    cancelUrl: ''
+    cancelUrl: '',
+    createdAt: ''
   };
   invoiceUpdate: BehaviorSubject<IInvoice | null>;
 

src/app/payment/payment.component.css

@@ -107,7 +107,7 @@
 .clipboard-amount {
     grid-row: 3;
 }
-/*.clipboard:hover {
+.clipboard-click {
     animation: clipboard-clicked .5s linear;
 }
 
@@ -124,7 +124,7 @@
     100% {
         transform: scale(1);
     }
-}*/
+}
 
 #target, #amount, #status {
     grid-column: 2;
@@ -209,4 +209,26 @@
 #list li h4 {
     grid-row: 2;
     grid-column: 2;
+}
+
+.progress {
+    position: absolute;
+    bottom: -11px;
+    left: 0;
+    width: 100%;
+    line-height: 1.5;
+    text-align: center;
+}
+
+.progress div {
+    vertical-align: middle;
+    align-items: center;
+}
+
+.progress div span {
+    padding-bottom: .5rem;
+}
+
+.progress div * {
+    padding: .2rem;
 }

src/app/payment/payment.component.html

@@ -19,7 +19,7 @@
 <!--
     Main view
 -->
-<div class="payment main" xyz="stagger-0.5 fade-100% down-1 ease-ease" 
+<div class="payment main" xyz="stagger-0.5 fade-100% down-1 ease-ease"
     *ngIf="!this.backend.isInvoiceRequested() && ready && !hideMain"
     [ngClass]="{invalid: status === 'Expired' || status === 'Paid too little' || status === 'Cancelled by user'}">
 
@@ -38,13 +38,23 @@
 
     <div class="data">
         <!-- Payment data -->
-        <img class="clipboard clipboard-target" src="assets/clipboard.svg" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
+        <img
+            ngxClipboard
+            [cbContent]="this.backend.invoice.receiveAddress"
+            class="clipboard clipboard-target"
+            src="assets/clipboard.svg"
+            [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
         <span id="target" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
             Send to
             <h3>{{ getReceiveAddress() }}</h3>
         </span>
 
-        <img class="clipboard clipboard-amount" src="assets/clipboard.svg" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
+        <img
+            ngxClipboard
+            [cbContent]="this.backend.getAmount()"
+            class="clipboard clipboard-amount"
+            src="assets/clipboard.svg"
+            [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
         <span id="amount" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Amount
             <h3>{{ this.backend.getAmount() }} {{ this.backend.invoice.paymentMethod }} <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}</span></h3>
         </span>
@@ -59,6 +69,15 @@
             <small *ngIf="status === 'Unconfirmed'">Confirmations: {{ this.backend.confirmations }}</small>
         </span>
     </div>
+    <div class="progress" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}" *ngIf="status === 'Pending'">
+        <div>
+            <img src="assets/clock.svg">
+            <span>{{ formatedTime }}</span>
+        </div>
+        <svg viewBox="0, 0, 1000, 10">
+            <rect [attr.width]='progressTime' height="5" fill="#fff"></rect>
+        </svg>
+    </div>
 </div>
 
 <!--

src/app/payment/payment.component.ts

@@ -18,6 +18,9 @@ export class PaymentComponent implements OnInit {
   ready = false;
   emittedNotification = false;
 
+  formatedTime = '';  // Time that will be shown to the user
+  progressTime = 0;   // This value will be used to show the progressbar
+
   // XYZ class (will be xyz-out if cart is shown for example)
   xyzClass: string;
   hideMain: boolean;
@@ -78,6 +81,8 @@ export class PaymentComponent implements OnInit {
         this.emittedNotification = true;
       }
       this.status = this.backend.getStatus();
+
+      this.updateRemainingTime();
     });
   }
 
@@ -98,6 +103,19 @@ export class PaymentComponent implements OnInit {
     return address;
   }
 
+  updateRemainingTime() {
+    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);
+
+      this.progressTime = timeLeft / timeTotal * 1000;
+      this.formatedTime = `${timeLeftDate.getMinutes()}:${timeLeftDate.getSeconds()} left`;
+    }, 500);
+  }
+
   async get(): Promise<void> {
     const res = await this.backend.setInvoice(this.paymentSelector);
     this.status = this.backend.getStatus();

src/assets/clock.svg

@@ -0,0 +1,5 @@
+<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">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="9" />
+  <polyline points="12 7 12 12 15 15" />
+</svg>