feat: implement rating summary service methods and integrate rating display components into the organization header and pending ratings page

2026-07-22 12:13:50 -03:00
parent 383a5bc6b4
commit da3c3abb52
27 changed files with 1334 additions and 104 deletions
@@ -0,0 +1,120 @@
+.reviewsCarousel {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 25px 0 22px;
+}
+
+.header {
+    margin: 0 10px 5px;
+}
+
+.header h2 {
+    margin: 0;
+    padding-bottom: 10px;
+    color: #241f1b;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+
+.header p {
+    max-width: 620px;
+    margin: 0 0 10px;
+    color: #6d6258;
+    font-size: 0.95rem;
+    line-height: 1.45;
+}
+
+.scroller {
+    display: flex;
+    gap: 20px;
+    width: 100%;
+    padding: 0 10px 12px;
+    overflow-x: auto;
+    cursor: grab;
+    scroll-padding-left: 10px;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: thin;
+    user-select: none;
+}
+
+.dragging {
+    cursor: grabbing;
+}
+
+.reviewCard {
+    display: flex;
+    flex: 0 0 min(360px, calc(100vw - 40px));
+    flex-direction: column;
+    gap: 13px;
+    min-height: 176px;
+    padding: 20px;
+    border: 1px solid rgba(45, 29, 21, 0.1);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 10px 24px rgba(45, 29, 21, 0.06);
+    scroll-snap-align: start;
+}
+
+.rating {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.stars {
+    color: #e8a533;
+    font-size: 1.35rem;
+    letter-spacing: 0.06em;
+    line-height: 1;
+}
+
+.score {
+    color: #342d27;
+    font-size: 0.95rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.comment {
+    flex: 1;
+    margin: 0;
+    color: #2f2924;
+    font-size: 0.98rem;
+    line-height: 1.58;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    color: #8b8178;
+    font-size: 0.86rem;
+}
+
+.authorBlock {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 10px;
+}
+
+.author {
+    overflow: hidden;
+    color: #342d27;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (max-width: 700px) {
+    .reviewCard {
+        flex-basis: calc(100vw - 40px);
+    }
+
+    .footer {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+}
@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useRef, useState, type PointerEvent, type ReactElement } from "react";
+import classNames from "classnames";
+import Avatar from "@components/Avatar/Avatar";
+import { RatingTargetReviewItem, RatingTargetType } from "@core/Models/Ratings.model";
+import { ratingTargetReviews } from "@services/Ratings.Service";
+import style from "./ReviewsCarousel.module.css";
+
+interface ReviewsCarouselProps {
+    targetType: RatingTargetType;
+    targetId: string;
+    title?: string;
+    subtitle?: string;
+    className?: string;
+    limit?: number;
+}
+
+const DEFAULT_LIMIT = 20;
+
+const formatReviewDate = (date: string): string => {
+    return new Intl.DateTimeFormat("es-AR", {
+        month: "long",
+        year: "numeric",
+    }).format(new Date(date));
+};
+
+const renderStars = (score: number): string => {
+    const normalizedScore = Math.min(Math.max(Math.round(score), 1), 5);
+    return "★".repeat(normalizedScore) + "☆".repeat(5 - normalizedScore);
+};
+
+const formatScore = (score: number): string => score.toFixed(1);
+
+export default function ReviewsCarousel({
+    targetType,
+    targetId,
+    title = "Lo que dicen quienes ya reservaron",
+    subtitle,
+    className,
+    limit = DEFAULT_LIMIT,
+}: ReviewsCarouselProps): ReactElement | null {
+    const [reviews, setReviews] = useState<RatingTargetReviewItem[]>([]);
+    const [isDragging, setIsDragging] = useState(false);
+    const scrollerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        let active = true;
+
+        ratingTargetReviews({ targetType, targetId, limit })
+            .then((targetReviews) => {
+                if (active) {
+                    setReviews(targetReviews.filter((review) => review.comment.trim().length > 0));
+                }
+            })
+            .catch(() => {
+                if (active) {
+                    setReviews([]);
+                }
+            });
+
+        return () => {
+            active = false;
+        };
+    }, [targetType, targetId, limit]);
+
+    const handlePointerDown = () => {
+        setIsDragging(true);
+    };
+
+    const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+        const scroller = scrollerRef.current;
+
+        if (!isDragging || !scroller) {
+            return;
+        }
+
+        scroller.scrollLeft -= event.movementX;
+    };
+
+    const stopDragging = () => {
+        setIsDragging(false);
+    };
+
+    if (reviews.length === 0) {
+        return null;
+    }
+
+    return (
+        <section className={classNames(style.reviewsCarousel, className)} aria-label="Opiniones">
+            <div className={style.header}>
+                <h2>{title}</h2>
+                {subtitle && <p>{subtitle}</p>}
+            </div>
+            <div
+                ref={scrollerRef}
+                className={classNames(style.scroller, { [style.dragging]: isDragging })}
+                onPointerDown={handlePointerDown}
+                onPointerMove={handlePointerMove}
+                onPointerUp={stopDragging}
+                onPointerLeave={stopDragging}
+            >
+                {reviews.map((review) => (
+                    <article className={style.reviewCard} key={review.id}>
+                        <div className={style.rating} aria-label={`${formatScore(review.score)} de 5 estrellas`}>
+                            <span className={style.stars} aria-hidden="true">
+                                {renderStars(review.score)}
+                            </span>
+                            <span className={style.score}>{formatScore(review.score)}</span>
+                        </div>
+                        <p className={style.comment}>“{review.comment}”</p>
+                        <div className={style.footer}>
+                            <div className={style.authorBlock}>
+                                <Avatar
+                                    name={`review-author-${review.id}`}
+                                    src={review.author.avatarUrl || review.author.displayName}
+                                    alt={`Avatar de ${review.author.displayName}`}
+                                    size="small"
+                                    border="none"
+                                />
+                                <span className={style.author}>{review.author.displayName}</span>
+                            </div>
+                            <time dateTime={review.createdAt}>{formatReviewDate(review.createdAt)}</time>
+                        </div>
+                    </article>
+                ))}
+            </div>
+        </section>
+    );
+}