-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1154d0e
commit 9c9ecd7
Showing
5 changed files
with
305 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| import Box from "@mui/material/Box"; | ||
| import Modal from "@mui/material/Modal"; | ||
| import Butt from "./button"; | ||
| import Link from "next/link"; | ||
| import ModalExtend from "./modal_extend"; // Import your ModalExtend component | ||
|
|
||
| const style = { | ||
| position: "absolute" as "absolute", | ||
| top: "50%", | ||
| left: "50%", | ||
| transform: "translate(-50%, -50%)", | ||
| width: 400, | ||
| bgcolor: "background.paper", | ||
| borderRadius: "20px", | ||
| border: "2px solid #DC9D94", | ||
| boxShadow: 24, | ||
| p: 4, | ||
| }; | ||
|
|
||
| interface BasicModalProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| function ModalCreate({ isOpen, onClose }: BasicModalProps) { | ||
| const [showExtendModal, setShowExtendModal] = useState(false); | ||
|
|
||
| const handleOpen = () => { | ||
| setShowExtendModal(true); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setShowExtendModal(false); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Modal | ||
| open={isOpen} | ||
| onClose={onClose} | ||
| aria-labelledby="modal-modal-title" | ||
| aria-describedby="modal-modal-description" | ||
| > | ||
| <Box sx={style}> | ||
| <div className="text-textcolor text-xl font-bold"> | ||
| <h2>Create Account</h2> | ||
| </div> | ||
|
|
||
| <div className="container"> | ||
| <div className="flex justify-center items-center mt-5"> | ||
| <div className="text-textcolor text-base font-bold"> | ||
| <h2>Account Created Successfully!</h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center space-x-5 text-xs"> | ||
| <Link href="/sign_in"> | ||
| <Butt | ||
| title="Back to Sign In" | ||
| Bgcolor="#EBE0D0" | ||
| width="160px" | ||
| height="30px" | ||
| borderRadius="10px" | ||
| /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </Box> | ||
| </Modal> | ||
|
|
||
| {showExtendModal && ( | ||
| <ModalExtend | ||
| isOpen={true /* or use a state variable for this */} | ||
| onClose={handleClose} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default ModalCreate; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| "use client"; | ||
| import React, { useEffect, useState } from "react"; | ||
| import Box from "@mui/material/Box"; | ||
| import Modal from "@mui/material/Modal"; | ||
| import Butt from "./button"; | ||
| import DatePick from "./date_picker"; | ||
| import TimePick from "./time_picker"; | ||
| import { useRouter } from "next/navigation"; | ||
|
|
||
| const style = { | ||
| position: "absolute" as "absolute", | ||
| top: "50%", | ||
| left: "50%", | ||
| transform: "translate(-50%, -50%)", | ||
| width: 400, | ||
| bgcolor: "background.paper", | ||
| borderRadius: "20px", | ||
| border: "2px solid #DC9D94", | ||
| boxShadow: 24, | ||
| p: 4, | ||
| }; | ||
|
|
||
| interface BasicModalProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| function BasicModal({ isOpen, onClose }: BasicModalProps) { | ||
| const [open, setOpen] = React.useState(false); | ||
| const handleOpen = () => setOpen(true); | ||
| const handleClose = () => setOpen(false); | ||
| const router = useRouter(); | ||
|
|
||
| const [formData, setFormData] = useState<{ | ||
| Date: string | any; | ||
| StartTime: string | any; | ||
| EndTime: string | any; | ||
| }>({ | ||
| Date: "", | ||
| StartTime: "", | ||
| EndTime: "", | ||
| }); | ||
|
|
||
| const handleInputChange = (field: string, value: string) => { | ||
| setFormData({ | ||
| ...formData, | ||
| [field]: value, | ||
| }); | ||
| }; | ||
| const redirectUrl = "http://localhost:3000/qr_success_reservation"; //change this to a page after ng payment so magamit yung handleCreateAccount function. Dun pa dapat ma-ce-create yung reservation | ||
| const getName = "Gian"; //change get the name of user from session or local storage kung san man naka store | ||
| const tableFee = 140; //change den sa calculation | ||
|
|
||
| const handleCreateAccount = async () => { | ||
| try { | ||
| const apiData = { | ||
| chair_id: "", // Set a default value if not applicable | ||
| date: formData.Date, | ||
| starttime: formData.StartTime, | ||
| endtime: formData.EndTime, | ||
| }; | ||
| router.push( | ||
| `https://payment-gateway-weld.vercel.app/gcash/login?amountDue=${tableFee}&merchant=Brew and Brains&redirectUrl=${redirectUrl}` | ||
| ); | ||
|
|
||
| const response = await fetch( | ||
| "http://localhost:5000/api/create-reservation", | ||
| { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify(apiData), | ||
| } | ||
| ); | ||
|
|
||
| if (response.ok) { | ||
| // Successfully created account | ||
| console.log("Reserved successfully!"); | ||
| // Optionally, you can redirect the user to a login page or another page | ||
| } else { | ||
| // Handle error cases | ||
| console.error("Error Reservation", await response.json()); | ||
| } | ||
| } catch (error) { | ||
| console.error("Error Reservation", error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Modal | ||
| open={isOpen} | ||
| onClose={onClose} | ||
| aria-labelledby="modal-modal-title" | ||
| aria-describedby="modal-modal-description" | ||
| > | ||
| <Box sx={style}> | ||
| <div className="text-textcolor text-xl font-bold"> | ||
| <h2>Ben Eric Trial</h2> | ||
| </div> | ||
|
|
||
| <div className="container"> | ||
| <div className="flex justify-center items-center mt-3"> | ||
| <DatePick | ||
| text="Date:" | ||
| onInputChange={(value) => handleInputChange("date", value)} | ||
| ></DatePick> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center items-center mt-3"> | ||
| <TimePick | ||
| text="Start Time:" | ||
| onInputChange={(value) => handleInputChange("starttime", value)} | ||
| ></TimePick> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center items-center mt-3"> | ||
| <TimePick | ||
| text="End Time:" | ||
| onInputChange={(value) => handleInputChange("endtime", value)} | ||
| ></TimePick> | ||
| </div> | ||
| </div> | ||
|
|
||
| <Butt | ||
| onClick={handleCreateAccount} | ||
| title="Reserve" | ||
| Bgcolor="#EBE0D0" | ||
| width="325px" | ||
| height="34px" | ||
| /> | ||
| </Box> | ||
| </Modal> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default BasicModal; |
Oops, something went wrong.