From f73720f13a7c2b84bc4bb546e417bb6387f0deee Mon Sep 17 00:00:00 2001 From: skovacs4 Date: Mon, 1 Apr 2024 01:55:49 +0300 Subject: [PATCH 1/2] Send Email updated + Map --- src/App.css | 8 + src/App.tsx | 2 - src/components/EmailTemplateBooking.jsx | 18 -- src/components/Map.jsx | 195 ++++++++++++------ src/components/Notifications.jsx | 63 ------ src/components/SendEmail.jsx | 15 ++ .../BookingCancellationEmail.jsx | 18 +- .../BookingConfirmationEmail.jsx | 18 +- 8 files changed, 171 insertions(+), 166 deletions(-) delete mode 100644 src/components/EmailTemplateBooking.jsx delete mode 100644 src/components/Notifications.jsx create mode 100644 src/components/SendEmail.jsx diff --git a/src/App.css b/src/App.css index 7150519..928b1c3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,2 +1,10 @@ main { +} + +.mapboxgl-ctrl-attrib-inner { + display: none; +} + +.mapboxgl-ctrl-bottom-left { + display: none; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index a3304bf..1d482c8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,8 +25,6 @@ const App: FC = () => { } /> } /> } /> - - } /> } /> } /> } /> diff --git a/src/components/EmailTemplateBooking.jsx b/src/components/EmailTemplateBooking.jsx deleted file mode 100644 index c972397..0000000 --- a/src/components/EmailTemplateBooking.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -const EmailTemplateBooking = ({ eventName, eventDate, eventLocation }) => { - return ( -
-

Booking Confirmation: {eventName}

-

Dear Guest,

-

We are pleased to confirm your booking for the following event:

-

Event Name: {eventName}

-

Date: {eventDate}

-

Location: {eventLocation}

-

Thank you for choosing to attend our event.

-

Best regards,
EventsHive

-
- ); -}; - -export default EmailTemplateBooking; diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 763431b..2a0c9cb 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -1,91 +1,156 @@ -/** - * Map - */ - import React, { useState, useEffect } from "react"; import mapboxgl from "mapbox-gl"; +import axios from "axios"; +import Event from "./Event.jsx"; +import { Link } from "react-router-dom"; const MapComponent = () => { const [mapData, setMapData] = useState(null); - const [selectedMarker, setSelectedMarker] = useState(null); // State for selected marker - - const dummyData = [ - { - coordinates: [-73.935242, 40.73061], // New York City - title: "Example Marker 1", - description: "This is example marker 1 on the map.", - category: "Example Category 1", - imageUrl: "https://example.com/image1.jpg", - }, - { - coordinates: [-74.0059, 40.7128], // New York City - title: "Example Marker 2", - description: "This is example marker 2 on the map.", - category: "Example Category 2", - imageUrl: "https://example.com/image2.jpg", - }, - // Add more markers around the UK - { - coordinates: [-0.1276, 51.5074], // London - title: "London Marker", - description: "This is a marker in London.", - category: "UK", - imageUrl: "https://example.com/london.jpg", - }, - { - coordinates: [-1.9036, 52.4828], // Birmingham - title: "Birmingham Marker", - description: "This is a marker in Birmingham.", - category: "UK", - imageUrl: "https://example.com/birmingham.jpg", - }, - { - coordinates: [-3.1883, 55.9533], // Edinburgh - title: "Edinburgh Marker", - description: "This is a marker in Edinburgh.", - category: "UK", - imageUrl: "https://example.com/edinburgh.jpg", - }, - // Add more markers as needed - ]; + const [selectedMarker, setSelectedMarker] = useState(null); + const [selectedVenueEvents, setSelectedVenueEvents] = useState([]); + const [venues, setVenues] = useState([]); + const [multimediaUrl, setMultimediaUrl] = useState(""); // State for multimedia URL + const [baseUrl, setBaseUrl] = useState(""); // State for base URL + + const fetchVenues = async () => { + try { + const response = await axios.get( + "https://eventhive.creeknet.xyz/api/venues?populate=*" + ); + setVenues(response.data.data); + } catch (error) { + console.error("Error fetching venues:", error); + } + }; + + const fetchCoordinates = async (address) => { + try { + const response = await axios.get( + `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json`, + { + params: { + access_token: + import.meta.env.VITE_MAPBOX_API_KEY, + }, + } + ); + return response.data.features[0].geometry.coordinates; + } catch (error) { + console.error("Error fetching coordinates:", error); + } + }; + + useEffect(() => { + fetchVenues(); + }, []); useEffect(() => { + if (!venues.length) return; + + setBaseUrl("https://eventhive.creeknet.xyz"); // Set base URL + mapboxgl.accessToken = - import.meta.env.VITE_MAPBOX_API_KEY; + import.meta.env.VITE_MAPBOX_API_KEY; const map = new mapboxgl.Map({ container: "map-container", style: "mapbox://styles/mapbox/streets-v12", - center: [-2.941, 54.293], // Centered around the UK - zoom: 5, + center: [-1.6174, 54.9783], + zoom: 12, }); - // Add markers and click event listener - dummyData.forEach((marker) => { - const markerElement = new mapboxgl.Marker() - .setLngLat(marker.coordinates) + venues.forEach(async (venue) => { + const coordinates = await fetchCoordinates(venue.attributes.postcode); + const marker = new mapboxgl.Marker() + .setLngLat(coordinates) + .setPopup( + new mapboxgl.Popup().setHTML( + `

${venue.attributes.name}

+ ${ + venue.attributes.multimedia && + venue.attributes.multimedia.data.length > 0 && + venue.attributes.multimedia.data[0].attributes.formats?.small + ? `${venue.attributes.name}` + : "" + } +

${venue.attributes.description}

` + ) + ) .addTo(map); - markerElement.getElement().addEventListener("click", () => { - setSelectedMarker(marker); // Update selectedMarker state + marker.getElement().addEventListener("click", () => { + setSelectedMarker(venue); + setSelectedVenueEvents(venue.attributes.events.data); + setMultimediaUrl(venue.attributes.multimedia.data[0].attributes.formats.thumbnail.url); }); }); + console.log(multimediaUrl); + // console.log(baseUrl); + console.log(venues); + setMapData(map); return () => map.remove(); - }, []); + }, [venues]); return ( -
- {" "} - {/* Wrapper for map and info panel */} -
- {selectedMarker && ( -
-

{selectedMarker.title}

-

{selectedMarker.description}

- Book - {/* Add more fields here as needed */} +
+
+ + {selectedVenueEvents.length > 0 && ( +
+ {multimediaUrl && ( + {selectedMarker + )} +

+ Events at {selectedMarker && selectedMarker.attributes.name} +

+
    + {selectedVenueEvents.map((event) => ( +
  • +
    +
    +

    + {event.attributes.title} +

    +

    + {event.attributes.description} +

    +

    + Date:{" "} + {new Date(event.attributes.date).toLocaleDateString()} +

    +

    + Price: {event.attributes.price} +

    + {/* + Book + */} + + + View Details + +
    +
    +
    • + ))} +
)}
diff --git a/src/components/Notifications.jsx b/src/components/Notifications.jsx deleted file mode 100644 index 9049165..0000000 --- a/src/components/Notifications.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import axios from 'axios'; -import BookingConfirmationEmail from './emailTemplates/BookingConfirmationEmail'; -import BookingCancellationEmail from './emailTemplates/BookingCancellationEmail'; - -const Notifications = () => { - const sendBookingConfirmationEmail = async () => { - // These will be pulled dynamically from the db - const eventName = 'Example Event'; - const eventDate = '2024-03-25'; - const eventLocation = 'Example Venue'; - - try { - await axios.post('https://your-strapi-backend.com/email/send', { - to: 'recipient@example.com', - subject: 'Booking Confirmation: Example Event', - html: - }); - alert('Booking confirmation email sent successfully!'); - } catch (error) { - console.error('Error sending booking confirmation email: ', error); - alert('Error sending booking confirmation email. Please try again later.'); - } - }; - - const sendBookingCancellationEmail = async () => { - // These will be pulled dynamically from the db - const eventName = 'Example Event'; - const eventDate = '2024-03-25'; - const eventLocation = 'Example Venue'; - - try { - await axios.post('https://your-strapi-backend.com/email/send', { - to: 'recipient@example.com', - subject: 'Booking Cancellation: Example Event', - html: - }); - alert('Booking cancellation email sent successfully!'); - } catch (error) { - console.error('Error sending booking cancellation email: ', error); - alert('Error sending booking cancellation email. Please try again later.'); - } - }; - - // I am using buttons at the moment for testing, and after it is working before integrating with the general app it will be modified - return ( -
-

Notifications

- -
-

Send Mail upon Booking

- -
- -
-

Send Mail upon Cancellation

- -
-
- ); -}; - -export default Notifications; diff --git a/src/components/SendEmail.jsx b/src/components/SendEmail.jsx new file mode 100644 index 0000000..1d3939f --- /dev/null +++ b/src/components/SendEmail.jsx @@ -0,0 +1,15 @@ +import axios from 'axios'; + +const sendEmail = async (to, subject, text, html) => { + try { + const response = await axios.post('https://apis-sk.vercel.app/api/send-email', to, subject, text, html); + // const response = await axios.post('http://localhost:5174/api/sendEmail', data); -- for testing + console.log(response.data); // Log success message + return response.data; + } catch (error) { + console.error('Error:', error); + throw new Error('Error sending email'); + } +}; + +export default sendEmail; diff --git a/src/components/emailTemplates/BookingCancellationEmail.jsx b/src/components/emailTemplates/BookingCancellationEmail.jsx index b90f7c3..5bb5dff 100644 --- a/src/components/emailTemplates/BookingCancellationEmail.jsx +++ b/src/components/emailTemplates/BookingCancellationEmail.jsx @@ -2,15 +2,15 @@ import React from 'react'; const BookingCancellationEmail = ({ eventName, eventDate, eventLocation }) => { return ( -
-

Booking Cancellation: {eventName}

-

Dear Guest,

-

We regret to inform you that your booking for the following event has been cancelled:

-

Event Name: {eventName}

-

Date: {eventDate}

-

Location: {eventLocation}

-

We apologize for any inconvenience caused. If you have any questions, please feel free to contact us.

-

Best regards,
The Event Management Team

+
+

Booking Cancellation: {eventName}

+

Dear Guest,

+

We regret to inform you that your booking for the following event has been cancelled:

+

Event Name: {eventName}

+

Date: {eventDate}

+

Location: {eventLocation}

+

We apologize for any inconvenience caused. If you have any questions, please feel free to contact us.

+

Best regards,
EventHive

); }; diff --git a/src/components/emailTemplates/BookingConfirmationEmail.jsx b/src/components/emailTemplates/BookingConfirmationEmail.jsx index ac030f0..5446f67 100644 --- a/src/components/emailTemplates/BookingConfirmationEmail.jsx +++ b/src/components/emailTemplates/BookingConfirmationEmail.jsx @@ -2,15 +2,15 @@ import React from 'react'; const BookingConfirmationEmail = ({ eventName, eventDate, eventLocation }) => { return ( -
-

Booking Confirmation: {eventName}

-

Dear Guest,

-

We are pleased to confirm your booking for the following event:

-

Event Name: {eventName}

-

Date: {eventDate}

-

Location: {eventLocation}

-

Thank you for choosing to attend our event. We look forward to seeing you there!

-

Best regards,
The Event Management Team

+
+

Booking Confirmation: {eventName}

+

Dear Guest,

+

We are pleased to confirm your booking for the following event:

+

Event Name: {eventName}

+

Date: {eventDate}

+

Location: {eventLocation}

+

Thank you for choosing to attend our event. We look forward to seeing you there!

+

Best regards,
EventHive

); }; From 34f9596043f16310629b14e6a9e2225ee147aeef Mon Sep 17 00:00:00 2001 From: skovacs4 Date: Mon, 1 Apr 2024 01:59:56 +0300 Subject: [PATCH 2/2] Removed wrong import in Map.jsx --- src/components/Map.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 2a0c9cb..d643508 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from "react"; import mapboxgl from "mapbox-gl"; import axios from "axios"; -import Event from "./Event.jsx"; import { Link } from "react-router-dom"; const MapComponent = () => {