frontend: Updated pro-feature card

frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.html

@@ -1,5 +1,5 @@
 <mat-card class="base-card" [style.background-color]="cardBackgroundColor" [class]="{ disabled: disabled }">
-	<div class="card-header">
+	<div class="card-header" [class.balancedPadding]="!showCardContent">
 		<div class="icon-container" [style.background-color]="iconBackgroundColor">
 			@if (iconUrl) {
 				<img [src]="iconUrl" alt="App Logo" class="app-logo" />
@@ -11,6 +11,8 @@
 			<div class="card-title">{{ title }}</div>
 			<div class="card-subtitle">{{ description }}</div>
 		</div>
+
+		<ng-content select="[card-header-tag]"></ng-content>
 	</div>
 	@if (showCardContent) {
 		<div class="divider"></div>

frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.scss

@@ -15,6 +15,11 @@
 	align-items: center;
 	gap: 16px;
 	padding: 20px 20px 10px 20px;
+	position: relative;
+}
+
+.card-header.balancedPadding {
+	padding: 20px !important;
 }
 
 .card-content {
@@ -60,6 +65,7 @@
 .text-container {
 	display: flex;
 	flex-direction: column;
+	flex-grow: 1;
 }
 
 .card-title {

frontend/projects/shared-call-components/src/lib/components/cards/pro-feature/pro-feature.component.ts

@@ -1,40 +1,64 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { BaseCardComponent } from '../base-card/base-card.component';
 import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { NotificationService } from '../../../services';
 
 @Component({
 	selector: 'ov-pro-feature-card',
 	standalone: true,
-	imports: [BaseCardComponent, MatButtonModule],
+	imports: [BaseCardComponent, MatButtonModule, MatChipsModule],
 	template: `
 		<ov-base-card
-			[disabled]="false"
+			class="pro-feature-card"
 			[title]="title"
 			[description]="description"
 			[icon]="icon"
 			[iconUrl]="iconUrl"
 			[iconBackgroundColor]="iconBackgroundColor"
+			(click)="showDialog()"
 		>
-			<div class="pro-feature-content" card-content>
-				<h3 class="pro-title">Upgrade to OpenVidu PRO</h3>
-				<p class="pro-description">
-					Unlock this feature by upgrading to a Pro account. You can upgrade your account and start using this
-					feature.
-				</p>
-				<div class="pro-feature-button">
-					<button mat-flat-button (click)="goToOpenVidu()">Upgrade to Pro</button>
-				</div>
+			<div card-header-tag>
+				<mat-chip-set aria-label="OpenVidu Edition">
+					<mat-chip [disableRipple]="true">PRO</mat-chip>
+				</mat-chip-set>
 			</div>
 		</ov-base-card>
 	`,
 	styles: `
-		.pro-feature-content {
-			padding: 25px;
-			text-align: center;
+		.pro-feature-card {
+			cursor: pointer;
+		}
+
+		::ng-deep .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
+			background-color: #077692 !important;
+			border-radius: 8px;
+			border: 1px solid #077692;
+		}
+		::ng-deep .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
+			color: #ffffff !important;
+			font-weight: bold;
 		}
 	`
 })
 export class ProFeatureCardComponent extends BaseCardComponent {
+	constructor(
+		cdr: ChangeDetectorRef,
+		private notificationService: NotificationService
+	) {
+		super(cdr);
+	}
+
+	showDialog() {
+		this.notificationService.showDialog({
+			title: 'Upgrade to OpenVidu PRO',
+			message:
+				'Unlock this feature by upgrading to a Pro account. You can upgrade your account and start using this feature.',
+			confirmText: 'Upgrade to Pro',
+			cancelText: 'Cancel',
+			confirmCallback: this.goToOpenVidu.bind(this)
+		});
+	}
 	goToOpenVidu() {
 		window.open('https://openvidu.io/pricing/', '_blank');
 	}

frontend/projects/shared-call-components/src/lib/components/dialog/dialog.component.scss

@@ -1,3 +1,15 @@
+.dialog-title {
+	text-align: center;
+}
 button {
 	margin-right: 8px;
 }
+
+.dialog-action {
+	margin: auto;
+}
+
+.confirm-button {
+	background-color: #007bff;
+	color: white;
+}

frontend/projects/shared-call-components/src/lib/components/dialog/dialog.component.ts

@@ -1,24 +1,34 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
+import type { DialogOptions } from '../../models';
 
 @Component({
 	selector: 'ov-dialog',
 	standalone: true,
 	imports: [MatButtonModule, MatDialogActions, MatDialogContent],
-	template: `<h2 mat-dialog-title>Delete file</h2>
-		<mat-dialog-content> Would you like to delete? </mat-dialog-content>
-		<mat-dialog-actions>
-			<button mat-button mat-dialog-close (click)="close()">No</button>
-			<button mat-button mat-dialog-close cdkFocusInitial (click)="close()">Ok</button>
+	template: ` <h2 mat-dialog-title class="dialog-title">{{ data.title }}</h2>
+		<mat-dialog-content> {{ data.message }} </mat-dialog-content>
+		<mat-dialog-actions class="dialog-action">
+			<button mat-button mat-dialog-close (click)="close('cancel')">{{ data.cancelText }}</button>
+			<button mat-flat-button mat-dialog-close cdkFocusInitial (click)="close('confirm')">
+				{{ data.confirmText }}
+			</button>
 		</mat-dialog-actions>`,
 	styleUrl: './dialog.component.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DialogComponent {
 	readonly dialogRef = inject(MatDialogRef<DialogComponent>);
 
-	close(): void {
+	constructor(@Inject(MAT_DIALOG_DATA) public data: DialogOptions) {}
+
+	close(type: 'confirm' | 'cancel'): void {
 		this.dialogRef.close();
+		if (type === 'confirm' && this.data.confirmCallback) {
+			this.data.confirmCallback();
+		} else if (type === 'cancel' && this.data.cancelCallback) {
+			this.data.cancelCallback();
+		}
 	}
 }

frontend/projects/shared-call-components/src/lib/models/index.ts

@@ -1,2 +1,3 @@
 export * from './sidenav.model';
+export * from './notification.model';
 export { ApplicationMode } from './context.model';

frontend/projects/shared-call-components/src/lib/models/notification.model.ts

@@ -0,0 +1,8 @@
+export interface DialogOptions {
+	title?: string;
+	message: string;
+	confirmText?: string;
+	cancelText?: string;
+	cancelCallback?: () => void;
+	confirmCallback?: () => void;
+}

frontend/projects/shared-call-components/src/lib/services/notification/notification.service.ts

@@ -5,13 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SpinnerComponent } from '../../components/spinner/spinner.component';
 import { DialogComponent } from '../../components/dialog/dialog.component';
-
-export interface DialogOptions {
-	title?: string;
-	message: string;
-	confirmText?: string;
-	cancelText?: string;
-}
+import { DialogOptions } from '../../models';
 
 @Injectable({
 	providedIn: 'root'
@@ -55,9 +49,9 @@ export class NotificationService {
 	// Método para mostrar un diálogo
 	showDialog(options: DialogOptions): void {
 		this.dialog.open(DialogComponent, {
-			data: options, // Pasa las opciones al componente del diálogo
+			data: options,
 			width: '400px',
-			disableClose: true // Evita que se cierre haciendo clic fuera del diálogo
+			disableClose: true
 		});
 	}