From 3980ec47ee9119574a4c9209cd861bd1b4c18394 Mon Sep 17 00:00:00 2001 From: yusmardianto Date: Thu, 2 Dec 2021 11:03:52 +0700 Subject: [PATCH] checkout --- .env-sample | 6 + api/Booking/booking.js | 24 +++ api/Kamar/kamar.js | 61 ++++++ components/Booking/checkout.js | 372 +++++++++++++++++++++++++++++++++++++ components/Booking/review.js | 154 +++++++++++++++ components/Home/MainBanner.js | 48 +++-- package.json | 5 + pages/api/Booking/CreateBooking.js | 7 + pages/checkout.js | 229 +++-------------------- pages/index.js | 37 +++- pages/review.js | 147 +-------------- yarn.lock | 120 ++++++++++++ 12 files changed, 834 insertions(+), 376 deletions(-) create mode 100644 .env-sample create mode 100644 api/Booking/booking.js create mode 100644 api/Kamar/kamar.js create mode 100644 components/Booking/checkout.js create mode 100644 components/Booking/review.js create mode 100644 pages/api/Booking/CreateBooking.js diff --git a/.env-sample b/.env-sample new file mode 100644 index 0000000..f861480 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/api/Booking/booking.js b/api/Booking/booking.js new file mode 100644 index 0000000..c159a25 --- /dev/null +++ b/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, +}; \ No newline at end of file diff --git a/api/Kamar/kamar.js b/api/Kamar/kamar.js new file mode 100644 index 0000000..2a44ea4 --- /dev/null +++ b/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, +}; diff --git a/components/Booking/checkout.js b/components/Booking/checkout.js new file mode 100644 index 0000000..57487ad --- /dev/null +++ b/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 ( +
+
+ +
+
+

Catania {data.namaKamar}

+
+
+

Fasilitas :

+
+
+

Free Wifi

+
+
+

Telepon

+
+
+
+
+ ) + }) + + const CheckoutHarga = checkoutItem.map((data) => { + return ( +
+ + + + + + + + + + + + + + + + + + + + +
Jenis KamarTotal
+ Catania {data.namaKamar} + + +
+ Pajak 10% + + +
+
+ ) + }) + return ( + <> +
+
+
+
+
+

Important Notice


+

+ As COVID-19 situation evolves, make sure the cancellation policy suits your needs.
+ 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. +

+
+
+
+ +
{ + 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; + }} + > +
+
+
+

Masukan Informasi Pemesan

+ +
+
+
+ + { + setFormValue({ + ...formValue, + namaPemesan: e.target.value.toString(), + }) + }} + /> +
+
+ +
+
+ + { + setFormValue({ + ...formValue, + emailPemesan: e.target.value.toString(), + }) + }} + /> +
+
+ +
+
+ + +
+
+ +
+
+ + { + setFormValue({ + ...formValue, + teleponPemesan: e.target.value.toString(), + }) + }} + /> +
+
+ +
+
+ + +
+ +
+
+
+
+
+
+ +
+
+ {CheckoutKamar} +
+
+
+
+ + { + setFormValue({ + ...formValue, + checkIn: e.target.value, + }) + }} + /> +
+
+ +
+
+ + { + setFormValue({ + ...formValue, + checkOut: e.target.value, + }) + }} + /> +
+
+ +
+
+ + +
+ +
+
+
+
+
+
+ +
+
+

Permintaan Khusus Untuk Kamar

+
+ {checkoutItem[0]["fasilitas_kamars"].map((option) => ( +
+
+ { + setFormValue({ + ...formValue, + requestKamar: e.target.value.toString(), + }) + }} + /> + +
+
+ ))} +
+
+ +
+
+
+
+
+ +
+
+

Total Pesanan

+ + {CheckoutHarga} + + +
+
+ +
+
+
+
+ + ) +} + +export default Checkout; \ No newline at end of file diff --git a/components/Booking/review.js b/components/Booking/review.js new file mode 100644 index 0000000..f67bd1e --- /dev/null +++ b/components/Booking/review.js @@ -0,0 +1,154 @@ +import React, { useState } from 'react'; +import * as Icon from 'react-feather'; + +const Checkout = () => { + return ( + <> +
+
+
+
+
+

Mohon Periksa Ulang Pesanan Anda


+
+
+
+ +
+
+
+
+
+
+ +
+
+

Catania Double Room

+
+
+

Fasilitas :

+
+
+
+
+

Free Wifi

+
+
+

Telepon

+
+


+
+
+
Check In
+

25 Nov 2021

+

From 14:00

+
+
+
Check Out
+

25 Nov 2021

+

Before 14:00

+
+
+
Durasi Hari
+

1 Hari

+
+
+
Pengunjung
+

1 Orang

+
+
+
+

+
+
+ +
+
+

Informasi Pemesan

+ +
+
+
+
+
Nama Pemesan : Yusmardianto
+
+
+
Nomer HP Pemesan : 087797315685
+
+
+
Alamat Email Pemesan : yusmardianto@thamrin.co.id
+
+
+
+
+
+
+
Pesan Khusus : Yusmardianto
+
+
+
+
+
+
+
+
+
+ +
+
+

Total Pesanan

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Jenis KamarTotal
+ Double Room + + Rp.180.000 +
+ Extra Bed + + Rp.50.000 +
+ Pajak 10% + + Rp.23.000 +
+
+ + Bayar Pesanan +
+
+ +
+
+
+
+ + ) +} + +export default Checkout; \ No newline at end of file diff --git a/components/Home/MainBanner.js b/components/Home/MainBanner.js index 3984c1d..6eb0067 100644 --- a/components/Home/MainBanner.js +++ b/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 ( +
+
+ image + +
+

+ + {data.namaKamar}
 + +

+ + + + Booking Now + + +
+
+
+ ) + }) + return (
@@ -20,25 +46,7 @@ const MainBanner = () => {
-
-
- image - -
-

- - Double Room
Rp.180.000 - -

- - - - Booking Now - - -
-
-
+ {kamarContent} diff --git a/package.json b/package.json index 74f8c62..13ebb78 100644 --- a/package.json +++ b/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" }, diff --git a/pages/api/Booking/CreateBooking.js b/pages/api/Booking/CreateBooking.js new file mode 100644 index 0000000..5f1e82c --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/pages/checkout.js b/pages/checkout.js index 73f0314..6f101eb 100644 --- a/pages/checkout.js +++ b/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 ( <>

-
-
-
-
-
-

Important Notice


-

- As COVID-19 situation evolves, make sure the cancellation policy suits your needs.
- 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. -

-
-
-
- -
-
-
-
-

Masukan Informasi Pemesan

- -
-
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
- -
-
-
-
-
-
- -
-
-
-
- -
-
-

Catania Double Room

-
-
-

Fasilitas :

-
-
-

Free Wifi

-
-
-

Telepon

-
-
-
-

-
-
-
- - -
-
- -
-
- - -
-
- -
-
- - -
- -
-
-
-
-
-
- -
-
-

Permintaan Khusus Untuk Kamar

- -
-
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- -
-
-
-
-
- -
-
-

Total Pesanan

- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
Jenis KamarTotal
- Double Room - - Rp.180.000 -
- Extra Bed - - Rp.50.000 -
- Pajak 10% - - Rp.23.000 -
-
- - Book -
-
- -
-
-
-
+