feat(payment): Support direct cryptocurrency transfers.

Author: gtandersen

src/app/account-app/bitpay-payment-dialog.component.html

@@ -8,14 +8,22 @@ <h1 mat-dialog-title>Cryptocurrency payment <img src="/assets/payment/coinbase.s
         <p>
             You may now complete your payment via our cryptocurrency payment provider Coinbase.
         </p>
-        <p id="button">
+        <p class="button">
             <button mat-flat-button color="primary"> <a [href]="external_url">Proceed to Coinbase</a>
             </button>
         </p>
         <p>
             Processing your payment may take a little while.
             You will be notified with an email when the process is finished.
         </p>
+        <p>
+          If you prefer to transfer cryptocurrency directly you may do so here:
+        </p>
+        <p class="button">
+          <button id="payDirectly" mat-raised-button (click)="initiateCryptoPayment('crypto')" color="primary">
+	        Cryptocurrency Transfer
+          </button>
+        </p>
     </span>
     <span *ngIf="state === 'failed'">
         There was an error creating your payment. <br>

src/app/account-app/bitpay-payment-dialog.component.scss

@@ -13,6 +13,6 @@ a {
     text-decoration: none;
 }
 
-#button {
+.button {
     text-align: center;
 }

src/app/account-app/bitpay-payment-dialog.component.ts

@@ -19,10 +19,14 @@
 
 import { Component, Inject } from '@angular/core';
 import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { CartService } from './cart.service';
 import { RunboxWebmailAPI } from '../rmmapi/rbwebmail';
 
+import { ProductOrder } from './product-order';
+import { Product } from './product';
+
 export interface PaymentOption {
     id:           string;
     displayName:  string;
@@ -32,6 +36,10 @@ export interface PaymentOption {
     exchangeRate: string;
 }
 
+class CartItem extends ProductOrder {
+    product: Product;
+}
+
 @Component({
     selector: 'app-bitpay-payment-dialog-component',
     templateUrl: './bitpay-payment-dialog.component.html',
@@ -59,6 +67,8 @@ export class BitpayPaymentDialogComponent {
     };
 
     constructor(
+        private route: ActivatedRoute,
+        private router: Router,
         private cart: CartService,
         private rmmapi: RunboxWebmailAPI,
         public dialogRef: MatDialogRef<BitpayPaymentDialogComponent>,
@@ -103,4 +113,32 @@ export class BitpayPaymentDialogComponent {
         }
         this.dialogRef.close(false);
     }
+
+    domregHash: string;
+    fromUrl = false;
+
+
+    items: CartItem[] = [];
+
+    async initiateCryptoPayment(method: string) {
+        const items = this.items.map(i => {
+            return { pid: i.pid, apid: i.apid, quantity: i.quantity };
+        });
+        const currency = this.items[0].product.currency;
+        this.rmmapi.orderProducts(items, method, currency, this.domregHash).subscribe(tx => {
+            let dialogRef: MatDialogRef<any>;
+                this.router.navigateByUrl('/account/receipt/' + tx.tid);
+                if (!this.fromUrl) {
+                    this.cart.clear();
+                }
+            return;
+            
+            dialogRef.afterClosed().subscribe(paid => {
+                if (paid && !this.fromUrl) {
+                    this.cart.clear();
+                }
+            });
+        });
+    }
+
 }

src/app/account-app/shopping-cart.component.html

@@ -167,7 +167,7 @@ <h4>
           </mat-expansion-panel-header>
       	  <p>
             <button id="payDirectly" mat-raised-button (click)="initiatePayment('giro')" color="primary">
-	            Bank Transfer or Cash Payment
+	            Cryptocurrency, Bank Transfer, or Cash Payment
             </button>
           </p>
           <p>