Skip to content
Snippets Groups Projects
Commit dcd0946d authored by Fin Wallis's avatar Fin Wallis
Browse files

Adding start of purchase window in EventCard with form component configuration similar to signUp

parent 4f1f5efc
No related branches found
No related tags found
1 merge request!14Buy tickets, view owned tickets and miscellaneous files added
import React from "react";
import React, { useEffect, useState } from "react";
import IconButton from "@mui/material/IconButton";
import ChevronRight from "@mui/icons-material/ChevronRight";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import isEmpty from 'validator/lib/isEmpty';
import {signUp} from '../api/auth';
import Close from "@mui/icons-material/Close";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
......@@ -9,14 +13,99 @@ import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { fontWeight } from "@mui/system";
import { useNavigate } from "react-router-dom";
// Event card - Using material UI framework to bootstrap this process
// Event Data - Individual event data
// Type - small or large
// SetSelectedEvent - Set event to be shown in modal
const EventCard = ({ eventData, type, setSelectedEvent }) => {
const EventCard = ({ eventData, type, setSelectedEvent, user }) => {
let navigate = useNavigate();
//Show/Hide ticket purchase component boolean
const [showBuyTicket, setShowBuyTicket] = useState(false);
//Current purchase stage
//1 = Ticket info
//2 = Contact Information
//3 = Payment information
const [stage, setStage] = useState(1);
//Contact info form
const [contactFormData, setContactFormData] = useState({
addressLine1: "1 Melville Road",
addressLine2: "",
city: "Falmouth",
county: "Cornwall",
postCode: "TR34 5TR",
errorMsg: false,
});
// Validate postcode
function isPostcode(postcode) {
postcode = postcode.replace(/\s/g, "");
var regex = /^[A-Z]{1,2}[0-9]{1,2}[A-Z]{0,1} ?[0-9][A-Z]{2}$/i;
return regex.test(postcode);
}
//When form values change on stage 2
const handleContactFormChange = (event) => {
setContactFormData({
...contactFormData,
[event.target.name]: event.target.value,
errorMsg: "",
});
console.log(contactFormData);
};
//When user clicks next on stage 2
const handleContactSubmit = (event) => {
event.preventDefault();
console.log(contactFormData);
// Form validation
if (
isEmpty(contactFormData.addressLine1) ||
isEmpty(contactFormData.city) ||
isEmpty(contactFormData.county) ||
isEmpty(contactFormData.postCode)
) {
setContactFormData({
...contactFormData,
errorMsg: "All fields are required except address line 2",
});
} else if (!isPostcode(contactFormData.postCode)) {
setContactFormData({
...contactFormData,
errorMsg: "Invalid UK postcode",
});
} else {
const { addressLine1, addressLine2, city, county, postCode } =
contactFormData;
const data = { addressLine1, addressLine2, city, county, postCode };
signUp(data)
.then((response) => {
console.log("axios success", response);
// setFormData({
// firstName: "",
// lastName: "",
// email: "",
// password: "",
// confirmPassword: "",
// successMsg: response.data.successMessage,
// });
})
.catch((err) => {
console.log("Axios error:", err);
// setFormData({
// ...formData,
// errorMsg: err.response.data.errorMessage,
// });
});
}
};
console.log(Object.values(eventData));
return (
<>
......@@ -30,7 +119,7 @@ const EventCard = ({ eventData, type, setSelectedEvent }) => {
image={eventData.eventImage}
alt="Event Image"
/>
<CardContent >
<CardContent>
<div style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
<Typography gutterBottom variant="h5" noWrap component="div">
{eventData.eventTitle}
......@@ -94,91 +183,182 @@ const EventCard = ({ eventData, type, setSelectedEvent }) => {
</Grid>
</Grid>
{/* Right info panel */}
<Grid item container xs={6} >
<Typography variant={"h3"} fontWeight={"bolder"}>
{eventData.eventTitle}
</Typography>
{/* Split up the info using MUI Grid */}
<Grid xs={6} sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Date
</Typography>
<Typography variant={"body2"}>{eventData.startDate}</Typography>
</Grid>
<Grid xs={6} sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Venue
</Typography>
<Typography variant={"body2"}>
{eventData.venueAddress}
</Typography>
</Grid>
<Grid xs={6} sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Event Type
</Typography>
<Typography variant={"body2"}>
<ul>
<li>{eventData.eventGenre}</li>
</ul>
</Typography>
</Grid>
<Grid xs={6} sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Time
</Typography>
<Typography variant={"body2"}>
{eventData.startTime} - {eventData.endTime}
</Typography>
</Grid>
{/* Description */}
<Grid>
{/* If user has not clicked 'Buy ticket' show information */}
<>
{/* Right info panel */}
<Grid item container xs={6} spacing={2}>
<Typography
variant={"h6"}
fontWeight={"bold"}
sx={{ marginTop: "25px",
width: "100%"
}}
variant={!showBuyTicket ? "h3" : "h4"}
fontWeight={"bolder"}
>
Description
</Typography>
<Typography variant={"body2"}>
{eventData.eventDescription}
{eventData.eventTitle}
</Typography>
</Grid>
{!showBuyTicket ? (
<>
{/* Split up the info using MUI Grid */}
<Grid xs={6} item sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Date
</Typography>
<Typography variant={"body2"}>
{eventData.startDate}
</Typography>
</Grid>
<Grid xs={6} item sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Venue
</Typography>
<Typography item variant={"body2"}>
{eventData.venueAddress}
</Typography>
</Grid>
<Grid xs={6} item sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Event Type
</Typography>
<Typography variant={"body2"}>
{eventData.eventGenre}
</Typography>
</Grid>
<Grid xs={6} item sx={{ marginTop: "25px" }}>
<Typography variant={"h6"} fontWeight={"bold"}>
Time
</Typography>
<Typography variant={"body2"}>
{eventData.startTime} - {eventData.endTime}
</Typography>
</Grid>
{/* Description */}
<Typography
variant={"h6"}
fontWeight={"bold"}
sx={{ marginTop: "25px" }}
>
Description
</Typography>
<Typography variant={"body2"}>
{eventData.eventDescription}
</Typography>
<Grid xs={14} item sx={{ marginTop: "25px" }}>
<div style={{ color: "#9f7aea" }}>
<Typography
variant={"h6"}
fontWeight={"bold"}
color={"inherit"}
>
Current Price
</Typography>
</div>
<Typography variant={"body2"} variant={"h6"} fontWeight={"bold"}>
£{eventData.ticketPrice}
</Typography>
<Button
onClick={() => {}}
size="small"
sx={{
backgroundColor: "#9f7aea",
color: "white",
padding: "15px",
marginTop: "40px",
width: "100%",
marginBottom: "80px",
}}
>
Buy Ticket
</Button>
<Grid xs={6} item sx={{ marginTop: "25px" }}>
<div style={{ color: "#EB5D07" }}>
<Typography
variant={"h6"}
fontWeight={"bold"}
color={"inherit"}
>
Current Price
</Typography>
</div>
<Typography variant={"body2"}>
£{eventData.ticketPrice}
</Typography>
</Grid>
<Grid xs={6} container item sx={{ marginTop: "25px" }}>
{/* Either show login to purchase, redirect to login or to buy ticket */}
<Button
onClick={() => {
//If user is not null, open purchase card, else redirect to login
if (user != null) {
setShowBuyTicket(!showBuyTicket);
} else {
navigate("/Login");
}
}}
size="small"
sx={{
backgroundColor: "#EB5D07",
color: "white",
padding: "10px",
}}
>
{user !== null ? "Buy Ticket" : "Login to buy"}
</Button>
</Grid>
</>
) : (
<>
{stage === 1 && (
<Grid
container
sx={{
border: "1px solid grey",
borderRadius: "25px",
padding: "15px",
}}
>
<Typography variant={"h6"}>
{eventData.eventTitle}
</Typography>
<Grid
item
container
xs={12}
justifyContent={"flex-start"}
>
<Typography
variant={"body2"}
sx={{ fontWeight: "normal" }}
>
Venue:
</Typography>
<Typography variant={"body2"}>
{eventData.venueName}
</Typography>
</Grid>
<Grid item container xs={4} justifyContent={"flex-start"}>
<Typography variant={"body2"}>
{eventData.startDate}
</Typography>
</Grid>
<Grid item container xs={4} justifyContent={"flex-start"}>
<Typography variant={"body2"}>
{eventData.startTime} - {eventData.endTime}
</Typography>
</Grid>
</Grid>
)}
<Grid
container
item
justifyContent={"space-between"}
sx={{ height: "50px" }}
>
{stage === 1 ? (
<IconButton
onPress={() => {
setStage(stage + 1);
}}
>
Cancel
</IconButton>
) : (
<IconButton
onPress={() => {
setStage(stage + 1);
}}
>
<ChevronLeft />
Back
</IconButton>
)}
<IconButton
onClick={() => {
setStage(stage + 1);
console.log(stage);
}}
>
Next
<ChevronRight />
</IconButton>
</Grid>
</>
)}
</Grid>
</Grid>
</>
</Grid>
)}
</>
......
......@@ -4,11 +4,15 @@ import { getAllEvents } from "../api/events";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import { getLocalStorage, } from "../Helpers/localStorage"
const Marketplace = () => {
// List of events taken from DB
const [allEvents, setAllEvents] = useState([]);
//User object
const [user, setUser] = useState(null);
// Selected event to show modal for - If null show list instead!
const [selectedEvent, setSelectedEvent] = useState(null);
......@@ -19,6 +23,7 @@ const Marketplace = () => {
setAllEvents(tickets.data);
}
getEvents();
setUser(getLocalStorage('user'))
}, []);
return (
......@@ -50,18 +55,14 @@ const Marketplace = () => {
aria-labelledby="View Event"
aria-describedby="Learn more about your favourite artist and their events from this modal."
>
<Grid container xs={12} sx={{ height: "100%" }} alignItems={"center"}>
<Grid container xs={12} sx={{height: '90vh', marginTop: '5vh', overflowY: 'scroll'}} alignItems={'center'}>
<Grid
item
container
xs={10}
sx={{ backgroundColor: "white", margin: "auto", padding: "35px" }}
>
<EventCard
eventData={selectedEvent}
type={"large"}
setSelectedEvent={setSelectedEvent}
/>
<EventCard eventData={selectedEvent} type={'large'} setSelectedEvent={setSelectedEvent} user={user} />
</Grid>
</Grid>
</Modal>
......
......@@ -28,3 +28,17 @@ export const getAllEvents = async () => {
return response
};
export const purchaseTicket = async (event_id, user_id) => {
const config = {
headers: {
'Content-Type': 'application/json'
}
}
const response = await axios.get('/purchase/'+event_id+'/'+user_id, config)
return response
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment