Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit fcca4121 by Ravindra Kanojiya
Options

updated

1 parent 93ce6ebc
Inline Side-by-side
Showing 3 changed files with 100 additions and 42 deletions
components/admin/ReviewsListing.js
......@@ -37,7 +37,7 @@ const ReviewsListing = ({ activityId, setshowReviews, isVendor }) => {
<div className="container mt-5">
{reviews && !reviews.length > 0 && <Empty />}
{!loading ? (
<Accordion className="accordion-filter" defaultActiveKey="0" flush>
<Accordion className="accordion-filter accordion-01" defaultActiveKey="0" flush>
{reviews &&
reviews.map(item => {
return (
......
components/detail/GuestReviews.js
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";
......@@ -6,6 +7,11 @@ 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);
......@@ -49,43 +55,78 @@ const GuestReviews = ({ activityById }) => {
</div>
</div>
<div className="row">
{reviews &&
reviews.map(data => {
return (
<div className="col-md-6">
<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="yellow" // Set the rated color to yellow
starHoverColor="yellow" // 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 > 80 ? `${data.attributes.comments.slice(0, 80)}...` : data.attributes.comments}
{data.attributes.comments.length > 80 && (
<a
onClick={() => {
setreadMoreText(data);
setshowModal(true);
}}
>
Read More
</a>
)}
</div>
{/* View All */}
</div>
</div>
);
})}
<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.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="yellow" // Set the rated color to yellow
starHoverColor="yellow" // 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>
);
})}
</Swiper>
</div>
</div>
{endUser && (
<div className="row">
......@@ -141,6 +182,7 @@ const GuestReviews = ({ activityById }) => {
</div>
{readMoreText && (
<Modal
className="guest-reviews-detail"
centered
show={showModal}
onHide={() => {
......@@ -148,7 +190,11 @@ const GuestReviews = ({ activityById }) => {
setreadMoreText(null);
}}
>
<Modal.Header closeButton>Review from {readMoreText.attributes.endUser.data.attributes.name}</Modal.Header>
<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>
......
styles/globals.css
......@@ -2471,7 +2471,15 @@ footer hr {
align-items: center;
padding: 0.5rem 0 2rem;
}
.product-reviews .review{
margin-left: 1rem;
}
.guest-reviews-detail .star-ratings .star-container{
padding: 0 0.1rem !important;
}
.guest-reviews-detail .star-ratings{
margin-bottom: 1rem;
}
.product-info .product-reviews .star {
display: flex;
align-items: center;
......@@ -2653,10 +2661,14 @@ footer hr {
}
.review-content a {
color: #808080;
color: #808080 !important;
text-decoration: underline !important;
margin-left: 0.5rem;
cursor: pointer;
}
.guest-reviews-detail.modal .head{
margin-bottom: 0;
}
.guest-reviews-detail {
margin-right: 3rem;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!