refactor: Feedback CustomerDetail
Lei OT
1 year ago
parent
c7f29f4999
commit
6ad342cb2e
@ -1,198 +1,207 @@
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS, runInAction } from "mobx";
|
||||
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from "antd";
|
||||
import { useStore } from "../../stores/StoreContext.js";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
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 useAuthStore from '@/stores/Auth';
|
||||
import { getFeedbackDetail, getCustomerFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
import * as config from "@/config";
|
||||
|
||||
function Detail() {
|
||||
const navigate = useNavigate();
|
||||
const { GRI_SN, RefNo, CII_SN } = useParams();
|
||||
const { feedbackStore, authStore } = useStore();
|
||||
const { feedbackReview, feedbackImages, feedbackInfo, feedbackServiceRate: feedbackRate } = feedbackStore;
|
||||
const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
|
||||
const { notification } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
console.info("Detail.useEffect: " + GRI_SN);
|
||||
feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
|
||||
feedbackStore.getCustomerFeedbackDetail(authStore.login.travelAgencyId, GRI_SN, CII_SN);
|
||||
feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
|
||||
feedbackStore.getFeedbackInfo(authStore.login.travelAgencyId, GRI_SN).then(v => {
|
||||
form.setFieldsValue({ info_content: v.EEF_Content });
|
||||
});
|
||||
}, [GRI_SN]);
|
||||
|
||||
const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : [];
|
||||
const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : [];
|
||||
const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : [];
|
||||
const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
|
||||
const signatureData = feedbackRate && feedbackRate.signatureData ? feedbackRate.signatureData : "";
|
||||
const PhotoPermission = feedbackRate?.PhotoPermission === 1;
|
||||
const cityName = feedbackRate.cityName;
|
||||
const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
|
||||
const fileList = toJS(feedbackImages);
|
||||
|
||||
const handleChange = info => {
|
||||
let newFileList = [...info.fileList];
|
||||
newFileList = newFileList.map(file => {
|
||||
if (file.response && file.response.result) {
|
||||
file.url = file.response.result.file_url;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
runInAction(() => {
|
||||
feedbackStore.feedbackImages = newFileList;
|
||||
});
|
||||
};
|
||||
|
||||
const handRemove = info => {
|
||||
return feedbackStore.removeFeedbackImages(info.url);
|
||||
};
|
||||
|
||||
const onFinish = values => {
|
||||
console.log("Success:", values);
|
||||
if (values) {
|
||||
feedbackStore.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}>
|
||||
<Button type="link" onClick={() => navigate("/feedback")}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card type="inner" title={<Title level={4}>Post Survey {RefNo} in {cityName}</Title>}>
|
||||
<Form labelCol={{ span: 5 }}>
|
||||
<Divider orientation="left">How satisfied were you with your tour guide?</Divider>
|
||||
{HWO_Guide.map(ele => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation="left">How about the Driver and Car/Van?</Divider>
|
||||
{HWO_Driver.map(ele => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation="left">General Experience with:</Divider>
|
||||
{HWO_Activity.map(ele => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className="ant-rate-text">{desc[ele.rate]}</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>
|
||||
<Divider orientation="left">Signature:</Divider>
|
||||
{signatureData ? <img id="signature-img" alt="customer signature" title="customer signature" src={signatureData} /> : null}
|
||||
|
||||
</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=${authStore.login.travelAgencyId}&token=${authStore.login.token}`}
|
||||
fileList={fileList}
|
||||
listType="picture-card"
|
||||
onChange={handleChange}
|
||||
onRemove={handRemove}>
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>Upload photos</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<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>
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
const { GRI_SN, RefNo, CII_SN } = useParams();
|
||||
const [travelAgencyId, token] = useAuthStore((state) => [state.loginUser.travelAgencyId, state.loginUser.token]);
|
||||
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({});
|
||||
|
||||
useEffect(() => {
|
||||
console.info('Detail.useEffect: ' + GRI_SN);
|
||||
getFeedbackDetail(travelAgencyId, GRI_SN).then((res) => {
|
||||
setFeedbackRate(res.feedbackRate);
|
||||
setFeedbackReview(res.feedbackReview);
|
||||
});
|
||||
getCustomerFeedbackDetail(travelAgencyId, GRI_SN, CII_SN).then((res) => setFeedbackRate(res));
|
||||
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 : [];
|
||||
const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : [];
|
||||
const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : [];
|
||||
const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : '';
|
||||
const signatureData = feedbackRate && feedbackRate.signatureData ? feedbackRate.signatureData : '';
|
||||
const PhotoPermission = feedbackRate?.PhotoPermission === 1;
|
||||
const cityName = feedbackRate?.cityName || '';
|
||||
const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : 'None';
|
||||
const fileList = feedbackImages;
|
||||
|
||||
const handleChange = (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}>
|
||||
<Button type='link' onClick={() => navigate('/feedback')}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card
|
||||
type='inner'
|
||||
title={
|
||||
<Title level={4}>
|
||||
Post Survey {RefNo} in {cityName}
|
||||
</Title>
|
||||
}>
|
||||
<Form labelCol={{ span: 5 }}>
|
||||
<Divider orientation='left'>How satisfied were you with your tour guide?</Divider>
|
||||
{HWO_Guide.map((ele) => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className='ant-rate-text'>{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation='left'>How about the Driver and Car/Van?</Divider>
|
||||
{HWO_Driver.map((ele) => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className='ant-rate-text'>{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation='left'>General Experience with:</Divider>
|
||||
{HWO_Activity.map((ele) => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className='ant-rate-text'>{desc[ele.rate]}</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>
|
||||
<Divider orientation='left'>Signature:</Divider>
|
||||
{signatureData ? <img id='signature-img' alt='customer signature' title='customer signature' src={signatureData} /> : null}
|
||||
</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=${token}`}
|
||||
fileList={fileList}
|
||||
listType='picture-card'
|
||||
onChange={handleChange}
|
||||
onRemove={handRemove}>
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>Upload photos</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<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 observer(Detail);
|
||||
export default Detail;
|
||||
|
||||
Loading…
Reference in New Issue