FIX revenue sharing now allows infinite recursion

src/app/app.module.ts

@@ -88,6 +88,7 @@ import {PricePlanDrawerComponent} from "./shared/price-plan-drawer/price-plan-dr
 import {OfferComponent} from "./shared/forms/offer/offer.component";
 import { ThemeService } from './services/theme.service';
 import { ThemeAwareTranslateLoader } from './services/theme-aware-translate.loader';
+import { RevenueReportComponent } from './shared/revenue-report/revenue-report.component'
 
 // Función Factory requerida para crear el cargador con sus dependencias
 export function createThemeAwareLoader(http: HttpClient, themeService: ThemeService) {
@@ -193,6 +194,7 @@ import { OperatorRevenueSharingComponent } from "src/app/pages/admin/operator-re
         MatomoRouterModule,
         CharacteristicComponent,
         PricePlanDrawerComponent,
+        RevenueReportComponent,
         OfferComponent,
         AboutDomeComponent,
         MarkdownTextareaComponent,

src/app/models/interfaces.ts

@@ -297,3 +297,11 @@ export interface PricePlanChangeState extends FormChangeState {
     };
   }[];
 }
+
+export interface Report {
+  label?: string;
+  text?: string;
+  link?: string;
+  items?: Report[];
+}
+

src/app/pages/user-profile/profile-sections/provider-revenue-sharing/provider-revenue-sharing.component.html

@@ -10,108 +10,13 @@ <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-whi
     </div>
 } @else {        
 
-        @if(subscription){
-            <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8">
-
-                <h3 class="md:text-xl lg:text-2xl font-bold text-primary-100 dark:text-white mb-4">My Subscription Plan</h3>
-
-                <div class="text-lg font-normal text-gray-500 dark:text-gray-400">
-                    <p>
-                        {{ subscription?.text }}
-                    </p>
-                </div>
-
-            </div>
-        }
-
-        @if(billing){
-        <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8 mt-4">
-
-            <h3 class="md:text-xl lg:text-2xl font-bold text-primary-100 dark:text-white mb-4">Billing History</h3>
-
-            <div class="text-lg font-normal text-gray-500 dark:text-gray-400">
-                @for(child of billing?.items; track child){
-                    <div class="mt-4">
-                        <b>{{ child?.label }}</b>: 
-                        @for(state of child?.items; track state){
-                            <div class="ml-4">
-                              <span>
-                                {{state?.label}}:
-                                @if(state?.link != null){
-                                  <a href="{{state?.link}}" target="_blank" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline break-words">
-                                    {{state?.text}}
-                                  </a>
-                                } @else {
-                                  {{state?.text}}
-                                }
-                              </span>
-                            </div>
-                          }
-
-                    </div>
-                }
-            </div>
-
+    @for (section of report; track section) {
+        <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8 mb-4">           
+
+            <app-revenue-report [node]="section"></app-revenue-report>
         </div>
-        }
-
-        @if(revenue){
-            <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8 mt-4">
-                <h3 class="md:text-xl lg:text-2xl font-bold text-primary-100 dark:text-white mb-4">Revenue Volume Monitoring</h3>
-                <div class="text-lg font-normal text-gray-500 dark:text-gray-400">
-                    @for(child of revenue?.items; track child){
-                        <div class="mt-4">
-                            <b>{{ child?.label }}</b>: {{child?.text}}
-                        </div>
-                    }
-                </div>
-            </div>
-        }
-
-        @if(revenueSummary){
-            <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8 mt-4">
-                <h3 class="md:text-xl lg:text-2xl font-bold text-primary-100 dark:text-white mb-4">Revenue Summary</h3>
-                <div class="text-lg font-normal text-gray-500 dark:text-gray-400">
-                    <p>
-                        {{ revenueSummary?.text }}
-                    </p>
-                </div>
-            </div>
-        }
-
-
-        @if(referral){
-            <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8 mt-4">
-                <h3 class="md:text-xl lg:text-2xl font-bold text-primary-100 dark:text-white mb-4">Referral Program Area</h3>
-                <div class="text-lg font-normal text-gray-500 dark:text-gray-400">
-                    @for(child of referral?.items; track child){
-                        <div class="mt-4">
-                            <b>{{ child?.label }}</b>: {{child?.text}}
-                        </div>
-                    }
-                </div>
-            </div>
-        }
-
-        @if(support){
-            <div class="border border-primary-100 dark:border-primary-50 rounded-lg p-4 md:p-8 mt-4">
-                <h3 class="md:text-xl lg:text-2xl font-bold text-primary-100 dark:text-white mb-4">Support Contact</h3>
-                <div class="text-lg font-normal text-gray-500 dark:text-gray-400">
-                    @for(child of support?.items; track child){
-                        <div class="mt-4">
-                            <b>{{ child?.label }}</b>:                                
-                            @if(child?.link != null){
-                                <a href="{{child?.link}}" target="_blank" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline break-words">
-                                  {{child?.text}}
-                                </a>
-                              } @else {
-                                {{child?.text}}
-                              }
-                        </div>
-                    }
-                </div>
-            </div>
-        }
+      }
+
 
 }
 </div>

