project/chuhai-payment-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add import billing records

Browse Source
This commit is contained in:
LittleBoy 2024-08-27 16:38:10 +08:00
parent 960f08d92e
commit 1411360614
10 changed files with 271 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/alert/index.tsx Normal file
View File

@ -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

8
src/components/alert/style.less Normal file
View File

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

13
src/components/bill/search-form.tsx
View File

@ -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')}
placeholder={t('base.please_select')} style={{width: '100%'}}>
<Form.Select.Option value="FLYWIRE">FLYWIRE</Form.Select.Option>
<Form.Select.Option value="CBP">CBP</Form.Select.Option>
<Form.Select.Option value="PPS">PPS</Form.Select.Option>
</Form.Select>
<Form.Select
showClear field="payment_channel" label={t('bill.title_pay_channel')}
placeholder={t('base.please_select')} style={{width: '100%'}}
optionList={paymentChannelList}
/>
</Col>
<Col xxl={4} xl={6} md={8}>
<Form.Select showClear field="is_delivered" label={t('bill.delivered_status')}

4
src/i18n/translations/en.json
View File

@ -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",

4
src/i18n/translations/sc.json
View File

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

4
src/i18n/translations/tc.json
View File

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

36
src/pages/bill/components/import_bill_modal.tsx
View File

@ -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>

179
src/service/api/bill.ts
View File

