ars 상세 , 요청
This commit is contained in:
focp212@naver.com
@@ -1,6 +1,141 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useLocation } from 'react-router';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation';
|
||||
import {
|
||||
ExtensionArsDetailParams,
|
||||
ExtensionArsDetailResponse
|
||||
} from '@/entities/additional-service/model/ars/types';
|
||||
import moment from 'moment';
|
||||
|
||||
export const ArsDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const tid = location.state.tid;
|
||||
const mid = location.state.mid;
|
||||
const amount = location.state.amount;
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
|
||||
|
||||
const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
|
||||
const callDetail = () => {
|
||||
let params: ExtensionArsDetailParams = {
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
};
|
||||
|
||||
extensionArsDetail(params).then((rs: ExtensionArsDetailResponse) => {
|
||||
setDetail(rs);
|
||||
});
|
||||
};
|
||||
|
||||
useSetHeaderTitle('ARS 결제 상세');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.ars.list);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
callDetail();
|
||||
}, []);
|
||||
|
||||
const onClickToOpenResendBottomSheet = () => {
|
||||
|
||||
};
|
||||
|
||||
const getDate = (date?: string) => {
|
||||
return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): '';
|
||||
};
|
||||
|
||||
return (
|
||||
<></>
|
||||
<>
|
||||
<main className="full-height">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
<NumericFormat
|
||||
value={ amount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix='원'
|
||||
></NumericFormat>
|
||||
</span>
|
||||
</div>
|
||||
<div className="num-store">{ detail?.corpName }</div>
|
||||
<div className="num-day">{ getDate(detail?.paymentDate) }</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">거래 정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">MID</span>
|
||||
<span className="v">{ detail?.mid }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제방식</span>
|
||||
<span className="v">{ detail?.arsPaymentMethod }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제상태</span>
|
||||
<span className="v">{ detail?.paymentStatus }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문상태</span>
|
||||
<span className="v">{ detail?.orderStatus }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문일시</span>
|
||||
<span className="v">{ getDate(detail?.paymentDate) }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">상품명</span>
|
||||
<span className="v">{ detail?.goodsName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문번호</span>
|
||||
<span className="v">{ detail?.tid }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">구매자</span>
|
||||
<span className="v">{ detail?.buyerName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">휴대폰번호</span>
|
||||
<span className="v">{ detail?.maskPhoneNumber }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이메일</span>
|
||||
<span className="v">{ detail?.email }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">발송 인증번호</span>
|
||||
<span className="v">{ detail?.smsVerificationCode }</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToOpenResendBottomSheet() }
|
||||
>SMS 재전송</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
@@ -10,12 +10,23 @@ import {
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';
|
||||
|
||||
export const ArsRequestPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
|
||||
|
||||
const [mid, setMid] = useState<string>('');
|
||||
const [moid, setMoid] = useState<string>('');
|
||||
const [goodsName, setGoodsName] = useState<string>('');
|
||||
const [amount, setAmount] = useState<number>(0);
|
||||
const [instmntMonth, setInstmntMonth] = useState<string>('');
|
||||
const [buyerName, setBuyerName] = useState<string>('');
|
||||
const [phoneNumber, setPhoneNumber] = useState<string>('');
|
||||
const [email, setEamil] = useState<string>('');
|
||||
const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
|
||||
|
||||
useSetHeaderTitle('결제 신청');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
@@ -23,17 +34,17 @@ export const ArsRequestPage = () => {
|
||||
navigate(PATHS.additionalService.ars.list);
|
||||
});
|
||||
|
||||
const callArsRequest = () => {
|
||||
let arsApplyParams = {
|
||||
mid: 'string',
|
||||
moid: 'string',
|
||||
goodsName: 'string',
|
||||
amount: 0,
|
||||
instmntMonth: '00',
|
||||
buyerName: 'string',
|
||||
phoneNumber: 'string',
|
||||
email: 'string',
|
||||
arsPaymentMethod: 'SMS',
|
||||
const callArsApply = () => {
|
||||
let arsApplyParams: ExtensionArsApplyParams = {
|
||||
mid: mid,
|
||||
moid: moid,
|
||||
goodsName: goodsName,
|
||||
amount: amount,
|
||||
instmntMonth: instmntMonth,
|
||||
buyerName: buyerName,
|
||||
phoneNumber: phoneNumber,
|
||||
email: email,
|
||||
arsPaymentMethod: arsPaymentMethod,
|
||||
};
|
||||
arsApply(arsApplyParams).then((rs) => {
|
||||
navigate(PATHS.additionalService.ars.requestSuccess);
|
||||
@@ -47,9 +58,29 @@ export const ArsRequestPage = () => {
|
||||
};
|
||||
|
||||
const onClickToRequest = () => {
|
||||
callArsRequest();
|
||||
callArsApply();
|
||||
};
|
||||
|
||||
const getArsPaymentMethodBtns = () => {
|
||||
let rs = [];
|
||||
rs.push(
|
||||
<div
|
||||
key="ars-payment-method-btns"
|
||||
className="seg-buttons"
|
||||
>
|
||||
<button
|
||||
className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS)? 'btn-blue': 'btn-white'}`}
|
||||
onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.SMS) }
|
||||
>{ ArsPaymentMethod.SMS }</button>
|
||||
<button
|
||||
className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS)? 'btn-blue': 'btn-white'}`}
|
||||
onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.ARS) }
|
||||
>{ ArsPaymentMethod.ARS }</button>
|
||||
</div>
|
||||
);
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
@@ -73,7 +104,8 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="wadizcop0g2025062"
|
||||
value={ moid }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,7 +115,8 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="123456"
|
||||
value={ goodsName }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,7 +126,8 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="1000"
|
||||
value={ amount }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value)) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,7 +147,8 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="김테스트"
|
||||
value={ buyerName }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,7 +158,8 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="01012345678"
|
||||
value={ phoneNumber }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,7 +169,8 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="NICE@NAVER.COM"
|
||||
value={ email }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,10 +178,7 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">결제 방식 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<div className="seg-buttons">
|
||||
<button className="btn-36 btn-blue light">SMS</button>
|
||||
<button className="btn-36 btn-white light">호전환</button>
|
||||
</div>
|
||||
{ getArsPaymentMethodBtns() }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user