import Image from "next/image"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { useRouter } from "next/router"; import React, { useState } from "react"; import { Button, Modal } from "react-bootstrap"; import { useSelector } from "react-redux"; import StarRatings from "react-star-ratings"; import { postReviewEndUser } from "../../redux/actions/reviewsAction"; import { dateFormatFn } from "../../services/imageHandling"; import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Autoplay, Pagination } from "swiper/modules"; import { motion } from "framer-motion"; import "swiper/css"; import "swiper/css/pagination"; const GuestReviews = ({ activityById }) => { const [rating, setRating] = useState(0); const [comments, setcomments] = useState(); const [readMoreText, setreadMoreText] = useState(); const [showModal, setshowModal] = useState(false); const { endUser } = useSelector(state => state.endUser); const { reviews } = useSelector(state => state.reviews); const router = useRouter(); console.log("reviews", reviews); const handleRatingChange = newRating => { setRating(newRating); }; console.log("newRating", rating); return ( <> <section className="guest-reviews-session"> <div className="container"> <div className="row"> <div className="col-md-12"> <div className="row"> <div className="col-12"> <div className="head-btn"> <div className="head01"> <div className="title">Guest reviews</div> </div> {/* <a href="" className="view-all-reviews-btn"> View All Reviews </a> */} </div> </div> </div> <div className="row"> <div className="col-12"> <div className="product-reviews"> <span className="rating">8.8</span> <span>Fabulous</span> <span className="review">{` ${reviews.length} reviews`}</span> </div> </div> </div> <div className="row"> <div className="col-md-12"> <Swiper // slidesPerView={2} autoplay={{ delay: 9000, disableOnInteraction: false }} autoHeight={true} spaceBetween={10} pagination={{ clickable: true }} // navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }} breakpoints={{ 640: { slidesPerView: 1, spaceBetween: 20, autoplay: true }, 768: { slidesPerView: 1, spaceBetween: 40 }, 1024: { slidesPerView: 2, spaceBetween: 40 } }} modules={[Navigation, Autoplay, Pagination]} className="mySwiper-guestreview" > {reviews && reviews.length > 0 ? ( reviews.map(data => { return ( <SwiperSlide> <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <div className="guest-reviews-detail"> <div className="head"> <div className="name">{data.attributes.endUser.data.attributes.name}</div> <div className="month">{dateFormatFn(data.attributes.createdAt)}</div> </div> <StarRatings className="col-3 mx-2" rating={data.attributes.rating} starRatedColor="#ffe20" // Set the rated color to yellow starHoverColor="#ffe20" // Set the hover color to yellow changeRating={() => { }} numberOfStars={5} name="rating" starDimension="20px" // Set star width and height /> <div className="review-content"> "{data.attributes.comments.length > 180 ? `${data.attributes.comments.slice(0, 180)}...` : data.attributes.comments} {data.attributes.comments.length > 180 && ( <a onClick={() => { setreadMoreText(data); setshowModal(true); }} > Read More </a> )} </div> {/* View All */} </div> </motion.div> </SwiperSlide> ); }) ) : ( <div className="d-flex justify-content-center"><strong>No reviews available</strong></div> )} </Swiper> </div> </div> {endUser && ( <div className="row"> <div className="head01"> <div className="title">Post a review:</div> </div> <div> <label className=" mb-3 ">Rating: </label>{" "} <StarRatings className="col-3 mx-2" rating={3} starRatedColor="#000" // Set the rated color to yellow starHoverColor="#ffe20" // Set the hover color to yellow changeRating={handleRatingChange} numberOfStars={5} name="rating" starDimension="20px" // Set star width and height /> </div> <div className="row"> <div className="col-md-6"> <textarea // style={{ width: "50%" }} rows={4} className="p-2 w-100" placeholder="Comments" name="comments" value={comments} onChange={e => { e.preventDefault(); // console.log(e.target.value);4 setcomments(e.target.value); // setrejectionReasonText(e.target.value); }} /> </div> </div> <div className="view-all-btn my-3"> <Button disabled={rating == 0 || comments == ""} variant="primary" onClick={async e => { e.preventDefault(); const res = await postReviewEndUser({ endUserId: endUser.id, activityId: router.query.id, comments, rating }); console.log("res", res); setRating(0); setcomments(""); }} > Submit </Button> </div> </div> )} </div> </div> </div> {readMoreText && ( <Modal className="guest-reviews-detail" centered show={showModal} onHide={() => { setshowModal(); setreadMoreText(null); }} > <Modal.Header closeButton> <div className="head"> <div className="name">Review from {readMoreText.attributes.endUser.data.attributes.name}</div> </div> </Modal.Header> <Modal.Body> <div>{readMoreText.attributes.comments}</div> </Modal.Body> </Modal> )} </section> </> ); }; export default GuestReviews;