GHHub/src/views/reservation/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, Modal, App } from 'antd';
import { useStore } from '@/stores/StoreContext.js';

const { Title } = Typography;
const { TextArea } = Input;

function Detail() {

  const itineraryListColumns = [
    {
      title: 'Day',
      dataIndex: 'day',
    },
    {
      title: 'Place & Transport',
      dataIndex: 'placeTransport',
    },
    {
      title: 'Today’s Activities',
      dataIndex: 'todayActivities',
    },
    {
      title: 'Accommodation',
      dataIndex: 'accommodation',
    },
    {
      title: 'Meals',
      dataIndex: 'meals',
    },
  ];

  const confirmationListColumns = [
    {
      title: 'PCI_Changetext',
      dataIndex: 'PCI_Changetext',
    },
    {
      title: 'PCI_SendDate',
      dataIndex: 'PCI_SendDate',
    },
    {
      title: 'ConfirmPerson',
      dataIndex: 'ConfirmPerson',
    },
    {
      title: 'PCI_ConfirmText',
      dataIndex: 'PCI_ConfirmText',
    },
    {
      title: 'PCI_ConfirmDate',
      dataIndex: 'PCI_ConfirmDate',
    },
    {
      title: 'Action',
      render: confirmRender
    },
  ];
    
  function confirmRender(text, confirm) {
    return (
      <Button type="link" onClick={() => showConfirmModal(confirm)}>Confirm</Button>
    );
  }

  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [confirmText, setConfirmText] = useState('');
  const { notification } = App.useApp();
  const { reservationId } = useParams();
  const { reservationStore } = useStore();
  const [dataLoading, setDataLoading] = useState(false);
  const { itineraryList, customerNames, reservationDetail } = reservationStore;
  const confirmationList = reservationStore.confirmationList;

  const showConfirmModal = (confirm) => { 
    setIsModalOpen(true);
    setConfirmText(confirm.PCI_ConfirmText);
    reservationStore.editConfirmation(confirm);
    console.info(confirm);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    reservationStore.submitConfirmation(confirmText)
      .finally(() => {
        setIsModalOpen(false);
        setConfirmLoading(false);
      });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    setDataLoading(true);
    reservationStore.fetchReservation(reservationId)
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      })
      .finally(() => {
        setDataLoading(false);
      });
  }, [reservationId]);

  return (
    <>
    <Modal
        centered
        confirmLoading={confirmLoading}
        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
      >
        <Title level={4}>Confirm</Title>
        <TextArea
          value={confirmText}
          onChange={(e) => setConfirmText(e.target.value)}
          autoSize={{
            minRows: 3,
            maxRows: 5,
          }}
        />
      </Modal>
    <Space direction="vertical" style={{ width: '100%' }}>
    <Row gutter={{ md: 24 }}>
        <Col span={20}>
      <Title level={4}>Reference Number: {reservationDetail.referenceNumber}; Arrival date: {reservationDetail.arrivalDate}; Tour guide: {reservationDetail.tourGuide}</Title>
        </Col>
        <Col span={4}>
      <Button type="link" onClick={() => navigate('/reservation/newest')}>Back</Button>
        </Col>
      </Row>
      <Row>
        <Col span={2}>
      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Booking information</Button>
        </Col>
        <Col span={2}>
      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/name-card`)}>Name Card</Button>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
      <Title level={5}>Itinerary Overview</Title>
        <Table 
        bordered
        loading={dataLoading}
          pagination={false}
          dataSource={toJS(itineraryList)} columns={itineraryListColumns} 
        />
        </Space>
        </Col>
      </Row>
      <Row>
        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
          <Title level={5}>Customer Names (Full name as it appears on passport)</Title>          
          <TextArea rows={4} value={customerNames} readOnly maxLength={6} />
          </Space>
        </Col>
      </Row>
      <Row>
        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
          <Title level={5}>Confirmation</Title>
          <Table 
            bordered
            loading={dataLoading}
            pagination={false}
            dataSource={confirmationList} columns={confirmationListColumns} 
          />
          </Space>      
        </Col>
      </Row>
    </Space>
    </>
  );
}

export default observer(Detail);