feat: add import billing records

src/components/alert/index.tsx

@@ -0,0 +1,18 @@
+import {IconAlertCircle} from "@douyinfe/semi-icons";
+import React from "react";
+
+import './style.less'
+
+type AlertProps = {
+	message: React.ReactNode;
+}
+
+function Alert(props: AlertProps) {
+	if(!props.message) return null;
+	return <div className={'alert-container'}>
+		<IconAlertCircle/>
+		<span className={'alert-text'}>{props.message}</span>
+	</div>
+}
+
+export default Alert

src/components/alert/style.less

@@ -0,0 +1,8 @@
+.alert-container{
+  display: flex;
+  align-items: center;
+  color:red;
+  .alert-text{
+    margin-left: 5px;
+  }
+}

src/components/bill/search-form.tsx

@@ -5,6 +5,7 @@ import {useTranslation} from "react-i18next";
 import {Card} from "@/components/card";
 import {BillQueryParams} from "@/service/api/bill.ts";
 import {useBillTypes} from "@/hooks/useBillTypes.ts";
+import {usePaymentChannels} from "@/hooks/usePaymentChannels.ts";
 
 type SearchFormProps = {
     onSearch?: (params: BillQueryParams) => void;
@@ -29,6 +30,7 @@ type SearchFormFields = {
 }
 const SearchForm: React.FC<SearchFormProps> = (props) => {
     const BillTypes = useBillTypes()
+    const { paymentChannelList } = usePaymentChannels()
     const formSubmit = (value: SearchFormFields) => {
         const params: BillQueryParams = {}
 
@@ -146,12 +148,11 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
                         </Form.Select>
                     </Col>
                     <Col xxl={4} xl={6} md={8}>
-                        <Form.Select showClear field="payment_channel" label={t('bill.title_pay_channel')}
+                        <Form.Select
-                                     placeholder={t('base.please_select')} style={{width: '100%'}}>
+                            showClear field="payment_channel" label={t('bill.title_pay_channel')}
-                            <Form.Select.Option value="FLYWIRE">FLYWIRE</Form.Select.Option>
+                                     placeholder={t('base.please_select')} style={{width: '100%'}}
-                            <Form.Select.Option value="CBP">CBP</Form.Select.Option>
+                            optionList={paymentChannelList}
-                            <Form.Select.Option value="PPS">PPS</Form.Select.Option>
+                        />
-                        </Form.Select>
                     </Col>
                     <Col xxl={4} xl={6} md={8}>
                         <Form.Select showClear field="is_delivered" label={t('bill.delivered_status')}

src/i18n/translations/en.json

@@ -63,6 +63,10 @@
     "download-qr-code": "Download QR Code",
     "download_receipt": "Download receipt",
     "export_excel": "Export Transaction Excel",
+    "import": {
+      "error_require_file": "Please select the transaction record file to import",
+      "error_require_payment_channel": "Please select a payment channel"
+    },
     "import_bill": "Import Transaction Record",
     "import_excel": "Import Transaction Excel",
     "paid": "Paid",

src/i18n/translations/sc.json

@@ -63,6 +63,10 @@
     "download-qr-code": "下载二维码",
     "download_receipt": "下载收据",
     "export_excel": "导出交易记录",
+    "import": {
+      "error_require_file": "请选择要导入的交易记录文件",
+      "error_require_payment_channel": "请选择支付渠道"
+    },
     "import_bill": "导入交易记录",
     "import_excel": "导入交易记录",
     "paid": "已支付",

src/i18n/translations/tc.json

@@ -63,6 +63,10 @@
     "download-qr-code": "下載二維碼",
     "download_receipt": "下載收據",
     "export_excel": "導出交易记录",
+    "import": {
+      "error_require_file": "請選擇要匯入的交易記錄文件",
+      "error_require_payment_channel": "請選擇支付管道"
+    },
     "import_bill": "導入交易記錄",
     "import_excel": "導入交易记录",
     "paid": "已支付",

src/pages/bill/components/import_bill_modal.tsx

@@ -7,6 +7,8 @@ import {IconUpload} from "@douyinfe/semi-icons";
 import readXlsxFile from "read-excel-file";
 import dayjs from "dayjs";
 import {OnChangeProps} from "@douyinfe/semi-ui/lib/es/upload/interface";
+import Alert from "@/components/alert";
+import {uploadBillingRecordFile} from "@/service/api/bill.ts";
 
 type BillPaidModalProps = {
 	onConfirm: () => void
@@ -20,24 +22,37 @@ export const ImportBillModal: React.FC<BillPaidModalProps> = (props) => {
 
 	const [state, setState] = useSetState<{
 		loading?: boolean;
-		open?: boolean
+		open?: boolean;
+		errorMessage?:string;
+		currentFile?: File;
+		paymentChannel?: string;
 	}>({})
 
 	const [records, setImportRecords] = useState<string[][]>([])
 
-
 	const closeModal = () => {
 		setImportRecords([])
-		setState({open: false, loading: false})
+		setState({open: false, loading: false,errorMessage:undefined})
 	}
 	const onSubmit = () => {
+		if(!state.paymentChannel){
+			setState({errorMessage:'bill.import.error_require_payment_channel'})
+			return;
+		}
+		if(records.length == 0 || !state.currentFile){
+			setState({errorMessage:'bill.import.error_require_file'})
+			return;
+		}
 		setState({
-			loading: true
+			loading: true,
+			errorMessage:undefined
 		})
-		setTimeout(() => {
+		uploadBillingRecordFile(state.currentFile,state.paymentChannel).then(()=>{
 			closeModal()
 			props.onConfirm()
-		}, 1000)
+		}).catch(e => {
+			setState({errorMessage: e.message,loading: false})
+		})
 	}
 	const onFileChange = ({fileList, currentFile}: OnChangeProps) => {
 		if (fileList.length == 0) {
@@ -53,6 +68,7 @@ export const ImportBillModal: React.FC<BillPaidModalProps> = (props) => {
 					})
 				})
 				setImportRecords(records)
+				setState({currentFile:currentFile.fileInstance})
 			})
 		}
 	}
