Quellcode durchsuchen

buat di review

master
yusmardianto vor 3 Jahren
Ursprung
Commit
811c6fe3df
3 geänderte Dateien mit 156 neuen und 119 gelöschten Zeilen
  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 Datei anzeigen

@@ -19,30 +19,61 @@ async function AddBooking(content, token = "") {
return res; 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 = { module.exports = {


+ 93
- 86
components/Booking/checkout.js Datei anzeigen

@@ -12,7 +12,22 @@ const Checkout = function ({ backend, checkoutItem, ...props }) {
// const [HargaFasilitas, setHargaFasilitas] = useState(''); // const [HargaFasilitas, setHargaFasilitas] = useState('');
// const [NamaFasilitas, setNamaFasilitas] = 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({ const [formValue, setFormValue] = React.useState({
transactionID: UUID,
namaPemesan: "", namaPemesan: "",
emailPemesan: "", emailPemesan: "",
teleponPemesan: "", teleponPemesan: "",
@@ -31,7 +46,7 @@ const Checkout = function ({ backend, checkoutItem, ...props }) {
const disablePastDate = () => { const disablePastDate = () => {
const today = new Date(); const today = new Date();
const dd = String(today.getDate() + 1).padStart(2, "0"); 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(); const yyyy = today.getFullYear();
return yyyy + "-" + mm + "-" + dd; return yyyy + "-" + mm + "-" + dd;
}; };
@@ -41,89 +56,12 @@ const Checkout = function ({ backend, checkoutItem, ...props }) {


const date = (new Date(TglCheckIn)).getTime(); const date = (new Date(TglCheckIn)).getTime();
const today = (new Date(TglCheckOut)).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 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 ( return (
<> <>
<div className="checkout-area ptb-80"> <div className="checkout-area ptb-80">
@@ -149,7 +87,7 @@ const Checkout = function ({ backend, checkoutItem, ...props }) {
hargaKamar: checkoutItem[0].hargaKamar, hargaKamar: checkoutItem[0].hargaKamar,
} }
setFormValue(newformValue) setFormValue(newformValue)
console.log(JSON.stringify(newformValue));
// console.log(JSON.stringify(newformValue));
const response = await fetch( const response = await fetch(
"/api/Booking/CreateBooking", "/api/Booking/CreateBooking",
{ {
@@ -160,14 +98,17 @@ const Checkout = function ({ backend, checkoutItem, ...props }) {
body: JSON.stringify(newformValue), body: JSON.stringify(newformValue),
} }
); );
console.log("response :", response);
// console.log("response :", response);
if (response.ok) { if (response.ok) {
var res = await response.json(); var res = await response.json();
console.log("cek response :", res);
// console.log("cek response :", res);
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
res["DATA"]["booking"]; res["DATA"]["booking"];
swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success"); swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
router.push("/review");
Router.push({
pathname: '/review',
query: { s: UUID }
})
} }
else { else {
swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error"); 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="col-lg-6 col-md-6">
<div className="billing-details"> <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 /> <br />
<div className="row"> <div className="row">
<div className="col-lg-6 col-md-6"> <div className="col-lg-6 col-md-6">
@@ -387,7 +346,55 @@ const Checkout = function ({ backend, checkoutItem, ...props }) {
<div className="order-details"> <div className="order-details">
<h3 className="title">Total Pesanan</h3> <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> <button type="submit" className="btn btn-primary order-btn">Book</button>
</div> </div>


+ 9
- 10
components/Booking/review.js Datei anzeigen

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


const Checkout = function ({ transactionToken, backend, review, ...props }) { 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 ( return (
<div className="row"> <div className="row">
<div className="col-lg-12 col-md-6"> <div className="col-lg-12 col-md-6">


Laden…
Abbrechen
Speichern