[KAN-244] feat(billing): 다중 청구서 발송 프론트

Try-AngIe · Jul 24, 2024 · 7817e1a · 7817e1a
1 parent df975e2
commit 7817e1a
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 3 deletions.
diff --git a/client/src/components/vendor/modal/PayRealtimeErrorModal.jsx b/client/src/components/vendor/modal/PayRealtimeErrorModal.jsx
@@ -17,7 +17,7 @@ const PayRealtimeErrorModal = ({ errors, isShowModal, icon, setIsShowModal, moda
       width={'w-5/6'}>
       <div className='flex flex-col h-full'>
         <div className='mb-4 text-lg font-semibold text-red-500'>
-          {errors.length}건 실시간 결제가 실패했습니다.
+          {errors && errors[0].total}건 중 {errors.length}건의 실시간 결제가 실패했습니다.
         </div>
         <div className='flex-grow overflow-auto'>
           <table className='w-full mb-3'>

diff --git a/client/src/components/vendor/modal/SendInvoiceErrorModal.jsx b/client/src/components/vendor/modal/SendInvoiceErrorModal.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { formatId } from '@/utils/format/formatId';
+import { formatPhone } from '@/utils/format/formatPhone';
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+import BaseModal from '@/components/common/BaseModal';
+import { FaExclamationCircle } from 'react-icons/fa';
+
+const SendInvoiceErrorModal = ({ errors, isShowModal, icon, setIsShowModal, modalTitle }) => {
+  return (
+    <BaseModal
+      isShowModal={isShowModal}
+      setIsShowModal={setIsShowModal}
+      modalTitle={modalTitle}
+      icon={icon}
+      height={'h-5/6'}
+      width={'w-5/6'}>
+      <div className='flex flex-col h-full'>
+        <div className='mb-4 text-lg font-semibold text-red-500'>
+          {errors && errors[0].total}건 중 {errors.length}건의 청구서 발송이 실패했습니다.
+        </div>
+        <div className='flex-grow overflow-auto'>
+          <table className='w-full mb-3'>
+            <thead>
+              <tr className='bg-table_col'>
+                <th className='p-2 text-left text-text_black w-8'></th>
+                <th className='p-2 text-left text-text_black'>청구번호</th>
+                <th className='p-2 text-left text-text_black'>회원이름</th>
+                <th className='p-2 text-left text-text_black'>휴대전화</th>
+                <th className='p-2 text-left text-text_black'>청구상태</th>
+                <th className='p-2 text-left text-text_black'>결제일</th>
+              </tr>
+            </thead>
+            <tbody>
+              {errors.map(({ from, res }, idx) => (
+                <tr key={idx} className='hover:bg-gray-100'>
+                  <td className='border-b border-ipt_border p-2 text-text_black'>
+                    <div className='mr-2'>
+                      <FaExclamationCircle
+                        className='text-red-500 cursor-help'
+                        data-tooltip-id={`error-${idx}`}
+                        data-tooltip-html={res.message}
+                      />
+                      <Tooltip id={`error-${idx}`} place='top' type='error' effect='solid' />
+                    </div>
+                  </td>
+                  <td className='border-b border-ipt_border p-2 text-text_black'>
+                    {formatId(from.billingId)}
+                  </td>
+                  <td className='border-b border-ipt_border p-2 text-text_black'>
+                    {from.memberName}
+                  </td>
+                  <td className='border-b border-ipt_border p-2 text-text_black'>
+                    {formatPhone(from.memberPhone)}
+                  </td>
+                  <td className='border-b border-ipt_border p-2 text-text_black'>
+                    {from.billingStatus}
+                  </td>
+                  <td className='border-b border-ipt_border p-2 text-text_black'>
+                    {from.billingDate}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className='mt-4 flex justify-center'>
+          <button
+            onClick={() => setIsShowModal(false)}
+            className='px-4 py-2 bg-mint text-white rounded hover:bg-mint_hover transition-colors'>
+            확인
+          </button>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default SendInvoiceErrorModal;
diff --git a/client/src/pages/vendor/billing/BillingListPage.jsx b/client/src/pages/vendor/billing/BillingListPage.jsx
@@ -1,4 +1,4 @@
-import { getBillingList, payRealTimeBilling } from '@/apis/billing';
+import { getBillingList, payRealTimeBilling, sendInvoice } from '@/apis/billing';
 import MoveButton from '@/components/common/buttons/MoveButton';
 import PagiNation from '@/components/common/PagiNation';
 import SortSelect from '@/components/common/selects/SortSelect';
@@ -14,6 +14,7 @@ import { cols, initialSearch, selectOptions } from '@/utils/tableElements/billin
 import { formatPhone } from '@/utils/format/formatPhone';
 import { formatProductsForList } from '@/utils/format/formatProducts';
 import PayRealtimeErrorModal from '@/components/vendor/modal/PayRealtimeErrorModal';
+import SendInvoiceErrorModal from '@/components/vendor/modal/SendInvoiceErrorModal';
 
 const BillingListPage = () => {
   const [billingList, setBillingList] = useState([]); // 청구 목록
@@ -32,6 +33,9 @@ const BillingListPage = () => {
   const [payErrors, setPayErrors] = useState();
   const [isShowPayErrorModal, setIsShowPayErrorModal] = useState(false);
 
+  const [invoiceErrors, setInvoiceErrors] = useState();
+  const [isShowInvoiceErrorModal, setIsShowInvoiceErrorModal] = useState(false);
+
   const [selectedBillings, setSelectedBillings] = useState([]); // 선택된 청구 목록
 
   const navigate = useNavigate();
@@ -130,6 +134,7 @@ const BillingListPage = () => {
         errors.push({
           from: billing,
           res: err.response.data,
+          total: selectedBillings.length,
         });
       }
     }
@@ -144,6 +149,36 @@ const BillingListPage = () => {
     }
   };
 
+  // 청구서 발송
+  const handleInvoiceSend = async () => {
+    if (!selectedBillings || selectedBillings.length === 0) {
+      alert('선택된 청구가 없습니다!');
+      return;
+    }
+
+    const errors = [];
+    for (const billing of selectedBillings) {
+      try {
+        await sendInvoice(billing.billingId);
+      } catch (err) {
+        errors.push({
+          from: billing,
+          res: err.response.data,
+          total: selectedBillings.length,
+        });
+      }
+    }
+
+    console.log(errors);
+    // 실패항목이 있는 경우
+    if (errors.length !== 0) {
+      setInvoiceErrors(errors);
+      setIsShowInvoiceErrorModal(true);
+    } else {
+      alert(`${selectedBillings.length}개의 청구서 발송을 성공했습니다.`);
+    }
+  };
+
   // <--------청구 상세 조회 페이지 이동-------->
   const MoveBillingDetail = async billingId => {
     console.log(billingId);
@@ -191,7 +226,12 @@ const BillingListPage = () => {
               buttonText='실시간 결제'
               onClick={handleRealtimePay}
             />
-            <MoveButton imgSrc={send} color='mint' buttonText='청구서 발송' />
+            <MoveButton
+              imgSrc={send}
+              color='mint'
+              buttonText='청구서 발송'
+              onClick={handleInvoiceSend}
+            />
             <MoveButton
               imgSrc={addItem}
               color='mint'
@@ -230,6 +270,15 @@ const BillingListPage = () => {
           modalTitle={'실시간 결제'}
         />
       )}
+      {isShowInvoiceErrorModal && (
+        <SendInvoiceErrorModal
+          errors={invoiceErrors}
+          isShowModal={isShowInvoiceErrorModal}
+          icon={card}
+          setIsShowModal={setIsShowInvoiceErrorModal}
+          modalTitle={'청구서 발송'}
+        />
+      )}
     </div>
   );
 };