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
import WishlistComponent from "./WIshlistComponent.js";
import ShareWidget from "./ShareWidget.js";
import { sanitizeTimeRange } from "../../services/imageHandling";
import { createNotification } from "../../redux/actions/notificationAction.js";
const DetailInfo = ({ activityById }) => {
const router = useRouter();
console.log("activityById >>>>>", activityById)
console.log("activityById >>>>>", activityById);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getCurrentEndUser());
......@@ -47,7 +48,7 @@ const DetailInfo = ({ activityById }) => {
const [showshareWidget, setshowshareWidget] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser)
console.log("endUser", endUser);
useEffect(() => {
const fetchSession = async () => {
setSession(await getSession());
......@@ -178,7 +179,8 @@ const DetailInfo = ({ activityById }) => {
</Modal.Body>
</Modal>
{activityById && (
<Modal dialogClassName="modal-01-session"
<Modal
dialogClassName="modal-01-session"
centered
show={enquiryModal}
onHide={() => {
......@@ -192,24 +194,16 @@ const DetailInfo = ({ activityById }) => {
</Modal.Header>
<Modal.Body>
<div className="mt-3">Full Name:</div>
<div className="text01">
{endUser?.attributes.name}
</div>
<div className="text01">{endUser?.attributes.name}</div>
<div className="mt-3">Mobile:</div>
<div className="text01">
{endUser?.attributes.phone}
</div>
<div className="text01">{endUser?.attributes.phone}</div>
<div className="mt-3">Email ID:</div>
<div className="text01">
{endUser?.attributes.email}
</div>
<div className="text01">{endUser?.attributes.email}</div>
<div className="mt-3">Experience Name:</div>
<div className="text01">
{activityById.data.attributes.name}
</div>
<div className="text01">{activityById.data.attributes.name}</div>
<div className="row d-flex justify-content-center mt-2">
<div className="col-6">
......@@ -247,10 +241,30 @@ const DetailInfo = ({ activityById }) => {
onClick={async () => {
setloading(true);
console.log("hello");
if (!enquireDate) toast.error("Please select date!")
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 });
if (!enquireDate) toast.error("Please select date!");
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
});
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!");
setloading(false);
setenquiryModal(false);
......
components/layout/Generics/GenericHeader.js
......@@ -5,10 +5,17 @@ import { signOut } from "next-auth/react";
import { UserOutlined } from "@ant-design/icons";
import { ToastContainer } from "react-toastify";
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 }) => {
const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
const [isGridViewOpen, setIsGridViewOpen] = 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
const toggleGridViewDropdown = () => {
if (isopen) {
......@@ -25,10 +32,10 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
// Function to handle click outside
const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
// setTimeout(() => {
// setisopen(false);
// }, 500);
// setTimeout(() => {
// }, 500);
setIsGridViewOpen(false); // Close if clicked outside
// setisopen();
}
};
// Effect to add click event listener when component mounts
......@@ -38,6 +45,11 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
useEffect(() => {
loadedUser && dispatch(getNotifications({ id: loadedUser.id }));
}, [loadedUser]);
const router = useRouter();
const VenderDetails = () => {
return (
......@@ -96,57 +108,36 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
<div onClick={toggleGridViewDropdown}>
<img src="/images/icons/notification.svg" alt="" />
</div>
{notifications &&
notifications.data.length > 0 &&<span className="batch-icon"></span>}
<div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="notification-inner">
<div className="head">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 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>
{notifications &&
notifications.data.length > 0 &&
notifications.data.map(item => {
return (
<div className="inner">
<div className="disc">{item.attributes.title}</div>
<div className="disc">{item.attributes.text}</div>
<div
className="link"
onClick={async () => {
console.log("here", item.id);
await changeNotificationStatus({ id: item.id, status: "seen" });
dispatch(getNotifications({ id: loadedUser.id }));
}}
>
<a>Dismiss</a>
</div>
</div>
);
})}
{!(notifications && notifications.data.length > 0) && (
<div className="head text-center mb-2" style={{ color: "grey" }}>
No recent notifications
</div>
</div>
)}
</div>
</div>
</div>
......
redux/actions/activityAction.js
......@@ -176,6 +176,7 @@ export const getActivityById = id => async dispatch => {
"timeSlots",
"masterPincode",
"vendor",
"vendor.user",
"category",
"imagesComponent",
"imagesComponent.image",
......@@ -288,6 +289,7 @@ export const getActivitiesForAdmin =
"timeSlots",
"masterPincode",
"vendor",
"vendor.user",
"category",
"imagesComponent",
"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
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
redux/reducers/reducers.js
......@@ -20,6 +20,7 @@ import { getAllHomeBannerReducer } from "./homeBannerReducer";
import { getAllFaqsReducer } from "./faqsReducer";
import { reviewsReducer } from "./reviewsReducers";
import { giftCardReducer } from "./giftCardReducer";
import { getNotificationsReducer } from "./notificationsReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -57,6 +58,7 @@ const reducers = combineReducers({
giftCard: giftCardReducer,
enquiriesByAdmin: getEnquiriesByVendorReducer,
enquiriesByEndUser: getEnquiriesByEndUserReducer,
notifications: getNotificationsReducer,
});
export default reducers;
styles/globals.css
......@@ -4255,6 +4255,15 @@ footer .footer-link ul {
z-index: 999;
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 {
padding: 0.5rem 1rem;
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!