nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

부가서비스 : 링크결제 발송내역,발송대기 상세페이지 추가

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-10 17:03:19 +09:00
parent a71690bad8
commit 409a711b9a
29 changed files with 1039 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/additional-service/additional-service-pages.tsx
View File

@@ -24,9 +24,11 @@ import { SettlementAgencyDetailPage } from './settlement-agency/detail-page';
import { PaymentAgencyListPage } from './payment-agency/list-page';
import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
import { PaymentAgencyRequestPage } from './payment-agency/request-page';
import { LinkPaymentApplyPage } from './link-payment/link-payment-apply-page';
import { LinkPaymentApplyConfirmPage } from './link-payment/link-payment-apply-confirm-page';
import { LinkPaymentApplySuccessPage } from './link-payment/link-payment-apply-success-page';
import { LinkPaymentApplyPage } from './link-payment/apply/link-payment-apply-page';
import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-apply-confirm-page';
import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page';
import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page';
import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page';
export const AdditionalServicePages = () => {
return (
@@ -49,6 +51,8 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.confirmSuccess} element={<LinkPaymentApplySuccessPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.detail} element={<LinkPaymentDetailPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.pendingDetail} element={<LinkPaymentPendingDetailPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />

0
src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx → src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx
View File

4
src/pages/additional-service/link-payment/link-payment-apply-page.tsx → src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx
View File

@@ -1,6 +1,6 @@
import {useState} from 'react';
import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment-step1';
import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment-step2';
import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step1';
import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step2';
import {HeaderType} from '@/entities/common/model/types';
import {ProcessStep} from '@/entities/transaction/model/types';
import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';

0
src/pages/additional-service/link-payment/link-payment-apply-success-page.tsx → src/pages/additional-service/link-payment/apply/link-payment-apply-success-page.tsx
View File

119
src/pages/additional-service/link-payment/link-payment-detail-page.tsx Normal file
View File

@@ -0,0 +1,119 @@
import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
import { HeaderType } from '@/entities/common/model/types';
import { DetailInfoSectionProps } from '@/entities/additional-service/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetOnBack,
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section';
import { overlay } from 'overlay-kit';
import { Dialog } from '@/shared/ui/dialogs/dialog';
export const LinkPaymentDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');
const [paymentInfo, setPaymentInfo] = useState<any>();
const [deetsInfo, setDeetsInfo] = useState<any>();
const [showPayment, setShowPayment] = useState<boolean>(false);
const [showDeets, setShowDeets] = useState<boolean>(false);
useSetHeaderTitle('링크결제 상세');
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
navigate(PATHS.additionalService.linkPayment.dispatchList);
});
useSetFooterMode(false);
const onClickToNavigate = (path: string) => {
let timeout = setTimeout(() => {
clearTimeout(timeout);
navigate(PATHS.additionalService.linkPayment.dispatchList, {
});
}, 10)
};
const onClickToShowInfo = () => {
setShowPayment(!showPayment);
};
const onClickToCancel = () => {
let msg = '재발송 하시겠습니까?';
overlay.open(({
isOpen,
close,
unmount
}) => {
return (
<Dialog
afterLeave={ unmount }
open={ isOpen }
onClose={ close }
onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.dispatchList) }
message={ msg }
buttonLabel={['취소', '확인']}
/>
);
});
};
return (
<>
<main className="full-height">
<div className="tab-content">
<div className="tab-pane sub active">
<div className="option-list">
<div className="txn-detail">
<div className="txn-num-group">
<div className="txn-amount">
<div className="value">5,254,000<span className="unit">원</span></div>
</div>
<div className="txn-mid">
<span className="value">나이스테스트가맹점</span>
</div>
<div className="txn-mid">
<span className="value">2025.06.08</span>
</div>
</div>
<div className="txn-divider minus"></div>
<DetailPaymentInfoSection
paymentInfo={paymentInfo}
show={showPayment}
onClickToShowInfo={onClickToShowInfo}
/>
<div className="txn-divider minus"></div>
<DetailDeetsInfoSection
deetsInfo={deetsInfo}
show={showDeets}
onClickToShowInfo={onClickToShowInfo}
/>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToCancel() }
>재발송</button>
</div>
</div>
</div>
</main>
</>
)
};

4
src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx
View File

@@ -3,9 +3,9 @@ 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-tab';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment-dispatch-list-wrap';
import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,

110
src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx Normal file
View File

@@ -0,0 +1,110 @@
import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetOnBack,
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section';
import { overlay } from 'overlay-kit';
import { Dialog } from '@/shared/ui/dialogs/dialog';
export const LinkPaymentPendingDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');
const [paymentInfo, setPaymentInfo] = useState<any>();
const [deetsInfo, setDeetsInfo] = useState<any>();
const [showPayment, setShowPayment] = useState<boolean>(false);
const [showDeets, setShowDeets] = useState<boolean>(false);
useSetHeaderTitle('링크결제 상세_발송대기');
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
navigate(PATHS.additionalService.linkPayment.pendingSend);
});
useSetFooterMode(false);
const onClickToNavigate = (path: string) => {
let timeout = setTimeout(() => {
clearTimeout(timeout);
navigate(PATHS.additionalService.linkPayment.pendingSend, {
});
}, 10)
};
const onClickToShowInfo = () => {
setShowPayment(!showPayment);
};
const onClickToCancel = () => {
let msg = '삭제 하시겠습니까?';
overlay.open(({
isOpen,
close,
unmount
}) => {
return (
<Dialog
afterLeave={ unmount }
open={ isOpen }
onClose={ close }
onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend) }
message={ msg }
buttonLabel={['취소', '확인']}
/>
);
});
};
return (
<>
<main className="full-height">
<div className="tab-content">
<div className="tab-pane sub active">
<div className="option-list">
<div className="txn-detail">
<div className="txn-num-group">
<div className="txn-amount">
<div className="value">3,500,000<span className="unit">원</span></div>
</div>
<div className="txn-mid">
<span className="value">나이스테스트가맹점</span>
</div>
<div className="txn-mid">
<span className="value">2025.06.09</span>
</div>
</div>
<div className="txn-divider minus"></div>
<DetailPaymentInfoSection
paymentInfo={paymentInfo}
show={showPayment}
onClickToShowInfo={onClickToShowInfo}
/>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToCancel() }
>삭제</button>
</div>
</div>
</div>
</main>
</>
)
};

6
src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx
View File

@@ -3,16 +3,16 @@ 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-tab';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment-pending-send-wrap';
import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-pending-send-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment-filter';
import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter';
export const LinkPaymentPendingSendPage = () => {
const { navigate } = useNavigate();