valtech-components 2.0.787 → 2.0.795

package/src/lib/components/molecules/content-reaction/content-reaction.component.html

@@ -0,0 +1,81 @@
+<div
+  class="content-reaction"
+  [class.disabled]="resolvedProps().disabled"
+  [class.readonly]="resolvedProps().readonly"
+>
+  <!-- Loading inicial -->
+  @if (state().isLoading && !state().selectedValue) {
+    <div class="loading-container">
+      <ion-spinner name="crescent"></ion-spinner>
+    </div>
+  } @else {
+    <!-- Pregunta -->
+    <p class="question">{{ resolvedProps().question }}</p>
+
+    <!-- Emojis -->
+    <div class="emoji-container">
+      @for (value of reactionValues; track value; let i = $index) {
+        <button
+          type="button"
+          class="emoji-button"
+          [class.selected]="isSelected(value)"
+          [class.negative]="value === 'negative' && isSelected(value)"
+          [class.neutral]="value === 'neutral' && isSelected(value)"
+          [class.positive]="value === 'positive' && isSelected(value)"
+          [attr.aria-label]="getEmojiLabel(i)"
+          [attr.aria-pressed]="isSelected(value)"
+          [disabled]="resolvedProps().disabled || resolvedProps().readonly"
+          (click)="selectReaction(value)"
+        >
+          <span class="emoji">{{ getEmoji(i) }}</span>
+        </button>
+      }
+    </div>
+
+    <!-- Campo de comentario (solo si hay selección) -->
+    @if (showCommentField()) {
+      <div class="comment-section">
+        <ion-textarea
+          [value]="state().comment"
+          [placeholder]="resolvedProps().commentPlaceholder"
+          [maxlength]="resolvedProps().maxCommentLength"
+          [disabled]="resolvedProps().disabled"
+          [rows]="3"
+          class="comment-textarea"
+          (ionInput)="updateComment($event)"
+        ></ion-textarea>
+        <span class="char-count">
+          {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }}
+        </span>
+      </div>
+    }
+
+    <!-- Botón de envío -->
+    @if (state().selectedValue && !state().isSubmitted) {
+      <ion-button
+        expand="block"
+        [disabled]="!canSubmit()"
+        (click)="submitReaction()"
+        class="submit-button"
+      >
+        @if (state().isLoading) {
+          <ion-spinner name="crescent"></ion-spinner>
+        } @else {
+          {{ state().hadPreviousReaction ? t('update') : t('submit') }}
+        }
+      </ion-button>
+    }
+
+    <!-- Mensaje de confirmación -->
+    @if (state().isSubmitted) {
+      <p class="submitted-message">
+        {{ t('thankYou') }}
+      </p>
+    }
+
+    <!-- Error -->
+    @if (state().error) {
+      <p class="error-message">{{ state().error }}</p>
+    }
+  }
+</div>

package/src/lib/components/molecules/content-reaction/content-reaction.component.scss

