yusmar
/
catania-hotel-web
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

checkout

master
yusmardianto 3 年之前
父節點
1d3fada54e
當前提交
3980ec47ee
共有 12 個檔案被更改，包括 834 行新增 和 376 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      .env-sample
  2. +24
    -0
      api/Booking/booking.js
  3. +61
    -0
      api/Kamar/kamar.js
  4. +372
    -0
      components/Booking/checkout.js
  5. +154
    -0
      components/Booking/review.js
  6. +28
    -20
      components/Home/MainBanner.js
  7. +5
    -0
      package.json
  8. +7
    -0
      pages/api/Booking/CreateBooking.js
  9. +21
    -208
      pages/checkout.js
  10. +34
    -3
      pages/index.js
  11. +2
    -145
      pages/review.js
  12. +120
    -0
      yarn.lock

+ 6
- 0
.env-sample 查看文件

@@ -0,0 +1,6 @@
API_URL=#STRAPI URL#
API_GRAPHQL_URI=#STRAPI URL#/graphql
BACKEND_SERVER_URI =#STRAPI URL#

PORT=#PORT#
NODE_ENV = production

+ 24
- 0
api/Booking/booking.js 查看文件

@@ -0,0 +1,24 @@
import apollo from "../../lib/apollo.js";

async function AddBooking(content, token = "") {
var res = await apollo.mutation(
`
mutation($input: BookingInput!) {
createBooking(input: { data: $input }) {
booking {
id
}
}
}
`,
token,
{
input: content,
}
);
return res;
}

module.exports = {
AddBooking: AddBooking,
};

+ 61
- 0
api/Kamar/kamar.js 查看文件

@@ -0,0 +1,61 @@
import apollo from "../../lib/apollo.js";

async function GetKamar(token = "") {
var res = await apollo.query(
`
query {
jenisKamars {
id
namaKamar
hargaKamar
jumlahKamar
imgKamar {
url
}
fasilitas_kamars {
namaFasilitas
hargaFasilitas
}
}
}
`,
token
);
return res;
}

async function GetDetailKamar(id, token="") {
var res = await apollo.query(
`
query($input: ID!) {
jenisKamars(where:{id:$input}) {
id
namaKamar
hargaKamar
jumlahKamar
imgKamar {
url
}
fasilitas_kamars {
namaFasilitas
hargaFasilitas
}
}
}
`,
token,
{
"input": id
}
);
return res;
}


module.exports = {

GetKamar: GetKamar,

//detail
GetDetailKamar: GetDetailKamar,
};

+ 372
- 0
components/Booking/checkout.js 查看文件

@@ -0,0 +1,372 @@
import React, { useState } from 'react';
import * as Icon from 'react-feather';

import NumberFormat from 'react-number-format';

//sweet alert
import swal from 'sweetalert';

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

// const [HargaFasilitas, setHargaFasilitas] = useState('');
// const [NamaFasilitas, setNamaFasilitas] = useState('');

const [formValue, setFormValue] = React.useState({
namaPemesan: "",
emailPemesan: "",
teleponPemesan: "",
pemesan: "",
checkIn: "",
checkOut: "",
jumlahPengunjung: "",
requestKamar: "",
catatan: "",
hargaKamar: "",
namaKamar: "",
ppnKamar: 0.1,
hargaTotal: checkoutItem[0].hargaKamar + checkoutItem[0].hargaKamar * 0.1,
});

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 yyyy = today.getFullYear();
return yyyy + "-" + mm + "-" + dd;
};

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} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></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 + data.hargaKamar * 0.1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
</td>
</tr>
</tbody>
</table>
</div>
)
})
return (
<>
<div className="checkout-area ptb-80">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="user-actions" style={{ backgroundColor: "#eb1928" }}>
<h4 style={{ color: 'white' }}><Icon.Edit style={{ color: 'white' }} width="50px" /> Important Notice</h4><br />
<p style={{ color: 'white' }}>
<b>As COVID-19 situation evolves, make sure the cancellation policy suits your needs.</b><br />
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.
</p>
</div>
</div>
</div>

<form
onSubmit={async (e) => {
e.preventDefault();
var newformValue = {
...formValue,
namaKamar: checkoutItem[0].namaKamar,
hargaKamar: checkoutItem[0].hargaKamar,
}
setFormValue(newformValue)
console.log(JSON.stringify(newformValue));
const response = await fetch(
"/api/Booking/CreateBooking",
{
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newformValue),
}
);
console.log("response :", response);
if (response.ok) {
var res = await response.json();
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");
}
else {
swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
}
} else {
swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
}
return false;
}}
>
<div className="row">
<div className="col-lg-6 col-md-6">
<div className="billing-details">
<h3 className="title">Masukan Informasi Pemesan</h3>

