199 lines
8.5 KiB
TypeScript
199 lines
8.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { HeaderType } from '@/entities/common/model/types';
|
|
import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
|
|
import {
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode,
|
|
useSetOnBack
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
import { number } from 'framer-motion';
|
|
|
|
export const KeyInPaymentRequestPage = () => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
|
|
|
|
useSetHeaderTitle('KEY-IN 결제');
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.additionalService.keyInPayment.list);
|
|
});
|
|
|
|
const callKeyInPaymentRequest = () => {
|
|
let keyInApplyParams = {
|
|
mid: 'string',
|
|
goodsName: 'string',
|
|
amount: 0,
|
|
buyerName: 'string',
|
|
email: 'string',
|
|
phoneNumber: 'string',
|
|
cardNo: 'string',
|
|
cardExpirationDate: 'string',
|
|
instmntMonth: 'string',
|
|
moid: 'SMS',
|
|
};
|
|
keyInApply(keyInApplyParams).then((rs) => {
|
|
navigate(PATHS.additionalService.keyInPayment.requestSuccess);
|
|
console.log(rs)
|
|
}).catch(() => {
|
|
|
|
}).finally(() => {
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onClickToRequest = () => {
|
|
callKeyInPaymentRequest();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<main>
|
|
<div className="tab-content">
|
|
<div className="tab-pane sub active">
|
|
<div className="option-list">
|
|
<div className="billing-form gap-16">
|
|
<div className="billing-row">
|
|
<div className="billing-label">가맹점 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<select
|
|
className="wid-100"
|
|
>
|
|
<option>nictest001m</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">상품명 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">상품가격 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">구매자명 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">구매자 이메일 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="email"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">구매자 전화번호 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="tel"
|
|
value=""
|
|
placeholder=" '-' 제외하고 입력"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">카드번호 <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">유효기간(월/년)<span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
placeholder='MM/YY'
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">할부 기간<span>*</span></div>
|
|
<div className="billing-field">
|
|
<select
|
|
className="wid-100"
|
|
>
|
|
<option>일시불</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">주문번호</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="apply-row">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
onClick={() => onClickToRequest() }
|
|
>결제 신청</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
} |