DM2-2770-pagina-de-pagos

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { ApplianceRegistrationModule } from './pages/appliance-registration/appl
 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';
+import { PaymentModule } from './pages/payment/payment.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -33,6 +34,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     HomeModule,
     DashboardModule,
     ProductModule,
+    PaymentModule,
     ReactiveFormsModule,
     HttpClientModule,
     TranslateModule.forRoot({

src/app/constants/routes.constants.ts

@@ -5,6 +5,5 @@ export const RoutesConstants = {
   dashboard: '/pages/:userId/home',
   form: '/pages/:userId/form',
   product: '/pages/:userId/product',
-  root: '/',
+  payment: '/pages/:userId/payment/:id',
 };
-

src/app/models/payment.ts

@@ -0,0 +1,11 @@
+export interface Payment {
+  user_id: number;
+  full_name: string;
+  email: string;
+  telephone_number: string;
+  card_type: string;
+  card_number: string;
+  security_code: string;
+  amount_payable: number;
+  product_id: number;
+}

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

@@ -22,7 +22,6 @@
         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>
 
 
@@ -70,4 +69,3 @@
 
   </nav>
 </header>
-

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

@@ -24,14 +24,15 @@ export class MenuComponent {
   currentLanguage: 'en' | 'es' = 'es';
   languages = LanguageConstants;
   userId: string | null = localStorage.getItem('userId');
+  paymentId: string | undefined;
 
   constructor(private translationService: TranslationService) {
     this.avatar = ImageConstants.avatar;
     this.userName = localStorage.getItem('userName');
     this.userLastName = localStorage.getItem('userLastName');
   }
 
-  toggleMenu() : void{
+  toggleMenu(): void {
     this.showMenu = !this.showMenu;
   }
 
@@ -50,8 +51,8 @@ export class MenuComponent {
     this.router.navigate(['']);
   }
 
-  changeLanguage(language: 'en' | 'es', event: Event) : void{
-    event.preventDefault(); 
+  changeLanguage(language: 'en' | 'es', event: Event): void {
+    event.preventDefault();
     this.translationService.setLanguage(language);
     this.currentLanguage = language;
     this.closeMenu();

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

@@ -18,7 +18,8 @@
 
           <div class="grid w-full grid-cols-1 items-start gap-x-6 gap-y-4 sm:grid-cols-12 lg:gap-x-4" *ngIf="product">
             <div class="aspect-h-3 aspect-w-2 overflow-hidden rounded-lg bg-transparent sm:col-span-4 lg:col-span-5">
-              <img [src]="product.damaged_appliance_image" [alt]="'damagedApplianceImageAlt' | translate" class="object-cover object-center">
+              <img [src]="product.damaged_appliance_image" [alt]="'damagedApplianceImageAlt' | translate"
+                class="object-cover object-center">
             </div>
             <div class="sm:col-span-8 lg:col-span-7">
               <h2 class="text-2xl font-bold text-gray-900 sm:pr-12">{{ product.appliance_type }}</h2>
@@ -64,7 +65,7 @@ <h3 id="user-information-heading" class="text-lg font-bold text-gray-900">{{ 'us
                 </div>
               </section>
 
-              <button type="submit"
+              <button type="submit" (click)="navigateToPayment(product.user.id, product.id)"
                 class="mt-6 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">{{
                 'PAY_NOW' | translate }}</button>
             </div>

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

@@ -1,14 +1,16 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, 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';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-modal-product',
   templateUrl: './modal-product.component.html',
-  styleUrls: ['./modal-product.component.css']
+  styleUrls: ['./modal-product.component.css'],
 })
 export class ModalProductComponent implements OnInit {
+  private readonly router: Router = inject(Router);
   @Output() alertClosed = new EventEmitter<void>();
   product: Product | null = null;
   user: User | null = null;
@@ -17,13 +19,10 @@ export class ModalProductComponent implements OnInit {
   constructor(private productModalService: ProductModalService) {}
 
   ngOnInit(): void {
-    this.productModalService.currentProduct.subscribe(product => {
+    this.productModalService.currentProduct.subscribe((product) => {
       this.product = product;
-    });
-    this.productModalService.currentUser.subscribe(user => {
-      this.user = user;
-      if (this.user && this.product) {
-        this.isOpenModal = true;
+      if (this.product) {
+        localStorage.setItem('currentProduct', JSON.stringify(this.product));
       }
     });
   }
@@ -33,4 +32,8 @@ export class ModalProductComponent implements OnInit {
     this.isOpenModal = false;
     this.productModalService.closeModal();
   }
+
+  navigateToPayment(userId: number, productId: number): void {
+    this.router.navigate([`/pages/${userId}/payment/${productId}`]);
+  }
 }

src/app/pages/pages-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ApplianceRegistrationComponent } from './appliance-registration/appliance-registration.component';
 import { ProductComponent } from './product/product.component';
+import { PaymentComponent } from './payment/payment.component';
 
 const routes: Routes = [
   {
@@ -17,7 +18,10 @@ const routes: Routes = [
     path: 'product',
     component: ProductComponent,
   },
-
+  {
+    path: 'payment/:id',
+    component: PaymentComponent,
+  },
 ];
 
 @NgModule({

src/app/pages/pages.module.ts

@@ -5,7 +5,6 @@ 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/payment/payment.component.css

@@ -0,0 +1,81 @@
+body {
+    background: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+
+/* Contenedor de formulario y ticket */
+.flex {
+    display: flex;
+  }
+
+  /* Formulario */
+  .form-container, .ticket {
+    padding: 16px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Estilos del ticket */
+  .ticket {
+    border: 1px solid #000;
+    border-radius: 4px;
+    padding: 16px;
+    width: 100%;
+    background-color: #fff;
+    font-family: 'Courier New', Courier, monospace;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  }
+
+  .ticket-header {
+    border-bottom: 2px dashed #000;
+    padding-bottom: 8px;
+    margin-bottom: 16px;
+  }
+
+  .ticket-title {
+    font-size: 18px;
+    margin: 0;
+    text-align: center;
+  }
+
+  .ticket-date {
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+  }
+
+  .ticket-body {
+    margin-bottom: 16px;
+  }
+
+  .ticket-body p {
+    margin: 4px 0;
+  }
+
+  .ticket-footer {
+    text-align: center;
+    font-size: 12px;
+    color: #666;
+    border-top: 2px dashed #000;
+    padding-top: 8px;
+  }
+
+  /* Estilo del contenedor del ticket para centrar y dar margen */
+.ticket-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  max-width: 400px;
+  margin: auto;
+}
+
+
+
+