diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index 4044056..61e9f89 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -150,6 +150,7 @@ export interface DetailInfoSectionProps extends DetailResponse { export interface DetailData { mid?: string; tid?: string; + seq?: string; detailOn: boolean; } diff --git a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx new file mode 100644 index 0000000..128b537 --- /dev/null +++ b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx @@ -0,0 +1,180 @@ +import { motion } from 'framer-motion'; +import { useTranslation } from 'react-i18next'; +import { useEffect, useState } from 'react'; +import { + ExtensionFundAccountDownloadReceiptParams, + ExtensionFundAccountDownloadReceiptResponse, + ExtensionFundAccountResultDetailParams, + ExtensionFundAccountResultDetailResponse, +} from '@/entities/additional-service/model/fund-account/types'; +import moment from 'moment'; +import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation'; +import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-download-certificate-mutation'; +import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; +import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant'; +import { FullMenuClose } from '@/entities/common/ui/full-menu-close'; + +export interface FundAccountResultDetailProps { + detailOn: boolean; + setDetailOn: (detailOn: boolean) => void; + mid: string; + tid: string; +}; +export const FundAccountResultDetail = ({ + detailOn, + setDetailOn, + mid, + tid +}: FundAccountResultDetailProps) => { + const { t } = useTranslation(); + + const [detail, setDetail] = useState(); + const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); + + const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation(); + const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation(); + + const callDetail = () => { + let params: ExtensionFundAccountResultDetailParams = { + mid: mid, + tid: tid, + }; + + extensionFundAccountResultDetail(params).then((rs: ExtensionFundAccountResultDetailResponse) => { + console.log(rs.requestDate) + setDetail(rs); + }); + }; + + const onClickToOpenEmailBottomSheet = () => { + setEmailBottomSheetOn(true); + }; + + const onSendRequest = (selectedEmail?: string) => { + if(selectedEmail){ + let params: ExtensionFundAccountDownloadReceiptParams = { + mid: mid, + tid: tid, + email: selectedEmail + }; + extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => { + console.log('Receipt Download Status:', rs); + }); + } + setEmailBottomSheetOn(false); + }; + + const onClickToClose = () => { + setDetailOn(false); + }; + + useEffect(() => { + if(!!mid && !!tid){ + callDetail(); + } + }, [mid, tid]); + + return ( + <> + +
+
+
{ t('additionalService.fundAccount.transferDetailTitle') }
+
+ +
+
+
+
+
+ + {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })} + +
+
{detail?.accountName}({detail?.accountNo})
+ {detail?.applicationDate && ( +
{moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}
+ )} +
+ {/* ✅ resultMessage가 "정상"일 때만 표시 */} + {detail?.resultMessage === '정상' && ( +
+ +
+ )} +
+
+
{t('additionalService.fundAccount.detailInfo')}
+
    +
  • + {t('additionalService.fundAccount.requestDateTime')} + {moment(detail?.requestDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')} +
    • +
  • + {t('additionalService.fundAccount.transferDateTime')} + {detail?.applicationDate ? moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'} +
    • +
  • + {t('additionalService.fundAccount.transferResult')} + {detail?.resultMessage || '-'} +
    • +
  • + {t('additionalService.fundAccount.failureReason')} + {detail?.failReason || '-'} +
    • +
  • + {t('additionalService.fundAccount.beneficiaryName')} + {detail?.accountName} +
    • +
  • + {t('additionalService.fundAccount.bank')} + {detail?.bankName} +
    • +
  • + {t('additionalService.fundAccount.accountNumber')} + {detail?.accountNo} +
    • +
  • + MID + {mid} +
    • +
  • + {t('transaction.fields.orderNumber')} + {detail?.moid} +
    • +
  • + TID + {detail?.tid} +
    • +
+
+
+
+ + + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/fund-account/detail/transfer-detail.tsx b/src/entities/additional-service/ui/fund-account/detail/transfer-detail.tsx new file mode 100644 index 0000000..105fe54 --- /dev/null +++ b/src/entities/additional-service/ui/fund-account/detail/transfer-detail.tsx @@ -0,0 +1,163 @@ +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { useTranslation } from 'react-i18next'; +import { motion } from 'framer-motion'; +import { useLocation } from 'react-router'; +import { useEffect, useState } from 'react'; +import { useExtensionFundAccountTransferDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-detail-mutation'; +import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types'; +import { getFundAccountStatusName } from '@/entities/additional-service/model/fund-account/constant'; +import moment from 'moment'; +import { snackBar } from '@/shared/lib'; +import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation'; +import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant'; +import { FullMenuClose } from '@/entities/common/ui/full-menu-close'; + +export interface FundAccountTransferDetailProps { + detailOn: boolean; + setDetailOn: (detailOn: boolean) => void; + seq: string; +}; + +export const FundAccountTransferDetail = ({ + detailOn, + setDetailOn, + seq +}: FundAccountTransferDetailProps) => { + const { t } = useTranslation(); + const { navigate } = useNavigate(); + const location = useLocation(); + + const [detail, setDetail] = useState(); + + const { mutateAsync: extensionFundAccountTransferDetail } = useExtensionFundAccountTransferDetailMutation(); + const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRequestMutation(); + + const callDetail = () => { + let params: ExtensionFundAccountTransferDetailParams = { + seq: seq + }; + + extensionFundAccountTransferDetail(params).then((rs: ExtensionFundAccountTransferDetailResponse) => { + setDetail(rs); + }); + }; + + const onClickToRequest = () => { + let params: ExtensionFundAccountTransferRequestParams = { + seq: seq + }; + extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => { + if(rs.status){ + callDetail(); + snackBar(t('additionalService.fundAccount.transferRequestSuccess')) + } + else{ + const errorMessage = rs.error?.message || t('additionalService.fundAccount.transferRequestFailed'); + snackBar(`[${t('common.failed')}] ${errorMessage}`); + } + }).catch((error) => { + const errorMessage = error?.response?.data?.error?.message || + error?.message || + t('additionalService.fundAccount.transferRequestError'); + snackBar(`[${t('common.failed')}] ${errorMessage}`); + }); + }; + + const onClickToClose = () => { + setDetailOn(false); + }; + + useEffect(() => { + if(!!seq){ + callDetail(); + } + }, [seq]); + + return ( + <> + +
+
+
{ t('additionalService.fundAccount.transferDetailTitle') }
+
+ +
+
+
+
+
+ + {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })} + +
+
{detail?.accountName}({detail?.accountNo})
+
+ {detail?.registDate ? moment(detail.registDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'} +
+
+
+
+
{t('additionalService.fundAccount.detailInfo')}
+
    +
  • + {t('additionalService.fundAccount.registrationDateTime')} + + {detail?.registDate ? moment(detail.registDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'} + +
    • +
  • + {t('additionalService.fundAccount.processingResult')} + {getFundAccountStatusName(t)(detail?.resultStatus) || '-'} +
    • +
  • + {t('additionalService.fundAccount.requestDate')} + + {detail?.requestDate ? moment(detail.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD') : '-'} + +
    • +
  • + {t('additionalService.fundAccount.transferResult')} + {detail?.resultMessage || '-'} +
    • +
  • + {t('additionalService.fundAccount.beneficiaryName')} + {detail?.accountName} +
    • +
  • + {t('additionalService.fundAccount.bank')} + {detail?.bankCode || '-'} +
    • +
  • + {t('additionalService.fundAccount.accountNumber')} + {detail?.accountNo} +
    • +
  • + MID + {detail?.mid} +
    • + +
+
+
+ +
+
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx index 471c055..c2077e3 100644 --- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx @@ -5,7 +5,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { JSX, useEffect, useState } from 'react'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { ListDateGroup } from '../list-date-group'; -import { AdditionalServiceCategory } from '../../model/types'; +import { AdditionalServiceCategory, DetailData } from '../../model/types'; import { ExtensionFundAccountResultExcelParams, ExtensionFundAccountResultExcelResponse, ExtensionFundAccountResultListParams, ExtensionFundAccountResultListResponse, ExtensionFundAccountResultSummaryParams, ExtensionFundAccountResultSummaryResponse, FundAccountResultContent, FundAccountResultContentItem, FundAccountResultStatus, FundAccountSearchCl, FundAccountSearchDateType, FundAccountStatus } from '../../model/fund-account/types'; import { useExtensionFundAccountResultSummaryMutation } from '../../api/fund-account/use-extension-fund-account-result-summary-mutation'; import { useExtensionFundAccountResultExcelMutation } from '../../api/fund-account/use-extension-fund-account-result-excel-mutation'; @@ -18,6 +18,7 @@ import { useStore } from '@/shared/model/store'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import useIntersectionObserver from '@/widgets/intersection-observer'; import { useTranslation } from 'react-i18next'; +import { FundAccountResultDetail } from './detail/result-detail'; export const FundAccountResultListWrap = () => { const { navigate } = useNavigate(); @@ -50,6 +51,9 @@ export const FundAccountResultListWrap = () => { const [totalFailCount, setTotalFailCount] = useState(0); const [totalFailAmount, setTotalFailAmount] = useState(0); + const [detailOn, setDetailOn] = useState(false); + const [detailMid, setDetailMid] = useState(''); + const [detailTid, setDetailTid] = useState(''); const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation(); const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation(); @@ -163,6 +167,16 @@ export const FundAccountResultListWrap = () => { setFilterOn(!filterOn); }; + const setDetailData = (detailData: DetailData) => { + setDetailOn(detailData.detailOn); + if(detailData.mid){ + setDetailMid(detailData.mid); + } + if(detailData.tid){ + setDetailTid(detailData.tid); + } + }; + const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); }; @@ -187,11 +201,12 @@ export const FundAccountResultListWrap = () => { if (list.length > 0) { rs.push( ); } @@ -205,11 +220,12 @@ export const FundAccountResultListWrap = () => { if (list.length > 0) { rs.push( ); } @@ -350,6 +366,12 @@ export const FundAccountResultListWrap = () => { setBankCode={setBankCode} setResultStatus={setResultStatus} > + { const { navigate } = useNavigate(); @@ -47,6 +48,9 @@ export const FundAccountTransferListWrap = () => { const [status, setStatus] = useState(FundAccountStatus.ALL); const [bankCode, setBankCode] = useState(''); + const [detailOn, setDetailOn] = useState(false); + const [detailSeq, setDetailSeq] = useState(''); + const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); const [balance, setBalance] = useState(0); @@ -126,6 +130,13 @@ export const FundAccountTransferListWrap = () => { setEmailBottomSheetOn(true); }; + const setDetailData = (detailData: DetailData) => { + setDetailOn(detailData.detailOn); + if(detailData.seq){ + setDetailSeq(detailData.seq); + } + }; + const onSendRequest = (selectedEmail?: string) => { if (selectedEmail) { const params: ExtensionFundAccountTransferExcelParams = { @@ -179,10 +190,11 @@ export const FundAccountTransferListWrap = () => { if (list.length > 0) { rs.push( ); } @@ -196,11 +208,12 @@ export const FundAccountTransferListWrap = () => { if (list.length > 0) { rs.push( ); } @@ -320,7 +333,11 @@ export const FundAccountTransferListWrap = () => { setBankCode={setBankCode} setStatus={setStatus} > - + { } /> - } /> } /> } /> - } /> } /> diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index d6a3824..e823351 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -220,10 +220,6 @@ export const PATHS: RouteNamesType = { `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundAccount.base}`, ROUTE_NAMES.additionalService.fundAccount.transferList, ), - transferDetail: generatePath( - `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundAccount.base}`, - ROUTE_NAMES.additionalService.fundAccount.transferDetail, - ), transferRequest: generatePath( `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundAccount.base}`, ROUTE_NAMES.additionalService.fundAccount.transferRequest, @@ -232,10 +228,6 @@ export const PATHS: RouteNamesType = { `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundAccount.base}`, ROUTE_NAMES.additionalService.fundAccount.resultList, ), - resultDetail: generatePath( - `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundAccount.base}`, - ROUTE_NAMES.additionalService.fundAccount.resultDetail, - ), }, settlementAgency: { base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.settlementAgency.base}`), diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index 74a4986..5fd9455 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -103,10 +103,8 @@ export const ROUTE_NAMES = { fundAccount: { base: '/fund-account/*', transferList: 'transfer-list', - transferDetail: 'transfer-detail', transferRequest: 'transfer-request', resultList: 'result-list', - resultDetail: 'result-detail', }, settlementAgency: { base: '/settlement-agency/*',