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 67 additions and 9 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,10 +55,42 @@ const GuestReviews = ({ activityById }) => { ...@@ -49,10 +55,42 @@ const GuestReviews = ({ activityById }) => {
</div> </div>
</div> </div>
<div className="row"> <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 &&
reviews.map(data => { reviews.map(data => {
return ( return (
<div className="col-md-6"> <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="guest-reviews-detail">
<div className="head"> <div className="head">
<div className="name">{data.attributes.endUser.data.attributes.name}</div> <div className="name">{data.attributes.endUser.data.attributes.name}</div>
...@@ -69,8 +107,8 @@ const GuestReviews = ({ activityById }) => { ...@@ -69,8 +107,8 @@ const GuestReviews = ({ activityById }) => {
starDimension="20px" // Set star width and height starDimension="20px" // Set star width and height
/> />
<div className="review-content"> <div className="review-content">
"{data.attributes.comments.length > 80 ? `${data.attributes.comments.slice(0, 80)}...` : data.attributes.comments} "{data.attributes.comments.length > 180 ? `${data.attributes.comments.slice(0, 180)}...` : data.attributes.comments}
{data.attributes.comments.length > 80 && ( {data.attributes.comments.length > 180 && (
<a <a
onClick={() => { onClick={() => {
setreadMoreText(data); setreadMoreText(data);
...@@ -83,9 +121,12 @@ const GuestReviews = ({ activityById }) => { ...@@ -83,9 +121,12 @@ const GuestReviews = ({ activityById }) => {
</div> </div>
{/* View All */} {/* View All */}
</div> </div>
</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!