diff --git a/src/entities/additional-service/model/account-holder-search/types.ts b/src/entities/additional-service/model/account-holder-search/types.ts index 3dd9699..baf8580 100644 --- a/src/entities/additional-service/model/account-holder-search/types.ts +++ b/src/entities/additional-service/model/account-holder-search/types.ts @@ -24,6 +24,7 @@ export interface AccountHolderSearchListItem { export interface AccountHolderSearchListProps { listItems: Array; mid: string; + setDetailData: (detailData: DetailData) => void; } export interface AccountHolderSearchFilterProps extends FilterProps { @@ -46,7 +47,7 @@ export interface AccountHolderSearchFilterProps extends FilterProps { // 계좌 성명 조회 확장 서비스 import { DefaulResponsePagination, DefaultRequestPagination } from "@/entities/common/model/types"; -import { ExtensionRequestParams, FilterProps, ListItemProps, ProcessResult } from "../types"; +import { DetailData, ExtensionRequestParams, FilterProps, ListItemProps, ProcessResult } from "../types"; // ======================================== export interface ExtensionAccountHolderSearchListParams extends ExtensionRequestParams { // Request diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index c3cb2e9..37b02db 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -148,8 +148,8 @@ export interface DetailInfoSectionProps extends DetailResponse { export interface DetailData { - tid: string; - serviceCode?: string; + mid?: string; + tid?: string; detailOn: boolean; } diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx index 57b2202..1ff053f 100644 --- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx +++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx @@ -2,79 +2,81 @@ import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { ListDateGroup } from '../list-date-group'; import { AdditionalServiceCategory } from '../../model/types' -import { AccountHolderSearchListItem, AccountHolderSearchListProps } from '../../model/account-holder-search/types'; -import { JSX } from 'react'; +import { AccountHolderSearchListProps } from '../../model/account-holder-search/types'; import { useTranslation } from 'react-i18next'; export const AccountHolderSearchList = ({ - listItems, - mid + listItems, + mid, + setDetailData }: AccountHolderSearchListProps) => { - const { navigate } = useNavigate(); - const { t } = useTranslation(); + const { navigate } = useNavigate(); + const { t } = useTranslation(); - const getListDateGroup = () => { - let rs = []; - let date = ''; - let list = []; - for (let i = 0; i < listItems.length; i++) { - let items = listItems[i]; - if (!!items) { - let requestDate = items?.requestDate; - requestDate = requestDate?.substring(0, 8); - if (!!requestDate) { - if (i === 0) { - date = requestDate; - } - if (date !== requestDate) { - if (list.length > 0) { - rs.push( - - ); - } - date = requestDate; - list = []; - } - list.push(items); - } - } - } - if (list.length > 0) { - rs.push( - - ); - } - return rs; - }; + const getListDateGroup = () => { + let rs = []; + let date = ''; + let list = []; + for(let i = 0; i < listItems.length; i++){ + let items = listItems[i]; + if (!!items) { + let requestDate = items?.requestDate; + requestDate = requestDate?.substring(0, 8); + if (!!requestDate) { + if (i === 0) { + date = requestDate; + } + if(date !== requestDate){ + if (list.length > 0) { + rs.push( + + ); + } + date = requestDate; + list = []; + } + list.push(items); + } + } + } + if(list.length > 0){ + rs.push( + + ); + } + return rs; + }; - const onClickToNavigate = () => { - navigate(PATHS.additionalService.accountHolderSearch.request) - }; + const onClickToNavigate = () => { + navigate(PATHS.additionalService.accountHolderSearch.request) + }; - return ( - <> -
- {getListDateGroup()} -
-
- -
- - ); + return ( + <> +
+ {getListDateGroup()} +
+
+ +
+ + ); } \ No newline at end of file diff --git a/src/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail.tsx b/src/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail.tsx new file mode 100644 index 0000000..fb61feb --- /dev/null +++ b/src/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail.tsx @@ -0,0 +1,120 @@ +import moment from 'moment'; +import { useEffect, useState } from 'react'; +import { motion } from 'framer-motion'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '@/entities/additional-service/model/account-holder-search/types'; +import { useExtensionAccountHolderSearchDetailtMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation'; +import { getAccountHolderStatusText } from '@/entities/additional-service/model/account-holder-search/constant'; +import { useTranslation } from 'react-i18next'; +import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant'; +import { FullMenuClose } from '@/entities/common/ui/full-menu-close'; + +export interface AccountHolderSearchDetailProps { + detailOn: boolean; + setDetailOn: (detailOn: boolean) => void; + mid: string; + tid: string; +}; + +export const AccountHolderSearchDetail = ({ + detailOn, + setDetailOn, + mid, + tid +}: AccountHolderSearchDetailProps) => { + const { t } = useTranslation(); + + const [detail, setDetail] = useState(); + const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailtMutation(); + + const callDetail = () => { + let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = { + mid: mid, + tid: tid + }; + accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => { + setDetail(rs); + }); + }; + + const getDate = (date?: string) => { + return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : ''; + }; + const onClickToClose = () => { + setDetailOn(false); + }; + + useEffect(() => { + if(!!mid && !!tid){ + callDetail(); + } + }, [mid, tid]); + + return ( + <> + +
+
+
{ t('transaction.detailTitle') }
+
+ +
+
+
+
+
+ {detail?.accountNo} +
+ {detail?.bankName} +
{getDate(detail?.requestDate)}
+
+
+
+
{t('transaction.sections.detailInfo')}
+
    +
  • + {t('transaction.fields.accountHolder')} + {detail?.accountName} +
  • +
  • + {t('additionalService.accountHolderAuth.requestDate')} + {getDate(detail?.requestDate)} +
  • +
  • + {t('common.result')} + {getAccountHolderStatusText(t)(detail?.resultStatus)} +
  • +
  • + {t('transaction.fields.failureReason')} + {detail?.failReason ? detail?.failReason : '-' } +
  • +
  • + {t('transaction.fields.bank')} + {detail?.bankName} +
  • +
  • + {t('transaction.fields.accountNo')} + {detail?.accountNo} +
  • +
  • + {t('additionalService.accountHolderAuth.requestWay')} + {detail?.requestWay} +
  • +
+
+
+
+
+ + ); +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/list-date-group.tsx b/src/entities/additional-service/ui/list-date-group.tsx index fd2320f..51a304f 100644 --- a/src/entities/additional-service/ui/list-date-group.tsx +++ b/src/entities/additional-service/ui/list-date-group.tsx @@ -10,7 +10,8 @@ export const ListDateGroup = ({ mid, date, items, - onResendClick + onResendClick, + setDetailData }: ListDateGroupProps) => { const { i18n } = useTranslation(); @@ -93,6 +94,7 @@ export const ListDateGroup = ({ onResendClick={ onResendClick } seq= { items[i]?.seq} + setDetailData={ setDetailData } > ) } diff --git a/src/entities/additional-service/ui/list-item.tsx b/src/entities/additional-service/ui/list-item.tsx index 654235d..269272c 100644 --- a/src/entities/additional-service/ui/list-item.tsx +++ b/src/entities/additional-service/ui/list-item.tsx @@ -34,7 +34,8 @@ export const ListItem = ({ smsCl, groupId, userMallId, transType, authResult, failReason, requestTime, resendEnabled, - onResendClick + onResendClick, + setDetailData }: ListItemProps) => { const { navigate } = useNavigate(); const { t, i18n } = useTranslation(); @@ -169,13 +170,14 @@ export const ListItem = ({ }) } else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) { - navigate(PATHS.additionalService.accountHolderSearch.detail, { - state: { - additionalServiceCategory: additionalServiceCategory, + if(setDetailData && !!mid && !!tid){ + setDetailData({ mid: mid, - tid: tid - } - }); + tid: tid, + detailOn: true + }); + } + } else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) { navigate(PATHS.additionalService.linkPayment.detail, { diff --git a/src/entities/transaction/ui/list-item.tsx b/src/entities/transaction/ui/list-item.tsx index 3799cdb..dd925a7 100644 --- a/src/entities/transaction/ui/list-item.tsx +++ b/src/entities/transaction/ui/list-item.tsx @@ -85,7 +85,7 @@ export const ListItem = ({ const onClickToNavigate = () => { if(transactionCategory === TransactionCategory.AllTransaction){ - if(setDetailData && tid){ + if(setDetailData && !!tid){ setDetailData({ tid: tid, serviceCode: serviceCode, @@ -94,7 +94,7 @@ export const ListItem = ({ } } else if(transactionCategory === TransactionCategory.CashReceipt){ - if(setDetailData && tid){ + if(setDetailData && !!tid){ setDetailData({ tid: tid, detailOn: true @@ -102,7 +102,7 @@ export const ListItem = ({ } } else if(transactionCategory === TransactionCategory.Escrow){ - if(setDetailData && tid){ + if(setDetailData && !!tid){ setDetailData({ tid: tid, serviceCode: serviceCode, @@ -111,7 +111,7 @@ export const ListItem = ({ } } else if(transactionCategory === TransactionCategory.Billing){ - if(setDetailData && tid){ + if(setDetailData && !!tid){ setDetailData({ tid: tid, detailOn: true diff --git a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx index 3638dac..83b264e 100644 --- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx +++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx @@ -26,6 +26,7 @@ import { useTranslation } from 'react-i18next'; import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check'; import useIntersectionObserver from '@/widgets/intersection-observer'; import { snackBar } from '@/shared/lib'; +import { AccountHolderSearchDetail } from '@/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail'; export const AccountHolderSearchPage = () => { const { navigate } = useNavigate(); @@ -52,8 +53,8 @@ export const AccountHolderSearchPage = () => { const [resultStatus, setResultStatus] = useState(AccountHolderResultStatus.ALL); const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); const [detailOn, setDetailOn] = useState(false); + const [detailMid, setDetailMid] = useState(''); const [detailTid, setDetailTid] = useState(''); - const [detailServiceCode, setDetailServiceCode] = useState(''); useSetHeaderTitle(t('additionalService.services.accountHolderSearch')); useSetHeaderType(HeaderType.LeftArrow); @@ -173,11 +174,13 @@ export const AccountHolderSearchPage = () => { setResultStatus(val); }; - const setDetailDate = (detailData: DetailData) => { + const setDetailData = (detailData: DetailData) => { setDetailOn(detailData.detailOn); - setDetailTid(detailData.tid); - if(detailData?.serviceCode) { - setDetailServiceCode(detailData?.serviceCode); + if(detailData.mid){ + setDetailMid(detailData.mid); + } + if(detailData.tid){ + setDetailTid(detailData.tid); } } @@ -259,8 +262,9 @@ export const AccountHolderSearchPage = () => {
@@ -284,7 +288,12 @@ export const AccountHolderSearchPage = () => { setBank={setBank} setResultStatus={setResultStatus} > - +