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

…go-con-ventana-emergente DM2-2758-implementar-boton-de-pago-con-ventana-emergente
teamq-ec · Jul 29, 2024 · 3edf6f9 · 3edf6f9
2 parents 58b48e2 + 7556b9e
commit 3edf6f9
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 16 deletions.
diff --git a/src/app/pages/components/menu/menu.component.html b/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,24 +18,30 @@
     </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' | translate }}</a>
-      <a href="#" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.seguimiento_productos' | translate }}</a>
+      <a [routerLink]="getFormRoute()" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.servicios' |
+        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>
 
-    
+
     <div class="hidden lg:flex lg:ml-8" (clickOutside)="closeMenu()">
       <div class="relative">
-        <button (click)="toggleMenuI()" class="flex items-center text-gray-700 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800">
-          <img [src]="getFlagUrl(currentLanguage)" alt="Current Language" class="block h-auto w-5 flex-shrink-0 rounded-full">
+        <button (click)="toggleMenuI()"
+          class="flex items-center text-gray-700 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800">
+          <img [src]="getFlagUrl(currentLanguage)" alt="Current Language"
+            class="block h-auto w-5 flex-shrink-0 rounded-full">
           <span class="ml-3 block text-sm font-medium">{{ currentLanguage.toUpperCase() }}</span>
         </button>
         <div *ngIf="showMenuI" class="absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded-lg shadow-lg">
-          <a href="#" (click)="changeLanguage('en', $event)" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100">
+          <a href="#" (click)="changeLanguage('en', $event)"
+            class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100">
             <img [src]="getFlagUrl('en')" alt="English" class="block h-auto w-5 flex-shrink-0 rounded-full">
             <span class="ml-3 text-sm font-medium">English</span>
           </a>
-          <a href="#" (click)="changeLanguage('es', $event)" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100">
+          <a href="#" (click)="changeLanguage('es', $event)"
+            class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100">
             <img [src]="getFlagUrl('es')" alt="Spanish" class="block h-auto w-5 flex-shrink-0 rounded-full">
             <span class="ml-3 text-sm font-medium">Español</span>
           </a>
@@ -55,8 +61,10 @@
       </button>
       <div *ngIf="showMenu" class="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg"
         style="margin-top: 140px;">
-        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'header.perfil' | translate }}</a>
-        <a href="#" (click)="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'header.cerrar_sesion' | translate }}</a>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'header.perfil' | translate
+          }}</a>
+        <a href="#" (click)="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{
+          'header.cerrar_sesion' | translate }}</a>
       </div>
     </div>
 

diff --git a/src/app/pages/components/menu/menu.component.ts b/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;
@@ -49,7 +51,7 @@ export class MenuComponent {
   }
 
   changeLanguage(language: 'en' | 'es', event: Event) {
-    event.preventDefault(); 
+    event.preventDefault();
     this.translationService.setLanguage(language);
     this.currentLanguage = language;
     this.closeMenu();
@@ -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];
+    }
+  }
 }
diff --git a/src/app/pages/product/product.component.html b/src/app/pages/product/product.component.html
@@ -1,6 +1,15 @@
 <body>
   <app-menu></app-menu>
   <div class="relative overflow-hidden bg-white" style="margin-left: 50px; margin-right: 50px; margin-top: 50px;">
+    <div class="absolute right-330 z-10" style="margin-top: 30px; margin-left: 50px;">
+      <button (click)="goToHome()"
+        class="inline-flex items-center justify-center w-10 h-10 bg-indigo-600 rounded-md shadow-sm text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        title="Go to Home">
+        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+        </svg>
+      </button>
+    </div>
     <div class="pb-80 pt-16 sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
       <div class="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
         <div class="sm:max-w-lg">
@@ -207,4 +216,4 @@ <h3 class="text-lg font-semibold">
   <div style="margin-top: 100px;">
     <app-footer></app-footer>
   </div>
-</body>
+</body>
diff --git a/src/app/pages/product/product.component.ts b/src/app/pages/product/product.component.ts
@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ApplianceServiceService } from '../services/appliance-service.service';
 import { ProductConstants } from 'src/app/constants/product.constants';
 import { IconsConstants } from 'src/app/constants/icons.constants';
@@ -31,12 +31,18 @@ export class ProductComponent {
 
   modalProduct: boolean = false;
 
-  products: Product[] = [ /* lista de productos */ ];
+  products: Product[] = [
+    /* lista de productos */
+  ];
 
   timerMessage: string = ''; // Asegúrate de definir esto en el componente
   timerInterval: any; // Para almacenar el intervalo del temporizador
 
-  constructor(private activatedRoute: ActivatedRoute, private productModalService: ProductModalService) {
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private productModalService: ProductModalService,
+    private router: Router
+  ) {
     const userId = this.activatedRoute.snapshot.paramMap.get('userId');
     if (userId) {
       this.userId = +userId;
@@ -65,6 +71,15 @@ export class ProductComponent {
     );
   }
 
+  goToHome(): void {
+    const userId = this.getUserIdFromRoute();
+    this.router.navigate([`/pages/${userId}/home`]);
+  }
+  getUserIdFromRoute(): string {
+    const urlSegments = window.location.pathname.split('/');
+    return urlSegments[urlSegments.indexOf('pages') + 1];
+  }
+
   nextPage() {
     if (this.currentPage < this.totalPages) {
       const nextPage = this.currentPage + 1;
@@ -74,7 +89,7 @@ export class ProductComponent {
   }
 
   openProductModal(appliance: Product, user: User) {
-    console.log('esto es delmodalloque envia',appliance,user)
+    console.log('esto es delmodalloque envia', appliance, user);
     this.modalProduct = true;
     this.productModalService.openModal(appliance, user);
   }