From 646aa0d3c0397f06dc7fe091b97c4ed57af30e04 Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Tue, 4 Nov 2025 13:09:02 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A7=81=ED=81=AC=EA=B2=B0=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../model/link-pay/types.ts | 6 +- .../additional-service/model/types.ts | 2 + .../detail/link-payment-history-detail.tsx | 216 ++++++++++++++++++ .../detail/link-payment-wait-detail.tsx | 141 ++++++++++++ .../link-payment-history-list.tsx | 28 +-- .../link-payment-history-wrap.tsx | 34 ++- .../link-payment/link-payment-wait-list.tsx | 28 +-- .../link-payment-wait-send-wrap.tsx | 31 ++- .../additional-service/ui/list-item.tsx | 26 +-- .../account-holder-auth-page.tsx | 2 +- .../link-payment-history-page.tsx | 1 - 11 files changed, 461 insertions(+), 54 deletions(-) create mode 100644 src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx create mode 100644 src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx diff --git a/src/entities/additional-service/model/link-pay/types.ts b/src/entities/additional-service/model/link-pay/types.ts index caaee7b..0b4da9d 100644 --- a/src/entities/additional-service/model/link-pay/types.ts +++ b/src/entities/additional-service/model/link-pay/types.ts @@ -3,7 +3,7 @@ // ======================================== import { DefaulResponsePagination, DefaultRequestPagination } from "@/entities/common/model/types"; -import { AdditionalServiceCategory, DetailInfo, ExtensionRequestParams, FilterProps, IdentityType, Language, ListItemProps, PaymentInfo, ProcessResult, TitleInfo } from "../types"; +import { AdditionalServiceCategory, DetailData, DetailInfo, ExtensionRequestParams, FilterProps, IdentityType, Language, ListItemProps, PaymentInfo, ProcessResult, TitleInfo } from "../types"; export enum LinkPaymentTabKeys { ShippingHistory = 'ShippingHistory', @@ -104,12 +104,14 @@ export interface LinkPaymentHistoryListProps { additionalServiceCategory: AdditionalServiceCategory; listItems: Array; mid: string; + setDetailData: (detailData: DetailData) => void; } export interface LinkPaymentWaitListProps { additionalServiceCategory: AdditionalServiceCategory; listItems: Array; mid: string; + setDetailData: (detailData: DetailData) => void; } export interface LinkPaymentHistoryFilterProps extends FilterProps { @@ -235,7 +237,7 @@ export interface LinkPaymentFormData { export interface ExtensionLinkPayHistoryDetailParams { mid: string; requestId: string; - subReqId: string; + subReqId?: string; } export interface ExtensionLinkPayHistoryDetailResponse { diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index 61e9f89..b1454dc 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -151,6 +151,8 @@ export interface DetailData { mid?: string; tid?: string; seq?: string; + requestId?: string; + subReqId?: string; detailOn: boolean; } diff --git a/src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx b/src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx new file mode 100644 index 0000000..0ac4576 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx @@ -0,0 +1,216 @@ +import { useEffect, useState } from 'react'; +import { PATHS } from '@/shared/constants/paths'; +import { motion } from 'framer-motion'; +import { useLocation } from 'react-router'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { HeaderType } from '@/entities/common/model/types'; +import { + useSetOnBack, + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode +} from '@/widgets/sub-layout/use-sub-layout'; +import { overlay } from 'overlay-kit'; +import { Dialog } from '@/shared/ui/dialogs/dialog'; +import { useExtensionLinkPayHistoryDetailMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation'; +import { AdditionalServiceCategory, DetailInfo, DetailResponse, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types'; +import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap'; +import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap'; +import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap'; +import { useExtensionLinkPayHistoryResendMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-resend-mutation'; +import { ExtensionLinkPayHistoryDetailParams, ExtensionLinkPayHistoryResendParams } from '@/entities/additional-service/model/link-pay/types'; +import { snackBar } from '@/shared/lib'; +import moment from 'moment'; +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 LinkPaymentHistoryDetailProps { + detailOn: boolean; + setDetailOn: (detailOn: boolean) => void; + mid: string; + requestId: string; + subReqId?: string; +}; + +export const LinkPaymentHistoryDetail = ({ + detailOn, + setDetailOn, + mid, + requestId, + subReqId +}: LinkPaymentHistoryDetailProps) => { + const { t } = useTranslation(); + const { navigate } = useNavigate(); + const location = useLocation(); + + const [titleInfo, setTitleInfo] = useState(); + const [detailInfo, setDetailInfo] = useState(); + const [paymentInfo, setPaymentInfo] = useState(); + const [detailExposure, setDetailExposure] = useState(false); + const [showPayment, setShowPayment] = useState(false); + + useSetHeaderTitle(t('additionalService.linkPayment.detailTitle')); + useSetHeaderType(HeaderType.RightClose); + useSetOnBack(() => { + navigate(-1); // Go back using browser history + }); + useSetFooterMode(false); + + const { mutateAsync: linkPayHistoryDetail } = useExtensionLinkPayHistoryDetailMutation(); + const { mutateAsync: linkPayHistoryResend } = useExtensionLinkPayHistoryResendMutation(); + + // Query detail information + const callDetail = () => { + let detailParam: ExtensionLinkPayHistoryDetailParams = { + mid: mid, + requestId: requestId, + subReqId: subReqId + } + linkPayHistoryDetail(detailParam).then((rs: DetailResponse) => { + console.log("Detail Info: ", rs) + setTitleInfo(rs.titleInfo) + setDetailInfo(rs.detailInfo) + setPaymentInfo(rs.paymentInfo) + setDetailExposure(rs.detailExposure ?? false) + }) + } + + // Resend API + const resendPayment = () => { + let resendParam: ExtensionLinkPayHistoryResendParams = { + mid: mid, + requestId: requestId, + sendMethod: paymentInfo?.sendMethod + } + linkPayHistoryResend(resendParam) + .then((response) => { + if (response.status) { + snackBar(t('additionalService.linkPayment.resendSuccess')); + callDetail(); + } else { + const errorMessage = response.error?.message || t('additionalService.linkPayment.resendFailed'); + snackBar(`[${t('common.failed')}] ${errorMessage}`); + } + }) + .catch((error) => { + const errorMessage = error?.response?.data?.error?.message || + error?.message || + t('additionalService.linkPayment.resendError'); + snackBar(`[${t('common.failed')}] ${errorMessage}`); + }); + } + + const onClickToResend = () => { + let msg = t('additionalService.linkPayment.resendConfirm'); + + overlay.open(({ + isOpen, + close, + unmount + }) => { + return ( + resendPayment()} + message={msg} + buttonLabel={[t('common.cancel'), t('common.confirm')]} + /> + ); + }); + }; + + const onClickToSeparateApproval = () => { + navigate(PATHS.additionalService.linkPayment.separateApproval, { + state: { mid, requestId } + }); + }; + + const onClickToClose = () => { + setDetailOn(false); + }; + + // Check if resend button should be enabled + const isResendEnabled = () => { + // paymentStatus must be "ACTIVE" + if (paymentInfo?.paymentStatus !== 'ACTIVE') { + return false; + } + + // paymentLimitDate must not have passed today's date + if (paymentInfo?.paymentLimitDate) { + const limitDate = moment(paymentInfo.paymentLimitDate, 'YYYYMMDD'); + const today = moment().startOf('day'); + return limitDate.isSameOrAfter(today); + } + + return false; + }; + + useEffect(() => { + if(!!mid && !!requestId){ + callDetail(); + } + }, [mid, requestId, subReqId]); + return ( + <> + +
+
+
{ t('additionalService.linkPayment.detailTitle') }
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+ + + ) +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx b/src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx new file mode 100644 index 0000000..89afbf5 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx @@ -0,0 +1,141 @@ +import { useEffect, useState } from 'react'; +import { motion } from 'framer-motion'; +import { overlay } from 'overlay-kit'; +import { Dialog } from '@/shared/ui/dialogs/dialog'; +import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap'; +import { AdditionalServiceCategory, DetailResponse, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types'; +import { useExtensionLinkPayWaitDetailMutation, } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-detail-mutation'; +import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap'; +import { useExtensionLinkPayWaitDeleteMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation'; +import { ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams, LinkPaymentProcessStatus } from '@/entities/additional-service/model/link-pay/types'; +import { snackBar } from '@/shared/lib'; +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 LinkPaymentWaitDetailProps { + detailOn: boolean; + setDetailOn: (detailOn: boolean) => void; + mid: string; + requestId: string; +}; + +export const LinkPaymentWaitDetail = ({ + detailOn, + setDetailOn, + mid, + requestId +}: LinkPaymentWaitDetailProps) => { + const { t } = useTranslation(); + const [titleInfo, setTitleInfo] = useState(); + const [paymentInfo, setPaymentInfo] = useState(); + + const { mutateAsync: linkPayWaitDetail } = useExtensionLinkPayWaitDetailMutation(); + const { mutateAsync: linkPayWaitDelete } = useExtensionLinkPayWaitDeleteMutation(); + + const callDetail = () => { + let detailParam: ExtensionLinkPayWaitDetailParams = { + mid: mid, + requestId: requestId + } + + linkPayWaitDetail(detailParam).then((rs: DetailResponse) => { + setTitleInfo(rs.titleInfo) + setPaymentInfo(rs.paymentInfo) + }) + + } + + const deletePayment = () => { + let deleteParam: ExtensionLinkPayWaitDeleteParams = { + mid: mid, + requestId: requestId + } + linkPayWaitDelete(deleteParam) + .then((rs) => { + callDetail(); + snackBar(t('additionalService.linkPayment.deleteSuccess')) + }) + .catch((error) => { + snackBar(`[${t('common.failed')}] ${error?.response?.data?.message}`) + }); + } + + const onClickToCancel = () => { + let msg = t('additionalService.linkPayment.deleteConfirm'); + + overlay.open(({ + isOpen, + close, + unmount + }) => { + return ( + deletePayment()} + message={msg} + buttonLabel={[t('common.cancel'), t('common.confirm')]} + /> + ); + }); + }; + + const onClickToClose = () => { + setDetailOn(false); + }; + + useEffect(() => { + if(!!mid && !!requestId){ + callDetail(); + } + }, [mid, requestId]); + + return ( + <> + +
+
+
{ t('additionalService.linkPayment.waitDetailTitle') }
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ + + ) +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx b/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx index b94733a..42c28fb 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx @@ -1,11 +1,11 @@ -import { JSX } from 'react'; -import { LinkPaymentHistoryListItem, LinkPaymentHistoryListProps } from '../../model/link-pay/types'; +import { LinkPaymentHistoryListProps } from '../../model/link-pay/types'; import { ListDateGroup } from '../list-date-group'; export const LinkPaymentHistoryList = ({ additionalServiceCategory, listItems, - mid + mid, + setDetailData }: LinkPaymentHistoryListProps) => { const getListDateGroup = () => { @@ -25,11 +25,12 @@ export const LinkPaymentHistoryList = ({ if (list.length > 0) { rs.push( ); } @@ -43,11 +44,12 @@ export const LinkPaymentHistoryList = ({ if (list.length > 0) { rs.push( ); } diff --git a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx index 7b83e70..a32cc83 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx @@ -7,7 +7,7 @@ import { PATHS } from "@/shared/constants/paths"; import { LinkPaymentHistoryList } from "./link-payment-history-list"; import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types'; -import { AdditionalServiceCategory, ProcessResult } from "../../model/types"; +import { AdditionalServiceCategory, DetailData, ProcessResult } from "../../model/types"; import { useExtensionLinkPayHistoryListMutation } from '../../api/link-payment/use-extension-link-pay-history-list-mutation'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation'; @@ -16,6 +16,7 @@ import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaym import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import useIntersectionObserver from '@/widgets/intersection-observer'; import { useTranslation } from 'react-i18next'; +import { LinkPaymentHistoryDetail } from './detail/link-payment-history-detail'; const getPaymentResultBtnGroup = (t: any) => [ { name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL }, @@ -47,6 +48,10 @@ export const LinkPaymentHistoryWrap = () => { const [sendStatus, setSendStatus] = useState(LinkPaymentSendStatus.ALL); const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL); const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); + const [detailOn, setDetailOn] = useState(false); + const [detailMid, setDetailMid] = useState(''); + const [detailRequestId, setDetailRequestId] = useState(''); + const [detailSubReqId, setDetailSubReqId] = useState(''); const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation(); const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation(); @@ -163,6 +168,19 @@ export const LinkPaymentHistoryWrap = () => { setFilterOn(!filterOn); }; + const setDetailData = (detailData: DetailData) => { + setDetailOn(detailData.detailOn); + if(detailData.mid){ + setDetailMid(detailData.mid); + } + if(detailData.requestId){ + setDetailRequestId(detailData.requestId); + } + if(detailData.subReqId){ + setDetailSubReqId(detailData.subReqId); + } + }; + useEffect(() => { callList(); }, [ @@ -232,9 +250,10 @@ export const LinkPaymentHistoryWrap = () => {
@@ -263,6 +282,13 @@ export const LinkPaymentHistoryWrap = () => { setSendStatus={setSendStatus} setSendMethod={setSendMethod} > + { const getListDateGroup = () => { @@ -25,11 +25,12 @@ export const LinkPaymentWaitList = ({ if (list.length > 0) { rs.push( ); } @@ -43,11 +44,12 @@ export const LinkPaymentWaitList = ({ if (list.length > 0) { rs.push( ); } diff --git a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx index 23730ab..4999afd 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx @@ -5,7 +5,7 @@ import { LinkPaymentWaitSendFilter } from "./filter/link-payment-pending-send-fi import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PATHS } from "@/shared/constants/paths"; import { LinkPaymentWaitList } from "./link-payment-wait-list"; -import { AdditionalServiceCategory } from "../../model/types"; +import { AdditionalServiceCategory, DetailData } from "../../model/types"; import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types'; import { useExtensionLinkPayWaitListMutation } from '../../api/link-payment/use-extension-link-pay-wait-list-mutation'; @@ -14,11 +14,10 @@ import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-pay import { useStore } from '@/shared/model/store'; import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types'; import { getProcessStatusBtnGroup } from '../../model/link-pay/constant'; -import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import useIntersectionObserver from '@/widgets/intersection-observer'; import { useTranslation } from 'react-i18next'; - +import { LinkPaymentWaitDetail } from './detail/link-payment-wait-detail'; export const LinkPaymentWaitSendWrap = () => { @@ -39,6 +38,9 @@ export const LinkPaymentWaitSendWrap = () => { const [listItems, setListItems] = useState>([]); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); + const [detailOn, setDetailOn] = useState(false); + const [detailMid, setDetailMid] = useState(''); + const [detailRequestId, setDetailRequestId] = useState(''); const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation(); const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation(); @@ -143,6 +145,16 @@ export const LinkPaymentWaitSendWrap = () => { setSortType(sort); }; + const setDetailData = (detailData: DetailData) => { + setDetailOn(detailData.detailOn); + if(detailData.mid){ + setDetailMid(detailData.mid); + } + if(detailData.requestId){ + setDetailRequestId(detailData.requestId); + } + }; + const onClickSendingStatus = (val: LinkPaymentProcessStatus) => { setProcessStatus(val); }; @@ -214,9 +226,10 @@ export const LinkPaymentWaitSendWrap = () => {
@@ -243,6 +256,12 @@ export const LinkPaymentWaitSendWrap = () => { setSendMethod={setSendMethod} setProcessStatus={setProcessStatus} > + { if(detailData.tid){ setDetailTid(detailData.tid); } - } + }; const onClickToOpenEmailBottomSheet = () => { diff --git a/src/pages/additional-service/link-payment/link-payment-history-page.tsx b/src/pages/additional-service/link-payment/link-payment-history-page.tsx index 9314bac..135858f 100644 --- a/src/pages/additional-service/link-payment/link-payment-history-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-history-page.tsx @@ -1,7 +1,6 @@ import { PATHS } from '@/shared/constants/paths'; import { useState } from 'react'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { IMAGE_ROOT } from '@/shared/constants/common'; import { HeaderType } from '@/entities/common/model/types'; import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab'; import { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';