116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
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";
|
|
import { LinkPaymentFormData, IdentityType, Language, LinkContentType, LinkPaymentSendMethod } from '@/entities/additional-service/model/types';
|
|
|
|
|
|
|
|
export const LinkPaymentApplyPage = () => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
|
|
const [formData, setFormData] = useState<LinkPaymentFormData>({
|
|
mid: 'nictest001m',
|
|
sendMethod: LinkPaymentSendMethod.SMS,
|
|
goodsName: '',
|
|
amount: 0,
|
|
moid: '',
|
|
paymentExpiryDate: '',
|
|
buyerName: '',
|
|
email: '',
|
|
phoneNumber: '',
|
|
isIdentity: false,
|
|
identityType: IdentityType.INDIVIDUAL,
|
|
identityValue: '',
|
|
language: Language.KR,
|
|
linkContentType: LinkContentType.BASIC
|
|
});
|
|
|
|
useSetHeaderTitle('링크결제 신청');
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
|
|
const onClickToBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const onClickToChangeTab = () => {
|
|
if(processStep === ProcessStep.One) {
|
|
setProcessStep(ProcessStep.Two);
|
|
}
|
|
else if(processStep === ProcessStep.Two) {
|
|
navigate(PATHS.additionalService.linkPayment.requestConfirm, {
|
|
state: { formData }
|
|
});
|
|
}
|
|
};
|
|
|
|
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
|
|
formData={formData}
|
|
setFormData={setFormData}
|
|
></LinkPaymentStep1>
|
|
}
|
|
{ (processStep === ProcessStep.Two) &&
|
|
<LinkPaymentStep2
|
|
setProcessStep={ setProcessStep }
|
|
formData={formData}
|
|
setFormData={setFormData}
|
|
></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"
|
|
onClick={() => onClickToBack() }
|
|
>이전</button>
|
|
<button
|
|
className="btn-50 btn-blue flex-3"
|
|
onClick={() => onClickToChangeTab() }
|
|
>결제 신청</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}; |