<div className="row">
<div className="col-lg-12 col-md-12">
<div className="form-group">
<label>Nama Lengkap <span className="required">*</span></label>
<input
name="namaPemesan"
type="text"
className="form-control"
onInput={(e) => {
setFormValue({
...formValue,
namaPemesan: e.target.value.toString(),
})
}}
/>
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Alamat Email <span className="required">*</span></label>
<input
name="email"
type="email"
className="form-control"
onInput={(e) => {
setFormValue({
...formValue,
emailPemesan: e.target.value.toString(),
})
}}
/>
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Masukan Ulang Alamat Email <span className="required">*</span></label>
<input type="email" className="form-control" />
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Nomer Telepon <span className="required">*</span></label>
<input
name="teleponPemesan"
type="text"
className="form-control"
onInput={(e) => {
setFormValue({
...formValue,
teleponPemesan: e.target.value.toString(),
})
}}
/>
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Saya Memesan Untuk ? <span className="required">*</span></label>

<div className="select-box">
<select
name="pemesan"
className="form-select"
onInput={(e) => {
setFormValue({
...formValue,
pemesan: e.target.value.toString(),
})
}}
>
<option value="0">- Pilih Salah Satu -</option>
<option value="Saya Sendiri">Saya Sendiri</option>
<option value="Orang Lain">Orang Lain</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="billing-details">
{CheckoutKamar}
<br />
<div className="row">
<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Check In<span className="required">*</span></label>
<input
name="checkIn"
type="date"
min={disablePastDate()}
className="form-control"
onInput={(e) => {
setFormValue({
...formValue,
checkIn: e.target.value,
})
}}
/>
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Check Out <span className="required">*</span></label>
<input
data-date-format="DD MMMM YYYY"
name="checkOut"
type="date"
min={disablePastDate()}
className="form-control"
onInput={(e) => {
setFormValue({
...formValue,
checkOut: e.target.value,
})
}}
/>
</div>
</div>

<div className="col-lg-12 col-md-6">
<div className="form-group">
<label>Jumlah Pengunjung <span className="required">*</span></label>

<div className="select-box">
<select
name="jumlahPengunjung"
className="form-select"
onInput={(e) => {
setFormValue({
...formValue,
jumlahPengunjung: e.target.value.toString(),
})
}}
>
<option value="0">- Pilih Salah Satu -</option>
<option value="1">1 Orang</option>
<option value="2">2 Orang</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
<div className="billing-details">
<h3 className="title">Permintaan Khusus Untuk Kamar</h3>
<div className="row">
{checkoutItem[0]["fasilitas_kamars"].map((option) => (
<div className="col-lg-4 col-md-4">
<div className="form-check">
<input
name="requestKamar"
type="checkbox"
className="form-check-input"
value={option.namaFasilitas}
onInput={(e) => {
setFormValue({
...formValue,
requestKamar: e.target.value.toString(),
})
}}
/>
<label className="form-check-label" value={option.namaFasilitas}>{option.namaFasilitas}</label>
</div>
</div>
))}
<div className="col-lg-12 col-md-12">
<div className="form-group">
<textarea
name="catatan"
id="notes"
cols="30"
rows="4"
placeholder="Catatan"
className="form-control"
onInput={(e) => {
setFormValue({
...formValue,
catatan: e.target.value.toString(),
})
}}
></textarea>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
<div className="order-details">
<h3 className="title">Total Pesanan</h3>