@ -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[];
total_count: number;
query_total_count: number;
query_total_amount: number;
result: BillModel[];
total_count: number;
query_total_count: number;
query_total_amount: number;
}
export type BillQueryParams = Partial<BillQueryParam>;
const DEFAULT_PAGE_SIZE = 10;
function formatBillQueryResult(params: BillQueryParams, result: BillQueryResult) {
// 将 BillQueryResult 转成成 RecordList
const formatData: RecordList<BillModel> = {
list: result.result,
pagination: {
total: result.query_total_count,
pageSize: params.page_size || DEFAULT_PAGE_SIZE,
current: params.page_number || 1,
recordTotal: Number(result.query_total_amount || 0)
}
}
return formatData
// 将 BillQueryResult 转成成 RecordList
const formatData: RecordList<BillModel> = {
list: result.result,
pagination: {
total: result.query_total_count,
pageSize: params.page_size || DEFAULT_PAGE_SIZE,
current: params.page_number || 1,
recordTotal: Number(result.query_total_amount || 0)
}
}
return formatData
}
export async function billList(params: BillQueryParams) {
const result = await get<BillQueryResult>('/bills', params)
return formatBillQueryResult(params, result);
const result = await get<BillQueryResult>('/bills', params)
return formatBillQueryResult(params, result);
}
export function exportBillList(params: BillQueryParams) {
const token = getAuthToken();
const headers = new Headers({
'Token': token || ''
});
const token = getAuthToken();
const headers = new Headers({
'Token': token || ''
});
return fetch(`${AppConfig.API_PREFIX || '/api'}/bills/export?${stringify(params)}`,{
headers,
method:'GET'
}).then(r=>r.blob())
// return get<Blob>('/bills/export', params,true)
return fetch(`${AppConfig.API_PREFIX || '/api'}/bills/export?${stringify(params)}`, {
headers,
method: 'GET'
}).then(r => r.blob())
// 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(){
return get<BillType[]>('/billing_types')
export function selectBillTypeList() {
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) {
return post('/add_bill',bill);
export function addBillRecord(bill: CreateBillRecordModel) {
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) {
return put(`/bills/${id}/cancel`,{status})
export function modifyBillStatus(id: number, status: BillStatus) {
return put(`/bills/${id}/cancel`, {status})
}
export function confirmBillType(bills:BillConfirmParams[]) {
return post<BillModel>(`/bills/confirm`, {bills})
export function confirmBillType(bills: BillConfirmParams[]) {
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;
param:BillUpdateParams
bill: BillModel;
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){
const eventData = {
"event_type": "guaranteed",
"event_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
"event_resource": "payments",
"data": {
"remark": param.remark,
"payment_id": param.merchant_ref,
"amount_from": Number(param.actual_payment_amount) * 100,
"currency_from": "HKD",
"amount_to": Number(param.payment_amount) * 100,
"currency_to": "HKD",
"status": "guaranteed",
"expiration_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
"external_reference": bill.id,
"country": "CN",
"payment_method": {
"type": param.payment_method
},
"fields": {
"student_email": bill.student_email,
"student_last_name": bill.student_last_name || bill.student_english_name,
"student_id": bill.student_number,
"resident_no": null,
"contact_no": "",
"payment_type_other": null,
"payment_type": null
}
}
}
const ret = await post<string>('/flywire/feedback', eventData,true)
export async function finishFlywire({bill, param}: BillUpdateFormParams) {
const eventData = {
"event_type": "guaranteed",
"event_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
"event_resource": "payments",
"data": {
"remark": param.remark,
"payment_id": param.merchant_ref,
"amount_from": Number(param.actual_payment_amount) * 100,
"currency_from": "HKD",
"amount_to": Number(param.payment_amount) * 100,
"currency_to": "HKD",
"status": "guaranteed",
"expiration_date": dayjs().format('YYYY-MM-DDTHH:mm:ss[Z]'),
"external_reference": bill.id,
"country": "CN",
"payment_method": {
"type": param.payment_method
},
"fields": {
"student_email": bill.student_email,
"student_last_name": bill.student_last_name || bill.student_english_name,
"student_id": bill.student_number,
"resident_no": null,
"contact_no": "",
"payment_type_other": null,
"payment_type": null
}
}
}
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'){
return finishAsiapay(params)
}
return finishFlywire(params)
if (params.param.payment_channel === 'flywire') {
return finishAsiapay(params)
}
return finishFlywire(params)
}

151
src/service/request.ts
View File

@ -7,74 +7,127 @@ const JSON_FORMAT: string = 'application/json';
const REQUEST_TIMEOUT = 300000; // 超时时长5min
const Axios = axios.create({
baseURL: AppConfig.API_PREFIX || '/api',
timeout: REQUEST_TIMEOUT,
headers: {'Content-Type': JSON_FORMAT}
baseURL: AppConfig.API_PREFIX || '/api',
timeout: REQUEST_TIMEOUT,
headers: {'Content-Type': JSON_FORMAT}
})
// 请求前拦截
Axios.interceptors.request.use(config => {
const token = getAuthToken();
if (token) {
config.headers['Token'] = `${token}`;
}
if (config.data && config.data instanceof FormData) {
config.headers['Content-Type'] = 'multipart/form-data';
}
return config
const token = getAuthToken();
if (token) {
config.headers['Token'] = `${token}`;
}
if (config.data && config.data instanceof FormData) {
config.headers['Content-Type'] = 'multipart/form-data';
}
return config
}, err => {
return Promise.reject(err)
return Promise.reject(err)
})
export function request<T>(url: string, method: RequestMethod, data: AllType = null, getOriginResult = false) {
return new Promise<T>((resolve, reject) => {
Axios.request<APIResponse<T>>({
url,
method,
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 request<T>(url: string, method: RequestMethod, data: AllType = null, getOriginResult = false, headers: RequestHeaders = {}) {
return new Promise<T>((resolve, reject) => {
Axios.request<APIResponse<T>>({
url,
method,
data,
headers
}).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 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) {
url += (url.indexOf('?') === -1 ? '?' : '&') + stringify(data)
}
return request<T>(url, 'get', data, returnOrigin)
if (data) {
url += (url.indexOf('?') === -1 ? '?' : '&') + stringify(data)
}
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) => {
fetch(url).then(res => res.blob()).then(res => {
resolve(res)
}).catch(reject);
});
return new Promise<Blob>((resolve, reject) => {
fetch(url).then(res => res.blob()).then(res => {
resolve(res)
}).catch(reject);
});
}

3
src/types/api.d.ts vendored
View File

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