가맹점 정보, 일부 상수 및 공용 변경
This commit is contained in:
focp212@naver.com
29
src/entities/merchant/api/use-merchant-mid-mutation.tsx
Normal file
29
src/entities/merchant/api/use-merchant-mid-mutation.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_MERCHANT } from '@/shared/api/api-url-merchant';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
MerchantMidParams,
|
||||
MerchantMidResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const merchantMid = (params: MerchantMidParams) => {
|
||||
return resultify(
|
||||
axios.post<MerchantMidResponse>(API_URL_MERCHANT.merchantMid(params.mid), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useMerchantMidMutation = (options?: UseMutationOptions<MerchantMidResponse, CBDCAxiosError, MerchantMidParams>) => {
|
||||
const mutation = useMutation<MerchantMidResponse, CBDCAxiosError, MerchantMidParams>({
|
||||
...options,
|
||||
mutationFn: (params: MerchantMidParams) => merchantMid(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_MERCHANT } from '@/shared/api/api-url-merchant';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
MerchantMidStatusParams,
|
||||
MerchantMidStatusResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const merchantMidStatus = (params: MerchantMidStatusParams) => {
|
||||
return resultify(
|
||||
axios.post<MerchantMidStatusResponse>(API_URL_MERCHANT.merchantMidStatus(params.mid), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useMerchantMidStatusMutation = (options?: UseMutationOptions<MerchantMidStatusResponse, CBDCAxiosError, MerchantMidStatusParams>) => {
|
||||
const mutation = useMutation<MerchantMidStatusResponse, CBDCAxiosError, MerchantMidStatusParams>({
|
||||
...options,
|
||||
mutationFn: (params: MerchantMidStatusParams) => merchantMidStatus(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
119
src/entities/merchant/model/types.ts
Normal file
119
src/entities/merchant/model/types.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
export enum MerchantTabKeys {
|
||||
Info = 'Info',
|
||||
RegistrationStatus = 'RegistrationStatus',
|
||||
};
|
||||
export interface MerchantTabProps {
|
||||
activeTab: MerchantTabKeys;
|
||||
};
|
||||
export enum ContractStatus {
|
||||
RECEPTION_COMPLETED = 'RECEPTION_COMPLETED',
|
||||
RECEPTION_INCOMPLETE = 'RECEPTION_INCOMPLETE',
|
||||
};
|
||||
export enum CardAuditStatus {
|
||||
REQUEST_COMPLETED = 'REQUEST_COMPLETED',
|
||||
SUPPLEMENT_REQUIRED = 'SUPPLEMENT_REQUIRED'
|
||||
};
|
||||
export enum UsageStatus {
|
||||
AVAILABLE = 'AVAILABLE',
|
||||
SUSPENDED = 'SUSPENDED'
|
||||
};
|
||||
export enum InitialRegistrationFeeStatus {
|
||||
EXEMPT = 'EXEMPT',
|
||||
NOT_REGISTERED = 'NOT_REGISTERED',
|
||||
UNPAID = 'UNPAID',
|
||||
PAID = 'PAID',
|
||||
};
|
||||
export enum GuaranteeInsuranceFeeStatus {
|
||||
EXEMPT = 'EXEMPT',
|
||||
NOT_REGISTERED = 'NOT_REGISTERED',
|
||||
UNPAID = 'UNPAID',
|
||||
PAID = 'PAID',
|
||||
};
|
||||
export enum CardCompanyName {
|
||||
BC = 'BC',
|
||||
KOOKMIN = 'KOOKMIN',
|
||||
HANA = 'HANA',
|
||||
SAMSUNG = 'SAMSUNG',
|
||||
SHINHAN = 'SHINHAN',
|
||||
HYUNDAI = 'HYUNDAI',
|
||||
LOTTE = 'LOTTE',
|
||||
NH = 'NH',
|
||||
WOORI = 'WOORI'
|
||||
};
|
||||
export enum EscrowStatus {
|
||||
ACTIVE = 'ACTIVE',
|
||||
INACTIVE = 'INACTIVE'
|
||||
};
|
||||
export enum InfoWrapKeys {
|
||||
Merchant = 'Merchant',
|
||||
Technical = 'Technical',
|
||||
Settlement = 'Settlement',
|
||||
};
|
||||
export interface MerchantMidParams {
|
||||
mid: string;
|
||||
};
|
||||
export interface MerchantMidResponse {
|
||||
memberCompanyId?: string;
|
||||
businessCompanyName?: string;
|
||||
businessRegistrationNumber?: string;
|
||||
businessScaleTypeName?: string;
|
||||
businessType?: string;
|
||||
businessCategory?: string;
|
||||
representativeName?: string;
|
||||
telephoneNumber?: string;
|
||||
email?: string;
|
||||
businessAddress?: string;
|
||||
url?: string;
|
||||
merchantManager?: string;
|
||||
merchantManagerTelephone?: string;
|
||||
merchantManagerEmail?: string;
|
||||
technicalManager?: string;
|
||||
technicalManagerTelephone?: string;
|
||||
technicalManagerEmail?: string;
|
||||
settlementManager?: string;
|
||||
settlementManagerTelephone?: string;
|
||||
settlementManagerEmail?: string;
|
||||
bankName?: string;
|
||||
accountNumber?: string;
|
||||
accountHolderName?: string;
|
||||
};
|
||||
export interface MerchantMidStatusParams {
|
||||
mid: string;
|
||||
};
|
||||
export interface MerchantMidStatusResponse {
|
||||
onlineInfomation: OnlineInfomation;
|
||||
offlineInfomation: OfflineInfomation;
|
||||
cardApplications: Array<CardApplications>;
|
||||
escrow: Escrow;
|
||||
};
|
||||
export interface OnlineInfomation {
|
||||
registrationDate: string;
|
||||
businessRegistrationNumber: string;
|
||||
companyName: string;
|
||||
contractStatus: ContractStatus;
|
||||
cardAuditStatus: CardAuditStatus;
|
||||
insuranceAmount: string;
|
||||
insuranceExpiryDate: string;
|
||||
usageStatus: UsageStatus;
|
||||
};
|
||||
export interface OfflineInfomation {
|
||||
registrationDate: string;
|
||||
contractDocumentCount: number;
|
||||
initialRegistrationFeeStatus: InitialRegistrationFeeStatus;
|
||||
initialRegistrationFeeAmount: string;
|
||||
guaranteeInsuranceFeeStatus: GuaranteeInsuranceFeeStatus;
|
||||
guaranteeInsuranceFeeAmount: string;
|
||||
};
|
||||
export interface CardApplications {
|
||||
cardCompanyName: CardCompanyName;
|
||||
partnerServiceName: string;
|
||||
statusName: string;
|
||||
};
|
||||
export interface Escrow {
|
||||
companyName: string;
|
||||
businessRegistrationNumber: string;
|
||||
escrowStatus: EscrowStatus,
|
||||
address: string;
|
||||
merchantUrl: string;
|
||||
serviceRegistrationNumber: string;
|
||||
};
|
||||
85
src/entities/merchant/ui/info-wrap.tsx
Normal file
85
src/entities/merchant/ui/info-wrap.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
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 {
|
||||
InfoWrapKeys,
|
||||
MerchantMidParams,
|
||||
MerchantMidResponse
|
||||
} from '../model/types';
|
||||
|
||||
export const InfoWrap = () => {
|
||||
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [data, setData] = useState<MerchantMidResponse>();
|
||||
|
||||
const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
|
||||
const { mutateAsync: merchantMid } = useMerchantMidMutation();
|
||||
|
||||
const callInfo = () => {
|
||||
let params: MerchantMidParams = {
|
||||
mid: mid,
|
||||
};
|
||||
merchantMid(params).then((rs: MerchantMidResponse) => {
|
||||
setData(rs);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callInfo();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="input-wrapper top-select mt-30">
|
||||
<select>
|
||||
<option value="1">nicetest00g</option>
|
||||
<option value="2">nicetest00g</option>
|
||||
<option value="3">nicetest00g</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>
|
||||
|
||||
<div className="notice-bottom left-align">
|
||||
<p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
70
src/entities/merchant/ui/info-wrap/business-info-wrap.tsx
Normal file
70
src/entities/merchant/ui/info-wrap/business-info-wrap.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import { MerchantMidResponse } from '../../model/types';
|
||||
|
||||
export interface BusinessInfoWrapProps {
|
||||
data?: MerchantMidResponse
|
||||
};
|
||||
|
||||
export const BusinessInfoWrap = ({
|
||||
data
|
||||
}: BusinessInfoWrapProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="section">
|
||||
<div className="section-title">기본정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">상호</span>
|
||||
<span className="v">{ data?.businessCompanyName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">사업자번호</span>
|
||||
<span className="v">{ data?.businessRegistrationNumber }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">사업자속성</span>
|
||||
<span className="v">{ data?.businessScaleTypeName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">업종</span>
|
||||
<span className="v">{ data?.businessType }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">업태</span>
|
||||
<span className="v">{ data?.businessCategory }</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="info-divider mb-16"></div>
|
||||
<div className="section">
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">대표자명</span>
|
||||
<span className="v">{ data?.representativeName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">대표 연락처</span>
|
||||
<span className="v">{ data?.telephoneNumber }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">대표 이메일</span>
|
||||
<span className="v">{ data?.email }</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="info-divider mb-16"></div>
|
||||
<div className="section">
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">사업장주소</span>
|
||||
<span className="v">{ data?.businessAddress }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">홈페이지 주소</span>
|
||||
<span className="v">{ data?.url }</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
75
src/entities/merchant/ui/info-wrap/manager-info-wrap.tsx
Normal file
75
src/entities/merchant/ui/info-wrap/manager-info-wrap.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
|
||||
import { InfoWrapKeys, MerchantMidResponse } from '../../model/types';
|
||||
import SlideDown from 'react-slidedown';
|
||||
import 'react-slidedown/lib/slidedown.css';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export interface ManagerInfoWrapProps {
|
||||
type: InfoWrapKeys;
|
||||
title?: string;
|
||||
manager?: string;
|
||||
managerTelephone?: string;
|
||||
managetEmail?: string;
|
||||
openChild: InfoWrapKeys | null;
|
||||
setOpenChild: (openChild: InfoWrapKeys | null) => void;
|
||||
};
|
||||
|
||||
export const ManagerInfoWrap = ({
|
||||
type,
|
||||
title,
|
||||
manager,
|
||||
managerTelephone,
|
||||
managetEmail,
|
||||
openChild,
|
||||
setOpenChild
|
||||
}: ManagerInfoWrapProps) => {
|
||||
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
|
||||
const opeSection = () => {
|
||||
const staus = !isOpen;
|
||||
setIsOpen(staus);
|
||||
if(!!staus){
|
||||
setOpenChild(type);
|
||||
}
|
||||
else {
|
||||
setOpenChild(null)
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(!!openChild && openChild !== type){
|
||||
setIsOpen(false);
|
||||
}
|
||||
}, [openChild]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="section">
|
||||
<div className="section-title"
|
||||
onClick={ () => opeSection() }
|
||||
>
|
||||
{ title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
|
||||
</div>
|
||||
<SlideDown className={'my-dropdown-slidedown'}>
|
||||
{ isOpen &&
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{ manager }</span>
|
||||
<span className="v"></span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{ managerTelephone }</span>
|
||||
<span className="v"></span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{ managetEmail }</span>
|
||||
<span className="v"></span>
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
</SlideDown>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
37
src/entities/merchant/ui/merchant-tab.tsx
Normal file
37
src/entities/merchant/ui/merchant-tab.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import {
|
||||
MerchantTabKeys,
|
||||
MerchantTabProps
|
||||
} from '../model/types';
|
||||
|
||||
export const MerchantTab = ({
|
||||
activeTab
|
||||
}: MerchantTabProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const onClickToNavigation = (tab: MerchantTabKeys) => {
|
||||
if(activeTab !== tab){
|
||||
if(tab === MerchantTabKeys.Info){
|
||||
navigate(PATHS.merchant.info);
|
||||
}
|
||||
else if(tab === MerchantTabKeys.RegistrationStatus){
|
||||
navigate(PATHS.merchant.registrationStatus);
|
||||
}
|
||||
}
|
||||
};
|
||||
return(
|
||||
<>
|
||||
<div className="subTab">
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === MerchantTabKeys.Info)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(MerchantTabKeys.Info) }
|
||||
>가맹점 정보</button>
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === MerchantTabKeys.RegistrationStatus)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(MerchantTabKeys.RegistrationStatus) }
|
||||
>등록현황</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
8
src/entities/merchant/ui/registration-status-wrap.tsx
Normal file
8
src/entities/merchant/ui/registration-status-wrap.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const RegistrationStatusWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user