{CheckoutHarga}

<button type="submit" className="btn btn-primary order-btn">Book</button>
</div>
</div>

</div>
</form>
</div>
</div>
</>
)
}

export default Checkout;

+ 154
- 0
components/Booking/review.js 查看文件

@@ -0,0 +1,154 @@
import React, { useState } from 'react';
import * as Icon from 'react-feather';

const Checkout = () => {
return (
<>
<div className="checkout-area ptb-80">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="user-actions">
<h4><Icon.Edit width="50px" /> Mohon Periksa Ulang Pesanan Anda</h4><br />
</div>
</div>
</div>

<form>
<div className="row">
<div className="col-lg-12 col-md-6">
<div className="billing-details">
<div className="row">
<div className="col-lg-4 col-md-6">
<img style={{ borderRadius: "10px" }} src="https://origin.pegipegi.com/jalan/images/pictM/Y4/Y972594/Y972594002.jpg" width="100%" />
</div>
<div className="col-lg-6 col-md-6">
<h2 className="title">Catania Double Room</h2>
<div className="row">
<div className="col-lg-3 col-md-6">
<p>Fasilitas : </p>
</div>
</div>
<div className="row">
<div className="col-lg-3 col-md-6">
<p><Icon.Wifi /> Free Wifi</p>
</div>
<div className="col-lg-3 col-md-6">
<p><Icon.Phone /> Telepon</p>
</div>
</div><br /><br />
<div className="row">
<div className="col-lg-3 col-md-6">
<h6>Check In </h6>
<h6><p>25 Nov 2021</p></h6>
<h6><p>From 14:00</p></h6>
</div>
<div className="col-lg-3 col-md-6">
<h6>Check Out </h6>
<h6><p>25 Nov 2021</p></h6>
<h6><p>Before 14:00</p></h6>
</div>
<div className="col-lg-3 col-md-6">
<h6>Durasi Hari </h6>
<h6><p>1 Hari</p></h6>
</div>
<div className="col-lg-2 col-md-6">
<h6>Pengunjung </h6>
<h6><p>1 Orang</p></h6>
</div>
</div>
</div>
</div><br />
</div>
</div>

<div className="col-lg-12 col-md-6" style={{ marginTop: "50px" }}>
<div className="billing-details">
<h3 className="title">Informasi Pemesan</h3>

<div className="row">
<div className="col-lg-7 col-md-4">
<div className="row">
<div className="col-lg-12 col-md-4">
<h6>Nama Pemesan : Yusmardianto</h6>
</div>
<div className="col-lg-12 col-md-4">
<h6>Nomer HP Pemesan : 087797315685 </h6>
</div>
<div className="col-lg-12 col-md-4">
<h6>Alamat Email Pemesan : yusmardianto@thamrin.co.id</h6>
</div>
</div>
</div>
<div className="col-lg-5 col-md-4">
<div className="row">
<div className="col-lg-12 col-md-4">
<h6>Pesan Khusus : Yusmardianto</h6>
</div>
<div className="col-lg-7 col-md-4">
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-12 col-md-6" style={{ marginTop: "50px" }}>
<div className="order-details">
<h3 className="title">Total Pesanan</h3>

<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">
<a href="#">Double Room</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.180.000</span>
</td>
</tr>
<tr>
<td className="product-name">
<a href="#">Extra Bed</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.50.000</span>
</td>
</tr>
<tr>
<td className="product-name">
<a href="#">Pajak 10%</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.23.000</span>
</td>
</tr>
</tbody>
</table>
</div>

<a href="#" className="btn btn-primary order-btn">Bayar Pesanan</a>
</div>
</div>

</div>
</form>
</div>
</div>
</>
)
}

