add confirm modal when student not exists

src/i18n/translations/en.json

@@ -1,13 +1,16 @@
 {
   "base": {
     "add": "Add",
+    "add_success": "Add success",
     "bill_number": "Bill Number",
     "btn_search_submit": "Search",
     "cancel": "Cancel",
     "close": "Close",
     "confirm": "Confirm",
+    "confirm_and_add": "Confirm and add",
     "confirm_delete": "Please confirm delete record",
     "confirm_import": "Confirm Import",
+    "confirm_information": "Confirmation Information",
     "confirm_next_operation": "Are you sure to process this action",
     "confirm_paid": "Confirm paid",
     "copy-pay-url": "Copy payment link",
@@ -26,9 +29,10 @@
     "select_excel_file": "Select File",
     "select_upload_file": "Select File",
     "student_number": "Student Number",
+    "title_error_tip": "Error message",
     "validate": {
       "email": "Email format is incorrect",
-      "error_details_message": "Please set bill details"
+      "error_details_message": "Bill detail not correct"
     },
     "warning": "Warning"
   },
@@ -56,6 +60,7 @@
     "confirm_success": "Confirm success!",
     "confirmed": "Confirmed",
     "create": {
+      "add_confirm": "The data is abnormal. Please confirm whether to continue",
       "confirm": "Confirm Add",
       "pay_area": "Payment Area"
     },

src/i18n/translations/sc.json

@@ -1,13 +1,16 @@
 {
   "base": {
     "add": "增加",
+    "add_success": "添加成功",
     "bill_number": "账单编号",
     "btn_search_submit": "搜索",
     "cancel": "取消",
     "close": "关闭",
     "confirm": "确定",
+    "confirm_and_add": "确认并添加",
     "confirm_delete": "请确认是否删除此数据",
     "confirm_import": "确认导入",
+    "confirm_information": "确认信息",
     "confirm_next_operation": "请确认是否进行此操作",
     "confirm_paid": "确认已支付",
     "copy-pay-url": "复制支付链接",
@@ -26,9 +29,10 @@
     "select_excel_file": "选择文件",
     "select_upload_file": "选择文件",
     "student_number": "学号",
+    "title_error_tip": "错误提示",
     "validate": {
       "email": "Email格式不正确",
-      "error_details_message": "请设置账单详情"
+      "error_details_message": "账单详情设置不正确"
     },
     "warning": "警告"
   },
@@ -56,6 +60,7 @@
     "confirm_success": "对账成功!",
     "confirmed": "已对账",
     "create": {
+      "add_confirm": "数据异常请确认是否继续添加",
       "confirm": "确认添加",
       "pay_area": "支付区域"
     },

src/i18n/translations/tc.json

@@ -1,13 +1,16 @@
 {
   "base": {
     "add": "增加",
+    "add_success": "添加成功",
     "bill_number": "帳單編號",
     "btn_search_submit": "搜尋",
     "cancel": "取消",
     "close": "關閉",
     "confirm": "確定",
+    "confirm_and_add": "確認並添加",
     "confirm_delete": "請確認是否刪除此數據",
     "confirm_import": "確認導入",
+    "confirm_information": "確認訊息",
     "confirm_next_operation": "請確認是否進行此操作",
     "confirm_paid": "確認已支付",
     "copy-pay-url": "複製付款連結",
@@ -26,9 +29,10 @@
     "select_excel_file": "選擇文件",
     "select_upload_file": "選擇文件",
     "student_number": "學號",
+    "title_error_tip": "錯誤提示",
     "validate": {
       "email": "Email格式不正確",
-      "error_details_message": "請設定帳單詳情"
+      "error_details_message": "帳單詳情設定不正確"
     },
     "warning": "警告"
   },
@@ -56,6 +60,7 @@
     "confirm_success": "對帳成功!",
     "confirmed": "已對帳",
     "create": {
+      "add_confirm": "數據異常請確認是否繼續添加",
       "confirm": "確認新增",
       "pay_area": "支付區域"
     },

src/pages/bill/components/add_bill_modal.tsx

@@ -1,6 +1,19 @@
-import {Button, Col, Divider, Form, InputNumber, Modal, Row, Select, Space} from "@douyinfe/semi-ui";
+import {
+	Button,
+	Col,
+	Descriptions,
+	Divider,
+	Form,
+	InputNumber,
+	Modal,
+	Row,
+	Select,
+	Space,
+	Toast
+} from "@douyinfe/semi-ui";
 import {IconAlertCircle} from "@douyinfe/semi-icons";
-import React from "react";
+import {Data} from "@douyinfe/semi-ui/lib/es/descriptions";
+import React, {useMemo} from "react";
 import {useTranslation} from "react-i18next";
 import {useSetState} from "ahooks";
 
@@ -8,6 +21,8 @@ import {useBillTypes} from "@/hooks/useBillTypes.ts";
 import {usePaymentChannels} from "@/hooks/usePaymentChannels.ts";
 import {addBillRecord} from "@/service/api/bill.ts"
 import dayjs from "dayjs";
+import MoneyFormat from "@/components/money-format.tsx";
+import {BizError} from "@/service/types.ts";
 
 type BillPaidModalProps = {
 	onConfirm: () => void
@@ -84,14 +99,17 @@ export const BillTypeList: React.FC<BillTypeListProps> = (props) => {
 }
 
 export const AddBillModal: React.FC<BillPaidModalProps> = (props) => {
-	const {t} = useTranslation()
+	const {t, i18n} = useTranslation()
 	const {paymentChannelList, paymentMethodList} = usePaymentChannels();
 
 	const [state, setState] = useSetState<{
 		loading?: boolean;
+		confirmLoading?: boolean;
 		open?: boolean;
 		details: ConfirmedBillDetail[];
 		errorMessage?: string;
+		errorConfirmMessage?: string;
+		values?: CreateBillRecordModel
 	}>({
 		details: []
 	})
@@ -108,19 +126,25 @@ export const AddBillModal: React.FC<BillPaidModalProps> = (props) => {
 				return;
 			}
 		}
-		setState({
-			loading: true, errorMessage: undefined
-		})
 		values.details = state.details
 		values.check_student = true;
 		values.initiated_paid_date = dayjs(values.initiated_paid_date).format("YYYY-MM-DD")
 		values.paid_date = dayjs(values.paid_date).format("YYYY-MM-DD")
 		values.delivered_date = dayjs(values.delivered_date).format("YYYY-MM-DD")
+		setState({
+			loading: true, errorMessage: undefined,values
+		})
 		addBillRecord(values).then(() => {
 			setState({open: false})
+			Toast.success(t('base.add_success'))
 			props.onConfirm()
-		}).catch(e => {
+		}).catch((e: BizError) => {
+			if (e.code == -50415) { // STUDENT_INFO_NOT_FOUND
+				// duplicate
+				setState({errorConfirmMessage: e.message})
+			} else {
 				setState({errorMessage: e.message})
+			}
 		}).finally(() => {
 			setState({
 				loading: false
@@ -135,6 +159,58 @@ export const AddBillModal: React.FC<BillPaidModalProps> = (props) => {
 			errorMessage: undefined
 		})
 	}
+
+	// process confirm
+	const handleCloseConfirm = () => {
+		setState({errorConfirmMessage: undefined})
+	}
+	const handleConfirmAdd = () => {
+		if (!state.values) return;
+		setState({confirmLoading: true})
+		state.values.check_student = false;
+		addBillRecord(state.values).then(() => {
+			setState({
+				loading: false,
+				open: false,
+				errorMessage: undefined,
+				errorConfirmMessage: undefined,
+			})
+			Toast.success(t('base.add_success'))
+			props.onConfirm()
+		}).catch(e => {
+			setState({errorConfirmMessage: e.message})
+		}).finally(() => {
+			setState({
+				confirmLoading: false,
+			})
+		})
+	}
+
+	const details = useMemo(() => {
+		if (!state.values) return;
+		const {
+			application_number, payment_channel, payment_method,
+			student_email, merchant_ref, paid_area,
+			initiated_paid_date, paid_date, delivered_date
+		} = state.values
+		//, span: 2
+		const _data: Data[] = [
+			{key: 'Merchant Ref', value: merchant_ref},
+			{key: t('bill.bill_number'), value: application_number},
+			{key: 'Email', value: student_email},
+			{key: t('bill.title_pay_channel'), value: payment_channel},
+			{key: t('bill.title_pay_method'), value: payment_method},
+			{key: t('bill.create.pay_area'), value: paid_area},
+			{key: t('bill.title_initiated_paid_at'), value: initiated_paid_date},
+			{key: t('bill.title_paid_at'), value: paid_date},
+			{key: t('bill.title_delivered_at'), value: delivered_date, span: 2},
+		]
+		state.details.forEach(it => {
+			_data.push({key: t('bill.title_bill_type'), value: it.bill_type})
+			_data.push({key: t('bill.title_amount'), value: <MoneyFormat money={it.amount}/>})
+		});
+		return _data
+	}, [i18n.language, state.values]);
 	return (<>
 		<Button onClick={() => setState({open: true})} theme={'solid'}>{t('bill.add_bill_record')}</Button>
 		<Modal
@@ -146,7 +222,6 @@ export const AddBillModal: React.FC<BillPaidModalProps> = (props) => {
 			width={600}
 			maskClosable={false}
 		>
-
 			<Form<CreateBillRecordModel> onSubmit={onSubmit} initValues={{
 				merchant_ref: '',
 				application_number: '',
@@ -260,7 +335,8 @@ export const AddBillModal: React.FC<BillPaidModalProps> = (props) => {
 				</Row>
 				<div>
 					<BillTypeList onChange={(details) => setState({details})}/>
-					{state.errorMessage && <div className="semi-form-field-error-message" style={{marginBottom: 10}}>
+					{state.errorMessage &&
+                        <div className="semi-form-field-error-message align-center" style={{marginBottom: 10}}>
                             <IconAlertCircle/>
                             <span style={{marginLeft: 5}}>{state.errorMessage}</span>
                         </div>}
@@ -276,5 +352,25 @@ export const AddBillModal: React.FC<BillPaidModalProps> = (props) => {
 				</div>
 			</Form>
 		</Modal>
+
+		<Modal
+			visible={!!state.errorConfirmMessage}
+			title={t('base.confirm_information')}
+			closeOnEsc={true}
+			onCancel={handleCloseConfirm}
+			width={600}
+			maskClosable={false}
+			okText={t('base.confirm_and_add')}
+			onOk={handleConfirmAdd}
+			okButtonProps={{loading: state.confirmLoading}}
+		>
+			<Descriptions layout='horizontal' align='plain' data={details} column={2}/>
+			<Divider style={{margin: '10px 0'}}>{t('base.title_error_tip')}</Divider>
+			{state.errorConfirmMessage &&
+                <div className="semi-form-field-error-message align-center" style={{marginBottom: 10}}>
+                    <IconAlertCircle/>
+                    <span style={{marginLeft: 5}}>{state.errorConfirmMessage}</span>
+                </div>}
+		</Modal>
 	</>)
 }