Untitled
unknown
plain_text
a year ago
9.1 kB
6
Indexable
import React from 'react'; import {Grid, Typography} from "@mui/material"; import {Colors} from "../../assets/css/ColorConstants"; import LogoImage from "../../assets/img/logo/logo.png"; import {Row} from "reactstrap"; import "./reviewBooking.css" const Receipt = ({data} :any) => { const isMobile = window.innerWidth < 576; return ( <div className="hotel-voucher"> <div className="voucher-content"> <div className="voucher-section"> {data.id !== undefined && data.id !== null && data.id !== '' ?<p><strong>Travelom Booking ID:</strong> {data?.id}</p>:null} <p><strong>Booking Date:</strong> {data.date}</p> <p><strong>Primary Guest:</strong> {data.fullName}</p> {data.confirmationNumber !== undefined && data.confirmationNumber !== null && data.confirmationNumber !== '' ?<p><strong>Confirmation Number:</strong> {data?.confirmationNumber}</p>:null} </div> <div className="voucher-section"> <div style={{display: 'flex', justifyContent: 'space-evenly'}}> <Typography fontSize={35} style={{ display: "flex", alignItems: "center", color: Colors.button.primary, width: "15%", cursor: 'pointer' }} > <img className="navigationBarHotelIcon" src={LogoImage} /> <span>Travelom</span> </Typography> </div> </div> <div className="voucher-section"> <h5>Hotel Details</h5> <p>{data.hotelName}</p> {/*<p>{data.hotelAddress}</p>*/} {/*<p>{data.hotelPhone}</p>*/} </div> {!isMobile ? ( <table className="voucher-table"> <thead> <tr> <th>Room</th> <th>Check In</th> <th>Check Out</th> <th>Travelers</th> <th>Daily Rate</th> <th>Extra Charges</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>{data.items[0].room}</td> <td>{data.checkInDate}</td> <td>{data.checkOutDate}</td> <td>{data.items[0].totalMember}</td> <td>{data.items[0].price}</td> <td>{data.items[0].tax}</td> <td>{data.items[0].priceInclusive}</td> </tr> </tbody> </table> ) :<Grid container spacing={2}> {/* First Column */} <Grid item xs={12} sm={6}> <table className="voucher-table"> <tbody> <tr> <td>Room:</td> <td>{data.items[0].room}</td> </tr> <tr> <td>Check In:</td> <td>{data.checkInDate}</td> </tr> <tr> <td>Check Out:</td> <td>{data.checkOutDate}</td> </tr> </tbody> </table> </Grid> {/* Second Column */} <Grid item xs={12} sm={6}> <table className="voucher-table"> <tbody> <tr> <td>Travelers:</td> <td>{data.items[0].totalMember}</td> </tr> <tr> <td>Daily Rate:</td> <td>{data.items[0].price}</td> </tr> <tr> <td>Extra Charges:</td> <td>{data.items[0].tax}</td> </tr> </tbody> </table> </Grid> {/* Total */} <Grid item xs={12}> <table className="voucher-table"> <tbody> <tr> <td>Total:</td> <td>{data.items[0].priceInclusive}</td> </tr> </tbody> </table> </Grid> </Grid> } <Row style={{width: '100%', display: 'flex', justifyContent: 'space-between', padding: 20}}> <div> <h5>Payment Details</h5> <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}> <p style={{color: 'black'}}> {"Total amount: "} </p> <p>{data.items[0].price}</p> </div> <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}> <p style={{color: 'black'}}> {"Taxes and Fees: "} </p> <p>{data.items[0].tax}</p> </div> <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}> <p style={{color: 'black'}}> {"Grand Total Amount: "} </p> <p>{data.items[0].priceInclusive}</p> </div> {/*<p>Total amount: {data.items[0].price} </p>*/} {/*<p>Taxes and fees: {data.items[0].tax}</p>*/} {/*<p>Grand Total amount: {data.items[0].priceInclusive}</p>*/} </div> <div style={{textAlign: 'end'}}> <h5>Traveler Information</h5> <div style={{ justifyContent: 'space-between', display: 'flex', flexDirection: 'row', padding: 0 }}> <p style={{color: 'black'}}> {"Name: "} </p> <p>{data.fullName}</p> </div> <div style={{ justifyContent: 'space-between', display: 'flex', flexDirection: 'row', padding: 0 }}> <p style={{color: 'black'}}> {"Address: "} </p> <p>{data.address}</p> </div> <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}> <p style={{color: 'black'}}> {"Zip Code: "} </p> <p>{data.zipCode}</p> </div> <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}> <p style={{color: 'black'}}> {"City: "} </p> <p>{data.city}</p> </div> <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}> <p style={{color: 'black'}}> {"Country: "} </p> <p>{data.country}</p> </div> </div> </Row> </div> </div> ); }; export default Receipt;
Editor is loading...
Leave a Comment