ch14

projects/ch14/src/app/pos/pos.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 
+import { AppMaterialModule } from '../app-material.module'
 import { PosRoutingModule } from './pos-routing.module'
 import { PosComponent } from './pos/pos.component'
 
 @NgModule({
   declarations: [PosComponent],
-  imports: [CommonModule, PosRoutingModule],
+  imports: [CommonModule, PosRoutingModule, AppMaterialModule],
 })
 export class PosModule {}

projects/ch14/src/app/pos/pos/pos.component.html

@@ -2,3 +2,8 @@
   <img
     src="https://user-images.githubusercontent.com/822159/36186684-9f05fef8-110e-11e8-991f-fae6ca60fe5d.png" />
 </p>
+<p>
+  <button mat-icon-button (click)="checkout(currentTransaction)">
+    <mat-icon>shopping_cart</mat-icon> Checkout Customer
+  </button>
+</p>

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()
+  }
 }

projects/ch14/src/app/pos/transaction/transaction.enum.ts

@@ -0,0 +1,5 @@
+export enum TransactionType {
+  Cash,
+  Credit,
+  LemonCoin,
+}

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()
+  }))
+})

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<string> {
+    return new BehaviorSubject<string>('5a6352c6810c19729de860ea').asObservable()
+  }
+}

projects/ch14/src/app/pos/transaction/transaction.ts

@@ -0,0 +1,7 @@
+import { TransactionType } from './transaction.enum'
+
+export interface ITransaction {
+  paymentType: TransactionType
+  paymentAmount: number
+  transactionId?: string
+}

projects/ch14/src/index.html

@@ -2,6 +2,25 @@
 <html lang="en">
 
 <head>
+  <!-- Google Tag Manager -->
+  <script>
+    ;
+    (function(w, d, s, l, i) {
+      w[l] = w[l] || []
+      w[l].push({
+        'gtm.start': new Date().getTime(),
+        event: 'gtm.js',
+      })
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != 'dataLayer' ? '&l=' + l : ''
+      j.async = true
+      j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+      f.parentNode.insertBefore(j, f)
+    })(window, document, 'script', 'dataLayer', 'GTM-56D4F6K')
+
+  </script>
+  <!-- End Google Tag Manager -->
   <meta charset="utf-8">
   <title>Ch14: LemonMart</title>
   <base href="/">
@@ -20,6 +39,12 @@
 </head>
 
 <body>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript>
+    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-56D4F6K" height="0"
+      width="0" style="display:none;visibility:hidden"></iframe>
+  </noscript>
+  <!-- End Google Tag Manager (noscript) -->
   <app-root></app-root>
 </body>
 

src/app/pos/pos/pos.component.html

@@ -4,6 +4,6 @@
 </p>
 <p>
   <button mat-icon-button (click)="checkout(currentTransaction)">
-    <mat-icon>check_circle</mat-icon> Checkout Customer
+    <mat-icon>shopping_cart</mat-icon> Checkout Customer
   </button>
 </p>