src/app/pages/user-profile/profile-sections/provider-revenue-sharing/provider-revenue-sharing.component.ts

@@ -3,17 +3,19 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {LocalStorageService} from "src/app/services/local-storage.service";
-import { LoginInfo } from 'src/app/models/interfaces';
+import { LoginInfo, Report } from 'src/app/models/interfaces';
 import { RevenueSharingService } from 'src/app/services/revenue-sharing.service'
+import { RevenueReportComponent } from 'src/app/shared/revenue-report/revenue-report.component'
 import * as moment from 'moment';
 
 @Component({
   selector: 'provider-revenue-sharing',
   standalone: true,
-  imports: [TranslateModule, FontAwesomeModule, CommonModule],
+  imports: [TranslateModule, FontAwesomeModule, CommonModule, RevenueReportComponent],
   templateUrl: './provider-revenue-sharing.component.html',
   styleUrl: './provider-revenue-sharing.component.css'
 })
+
 export class ProviderRevenueSharingComponent implements OnInit {
   loading: boolean = false;
   subscription:any;
@@ -24,8 +26,11 @@ export class ProviderRevenueSharingComponent implements OnInit {
   support:any;
   errorMessage: any = '';
   showError:boolean=false;
+
 
   partyId:any='';
+  report: Report[]=[];
+
 
   constructor(
     private localStorage: LocalStorageService,
@@ -42,21 +47,7 @@ export class ProviderRevenueSharingComponent implements OnInit {
       this.loading=false;
       console.log('------')
       console.log(info)
-      for(let i=0; i<info.length; i++){
-        if(info[i].label == 'Subscription'){
-          this.subscription = info[i]
-        } else if(info[i].label == 'Billing History'){
-          this.billing = info[i]
-        } else if(info[i].label == 'Revenue Summary'){
-          this.revenueSummary = info[i]
-        } else if (info[i].label == 'Revenue Volume Monitoring'){
-          this.revenue = info[i]
-        } else if(info[i].label == 'Referral Program Area'){
-          this.referral = info[i]
-        } else if(info[i].label == 'Support'){
-          this.support = info[i]
-        }
-      }
+      this.report=info;
     } catch (error) {
       this.handleError(error, "There was an error accessing revenue sharing's data, please contact with an administrator.");
       this.loading=false;

src/app/shared/revenue-report/revenue-report.component.html

@@ -0,0 +1,36 @@
+<div class="text-lg font-normal text-gray-500 dark:text-gray-400">
+
+    <!-- LABEL + VALUE on one line -->
+    <div class="flex items-start gap-2">
+      <h3 class="text-xl font-bold text-primary-100 dark:text-white">
+        {{ node.label }}:
+      </h3>
+
+      <!-- TEXT or LINK -->
+      @if(node.text) {
+        <span>
+          @if(node.link) {
+            <a
+              [href]="node.link"
+              target="_blank"
+              class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline break-words">
+              {{ node.text }}
+            </a>
+          } @else {
+            {{ node.text }}
+          }
+        </span>
+      }
+    </div>
+
+    <!-- CHILDREN (indented) -->
+    @if(node.items?.length > 0) {
+      <div class="ml-6 mt-1">
+        @for (child of node.items; track child) {
+          <app-revenue-report [node]="child"></app-revenue-report>
+        }
+      </div>
+    }
+
+  </div>
+

src/app/shared/revenue-report/revenue-report.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RevenueReportComponent } from './revenue-report.component';
+
+describe('RevenueReportComponent', () => {
+  let component: RevenueReportComponent;
+  let fixture: ComponentFixture<RevenueReportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RevenueReportComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RevenueReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/revenue-report/revenue-report.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import {Report} from 'src/app/models/interfaces'
+
+@Component({
+  selector: 'app-revenue-report',
+  standalone: true,
+  imports: [],
+  templateUrl: './revenue-report.component.html',
+  styleUrl: './revenue-report.component.css'
+})
+export class RevenueReportComponent {
+  @Input() node!: any;
+}