|
|
|
|
@ -6,42 +6,10 @@ import { Row, Col, Space, Table, Typography, List, Watermark } from "antd";
|
|
|
|
|
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
|
|
|
|
|
import { useStore } from "../../stores/StoreContext.js";
|
|
|
|
|
|
|
|
|
|
const { Title } = Typography;
|
|
|
|
|
|
|
|
|
|
const itineraryListColumns = [
|
|
|
|
|
{
|
|
|
|
|
title: "Day",
|
|
|
|
|
dataIndex: "day",
|
|
|
|
|
key: "day",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Place & Transport",
|
|
|
|
|
dataIndex: "placeTransport",
|
|
|
|
|
key: "placeTransport",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Today’s Activities",
|
|
|
|
|
dataIndex: "todayActivities",
|
|
|
|
|
key: "todayActivities",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Accommodation",
|
|
|
|
|
dataIndex: "accommodation",
|
|
|
|
|
key: "accommodation",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Meals",
|
|
|
|
|
dataIndex: "meals",
|
|
|
|
|
key: "meals",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
function Print() {
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
const { reservationId } = useParams();
|
|
|
|
|
const { reservationStore } = useStore();
|
|
|
|
|
const { itineraryList, customerList } = reservationStore;
|
|
|
|
|
const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/SampleSpec.docx" }];
|
|
|
|
|
const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }];
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.info("Detail.useEffect: " + reservationId);
|
|
|
|
|
@ -49,88 +17,17 @@ function Print() {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Watermark content={["Global Highlights", "Discovery Your Way!"]}>
|
|
|
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
Stream
|
|
|
|
|
<DocViewer documents={docs} pluginRenderers={DocViewerRenderers} style={{ height: 800 }} />
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Booking Number: 220629-W220420009</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Customer Names (Full name as it appears on passport):</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<List
|
|
|
|
|
itemLayout="horizontal"
|
|
|
|
|
dataSource={toJS(customerList)}
|
|
|
|
|
renderItem={(item, index) => (
|
|
|
|
|
<List.Item>
|
|
|
|
|
<List.Item.Meta title={<span>{item.title}</span>} description={item.description} />
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Hotels and Room:</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Guide Language: English</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Notes:</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Itinerary Overview:</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Table pagination={false} dataSource={toJS(itineraryList)} columns={itineraryListColumns} />
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Detailed Tour Itinerary</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Packaged Price Includes:</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Packaged Price Excludes:</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={{ md: 24 }}>
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Title level={4}>Asia Highlights Contact:</Title>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Space>
|
|
|
|
|
<DocViewer
|
|
|
|
|
config={{
|
|
|
|
|
header: {
|
|
|
|
|
disableHeader: true,
|
|
|
|
|
disableFileName: false,
|
|
|
|
|
retainURLParams: false,
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
documents={docs}
|
|
|
|
|
pluginRenderers={DocViewerRenderers}
|
|
|
|
|
style={{ height: 750 }} />
|
|
|
|
|
</Watermark>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|