GHHub/src/views/feedback/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import * as config from "@/config";
import { getFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
import BackBtn from "@/components/BackBtn";
import { usingStorage } from "@/hooks/usingStorage";
import {ImageUploader} from '@/components/ImageUploader';
const { Title, Text, Paragraph } = Typography;

function Detail() {
	const navigate = useNavigate();
	const { GRI_SN,RefNo } = useParams();
  const {travelAgencyId, loginToken} = usingStorage();
	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
	const { notification } = App.useApp();
	const [form] = Form.useForm();

  const [feedbackRate, setFeedbackRate] = useState({});
  const [feedbackReview, setFeedbackReview] = useState({});
  const [feedbackImages, setFeedbackImages] = useState([]);
  const [feedbackInfo, setFeedbackInfo] = useState({});
  const [ossKey, setOssKey] = useState('');
  useEffect(() => {
        const key = `temp/tour-guide/2025-6/31278`;
        setOssKey(key);
    }, []);

	useEffect(() => {
		// console.info("Detail.useEffect: " + GRI_SN);
    getFeedbackDetail(travelAgencyId, GRI_SN).then((res) => {
      setFeedbackRate(res.feedbackRate);
      setFeedbackReview(res.feedbackReview);
    });
    getFeedbackImages(travelAgencyId, GRI_SN).then((res) => setFeedbackImages(res));
    getFeedbackInfo(travelAgencyId, GRI_SN).then((v) => {
      form.setFieldsValue({ info_content: v.EEF_Content });
      setFeedbackInfo(v);
    });

	}, [GRI_SN]);

	const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : 0;
	const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : 0;
	const HWO_Car = feedbackRate && feedbackRate.HWO_Car ? feedbackRate.HWO_Car : 0;
	const HWO_Hotel = feedbackRate && feedbackRate.HWO_Hotel ? feedbackRate.HWO_Hotel : 0;
	const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : 0;
	const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
	const PhotoPermission = feedbackRate && feedbackRate.PhotoPermission && feedbackRate.PhotoPermission == "YES" ? true : false;
	const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
	const fileList = (feedbackImages);

	const handleChange = info => {
		// console.log(info);
		let newFileList = [...info.fileList];
		newFileList = newFileList.map(file => {
			if (file.response && file.response.result) {
				file.url = file.response.result.file_url;
			}
			return file;
		});
    setFeedbackImages(newFileList);
	};

	const handRemove = info => {
		return removeFeedbackImages(info.url);
	};

	const onFinish = values => {
		// console.log("Success:", values);
		if (values) {
			postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
				notification.success({
					message: `Notification`,
					description: "Submit Successful",
					placement: "top",
					duration: 4,
				});
			});
		}
	};

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Row gutter={16}>
				<Col span={20}>

				</Col>
				<Col span={4}>
          <BackBtn />
				</Col>
			</Row>
			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
				<Card  type="inner" title={<Title level={4}>Post Survey {RefNo}</Title>}>
					<Form labelCol={{ span: 5 }}>
						<Divider orientation="left">How satisfied were you with your general experience?</Divider>
						<Form.Item label="Tour Guide Service">
							<Space>
								<Rate disabled value={HWO_Guide} />
								<span className="ant-rate-text">{desc[HWO_Guide]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Driver's Attitude">
							<Space>
								<Rate disabled value={HWO_Driver} />
								<span className="ant-rate-text">{desc[HWO_Driver]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Comfort of the Car/Van">
							<Space>
								<Rate disabled value={HWO_Car} />
								<span className="ant-rate-text">{desc[HWO_Car]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Hotel">
							<Space>
								<Rate disabled value={HWO_Hotel} />
								<span className="ant-rate-text">{desc[HWO_Hotel]}</span>
							</Space>
						</Form.Item>
						<Form.Item label="Activities' Arrangements">
							<Space>
								<Rate disabled value={HWO_Activity} />
								<span className="ant-rate-text">{desc[HWO_Activity]}</span>
							</Space>
						</Form.Item>
						<Divider orientation="left">Would you like to give us permission to use the photos taken by the tour guide(s) during your trip which contain your portrait?</Divider>
						<Paragraph>
							{PhotoPermission ? (
								<>
									<Radio checked>Yes</Radio>
									<Radio disabled={true}>No</Radio>
								</>
							) : (
								<>
									<Radio disabled={true}>Yes</Radio>
									<Radio checked>No</Radio>
								</>
							)}
						</Paragraph>
						<Divider orientation="left">Other thoughts you want to share with us:</Divider>
						<Text>{OtherThoughts}</Text>
					</Form></Card>
				</Col>
				<Col span={4}></Col>
			</Row>


			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
				<Card type="inner" title={<Title level={4}>External Reviews</Title>}>
					<Text>{ECI_Content}</Text>
					</Card>
				</Col>
				<Col span={4}></Col>
			</Row>

			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
					<Card  type="inner" title={<Title level={4}>Feedback from local agent</Title>}>
						<Form name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
							<Form.Item>
								<Upload
									name="ghhfile"
									// accept="image/*"
									multiple={true}
									action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${travelAgencyId}&token=${loginToken}`}
									fileList={fileList}
									listType="picture-card"
									onChange={handleChange}
									onRemove={handRemove}>
								</Upload>
							</Form.Item>
							<ImageUploader osskey={ossKey} />
							<Form.Item
								name="info_content"
								rules={[
									{
										required: true,
										message: "Please input your messages!",
									},
								]}>
								<Input.TextArea rows={6} placeholder="Any feedback for this group you would like to send to Asia Highlights"></Input.TextArea>
							</Form.Item>
							<Form.Item>
								<Button type="primary" htmlType="submit">
									Submit
								</Button>
							</Form.Item>
						</Form>
					</Card>
				</Col>
				<Col span={4}></Col>
			</Row>
		</Space>
	);
}

export default (Detail);