From a0b07d831583e7be197b7bb1c28d0d3908436078 Mon Sep 17 00:00:00 2001 From: Rene Vergara A Date: Sat, 23 Jul 2022 11:02:36 -0500 Subject: [PATCH] Invoice form working with notifications added --- CHANGELOG.md | 2 + src/app/invoice/invoice.component.css | 16 ++++ src/app/invoice/invoice.component.html | 40 ++++++---- src/app/notifier/notifier.component.css | 8 +- .../prompt-invoice.component.css | 43 ++++++++++- .../prompt-invoice.component.html | 77 ++++++++++++++----- .../prompt-invoice.component.ts | 28 +++++-- 7 files changed, 169 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b727f6..8a84d2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Changed +- (2022-07-22) Invoice dialog completed. Notifications to inform + successful/fail of URL copy to clipboard added. - (2022-07-22) Notifier service created - replaces snackbar used for reporting invalid viewing key. Notifier component created - used to apply custom style to message sent by Notifier service. diff --git a/src/app/invoice/invoice.component.css b/src/app/invoice/invoice.component.css index 150ba86..2bf3386 100644 --- a/src/app/invoice/invoice.component.css +++ b/src/app/invoice/invoice.component.css @@ -34,3 +34,19 @@ img.total{ .small{ font-size: 10px; } + +.invoice { + font-family: Roboto Mono !important; +} + +.invoice-title { + font-size: 19px; + font-weight: 700; + height: 20px; +} + +.invoice-detail { + font-size: 14px; + font-weight: 400; +} + diff --git a/src/app/invoice/invoice.component.html b/src/app/invoice/invoice.component.html index d371270..92c1309 100644 --- a/src/app/invoice/invoice.component.html +++ b/src/app/invoice/invoice.component.html @@ -10,32 +10,46 @@
- Total: {{order.totalZec | number: '1.0-6'}} + Total: {{order.totalZec | number: '1.08'}} {{order.timestamp | date}}

Order ID: {{orderId}}

-

Zcash Price: {{order.price | currency: order.currency.toUpperCase()}}

-
- - -
+

Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}

+
+ + + - - - - - - - + + + + +
Item + Qty. + Price ({{order.currency.toUpperCase()}})
{{item.name}}{{item.qty}}{{(item.qty * item.cost) | currency: order.currency.toUpperCase()}}
+ {{item.name}} + + {{item.qty}} + + {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} +
Payment confirmed diff --git a/src/app/notifier/notifier.component.css b/src/app/notifier/notifier.component.css index 480241d..b20252d 100644 --- a/src/app/notifier/notifier.component.css +++ b/src/app/notifier/notifier.component.css @@ -1,6 +1,6 @@ .notifier { - font-family: Spartan, sans-serif; + font-family: Roboto, sans-serif; color: black; font-size: 16px; text-align: center; @@ -21,11 +21,11 @@ } ::ng-deep .mat-snack-bar-container.error { - background: lightgray; - color: black; + background: antiquewhite; + color: red; } ::ng-deep .mat-snack-bar-container.success { - background: lightgray; + background: whitesmoke; color: black; } diff --git a/src/app/prompt-invoice/prompt-invoice.component.css b/src/app/prompt-invoice/prompt-invoice.component.css index 0b79f36..8000f07 100644 --- a/src/app/prompt-invoice/prompt-invoice.component.css +++ b/src/app/prompt-invoice/prompt-invoice.component.css @@ -1,3 +1,42 @@ -.text { - font-family: 'Spartan', sans-serif; + +::ng-deep .invoice { + font-family: "Spartan"; + background: #ff5722; + font-weight: 700; + font-size: 18px; + text-align: center; + color: white; + line-height: 20px; + padding: 10px; + } + +::ng-deep .invoice-content { + font-family: Roboto mono; + display: flex; + justify-content: center; + font-size: 16px; +} + +.copy-button { + color: dodgerblue; + font-size: 20px; + margin: auto; +} + +.urlLabel { + font-family: "Spartan"; + font-size: 14px; + color: dimgray; +} + +.urlDetail { + font-family: "Spartan"; + font-size: 14px; + color: black; +} + +.urlCopyBtn { + cursor: pointer; +} + diff --git a/src/app/prompt-invoice/prompt-invoice.component.html b/src/app/prompt-invoice/prompt-invoice.component.html index 598d131..c40f203 100644 --- a/src/app/prompt-invoice/prompt-invoice.component.html +++ b/src/app/prompt-invoice/prompt-invoice.component.html @@ -1,25 +1,64 @@ -
- Send the invoice link to your client: -
+
- - {{invoiceUrl}} - +
+ Send the invoice link to your client: +
+ + + + + + + + + +
Invoice URL: +
+
+ +
- - - - - - + +
- - + + + + +
- + + + + + + +
+ + + +
+ + + diff --git a/src/app/prompt-invoice/prompt-invoice.component.ts b/src/app/prompt-invoice/prompt-invoice.component.ts index 447f047..f983aff 100644 --- a/src/app/prompt-invoice/prompt-invoice.component.ts +++ b/src/app/prompt-invoice/prompt-invoice.component.ts @@ -1,6 +1,9 @@ import { Inject, Component, OnInit} from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { NotifierService } from '../notifier.service'; +import { faCopy } from '@fortawesome/free-solid-svg-icons'; + var URLSafeBase64 = require('urlsafe-base64'); var Buffer = require('buffer/').Buffer; @@ -9,14 +12,20 @@ var Buffer = require('buffer/').Buffer; templateUrl: './prompt-invoice.component.html', styleUrls: ['./prompt-invoice.component.css'] }) + export class PromptInvoiceComponent implements OnInit { orderId: string; invoiceUrl: string; + + // ------------------------------------ + // + faCopy = faCopy; + // ------------------------------------ constructor( - private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: {orderId: string} - ) { + private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: {orderId: string}, + private notifierService : NotifierService ) { this.orderId = data.orderId; this.invoiceUrl = 'https://app.zgo.cash/invoice/'+this.orderId; } @@ -34,13 +43,18 @@ export class PromptInvoiceComponent implements OnInit { } copyUrl() { - if (!navigator.clipboard) { - alert("Copy functionality not supported"); - } +// console.log("Inside copyUrl()"); + if (navigator.clipboard) { + }; try { navigator.clipboard.writeText(this.invoiceUrl); + this.notifierService + .showNotification("Invoice's URL copied to Clipboard!!","Close",'success'); + } catch (err) { - console.error("Error", err); +// console.error("Error", err); + this.notifierService + .showNotification("Functionality not available for your browser. Use send button instead.","Close",'error'); } } }