- SMS,지급대행 다국어 문자 수정
This commit is contained in:
HyeonJongKim
@@ -13,190 +13,190 @@ import { checkGrant } from '@/shared/lib/check-grant';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
|
||||
export interface PayoutDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
mid: string;
|
||||
tid: string;
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
mid: string;
|
||||
tid: string;
|
||||
};
|
||||
|
||||
export const PayoutDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
mid,
|
||||
tid
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
mid,
|
||||
tid
|
||||
}: PayoutDetailProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
|
||||
|
||||
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
|
||||
const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
|
||||
|
||||
const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
|
||||
const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
|
||||
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
const callDetail = () => {
|
||||
let params: ExtensionPayoutDetailParams = {
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
};
|
||||
extensionPayoutDetail(params).then((rs: ExtensionPayoutDetailResponse) => {
|
||||
setDetail(rs);
|
||||
}).catch((e: any) => {
|
||||
if(e.response?.data?.error?.message){
|
||||
snackBar(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
|
||||
const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
|
||||
|
||||
const onClickToOpenDownloadBottomSheet = () => {
|
||||
if(!checkGrant(53, 'D')){
|
||||
showAlert(t('common.nopermission'));
|
||||
return;
|
||||
}
|
||||
setDownloadBottomSheetOn(true);
|
||||
};
|
||||
const callDetail = () => {
|
||||
let params: ExtensionPayoutDetailParams = {
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
};
|
||||
extensionPayoutDetail(params).then((rs: ExtensionPayoutDetailResponse) => {
|
||||
setDetail(rs);
|
||||
}).catch((e: any) => {
|
||||
if (e.response?.data?.error?.message) {
|
||||
snackBar(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const onRequestDownload = (
|
||||
selectedMode: DownloadSelectedMode,
|
||||
userEmail?: string
|
||||
) => {
|
||||
if(selectedMode === DownloadSelectedMode.IMAGE){
|
||||
const params: ExtensionPayoutDetailDownloadCertificateParams = {
|
||||
mid: mid,
|
||||
tid: tid,
|
||||
requestType: 'IMAGE',
|
||||
email: ''
|
||||
};
|
||||
extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
|
||||
console.log('Certificate Download Status:', rs);
|
||||
}).catch((error) => {
|
||||
console.error('Certificate Download Failed:', error);
|
||||
});
|
||||
}
|
||||
else if(selectedMode === DownloadSelectedMode.EMAIL
|
||||
&& userEmail
|
||||
){
|
||||
const params: ExtensionPayoutDetailDownloadCertificateParams = {
|
||||
mid: mid,
|
||||
tid: tid,
|
||||
requestType: 'EMAIL',
|
||||
email: userEmail
|
||||
};
|
||||
extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
|
||||
console.log('Certificate Download Status:', rs);
|
||||
}).catch((error) => {
|
||||
console.error('Certificate Download Failed:', error);
|
||||
});
|
||||
}
|
||||
};
|
||||
const onClickToOpenDownloadBottomSheet = () => {
|
||||
if (!checkGrant(53, 'D')) {
|
||||
showAlert(t('common.nopermission'));
|
||||
return;
|
||||
}
|
||||
setDownloadBottomSheetOn(true);
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
const onRequestDownload = (
|
||||
selectedMode: DownloadSelectedMode,
|
||||
userEmail?: string
|
||||
) => {
|
||||
if (selectedMode === DownloadSelectedMode.IMAGE) {
|
||||
const params: ExtensionPayoutDetailDownloadCertificateParams = {
|
||||
mid: mid,
|
||||
tid: tid,
|
||||
requestType: selectedMode,
|
||||
email: ''
|
||||
};
|
||||
extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
|
||||
console.log('Certificate Download Status:', rs);
|
||||
}).catch((error) => {
|
||||
console.error('Certificate Download Failed:', error);
|
||||
});
|
||||
}
|
||||
else if (selectedMode === DownloadSelectedMode.EMAIL
|
||||
&& userEmail
|
||||
) {
|
||||
const params: ExtensionPayoutDetailDownloadCertificateParams = {
|
||||
mid: mid,
|
||||
tid: tid,
|
||||
requestType: 'EMAIL',
|
||||
email: userEmail
|
||||
};
|
||||
extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
|
||||
console.log('Certificate Download Status:', rs);
|
||||
}).catch((error) => {
|
||||
console.error('Certificate Download Failed:', error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!!mid && !!tid) {
|
||||
callDetail();
|
||||
}
|
||||
}, [mid, tid]);
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(detailOn) ? 'visible' : 'hidden'}
|
||||
variants={DetailMotionVariants}
|
||||
transition={DetailMotionDuration}
|
||||
style={DetailMotionStyle}
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{t('additionalService.payout.detailTitle')}</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={onClickToClose}
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.disbursementAmount || 0) })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="num-store">{detail?.companyName}</div>
|
||||
<div className="num-day">{moment(detail?.settlementDate).format('YYYY.MM.DD')}</div>
|
||||
<div className="receipt-row">
|
||||
<button
|
||||
className="receipt-btn"
|
||||
type="button"
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
>
|
||||
<span className="icon-24 download"></span>
|
||||
<span>{t('additionalService.payout.depositCertificate')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">{t('additionalService.payout.detailInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.disbursementStatus')}</span>
|
||||
<span className="v">{detail?.disbursementStatus}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.transactionType')}</span>
|
||||
<span className="v">{detail?.transTypeName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('common.requestDate')}</span>
|
||||
<span className="v">{moment(detail?.requestDate).format('YYYY.MM.DD')}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.disbursementDateTime')}</span>
|
||||
<span className="v">{detail?.settlementDateTime ? moment(detail?.settlementDateTime, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : ""}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.businessNumber')}</span>
|
||||
<span className="v">{detail?.companyNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.accountHolder')}</span>
|
||||
<span className="v">{detail?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.bank')}</span>
|
||||
<span className="v">{detail?.bankName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.accountNumber')}</span>
|
||||
<span className="v">{detail?.accountNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.depositor')}</span>
|
||||
<span className="v">{detail?.depositName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.failureReason')}</span>
|
||||
<span className="v">{detail?.failReason}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{ !!downloadBottomSheetOn &&
|
||||
<DownloadBottomSheet
|
||||
bottomSheetOn={ downloadBottomSheetOn }
|
||||
setBottomSheetOn={ setDownloadBottomSheetOn }
|
||||
imageMode={ false }
|
||||
emailMode={ true }
|
||||
sendRequest={ onRequestDownload }
|
||||
/>
|
||||
}
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!!mid && !!tid) {
|
||||
callDetail();
|
||||
}
|
||||
}, [mid, tid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(detailOn) ? 'visible' : 'hidden'}
|
||||
variants={DetailMotionVariants}
|
||||
transition={DetailMotionDuration}
|
||||
style={DetailMotionStyle}
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{t('additionalService.payout.detailTitle')}</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={onClickToClose}
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.disbursementAmount || 0) })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="num-store">{detail?.companyName}</div>
|
||||
<div className="num-day">{moment(detail?.settlementDate).format('YYYY.MM.DD')}</div>
|
||||
<div className="receipt-row">
|
||||
<button
|
||||
className="receipt-btn"
|
||||
type="button"
|
||||
onClick={onClickToOpenDownloadBottomSheet}
|
||||
>
|
||||
<span className="icon-24 download"></span>
|
||||
<span>{t('additionalService.payout.depositCertificate')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">{t('additionalService.payout.detailInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.disbursementStatus')}</span>
|
||||
<span className="v">{detail?.disbursementStatus}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.transactionType')}</span>
|
||||
<span className="v">{detail?.transTypeName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('common.requestDate')}</span>
|
||||
<span className="v">{moment(detail?.requestDate).format('YYYY.MM.DD')}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.disbursementDateTime')}</span>
|
||||
<span className="v">{detail?.settlementDateTime ? moment(detail?.settlementDateTime, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : ""}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.businessNumber')}</span>
|
||||
<span className="v">{detail?.companyNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.accountHolder')}</span>
|
||||
<span className="v">{detail?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.bank')}</span>
|
||||
<span className="v">{detail?.bankName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.accountNumber')}</span>
|
||||
<span className="v">{detail?.accountNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.depositor')}</span>
|
||||
<span className="v">{detail?.depositName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.payout.failureReason')}</span>
|
||||
<span className="v">{detail?.failReason}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{!!downloadBottomSheetOn &&
|
||||
<DownloadBottomSheet
|
||||
bottomSheetOn={downloadBottomSheetOn}
|
||||
setBottomSheetOn={setDownloadBottomSheetOn}
|
||||
imageMode={true}
|
||||
emailMode={true}
|
||||
sendRequest={onRequestDownload}
|
||||
/>
|
||||
}
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -99,7 +99,7 @@ export const SmsPaymentDetailResend = ({
|
||||
onClick={onClickResend}
|
||||
disabled={!smsDetailData?.sendMessage}
|
||||
>
|
||||
{t('common.request')}
|
||||
{t('additionalService.sms.smsResendButton')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user