425 lines
22 KiB
TypeScript
425 lines
22 KiB
TypeScript
import { ChangeEvent, useState } from 'react';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useLocation } from 'react-router';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
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 { useStore } from '@/shared/model/store';
|
|
import { snackBar } from '@/shared/lib';
|
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { showAlert } from '@/widgets/show-alert';
|
|
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
|
|
|
|
export const KeyInPaymentRequestPage = () => {
|
|
const { t } = useTranslation();
|
|
const { navigate } = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const userMid = useStore.getState().UserStore.mid;
|
|
const midOptions = useStore.getState().UserStore.selectOptionsMids
|
|
|
|
const [mid, setMid] = useState<string>(userMid || '');
|
|
const [productName, setProductName] = useState<string>('');
|
|
const [amount, setAmount] = useState<number>(0);
|
|
const [customerName, setCustomerName] = useState<string>('');
|
|
const [email, setEmail] = useState<string>('');
|
|
const [phoneNumber, setPhoneNumber] = useState<string>('');
|
|
const [cardNo1, setCardNo1] = useState<string>('');
|
|
const [cardNo2, setCardNo2] = useState<string>('');
|
|
const [cardNo3, setCardNo3] = useState<string>('');
|
|
const [cardNo4, setCardNo4] = useState<string>('');
|
|
const [expMon, setExpMon] = useState<string>('');
|
|
const [expYear, setExpYear] = useState<string>('');
|
|
const [instmnt, setInstmnt] = useState<string>('00');
|
|
const [orderNumber, setOrderNumber] = useState<string>('');
|
|
|
|
const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
|
|
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
|
|
|
|
useSetHeaderTitle(t('additionalService.keyIn.title'));
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.additionalService.keyInPayment.list);
|
|
});
|
|
|
|
const resetForm = () => {
|
|
setProductName('');
|
|
setAmount(0);
|
|
setCustomerName('');
|
|
setEmail('');
|
|
setPhoneNumber('');
|
|
setCardNo1('');
|
|
setCardNo2('');
|
|
setCardNo3('');
|
|
setCardNo4('');
|
|
setExpMon('');
|
|
setExpYear('');
|
|
setInstmnt('00');
|
|
setOrderNumber('');
|
|
};
|
|
|
|
const callKeyInPaymentRequest = () => {
|
|
const cardNo = `${cardNo1}${cardNo2}${cardNo3}${cardNo4}`;
|
|
const cardExpire = `${expMon}${expYear}`
|
|
let keyInApplyParams = {
|
|
mid: mid,
|
|
cardNo: cardNo,
|
|
cardExpire: cardExpire,
|
|
instmnt: instmnt,
|
|
amount: amount,
|
|
productName: productName,
|
|
orderNumber: orderNumber,
|
|
customerName: customerName,
|
|
phoneNumber: phoneNumber,
|
|
email: email,
|
|
};
|
|
|
|
keyInApply(keyInApplyParams).then((rs) => {
|
|
console.log('KEY-IN 결제 응답:', rs);
|
|
console.log('rs.data:', rs.data);
|
|
console.log('rs.data?.resultMessage:', rs.data?.resultMessage);
|
|
|
|
if (rs.status && rs.data?.success) {
|
|
// 성공: 화면 유지 & 입력 내용 초기화
|
|
snackBar(t('additionalService.keyIn.requestSuccess'))
|
|
resetForm();
|
|
} else {
|
|
// 실패: 화면 유지 & 입력 내용 유지
|
|
const errorMessage = rs.data?.resultMessage ||
|
|
rs.error?.message ||
|
|
rs.resultMessage ||
|
|
t('additionalService.keyIn.requestFailed');
|
|
console.log('최종 errorMessage:', errorMessage);
|
|
// HTML 태그 제거
|
|
const cleanMessage = errorMessage.replace(/<br\s*\/?>/gi, ' ').trim();
|
|
snackBar(`[${t('common.failed')}] ${cleanMessage}`);
|
|
}
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
const errorMessage = error?.response?.data?.data?.resultMessage ||
|
|
error?.response?.data?.error?.message ||
|
|
error?.message ||
|
|
t('additionalService.keyIn.requestError');
|
|
if (error.response?.data?.error?.root !== "SystemErrorCode") {
|
|
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
|
} else {
|
|
showAlert(`[${t('common.failed')}] ${errorMessage}`)
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
const isValidPhoneNumber = (phone: string) => {
|
|
const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
|
|
return phoneRegex.test(phone);
|
|
};
|
|
|
|
const isValidEmail = (email: string) => {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
};
|
|
|
|
const isValidCardNumber = () => {
|
|
// 실제 숫자만 추출 (포맷팅 문자 제거)
|
|
const cleanCardNo1 = cardNo1.replace(/\D/g, '');
|
|
const cleanCardNo2 = cardNo2.replace(/\D/g, '');
|
|
const cleanCardNo3 = cardNo3.replace(/\D/g, '');
|
|
const cleanCardNo4 = cardNo4.replace(/\D/g, '');
|
|
|
|
return cleanCardNo1.length === 4 && cleanCardNo2.length === 4 &&
|
|
cleanCardNo3.length === 4 && cleanCardNo4.length === 4;
|
|
};
|
|
|
|
const isFormValid = () => {
|
|
return (
|
|
mid.trim() !== '' &&
|
|
productName.trim() !== '' &&
|
|
amount > 0 &&
|
|
customerName.trim() !== '' &&
|
|
expMon.trim() !== '' &&
|
|
expYear.trim() !== '' &&
|
|
orderNumber.trim() !== '' &&
|
|
isValidEmail(email) &&
|
|
isValidPhoneNumber(phoneNumber) &&
|
|
isValidCardNumber()
|
|
);
|
|
};
|
|
|
|
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">{t('additionalService.keyIn.merchant')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<select
|
|
value={mid}
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
|
|
>
|
|
{
|
|
midOptions.map((value) => (
|
|
<option
|
|
key={value.value}
|
|
value={value.value}
|
|
>{value.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.productName')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={productName}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.productPrice')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<NumericFormat
|
|
value={amount}
|
|
thousandSeparator={true}
|
|
allowNegative={false}
|
|
displayType="input"
|
|
onValueChange={(values) => {
|
|
const { floatValue } = values;
|
|
setAmount(floatValue ?? 0);
|
|
}}
|
|
></NumericFormat>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.buyerName')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={customerName}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomerName(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.buyerEmail')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
|
|
className={email && !isValidEmail(email) ? 'error' : ''}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.buyerPhoneNumber')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="tel"
|
|
value={phoneNumber}
|
|
placeholder={t('additionalService.keyIn.phoneNumberPlaceholder')}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
|
const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
|
|
setPhoneNumber(onlyNumbers);
|
|
}}
|
|
className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
maxLength={11}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.cardNumber')} <span>*</span></div>
|
|
</div>
|
|
<div className="billing-row" style={{ gap: '10px'}}>
|
|
<div className="billing-field">
|
|
<PatternFormat
|
|
className='card-format-input'
|
|
value={cardNo1}
|
|
allowEmptyFormatting
|
|
valueIsNumericString
|
|
format="####"
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo1(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
>
|
|
</PatternFormat>
|
|
</div>
|
|
<div className="billing-field">
|
|
<PatternFormat
|
|
className='card-format-input'
|
|
value={cardNo2}
|
|
allowEmptyFormatting
|
|
valueIsNumericString
|
|
format="####"
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo2(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
>
|
|
</PatternFormat>
|
|
</div>
|
|
<div className="billing-field">
|
|
<PatternFormat
|
|
className='card-format-input'
|
|
value={cardNo3}
|
|
allowEmptyFormatting
|
|
valueIsNumericString
|
|
format="####"
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo3(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
>
|
|
</PatternFormat>
|
|
</div>
|
|
<div className="billing-field">
|
|
<PatternFormat
|
|
className='card-format-input'
|
|
value={cardNo4}
|
|
allowEmptyFormatting
|
|
valueIsNumericString
|
|
format="####"
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo4(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
>
|
|
</PatternFormat>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.expiryDate')}<span>*</span></div>
|
|
<div className="billing-field" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
|
<PatternFormat
|
|
placeholder='MM'
|
|
value={expMon}
|
|
valueIsNumericString
|
|
format='##'
|
|
isAllowed={(values) => {
|
|
const { value } = values;
|
|
if (!value) return true;
|
|
const numValue = parseInt(value);
|
|
return numValue >= 1 && numValue <= 12;
|
|
}}
|
|
onValueChange={(values) => {
|
|
const { value } = values;
|
|
setExpMon(value);
|
|
}}
|
|
onFocus={handleInputFocus}
|
|
onBlur={() => {
|
|
if (expMon.length === 1 && parseInt(expMon) >= 1 && parseInt(expMon) <= 9) {
|
|
setExpMon(expMon.padStart(2, '0'));
|
|
}
|
|
}}
|
|
style={{ flex: 1 }}
|
|
inputMode="numeric"
|
|
/>
|
|
<span>/</span>
|
|
<PatternFormat
|
|
placeholder='YY'
|
|
value={expYear}
|
|
valueIsNumericString
|
|
format='##'
|
|
onValueChange={(values) => {
|
|
const { value } = values;
|
|
setExpYear(value);
|
|
}}
|
|
onFocus={handleInputFocus}
|
|
style={{ flex: 1 }}
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.keyIn.installmentPeriod')}<span>*</span></div>
|
|
<div className="billing-field">
|
|
<select
|
|
disabled={amount < 50000}
|
|
value={instmnt}
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmnt(e.target.value)}
|
|
>
|
|
<option value="00">{t('additionalService.keyIn.lumpSum')}</option>
|
|
{amount >= 50000 && (
|
|
<>
|
|
<option value="02">2개월</option>
|
|
<option value="03">3개월</option>
|
|
<option value="04">4개월</option>
|
|
<option value="05">5개월</option>
|
|
<option value="06">6개월</option>
|
|
<option value="07">7개월</option>
|
|
<option value="08">8개월</option>
|
|
<option value="09">9개월</option>
|
|
<option value="10">10개월</option>
|
|
<option value="11">11개월</option>
|
|
<option value="12">12개월</option>
|
|
<option value="13">13개월</option>
|
|
<option value="14">14개월</option>
|
|
<option value="15">15개월</option>
|
|
<option value="16">16개월</option>
|
|
<option value="17">17개월</option>
|
|
<option value="18">18개월</option>
|
|
<option value="19">19개월</option>
|
|
<option value="20">20개월</option>
|
|
<option value="21">21개월</option>
|
|
<option value="22">22개월</option>
|
|
<option value="23">23개월</option>
|
|
<option value="24">24개월</option>
|
|
</>
|
|
)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="billing-row"
|
|
style={keyboardAwarePadding}
|
|
>
|
|
<div className="billing-label">{t('additionalService.keyIn.orderNumber')}<span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={orderNumber}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="apply-row">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
onClick={() => onClickToRequest()}
|
|
disabled={!isFormValid()}
|
|
>{t('additionalService.keyIn.paymentRequest')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
} |