import { useState, useEffect, useRef } from 'react' import { Link, useHistory } from 'react-router-dom' import CountButton from '../components/CountButton' import SeatTable from '../components/SeatTable/SeatTable' import axios from 'axios' import { useAuth } from '../context/auth_context.js' import { Modal } from 'bootstrap' import catchErrors from '../utils/catchErrors' import styles from '../components/SeatTable/seatTable.module.scss' import reservationApi from '../apis/reservation.api.js' const TicketingSeatPage = ({ location }) => { const history = useHistory() const modalRef = useRef(null) const modal = useRef() const { user } = useAuth() const [error, setError] = useState() const [ticketInfo, setTicketInfo] = useState({ ...location.state }) const [theaterInfo, setTheaterInfo] = useState({ theatertypeId: 0 }) const [selectedSeats, setSelectedSeats] = useState([]) const [reservedSeats, setReservedSeats] = useState([]) const [ticketFee, setTicketFee] = useState({ youth: 0, adult: 0, senior: 0 }) const [count, setCount] = useState({ youth: 0, adult: 0, senior: 0 }) useEffect(() => { getInfo() }, [ticketInfo.timetableId]) useEffect(() => { getTicketFee() }, [theaterInfo.theatertypeId]) async function getInfo() { try { setError("") const response = await axios.post('/api/theater/getInfo', { theaterId: ticketInfo.theaterId }) setTheaterInfo(response.data) const response2 = await reservationApi.findReservedSeats(ticketInfo.timetableId); const reserve = response2.map((el) => el.row + '-' + el.col ); setReservedSeats(reserve); } catch (error) { catchErrors(error, setError) } } async function getTicketFee() { try { setError("") const response3 = await axios.get(`/api/info/ticketfee`, { params: { theaterTypeId: theaterInfo.theatertypeId } }) const week = ticketInfo.week const partTime = ticketInfo.partTime const basicFee = response3.data[0][partTime] + response3.data[0].defaultPrice + response3.data[0][week] setTicketFee({ adult: basicFee + response3.data[0].adult, youth: basicFee + response3.data[0].youth, senior: basicFee + response3.data[0].senior }) } catch (error) { catchErrors(error, setError) } } function loginModal() { if (user.role === "member") { history.push("/payment", { ...ticketInfo, selectedSeats: selectedSeats, ...count, totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior }); } else { modal.current = new Modal(modalRef.current) modal.current?.show() } } return ( <>
로그인이 필요한 서비스입니다.
로그인을 하시겠습니까? 비회원예매로 진행하시겠습니까?

좌석선택

일반

청소년

{ticketInfo.adult ? : }

경로우대

{ticketInfo.cinema} | {ticketInfo.selectedTheater}관
{ticketInfo.title}
{ticketInfo.time}
선택됨
선택불가
{ticketInfo ? 영화포스터 :
영화선택
}
{ticketInfo ?
  • 영화: {ticketInfo.title}
  • 극장: {ticketInfo.cinema}
  • 일시: {ticketInfo.time}
  • 상영관: {ticketInfo.selectedTheater}관
  • 좌석: {selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 64) + el.split('-')[1]) + ' '}
:
극장선택
}
{selectedSeats ?
  • 성인: {count.adult}명
  • 청소년: {count.youth}명
  • 경로: {count.senior}명
  • 총 결제금액: {count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior}원
: <>}
결제하기
{selectedSeats.length > 0 && count.adult + count.youth + count.senior === selectedSeats.length ? : }
) } export default TicketingSeatPage