100 lines
4.2 KiB
TypeScript
100 lines
4.2 KiB
TypeScript
import { HeaderType } from '@/entities/common/model/types';
|
|
import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { useLocation } from 'react-router';
|
|
import { IMAGE_ROOT } from "@/shared/constants/common";
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useExtensionLinkPayRequestMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-request-mutation';
|
|
import { ExtensionLinkPayRequestParams, LinkPaymentFormData } from '@/entities/additional-service/model/link-pay/types';
|
|
|
|
export const LinkPaymentApplyConfirmPage = () => {
|
|
const { navigate } = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const formData: LinkPaymentFormData = location.state?.formData;
|
|
const { mutateAsync: linkPayRequest } = useExtensionLinkPayRequestMutation();
|
|
|
|
useSetHeaderTitle('메시지 미리보기');
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
|
|
const onClickToConfirm = () => {
|
|
if (!formData) {
|
|
console.error('Form data is missing');
|
|
return;
|
|
}
|
|
|
|
const requestParams: ExtensionLinkPayRequestParams = {
|
|
mid: formData.mid,
|
|
sendMethod: formData.sendMethod,
|
|
goodsName: formData.goodsName,
|
|
amount: formData.amount,
|
|
moid: formData.moid,
|
|
paymentExpiryDate: formData.paymentExpiryDate.replace(/\./g, ''),
|
|
buyerName: formData.buyerName,
|
|
email: formData.email,
|
|
phoneNumber: formData.phoneNumber,
|
|
isIdentity: formData.isIdentity,
|
|
identityType: formData.identityType,
|
|
identityValue: formData.identityValue,
|
|
language: formData.language,
|
|
linkContentType: formData.linkContentType
|
|
};
|
|
|
|
console.log("Link Payment 요청 파라미터: ", requestParams);
|
|
|
|
linkPayRequest(requestParams)
|
|
.then((response) => {
|
|
console.log("Link Payment 성공 응답: ", response);
|
|
navigate(PATHS.additionalService.linkPayment.confirmSuccess);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Link Payment 실패: ", error);
|
|
// 에러 처리 로직 추가 가능
|
|
});
|
|
};
|
|
|
|
const onClickToBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<main className="pop">
|
|
<div className="sub-wrap">
|
|
<div className="preview-body">
|
|
<div className="attention-icon" aria-hidden="true">
|
|
<img src={IMAGE_ROOT + '/ico_alert.svg'} alt="주의" />
|
|
</div>
|
|
<h1 className="preview-title">발송 메시지를<br/>최종 확인하세요</h1>
|
|
<div className="preview-result">
|
|
<p className="preview-text">
|
|
TEST 고객님, 안녕하세요?<br/>
|
|
나이스페이먼츠 주식회사에서 <br/>
|
|
결제하실 내역 안내드립니다.<br/>
|
|
아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.<br/><br/>
|
|
!${pay_url}<br/><br/>
|
|
<b>
|
|
가맹점 상호 : 나이스페이먼츠 주식회사<br/>
|
|
상품명 : {formData.goodsName}<br/>
|
|
금액 : {formData.amount}원
|
|
</b>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="apply-row two-button">
|
|
<button
|
|
className="btn-50 btn-darkgray flex-1"
|
|
onClick={() => onClickToBack()}
|
|
>이전</button>
|
|
<button
|
|
className="btn-50 btn-blue flex-3"
|
|
onClick={() => onClickToConfirm()}
|
|
>결제 신청</button>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}; |