Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit e52fe9dd by jaymehta
Options

.

1 parent c7499a51
Inline Side-by-side
Showing 8 changed files with 256 additions and 68 deletions
components/detail/DetailInfo.js
...@@ -17,10 +17,11 @@ import { checkWishlist, toggleWishlist } from "../../redux/actions/activityActio ...@@ -17,10 +17,11 @@ import { checkWishlist, toggleWishlist } from "../../redux/actions/activityActio
import WishlistComponent from "./WIshlistComponent.js"; import WishlistComponent from "./WIshlistComponent.js";
import ShareWidget from "./ShareWidget.js"; import ShareWidget from "./ShareWidget.js";
import { sanitizeTimeRange } from "../../services/imageHandling"; import { sanitizeTimeRange } from "../../services/imageHandling";
import { createNotification } from "../../redux/actions/notificationAction.js";
const DetailInfo = ({ activityById }) => { const DetailInfo = ({ activityById }) => {
const router = useRouter(); const router = useRouter();
console.log("activityById >>>>>", activityById) console.log("activityById >>>>>", activityById);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(getCurrentEndUser()); dispatch(getCurrentEndUser());
...@@ -47,7 +48,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -47,7 +48,7 @@ const DetailInfo = ({ activityById }) => {
const [showshareWidget, setshowshareWidget] = useState(false); const [showshareWidget, setshowshareWidget] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser); const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser) console.log("endUser", endUser);
useEffect(() => { useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
setSession(await getSession()); setSession(await getSession());
...@@ -178,7 +179,8 @@ const DetailInfo = ({ activityById }) => { ...@@ -178,7 +179,8 @@ const DetailInfo = ({ activityById }) => {
</Modal.Body> </Modal.Body>
</Modal> </Modal>
{activityById && ( {activityById && (
<Modal dialogClassName="modal-01-session" <Modal
dialogClassName="modal-01-session"
centered centered
show={enquiryModal} show={enquiryModal}
onHide={() => { onHide={() => {
...@@ -192,24 +194,16 @@ const DetailInfo = ({ activityById }) => { ...@@ -192,24 +194,16 @@ const DetailInfo = ({ activityById }) => {
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div className="mt-3">Full Name:</div> <div className="mt-3">Full Name:</div>
<div className="text01"> <div className="text01">{endUser?.attributes.name}</div>
{endUser?.attributes.name}
</div>
<div className="mt-3">Mobile:</div> <div className="mt-3">Mobile:</div>
<div className="text01"> <div className="text01">{endUser?.attributes.phone}</div>
{endUser?.attributes.phone}
</div>
<div className="mt-3">Email ID:</div> <div className="mt-3">Email ID:</div>
<div className="text01"> <div className="text01">{endUser?.attributes.email}</div>
{endUser?.attributes.email}
</div>
<div className="mt-3">Experience Name:</div> <div className="mt-3">Experience Name:</div>
<div className="text01"> <div className="text01">{activityById.data.attributes.name}</div>
{activityById.data.attributes.name}
</div>
<div className="row d-flex justify-content-center mt-2"> <div className="row d-flex justify-content-center mt-2">
<div className="col-6"> <div className="col-6">
...@@ -247,10 +241,30 @@ const DetailInfo = ({ activityById }) => { ...@@ -247,10 +241,30 @@ const DetailInfo = ({ activityById }) => {
onClick={async () => { onClick={async () => {
setloading(true); setloading(true);
console.log("hello"); console.log("hello");
if (!enquireDate) toast.error("Please select date!") if (!enquireDate) toast.error("Please select date!");
if (!quantity) toast.error("Please select quantity!") if (!quantity) toast.error("Please select quantity!");
let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity, date: enquireDate }); let res = await sendEnquiry({
activityId: activityById.data.id,
userId: endUser.id,
vendorId: activityById.data.attributes.vendor.data.id,
quantity,
date: enquireDate
});
console.log("res", res); console.log("res", res);
await createNotification({
text: `You have received an enquiry for ${activityById.data.attributes.name}!`,
title: "Enquiry received!",
type: "pending",
status: "pending",
users_permissions_user: activityById.data.attributes.vendor.data.attributes.user.data.id
});
await createNotification({
text: `You have received an enquiry for ${activityById.data.attributes.name}!`,
title: "Enquiry received!",
type: "pending",
status: "pending",
users_permissions_user: 1
});
toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!"); toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
setloading(false); setloading(false);
setenquiryModal(false); setenquiryModal(false);
......
components/layout/Generics/GenericHeader.js
...@@ -5,10 +5,17 @@ import { signOut } from "next-auth/react"; ...@@ -5,10 +5,17 @@ import { signOut } from "next-auth/react";
import { UserOutlined } from "@ant-design/icons"; import { UserOutlined } from "@ant-design/icons";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeNotificationStatus, getNotifications } from "../../../redux/actions/notificationAction";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => { export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isopen, setisopen] = useState(false); const [isopen, setisopen] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser);
const { notifications } = useSelector(state => state.notifications);
console.log("loadedUser", loadedUser);
console.log("notifications", notifications);
const dispatch = useDispatch();
// Function to toggle the dropdown visibility // Function to toggle the dropdown visibility
const toggleGridViewDropdown = () => { const toggleGridViewDropdown = () => {
if (isopen) { if (isopen) {
...@@ -25,10 +32,10 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -25,10 +32,10 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
// Function to handle click outside // Function to handle click outside
const handleClickOutside = event => { const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) { if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
// setTimeout(() => { // setTimeout(() => {
// setisopen(false); // }, 500);
// }, 500);
setIsGridViewOpen(false); // Close if clicked outside setIsGridViewOpen(false); // Close if clicked outside
// setisopen();
} }
}; };
// Effect to add click event listener when component mounts // Effect to add click event listener when component mounts
...@@ -38,6 +45,11 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -38,6 +45,11 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
}; };
}, []); }, []);
useEffect(() => {
loadedUser && dispatch(getNotifications({ id: loadedUser.id }));
}, [loadedUser]);
const router = useRouter(); const router = useRouter();
const VenderDetails = () => { const VenderDetails = () => {
return ( return (
...@@ -96,57 +108,36 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -96,57 +108,36 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
<div onClick={toggleGridViewDropdown}> <div onClick={toggleGridViewDropdown}>
<img src="/images/icons/notification.svg" alt="" /> <img src="/images/icons/notification.svg" alt="" />
</div> </div>
{notifications &&
notifications.data.length > 0 &&<span className="batch-icon"></span>}
<div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}> <div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="notification-inner"> <div className="notification-inner">
<div className="head">Notifications</div> <div className="head">Notifications</div>
<div className="inner"> {notifications &&
<div className="disc">Your Account is been verified you can start adding activities now.</div> notifications.data.length > 0 &&
<div className="link"> notifications.data.map(item => {
<a href="">Add Activity</a> return (
</div> <div className="inner">
</div> <div className="disc">{item.attributes.title}</div>
<div className="inner"> <div className="disc">{item.attributes.text}</div>
<div className="disc">Your Account is been verified you can start adding activities now.</div> <div
<div className="link"> className="link"
<a href="">Add Activity</a> onClick={async () => {
</div> console.log("here", item.id);
</div> await changeNotificationStatus({ id: item.id, status: "seen" });
<div className="inner"> dispatch(getNotifications({ id: loadedUser.id }));
<div className="disc">Your Account is been verified you can start adding activities now.</div> }}
<div className="link"> >
<a href="">Add Activity</a> <a>Dismiss</a>
</div> </div>
</div> </div>
<div className="inner"> );
<div className="disc">Your Account is been verified you can start adding activities now.</div> })}
<div className="link"> {!(notifications && notifications.data.length > 0) && (
<a href="">Add Activity</a> <div className="head text-center mb-2" style={{ color: "grey" }}>
</div> No recent notifications
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div> </div>
</div> )}
</div> </div>
</div> </div>
</div> </div>
......
redux/actions/activityAction.js
...@@ -176,6 +176,7 @@ export const getActivityById = id => async dispatch => { ...@@ -176,6 +176,7 @@ export const getActivityById = id => async dispatch => {
"timeSlots", "timeSlots",
"masterPincode", "masterPincode",
"vendor", "vendor",
"vendor.user",
"category", "category",
"imagesComponent", "imagesComponent",
"imagesComponent.image", "imagesComponent.image",
...@@ -288,6 +289,7 @@ export const getActivitiesForAdmin = ...@@ -288,6 +289,7 @@ export const getActivitiesForAdmin =
"timeSlots", "timeSlots",
"masterPincode", "masterPincode",
"vendor", "vendor",
"vendor.user",
"category", "category",
"imagesComponent", "imagesComponent",
"imagesComponent.image", "imagesComponent.image",
......
redux/actions/notificationAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { FETCH_NOTIFICATIONS_FAIL, FETCH_NOTIFICATIONS_REQUEST, FETCH_NOTIFICATIONS_SUCCESS } from "../constants/notificationConstants";
export const getNotifications =
({ id }) =>
async dispatch => {
try {
dispatch({
type: FETCH_NOTIFICATIONS_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["users_permissions_user"],
filters: {
users_permissions_user: {
id: { $eq: id }
},
status: "pending"
},
sort: ["createdAt:desc"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/notifications?${queryString}`, config);
console.log("response > ", response.data);
dispatch({
type: FETCH_NOTIFICATIONS_SUCCESS,
payload: response.data
});
// console.log("gift card here");
return response.data;
} catch (error) {
dispatch({
type: FETCH_NOTIFICATIONS_FAIL,
payload: error.response.data
});
}
};
export const createNotification = async (data) => {
console.log("asd here");
try {
// dispatch({
// type: FETCH_NOTIFICATIONS_REQUEST
// });
const config = {
headers: {
"Content-Type": "application/json"
}
};
// const query = {
// populate: ["users_permissions_user"],
// filters: {
// users_permissions_user: {
// id: { $eq: id }
// }
// }
// };
// const queryString = qs.stringify(query, {
// encodeValuesOnly: true
// });
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/notifications`, { data: { ...data } }, config);
console.log("response here ", response.data);
// dispatch({
// type: FETCH_NOTIFICATIONS_SUCCESS,
// payload: response.data
// });
// console.log("gift card here");
return response.data;
} catch (error) {
// dispatch({
// type: FETCH_NOTIFICATIONS_FAIL,
// payload: error.response.data
// });
}
};
export const changeNotificationStatus = async ({ id, status }) => {
try {
// dispatch({
// type: FETCH_NOTIFICATIONS_REQUEST
// });
const config = {
headers: {
"Content-Type": "application/json"
}
};
// const query = {
// populate: ["users_permissions_user"],
// filters: {
// users_permissions_user: {
// id: { $eq: id }
// }
// }
// };
// const queryString = qs.stringify(query, {
// encodeValuesOnly: true
// });
const response = await axios.put(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/notifications/${id}`, { data: { status } }, config);
console.log("response here ", response.data);
// dispatch({
// type: FETCH_NOTIFICATIONS_SUCCESS,
// payload: response.data
// });
// console.log("gift card here");
return response.data;
} catch (error) {
// dispatch({
// type: FETCH_NOTIFICATIONS_FAIL,
// payload: error.response.data
// });
}
};
redux/constants/notificationConstants.js 0 → 100644
export const FETCH_NOTIFICATIONS_REQUEST = "FETCH_NOTIFICATIONS_REQUEST"
export const FETCH_NOTIFICATIONS_SUCCESS = "FETCH_NOTIFICATIONS_SUCCESS"
export const FETCH_NOTIFICATIONS_FAIL = "FETCH_NOTIFICATIONS_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file \ No newline at end of file
redux/reducers/notificationsReducer.js 0 → 100644
import { FETCH_NOTIFICATIONS_FAIL, FETCH_NOTIFICATIONS_REQUEST, FETCH_NOTIFICATIONS_SUCCESS, CLEAR_ERRORS } from "../constants/notificationConstants";
export const getNotificationsReducer = (state = { loading: true, success: false, notifications: null }, action) => {
switch (action.type) {
case FETCH_NOTIFICATIONS_REQUEST:
return {
loading: true,
};
case FETCH_NOTIFICATIONS_SUCCESS:
return {
loading: false,
notifications: action.payload
};
case FETCH_NOTIFICATIONS_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
redux/reducers/reducers.js
...@@ -20,6 +20,7 @@ import { getAllHomeBannerReducer } from "./homeBannerReducer"; ...@@ -20,6 +20,7 @@ import { getAllHomeBannerReducer } from "./homeBannerReducer";
import { getAllFaqsReducer } from "./faqsReducer"; import { getAllFaqsReducer } from "./faqsReducer";
import { reviewsReducer } from "./reviewsReducers"; import { reviewsReducer } from "./reviewsReducers";
import { giftCardReducer } from "./giftCardReducer"; import { giftCardReducer } from "./giftCardReducer";
import { getNotificationsReducer } from "./notificationsReducer";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -57,6 +58,7 @@ const reducers = combineReducers({ ...@@ -57,6 +58,7 @@ const reducers = combineReducers({
giftCard: giftCardReducer, giftCard: giftCardReducer,
enquiriesByAdmin: getEnquiriesByVendorReducer, enquiriesByAdmin: getEnquiriesByVendorReducer,
enquiriesByEndUser: getEnquiriesByEndUserReducer, enquiriesByEndUser: getEnquiriesByEndUserReducer,
notifications: getNotificationsReducer,
}); });
export default reducers; export default reducers;
styles/globals.css
...@@ -4255,6 +4255,15 @@ footer .footer-link ul { ...@@ -4255,6 +4255,15 @@ footer .footer-link ul {
z-index: 999; z-index: 999;
margin-top: 7px; margin-top: 7px;
} }
.notification-row .batch-icon{
width: 10px;
height: 10px;
border-radius: 50px;
position: absolute;
right: -3px;
top: -3px;
background: red;
}
.notification-inner .inner { .notification-inner .inner {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!