From e392c84374b6fa7977a5c4b10015e2f398d14081 Mon Sep 17 00:00:00 2001 From: John Doe Date: Tue, 12 Sep 2023 17:08:59 +0300 Subject: [PATCH] Add checkout page component Add new component CheckOutPagePageMain to render checkout page. Use Tab.Group and Tab.Panels to render payment options. Add Label and Input components to collect user input. Add ButtonPrimary component to submit form. --- src/app/checkout/PageMain.tsx | 263 ++++++++++++++++++++++++++++++++++ src/app/checkout/page.tsx | 8 ++ 2 files changed, 271 insertions(+) create mode 100644 src/app/checkout/PageMain.tsx create mode 100644 src/app/checkout/page.tsx diff --git a/src/app/checkout/PageMain.tsx b/src/app/checkout/PageMain.tsx new file mode 100644 index 0000000..e8f2bea --- /dev/null +++ b/src/app/checkout/PageMain.tsx @@ -0,0 +1,263 @@ +"use client"; + +import { Tab } from "@headlessui/react"; +import { PencilSquareIcon } from "@heroicons/react/24/outline"; +import React, { FC, Fragment, useState } from "react"; +import visaPng from "@/images/vis.png"; +import mastercardPng from "@/images/mastercard.svg"; +import Input from "@/shared/Input"; +import Label from "@/components/Label"; +import Textarea from "@/shared/Textarea"; +import ButtonPrimary from "@/shared/ButtonPrimary"; +import StartRating from "@/components/StartRating"; +import NcModal from "@/shared/NcModal"; +import ModalSelectDate from "@/components/ModalSelectDate"; +import converSelectedDateToString from "@/utils/converSelectedDateToString"; +import ModalSelectGuests from "@/components/ModalSelectGuests"; +import Image from "next/image"; +import { GuestsObject } from "../(client-components)/type"; + +export interface CheckOutPagePageMainProps { + className?: string; +} + +const CheckOutPagePageMain: FC = ({ + className = "", +}) => { + const [startDate, setStartDate] = useState( + new Date("2023/02/06") + ); + const [endDate, setEndDate] = useState(new Date("2023/02/23")); + + const [guests, setGuests] = useState({ + guestAdults: 2, + guestChildren: 1, + guestInfants: 1, + }); + + const renderSidebar = () => { + return ( +
+
+
+
+ +
+
+
+
+ + Hotel room in Tokyo, Jappan + + + The Lounge & Bar + +
+ + 2 beds ยท 2 baths + +
+ +
+
+
+

Price detail

+
+ $19 x 3 day + $57 +
+
+ Service charge + $0 +
+ +
+
+ Total + $57 +
+
+
+ ); + }; + + const renderMain = () => { + return ( +
+

+ Confirm and payment +

+
+
+
+

Your trip

+ ( + openModal()} + className="block lg:hidden underline mt-1 cursor-pointer" + > + View booking details + + )} + renderContent={renderSidebar} + modalTitle="Booking details" + /> +
+
+ ( + + )} + /> + + ( + + )} + /> +
+
+ +
+

Pay with

+
+ +
+ + + + {({ selected }) => ( + + )} + + + {({ selected }) => ( + + )} + + + + + +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ +