Begin receipt component

backend/app.js

@@ -521,6 +521,31 @@ app.get('/api/allorders', (req, res, next) => {
 	}
 });
 
+app.get('/api/receipt', (req, res, next) => {
+	console.log('Get /api/receipt');
+	if (req.query.id.length > 0) {
+		const order = ordermodel.findOne({_id: req.query.id}).then((documents) => {
+			if (documents != null) {
+				console.log(documents);
+				res.status(200).json({
+					message: 'order found!',
+					order: documents
+				});
+			} else {
+				res.status(204).json({
+					message: 'no order found!',
+					order: null
+				});
+			}
+		});
+	} else {
+		res.status(204).json({
+			message: 'no session received',
+			order: null
+		});
+	}
+});
+
 app.get('/api/order', (req, res, next) => {
 	console.log('Get /api/order');
 	if (req.query.session.length > 0) {

src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 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 { ListOrdersComponent } from './listorders/listorders.component';
@@ -13,6 +14,7 @@ const routes: Routes = [
 	{ path: 'shop', component: ViewerComponent, canActivate: [AuthGuardService]},
 	{ path: 'orders', component: ListOrdersComponent, canActivate: [AuthGuardService]},
 	{ path: 'biz', component: BusinessComponent, canActivate: [AuthGuardService]}, 
+	{ path: 'receipt/:orderId', component: ReceiptComponent},
 	{ path: 'login', component: LoginComponent, resolve: { response: NodeResolverService}}
 ];
 

src/app/app.module.ts

@@ -36,6 +36,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BusinessComponent } from './business/business.component';
 import { SearchOptionsPipe } from './searchoptions.pipe';
 import { TermsComponent } from './terms/terms.component';
+import { ReceiptComponent } from './receipt/receipt.component';
 
 @NgModule({
   declarations: [
@@ -55,7 +56,8 @@ import { TermsComponent } from './terms/terms.component';
 	ListOrdersComponent,
 	BusinessComponent,
 	SearchOptionsPipe,
-	TermsComponent
+	TermsComponent,
+ ReceiptComponent
   ],
   imports: [
     BrowserModule,

src/app/receipt.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ReceiptService } from './receipt.service';
+
+describe('ReceiptService', () => {
+  let service: ReceiptService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ReceiptService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/receipt.service.ts

@@ -0,0 +1,84 @@
+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';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReceiptService {
+	beUrl = 'http://localhost:3000/';
+	private dataStore: {order: Order, owner: Owner } = {
+		owner: {
+			_id: '',
+			name: '',
+			address: '',
+			currency: 'usd',
+			tax: false,
+			taxValue: 0,
+			vat: false,
+			vatValue: 0,
+			first: '',
+			last: '',
+			email: '',
+			street: '',
+			city: '',
+			state: '',
+			postal: '',
+			phone: '',
+			paid: false,
+			website: '',
+			country: '',
+			zats: false
+		},
+		order: {
+			address: '',
+			session: '',
+			timestamp: '',
+			closed: false,
+			currency: '',
+			price: 0,
+			total: 0,
+			totalZec: 0,
+			lines: [
+				{
+					qty: 1,
+					name: '',
+					cost:0
+				}
+			]
+		}
+	};
+	private _orderUpdated: BehaviorSubject<Order> = new BehaviorSubject(this.dataStore.order);
+	public readonly orderUpdate: Observable<Order> = this._orderUpdated.asObservable();
+	public ownerUpdate: Observable<Owner>;
+	private apiKey = 'Le2adeic8Thah4Aeng4daem6i';
+	private reqHeaders: HttpHeaders;
+
+  constructor(
+		private http: HttpClient,
+		public userService: UserService
+  ) {
+		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'});
+
+		obs.subscribe((OrderDataResponse) => {
+			if (OrderDataResponse.status == 200) {
+				this.dataStore.order = OrderDataResponse.body!.order;
+				this._orderUpdated.next(Object.assign({}, this.dataStore).order);
+			} else {
+				console.log('No order found');
+			}
+		});
+
+		return obs;
+	}
+}

src/app/receipt/receipt.component.css

@@ -0,0 +1,30 @@
+* {
+	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;
+}

src/app/receipt/receipt.component.html

@@ -0,0 +1,23 @@
+<mat-toolbar color="primary">
+	<span align="center">
+		<img class="logo" src="/assets/logo-new-white.png" height="40px" />
+	</span>
+	<span class="spacer"></span>
+	<span align="center">
+		<p class="text">Name</p>
+	</span>
+</mat-toolbar>
+<div align="center">
+<mat-card>
+	<mat-card-title>
+		Receipt
+	</mat-card-title>
+	<mat-card-subtitle>
+		Date
+	</mat-card-subtitle>
+	<mat-card-content>
+<p>receipt works! orderID:{{orderId}}</p>
+
+	</mat-card-content>
+</mat-card>
+</div>

src/app/receipt/receipt.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReceiptComponent } from './receipt.component';
+
+describe('ReceiptComponent', () => {
+  let component: ReceiptComponent;
+  let fixture: ComponentFixture<ReceiptComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ReceiptComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReceiptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/receipt/receipt.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Order} from '../order/order.model';
+import { OrderService } from '../order/order.service';
+
+@Component({
+  selector: 'app-receipt',
+  templateUrl: './receipt.component.html',
+  styleUrls: ['./receipt.component.css']
+})
+export class ReceiptComponent implements OnInit {
+	orderId;
+	//order:Order;
+
+  constructor(
+	  private _ActiveRoute:ActivatedRoute,
+	  public orderService: OrderService
+  ) {
+	  this.orderId = this._ActiveRoute.snapshot.paramMap.get("orderId");
+
+  }
+
+  ngOnInit(): void {
+  }
+
+}