diff --git a/src/components/alert/index.tsx b/src/components/alert/index.tsx new file mode 100644 index 0000000..ab7dca1 --- /dev/null +++ b/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
+ + {props.message} +
+} + +export default Alert \ No newline at end of file diff --git a/src/components/alert/style.less b/src/components/alert/style.less new file mode 100644 index 0000000..134d6dd --- /dev/null +++ b/src/components/alert/style.less @@ -0,0 +1,8 @@ +.alert-container{ + display: flex; + align-items: center; + color:red; + .alert-text{ + margin-left: 5px; + } +} \ No newline at end of file diff --git a/src/components/bill/search-form.tsx b/src/components/bill/search-form.tsx index 76bb9de..a81040e 100644 --- a/src/components/bill/search-form.tsx +++ b/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 = (props) => { const BillTypes = useBillTypes() + const { paymentChannelList } = usePaymentChannels() const formSubmit = (value: SearchFormFields) => { const params: BillQueryParams = {} @@ -146,12 +148,11 @@ const SearchForm: React.FC = (props) => { - - FLYWIRE - CBP - PPS - + void @@ -20,24 +22,37 @@ export const ImportBillModal: React.FC = (props) => { const [state, setState] = useSetState<{ loading?: boolean; - open?: boolean + open?: boolean; + errorMessage?:string; + currentFile?: File; + paymentChannel?: string; }>({}) const [records, setImportRecords] = useState([]) - 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 = (props) => { }) }) setImportRecords(records) + setState({currentFile:currentFile.fileInstance}) }) } } @@ -76,7 +92,11 @@ export const ImportBillModal: React.FC = (props) => { textAlign: 'right' }}>{t('bill.title_pay_channel')}: - +