Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web
This commit is contained in:
focp212@naver.com
@@ -17,6 +17,7 @@ import moment from 'moment';
|
||||
import NiceCalendar from '@/shared/ui/calendar/nice-calendar';
|
||||
import { notiBar, snackBar } from '@/shared/lib';
|
||||
import { BillingChargeParams, BillingChargeResponse } from '@/entities/transaction/model/types';
|
||||
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
|
||||
|
||||
export const BillingChargePage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
@@ -31,7 +32,7 @@ export const BillingChargePage = () => {
|
||||
const [installmentMonth, setInstallmentMonth] = useState<string>('00');
|
||||
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
|
||||
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
|
||||
|
||||
useSetHeaderTitle(t('billing.charge'));
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
@@ -51,26 +52,26 @@ export const BillingChargePage = () => {
|
||||
};
|
||||
|
||||
const onClickToBillingCharge = () => {
|
||||
if(!billKey){
|
||||
if (!billKey) {
|
||||
showAlert('빌키는 필수 입력 항목입니다.');
|
||||
return;
|
||||
}
|
||||
else if(!productName){
|
||||
else if (!productName) {
|
||||
showAlert('상품명은 필수 입력 항목입니다.');
|
||||
}
|
||||
else if(!productAmount){
|
||||
else if (!productAmount) {
|
||||
showAlert('상품금액은 필수 입력 항목입니다.');
|
||||
}
|
||||
else if(productAmount <= 0){
|
||||
else if (productAmount <= 0) {
|
||||
showAlert('상품금액은 0보다 커야 합니다.');
|
||||
}
|
||||
else if(!orderNumber){
|
||||
else if (!orderNumber) {
|
||||
showAlert('주문번호는 필수 입력 항목입니다.');
|
||||
}
|
||||
else if(!buyerName){
|
||||
else if (!buyerName) {
|
||||
showAlert('구매자명은 필수 입력 항목입니다.');
|
||||
}
|
||||
|
||||
|
||||
let params: BillingChargeParams = {
|
||||
billKey: billKey,
|
||||
productName: productName,
|
||||
@@ -81,12 +82,12 @@ export const BillingChargePage = () => {
|
||||
installmentMonth: installmentMonth
|
||||
};
|
||||
billingCharge(params).then((rs: BillingChargeResponse) => {
|
||||
snackBar('결제 신청을 성공하였습니다.', function(){
|
||||
snackBar('결제 신청을 성공하였습니다.', function () {
|
||||
navigate(PATHS.transaction.billing.list);
|
||||
}, 3000);
|
||||
|
||||
|
||||
}).catch((e: any) => {
|
||||
if(e.response?.data?.error?.message){
|
||||
if (e.response?.data?.error?.message) {
|
||||
showAlert(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
@@ -95,32 +96,32 @@ export const BillingChargePage = () => {
|
||||
|
||||
const onChangeBillKey = (value: string) => {
|
||||
const pattern = /^[A-Za-z0-9]+$/;
|
||||
if(pattern.test(value) || value === ''){
|
||||
if (pattern.test(value) || value === '') {
|
||||
setBillKey(value);
|
||||
}
|
||||
};
|
||||
|
||||
const makeInstallmentMonthSelect = () => {
|
||||
let rs = [];
|
||||
|
||||
|
||||
rs.push(
|
||||
<option
|
||||
key={ `key-installment` }
|
||||
<option
|
||||
key={`key-installment`}
|
||||
value=''
|
||||
>선택</option>
|
||||
);
|
||||
rs.push(
|
||||
<option
|
||||
key={ `key-installment-0` }
|
||||
<option
|
||||
key={`key-installment-0`}
|
||||
value='00'
|
||||
>일시불</option>
|
||||
);
|
||||
for(let i=2;i<=24;i++){
|
||||
let val = (i < 10)? '0'+i: ''+i;
|
||||
for (let i = 2; i <= 24; i++) {
|
||||
let val = (i < 10) ? '0' + i : '' + i;
|
||||
rs.push(
|
||||
<option
|
||||
key={ `key-installment-${i}`}
|
||||
value={ val }
|
||||
<option
|
||||
key={`key-installment-${i}`}
|
||||
value={val}
|
||||
>{i}개월</option>
|
||||
);
|
||||
};
|
||||
@@ -138,20 +139,22 @@ export const BillingChargePage = () => {
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">빌키 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ billKey }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeBillKey(e.target.value) }
|
||||
<input
|
||||
type="text"
|
||||
value={billKey}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeBillKey(e.target.value)}
|
||||
onFocus={handleInputFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">상품명 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ productName }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
|
||||
<input
|
||||
type="text"
|
||||
value={productName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
|
||||
onFocus={handleInputFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,30 +162,33 @@ export const BillingChargePage = () => {
|
||||
<div className="billing-label">상품금액 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<NumericFormat
|
||||
value={ productAmount }
|
||||
allowNegative={ false }
|
||||
value={productAmount}
|
||||
allowNegative={false}
|
||||
displayType="input"
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value)) }
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value))}
|
||||
onFocus={handleInputFocus}
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">주문번호 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ orderNumber }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
|
||||
<input
|
||||
type="text"
|
||||
value={orderNumber}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
|
||||
onFocus={handleInputFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">구매자명 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ buyerName }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
|
||||
<input
|
||||
type="text"
|
||||
value={buyerName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
|
||||
onFocus={handleInputFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,16 +200,16 @@ export const BillingChargePage = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ paymentRequestDate }
|
||||
readOnly={ true }
|
||||
value={paymentRequestDate}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="date-btn"
|
||||
type="button"
|
||||
onClick={ () => onClickToOpenCalendar() }
|
||||
onClick={() => onClickToOpenCalendar()}
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_date.svg'}
|
||||
alt="clear"
|
||||
/>
|
||||
</button>
|
||||
@@ -211,33 +217,33 @@ export const BillingChargePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-row" style={keyboardAwarePadding}>
|
||||
<div className="billing-label">할부 개월</div>
|
||||
<div className="billing-field">
|
||||
<select
|
||||
value={ installmentMonth }
|
||||
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value) }
|
||||
value={installmentMonth}
|
||||
onChange={(e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value)}
|
||||
>
|
||||
{ makeInstallmentMonthSelect() }
|
||||
{makeInstallmentMonthSelect()}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToBillingCharge() }
|
||||
onClick={() => onClickToBillingCharge()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<NiceCalendar
|
||||
calendarOpen={ calendarOpen }
|
||||
setCalendarOpen={ setCalendarOpen }
|
||||
calendarType={ CalendarType.Single }
|
||||
setNewDate={ setNewDate }
|
||||
calendarOpen={calendarOpen}
|
||||
setCalendarOpen={setCalendarOpen}
|
||||
calendarType={CalendarType.Single}
|
||||
setNewDate={setNewDate}
|
||||
></NiceCalendar>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user