Add cart view

src/app/payment/payment.component.ts

@@ -1,8 +1,8 @@
-import { getCurrencySymbol } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { BackendService, CryptoUnits } from '../backend.service';
+import { StateService } from '../state.service';
 
 @Component({
   selector: 'app-payment',
@@ -13,15 +13,21 @@ export class PaymentComponent implements OnInit {
 
   paymentSelector = '';
   confirmations = 0;
-  choosenPaymentMethod = CryptoUnits.BITCOIN;
   status: string;
   ready = false;
 
+  // XYZ class (will be xyz-out if cart is shown for example)
+  xyzClass: string;
+  hideMain: boolean;
+
   constructor(
     public backend: BackendService,
+    public state: StateService,
     private route: ActivatedRoute
   ) {
     this.status = this.backend.getStatus();
+    this.hideMain = false;
+    this.xyzClass = 'xyz-in';
   }
 
   ngOnInit(): void {
@@ -31,6 +37,20 @@ export class PaymentComponent implements OnInit {
       this.get();
     });
 
+    this.state.showCart.subscribe(cartStatus => {
+      if (cartStatus) {
+        this.xyzClass = 'xyz-out';
+        setTimeout(() => {
+          this.hideMain = true;
+        }, 700);
+      } else {
+        setTimeout(() => {
+          this.hideMain = false;
+          this.xyzClass = 'xyz-in';
+        }, 600);
+      }
+    })
+
     this.backend.invoiceUpdate.subscribe(newInvoice => {
       this.status = this.backend.getStatus();
     });
@@ -40,10 +60,6 @@ export class PaymentComponent implements OnInit {
     this.backend.setPaymentMethod(coin);
   }
 
-  currencyPrefix(): string {
-    return getCurrencySymbol(this.backend.invoice.currency, 'narrow');
-  }
-
   async get(): Promise<void> {
     await this.backend.setInvoice(this.paymentSelector);
     this.backend.getConfirmation().catch();