431 lines
17 KiB
TypeScript
431 lines
17 KiB
TypeScript
import { ChangeEvent, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useLocation } from 'react-router';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/ars/use-extension-ars-apply-mutation';
|
|
import { HeaderType } from '@/entities/common/model/types';
|
|
import {
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode,
|
|
useSetOnBack
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
import { ArsPaymentMethod, ExtensionArsApplyParams, ExtensionArsApplyResponse } from '@/entities/additional-service/model/ars/types';
|
|
import { ArsRequestSuccessPage } from './request-success-page';
|
|
import { useStore } from '@/shared/model/store';
|
|
import { snackBar } from '@/shared/lib';
|
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
import { showAlert } from '@/widgets/show-alert';
|
|
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
|
|
|
|
export const ArsRequestPage = () => {
|
|
const { t } = useTranslation();
|
|
const { navigate } = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const midOptions = useStore.getState().UserStore.selectOptionsMids
|
|
|
|
const { mid: receivedMid } = location.state || {};
|
|
|
|
const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
|
|
|
|
const [mid, setMid] = useState<string>(receivedMid || '');
|
|
const [moid, setMoid] = useState<string>('');
|
|
const [goodsName, setGoodsName] = useState<string>('');
|
|
const [amount, setAmount] = useState<number>(0);
|
|
const [instmntMonth, setInstmntMonth] = useState<string>('00');
|
|
const [buyerName, setBuyerName] = useState<string>('');
|
|
const [isComposing, setIsComposing] = useState<boolean>(false);
|
|
const [phoneNumber, setPhoneNumber] = useState<string>('');
|
|
const [email, setEamil] = useState<string>('');
|
|
const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
|
|
const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
|
|
const [resultMessage, setResultMessage] = useState<string>('');
|
|
|
|
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
|
|
|
|
useSetHeaderTitle(t('additionalService.ars.paymentRequest'));
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.additionalService.ars.list);
|
|
});
|
|
|
|
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: ExtensionArsApplyResponse) => {
|
|
if(rs.status){
|
|
setSuccessPageOn(true);
|
|
}
|
|
else{
|
|
const errorMessage = rs.error?.message || t('additionalService.ars.requestFailed');
|
|
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
|
}
|
|
}).catch((e) => {
|
|
const errorMsg = e?.response?.data?.message || e?.response?.data?.error?.message || t('additionalService.ars.requestFailed');
|
|
if (e.response?.data?.error?.root !== "SystemErrorCode") {
|
|
snackBar(`[${t('common.failed')}] ${errorMsg}`);
|
|
}
|
|
else{
|
|
showAlert(`[${t('common.failed')}] ${errorMsg}`)
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
const onClickToRequest = () => {
|
|
callArsApply();
|
|
};
|
|
|
|
const isValidPhoneNumber = (phone: string) => {
|
|
// 한국 휴대폰 번호: 010, 011, 016, 017, 018, 019로 시작, 10-11자리
|
|
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 isFormValid = () => {
|
|
return (
|
|
mid.trim() !== '' &&
|
|
moid.trim() !== '' &&
|
|
goodsName.trim() !== '' &&
|
|
amount > 0 &&
|
|
buyerName.trim() !== '' &&
|
|
isValidPhoneNumber(phoneNumber)
|
|
);
|
|
};
|
|
|
|
const getMaskedPhoneNumber = (phone: string) => {
|
|
// 7자리 이하면 그대로 표시
|
|
if (phone.length <= 7) {
|
|
return phone;
|
|
}
|
|
// 7자리 초과면 마지막 4자리 마스킹
|
|
const visiblePart = phone.slice(0, -4);
|
|
return visiblePart + '****';
|
|
};
|
|
|
|
const getMaskedEmail = (email: string) => {
|
|
const atIndex = email.indexOf('@');
|
|
|
|
// @가 없거나 앞부분이 2자리 이하면 그대로 표시
|
|
if (atIndex === -1 || atIndex <= 2) {
|
|
return email;
|
|
}
|
|
|
|
// 앞 2자리만 보이고 나머지는 마스킹
|
|
const visiblePart = email.slice(0, 2);
|
|
const domainPart = email.slice(atIndex);
|
|
const maskedLength = atIndex - 2;
|
|
const masked = '*'.repeat(maskedLength);
|
|
|
|
return visiblePart + masked + domainPart;
|
|
};
|
|
|
|
const getMaskedName = (name: string) => {
|
|
const length = name.length;
|
|
|
|
// 1글자면 그대로 표시
|
|
if (length <= 1) {
|
|
return name;
|
|
}
|
|
|
|
// 2글자면 첫 글자만 표시 (한글: 홍*, 영문: j*)
|
|
if (length === 2) {
|
|
return name[0] + '*';
|
|
}
|
|
|
|
// 3글자면 가운데 마스킹 (한글: 홍*동, 영문: j*n)
|
|
if (length === 3) {
|
|
return name[0] + '*' + name[2];
|
|
}
|
|
|
|
// 4글자 이상이면 첫글자와 마지막글자만 표시, 나머지는 마스킹 (한글: 선**녀, 영문: j***n)
|
|
const firstChar = name[0];
|
|
const lastChar = name[length - 1];
|
|
const maskedLength = length - 2;
|
|
const masked = '*'.repeat(maskedLength);
|
|
|
|
return firstChar + masked + lastChar;
|
|
};
|
|
|
|
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>
|
|
<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.ars.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.ars.orderNumber')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={moid}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.ars.productName')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={goodsName}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.ars.amount')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<NumericFormat
|
|
value={amount}
|
|
thousandSeparator={true}
|
|
allowNegative={false}
|
|
displayType="input"
|
|
onValueChange={(values) => {
|
|
const { floatValue } = values;
|
|
setAmount(floatValue ?? 0);
|
|
}}
|
|
onFocus={handleInputFocus}
|
|
></NumericFormat>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.ars.installmentPeriod')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<select
|
|
disabled
|
|
value={instmntMonth}
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmntMonth(e.target.value)}
|
|
>
|
|
<option value="00">{t('additionalService.ars.lumpSum')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.ars.buyerName')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={isComposing ? buyerName : getMaskedName(buyerName)}
|
|
placeholder='홍*동'
|
|
onKeyDown={(e) => {
|
|
// 스페이스바 입력 차단
|
|
if (e.key === ' ') {
|
|
e.preventDefault();
|
|
}
|
|
// 백스페이스 처리 (composition 중이 아닐 때만)
|
|
else if (e.key === 'Backspace' && !isComposing) {
|
|
e.preventDefault();
|
|
setBuyerName(buyerName.slice(0, -1));
|
|
}
|
|
// 영문자 입력 처리 (composition 중이 아닐 때만)
|
|
else if (!isComposing && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
|
|
if (/^[a-zA-Z]$/.test(e.key)) {
|
|
e.preventDefault();
|
|
setBuyerName(buyerName + e.key);
|
|
}
|
|
// 한글이 아닌 다른 문자는 차단
|
|
else if (!/^[ㄱ-ㅎㅏ-ㅣ가-힣]$/.test(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}}
|
|
onCompositionStart={() => setIsComposing(true)}
|
|
onCompositionEnd={(e: any) => {
|
|
setIsComposing(false);
|
|
// 스페이스 제거 후 저장
|
|
const valueWithoutSpace = e.target.value.replace(/\s/g, '');
|
|
setBuyerName(valueWithoutSpace);
|
|
}}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
|
// composition 중에는 스페이스 제거
|
|
if (isComposing) {
|
|
const valueWithoutSpace = e.target.value.replace(/\s/g, '');
|
|
setBuyerName(valueWithoutSpace);
|
|
}
|
|
}}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.ars.phoneNumber')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="tel"
|
|
value={getMaskedPhoneNumber(phoneNumber)}
|
|
placeholder='0101234****'
|
|
onKeyDown={(e) => {
|
|
// 백스페이스 처리
|
|
if (e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
setPhoneNumber(phoneNumber.slice(0, -1));
|
|
}
|
|
// 숫자 입력 처리
|
|
else if (/^[0-9]$/.test(e.key)) {
|
|
e.preventDefault();
|
|
if (phoneNumber.length < 11) {
|
|
setPhoneNumber(phoneNumber + e.key);
|
|
}
|
|
}
|
|
}}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
|
// Android 등에서 한글 키보드로 입력 시 대비
|
|
const input = e.target.value;
|
|
const digitsOnly = input.replace(/\*/g, '').replace(/[^0-9]/g, '');
|
|
|
|
if (digitsOnly.length <= 11) {
|
|
setPhoneNumber(digitsOnly);
|
|
}
|
|
}}
|
|
className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
maxLength={15}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">{t('additionalService.ars.email')}</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={getMaskedEmail(email)}
|
|
placeholder='te**@nicepay.co.kr'
|
|
onKeyDown={(e) => {
|
|
// 백스페이스 처리
|
|
if (e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
setEamil(email.slice(0, -1));
|
|
}
|
|
// 영문, 숫자, @, ., - 등 이메일에 허용되는 문자만 입력 가능
|
|
else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
|
|
// 한글 및 특수문자 차단 (이메일에 사용 가능한 문자만 허용)
|
|
if (/^[a-zA-Z0-9@._-]$/.test(e.key)) {
|
|
e.preventDefault();
|
|
setEamil(email + e.key);
|
|
} else {
|
|
// 한글 등 허용되지 않는 문자는 입력 차단
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
|
// 복사/붙여넣기 등 특수 입력 대비
|
|
const input = e.target.value;
|
|
|
|
// 한글 및 허용되지 않는 문자 제거 (영문, 숫자, @, ., -, _ 만 허용)
|
|
const filteredInput = input.replace(/[^a-zA-Z0-9@._-]/g, '');
|
|
|
|
const atIndex = filteredInput.indexOf('@');
|
|
|
|
if (atIndex !== -1) {
|
|
// @ 이후 부분은 그대로, @ 이전 부분은 * 제거
|
|
const beforeAt = filteredInput.slice(0, atIndex).replace(/\*/g, '');
|
|
const afterAt = filteredInput.slice(atIndex);
|
|
setEamil(beforeAt + afterAt);
|
|
} else {
|
|
// @가 없으면 * 제거
|
|
setEamil(filteredInput.replace(/\*/g, ''));
|
|
}
|
|
}}
|
|
className={email && !isValidEmail(email) ? 'error' : ''}
|
|
onFocus={handleInputFocus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row" style={keyboardAwarePadding}>
|
|
<div className="billing-label">{t('additionalService.ars.paymentMethod')} <span>*</span></div>
|
|
<div className="billing-field">
|
|
{getArsPaymentMethodBtns()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="apply-row">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
onClick={() => onClickToRequest()}
|
|
disabled={!isFormValid()}
|
|
>{t('additionalService.ars.paymentRequest')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<ArsRequestSuccessPage
|
|
pageOn={successPageOn}
|
|
setPageOn={setSuccessPageOn}
|
|
resultMessage={resultMessage}
|
|
/>
|
|
</>
|
|
);
|
|
}; |