Exercise 9 - Templates - Buying Socks

itenium-socks/src/app/modal/modal.component.html

@@ -0,0 +1,5 @@
+<div class="modal-backdrop" (click)="onClose()"></div>
+<div class="modal-content">
+  <ng-content></ng-content>
+  <button (click)="onClose()">Close</button>
+</div>

itenium-socks/src/app/modal/modal.component.scss

@@ -0,0 +1,20 @@
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.modal-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 20px;
+  z-index: 1001;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}

itenium-socks/src/app/modal/modal.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+  @Output() close = new EventEmitter<void>();
+
+  onClose() {
+    this.close.emit();
+  }
+}

itenium-socks/src/app/socks/sock.component.html

@@ -38,16 +38,29 @@ <h1 style="margin-top: 25px;">{{ sock.name }}</h1>
 
         <br>
         <br>
-
-        <button type="button" class="buy-socks" (click)="buy()">
+        <p *ngIf="sock.inventory === 0" class="badge">SOLD OUT</p>
+        <button type="button" class="buy-socks" (click)="buy()" *ngIf="sock.inventory > 0">
           BUY NOW
         </button>
+        <div *ngIf="showAlert" [ngClass]="alertType" class="alert">
+          {{ alertMessage }}
+        </div>
       </div>
     </div>
   </div>
 </section>
 
 
+<app-modal *ngIf="showModal" (close)="onCloseModal()">
+  <h2>Enter Bank Details</h2>
+  <p>Free shipping and return policy!</p>
+  <!-- Add form for bank details here -->
+  <button (click)="onConfirmPurchase()">Confirm Purchase</button>
+</app-modal>
+
+
+
+
 
 <section class="contact_section" style="margin-bottom: 36px">
   <div class="container px-0">

itenium-socks/src/app/socks/sock.component.scss

@@ -0,0 +1,32 @@
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+  background-color: red;
+  color: white;
+}
+
+.alert {
+  position: fixed;
+  top: 20px;
+  left: 10%;
+  transform: translateX(-50%);
+  padding: 10px;
+  background-color: #28a745; /* Success background color */
+  color: white;
+  border-radius: 5px;
+}
+
+.alert.success {
+  background-color: #28a745;
+}
+
+.alert.failure {
+  background-color: #dc3545;
+}

itenium-socks/src/app/socks/sock.component.ts

@@ -2,16 +2,23 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
-import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { AsyncPipe, NgIf, TitleCasePipe, CommonModule } from '@angular/common';
+import { ModalComponent } from '../modal/modal.component';
+
 
 @Component({
   selector: 'app-sock',
   standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
-  templateUrl: './sock.component.html'
+  imports: [NgIf, AsyncPipe, TitleCasePipe, ModalComponent, CommonModule],
+  templateUrl: './sock.component.html',
+  styleUrls: ['./sock.component.scss']
 })
 export class SockComponent {
   sock$!: Observable<Sock>;
+  showModal = false;
+  showAlert = false;
+  alertMessage = '';
+  alertType = '';
 
   constructor(private socksService: SocksService) {}
 
@@ -22,8 +29,26 @@ export class SockComponent {
   }
 
   buy(): void {
+    this.showModal = true;
+
+  }
+
+  onCloseModal() {
+    this.showModal = false;
+  }
+
+  onConfirmPurchase() {
     const sockId = +window.location.pathname.split('/')[2];
     this.socksService.buySocks(sockId).subscribe();
+    this.showModal = false;
+    this.showAlertMessage('Purchase successful!', 'success');
+  }
+
+  showAlertMessage(message: string, type: string) {
+    this.alertMessage = message;
+    this.alertType = type;
+    this.showAlert = true;
+    setTimeout(() => this.showAlert = false, 3000);
   }
 
   addReview(): void {