|
|
@@ -12,7 +12,22 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
// const [HargaFasilitas, setHargaFasilitas] = useState(''); |
|
|
|
// const [NamaFasilitas, setNamaFasilitas] = useState(''); |
|
|
|
|
|
|
|
function CreateID(length) { |
|
|
|
var result = ''; |
|
|
|
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; |
|
|
|
var charactersLength = characters.length; |
|
|
|
for (var i = 0; i < length; i++) { |
|
|
|
result += characters.charAt(Math.floor(Math.random() * |
|
|
|
charactersLength)); |
|
|
|
} |
|
|
|
return result; |
|
|
|
} |
|
|
|
|
|
|
|
const UUID = CreateID(10); |
|
|
|
console.log("hasil : ", UUID); |
|
|
|
|
|
|
|
const [formValue, setFormValue] = React.useState({ |
|
|
|
transactionID: UUID, |
|
|
|
namaPemesan: "", |
|
|
|
emailPemesan: "", |
|
|
|
teleponPemesan: "", |
|
|
@@ -31,7 +46,7 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
const disablePastDate = () => { |
|
|
|
const today = new Date(); |
|
|
|
const dd = String(today.getDate() + 1).padStart(2, "0"); |
|
|
|
const mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0! |
|
|
|
const mm = String(today.getMonth() + 1).padStart(2, "0"); |
|
|
|
const yyyy = today.getFullYear(); |
|
|
|
return yyyy + "-" + mm + "-" + dd; |
|
|
|
}; |
|
|
@@ -41,89 +56,12 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
|
|
|
|
const date = (new Date(TglCheckIn)).getTime(); |
|
|
|
const today = (new Date(TglCheckOut)).getTime(); |
|
|
|
const msDay = 24 * 60 * 60 * 1000; // milliseconds per day |
|
|
|
const msDay = 24 * 60 * 60 * 1000; |
|
|
|
|
|
|
|
const days = Math.floor((today - date) / msDay); |
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
const Router = useRouter(); |
|
|
|
|
|
|
|
const CheckoutKamar = checkoutItem.map((data) => { |
|
|
|
return ( |
|
|
|
<div className="row"> |
|
|
|
<div className="col-lg-4 col-md-6"> |
|
|
|
<img style={{ borderRadius: "10px" }} src={`${backend}${data.imgKamar["url"]}`} height="120px" /> |
|
|
|
</div> |
|
|
|
<div className="col-lg-8 col-md-6"> |
|
|
|
<h3 className="title">Catania {data.namaKamar}</h3> |
|
|
|
<div className="row"> |
|
|
|
<div className="col-lg-3 col-md-6"> |
|
|
|
<p>Fasilitas : </p> |
|
|
|
</div> |
|
|
|
<div className="col-lg-4 col-md-6"> |
|
|
|
<p><Icon.Wifi /> Free Wifi</p> |
|
|
|
</div> |
|
|
|
<div className="col-lg-4 col-md-6"> |
|
|
|
<p><Icon.Phone /> Telepon</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
|
|
|
|
const CheckoutHarga = checkoutItem.map((data) => { |
|
|
|
return ( |
|
|
|
<div className="order-table table-responsive"> |
|
|
|
<table className="table table-bordered"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
<th scope="col">Jenis Kamar</th> |
|
|
|
<th scope="col">Total</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
|
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Catania {data.namaKamar}</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span className="subtotal-amount"><NumberFormat value={data.hargaKamar * days} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Total Hari</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span className="subtotal-amount">{days} Hari</span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Pajak 10%</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span type="disable" className="subtotal-amount"><NumberFormat value={data.hargaKamar * days * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Total</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span type="disable" className="subtotal-amount"><NumberFormat value={data.hargaKamar * days + data.hargaKamar * days * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div className="checkout-area ptb-80"> |
|
|
@@ -149,7 +87,7 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
hargaKamar: checkoutItem[0].hargaKamar, |
|
|
|
} |
|
|
|
setFormValue(newformValue) |
|
|
|
console.log(JSON.stringify(newformValue)); |
|
|
|
// console.log(JSON.stringify(newformValue)); |
|
|
|
const response = await fetch( |
|
|
|
"/api/Booking/CreateBooking", |
|
|
|
{ |
|
|
@@ -160,14 +98,17 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
body: JSON.stringify(newformValue), |
|
|
|
} |
|
|
|
); |
|
|
|
console.log("response :", response); |
|
|
|
// console.log("response :", response); |
|
|
|
if (response.ok) { |
|
|
|
var res = await response.json(); |
|
|
|
console.log("cek response :", res); |
|
|
|
// console.log("cek response :", res); |
|
|
|
if (res["STATUS"] === 1) { |
|
|
|
res["DATA"]["booking"]; |
|
|
|
swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success"); |
|
|
|
router.push("/review"); |
|
|
|
Router.push({ |
|
|
|
pathname: '/review', |
|
|
|
query: { s: UUID } |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error"); |
|
|
@@ -270,7 +211,25 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
|
<div className="billing-details"> |
|
|
|
{CheckoutKamar} |
|
|
|
<div className="row"> |
|
|
|
<div className="col-lg-4 col-md-6"> |
|
|
|
<img style={{ borderRadius: "10px" }} src={`${backend}${checkoutItem[0].imgKamar["url"]}`} height="120px" /> |
|
|
|
</div> |
|
|
|
<div className="col-lg-8 col-md-6"> |
|
|
|
<h3 className="title">Catania {checkoutItem[0].namaKamar}</h3> |
|
|
|
<div className="row"> |
|
|
|
<div className="col-lg-3 col-md-6"> |
|
|
|
<p>Fasilitas : </p> |
|
|
|
</div> |
|
|
|
<div className="col-lg-4 col-md-6"> |
|
|
|
<p><Icon.Wifi /> Free Wifi</p> |
|
|
|
</div> |
|
|
|
<div className="col-lg-4 col-md-6"> |
|
|
|
<p><Icon.Phone /> Telepon</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<br /> |
|
|
|
<div className="row"> |
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
@@ -387,7 +346,55 @@ const Checkout = function ({ backend, checkoutItem, ...props }) { |
|
|
|
<div className="order-details"> |
|
|
|
<h3 className="title">Total Pesanan</h3> |
|
|
|
|
|
|
|
{CheckoutHarga} |
|
|
|
<div className="order-table table-responsive"> |
|
|
|
<table className="table table-bordered"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
<th scope="col">Jenis Kamar</th> |
|
|
|
<th scope="col">Total</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
|
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Catania {checkoutItem[0].namaKamar}</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span className="subtotal-amount"><NumberFormat value={checkoutItem[0].hargaKamar * days} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Total Hari</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span className="subtotal-amount">{days} Hari</span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Pajak 10%</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span type="disable" className="subtotal-amount"><NumberFormat value={checkoutItem[0].hargaKamar * days * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td className="product-name"> |
|
|
|
<span href="#">Total</span> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
|
<span type="disable" className="subtotal-amount"><NumberFormat value={checkoutItem[0].hargaKamar * days + checkoutItem[0].hargaKamar * days * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<button type="submit" className="btn btn-primary order-btn">Book</button> |
|
|
|
</div> |
|
|
|