feat: implement full-stack ratings system for appointments with user submission and pending ratings dashboard integration
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
.bannerContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 2rem;
|
||||
background: linear-gradient(135deg, var(--white) 0%, var(--white-dark) 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid var(--wine-lighterX2);
|
||||
margin: 2rem auto;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.popupContainer {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.5rem;
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 40px rgba(51, 0, 128, 0.15);
|
||||
border: 1px solid var(--wine-lighterX2);
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
z-index: 1000;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--gray-dark);
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.closeButton:hover {
|
||||
background: var(--white-dark);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--wine-red);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--wine-superdark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.95rem;
|
||||
color: var(--gray-dark);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
display: inline-block;
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
|
||||
color: var(--white);
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 4px 15px rgba(255, 42, 127, 0.3);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ctaButton:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 42, 127, 0.4);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bannerContainer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-align: left;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.popupContainer {
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
left: 1rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useSessionStore } from "@core/Store/Sesion.Store";
|
||||
import { pendingRatingsByUser } from "@services/Ratings.Service";
|
||||
import style from "./PendingRatingsBanner.module.css";
|
||||
|
||||
interface PendingRatingsBannerProps {
|
||||
variant?: "banner" | "popup";
|
||||
delay?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function PendingRatingsBanner({
|
||||
variant = "banner",
|
||||
delay = 3000,
|
||||
className = "",
|
||||
}: PendingRatingsBannerProps) {
|
||||
const SessionInfo = useSessionStore();
|
||||
const [hasPendingRatings, setHasPendingRatings] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(variant === "banner");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
if (!SessionInfo.userId) {
|
||||
setHasPendingRatings(false);
|
||||
return;
|
||||
}
|
||||
|
||||
pendingRatingsByUser({ sessionUser: SessionInfo.userId })
|
||||
.then((ratings) => {
|
||||
if (!cancelled) {
|
||||
setHasPendingRatings(ratings.length > 0);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (!cancelled) {
|
||||
setHasPendingRatings(false);
|
||||
}
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [SessionInfo.userId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasPendingRatings) {
|
||||
setIsVisible(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (variant === "banner") {
|
||||
setIsVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, delay);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [variant, delay, hasPendingRatings]);
|
||||
|
||||
if (!SessionInfo.userId || !hasPendingRatings) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const containerClassName = [variant === "banner" ? style.bannerContainer : style.popupContainer, className]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<button onClick={() => setIsVisible(false)} className={style.closeButton} aria-label="Cerrar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<div className={style.contentWrapper}>
|
||||
<span className={style.eyebrow}>Calificaciones pendientes</span>
|
||||
<h3 className={style.title}>Tenés experiencias pendientes para calificar</h3>
|
||||
<p className={style.description}>Tu opinión ayuda a mejorar las recomendaciones.</p>
|
||||
</div>
|
||||
<Link href="/landing/pending-ratings" className={style.ctaButton}>
|
||||
Calificar ahora
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
|
||||
if (variant === "banner") {
|
||||
return isVisible ? <div className={containerClassName}>{content}</div> : null;
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
className={containerClassName}
|
||||
initial={{ opacity: 0, y: 50, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 50, scale: 0.95 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 25 }}
|
||||
>
|
||||
{content}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user