95 lines
3.1 KiB
TypeScript
95 lines
3.1 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useMerchantMidStatusMutation } from '../api/use-merchant-mid-status-mutation';
|
|
import {
|
|
CardApplications,
|
|
Escrow,
|
|
InfoWrapKeys,
|
|
MerchantMidStatusParams,
|
|
MerchantMidStatusResponse,
|
|
OfflineInfomation,
|
|
OnlineInfomation
|
|
} from '../model/types';
|
|
import { OnlineInfoWrap } from './info-wrap/online-info-wrap';
|
|
import { CardInfoWrap } from './info-wrap/card-info-wrap';
|
|
import { EscrowInfoWrap } from './info-wrap/escrow-info-wrap';
|
|
import { useStore } from '@/shared/model/store';
|
|
|
|
export const RegistrationStatusWrap = () => {
|
|
const userMids = useStore.getState().UserStore.userMids;
|
|
const midOptions = useStore.getState().UserStore.selectOptionsMids;
|
|
|
|
const [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
|
|
const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
|
|
const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
|
|
const [escrow, setEscrow] = useState<Escrow>();
|
|
|
|
const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
|
|
const { mutateAsync: merchantMidStatus } = useMerchantMidStatusMutation();
|
|
|
|
const callInfo = (selectedMid: string) => {
|
|
let params: MerchantMidStatusParams = {
|
|
mid: selectedMid
|
|
};
|
|
merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
|
|
setOnlineInfomation(rs.onlineInfomation);
|
|
setOfflineInfomation(rs.offlineInfomation);
|
|
setCardApplications(rs.cardApplications);
|
|
setEscrow(rs.escrow);
|
|
});
|
|
};
|
|
|
|
const onChangeMid = (value: string) => {
|
|
callInfo(value);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if(userMids[0]){
|
|
callInfo(userMids[0]);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="input-wrapper top-select mt-30">
|
|
<select
|
|
onChange={ (e) => onChangeMid(e.target.value) }
|
|
>
|
|
{
|
|
midOptions.map((value, index) => (
|
|
<option
|
|
key={ value.value }
|
|
value={ value.value }
|
|
>{ value.name }</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
<div className="merchant-info">
|
|
<OnlineInfoWrap
|
|
data={ onlineInfomation }
|
|
></OnlineInfoWrap>
|
|
<div className="info-divider mb-16"></div>
|
|
<CardInfoWrap
|
|
type={ InfoWrapKeys.Card }
|
|
title='신용카드 심사현황'
|
|
cardApplications={ cardApplications }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></CardInfoWrap>
|
|
<div className="info-divider mb-16"></div>
|
|
<EscrowInfoWrap
|
|
type={ InfoWrapKeys.Escrow }
|
|
title='에스크로 가입현황'
|
|
companyName={ escrow?.companyName }
|
|
businessRegistrationNumber={ escrow?.businessRegistrationNumber }
|
|
escrowStatus={ escrow?.escrowStatus }
|
|
address={ escrow?.address }
|
|
merchantUrl={ escrow?.merchantUrl }
|
|
serviceRegistrationNumber={ escrow?.serviceRegistrationNumber }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></EscrowInfoWrap>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |