Merge pull request #41 from teamq-ec/DM2-2758-implementar-boton-de-pa…

…go-con-ventana-emergente

Dm2 2758 implementar boton de pago con ventana emergente

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { DashboardModule } from './pages/dashboard/dashboard.module';
 import { ApplianceRegistrationModule } from './pages/appliance-registration/appliance-registration.module';
 import { AlertConfirmationModule } from './pages/components/alert-confirmation/alert-confirmation.module';
 import { ProductModule } from './pages/product/product.module';
+import { ModalProductModule } from './pages/components/modal-product/modal-product.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);

src/app/models/product.ts

@@ -1,17 +1,22 @@
-export interface ServiceRequest {
-  user_id: number;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone_number: string;
+export interface Product {
+  id: number;
   appliance_type: string;
+  application_date: string;
   brand: string;
+  collection_address: string;
+  created_at: string;
+  damaged_appliance_image: string;
+  preferred_contact_method: string;
   problem_details: string;
-  address: string;
   service_type: string;
-  preferred_contact_method: string;
-  damaged_appliance_image: string;
-  state: string;
-  application_date: string;
+  updated_at: string;
+  user: {
+    id: number;
+    first_name: string;
+    last_name: string;
+    email: string;
+    phone_number: string;
+    address: string;
+  };
 }
 

src/app/pages/components/alert-confirmation/alert-confirmation.component.ts

@@ -1,15 +1,27 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-alert-confirmation',
   templateUrl: './alert-confirmation.component.html',
   styleUrls: ['./alert-confirmation.component.css'],
 })
 export class AlertConfirmationComponent {
-  @Output() alertClosed = new EventEmitter<void>();
-  isOpen = true;
+  private userId?: number;
 
-  closeAlert() {
-    this.alertClosed.emit();
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router
+  ) {
+    const userId = this.activatedRoute.snapshot.paramMap.get('userId');
+    if (userId) {
+      this.userId = +userId;
+    }
+  }
+
+  closeAlert(): void {
+    if (this.userId) {
+      this.router.navigate(['/pages', this.userId, 'product']);
+    }
   }
 }

src/app/pages/components/menu/menu.component.html

@@ -1,7 +1,7 @@
 <header class="bg-white shadow">
   <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
     <div class="flex lg:flex-1">
-      <a href="#" class="-m-1.5 p-1.5">
+      <a [routerLink]="goToHome()" class="-m-1.5 p-1.5">
         <span class="sr-only">{{ 'header.empresa' | translate }}</span>
         <img class="h-8 w-auto" [src]="urls.logos.logo" alt="{{ 'header.empresa' | translate }}">
       </a>
@@ -18,10 +18,10 @@
     </div>
 
     <div class="hidden lg:flex lg:gap-x-12">
-      <a routerLink="/auth/register" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.servicios' |
+      <a [routerLink]="getFormRoute()" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.servicios' |
         translate }}</a>
-      <a href="#" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.seguimiento_productos' | translate
-        }}</a>
+      <a [routerLink]="goProduct()" class="text-sm font-semibold leading-6 text-gray-900">{{
+        'header.seguimiento_productos' | translate }}</a>
       <a href="#" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.gestion_pagos' | translate }}</a>
     </div>
 

src/app/pages/components/menu/menu.component.ts

@@ -5,6 +5,7 @@ import { ImageConstants } from 'src/app/constants/images.constants';
 import { UrlsConstants } from 'src/app/constants/urls.constants';
 import { TranslationService } from '../../services/translation.service';
 import { LanguageConstants } from 'src/app/constants/language-constants';
+import { RoutesConstants } from 'src/app/constants/routes.constants';
 
 @Component({
   selector: 'app-menu',
@@ -22,6 +23,7 @@ export class MenuComponent {
   showMenuI: boolean = false;
   currentLanguage: 'en' | 'es' = 'es';
   languages = LanguageConstants;
+  userId: string | null = localStorage.getItem('userId');
 
   constructor(private translationService: TranslationService) {
     this.avatar = ImageConstants.avatar;
@@ -58,4 +60,28 @@ export class MenuComponent {
   getFlagUrl(language: 'en' | 'es'): string {
     return LanguageConstants[language];
   }
+
+  getFormRoute(): string[] {
+    if (this.userId) {
+      return [RoutesConstants.form.replace(':userId', this.userId)];
+    } else {
+      return [RoutesConstants.home];
+    }
+  }
+
+  goProduct(): string[] {
+    if (this.userId) {
+      return [RoutesConstants.product.replace(':userId', this.userId)];
+    } else {
+      return [RoutesConstants.home];
+    }
+  }
+
+  goToHome(): string[] {
+    if (this.userId) {
+      return [RoutesConstants.dashboard.replace(':userId', this.userId)];
+    } else {
+      return [RoutesConstants.home];
+    }
+  }
 }

src/app/pages/components/modal-product/modal-product-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ModalProductRoutingModule { }

src/app/pages/components/modal-product/modal-product.component.css

@@ -0,0 +1,7 @@
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}

src/app/pages/components/modal-product/modal-product.component.html

@@ -0,0 +1,61 @@
+<div [ngClass]="{'hidden': !isOpenModal, 'block': isOpenModal}" class="fixed inset-0 z-10 overflow-y-auto">
+  <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+
+  <div class="flex items-center justify-center min-h-full text-center">
+    <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 w-full max-w-lg">
+      <div class="bg-white p-6">
+        <div class="absolute right-4 top-4 text-gray-400 hover:text-gray-500">
+          <button type="button" (click)="closeModal()">
+            <span class="sr-only">{{ 'close' | translate }}</span>
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div *ngIf="product" class="grid grid-cols-1 gap-4">
+          <div class="aspect-w-2 aspect-h-3 bg-gray-100 rounded-lg overflow-hidden">
+            <img [src]="product.damaged_appliance_image" [alt]="'damagedApplianceImageAlt' | translate" class="object-cover">
+          </div>
+          <div>
+            <h2 class="text-2xl font-bold text-gray-900">{{ product.appliance_type }}</h2>
+            <section aria-labelledby="information-heading" class="mt-2">
+              <h3 id="information-heading" class="text-lg font-bold text-gray-900">{{ 'productInformation' | translate }}</h3>
+              <p class="mt-1 text-gray-700"><strong>{{ 'brand' | translate }}:</strong> {{ product.brand }}</p>
+              <p class="mt-1 text-gray-700"><strong>{{ 'problemDetails' | translate }}:</strong> {{ product.problem_details }}</p>
+              <p class="mt-1 text-gray-700"><strong>{{ 'serviceType' | translate }}:</strong> {{ product.service_type }}</p>
+              <p class="mt-1 text-gray-700"><strong>{{ 'preferredContactMethod' | translate }}:</strong> {{ product.preferred_contact_method }}</p>
+              <p class="mt-1 text-gray-700"><strong>{{ 'applicationDate' | translate }}:</strong> {{ product.application_date }}</p>
+            </section>
+          </div>
+        </div>
+
+        <section *ngIf="user" aria-labelledby="user-information-heading" class="mt-10">
+          <h3 id="user-information-heading" class="text-lg font-bold text-gray-900">{{ 'userInformation' | translate }}</h3>
+          <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">{{ 'name' | translate }}</label>
+              <p class="mt-1 text-gray-700"><strong>{{ user.first_name }} {{ user.last_name }}</strong></p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">{{ 'email' | translate }}</label>
+              <p class="mt-1 text-gray-700"><strong>{{ user.email }}</strong></p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">{{ 'phone' | translate }}</label>
+              <p class="mt-1 text-gray-700"><strong>{{ user.phone_number }}</strong></p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">{{ 'address' | translate }}</label>
+              <p class="mt-1 text-gray-700"><strong>{{ user.address }}</strong></p>
+            </div>
+          </div>
+        </section>
+
+        <button type="button" class="mt-6 w-full bg-indigo-600 text-white rounded-md py-3 font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          {{ 'PAY_NOW' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/components/modal-product/modal-product.component.ts

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Product } from 'src/app/models/product';
+import { ProductModalService } from '../../services/product-modal.service';
+import { User } from 'src/app/models/user';
+
+@Component({
+  selector: 'app-modal-product',
+  templateUrl: './modal-product.component.html',
+  styleUrls: ['./modal-product.component.css']
+})
+export class ModalProductComponent implements OnInit {
+  @Output() alertClosed = new EventEmitter<void>();
+  product: Product | null = null;
+  user: User | null = null;
+  isOpenModal = false;
+
+  constructor(private productModalService: ProductModalService) {}
+
+  ngOnInit(): void {
+    this.productModalService.currentProduct.subscribe(product => {
+      this.product = product;
+    });
+    this.productModalService.currentUser.subscribe(user => {
+      this.user = user;
+      if (this.user && this.product) {
+        this.isOpenModal = true;
+      }
+    });
+  }
+
+  closeModal(): void {
+    this.alertClosed.emit();
+    this.isOpenModal = false;
+    this.productModalService.closeModal();
+  }
+}

src/app/pages/components/modal-product/modal-product.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ModalProductRoutingModule } from './modal-product-routing.module';
+import { ModalProductComponent } from './modal-product.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+
+@NgModule({
+  declarations: [ModalProductComponent],
+  imports: [
+    CommonModule,
+    ModalProductRoutingModule,
+    TranslateModule
+  ],
+  exports: [ModalProductComponent] 
+})
+export class ModalProductModule { }

src/app/pages/pages.module.ts

@@ -5,6 +5,7 @@ import { PagesRoutingModule } from './pages-routing.module';
 import { FormProductModule } from './components/form-product/form-product.module';
 
 import { TranslateModule } from '@ngx-translate/core';
+import { ModalProductComponent } from './components/modal-product/modal-product.component';
 
 @NgModule({
   declarations: [],

src/app/pages/product/product.component.ts

@@ -49,7 +49,6 @@ export class ProductComponent {
     if (userId) {
       this.userId = +userId;
     }
-    console.log('User ID:', this.userId);
   }
 
   loadUserAppliances(page: number = this.initialPage): void {

src/app/pages/product/product.module.ts

@@ -6,6 +6,7 @@ import { MenuModule } from '../components/menu/menu.module';
 import { FooterModule } from '../components/footer/footer.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { ProductComponent } from './product.component';
+import { ModalProductModule } from '../components/modal-product/modal-product.module';
 
 
 @NgModule({
@@ -15,7 +16,8 @@ import { ProductComponent } from './product.component';
     ProductRoutingModule,
     MenuModule,
     FooterModule,
-    TranslateModule
+    TranslateModule,
+    ModalProductModule
   ],
   exports: [ProductComponent] 
 })

src/app/pages/services/product-modal.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Product } from 'src/app/models/product';
+import { User } from 'src/app/models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductModalService {
+ private productSubject = new BehaviorSubject<Product | null>(null);
+ private userSource = new BehaviorSubject<User | null>(null);
+
+  currentProduct = this.productSubject.asObservable();
+  currentUser = this.userSource.asObservable();
+
+
+  openModal(product: Product, user: User): void {
+    this.productSubject.next(product);
+    this.userSource.next(user);
+  }
+
+  closeModal(): void {
+    this.productSubject.next(null);
+    this.userSource.next(null);
+  }
+}

src/app/pages/services/product.service.ts

@@ -1,7 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
-import { ServiceRequest } from 'src/app/models/product';
+import { Product } from 'src/app/models/product';
+
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -12,7 +13,7 @@ export class ProductService {
 
   constructor(private httpClient: HttpClient) {}
 
-  registerProduct(formData: FormData): Observable<ServiceRequest> {
-    return this.httpClient.post<ServiceRequest>(this.apiUrl, formData);
+  registerProduct(formData: FormData): Observable<Product> {
+    return this.httpClient.post<Product>(this.apiUrl, formData);
   }
 }

src/assets/i18n/en.json

@@ -219,7 +219,22 @@
   "APPLIANCE_TYPE_DRYER": "Dryer",
   "APPLIANCE_TYPE_MICROWAVE": "Microwave",
   "APPLIANCE_TYPE_ALL": "All",
-  "INVALID_APPLICATION_DATE": "Invalid application date.",
+  "close": "Close",
+  "productInformation": "Product Information*",
+  "brand": "Brand",
+  "problemDetails": "Problem Details",
+  "serviceType": "Service Type",
+  "preferredContactMethod": "Preferred Contact Method",
+  "applicationDate": "Application Date",
+  "userInformation": "User Information*",
+  "name": "Name",
+  "email": "Email",
+  "phone": "Phone",
+  "address": "Address",
+  "PAY_NOW": "Pay now",
+  "damagedApplianceImageAlt": "Image of the damaged appliance",
+  "applianceTypeAlt": "Type of appliance",
+    "INVALID_APPLICATION_DATE": "Invalid application date.",
   "INVALID_SERVICE_TYPE": "Invalid service type.",
   "SERVICE_COMPLETED": "The repair/maintenance is complete.",
   "TIMER_FORMAT": "{{days}}d {{hours}}h {{minutes}}m {{seconds}}s",