export default Checkout;

+ 28
- 20
components/Home/MainBanner.js 查看文件

@@ -2,7 +2,33 @@ import React from 'react';
import Link from 'next/link';
import * as Icon from 'react-feather';

const MainBanner = () => {
import NumberFormat from 'react-number-format';

const MainBanner = function ({ backend, kamar, ...props }) {
const kamarContent = kamar.map((data) => {
return (
<div className="col-lg-5 offset-lg-1">
<div className="agency-services-box">
<img src={`${backend}${data.imgKamar["url"]}`} alt="image" />

<div className="content">
<h3>
<Link href={"/checkout?s=" + data.id}>
<a>{data.namaKamar}<br /><NumberFormat value={data.hargaKamar} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></a>
</Link>
</h3>

<Link href={"/checkout?s=" + data.id}>
<a className="read-more-btn">
Booking Now <Icon.PlusCircle />
</a>
</Link>
</div>
</div>
</div>
)
})

return (
<div className="main-banner" style={{ marginTop: "-50px" }}>
<div className="d-table">
@@ -20,25 +46,7 @@ const MainBanner = () => {
</div>
</div>

<div className="col-lg-5 offset-lg-1">
<div className="agency-services-box">
<img src="/images/agency-image/agency-services-img1.jpg" alt="image" />

<div className="content">
<h3>
<Link href="/checkout">
<a>Double Room<br/>Rp.180.000</a>
</Link>
</h3>

<Link href="/checkout">
<a className="read-more-btn">
Booking Now <Icon.PlusCircle />
</a>
</Link>
</div>
</div>
</div>
{kamarContent}
</div>
</div>
</div>


+ 5
- 0
package.json 查看文件

@@ -10,12 +10,15 @@
},
"author": "EnvyTheme.com",
"dependencies": {
"@apollo/client": "^3.3.11",
"@emotion/react": "^11.6.0",
"@emotion/styled": "^11.6.0",
"@mui/material": "^5.1.1",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
"cross-fetch": "^3.1.4",
"dotenv": "^10.0.0",
"graphql": "^16.0.1",
"next": "^10.0.7",
"nodemailer": "^6.5.0",
"nodemailer-sendgrid-transport": "^0.2.0",
@@ -26,6 +29,7 @@
"react-hook-form": "^6.15.4",
"react-icons": "^4.3.1",
"react-masonry-component": "^6.2.1",
"react-number-format": "^4.8.0",
"react-owl-carousel3": "^2.2.5",
"react-redux": "^7.1.0",
"react-slick": "^0.28.0",
@@ -35,6 +39,7 @@
"redux": "^3.6.0",
"redux-devtools-extension": "^2.13.2",
"sass": "^1.32.7",
"sweetalert": "^2.1.2",
"sweetalert2": "^10.15.5",
"sweetalert2-react-content": "^3.3.1"
},


+ 7
- 0
pages/api/Booking/CreateBooking.js 查看文件

@@ -0,0 +1,7 @@
import Booking from "api/Booking/booking";

export default async function handler(req, resp) {
var input = req.body;
var res = await Booking.AddBooking(input);
resp.status(200).json(res);
}

+ 21
- 208
pages/checkout.js 查看文件

@@ -1,223 +1,36 @@
import React, { useState } from 'react';
import Navbar from "@/components/_App/NavbarHome";
import Footer from "@/components/_App/Footer";
import PageBanner from '@/components/Common/PageBanner';
import CheckoutContent from "@/components/Booking/checkout";
import * as Icon from 'react-feather';

const Checkout = () => {
import GetCheckoutItem from "api/Kamar/kamar";

const Checkout = function ({ backend, checkoutItem, ...props }) {
return (
<>
<Navbar /><br /><br />

<div className="checkout-area ptb-80">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="user-actions" style={{backgroundColor:"#eb1928"}}>
<h4 style={{ color: 'white' }}><Icon.Edit style={{ color: 'white' }} width="50px" /> Important Notice</h4><br/>
<p style={{ color: 'white' }}>
<b>As COVID-19 situation evolves, make sure the cancellation policy suits your needs.</b><br/>
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.
</p>
</div>
</div>
</div>

<form>
<div className="row">
<div className="col-lg-6 col-md-6">
<div className="billing-details">
<h3 className="title">Masukan Informasi Pemesan</h3>

<div className="row">
<div className="col-lg-12 col-md-12">
<div className="form-group">
<label>Nama Lengkap <span className="required">*</span></label>
<input type="text" className="form-control" />
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Alamat Email <span className="required">*</span></label>
<input type="email" className="form-control" />
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Masukan Ulang Alamat Email <span className="required">*</span></label>
<input type="email" className="form-control" />
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Nomer Telepon <span className="required">*</span></label>
<input type="text" className="form-control" />
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Saya Memesan Untuk ? <span className="required">*</span></label>

<div className="select-box">
<select className="form-select">
<option value="1">Saya Sendiri</option>
<option value="2">Orang Lain</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="billing-details">
<div className="row">
<div className="col-lg-4 col-md-6">
<img style={{ borderRadius:"10px" }} src="https://origin.pegipegi.com/jalan/images/pictM/Y4/Y972594/Y972594002.jpg" height="120px" />
</div>
<div className="col-lg-8 col-md-6">
<h3 className="title">Catania Double Room</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">
<div className="form-group">
<label>Check In<span className="required">*</span></label>
<input type="date" className="form-control" />
</div>
</div>

<div className="col-lg-6 col-md-6">
<div className="form-group">
<label>Check Out <span className="required">*</span></label>
<input type="date" className="form-control" />
</div>
</div>

<div className="col-lg-12 col-md-6">
<div className="form-group">
<label>Jumlah Pengunjung <span className="required">*</span></label>

<div className="select-box">
<select className="form-select">
<option value="1">1 Orang</option>
<option value="2">2 Orang</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
<div className="billing-details">
<h3 className="title">Permintaan Khusus Untuk Kamar</h3>

<div className="row">
<div className="col-lg-4 col-md-4">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="1-large-bed" />
<label className="form-check-label" htmlFor="1-large-bed">1 Kasur Besar</label>
</div>
</div>

<div className="col-lg-4 col-md-4">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="2-single-bed" />
<label className="form-check-label" htmlFor="2-single-bed">2 Kasur Single</label>
</div>
</div>

<div className="col-lg-4 col-md-4">
<div className="form-check">
<input type="checkbox" className="form-check-input" id="extra-bed" />
<label className="form-check-label" htmlFor="extra-bed">Extra Kasur</label>
</div>
</div>

<div className="col-lg-12 col-md-12">
<div className="form-group">
<textarea name="notes" id="notes" cols="30" rows="4" placeholder="Catatan" className="form-control"></textarea>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-6 col-md-6" style={{ marginTop: "50px" }}>
<div className="order-details">
<h3 className="title">Total Pesanan</h3>

<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">
<a href="#">Double Room</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.180.000</span>
</td>
</tr>
<tr>
<td className="product-name">
<a href="#">Extra Bed</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.50.000</span>
</td>
</tr>
<tr>
<td className="product-name">
<a href="#">Pajak 10%</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.23.000</span>
</td>
</tr>
</tbody>
</table>
</div>

<a href="/review" className="btn btn-primary order-btn">Book</a>
</div>
</div>

</div>
</form>
</div>
</div>
<CheckoutContent checkoutItem={checkoutItem} backend={backend} />

<Footer />
</>
)
}

export default Checkout;
export default Checkout;

export async function getServerSideProps(context) {
var {query} = context;
var checkoutItem = [];
const backend = process.env.BACKEND_SERVER_URI;

var res = await GetCheckoutItem.GetDetailKamar(query.s||0);
if (res["STATUS"] === 1) {
checkoutItem = res["DATA"]["jenisKamars"];
}
return {
props: { checkoutItem, backend }, // will be passed to the page component as props
};
}

+ 34
- 3
pages/index.js 查看文件

@@ -6,12 +6,14 @@ import Facilities from "@/components/Home/Facilities";
import PromoCarousel from "@/components/Home/PromoCarousel";
import Footer from "@/components/_App/Footer";

const Index = () => {
import GetKamar from "api/Kamar/kamar.js"

const Index = function ({ backend, kamar, ...props }) {
return (
<>
<Navbar />
{/* <PromoCarousel /> */}
<MainBanner />
<MainBanner kamar={kamar} backend={backend} />
<Facilities />
<Nearby />
<Footer />
@@ -19,4 +21,33 @@ const Index = () => {
)
}

export default Index;
export default Index;

export async function getServerSideProps() {
var kamar = [];
const backend = process.env.BACKEND_SERVER_URI;

// var { req, resp } = context;
// const cookies = new Cookies(req, resp);
// var user = "";
// var userObj = (await cookies.get("user"))
// ? JSON.parse(await cookies.get("user"))
// : null;
// if (userObj) {
// let sessionId = userObj["partners_login_states"].filter(function (i) {
// return (
// i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
// );
// });
// if (sessionId.length != 0) user = userObj["username"];
// }

var res = await GetKamar.GetKamar();
if (res["STATUS"] === 1) {
kamar = res["DATA"]["jenisKamars"];
}
return {
props: { kamar, backend }, // will be passed to the page component as props
};
}

+ 2
- 145
pages/review.js 查看文件

@@ -1,157 +1,14 @@
import React, { useState } from 'react';
import Navbar from "@/components/_App/NavbarHome";
import Footer from "@/components/_App/Footer";
import PageBanner from '@/components/Common/PageBanner';
import * as Icon from 'react-feather';
import ReviewContent from '@/components/Booking/review';

const Checkout = () => {
return (
<>
<Navbar /><br /><br />

<div className="checkout-area ptb-80">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="user-actions">
<h4><Icon.Edit width="50px" /> Mohon Periksa Ulang Pesanan Anda</h4><br />
</div>
</div>
</div>

<form>
<div className="row">
<div className="col-lg-12 col-md-6">
<div className="billing-details">
<div className="row">
<div className="col-lg-4 col-md-6">
<img style={{ borderRadius: "10px" }} src="https://origin.pegipegi.com/jalan/images/pictM/Y4/Y972594/Y972594002.jpg" width="100%" />
</div>
<div className="col-lg-6 col-md-6">
<h2 className="title">Catania Double Room</h2>
<div className="row">
<div className="col-lg-3 col-md-6">
<p>Fasilitas : </p>
</div>
</div>
<div className="row">
<div className="col-lg-3 col-md-6">
<p><Icon.Wifi /> Free Wifi</p>
</div>
<div className="col-lg-3 col-md-6">
<p><Icon.Phone /> Telepon</p>
</div>
</div><br /><br />
<div className="row">
<div className="col-lg-3 col-md-6">
<h6>Check In </h6>
<h6><p>25 Nov 2021</p></h6>
<h6><p>From 14:00</p></h6>
</div>
<div className="col-lg-3 col-md-6">
<h6>Check Out </h6>
<h6><p>25 Nov 2021</p></h6>
<h6><p>Before 14:00</p></h6>
</div>
<div className="col-lg-3 col-md-6">
<h6>Durasi Hari </h6>
<h6><p>1 Hari</p></h6>
</div>
<div className="col-lg-2 col-md-6">
<h6>Pengunjung </h6>
<h6><p>1 Orang</p></h6>
</div>
</div>
</div>
</div><br />
</div>
</div>

<div className="col-lg-12 col-md-6" style={{ marginTop: "50px" }}>
<div className="billing-details">
<h3 className="title">Informasi Pemesan</h3>

<div className="row">
<div className="col-lg-7 col-md-4">
<div className="row">
<div className="col-lg-12 col-md-4">
<h6>Nama Pemesan : Yusmardianto</h6>
</div>
<div className="col-lg-12 col-md-4">
<h6>Nomer HP Pemesan : 087797315685 </h6>
</div>
<div className="col-lg-12 col-md-4">
<h6>Alamat Email Pemesan : yusmardianto@thamrin.co.id</h6>
</div>
</div>
</div>
<div className="col-lg-5 col-md-4">
<div className="row">
<div className="col-lg-12 col-md-4">
<h6>Pesan Khusus : Yusmardianto</h6>
</div>
<div className="col-lg-7 col-md-4">
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="col-lg-12 col-md-6" style={{ marginTop: "50px" }}>
<div className="order-details">
<h3 className="title">Total Pesanan</h3>

<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">
<a href="#">Double Room</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.180.000</span>
</td>
</tr>
<tr>
<td className="product-name">
<a href="#">Extra Bed</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.50.000</span>
</td>
</tr>
<tr>
<td className="product-name">
<a href="#">Pajak 10%</a>
</td>

<td className="product-total">
<span className="subtotal-amount">Rp.23.000</span>
</td>
</tr>
</tbody>
</table>
</div>

<a href="#" className="btn btn-primary order-btn">Bayar Pesanan</a>
</div>
</div>

</div>
</form>
</div>
</div>
<ReviewContent />

<Footer />
</>


+ 120
- 0
yarn.lock 查看文件

@@ -2,6 +2,24 @@
# yarn lockfile v1


"@apollo/client@^3.3.11":
version "3.5.5"
resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.5.tgz#ce331403ee5f099e595430890f9b510c8435c932"
integrity sha512-EiQstc8VjeqosS2h21bwY9fhL3MCRRmACtRrRh2KYpp9vkDyx5pUfMnN3swgiBVYw1twdXg9jHmyZa1gZlvlog==
dependencies:
"@graphql-typed-document-node/core" "^3.0.0"
"@wry/context" "^0.6.0"
"@wry/equality" "^0.5.0"
"@wry/trie" "^0.3.0"
graphql-tag "^2.12.3"
hoist-non-react-statics "^3.3.2"
optimism "^0.16.1"
prop-types "^15.7.2"
symbol-observable "^4.0.0"
ts-invariant "^0.9.0"
tslib "^2.3.0"
zen-observable-ts "^1.2.0"

"@babel/code-frame@7.12.11":
version "7.12.11"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -243,6 +261,11 @@
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

"@graphql-typed-document-node/core@^3.0.0":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==

"@hapi/accept@5.0.2":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523"
@@ -452,6 +475,27 @@
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==

"@wry/context@^0.6.0":
version "0.6.1"
resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.6.1.tgz#c3c29c0ad622adb00f6a53303c4f965ee06ebeb2"
integrity sha512-LOmVnY1iTU2D8tv4Xf6MVMZZ+juIJ87Kt/plMijjN20NMAXGmH4u8bS1t0uT74cZ5gwpocYueV58YwyI8y+GKw==
dependencies:
tslib "^2.3.0"

"@wry/equality@^0.5.0":
version "0.5.2"
resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.2.tgz#72c8a7a7d884dff30b612f4f8464eba26c080e73"
integrity sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==
dependencies:
tslib "^2.3.0"

"@wry/trie@^0.3.0":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.1.tgz#2279b790f15032f8bcea7fc944d27988e5b3b139"
integrity sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==
dependencies:
tslib "^2.3.0"

abab@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -1136,6 +1180,13 @@ create-react-class@^15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.1"

cross-fetch@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
dependencies:
node-fetch "2.6.1"

crypto-browserify@3.12.0, crypto-browserify@^3.11.0:
version "3.12.0"
resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -1746,6 +1797,18 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6:
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==

graphql-tag@^2.12.3:
version "2.12.6"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
dependencies:
tslib "^2.1.0"

graphql@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.0.1.tgz#93a13cd4e0e38ca8d0832e79614c8578bfd34f10"
integrity sha512-oPvCuu6dlLdiz8gZupJ47o1clgb72r1u8NDBcQYjcV6G/iEdmE11B1bBlkhXRvV0LisP/SXRFP7tT6AgaTjpzg==

har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -2583,6 +2646,14 @@ object.assign@^4.1.2:
has-symbols "^1.0.1"
object-keys "^1.1.1"

optimism@^0.16.1:
version "0.16.1"
resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.1.tgz#7c8efc1f3179f18307b887e18c15c5b7133f6e7d"
integrity sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==
dependencies:
"@wry/context" "^0.6.0"
"@wry/trie" "^0.3.0"

optionator@^0.8.1:
version "0.8.3"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -2776,6 +2847,11 @@ process@0.11.10, process@^0.11.10:
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=

promise-polyfill@^6.0.2:
version "6.1.0"
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.1.0.tgz#dfa96943ea9c121fca4de9b5868cb39d3472e057"
integrity sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=

prop-types@15.7.2, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -2915,6 +2991,13 @@ react-masonry-component@^6.2.1:
masonry-layout "^4.2.0"
prop-types "^15.5.8"

react-number-format@^4.8.0:
version "4.8.0"
resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.8.0.tgz#2ec5efbe7f45c4b1b8951d34774f30e4c69040a4"
integrity sha512-oGGiQpqzvKTR5PD2/AJbyUsci8jyupaoKxpuSPevjpWHMhFkUtmo390t+EIpJOgnuAHZogLu6PHiXgb/OXETKA==
dependencies:
prop-types "^15.7.2"

react-owl-carousel3@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-owl-carousel3/-/react-owl-carousel3-2.2.5.tgz#0083128cdb44758fdfb1a8b6054e2df2a66a3c9e"
@@ -3437,11 +3520,24 @@ sweetalert2@^10.15.5:
resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-10.16.9.tgz#8ed86f2fa811a136667a48357e204348705be8c9"
integrity sha512-oNe+md5tmmS3fGfVHa7gVPlun7Td2oANSacnZCeghnrr3OHBi6UPVPU+GFrymwaDqwQspACilLRmRnM7aTjNPA==

sweetalert@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/sweetalert/-/sweetalert-2.1.2.tgz#010baaa80d0dbdc86f96bfcaa96b490728594b79"
integrity sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==
dependencies:
es6-object-assign "^1.1.0"
promise-polyfill "^6.0.2"

symbol-observable@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

symbol-observable@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==

"symbol-tree@>= 3.1.0 < 4.0.0":
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -3511,11 +3607,23 @@ trim-right@^1.0.1:
resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=

ts-invariant@^0.9.0:
version "0.9.3"
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.9.3.tgz#4b41e0a80c2530a56ce4b8fd4e14183aaac0efa8"
integrity sha512-HinBlTbFslQI0OHP07JLsSXPibSegec6r9ai5xxq/qHYCsIQbzpymLpDhAUsnXcSrDEcd0L62L8vsOEdzM0qlA==
dependencies:
tslib "^2.1.0"

ts-pnp@^1.1.6:
version "1.2.0"
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==

tslib@^2.1.0, tslib@^2.3.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==

tty-browserify@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -3740,3 +3848,15 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

zen-observable-ts@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.3.tgz#c2f5ccebe812faf0cfcde547e6004f65b1a6d769"
integrity sha512-hc/TGiPkAWpByykMwDcem3SdUgA4We+0Qb36bItSuJC9xD0XVBZoFHYoadAomDSNf64CG8Ydj0Qb8Od8BUWz5g==
dependencies:
zen-observable "0.8.15"

zen-observable@0.8.15:
version "0.8.15"
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==

Write Preview
Loading…
取消
儲存