Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 87175bba by jaymehta
Options

merge

2 parents ab78a785 0be06a74
Inline Side-by-side
Showing 13 changed files with 221 additions and 139 deletions
components/home/BrowseExperiences.js
...@@ -22,7 +22,8 @@ const BrowseExperiences = () => { ...@@ -22,7 +22,8 @@ const BrowseExperiences = () => {
price: "200", price: "200",
offPrice: "40%", offPrice: "40%",
days: "For 1 Night", days: "For 1 Night",
taxes: "Includes taxes & Fees" taxes: "Includes taxes & Fees",
id: 1,
}, },
{ {
image: "/images/Browse-Experiences/02.png", image: "/images/Browse-Experiences/02.png",
...@@ -32,7 +33,8 @@ const BrowseExperiences = () => { ...@@ -32,7 +33,8 @@ const BrowseExperiences = () => {
price: "200", price: "200",
offPrice: "40%", offPrice: "40%",
days: "For 1 Night", days: "For 1 Night",
taxes: "Includes taxes & Fees" taxes: "Includes taxes & Fees",
id: 2,
}, },
{ {
image: "/images/Browse-Experiences/03.png", image: "/images/Browse-Experiences/03.png",
...@@ -42,7 +44,8 @@ const BrowseExperiences = () => { ...@@ -42,7 +44,8 @@ const BrowseExperiences = () => {
price: "200", price: "200",
offPrice: "40%", offPrice: "40%",
days: "For 1 Night", days: "For 1 Night",
taxes: "Includes taxes & Fees" taxes: "Includes taxes & Fees",
id: 3,
}, },
{ {
image: "/images/Browse-Experiences/04.png", image: "/images/Browse-Experiences/04.png",
...@@ -52,7 +55,8 @@ const BrowseExperiences = () => { ...@@ -52,7 +55,8 @@ const BrowseExperiences = () => {
price: "200", price: "200",
offPrice: "40%", offPrice: "40%",
days: "For 1 Night", days: "For 1 Night",
taxes: "Includes taxes & Fees" taxes: "Includes taxes & Fees",
id: 4,
}, },
{ {
image: "/images/Browse-Experiences/01.png", image: "/images/Browse-Experiences/01.png",
...@@ -62,7 +66,8 @@ const BrowseExperiences = () => { ...@@ -62,7 +66,8 @@ const BrowseExperiences = () => {
price: "200", price: "200",
offPrice: "40%", offPrice: "40%",
days: "For 1 Night", days: "For 1 Night",
taxes: "Includes taxes & Fees" taxes: "Includes taxes & Fees",
id: 5,
} }
]; ];
...@@ -116,7 +121,7 @@ const BrowseExperiences = () => { ...@@ -116,7 +121,7 @@ const BrowseExperiences = () => {
{ListingData && {ListingData &&
ListingData.map(data => { ListingData.map(data => {
return ( return (
<SwiperSlide> <SwiperSlide key={data?.id}>
<motion.div <motion.div
variants={zoomIn("left", 0.3)} variants={zoomIn("left", 0.3)}
initial={"hidden"} initial={"hidden"}
......
components/home/Home.js
import React, { Fragment } from "react"; import React, { Fragment, useEffect } from "react";
import Banner from "./Banner"; import Banner from "./Banner";
import SearchBar from "./SearchBar"; import SearchBar from "./SearchBar";
import LetDiscover from "./LetDiscover"; import LetDiscover from "./LetDiscover";
...@@ -6,18 +6,26 @@ import BrowseExperiences from "./BrowseExperiences"; ...@@ -6,18 +6,26 @@ import BrowseExperiences from "./BrowseExperiences";
import GiftAnExperience from "./GiftAnExperience"; import GiftAnExperience from "./GiftAnExperience";
import Testimonial from "./Testimonial"; import Testimonial from "./Testimonial";
import SignUpToExperienceOurPlatform from "./SignUpToExperienceOurPlatform"; import SignUpToExperienceOurPlatform from "./SignUpToExperienceOurPlatform";
import { useDispatch, useSelector } from "react-redux";
const Home = () => { const Home = () => {
const { categories } = useSelector(state => state.categories);
const { testimonial } = useSelector(sate => sate.testimonial);
console.log("categories", categories )
console.log("testimonial", testimonial )
const dispatch = useDispatch();
useEffect(() => {
// dispatch(getHomePage())
}, [dispatch]);
return ( return (
<Fragment> <Fragment>
<main> <main>
<Banner /> <Banner />
<SearchBar /> <SearchBar />
<LetDiscover /> <LetDiscover categories={categories} />
<BrowseExperiences /> <BrowseExperiences />
<GiftAnExperience /> <GiftAnExperience />
<Testimonial /> <Testimonial testimonial={testimonial} />
<SignUpToExperienceOurPlatform /> <SignUpToExperienceOurPlatform />
</main> </main>
</Fragment> </Fragment>
......
components/home/LetDiscover.js
...@@ -11,49 +11,8 @@ import { motion } from "framer-motion"; ...@@ -11,49 +11,8 @@ import { motion } from "framer-motion";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
const LetDiscover = () => { import { cleanImage } from "../../services/imageHandling.js";
const letDiscoverData = [ const LetDiscover = ({ categories }) => {
{
image: "/images/discover/01.png",
title: "All"
},
{
image: "/images/discover/02.png",
title: "Art & History"
},
{
image: "/images/discover/03.png",
title: "Experiential Dining "
},
{
image: "/images/discover/04.png",
title: "Family"
},
{
image: "/images/discover/05.png",
title: "Fitness"
},
{
image: "/images/discover/06.png",
title: "Performing Arts"
},
{
image: "/images/discover/01.png",
title: "Pop Ups"
},
{
image: "/images/discover/02.png",
title: "Tour"
},
{
image: "/images/discover/03.png",
title: "Classes"
},
{
image: "/images/discover/04.png",
title: "Wellness"
}
];
return ( return (
<> <>
<section className="let-discover-session"> <section className="let-discover-session">
...@@ -81,7 +40,7 @@ const LetDiscover = () => { ...@@ -81,7 +40,7 @@ const LetDiscover = () => {
<div className="let-discover-carousal position-relative"> <div className="let-discover-carousal position-relative">
<Swiper <Swiper
modules={[Autoplay, Navigation]} modules={[Autoplay, Navigation]}
slidesPerView={6} slidesPerView={3}
// autoplay={{ // autoplay={{
// delay: 7000, // delay: 7000,
// disableOnInteraction: false, // disableOnInteraction: false,
...@@ -107,22 +66,27 @@ const LetDiscover = () => { ...@@ -107,22 +66,27 @@ const LetDiscover = () => {
}} }}
className="mySwiper01 mySwiper02" className="mySwiper01 mySwiper02"
> >
{letDiscoverData && <SwiperSlide>
letDiscoverData.map((data, index) => { <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/03.png" />
</span>
<div className="title">ALL</div>
</a>
</motion.div>
</SwiperSlide>
{categories?.data &&
categories.data.map((data, index) => {
return ( return (
<SwiperSlide> <SwiperSlide key={data?.id}>
<motion.div <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
variants={zoomIn("left", 0.3)} <a href="" >
initial={"hidden"} <span className="image-container">
whileInView={"show"} <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
viewport={{ once: false, amount: 0.2 }} </span>
> <div className="title">{data?.attributes?.name}</div>
<a href=""> </a>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="title">{data.title}</div>
</a>
</motion.div> </motion.div>
</SwiperSlide> </SwiperSlide>
); );
......
components/home/Testimonial.js
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules"; import { Navigation, Autoplay } from "swiper/modules";
import StarRatings from 'react-star-ratings';
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
// Import Swiper styles // Import Swiper styles
...@@ -11,18 +13,12 @@ import "swiper/css"; ...@@ -11,18 +13,12 @@ import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
const Testimonial = () => { const Testimonial = ({ testimonial }) => {
const testimonialData = [ const [rating, setRating] = useState(0);
{
disc: "“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.”",
name: "Erika Payne, Los Angeles CA"
},
{
disc: "“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.”",
name: "Erika Payne, Los Angeles CA"
},
];
const handleRatingChange = (newRating) => {
setRating(newRating);
};
return ( return (
<> <>
<section className="testimonial-session"> <section className="testimonial-session">
...@@ -30,7 +26,7 @@ const Testimonial = () => { ...@@ -30,7 +26,7 @@ const Testimonial = () => {
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="testimonial-carousal position-relative"> <div className="testimonial-carousal position-relative">
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
autoplay={{ autoplay={{
delay: 9000, delay: 9000,
...@@ -39,71 +35,72 @@ const Testimonial = () => { ...@@ -39,71 +35,72 @@ const Testimonial = () => {
autoHeight={true} autoHeight={true}
spaceBetween={10} spaceBetween={10}
navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }} navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02" className="mySwiper01 mySwiper02"
> >
{testimonialData && {testimonial?.data &&
testimonialData.map(data => { testimonial?.data.map((data, index) => {
return ( return (
<SwiperSlide> <SwiperSlide>
<motion.div <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
variants={zoomIn("left", 0.3)} <div className="testimonial-item">
initial={"hidden"} <div className="img">
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span> </span>
</a> </div>
<a href=""> <div className="rating">
<span className="image-container"> <StarRatings
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" /> rating={rating}
</span> starRatedColor="yellow" // Set the rated color to yellow
</a> starHoverColor="yellow" // Set the hover color to yellow
<a href=""> changeRating={handleRatingChange}
<span className="image-container"> numberOfStars={5}
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" /> name='rating'
</span> starDimension="16px" // Set star width and height
</a> />
{/* <a href=""> {/* <p>You rated this: {rating} stars</p> */}
{/* <a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a> */}
{/* <a href="">
<span className='fa fa-star'> <span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" /> <Image layout='fill' alt='' src="/images/icons/star.svg" />
</span> </span>
</a> */} </a> */}
</div>
<div className="disc">{data?.attributes?.description}</div>
<div className="name">{data?.attributes?.title}</div>
</div> </div>
<div className="disc">
{data.disc}
</div>
<div className="name">{data.name}</div>
</div>
</motion.div> </motion.div>
</SwiperSlide> </SwiperSlide>
); );
})} })}
</Swiper> </Swiper>
<div className="swiper-nav"> <div className="swiper-nav">
<div className="navbutton d-flex justify-content-center justify-content-md-between "> <div className="navbutton d-flex justify-content-between justify-content-md-between ">
<button className="testimonial-arrow-right arrow"> <button className="testimonial-arrow-right arrow">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
...@@ -116,7 +113,6 @@ const Testimonial = () => { ...@@ -116,7 +113,6 @@ const Testimonial = () => {
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
components/layout/Footer.js
...@@ -91,7 +91,10 @@ const Footer = () => { ...@@ -91,7 +91,10 @@ const Footer = () => {
<h3>HELP</h3> <h3>HELP</h3>
<ul> <ul>
<li> <li>
<a href="">Terms & Policy</a> <a href="/terms-and-conditions">Terms & Policy</a>
</li>
<li>
<a href="/privacy-policy">Privacy Policy</a>
</li> </li>
<li> <li>
<a href="">Careers</a> <a href="">Careers</a>
......
package.json
...@@ -36,9 +36,9 @@ ...@@ -36,9 +36,9 @@
"react-owl-carousel": "^2.3.3", "react-owl-carousel": "^2.3.3",
"react-phone-input-2": "^2.15.1", "react-phone-input-2": "^2.15.1",
"react-player": "^2.11.0", "react-player": "^2.11.0",
"react-rating": "^2.0.5",
"react-redux": "^8.0.2", "react-redux": "^8.0.2",
"react-select": "^5.8.0", "react-select": "^5.8.0",
"react-star-ratings": "^2.3.0",
"react-toastify": "^9.0.8", "react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8", "reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0", "redux": "^4.2.0",
......
pages/index.js
import Home from "../components/home/Home"; import Home from "../components/home/Home";
import Layout from "../components/layout/Layout"; import Layout from "../components/layout/Layout";
import { getAllCategories } from "../redux/actions/categoriesAction";
import { getTestimonial } from "../redux/actions/testimonialAction";
import { loadUser } from "../redux/actions/userActions"; import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store"; import { wrapper } from "../redux/store";
...@@ -22,13 +24,21 @@ export default function IndexPage() { ...@@ -22,13 +24,21 @@ export default function IndexPage() {
/** For server side rendering */ /** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data. try {
await store.dispatch(getAllCategories())
// get the locations data. await store.dispatch(getTestimonial())
// await store.dispatch(loadUser())
return { return {
props: {}, props: {},
// Next.js will attempt to re-generate the page:
// - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
// - After the 10-second window, the next request will still show the cached (stale) page
// - Next.js triggers a regeneration of the page in the background.
// - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
// In seconds
// revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
}; };
} catch (error) {
console.log("index.js", error);
}
}); });
redux/actions/categoriesAction.js
...@@ -10,18 +10,29 @@ import { ...@@ -10,18 +10,29 @@ import {
} from "../constants/categoryConstants"; } from "../constants/categoryConstants";
export const getAllCategories = () => async dispatch => { export const getAllCategories = () => async dispatch => {
console.log("here >");
try { try {
console.log("here >>");
dispatch({ dispatch({
type: GET_CATEGORIES_REQUEST type: GET_CATEGORIES_REQUEST
}); });
const config = { const config = {
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
} }
}; };
const query = {
populate: ["image"]
};
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories`, config); const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories?${queryString}`, config);
console.log("response > ", response);
dispatch({ dispatch({
type: GET_CATEGORIES_SUCCESS, type: GET_CATEGORIES_SUCCESS,
payload: response.data payload: response.data
......
redux/actions/testimonialAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { GET_TESTIMONIAL_FAIL, GET_TESTIMONIAL_REQUEST, GET_TESTIMONIAL_SUCCESS } from "../constants/testimonialConstants";
export const getTestimonial = () => async dispatch => {
try {
dispatch({
type: GET_TESTIMONIAL_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["image"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/testimonials?${queryString}`, config);
console.log("response > ", response);
dispatch({
type: GET_TESTIMONIAL_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: GET_TESTIMONIAL_FAIL,
payload: error.response.data
});
}
};
redux/constants/testimonialConstants.js 0 → 100644
export const GET_TESTIMONIAL_REQUEST = "GET_TESTIMONIAL_REQUEST"
export const GET_TESTIMONIAL_SUCCESS = "GET_TESTIMONIAL_SUCCESS"
export const GET_TESTIMONIAL_FAIL = "GET_TESTIMONIAL_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file \ No newline at end of file
redux/reducers/reducers.js
...@@ -7,6 +7,7 @@ import { displayEnquireNowReducer } from "./enquireNowModalReducer"; ...@@ -7,6 +7,7 @@ import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers"; import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer"; import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer"; import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -27,6 +28,7 @@ const reducers = combineReducers({ ...@@ -27,6 +28,7 @@ const reducers = combineReducers({
activityData: createActivityReducer, activityData: createActivityReducer,
categories: getAllCategoriesReducer, categories: getAllCategoriesReducer,
subCategories: getAllSubCategoriesReducer, subCategories: getAllSubCategoriesReducer,
testimonial: getAllTestimonialReducer,
allActivitiesData: getActivitiesReducer, allActivitiesData: getActivitiesReducer,
}); });
......
redux/reducers/testimonialReducer.js 0 → 100644
import { GET_TESTIMONIAL_REQUEST, CLEAR_ERRORS, GET_TESTIMONIAL_SUCCESS, GET_TESTIMONIAL_FAIL } from "../constants/testimonialConstants";
export const getAllTestimonialReducer = (state = { loading: true, success: false, testimonial: null }, action) => {
switch (action.type) {
case GET_TESTIMONIAL_REQUEST:
return {
loading: true,
};
case GET_TESTIMONIAL_SUCCESS:
return {
loading: false,
testimonial: action.payload
};
case GET_TESTIMONIAL_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
\ No newline at end of file \ No newline at end of file
styles/globals.css
...@@ -2727,6 +2727,13 @@ footer hr { ...@@ -2727,6 +2727,13 @@ footer hr {
border: 1px solid #000; border: 1px solid #000;
border-radius: 10px; border-radius: 10px;
} }
.testimonial-session .rating{
margin-bottom: 0.5rem;
}
.testimonial-session .rating .star-ratings svg{
width: 33px !important;
height: 33px !important;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!