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 }) => { ...@@ -37,7 +37,7 @@ const ReviewsListing = ({ activityId, setshowReviews, isVendor }) => {
<div className="container mt-5"> <div className="container mt-5">
{reviews && !reviews.length > 0 && <Empty />} {reviews && !reviews.length > 0 && <Empty />}
{!loading ? ( {!loading ? (
<Accordion className="accordion-filter" defaultActiveKey="0" flush> <Accordion className="accordion-filter accordion-01" defaultActiveKey="0" flush>
{reviews && {reviews &&
reviews.map(item => { reviews.map(item => {
return ( return (
......
components/detail/GuestReviews.js
import Image from "next/image"; import Image from "next/image";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useState } from "react"; import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap"; import { Button, Modal } from "react-bootstrap";
...@@ -6,6 +7,11 @@ import { useSelector } from "react-redux"; ...@@ -6,6 +7,11 @@ import { useSelector } from "react-redux";
import StarRatings from "react-star-ratings"; import StarRatings from "react-star-ratings";
import { postReviewEndUser } from "../../redux/actions/reviewsAction"; import { postReviewEndUser } from "../../redux/actions/reviewsAction";
import { dateFormatFn } from "../../services/imageHandling"; 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 GuestReviews = ({ activityById }) => {
const [rating, setRating] = useState(0); const [rating, setRating] = useState(0);
...@@ -49,43 +55,78 @@ const GuestReviews = ({ activityById }) => { ...@@ -49,43 +55,78 @@ const GuestReviews = ({ activityById }) => {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
{reviews && <div className="col-md-12">
reviews.map(data => { <Swiper
return ( // slidesPerView={2}
<div className="col-md-6"> autoplay={{
<div className="guest-reviews-detail"> delay: 9000,
<div className="head"> disableOnInteraction: false
<div className="name">{data.attributes.endUser.data.attributes.name}</div> }}
<div className="month">{dateFormatFn(data.attributes.createdAt)}</div> autoHeight={true}
</div> spaceBetween={10}
<StarRatings pagination={{
className="col-3 mx-2" clickable: true
rating={data.attributes.rating} }}
starRatedColor="yellow" // Set the rated color to yellow // navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
starHoverColor="yellow" // Set the hover color to yellow breakpoints={{
changeRating={() => {}} 640: {
numberOfStars={5} slidesPerView: 1,
name="rating" spaceBetween: 20,
starDimension="20px" // Set star width and height autoplay: true
/> },
<div className="review-content"> 768: {
"{data.attributes.comments.length > 80 ? `${data.attributes.comments.slice(0, 80)}...` : data.attributes.comments} slidesPerView: 1,
{data.attributes.comments.length > 80 && ( spaceBetween: 40
<a },
onClick={() => { 1024: {
setreadMoreText(data); slidesPerView: 2,
setshowModal(true); spaceBetween: 40
}} }
> }}
Read More modules={[Navigation, Autoplay, Pagination]}
</a> className="mySwiper-guestreview"
)} >
</div> {reviews &&
{/* View All */} reviews.map(data => {
</div> return (
</div> <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> </div>
{endUser && ( {endUser && (
<div className="row"> <div className="row">
...@@ -141,6 +182,7 @@ const GuestReviews = ({ activityById }) => { ...@@ -141,6 +182,7 @@ const GuestReviews = ({ activityById }) => {
</div> </div>
{readMoreText && ( {readMoreText && (
<Modal <Modal
className="guest-reviews-detail"
centered centered
show={showModal} show={showModal}
onHide={() => { onHide={() => {
...@@ -148,7 +190,11 @@ const GuestReviews = ({ activityById }) => { ...@@ -148,7 +190,11 @@ const GuestReviews = ({ activityById }) => {
setreadMoreText(null); 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> <Modal.Body>
<div>{readMoreText.attributes.comments}</div> <div>{readMoreText.attributes.comments}</div>
</Modal.Body> </Modal.Body>
......
styles/globals.css
...@@ -2471,7 +2471,15 @@ footer hr { ...@@ -2471,7 +2471,15 @@ footer hr {
align-items: center; align-items: center;
padding: 0.5rem 0 2rem; 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 { .product-info .product-reviews .star {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -2653,10 +2661,14 @@ footer hr { ...@@ -2653,10 +2661,14 @@ footer hr {
} }
.review-content a { .review-content a {
color: #808080; color: #808080 !important;
text-decoration: underline !important; text-decoration: underline !important;
margin-left: 0.5rem;
cursor: pointer;
}
.guest-reviews-detail.modal .head{
margin-bottom: 0;
} }
.guest-reviews-detail { .guest-reviews-detail {
margin-right: 3rem; 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!