You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

404 lines
22 KiB

  1. import React, { useState } from 'react';
  2. import * as Icon from 'react-feather';
  3. import { useRouter } from 'next/router'
  4. import NumberFormat from 'react-number-format';
  5. //sweet alert
  6. import swal from 'sweetalert';
  7. const Checkout = function ({ backend, checkoutItem, ...props }) {
  8. // const [HargaFasilitas, setHargaFasilitas] = useState('');
  9. // const [NamaFasilitas, setNamaFasilitas] = useState('');
  10. const [formValue, setFormValue] = React.useState({
  11. namaPemesan: "",
  12. emailPemesan: "",
  13. teleponPemesan: "",
  14. pemesan: "",
  15. checkIn: "",
  16. checkOut: "",
  17. jumlahPengunjung: "",
  18. requestKamar: "",
  19. catatan: "",
  20. hargaKamar: "",
  21. namaKamar: "",
  22. ppnKamar: 0.1,
  23. hargaTotal: checkoutItem[0].hargaKamar + checkoutItem[0].hargaKamar * 0.1,
  24. });
  25. const disablePastDate = () => {
  26. const today = new Date();
  27. const dd = String(today.getDate() + 1).padStart(2, "0");
  28. const mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
  29. const yyyy = today.getFullYear();
  30. return yyyy + "-" + mm + "-" + dd;
  31. };
  32. const [TglCheckIn, setCheckIn] = useState('');
  33. const [TglCheckOut, setCheckOut] = useState('');
  34. const date = (new Date(TglCheckIn)).getTime();
  35. const today = (new Date(TglCheckOut)).getTime();
  36. const msDay = 24 * 60 * 60 * 1000; // milliseconds per day
  37. const days = Math.floor((today - date) / msDay);
  38. const router = useRouter();
  39. const CheckoutKamar = checkoutItem.map((data) => {
  40. return (
  41. <div className="row">
  42. <div className="col-lg-4 col-md-6">
  43. <img style={{ borderRadius: "10px" }} src={`${backend}${data.imgKamar["url"]}`} height="120px" />
  44. </div>
  45. <div className="col-lg-8 col-md-6">
  46. <h3 className="title">Catania {data.namaKamar}</h3>
  47. <div className="row">
  48. <div className="col-lg-3 col-md-6">
  49. <p>Fasilitas : </p>
  50. </div>
  51. <div className="col-lg-4 col-md-6">
  52. <p><Icon.Wifi /> Free Wifi</p>
  53. </div>
  54. <div className="col-lg-4 col-md-6">
  55. <p><Icon.Phone /> Telepon</p>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. )
  61. })
  62. const CheckoutHarga = checkoutItem.map((data) => {
  63. return (
  64. <div className="order-table table-responsive">
  65. <table className="table table-bordered">
  66. <thead>
  67. <tr>
  68. <th scope="col">Jenis Kamar</th>
  69. <th scope="col">Total</th>
  70. </tr>
  71. </thead>
  72. <tbody>
  73. <tr>
  74. <td className="product-name">
  75. <span href="#">Catania {data.namaKamar}</span>
  76. </td>
  77. <td className="product-total">
  78. <span className="subtotal-amount"><NumberFormat value={data.hargaKamar * days} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
  79. </td>
  80. </tr>
  81. <tr>
  82. <td className="product-name">
  83. <span href="#">Total Hari</span>
  84. </td>
  85. <td className="product-total">
  86. <span className="subtotal-amount">{days} Hari</span>
  87. </td>
  88. </tr>
  89. <tr>
  90. <td className="product-name">
  91. <span href="#">Pajak 10%</span>
  92. </td>
  93. <td className="product-total">
  94. <span type="disable" className="subtotal-amount"><NumberFormat value={data.hargaKamar * days * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
  95. </td>
  96. </tr>
  97. <tr>
  98. <td className="product-name">
  99. <span href="#">Total</span>
  100. </td>
  101. <td className="product-total">
  102. <span type="disable" className="subtotal-amount"><NumberFormat value={data.hargaKamar * days + data.hargaKamar * days * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
  103. </td>
  104. </tr>
  105. </tbody>
  106. </table>
  107. </div>
  108. )
  109. })
  110. return (
  111. <>
  112. <div className="checkout-area ptb-80">
  113. <div className="container">
  114. <div className="row">
  115. <div className="col-lg-12 col-md-12">
  116. <div className="user-actions" style={{ backgroundColor: "#eb1928" }}>
  117. <h4 style={{ color: 'white' }}><Icon.Edit style={{ color: 'white' }} width="50px" /> Important Notice</h4><br />
  118. <p style={{ color: 'white' }}>
  119. <b>As COVID-19 situation evolves, make sure the cancellation policy suits your needs.</b><br />
  120. In reference to the circular letter by the government regarding the spread control of Covid-19, please ensure that you are aware of your booking's refund, cancellation, and reschedule policy.
  121. </p>
  122. </div>
  123. </div>
  124. </div>
  125. <form
  126. onSubmit={async (e) => {
  127. e.preventDefault();
  128. var newformValue = {
  129. ...formValue,
  130. namaKamar: checkoutItem[0].namaKamar,
  131. hargaKamar: checkoutItem[0].hargaKamar,
  132. }
  133. setFormValue(newformValue)
  134. console.log(JSON.stringify(newformValue));
  135. const response = await fetch(
  136. "/api/Booking/CreateBooking",
  137. {
  138. method: "POST",
  139. headers: {
  140. 'Content-Type': 'application/json'
  141. },
  142. body: JSON.stringify(newformValue),
  143. }
  144. );
  145. console.log("response :", response);
  146. if (response.ok) {
  147. var res = await response.json();
  148. console.log("cek response :", res);
  149. if (res["STATUS"] === 1) {
  150. res["DATA"]["booking"];
  151. swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
  152. router.push("/review");
  153. }
  154. else {
  155. swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
  156. }
  157. } else {
  158. swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
  159. }
  160. return false;
  161. }}
  162. >
  163. <div className="row">
  164. <div className="col-lg-6 col-md-6">
  165. <div className="billing-details">
  166. <h3 className="title">Masukan Informasi Pemesan</h3>
  167. <div className="row">
  168. <div className="col-lg-12 col-md-12">
  169. <div className="form-group">
  170. <label>Nama Lengkap <span className="required">*</span></label>
  171. <input
  172. name="namaPemesan"
  173. type="text"
  174. className="form-control"
  175. onInput={(e) => {
  176. setFormValue({
  177. ...formValue,
  178. namaPemesan: e.target.value.toString(),
  179. })
  180. }}
  181. />
  182. </div>
  183. </div>
  184. <div className="col-lg-6 col-md-6">
  185. <div className="form-group">
  186. <label>Alamat Email <span className="required">*</span></label>
  187. <input
  188. name="email"
  189. type="email"
  190. className="form-control"
  191. onInput={(e) => {
  192. setFormValue({
  193. ...formValue,
  194. emailPemesan: e.target.value.toString(),
  195. })
  196. }}
  197. />
  198. </div>
  199. </div>
  200. <div className="col-lg-6 col-md-6">
  201. <div className="form-group">
  202. <label>Masukan Ulang Alamat Email <span className="required">*</span></label>
  203. <input type="email" className="form-control" />
  204. </div>
  205. </div>
  206. <div className="col-lg-6 col-md-6">
  207. <div className="form-group">
  208. <label>Nomer Telepon <span className="required">*</span></label>
  209. <input
  210. name="teleponPemesan"
  211. type="text"
  212. className="form-control"
  213. onInput={(e) => {
  214. setFormValue({
  215. ...formValue,
  216. teleponPemesan: e.target.value.toString(),
  217. })
  218. }}
  219. />
  220. </div>
  221. </div>
  222. <div className="col-lg-6 col-md-6">
  223. <div className="form-group">
  224. <label>Saya Memesan Untuk ? <span className="required">*</span></label>
  225. <div className="select-box">
  226. <select
  227. name="pemesan"
  228. className="form-select"
  229. onInput={(e) => {
  230. setFormValue({
  231. ...formValue,
  232. pemesan: e.target.value.toString(),
  233. })
  234. }}
  235. >
  236. <option value="0">- Pilih Salah Satu -</option>
  237. <option value="Saya Sendiri">Saya Sendiri</option>
  238. <option value="Orang Lain">Orang Lain</option>
  239. </select>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <div className="col-lg-6 col-md-6">
  247. <div className="billing-details">
  248. {CheckoutKamar}
  249. <br />
  250. <div className="row">
  251. <div className="col-lg-6 col-md-6">
  252. <div className="form-group">
  253. <label>Check In<span className="required">*</span></label>
  254. <input
  255. name="checkIn"
  256. type="date"
  257. min={disablePastDate()}
  258. className="form-control"
  259. onChange={e => setCheckIn(e.target.value)}
  260. onInput={(e) => {
  261. setFormValue({
  262. ...formValue,
  263. checkIn: e.target.value,
  264. })
  265. }}
  266. />
  267. </div>
  268. </div>
  269. <div className="col-lg-6 col-md-6">
  270. <div className="form-group">
  271. <label>Check Out <span className="required">*</span></label>
  272. <input
  273. data-date-format="DD MMMM YYYY"
  274. name="checkOut"
  275. type="date"
  276. min={disablePastDate()}
  277. className="form-control"
  278. onChange={e => setCheckOut(e.target.value)}
  279. onInput={(e) => {
  280. setFormValue({
  281. ...formValue,
  282. checkOut: e.target.value,
  283. })
  284. }}
  285. />
  286. </div>
  287. </div>
  288. <div className="col-lg-12 col-md-6">
  289. <div className="form-group">
  290. <label>Jumlah Pengunjung <span className="required">*</span></label>
  291. <div className="select-box">
  292. <select
  293. name="jumlahPengunjung"
  294. className="form-select"
  295. onInput={(e) => {
  296. setFormValue({
  297. ...formValue,
  298. jumlahPengunjung: e.target.value.toString(),
  299. })
  300. }}
  301. >
  302. <option value="0">- Pilih Salah Satu -</option>
  303. <option value="1">1 Orang</option>
  304. <option value="2">2 Orang</option>
  305. </select>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. <div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
  313. <div className="billing-details">
  314. <h3 className="title">Permintaan Khusus Untuk Kamar</h3>
  315. <div className="row">
  316. {checkoutItem[0]["fasilitas_kamars"].map((option) => (
  317. <div className="col-lg-4 col-md-4">
  318. <div className="form-check">
  319. <input
  320. name="requestKamar"
  321. type="checkbox"
  322. className="form-check-input"
  323. value={option.namaFasilitas}
  324. onInput={(e) => {
  325. setFormValue({
  326. ...formValue,
  327. requestKamar: e.target.value.toString(),
  328. })
  329. }}
  330. />
  331. <label className="form-check-label" value={option.namaFasilitas}>{option.namaFasilitas}</label>
  332. </div>
  333. </div>
  334. ))}
  335. <div className="col-lg-12 col-md-12">
  336. <div className="form-group">
  337. <textarea
  338. name="catatan"
  339. id="notes"
  340. cols="30"
  341. rows="4"
  342. placeholder="Catatan"
  343. className="form-control"
  344. onInput={(e) => {
  345. setFormValue({
  346. ...formValue,
  347. catatan: e.target.value.toString(),
  348. })
  349. }}
  350. ></textarea>
  351. </div>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. <div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
  357. <div className="order-details">
  358. <h3 className="title">Total Pesanan</h3>
  359. {CheckoutHarga}
  360. <button type="submit" className="btn btn-primary order-btn">Book</button>
  361. </div>
  362. </div>
  363. </div>
  364. </form>
  365. </div>
  366. </div>
  367. </>
  368. )
  369. }
  370. export default Checkout;