From 37715c19026f5e6d97df162ef33020cd6059d060 Mon Sep 17 00:00:00 2001 From: Rene Vergara Date: Mon, 23 May 2022 14:14:21 -0500 Subject: [PATCH] Implement invoice display component --- package-lock.json | 148 +++++++++++++++++++++- package.json | 7 + src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 8 +- src/app/invoice/invoice.component.css | 36 ++++++ src/app/invoice/invoice.component.html | 61 +++++++++ src/app/invoice/invoice.component.spec.ts | 25 ++++ src/app/invoice/invoice.component.ts | 79 ++++++++++++ src/app/receipt.service.ts | 1 + 9 files changed, 363 insertions(+), 4 deletions(-) create mode 100644 src/app/invoice/invoice.component.css create mode 100644 src/app/invoice/invoice.component.html create mode 100644 src/app/invoice/invoice.component.spec.ts create mode 100644 src/app/invoice/invoice.component.ts diff --git a/package-lock.json b/package-lock.json index c8d9a6b..19d1389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "zgo", - "version": "0.0.0", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "zgo", - "version": "0.0.0", + "version": "1.1.0", "dependencies": { "@angular/animations": "~13.0.2", "@angular/cdk": "^12.2.8", @@ -18,11 +18,18 @@ "@angular/platform-browser": "~13.0.2", "@angular/platform-browser-dynamic": "~13.0.2", "@angular/router": "~13.0.2", + "@fortawesome/angular-fontawesome": "^0.10.2", + "@fortawesome/fontawesome-free": "^6.1.1", + "@fortawesome/fontawesome-svg-core": "^6.1.0", + "@fortawesome/free-brands-svg-icons": "^6.1.0", + "@fortawesome/free-regular-svg-icons": "^6.1.0", + "@fortawesome/free-solid-svg-icons": "^6.1.0", "@supercharge/request-ip": "^1.1.2", "angular-local-storage": "^0.7.1", "async": "^3.2.2", "coingecko-api": "^1.0.10", "easyqrcodejs": "^4.4.6", + "fortawesome": "^0.0.1-security", "material-design-icons": "^3.0.1", "mongoose": "^6.0.13", "rxjs": "~6.6.0", @@ -2246,6 +2253,83 @@ "node": ">=10.0.0" } }, + "node_modules/@fortawesome/angular-fontawesome": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.10.2.tgz", + "integrity": "sha512-VxsCAo2lK74KwD236AKAhGpiethfz9yqCViIG2iRAZqgNmuZ6ihwumjbLW32n6hV4fFvCqLcHmpngoEl3TNiOg==", + "dependencies": { + "tslib": "^2.3.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0" + } + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", + "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz", + "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz", + "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", @@ -5581,6 +5665,11 @@ } } }, + "node_modules/fortawesome": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz", + "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA==" + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -14332,6 +14421,56 @@ "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==", "dev": true }, + "@fortawesome/angular-fontawesome": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.10.2.tgz", + "integrity": "sha512-VxsCAo2lK74KwD236AKAhGpiethfz9yqCViIG2iRAZqgNmuZ6ihwumjbLW32n6hV4fFvCqLcHmpngoEl3TNiOg==", + "requires": { + "tslib": "^2.3.1" + } + }, + "@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==" + }, + "@fortawesome/fontawesome-free": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", + "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz", + "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz", + "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, "@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", @@ -16931,6 +17070,11 @@ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz", "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==" }, + "fortawesome": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz", + "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA==" + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", diff --git a/package.json b/package.json index bb615c2..dae7196 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,18 @@ "@angular/platform-browser": "~13.0.2", "@angular/platform-browser-dynamic": "~13.0.2", "@angular/router": "~13.0.2", + "@fortawesome/angular-fontawesome": "^0.10.2", + "@fortawesome/fontawesome-free": "^6.1.1", + "@fortawesome/fontawesome-svg-core": "^6.1.0", + "@fortawesome/free-brands-svg-icons": "^6.1.0", + "@fortawesome/free-regular-svg-icons": "^6.1.0", + "@fortawesome/free-solid-svg-icons": "^6.1.0", "@supercharge/request-ip": "^1.1.2", "angular-local-storage": "^0.7.1", "async": "^3.2.2", "coingecko-api": "^1.0.10", "easyqrcodejs": "^4.4.6", + "fortawesome": "^0.0.1-security", "material-design-icons": "^3.0.1", "mongoose": "^6.0.13", "rxjs": "~6.6.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e9b73dd..0d0bdac 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,6 +4,7 @@ import { ViewerComponent } from './viewer/viewer.component'; import { ReceiptComponent } from './receipt/receipt.component'; import { LoginComponent } from './login/login.component'; import { BusinessComponent } from './business/business.component'; +import { InvoiceComponent } from './invoice/invoice.component'; import { ListOrdersComponent } from './listorders/listorders.component'; import { AuthGuardService } from './auth-guard.service'; import { NodeResolverService } from './node-resolver.service'; @@ -15,6 +16,7 @@ const routes: Routes = [ { path: 'orders', component: ListOrdersComponent, canActivate: [AuthGuardService]}, { path: 'biz', component: BusinessComponent, canActivate: [AuthGuardService]}, { path: 'receipt/:orderId', component: ReceiptComponent}, + { path: 'invoice/:orderId', component: InvoiceComponent}, { path: 'login', component: LoginComponent, resolve: { response: NodeResolverService}} ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index aa6000d..0b524b7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,6 +38,8 @@ import { SearchOptionsPipe } from './searchoptions.pipe'; import { TermsComponent } from './terms/terms.component'; import { ReceiptComponent } from './receipt/receipt.component'; import { ReceiptQRComponent } from './receipt-qr/receipt-qr.component'; +import { InvoiceComponent } from './invoice/invoice.component'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @NgModule({ declarations: [ @@ -59,7 +61,8 @@ import { ReceiptQRComponent } from './receipt-qr/receipt-qr.component'; SearchOptionsPipe, TermsComponent, ReceiptComponent, - ReceiptQRComponent + ReceiptQRComponent, + InvoiceComponent ], imports: [ BrowserModule, @@ -81,7 +84,8 @@ import { ReceiptQRComponent } from './receipt-qr/receipt-qr.component'; MatStepperModule, MatAutocompleteModule, MatSlideToggleModule, - BrowserAnimationsModule + BrowserAnimationsModule, + FontAwesomeModule ], exports: [ MatIconModule diff --git a/src/app/invoice/invoice.component.css b/src/app/invoice/invoice.component.css new file mode 100644 index 0000000..150ba86 --- /dev/null +++ b/src/app/invoice/invoice.component.css @@ -0,0 +1,36 @@ +* { + font-family: 'Spartan', sans-serif; +} + +.spacer{ + flex: 1 1 auto; +} +.mat-card{ + font-family: 'Spartan', sans-serif; + border: 1px solid #FF7522; + width: 80%; + text-align: left; + margin: 5px; + max-width: 500px; +} +.mat-card-title{ + font-size: 16px; + font-weight: 700; +} +.mat-card-subtitle{ + font-size: 12px; + font-weight: 200; +} +.mat-card-content{ + font-size: 14px; + text-align: justify; +} +span.tt{ + font-family: 'Roboto-Mono', monospace; +} +img.total{ + margin-bottom:-2px; +} +.small{ + font-size: 10px; +} diff --git a/src/app/invoice/invoice.component.html b/src/app/invoice/invoice.component.html new file mode 100644 index 0000000..8cb432d --- /dev/null +++ b/src/app/invoice/invoice.component.html @@ -0,0 +1,61 @@ + + + + + + +

{{name}}

+ + +
+ + + Total: {{order.totalZec | number: '1.0-6'}} + + + {{order.timestamp | date}} + + +

Order ID: {{orderId}}

+

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

+ Payment confirmed + Payment pending +
+ + + + + + + + + + + +
+ Item + + Qty. + + Price ({{order.currency.toUpperCase()}}) +
{{item.name}}{{item.qty}}{{(item.qty * item.cost) | currency: order.currency.toUpperCase()}}
+
+
+ + +
+
+ + + Incorrect Invoice ID. + + + No information available. + + +
+ +
+ + +
diff --git a/src/app/invoice/invoice.component.spec.ts b/src/app/invoice/invoice.component.spec.ts new file mode 100644 index 0000000..7078599 --- /dev/null +++ b/src/app/invoice/invoice.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InvoiceComponent } from './invoice.component'; + +describe('InvoiceComponent', () => { + let component: InvoiceComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ InvoiceComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(InvoiceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/invoice/invoice.component.ts b/src/app/invoice/invoice.component.ts new file mode 100644 index 0000000..b9f6c36 --- /dev/null +++ b/src/app/invoice/invoice.component.ts @@ -0,0 +1,79 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ReceiptService } from '../receipt.service'; +import { Order} from '../order/order.model'; +import { Observable } from 'rxjs'; +import { faCheck, faHourglass } from '@fortawesome/free-solid-svg-icons'; + +var QRCode = require('easyqrcodejs'); +var URLSafeBase64 = require('urlsafe-base64'); +var Buffer = require('buffer/').Buffer; + +@Component({ + selector: 'app-invoice', + templateUrl: './invoice.component.html', + styleUrls: ['./invoice.component.css'] +}) +export class InvoiceComponent implements OnInit { + faCheck = faCheck; + faHourglass = faHourglass; + orderId; + public orderUpdate: Observable; + public nameUpdate: Observable; + name: string = ''; + error: boolean = false; + codeString: string = 'Test'; + + order:Order = { + address: '', + session: '', + timestamp: '', + closed: false, + currency: '', + price: 0, + total: 0, + totalZec: 0, + lines: [ + { + qty: 1, + name: '', + cost:0 + } + ] + }; + + constructor( + private _ActiveRoute:ActivatedRoute, + private router: Router, + public receiptService: ReceiptService + ) { + this.orderId = this._ActiveRoute.snapshot.paramMap.get("orderId"); + this.orderUpdate = receiptService.orderUpdate; + this.nameUpdate = receiptService.nameUpdate; + receiptService.getOrderById(this.orderId!).subscribe(response => { + if (response.status == 200){ + this.error = false; + this.codeString = `zcash:${response.body!.order.address}?amount=${response.body!.order.totalZec.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGo Order::'.concat(this.orderId!)))}`; + var qrcode = new QRCode(document.getElementById("payment-qr"), { + text: this.codeString, + logo: "/assets/zcash.png", + logoWidth: 80, + logoHeight: 80 + }); + } else { + this.error = true; + this.codeString = 'Test'; + } + }); + this.orderUpdate.subscribe(order => { + this.order = order; + }); + this.nameUpdate.subscribe(name => { + this.name = name; + }); + } + + ngOnInit(): void { + } + +} diff --git a/src/app/receipt.service.ts b/src/app/receipt.service.ts index d0b55fc..daed6a7 100644 --- a/src/app/receipt.service.ts +++ b/src/app/receipt.service.ts @@ -86,6 +86,7 @@ export class ReceiptService { this._nameUpdated.next(Object.assign({}, this.dataStore).owner.name); }); } else { + this._orderUpdated.next(Object.assign({}, this.dataStore).order); console.log('No order found'); } });