부가서비스 : 링크결제 발송내역,발송대기 상세페이지 추가
This commit is contained in:
HyeonJongKim
@@ -0,0 +1,62 @@
|
||||
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 { IMAGE_ROOT } from "@/shared/constants/common";
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
|
||||
export const LinkPaymentApplyConfirmPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
useSetHeaderTitle('메시지 미리보기');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToConfirm = () => {
|
||||
navigate(PATHS.additionalService.linkPayment.confirmSuccess);
|
||||
};
|
||||
|
||||
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/>
|
||||
상품명 : TEST<br/>
|
||||
금액 : 123,123원
|
||||
</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>
|
||||
<div className="home-indicator"></div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,85 @@
|
||||
import {useState} from 'react';
|
||||
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';
|
||||
import {useNavigate} from '@/shared/lib/hooks/use-navigate';
|
||||
import {PATHS} from "@/shared/constants/paths";
|
||||
|
||||
export const LinkPaymentApplyPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
|
||||
|
||||
useSetHeaderTitle('링크결제 신청');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToChangeTab = () => {
|
||||
if(processStep === ProcessStep.One) {
|
||||
setProcessStep(ProcessStep.Two);
|
||||
}
|
||||
else if(processStep === ProcessStep.Two) {
|
||||
navigate(PATHS.additionalService.linkPayment.requestConfirm)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="issue-progress">
|
||||
<div className="bar">
|
||||
{(processStep === ProcessStep.One) &&
|
||||
<div
|
||||
className="fill"
|
||||
style={{ width: '50%' }}
|
||||
></div>
|
||||
}
|
||||
{(processStep === ProcessStep.Two) &&
|
||||
<div
|
||||
className="fill"
|
||||
style={{ width: '100%' }}
|
||||
></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(processStep === ProcessStep.One) &&
|
||||
<LinkPaymentStep1 ></LinkPaymentStep1>
|
||||
}
|
||||
{ (processStep === ProcessStep.Two) &&
|
||||
<LinkPaymentStep2
|
||||
setProcessStep={ setProcessStep }
|
||||
></LinkPaymentStep2>
|
||||
}
|
||||
|
||||
</div>
|
||||
{(processStep === ProcessStep.One) &&
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToChangeTab() }
|
||||
>다음</button>
|
||||
</div>
|
||||
}
|
||||
{(processStep === ProcessStep.Two) &&
|
||||
<div className="apply-row two-button">
|
||||
<button
|
||||
className="btn-50 btn-darkgray flex-1">
|
||||
이전</button>
|
||||
<button
|
||||
className="btn-50 btn-blue flex-3"
|
||||
onClick={() => onClickToChangeTab() }
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
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 { PATHS } from "@/shared/constants/paths";
|
||||
|
||||
export const LinkPaymentApplySuccessPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
useSetHeaderTitle('링크결제 신청');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToHome = () => {
|
||||
navigate(PATHS.home);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="success-page">
|
||||
<div className="success-body">
|
||||
<div className="success-icon" aria-hidden="true"></div>
|
||||
<h1 className="success-title">
|
||||
<span>링크결제</span><br/>
|
||||
<span>결제 신청이 완료되었습니다.</span>
|
||||
</h1>
|
||||
<div className="success-result">
|
||||
<p className="result-text">
|
||||
<span>결과 :</span> <span>(성공 결과값 노출)</span><br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToHome()}
|
||||
>확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user