112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
import { ChangeEvent, useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation';
|
|
import { BusinessSection } from './section/business-section';
|
|
import { ManagerSection } from './section/manager-section';
|
|
import { AccountSection } from './section/account-section';
|
|
import {
|
|
SectionKeys,
|
|
MerchantMidParams,
|
|
MerchantMidResponse
|
|
} from '../model/types';
|
|
import { useStore } from '@/shared/model/store';
|
|
import { showAlert } from '@/widgets/show-alert';
|
|
|
|
export const InfoWrap = () => {
|
|
const { t } = useTranslation();
|
|
const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
|
|
const userMid = useStore.getState().UserStore.mid;
|
|
let midItem = midOptionsWithoutGids.filter((value, index) => {
|
|
return value.value === userMid;
|
|
});
|
|
|
|
const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
|
|
const [data, setData] = useState<MerchantMidResponse>();
|
|
|
|
const [openChild, setOpenChild] = useState<SectionKeys | null>(null);
|
|
|
|
const { mutateAsync: merchantMid } = useMerchantMidMutation();
|
|
|
|
const callInfo = () => {
|
|
let params: MerchantMidParams = {
|
|
mid: mid
|
|
};
|
|
merchantMid(params).then((rs: MerchantMidResponse) => {
|
|
setData(rs);
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
showAlert(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if(!!mid){
|
|
callInfo();
|
|
}
|
|
}, [mid]);
|
|
|
|
return (
|
|
<>
|
|
<div className="input-wrapper top-select mt-30">
|
|
<select
|
|
value={ mid }
|
|
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
|
|
>
|
|
{
|
|
midOptionsWithoutGids.map((value, index) => (
|
|
<option
|
|
key={ value.value }
|
|
value={ value.value }
|
|
>{ value.name }</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="merchant-info">
|
|
<BusinessSection
|
|
data={ data }
|
|
></BusinessSection>
|
|
<div className="info-divider mb-16"></div>
|
|
<ManagerSection
|
|
type={ SectionKeys.Merchant }
|
|
title={t('merchant.contractManager')}
|
|
manager={ data?.merchantManager }
|
|
managerTelephone={ data?.merchantManagerTelephone }
|
|
managetEmail={ data?.merchantManagerEmail }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></ManagerSection>
|
|
<div className="info-divider mb-16"></div>
|
|
<ManagerSection
|
|
type={ SectionKeys.Technical }
|
|
title={t('merchant.technicalManager')}
|
|
manager={ data?.technicalManager }
|
|
managerTelephone={ data?.technicalManagerTelephone }
|
|
managetEmail={ data?.technicalManagerEmail }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></ManagerSection>
|
|
<div className="info-divider mb-16"></div>
|
|
<ManagerSection
|
|
type={ SectionKeys.Settlement }
|
|
title={t('merchant.settlementManager')}
|
|
manager={ data?.settlementManager }
|
|
managerTelephone={ data?.settlementManagerTelephone }
|
|
managetEmail={ data?.settlementManagerEmail }
|
|
openChild={ openChild }
|
|
setOpenChild={ setOpenChild }
|
|
></ManagerSection>
|
|
<div className="info-divider mb-16"></div>
|
|
<AccountSection
|
|
data={ data }
|
|
></AccountSection>
|
|
<div className="notice-bottom left-align">
|
|
<p className="notice-tip">{t('merchant.infoNotice')}</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |