PaymentPage.js 11.6 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
2
import axios from 'axios'
import { useEffect, useState } from 'react'
3
import { useHistory } from 'react-router-dom'
한규민's avatar
한규민 committed
4
import reservationApi from '../../apis/reservation.api'
Jiwon Yoon's avatar
Jiwon Yoon committed
5
6
7
8
9
import { useAuth } from '../../context/auth_context'
import catchErrors from '../../utils/catchErrors'
import styles from './PaymentPage.module.scss'

const Payment = ({ location }) => {
10
    const history = useHistory();
11
12
13
    const { user } = useAuth()
    const [guestInfo, setGuestInfo] = useState({})
    const [guestID, setGuestID] = useState()
14
15
16
17
18
19
    const [userInfo, setUserInfo] = useState({
        nickname: "",
        email: "",
        birth: "",
        phoneNumber: ""
    })
20
21
22
    const [ticketInfo, setTicketInfo] = useState({ ...location.state })
    const [element, setElement] = useState()
    const [error, setError] = useState("")
Jiwon Yoon's avatar
Jiwon Yoon committed
23
24
25

    useEffect(() => {
        console.log(user.id)
26
        if (user.role === "member") {
Jiwon Yoon's avatar
Jiwon Yoon committed
27
28
29
30
31
32
33
34
35
            getUserInfo()
        }
    }, [])

    async function getUserInfo() {
        try {
            const response = await axios.post(`/api/auth/getuserinfo`, {
                id: user.id
            })
36
            console.log(response.data)
Jiwon Yoon's avatar
Jiwon Yoon committed
37
38
39
40
41
42
43
44
45
46
47
48
            setUserInfo(response.data)
        } catch (error) {
            catchErrors(error, setError)
        }
    }

    function handleChangeGuest(e) {
        setGuestInfo({ ...guestInfo, [e.target.name]: String(e.target.value) })
    }

    async function handleClickGuest() {
        try {
한규민's avatar
한규민 committed
49
            const response = await reservationApi.save({
Jiwon Yoon's avatar
Jiwon Yoon committed
50
                ...guestInfo
한규민's avatar
한규민 committed
51
52
53
            });
            setGuestID(response.data.id);
            alert("비회원 정보가 저장되었습니다.");
Jiwon Yoon's avatar
Jiwon Yoon committed
54
55
56
57
58
        } catch (error) {
            catchErrors(error, setError)
        }
    }

59
60
61
62
63
64
65
66
67
68
    function kakaoBtnClick() {
        setElement(
            <div className="text-center">
                <p className=" font-weight-bold" style={{ display: 'inline', color: "#FEDC00" }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
                <p>결제하기를 눌러 결제를 이어가주세요.</p>
            </div>
        )
        setTicketInfo({ ...ticketInfo, payment: "카카오페이" })
    }

Jiwon Yoon's avatar
Jiwon Yoon committed
69
70
    async function reservationComplete() {
        try {
71
            if (user.role === "member") {
한규민's avatar
한규민 committed
72
                const response = await reservationApi.save({
Jiwon Yoon's avatar
Jiwon Yoon committed
73
                    userType: "member",
Jiwon Yoon's avatar
Jiwon Yoon committed
74
                    // payment: "카카오페이",
Jiwon Yoon's avatar
Jiwon Yoon committed
75
76
77
78
                    user: userInfo.id,
                    ...ticketInfo,
                    timetable: 1
                })
79
80
                const responsekakao = await axios.post('/api/kakaopay/test/single', {
                    cid: 'TC0ONETIME',
Jiwon Yoon's avatar
Jiwon Yoon committed
81
82
                    partner_order_id: 'butter_studio',
                    partner_user_id: '000000'+ (userInfo.id || guestInfo.id),
83
84
85
86
87
88
89
90
91
92
93
                    item_name: ticketInfo.title,
                    quantity: ticketInfo.adult + ticketInfo.youth + ticketInfo.senior,
                    total_amount: ticketInfo.totalFee,
                    vat_amount: 0,
                    tax_free_amount: 0,
                    approval_url: 'http://localhost:3000/paymentcomplete',
                    fail_url: 'http://localhost:3000/ticket',
                    cancel_url: 'http://localhost:3000/ticket',
                })
                if (response && responsekakao) {
                    window.location.href = responsekakao.data.redirect_url
94
                }
Jiwon Yoon's avatar
Jiwon Yoon committed
95
96
            } else {
                if (guestID) {
한규민's avatar
한규민 committed
97
                    const response = await reservationApi.save({
Jiwon Yoon's avatar
Jiwon Yoon committed
98
99
100
                        userType: "guest",
                        user: guestID,
                        ...ticketInfo,
Jiwon Yoon's avatar
Jiwon Yoon committed
101
                        // payment: "카카오페이",
Jiwon Yoon's avatar
Jiwon Yoon committed
102
103
                        timetable: 1
                    })
104
105
                    const responsekakao = await axios.post('/api/kakaopay/test/single', {
                        cid: 'TC0ONETIME',
Jiwon Yoon's avatar
Jiwon Yoon committed
106
107
                        partner_order_id: 'butter_studio',
                        partner_user_id: '000000'+ guestID,
108
109
110
111
112
113
114
115
116
117
                        item_name: ticketInfo.title,
                        quantity: ticketInfo.adult + ticketInfo.youth + ticketInfo.senior,
                        total_amount: ticketInfo.totalFee,
                        vat_amount: 0,
                        tax_free_amount: 0,
                        approval_url: 'http://localhost:3000/paymentcomplete',
                        fail_url: 'http://localhost:3000/ticket',
                        cancel_url: 'http://localhost:3000/ticket',
                    })
                    if (response && responsekakao) {
Jiwon Yoon's avatar
Jiwon Yoon committed
118
                        localStorage.setItem('tid',responsekakao.data.tid)
119
                        window.location.href = responsekakao.data.redirect_url
120
                    }
Jiwon Yoon's avatar
Jiwon Yoon committed
121
                } else {
122
                    alert("비회원 정보를 모두 입력 후 비회원 정보 저장 버튼을 눌러주세요.")
Jiwon Yoon's avatar
Jiwon Yoon committed
123
124
125
126
127
128
129
130
131
132
133
                }
            }
        } catch (error) {
            catchErrors(error, setError)
        }
    }


    return (
        <div className="container" style={{ color: "white" }}>
            {console.log(ticketInfo)}
134
            {/* {console.log(userInfo)} */}
135
            {/* {console.log(guestInfo)} */}
Jiwon Yoon's avatar
Jiwon Yoon committed
136
137
138
139
140
141
142
            <div className="row justify-content-center my-5">
                <div className="col-sm-4 ">
                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>결제하기</h3>
                </div>
            </div>
            <div className="row justify-content-center">
                <div className="col-sm-8 text-center">
143
                    {user.role === "member"
Jiwon Yoon's avatar
Jiwon Yoon committed
144
145
                        ?
                        <div>
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
                            <h5 className="mb-4 p-2" style={{ backgroundColor: "white", color: "black" }}>회원정보</h5>
                            <div className="my-1">
                                <label className={styles.labelStyle}>이름</label>
                                <input type="text" name="name" placeholder="이름" value={userInfo.nickname} />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>이메일</label>
                                <input type="email" name="email" placeholder="이메일" value={userInfo.email} />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>생년월일</label>
                                <input type="number" name="birth" placeholder="생년월일" maxLength="6" value={userInfo.birth} />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>휴대폰 번호</label>
                                <input type="number" name="phoneNumber" placeholder="휴대폰 번호" maxLength="11" value={userInfo.phoneNumber} />
                            </div>
                            <div className="m-2">
                                <p className={`text-muted ${styles.warningText}`}>
                                     회원정보 변경은 마이페이지에서 가능합니다.
                                </p>
                            </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
                        </div>
                        :
                        <div>
                            <h5 className="mb-4 p-2" style={{ backgroundColor: "white", color: "black" }}>비회원예매 정보입력</h5>
                            <div className="my-1">
                                <label className={styles.labelStyle}>이름</label>
                                <input type="text" name="name" placeholder="이름" onChange={handleChangeGuest} required />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>이메일</label>
                                <input type="email" name="email" placeholder="이메일" onChange={handleChangeGuest} required />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>생년월일</label>
                                <input type="number" name="birth" placeholder="생년월일" onChange={handleChangeGuest} maxLength="6" required />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>휴대폰 번호</label>
                                <input type="number" name="phoneNumber" placeholder="휴대폰 번호" onChange={handleChangeGuest} maxLength="11" required />
                            </div>
                            <div className="my-1">
                                <label className={styles.labelStyle}>비밀번호</label>
                                <input type="password" name="guestPassword" placeholder="비밀번호" onChange={handleChangeGuest} required style={{ width: "178px" }} />
                            </div>
                            <div className="m-2">
                                <p className={`text-muted ${styles.warningText}`}>
                                     비회원 정보 오기입  예매 내역 확인/취소  티켓 발권이 어려울  있으니 다시 한번 확인해 주시기 바랍니다.
                                </p>
                            </div>
                            <button className="btn btn-warning mb-3" type="button" style={{ width: "100%" }} onClick={handleClickGuest}>비회원 정보 저장</button>
                        </div>
                    }
                    <h5 className="my-4 p-2" style={{ backgroundColor: "white", color: "black" }}>결제방법</h5>
201
202
203
204
205
                    <img src="/images/naverpay_button.png" style={{ width: "150px" }} />
                    <button onClick={kakaoBtnClick} style={{ backgroundColor: "black", border: '0' }}>
                        <img src="/images/payment_icon_yellow_medium.png" style={{ width: "130px" }} />
                    </button>
                    {element}
Jiwon Yoon's avatar
Jiwon Yoon committed
206
                    <div className="my-5">
207
                        <button className="btn btn-warning" type="button" style={{ width: "100%" }} onClick={reservationComplete}>결제하기</button>
Jiwon Yoon's avatar
Jiwon Yoon committed
208
209
210
211
212
213
214
215
216
217
218
219
                    </div>
                </div>

                <div className="col-sm-4">
                    <div className="text-center rounded-3 p-3" style={{ backgroundColor: "#252525" }}>
                        <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
                        <h5 className="my-3">{ticketInfo.title}</h5>
                        <div>{ticketInfo.cinema}</div>
                        <div>{ticketInfo.time}</div>
                        <div className="mb-3">{ticketInfo.selectedTheater} {ticketInfo.selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 65) + el.split('-')[1]) + ' '}</div>
                        <div className="rounded-3 p-3" style={{ backgroundColor: '#404040' }}>
                            <div>성인: {ticketInfo.adult}</div>
220
221
222
                            <div>청소년: {ticketInfo.youth}</div>
                            <div>경로우대: {ticketInfo.senior}</div>
                            <div className="mt-2"> 결제금액: {ticketInfo.totalFee}</div>
Jiwon Yoon's avatar
Jiwon Yoon committed
223
224
225
226
227
228
229
230
231
232
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Payment