diff --git a/backend/app.js b/backend/app.js index 973f55a..5018927 100644 --- a/backend/app.js +++ b/backend/app.js @@ -540,7 +540,7 @@ app.get('/api/receipt', (req, res, next) => { }); } else { res.status(204).json({ - message: 'no session received', + message: 'no valid ID received', order: null }); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index caa0121..aa6000d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -37,6 +37,7 @@ import { BusinessComponent } from './business/business.component'; 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'; @NgModule({ declarations: [ @@ -57,7 +58,8 @@ import { ReceiptComponent } from './receipt/receipt.component'; BusinessComponent, SearchOptionsPipe, TermsComponent, - ReceiptComponent + ReceiptComponent, + ReceiptQRComponent ], imports: [ BrowserModule, diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts index b63308d..69ce473 100644 --- a/src/app/order/order.component.ts +++ b/src/app/order/order.component.ts @@ -7,6 +7,7 @@ import { UserService } from '../user.service'; import { OrderService } from './order.service'; import { CancelComponent } from '../cancel/cancel.component'; import { CheckoutComponent} from '../checkout/checkout.component'; +import { ReceiptQRComponent} from '../receipt-qr/receipt-qr.component'; @Component({ selector: 'app-order', @@ -97,8 +98,20 @@ export class OrderComponent implements OnInit{ const dialogRef = this.dialog.open(CheckoutComponent, dialogConfig); dialogRef.afterClosed().subscribe((val) => { if (val) { + const dialogConfig2 = new MatDialogConfig(); + dialogConfig2.disableClose = true; + dialogConfig2.autoFocus = true; + dialogConfig2.data = { + order: this.order._id + }; console.log('Payment confirmed!'); this.orderService.closeOrder(); + const dialogRef2 = this.dialog.open(ReceiptQRComponent, dialogConfig2); + dialogRef2.afterClosed().subscribe( val => { + if (val) { + console.log('Receipt closed.'); + } + }); } else { console.log('Returning to order'); } diff --git a/src/app/receipt-qr/receipt-qr.component.css b/src/app/receipt-qr/receipt-qr.component.css new file mode 100644 index 0000000..ef8f0ab --- /dev/null +++ b/src/app/receipt-qr/receipt-qr.component.css @@ -0,0 +1,4 @@ + +.text { + font-family: 'Spartan', sans-serif; +} diff --git a/src/app/receipt-qr/receipt-qr.component.html b/src/app/receipt-qr/receipt-qr.component.html new file mode 100644 index 0000000..0533f99 --- /dev/null +++ b/src/app/receipt-qr/receipt-qr.component.html @@ -0,0 +1,13 @@ +
+

Scan for your Receipt

+
+ + +
+
+ + + + diff --git a/src/app/receipt-qr/receipt-qr.component.spec.ts b/src/app/receipt-qr/receipt-qr.component.spec.ts new file mode 100644 index 0000000..3f54f57 --- /dev/null +++ b/src/app/receipt-qr/receipt-qr.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReceiptQRComponent } from './receipt-qr.component'; + +describe('ReceiptQRComponent', () => { + let component: ReceiptQRComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ReceiptQRComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ReceiptQRComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/receipt-qr/receipt-qr.component.ts b/src/app/receipt-qr/receipt-qr.component.ts new file mode 100644 index 0000000..bf3f3aa --- /dev/null +++ b/src/app/receipt-qr/receipt-qr.component.ts @@ -0,0 +1,38 @@ +import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; + +var QRCode = require('easyqrcodejs'); + +@Component({ + selector: 'app-receipt-qr', + templateUrl: './receipt-qr.component.html', + styleUrls: ['./receipt-qr.component.css'] +}) +export class ReceiptQRComponent implements OnInit { + receiptUrl: SafeUrl; + codeString: string = ''; + + constructor( + private dialogRef: MatDialogRef, + private sanitizer: DomSanitizer, + @Inject(MAT_DIALOG_DATA) public data: { order: string} + ) { + this.codeString = `https://zgo.cash/receipt/${data.order}`; + this.receiptUrl = this.sanitizer.bypassSecurityTrustUrl(this.codeString); + } + + ngOnInit(): void { + var qrcode = new QRCode(document.getElementById("receipt-qr"), { + text: this.codeString, + logo: "/assets/zgo-prp.png", + logoWidth: 80, + logoHeight: 80 + }); + + } + + close() { + this.dialogRef.close(true); + } +} diff --git a/src/app/receipt.service.ts b/src/app/receipt.service.ts index e28723b..7999d03 100644 --- a/src/app/receipt.service.ts +++ b/src/app/receipt.service.ts @@ -2,6 +2,8 @@ import { Injectable } from '@angular/core'; import { Subject, BehaviorSubject, Observable } from 'rxjs'; import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; import { Order } from './order/order.model'; +import { Owner } from './owner.model'; +import { UserService } from './user.service'; @Injectable({ providedIn: 'root' @@ -51,7 +53,9 @@ export class ReceiptService { }; private _orderUpdated: BehaviorSubject = new BehaviorSubject(this.dataStore.order); public readonly orderUpdate: Observable = this._orderUpdated.asObservable(); - public ownerUpdate: Observable; + public _nameUpdated: BehaviorSubject = new BehaviorSubject(this.dataStore.owner.name); + public readonly nameUpdate: Observable= this._nameUpdated.asObservable(); + public readonly ownerUpdate; private apiKey = 'Le2adeic8Thah4Aeng4daem6i'; private reqHeaders: HttpHeaders; @@ -61,19 +65,21 @@ export class ReceiptService { ) { this.reqHeaders = new HttpHeaders().set('Authorization', this.apiKey); this.ownerUpdate = userService.ownerUpdate; - this.ownerUpdate.subscribe((owner) => { - this.dataStore.owner = owner; - }); } getOrderById(id:string) { const params = new HttpParams().append('id', id); - let obs = this.http.get<{message: string, order: any}>(this.beUrl+'api/order', { headers:this.reqHeaders, params:params, observe: 'response'}); + let obs = this.http.get<{message: string, order: any}>(this.beUrl+'api/receipt', { headers:this.reqHeaders, params:params, observe: 'response'}); obs.subscribe((OrderDataResponse) => { if (OrderDataResponse.status == 200) { this.dataStore.order = OrderDataResponse.body!.order; this._orderUpdated.next(Object.assign({}, this.dataStore).order); + this.userService.getOwner(this.dataStore.order.address); + this.ownerUpdate.subscribe((owner) => { + this.dataStore.owner = owner; + this._nameUpdated.next(Object.assign({}, this.dataStore).owner.name); + }); } else { console.log('No order found'); } @@ -81,4 +87,5 @@ export class ReceiptService { return obs; } + } diff --git a/src/app/receipt/receipt.component.css b/src/app/receipt/receipt.component.css index 4f0d6ea..150ba86 100644 --- a/src/app/receipt/receipt.component.css +++ b/src/app/receipt/receipt.component.css @@ -28,3 +28,9 @@ span.tt{ font-family: 'Roboto-Mono', monospace; } +img.total{ + margin-bottom:-2px; +} +.small{ + font-size: 10px; +} diff --git a/src/app/receipt/receipt.component.html b/src/app/receipt/receipt.component.html index 56360b4..bf950f6 100644 --- a/src/app/receipt/receipt.component.html +++ b/src/app/receipt/receipt.component.html @@ -4,19 +4,40 @@ -

Name

+

{{name}}

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

receipt works! orderID:{{orderId}}

+

Order ID: {{orderId}}

+

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

+
+ + + + + + + + + + + +
+ Item + + Qty. + + Price ({{order.currency.toUpperCase()}}) +
{{item.name}}{{item.qty}}{{(item.qty * item.cost) | currency: order.currency.toUpperCase()}}
+
diff --git a/src/app/receipt/receipt.component.ts b/src/app/receipt/receipt.component.ts index 7a0988e..67e9038 100644 --- a/src/app/receipt/receipt.component.ts +++ b/src/app/receipt/receipt.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Order} from '../order/order.model'; -import { OrderService } from '../order/order.service'; +import { ReceiptService } from '../receipt.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-receipt', @@ -10,14 +11,42 @@ import { OrderService } from '../order/order.service'; }) export class ReceiptComponent implements OnInit { orderId; - //order:Order; + public orderUpdate: Observable; + public nameUpdate: Observable; + name: string = ''; + order:Order = { + address: '', + session: '', + timestamp: '', + closed: false, + currency: '', + price: 0, + total: 0, + totalZec: 0, + lines: [ + { + qty: 1, + name: '', + cost:0 + } + ] + }; constructor( private _ActiveRoute:ActivatedRoute, - public orderService: OrderService + public receiptService: ReceiptService ) { this.orderId = this._ActiveRoute.snapshot.paramMap.get("orderId"); + this.orderUpdate = receiptService.orderUpdate; + this.nameUpdate = receiptService.nameUpdate; + receiptService.getOrderById(this.orderId!); + this.orderUpdate.subscribe(order => { + this.order = order; + }); + this.nameUpdate.subscribe(name => { + this.name = name; + }); } ngOnInit(): void { diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index 5c1d436..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/assets/zgo-prp.png b/src/assets/zgo-prp.png new file mode 100644 index 0000000..75944c9 Binary files /dev/null and b/src/assets/zgo-prp.png differ