@@ -76,7 +92,11 @@ export const ImportBillModal: React.FC<BillPaidModalProps> = (props) => {
 						textAlign: 'right'
 					}}>{t('bill.title_pay_channel')}：
 					</div>
-					<Select style={{width: 160}} placeholder={t('base.please_select')} optionList={paymentChannelList}></Select>
+					<Select
+						style={{width: 160}} placeholder={t('base.please_select')}
+						optionList={paymentChannelList}
+						onChange={v=>setState({paymentChannel: String(v)})}
+					/>
 				</Space>
 				<Space>
 					<div style={{
@@ -110,7 +130,7 @@ export const ImportBillModal: React.FC<BillPaidModalProps> = (props) => {
 					</table>
 				</div>
 			</div>
-			{/*<p style={{marginTop: 10}}>{t('bill.paid_confirm')}</p>*/}
+			<Alert message={state.errorMessage?t(state.errorMessage):undefined} />
 			<div className={'text-right'} style={{margin: '50px 0 20px'}}>
 				<Space spacing={12}>
 					<Button onClick={closeModal} type={'tertiary'}>{t('base.cancel')}</Button>

src/service/api/bill.ts

@@ -1,150 +1,157 @@
-import {get, post, put} from "@/service/request.ts";
+import {get, post, put, uploadFile} from "@/service/request.ts";
 import dayjs from "dayjs";
 import {getAuthToken} from "@/hooks/useAuth.ts";
 import {stringify} from "qs";
 
 export type BillQueryResult = {
-    result: BillModel[];
+	result: BillModel[];
-    total_count: number;
+	total_count: number;
-    query_total_count: number;
+	query_total_count: number;
-    query_total_amount: number;
+	query_total_amount: number;
 }
 export type BillQueryParams = Partial<BillQueryParam>;
 const DEFAULT_PAGE_SIZE = 10;
 
 function formatBillQueryResult(params: BillQueryParams, result: BillQueryResult) {
-    // 将 BillQueryResult 转成成 RecordList
+	// 将 BillQueryResult 转成成 RecordList
-    const formatData: RecordList<BillModel> = {
+	const formatData: RecordList<BillModel> = {
-        list: result.result,
+		list: result.result,
-        pagination: {
+		pagination: {
-            total: result.query_total_count,
+			total: result.query_total_count,
-            pageSize: params.page_size || DEFAULT_PAGE_SIZE,
+			pageSize: params.page_size || DEFAULT_PAGE_SIZE,
-            current: params.page_number || 1,
+			current: params.page_number || 1,
-            recordTotal: Number(result.query_total_amount || 0)
+			recordTotal: Number(result.query_total_amount || 0)
-        }
+		}
-    }
+	}
-    return formatData
+	return formatData
 }
 
 export async function billList(params: BillQueryParams) {
-    const result = await get<BillQueryResult>('/bills', params)
+	const result = await get<BillQueryResult>('/bills', params)
-    return formatBillQueryResult(params, result);
+	return formatBillQueryResult(params, result);
 }
 
 export function exportBillList(params: BillQueryParams) {
-    const token = getAuthToken();
+	const token = getAuthToken();
-    const headers = new Headers({
+	const headers = new Headers({
-        'Token': token || ''
+		'Token': token || ''
-    });
+	});
 
-    return fetch(`${AppConfig.API_PREFIX || '/api'}/bills/export?${stringify(params)}`,{
+	return fetch(`${AppConfig.API_PREFIX || '/api'}/bills/export?${stringify(params)}`, {
-        headers,
+		headers,
-        method:'GET'
+		method: 'GET'
-    }).then(r=>r.blob())
+	}).then(r => r.blob())
-    // return get<Blob>('/bills/export', params,true)
+	// return get<Blob>('/bills/export', params,true)
 }
+
 //现场支付创建账单接口
 export function createManualBill(params: ManualCreateBillParam) {
-    return post<BillModel>('/manual_payment', params)
+	return post<BillModel>('/manual_payment', params)
 }
 
-export function selectBillTypeList(){
+export function selectBillTypeList() {
-    return get<BillType[]>('/billing_types')
+	return get<BillType[]>('/billing_types')
 }
 
 // 获取账单详情
 export function getBillDetail(id: number) {
-    return get<BillModel>('/bills/' + id)
+	return get<BillModel>('/bills/' + id)
 }
 
-export function addBillRecord(bill:CreateBillRecordModel) {
+export function addBillRecord(bill: CreateBillRecordModel) {
-    return post('/add_bill',bill);
+	return post('/add_bill', bill);
+}
+
+export function uploadBillingRecordFile(file: File, payment_channel: string, check_student = 'true') {
+	return uploadFile('/bill/import', file, {payment_channel, check_student})
 }
 
 export function getAsiaPayData(id: number) {
-    return get<AsiaPayModel>(`/bills/${id}/asiapay`)
+	return get<AsiaPayModel>(`/bills/${id}/asiapay`)
 }
 
 export function getFlywirePayUrl(id: number, return_cta: string, return_cta_name: string) {
-    return post<{ url: string }>(`/bills/${id}/flywire`, {return_cta, return_cta_name})
+	return post<{ url: string }>(`/bills/${id}/flywire`, {return_cta, return_cta_name})
 }
 
 // 作废订单
-export function modifyBillStatus(id: number,status: BillStatus) {
+export function modifyBillStatus(id: number, status: BillStatus) {
-    return put(`/bills/${id}/cancel`,{status})
+	return put(`/bills/${id}/cancel`, {status})
 }
 
-export function confirmBillType(bills:BillConfirmParams[]) {
+export function confirmBillType(bills: BillConfirmParams[]) {
-    return post<BillModel>(`/bills/confirm`, {bills})
+	return post<BillModel>(`/bills/confirm`, {bills})
 }
-export function cancelConfirmBill(bill_id:number) {
+
-    return post<BillModel>(`/bill/cancel_confirm`, {bill_id})
+export function cancelConfirmBill(bill_id: number) {
+	return post<BillModel>(`/bill/cancel_confirm`, {bill_id})
 }
 
 export function confirmBills(bill_ids: number[] | string[]) {
-    return post(`/bills/apply`, {bill_ids})
+	return post(`/bills/apply`, {bill_ids})
 }
 
 export function updateBillPaymentSuccess(bill_id: number, merchant_ref: string, payment_channel: string) {
-    return post<BillModel>(`/bills/finish`, {merchant_ref, payment_channel, bill_id})
+	return post<BillModel>(`/bills/finish`, {merchant_ref, payment_channel, bill_id})
 }
 
 
 export function createExternalBill(params: ExternalCreateParamsType) {
-    return post<BillModel>('/bill', params)
+	return post<BillModel>('/bill', params)
 }
 
 type BillUpdateFormParams = {
-    bill:BillModel;
+	bill: BillModel;
-    param:BillUpdateParams
+	param: BillUpdateParams
 }
-export async function finishAsiapay({param}: BillUpdateFormParams){
+
-    const paramUrl = `?prc=0&src=0&Ord=12345678&Ref=${param.merchant_ref}&PayRef=123456&successcode=0&Amt=10.00&Cur=344&Holder=Test Card&AuthId=123456&AlertCode=&remark=
+export async function finishAsiapay({param}: BillUpdateFormParams) {
+	const paramUrl = `?prc=0&src=0&Ord=12345678&Ref=${param.merchant_ref}&PayRef=123456&successcode=0&Amt=10.00&Cur=344&Holder=Test Card&AuthId=123456&AlertCode=&remark=
 &eci=07&payerAuth=U&sourceIp=192.1.1.1&ipCountry=HK&payMethod=VISA
 x&cardIssuingCountry=HK&channelType=SPC&`
-    const ret = await post<string>(`/flywire/feedback?${paramUrl}`, {},true)
+	const ret = await post<string>(`/flywire/feedback?${paramUrl}`, {}, true)
 
-    return ret?.toLowerCase() == 'ok'
+	return ret?.toLowerCase() == 'ok'
 }
 
-export async function finishFlywire({bill,param}: BillUpdateFormParams){
+export async function finishFlywire({bill, param}: BillUpdateFormParams) {
-    const eventData = {
+	const eventData = {
-        "event_type": "guaranteed",
+		"event_type": "guaranteed",
-        "event_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
+		"event_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
-        "event_resource": "payments",
+		"event_resource": "payments",
-        "data": {
+		"data": {
-            "remark": param.remark,
+			"remark": param.remark,
-            "payment_id": param.merchant_ref,
+			"payment_id": param.merchant_ref,
-            "amount_from": Number(param.actual_payment_amount) * 100,
+			"amount_from": Number(param.actual_payment_amount) * 100,
-            "currency_from": "HKD",
+			"currency_from": "HKD",
-            "amount_to": Number(param.payment_amount) * 100,
+			"amount_to": Number(param.payment_amount) * 100,
-            "currency_to": "HKD",
+			"currency_to": "HKD",
-            "status": "guaranteed",
+			"status": "guaranteed",
-            "expiration_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
+			"expiration_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
-            "external_reference": bill.id,
+			"external_reference": bill.id,
-            "country": "CN",
+			"country": "CN",
-            "payment_method": {
+			"payment_method": {
-                "type": param.payment_method
+				"type": param.payment_method
-            },
+			},
-            "fields": {
+			"fields": {
-                "student_email": bill.student_email,
+				"student_email": bill.student_email,
-                "student_last_name": bill.student_last_name || bill.student_english_name,
+				"student_last_name": bill.student_last_name || bill.student_english_name,
-                "student_id": bill.student_number,
+				"student_id": bill.student_number,
-                "resident_no": null,
+				"resident_no": null,
-                "contact_no": "",
+				"contact_no": "",
-                "payment_type_other": null,
+				"payment_type_other": null,
-                "payment_type": null
+				"payment_type": null
-            }
+			}
-        }
+		}
-    }
+	}
-    const ret = await post<string>('/flywire/feedback', eventData,true)
+	const ret = await post<string>('/flywire/feedback', eventData, true)
 
-    return ret?.toLowerCase() == 'ok'
+	return ret?.toLowerCase() == 'ok'
 }
 
 export function finishBill(params: BillUpdateFormParams) {
-    if(params.param.payment_channel === 'flywire'){
+	if (params.param.payment_channel === 'flywire') {
-        return finishAsiapay(params)
+		return finishAsiapay(params)
-    }
+	}
-    return finishFlywire(params)
+	return finishFlywire(params)
 }

src/service/request.ts

@@ -7,74 +7,127 @@ const JSON_FORMAT: string = 'application/json';
 const REQUEST_TIMEOUT = 300000; // 超时时长5min
 
 const Axios = axios.create({
-    baseURL: AppConfig.API_PREFIX || '/api',
+	baseURL: AppConfig.API_PREFIX || '/api',
-    timeout: REQUEST_TIMEOUT,
+	timeout: REQUEST_TIMEOUT,
-    headers: {'Content-Type': JSON_FORMAT}
+	headers: {'Content-Type': JSON_FORMAT}
 })
 
 
 // 请求前拦截
 Axios.interceptors.request.use(config => {
-    const token = getAuthToken();
+	const token = getAuthToken();
-    if (token) {
+	if (token) {
-        config.headers['Token'] = `${token}`;
+		config.headers['Token'] = `${token}`;
-    }
+	}
-    if (config.data && config.data instanceof FormData) {
+	if (config.data && config.data instanceof FormData) {
-        config.headers['Content-Type'] = 'multipart/form-data';
+		config.headers['Content-Type'] = 'multipart/form-data';
-    }
+	}
-    return config
+	return config
 }, err => {
-    return Promise.reject(err)
+	return Promise.reject(err)
 })
 
-export function request<T>(url: string, method: RequestMethod, data: AllType = null, getOriginResult = false) {
+export function request<T>(url: string, method: RequestMethod, data: AllType = null, getOriginResult = false, headers: RequestHeaders = {}) {
-    return new Promise<T>((resolve, reject) => {
+	return new Promise<T>((resolve, reject) => {
-        Axios.request<APIResponse<T>>({
+		Axios.request<APIResponse<T>>({
-            url,
+			url,
-            method,
+			method,
-            data,
+			data,
-        }).then(res => {
+			headers
-            if (res.status != 200) {
+		}).then(res => {
-                reject(new BizError("Service Internal Exception,Please Try Later!", res.status))
+			if (res.status != 200) {
-                return;
+				reject(new BizError("Service Internal Exception,Please Try Later!", res.status))
-            }
+				return;
-            if (getOriginResult) {
+			}
-                resolve(res.data as unknown as T)
+			if (getOriginResult) {
-                return;
+				resolve(res.data as unknown as T)
-            }
+				return;
-            // const
+			}
-            const {code, message, data,request_id} = res.data
+			// const
-            if (code == 0) {
+			const {code, message, data, request_id} = res.data
-                resolve(data as unknown as T)
+			if (code == 0) {
-            } else {
+				resolve(data as unknown as T)
-                reject(new BizError(message, code,request_id, data as unknown as AllType))
+			} else {
-            }
+				reject(new BizError(message, code, request_id, data as unknown as AllType))
-        }).catch(e => {
+			}
-            reject(new BizError(e.message, 500))
+		}).catch(e => {
-        })
+			reject(new BizError(e.message, 500))
-    })
+		})
+	})
 }
 
 
 export function post<T>(url: string, data: AllType = {}, returnOrigin = false) {
-    return request<T>(url, 'post', data, returnOrigin)
+	return request<T>(url, 'post', data, returnOrigin)
 }
 
 export function get<T>(url: string, data: AllType = null, returnOrigin = false) {
-    if (data) {
+	if (data) {
-        url += (url.indexOf('?') === -1 ? '?' : '&') + stringify(data)
+		url += (url.indexOf('?') === -1 ? '?' : '&') + stringify(data)
-    }
+	}
-    return request<T>(url, 'get', data, returnOrigin)
+	return request<T>(url, 'get', data, returnOrigin)
 }
 
 export function put<T>(url: string, data: AllType = {}) {
-    return request<T>(url, 'put', data)
+	return request<T>(url, 'put', data)
+}
+
+type UploadFileModel = {
+	field_name?: string;
+	origin_file: File
+}
+
+export function uploadFile<T>(url: string, file: UploadFileModel | File, data: AllType = null, returnOrigin = false) {
+
+	const formData = new FormData();
+	if (file && file instanceof File) {
+		formData.append('file', file);
+	} else {
+		formData.append(file.field_name || 'file', file.origin_file);
+	}
+	if (data) {
+		Object.keys(data).forEach(key => {
+			formData.append(key, data[key]);
+		})
+	}
+
+	return request<T>(url, 'post', data, returnOrigin, {
+		'Content-Type': 'multipart/form-data'
+	})
+	// return new Promise<T>((resolve, reject) => {
+	//     Axios.request<APIResponse<T>>({
+	//         url,
+	//         method,
+	//         data,
+	//         headers:{
+	//             'Content-Type': 'multipart/form-data'
+	//         }
+	//     }).then(res => {
+	//         if (res.status != 200) {
+	//             reject(new BizError("Service Internal Exception,Please Try Later!", res.status))
+	//             return;
+	//         }
+	//         if (getOriginResult) {
+	//             resolve(res.data as unknown as T)
+	//             return;
+	//         }
+	//         // const
+	//         const {code, message, data,request_id} = res.data
+	//         if (code == 0) {
+	//             resolve(data as unknown as T)
+	//         } else {
+	//             reject(new BizError(message, code,request_id, data as unknown as AllType))
+	//         }
+	//     }).catch(e => {
+	//         reject(new BizError(e.message, 500))
+	//     })
+	// })
 }
 
 export function getFileBlob(url: string) {
-    return new Promise<Blob>((resolve, reject) => {
+	return new Promise<Blob>((resolve, reject) => {
-        fetch(url).then(res => res.blob()).then(res => {
+		fetch(url).then(res => res.blob()).then(res => {
-            resolve(res)
+			resolve(res)
-        }).catch(reject);
+		}).catch(reject);
-    });
+	});
 }

src/types/api.d.ts

@@ -1,5 +1,8 @@
 // 请求方式
 declare type RequestMethod = 'get' | 'post' | 'put' | 'delete'
+declare type RequestHeaders = {
+    [key:string]:string
+}
 
 // 接口返回数据类型
 declare interface APIResponse<T> {