Parcourir la source

buat di review

master
yusmardianto il y a 3 ans
Parent
révision
811c6fe3df
3 fichiers modifiés avec 156 ajouts et 119 suppressions
  1. +54
    -23
      api/Booking/booking.js
  2. +93
    -86
      components/Booking/checkout.js
  3. +9
    -10
      components/Booking/review.js

+ 54
- 23
api/Booking/booking.js Voir le fichier

@@ -19,30 +19,61 @@ async function AddBooking(content, token = "") {
return res;
}

async function getReview(token = "") {
var res = await apollo.query(
`
query {
bookings{
id
namaPemesan
emailPemesan
teleponPemesan
pemesan
checkIn
checkOut
jumlahPengunjung
namaKamar
requestKamar
hargaKamar
ppnKamar
hargaTotal
catatan
// async function getReview(token = "") {
// var res = await apollo.query(
// `
// query {
// bookings{
// id
// namaPemesan
// emailPemesan
// teleponPemesan
// pemesan
// checkIn
// checkOut
// jumlahPengunjung
// namaKamar
// requestKamar
// hargaKamar
// ppnKamar
// hargaTotal
// catatan
// }
// }`,
// token
// );
// return res;
// }

async function getReview(transactionID, token="") {
var res = await apollo.query(
`
query($input: ID!) {
bookings(where:{transactionID:$input}) {
id
transactionID
namaPemesan
emailPemesan
teleponPemesan
pemesan
checkIn
checkOut
jumlahPengunjung
namaKamar
requestKamar
hargaKamar
ppnKamar
hargaTotal
catatan
}
}
`,
token,
{
"input": transactionID
}
}`,
token
);
return res;
);
return res;
}

module.exports = {


+ 93
- 86
components/Booking/checkout.js Voir le fichier

@@ -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>


+ 9
- 10
components/Booking/review.js Voir le fichier

@@ -5,21 +5,20 @@ import NumberFormat from 'react-number-format';

const Checkout = function ({ transactionToken, backend, review, ...props }) {

console.log(transactionToken);
const ReviewContens = review.map((data) => {

const Checkin = review[0].checkIn;
const [Checkinyear, Checkinmonth, Checkinday] = Checkin.split('-')
const Checkin = data.checkIn;
const [Checkinyear, Checkinmonth, Checkinday] = Checkin.split('-')

const Checkout = review[0].checkOut;
const [Checkoutnyear, Checkoutnmonth, Checkoutnday] = Checkout.split('-')
const Checkout = data.checkOut;
const [Checkoutnyear, Checkoutnmonth, Checkoutnday] = Checkout.split('-')

const date = (new Date(review[0].checkIn)).getTime();
const today = (new Date(review[0].checkOut)).getTime();
const msDay = 24 * 60 * 60 * 1000; // milliseconds per day
const date = (new Date(data.checkIn)).getTime();
const today = (new Date(data.checkOut)).getTime();
const msDay = 24 * 60 * 60 * 1000; // milliseconds per day

const days = Math.floor((today - date) / msDay);
const days = Math.floor((today - date) / msDay);

const ReviewContens = review.map((data) => {
return (
<div className="row">
<div className="col-lg-12 col-md-6">


Chargement…
Annuler
Enregistrer