Blame view

components/detail/GuestReviews.js 8.81 KB
Ravindra Kanojiya committed
1
import Image from "next/image";
Ravindra Kanojiya committed
2
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
.  
jaymehta committed
3 4 5 6 7 8
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";
.  
jaymehta committed
9
import { dateFormatFn } from "../../services/imageHandling";
Ravindra Kanojiya committed
10 11 12 13 14
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";
.  
jaymehta committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28

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);
  };
Ravindra Kanojiya committed
29

.  
jaymehta committed
30 31
  console.log("newRating", rating);

Ravindra Kanojiya committed
32 33 34 35 36
  return (
    <>
      <section className="guest-reviews-session">
        <div className="container">
          <div className="row">
Ravindra Kanojiya committed
37
            <div className="col-md-12">
Ravindra Kanojiya committed
38 39 40 41 42 43
              <div className="row">
                <div className="col-12">
                  <div className="head-btn">
                    <div className="head01">
                      <div className="title">Guest reviews</div>
                    </div>
.  
jaymehta committed
44
                    {/* <a href="" className="view-all-reviews-btn">
Ravindra Kanojiya committed
45
                      View All Reviews
.  
jaymehta committed
46
                    </a> */}
Ravindra Kanojiya committed
47 48 49 50 51 52 53
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-12">
                  <div className="product-reviews">
                    <span className="rating">8.8</span>
.  
jaymehta committed
54 55
                    <span>Fabulous</span>
                    <span className="review">{` ${reviews.length} reviews`}</span>
Ravindra Kanojiya committed
56 57 58 59
                  </div>
                </div>
              </div>
              <div className="row">
Ravindra Kanojiya committed
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
                <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"
                  >
Ravindra Kanojiya committed
91
                    {reviews && reviews.length > 0 ? (
Ravindra Kanojiya committed
92 93 94 95 96 97 98 99 100 101 102 103
                      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}
Ravindra Kanojiya committed
104 105
                                  starRatedColor="#ffe20" // Set the rated color to yellow
                                  starHoverColor="#ffe20" // Set the hover color to yellow
106
                                  changeRating={() => { }}
Ravindra Kanojiya committed
107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
                                  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>
                        );
Ravindra Kanojiya committed
129 130 131 132
                      })
                    ) : (
                      <div className="d-flex justify-content-center"><strong>No reviews available</strong></div>
                    )}
Ravindra Kanojiya committed
133 134
                  </Swiper>
                </div>
Ravindra Kanojiya committed
135
              </div>
.  
jaymehta committed
136 137 138 139 140 141 142 143 144
              {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"
.  
jaymehta committed
145 146
                      rating={3}
                      starRatedColor="#000" // Set the rated color to yellow
Ravindra Kanojiya committed
147
                      starHoverColor="#ffe20" // Set the hover color to yellow
.  
jaymehta committed
148 149 150 151 152 153
                      changeRating={handleRatingChange}
                      numberOfStars={5}
                      name="rating"
                      starDimension="20px" // Set star width and height
                    />
                  </div>
154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171
                  <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>
.  
jaymehta committed
172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
                  <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>
              )}
Ravindra Kanojiya committed
189 190 191
            </div>
          </div>
        </div>
.  
jaymehta committed
192 193
        {readMoreText && (
          <Modal
Ravindra Kanojiya committed
194
            className="guest-reviews-detail"
.  
jaymehta committed
195 196 197 198 199 200 201
            centered
            show={showModal}
            onHide={() => {
              setshowModal();
              setreadMoreText(null);
            }}
          >
Ravindra Kanojiya committed
202 203 204 205 206
            <Modal.Header closeButton>
              <div className="head">
                <div className="name">Review from {readMoreText.attributes.endUser.data.attributes.name}</div>
              </div>
            </Modal.Header>
.  
jaymehta committed
207 208 209 210 211
            <Modal.Body>
              <div>{readMoreText.attributes.comments}</div>
            </Modal.Body>
          </Modal>
        )}
Ravindra Kanojiya committed
212 213 214 215 216 217
      </section>
    </>
  );
};

export default GuestReviews;