110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
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>
|
|
</>
|
|
)
|
|
}; |