@@ -0,0 +1,157 @@
+:host {
+  display: block;
+}
+
+.content-reaction {
+  padding: 16px;
+  text-align: center;
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &.readonly {
+    pointer-events: none;
+  }
+}
+
+.question {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--ion-color-dark);
+  margin: 0 0 16px 0;
+}
+
+.emoji-container {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.emoji-button {
+  background: transparent;
+  border: 2px solid var(--ion-color-light-shade);
+  border-radius: 50%;
+  width: 64px;
+  height: 64px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  .emoji {
+    font-size: 32px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    line-height: 1;
+  }
+
+  &:hover:not(:disabled) {
+    transform: scale(1.1);
+    border-color: var(--ion-color-medium);
+  }
+
+  &:focus {
+    outline: 2px solid var(--ion-color-primary);
+    outline-offset: 2px;
+  }
+
+  &.selected {
+    transform: scale(1.2);
+
+    .emoji {
+      transform: scale(1.1);
+    }
+
+    &.negative {
+      border-color: var(--ion-color-danger);
+      background: var(--ion-color-danger-tint);
+      box-shadow: 0 4px 12px rgba(var(--ion-color-danger-rgb), 0.3);
+    }
+
+    &.neutral {
+      border-color: var(--ion-color-warning);
+      background: var(--ion-color-warning-tint);
+      box-shadow: 0 4px 12px rgba(var(--ion-color-warning-rgb), 0.3);
+    }
+
+    &.positive {
+      border-color: var(--ion-color-success);
+      background: var(--ion-color-success-tint);
+      box-shadow: 0 4px 12px rgba(var(--ion-color-success-rgb), 0.3);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.comment-section {
+  margin-top: 16px;
+  animation: slideIn 0.3s ease-out;
+
+  .comment-textarea {
+    --background: var(--ion-color-light);
+    --border-radius: 8px;
+    --padding-start: 12px;
+    --padding-end: 12px;
+    width: 100%;
+  }
+
+  .char-count {
+    display: block;
+    text-align: right;
+    font-size: 12px;
+    color: var(--ion-color-medium);
+    margin-top: 4px;
+  }
+}
+
+.submit-button {
+  margin-top: 16px;
+  --border-radius: 8px;
+}
+
+.submitted-message {
+  margin-top: 16px;
+  color: var(--ion-color-success);
+  font-weight: 500;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.error-message {
+  margin-top: 8px;
+  color: var(--ion-color-danger);
+  font-size: 14px;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/lib/components/molecules/content-reaction/content-reaction.component.ts

@@ -0,0 +1,273 @@
+import {
+  Component,
+  inject,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  signal,
+  computed,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonSpinner,
+  IonTextarea,
+} from '@ionic/angular/standalone';
+import { FeedbackService } from '../../../services/feedback/feedback.service';
+import { ReactionValue } from '../../../services/feedback/types';
+import { ToastService } from '../../../services/toast.service';
+import { I18nService } from '../../../services/i18n';
+import { AuthService } from '../../../services/auth/auth.service';
+import {
+  ContentReactionMetadata,
+  ContentReactionState,
+  ReactionSubmitEvent,
+  ReactionChangeEvent,
+} from './types';
+
+/**
+ * Componente para reacciones de contenido con emojis.
+ *
+ * @example
+ * ```html
+ * <val-content-reaction
+ *   [props]="{
+ *     entityRef: { entityType: 'article', entityId: 'art-123' },
+ *     question: '¿Te fue útil este artículo?'
+ *   }"
+ *   (reactionSubmit)="onReactionSubmit($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'val-content-reaction',
+  standalone: true,
+  imports: [CommonModule, FormsModule, IonButton, IonSpinner, IonTextarea],
+  templateUrl: './content-reaction.component.html',
+  styleUrls: ['./content-reaction.component.scss'],
+})
+export class ContentReactionComponent implements OnInit, OnChanges {
+  private feedbackService = inject(FeedbackService);
+  private toast = inject(ToastService);
+  private i18n = inject(I18nService);
+  private auth = inject(AuthService, { optional: true });
+
+  @Input() props: Partial<ContentReactionMetadata> = {};
+  @Output() reactionSubmit = new EventEmitter<ReactionSubmitEvent>();
+  @Output() reactionChange = new EventEmitter<ReactionChangeEvent>();
+
+  // Estado reactivo
+  state = signal<ContentReactionState>({
+    selectedValue: null,
+    comment: '',
+    isLoading: false,
+    isSubmitted: false,
+    hadPreviousReaction: false,
+    error: null,
+  });
+
+  // Valores por defecto
+  readonly defaultEmojis: [string, string, string] = ['😞', '😐', '😊'];
+  readonly defaultLabels: [string, string, string] = [
+    'No me ayudó',
+    'Regular',
+    'Muy útil',
+  ];
+  readonly reactionValues: ReactionValue[] = ['negative', 'neutral', 'positive'];
+
+  // Computed properties
+  resolvedProps = computed(() => ({
+    entityRef: this.props.entityRef!,
+    question: this.props.question || this.t('question'),
+    showComment: this.props.showComment ?? true,
+    commentPlaceholder: this.props.commentPlaceholder || this.t('commentPlaceholder'),
+    maxCommentLength: this.props.maxCommentLength ?? 500,
+    emojis: this.props.emojis || this.defaultEmojis,
+    emojiLabels: this.props.emojiLabels || this.defaultLabels,
+    showThankYou: this.props.showThankYou ?? true,
+    thankYouMessage: this.props.thankYouMessage || this.t('thankYou'),
+    disabled: this.props.disabled ?? false,
+    readonly: this.props.readonly ?? false,
+  }));
+
+  showCommentField = computed(
+    () =>
+      this.state().selectedValue !== null && this.resolvedProps().showComment
+  );
+
+  canSubmit = computed(
+    () => this.state().selectedValue !== null && !this.state().isLoading
+  );
+
+  ngOnInit() {
+    this.loadPreviousReaction();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['props'] && !changes['props'].firstChange) {
+      this.loadPreviousReaction();
+    }
+  }
+
+  private async loadPreviousReaction(): Promise<void> {
+    if (!this.props.entityRef) return;
+
+    // Si hay initialValue, usarlo directamente sin consultar
+    if (this.props.initialValue) {
+      this.state.update((s) => ({
+        ...s,
+        selectedValue: this.props.initialValue!,
+        hadPreviousReaction: true,
+        isLoading: false,
+        isSubmitted: true,
+      }));
+      return;
+    }
+
+    // Si skipInitialCheck está activo, no consultar
+    if (this.props.skipInitialCheck) {
+      return;
+    }
+
+    this.state.update((s) => ({ ...s, isLoading: true, error: null }));
+
+    try {
+      const check = await this.feedbackService.checkFeedback(
+        this.props.entityRef.entityType,
+        this.props.entityRef.entityId
+      );
+
+      if (check.hasFeedback && check.reactionValue) {
+        this.state.update((s) => ({
+          ...s,
+          selectedValue: check.reactionValue!,
+          hadPreviousReaction: true,
+          isLoading: false,
+          isSubmitted: true,
+        }));
+      } else {
+        this.state.update((s) => ({ ...s, isLoading: false }));
+      }
+    } catch (error) {
+      console.error('Error loading previous reaction:', error);
+      this.state.update((s) => ({ ...s, isLoading: false }));
+    }
+  }
+
+  selectReaction(value: ReactionValue): void {
+    if (this.resolvedProps().disabled || this.resolvedProps().readonly) return;
+
+    const previousValue = this.state().selectedValue;
+
+    this.state.update((s) => ({
+      ...s,
+      selectedValue: value,
+      isSubmitted: false,
+      error: null,
+    }));
+
+    this.reactionChange.emit({ value, previousValue });
+  }
+
+  async submitReaction(): Promise<void> {
+    const currentState = this.state();
+    const props = this.resolvedProps();
+
+    if (!currentState.selectedValue || props.disabled) return;
+
+    this.state.update((s) => ({ ...s, isLoading: true, error: null }));
+
+    try {
+      // Determinar si usar endpoint anónimo o autenticado
+      const isAuthenticated = this.auth?.isAuthenticated() ?? false;
+      const useAnonymous = this.props.allowAnonymous && !isAuthenticated;
+
+      if (useAnonymous) {
+        // Usar endpoint anónimo (público)
+        await this.feedbackService.createAnonymousReaction(
+          props.entityRef,
+          currentState.selectedValue,
+          currentState.comment || undefined
+        );
+      } else {
+        // Usar endpoint autenticado
+        await this.feedbackService.createReaction(
+          props.entityRef,
+          currentState.selectedValue,
+          currentState.comment || undefined
+        );
+      }
+
+      this.state.update((s) => ({
+        ...s,
+        isLoading: false,
+        isSubmitted: true,
+        hadPreviousReaction: !useAnonymous, // Solo para autenticados
+      }));
+
+      this.reactionSubmit.emit({
+        value: currentState.selectedValue,
+        comment: currentState.comment || undefined,
+        entityRef: props.entityRef,
+        isUpdate: currentState.hadPreviousReaction,
+      });
+
+      if (props.showThankYou) {
+        this.toast.show({
+          message: props.thankYouMessage,
+          duration: 2000,
+          position: 'bottom',
+          color: 'dark',
+        });
+      }
+    } catch (error) {
+      console.error('Error submitting reaction:', error);
+      this.state.update((s) => ({
+        ...s,
+        isLoading: false,
+        error: this.t('errorSubmitting'),
+      }));
+
+      this.toast.show({
+        message: this.t('errorSubmitting'),
+        duration: 3000,
+        position: 'bottom',
+        color: 'danger',
+      });
+    }
+  }
+
+  updateComment(event: CustomEvent): void {
+    const value = event.detail.value || '';
+    this.state.update((s) => ({ ...s, comment: value }));
+  }
+
+  getEmoji(index: number): string {
+    return this.resolvedProps().emojis[index];
+  }
+
+  getEmojiLabel(index: number): string {
+    return this.resolvedProps().emojiLabels[index];
+  }
+
+  isSelected(value: ReactionValue): boolean {
+    return this.state().selectedValue === value;
+  }
+
+  t(key: string): string {
+    const translations: Record<string, string> = {
+      question: '¿Te resultó útil este contenido?',
+      commentPlaceholder: 'Cuéntanos más (opcional)...',
+      submit: 'Enviar opinión',
+      update: 'Actualizar opinión',
+      thankYou: '¡Gracias por tu opinión!',
+      submitted: 'Tu opinión ha sido registrada',
+      errorSubmitting: 'Error al enviar. Intenta de nuevo.',
+    };
+    return this.i18n.t(key, 'ContentReaction') || translations[key] || key;
+  }
+}