Fixes for Ticket#831474 + Ticket#831713 + unreported bug of footer & drawer in New Price Component

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

@@ -102,6 +102,8 @@ export class ProductDetailsComponent implements OnInit {
   stepsCircles:string[]=['circle-chars','circle-price','circle-terms','circle-checkout'];
   licenseTerm:any=undefined;
   isLoaded = false;
+  private isManualScroll = false;
+  private scrollTimeout: any;
 
   constructor(
     private cdr: ChangeDetectorRef,
@@ -167,39 +169,41 @@ export class ProductDetailsComponent implements OnInit {
 
   @HostListener('window:scroll', ['$event'])
   updateTabs(event:any) {
-    let tabs_container = document.getElementById('tabs-container');
-    let tabsOffset = 0;
-    if(tabs_container){
-      tabsOffset=tabs_container.offsetHeight
+    // Skip if user manually clicked a tab and scroll is in progress
+    if (this.isManualScroll) {
+      return;
+    }
+
+    const sections = [
+      { id: 'details-container', tab: 'details-button', handler: () => this.goToDetails(false) },
+      { id: 'chars-container', tab: 'chars-button', handler: () => this.goToChars(false) },
+      { id: 'attach-container', tab: 'attach-button', handler: () => this.goToAttach(false) },
+      { id: 'agreements-container', tab: 'agreements-button', handler: () => this.goToAgreements(false) },
+      { id: 'relationships-container', tab: 'relationships-button', handler: () => this.goToRelationships(false) }
+    ];
+
+    const TARGET_TOP = 150; // Sticky header offset + some buffer
+    let activeSection = null;
+
+    // Iterate through sections in reverse order (bottom to top) to prioritize later sections when scrolling down
+    for (let i = sections.length - 1; i >= 0; i--) {
+      const section = sections[i];
+      const element = document.getElementById(section.id);
+      if (!element) continue;
+
+      const rect = element.getBoundingClientRect();
+
+      // Check if the section contains or is past the target line
+      if (rect.top <= TARGET_TOP && rect.bottom > TARGET_TOP) {
+        activeSection = section;
+        break;
+      } else if (rect.top > TARGET_TOP) {
+        activeSection = section;
+      }
     }
-    let details_container = document.getElementById('details-container')
-    let chars_container = document.getElementById('chars-container')
-    let attach_container = document.getElementById('attach-container')
-    let agreements_container = document.getElementById('agreements-container')
-    let relationships_container = document.getElementById('agreements-container')
 
-    let detailsOffset=tabsOffset
-    if(details_container && (details_container.getBoundingClientRect().bottom <= window.innerHeight)){
-      this.goToDetails(false)
-      detailsOffset=details_container.getBoundingClientRect().bottom
-    }
-    let charsOffset=detailsOffset;
-    if(this.charsContent!=undefined && chars_container && (chars_container.getBoundingClientRect().top >= detailsOffset && chars_container.getBoundingClientRect().bottom <= window.innerHeight)){
-      this.goToChars(false)
-      charsOffset=chars_container.getBoundingClientRect().bottom
-    }
-    let attOffsett=charsOffset;
-    if(this.attachContent!=undefined && attach_container && (attach_container.getBoundingClientRect().top >= charsOffset && attach_container.getBoundingClientRect().bottom <= window.innerHeight)){
-      this.goToAttach(false)
-      attOffsett=attach_container.getBoundingClientRect().bottom
-    }
-    let agreeOffset=attOffsett;
-    if(this.agreementsContent!= undefined && agreements_container && (agreements_container.getBoundingClientRect().top >= attOffsett && agreements_container.getBoundingClientRect().bottom <= window.innerHeight)){
-      this.goToAgreements(false)
-      agreeOffset=agreements_container.offsetHeight
-    }
-    if(this.relationshipsContent!= undefined && relationships_container && (relationships_container.getBoundingClientRect().top >= agreeOffset && relationships_container.getBoundingClientRect().bottom <= window.innerHeight)){
-      this.goToRelationships(false)
+    if (activeSection) {
+      activeSection.handler();
     }
   }
 
@@ -674,9 +678,11 @@ async deleteProduct(product: Product | undefined){
   }
 
   goToDetails(scroll:boolean){
-    //const targetElement = this.elementRef.nativeElement.querySelector('#detailsContent');
     if (scroll) {
-      //this.detailsScrollAnchor.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // Set flag to prevent scroll listener from interfering
+      this.isManualScroll = true;
+      clearTimeout(this.scrollTimeout);
+
       const anchor = this.detailsScrollAnchor?.nativeElement;
       if (!anchor) return;
 
@@ -687,6 +693,11 @@ async deleteProduct(product: Product | undefined){
       // Or: explicitly scroll the document
       const y = anchor.getBoundingClientRect().top + window.scrollY - 88; // adjust for sticky header
       window.scrollTo({ top: y, behavior: 'smooth' });
+
+      // Re-enable scroll listener after animation completes
+      this.scrollTimeout = setTimeout(() => {
+        this.isManualScroll = false;
+      }, 1000);
     }
 
     let details_button = document.getElementById('details-button')
@@ -704,7 +715,14 @@ async deleteProduct(product: Product | undefined){
 
   goToChars(scroll:boolean){
     if (scroll) {
+      this.isManualScroll = true;
+      clearTimeout(this.scrollTimeout);
+
       this.charsScrollAnchor.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isManualScroll = false;
+      }, 1000);
     }
 
     let details_button = document.getElementById('details-button')
@@ -722,7 +740,14 @@ async deleteProduct(product: Product | undefined){
 
   goToAttach(scroll:boolean){
     if (scroll) {
+      this.isManualScroll = true;
+      clearTimeout(this.scrollTimeout);
+
       this.attachScrollAnchor.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isManualScroll = false;
+      }, 1000);
     }
 
     let details_button = document.getElementById('details-button')
@@ -740,8 +765,14 @@ async deleteProduct(product: Product | undefined){
 
   goToAgreements(scroll:boolean){
     if (scroll) {
-      //this.agreementsContent.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start'});
+      this.isManualScroll = true;
+      clearTimeout(this.scrollTimeout);
+
       this.agreementsScrollAnchor.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isManualScroll = false;
+      }, 1000);
     }
 
     let details_button = document.getElementById('details-button')
@@ -759,7 +790,14 @@ async deleteProduct(product: Product | undefined){
 
   goToRelationships(scroll:boolean){
     if (scroll) {
+      this.isManualScroll = true;
+      clearTimeout(this.scrollTimeout);
+
       this.relScrollAnchor.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isManualScroll = false;
+      }, 1000);
     }
 
     let details_button = document.getElementById('details-button')

src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.html

@@ -1,17 +1,20 @@
 <!-- Drawer -->
-<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-end transition-opacity duration-500 z-50"
+<div class="fixed inset-0 flex justify-end transition-opacity duration-500 z-[52]"
      [ngClass]="{'opacity-100': isOpen, 'opacity-0 pointer-events-none': !isOpen}">
 
-  <div class="w-full md:w-5/6 bg-secondary-50 dark:bg-gray-800 h-full p-6 overflow-y-auto transform transition-transform duration-500"
-       [ngClass]="{'translate-x-0': isOpen, 'translate-x-full': !isOpen, '-translate-x-full': !initialized}">
+  <!-- Backdrop that covers entire viewport -->
+  <div class="fixed inset-0 bg-black bg-opacity-50 z-[52]"></div>
 
+  <div class="w-full md:w-2/3 lg:w-1/2 bg-secondary-50 dark:bg-gray-800 h-screen transform transition-transform duration-500 flex flex-col relative z-[53]"
+       [ngClass]="{'translate-x-0': isOpen, 'translate-x-full': !isOpen, '-translate-x-full': !initialized}">
 
-    <!-- Título -->
-    <h2 class="text-xl font-semibold text-gray-700 dark:text-white">
-      {{ component ? 'Update Price Component' : 'New Price Component' }}
-    </h2>
+    <div class="p-6 flex-1 overflow-y-auto">
+      <!-- Título -->
+      <h2 class="text-xl font-semibold text-gray-700 dark:text-white">
+        {{ component ? 'Update Price Component' : 'New Price Component' }}
+      </h2>
 
-    <form [formGroup]="priceComponentForm" (ngSubmit)="submitForm()" class="mt-4 space-y-4">
+      <form [formGroup]="priceComponentForm" (ngSubmit)="submitForm()" class="mt-4 space-y-4">
 
       <!-- Nombre -->
       <div>
@@ -289,14 +292,12 @@ <h2 class="text-xl font-semibold text-gray-700 dark:text-white">
         </div>
 
       }
-
-
       <!-- Botones -->
-      <div class="flex justify-end space-x-3">
+      <div class="flex justify-end space-x-3 mt-6">
         <button type="button" (click)="closeDrawer()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 dark-text:white rounded">{{ 'FORMS.PRICE_PLAN_COMPONENT._cancel' | translate }}</button>
         <button data-cy="savePriceComponent" type="submit" [disabled]="priceComponentForm.invalid" [ngClass]="priceComponentForm.invalid ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" class="px-4 py-2 bg-blue-500 text-white rounded">{{ 'FORMS.PRICE_PLAN_COMPONENT._save' | translate }}</button>
       </div>
-    </form>
+      </form>
+    </div>
 
   </div>
-</div>

src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.ts

@@ -59,6 +59,7 @@ export class PriceComponentDrawerComponent implements OnInit {
     setTimeout(() => {
       this.isOpen = true;
       this.initialized = true;
+      document.body.style.overflow = 'hidden';
     }, 50);
 
     for(let i=0;i<this.prodChars.length;i++){
@@ -241,6 +242,7 @@ export class PriceComponentDrawerComponent implements OnInit {
 
   closeDrawer() {
     this.isOpen = false;
+    document.body.style.overflow = '';
     // If editing, do nothing; if creating, clear form
     setTimeout(() => this.close.emit(null), 500);
   }

src/app/shared/forms/offer/price-plans/price-plan-drawer/price-plan-drawer.component.html

@@ -2,8 +2,12 @@
 <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-end transition-opacity duration-1000 z-50"
      [ngClass]="{'opacity-100': isOpen, 'opacity-0 pointer-events-none': !isOpen}">
 
+  <!-- Overlay when child drawer is open - covers entire viewport and dims parent -->
+  <div *ngIf="showPriceComponentDrawer"
+       class="fixed inset-0 bg-black bg-opacity-30 pointer-events-none z-[51]"></div>
+
   <!-- Drawer Content -->
-  <div class="w-full md:w-5/6 bg-secondary-50 dark:bg-gray-800 h-full p-6 overflow-y-auto transform transition-transform duration-1000"
+  <div class="w-full md:w-5/6 bg-secondary-50 dark:bg-gray-800 h-full p-6 overflow-y-auto transform transition-transform duration-1000 relative z-50"
        [ngClass]="{'translate-x-0': isOpen, 'translate-x-full': !isOpen, '-translate-x-full': !initialized}">
 
     <!-- Header -->
@@ -237,6 +241,7 @@ <h3 class="font-bold text-lg dark:text-white">
         </div>
 
     </div>
+  </div>
 
     <!-- Drawer para editar Price Components -->
     <app-price-component-drawer *ngIf="showPriceComponentDrawer"
@@ -247,5 +252,4 @@ <h3 class="font-bold text-lg dark:text-white">
                                 (close)="closePriceComponentDrawer($event)">
     </app-price-component-drawer>
 
-  </div>
 </div>

src/app/shared/forms/offer/price-plans/price-plan-drawer/price-plan-drawer.component.ts

@@ -55,6 +55,7 @@ export class PricePlanDrawerComponent implements OnInit {
     setTimeout(() => {
       this.isOpen = true;
       this.initialized = true;
+      document.body.style.overflow = 'hidden';
     }, 50);
 
     if (!this.formGroup) {
@@ -143,6 +144,7 @@ export class PricePlanDrawerComponent implements OnInit {
 
   closeDrawer() {
     this.isOpen = false;
+    document.body.style.overflow = '';
     // If editing, do nothing; if creating, clear form
     setTimeout(() => this.close.emit(), 500);
   }