103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation';
|
|
import { BusinessInfoWrap } from './info-wrap/business-info-wrap';
|
|
import { ManagerInfoWrap } from './info-wrap/manager-info-wrap';
|
|
import { AccountInfoWrap } from './info-wrap/account-info-wrap';
|
|
import {
|
|
InfoWrapKeys,
|
|
MerchantMidParams,
|
|
MerchantMidResponse
|
|
} from '../model/types';
|
|
import { useStore } from '@/shared/model/store';
|
|
|
|
export const InfoWrap = () => {
|
|
const userMids = useStore.getState().UserStore.userMids;
|
|
const midOptions = useStore.getState().UserStore.selectOptionsMids;
|
|
|
|
const [data, setData] = useState<MerchantMidResponse>();
|
|
|
|
const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
|
|
|
|
const { mutateAsync: merchantMid } = useMerchantMidMutation();
|
|
|
|
const callInfo = (selectedMid: string) => {
|
|
let params: MerchantMidParams = {
|
|
mid: selectedMid
|
|
};
|
|
merchantMid(params).then((rs: MerchantMidResponse) => {
|
|
setData(rs);
|
|
});
|
|
};
|
|
|
|
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">
|
|
<BusinessInfoWrap
|
|
data={ data }
|
|
></BusinessInfoWrap>
|
|
<div className="info-divider mb-16"></div>
|
|
<ManagerInfoWrap
|
|
type={ InfoWrapKeys.Merchant }
|
|
title='계약 담당자'
|
|
manager={ data?.merchantManager }
|
|
managerTelephone={ data?.merchantManagerTelephone }
|
|
managetEmail={ data?.merchantManagerEmail }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></ManagerInfoWrap>
|
|
<div className="info-divider mb-16"></div>
|
|
<ManagerInfoWrap
|
|
type={ InfoWrapKeys.Technical }
|
|
title='기술 담당자'
|
|
manager={ data?.technicalManager }
|
|
managerTelephone={ data?.technicalManagerTelephone }
|
|
managetEmail={ data?.technicalManagerEmail }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></ManagerInfoWrap>
|
|
<div className="info-divider mb-16"></div>
|
|
<ManagerInfoWrap
|
|
type={ InfoWrapKeys.Settlement }
|
|
title='정산 담당자'
|
|
manager={ data?.settlementManager }
|
|
managerTelephone={ data?.settlementManagerTelephone }
|
|
managetEmail={ data?.settlementManagerEmail }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></ManagerInfoWrap>
|
|
<div className="info-divider mb-16"></div>
|
|
<AccountInfoWrap
|
|
data={ data }
|
|
></AccountInfoWrap>
|
|
<div className="notice-bottom left-align">
|
|
<p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |