++ +
diff --git a/projects/ch14/src/app/pos/pos/pos.component.ts b/projects/ch14/src/app/pos/pos/pos.component.ts index 63480938..83ad22b0 100644 --- a/projects/ch14/src/app/pos/pos/pos.component.ts +++ b/projects/ch14/src/app/pos/pos/pos.component.ts @@ -1,12 +1,57 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' +import { filter, tap } from 'rxjs/operators' +import { SubSink } from 'subsink' + +import { UiService } from '../../common/ui.service' +import { ITransaction } from '../transaction/transaction' +import { TransactionType } from '../transaction/transaction.enum' +import { TransactionService } from '../transaction/transaction.service' + +interface IEvent { + event: 'checkoutCompleted' | 'checkoutInitiated' +} +declare let dataLayer: IEvent[] @Component({ selector: 'app-pos', templateUrl: './pos.component.html', styleUrls: ['./pos.component.css'], }) -export class PosComponent implements OnInit { - constructor() {} +export class PosComponent implements OnInit, OnDestroy { + private subs = new SubSink() + currentTransaction: ITransaction + constructor( + private transactionService: TransactionService, + private uiService: UiService + ) {} + + ngOnInit() { + this.currentTransaction = { + paymentAmount: 25.78, + paymentType: TransactionType.Credit, + } as ITransaction + } + + checkout(transaction: ITransaction) { + this.uiService.showToast('Checkout initiated') + dataLayer.push({ + event: 'checkoutInitiated', + }) + this.subs.sink = this.transactionService + .processTransaction(transaction) + .pipe( + filter((tx) => tx != null || tx !== undefined), + tap((transactionId) => { + this.uiService.showToast('Checkout completed') + dataLayer.push({ + event: 'checkoutCompleted', + }) + }) + ) + .subscribe() + } - ngOnInit(): void {} + ngOnDestroy() { + this.subs.unsubscribe() + } } diff --git a/projects/ch14/src/app/pos/transaction/transaction.enum.ts b/projects/ch14/src/app/pos/transaction/transaction.enum.ts new file mode 100644 index 00000000..08f491d0 --- /dev/null +++ b/projects/ch14/src/app/pos/transaction/transaction.enum.ts @@ -0,0 +1,5 @@ +export enum TransactionType { + Cash, + Credit, + LemonCoin, +} diff --git a/projects/ch14/src/app/pos/transaction/transaction.service.spec.ts b/projects/ch14/src/app/pos/transaction/transaction.service.spec.ts new file mode 100644 index 00000000..8cc4edd5 --- /dev/null +++ b/projects/ch14/src/app/pos/transaction/transaction.service.spec.ts @@ -0,0 +1,17 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { TestBed, inject } from '@angular/core/testing' + +import { TransactionService } from './transaction.service' + +describe('TransactionService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [TransactionService], + }) + }) + + it('should be created', inject([TransactionService], (service: TransactionService) => { + expect(service).toBeTruthy() + })) +}) diff --git a/projects/ch14/src/app/pos/transaction/transaction.service.ts b/projects/ch14/src/app/pos/transaction/transaction.service.ts new file mode 100644 index 00000000..5471c729 --- /dev/null +++ b/projects/ch14/src/app/pos/transaction/transaction.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core' +import { BehaviorSubject, Observable } from 'rxjs' + +import { ITransaction } from './transaction' + +@Injectable({ + providedIn: 'root', +}) +export class TransactionService { + constructor() {} + + processTransaction(transaction: ITransaction): Observable