가맹점관리 등록현황

src/entities/merchant/model/types.ts

@@ -48,6 +48,10 @@ export enum InfoWrapKeys {
   Merchant = 'Merchant',
   Technical = 'Technical',
   Settlement = 'Settlement',
+  Online = 'Online',
+  Offline = 'Offline',
+  Card = 'Card',
+  Escrow = 'Escrow'
 };
 export interface MerchantMidParams {
   mid: string;
@@ -110,10 +114,10 @@ export interface CardApplications {
   statusName: string;
 };
 export interface Escrow {
-  companyName: string;
-  businessRegistrationNumber: string;
-  escrowStatus: EscrowStatus,
-  address: string;
-  merchantUrl: string;
-  serviceRegistrationNumber: string;
+  companyName?: string;
+  businessRegistrationNumber?: string;
+  escrowStatus?: EscrowStatus,
+  address?: string;
+  merchantUrl?: string;
+  serviceRegistrationNumber?: string;
 };

src/entities/merchant/ui/info-wrap.tsx

@@ -2,7 +2,7 @@ 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,
@@ -27,7 +27,7 @@ export const InfoWrap = () => {
   };
 
   useEffect(() => {
-    callInfo();
+    // callInfo();
   }, []);
 
   return (
@@ -75,7 +75,9 @@ export const InfoWrap = () => {
           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>

src/entities/merchant/ui/info-wrap/account-info-wrap.tsx

@@ -0,0 +1,32 @@
+import { MerchantMidResponse } from '../../model/types';
+
+export interface AccountInfoWrapProps {
+  data?: MerchantMidResponse
+};
+
+export const AccountInfoWrap = ({
+  data
+}: AccountInfoWrapProps) => {
+
+  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?.bankName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">계좌번호</span>
+            <span className="v">{ data?.accountNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">예금주</span>
+            <span className="v">{ data?.accountHolderName }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/info-wrap/card-info-wrap.tsx

@@ -0,0 +1,66 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { CardApplications, Escrow, EscrowStatus, InfoWrapKeys, MerchantMidResponse } from '../../model/types';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useEffect, useState } from 'react';
+
+export interface CardInfoWrapProps {
+  type: InfoWrapKeys;
+  title?: string;
+  cardApplications?: Array<CardApplications>
+  openChild: InfoWrapKeys | null;
+  setOpenChild: (openChild: InfoWrapKeys | null) => void;
+};
+
+export const CardInfoWrap = ({
+  type,
+  title,
+  cardApplications,
+  openChild,
+  setOpenChild
+}: CardInfoWrapProps) => {
+
+  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">
+            { cardApplications?.map((value, index) => (
+                <li className="kv-row">
+                  <span className="k">{ value.cardCompanyName }</span>
+                  <span className="v">{ `${value.partnerServiceName}(${value.statusName})` }</span>
+                </li>
+              ))
+            }
+          </ul>
+        }
+        </SlideDown> 
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/info-wrap/escrow-info-wrap.tsx

@@ -0,0 +1,87 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { Escrow, EscrowStatus, InfoWrapKeys, MerchantMidResponse } from '../../model/types';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useEffect, useState } from 'react';
+
+export interface EscrowInfoWrapProps extends Escrow {
+  type: InfoWrapKeys;
+  title?: string;
+  openChild: InfoWrapKeys | null;
+  setOpenChild: (openChild: InfoWrapKeys | null) => void;
+};
+
+export const EscrowInfoWrap = ({
+  type,
+  title,
+  companyName,
+  businessRegistrationNumber,
+  escrowStatus,
+  address,
+  merchantUrl,
+  serviceRegistrationNumber,
+  openChild,
+  setOpenChild
+}: EscrowInfoWrapProps) => {
+
+  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">상호</span>
+              <span className="v">{ companyName }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">사업자번호</span>
+              <span className="v">{ businessRegistrationNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">NICECROW 가입</span>
+              <span className="v">{ escrowStatus }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">소재지</span>
+              <span className="v">{ address }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">URL</span>
+              <span className="v">{ merchantUrl }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서비스 등록번호</span>
+              <span className="v">{ serviceRegistrationNumber }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown> 
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/info-wrap/online-info-wrap.tsx

@@ -0,0 +1,53 @@
+import moment from 'moment';
+import { OnlineInfomation } from '../../model/types';
+
+export interface OnlineInfoWrapProps {
+  data?: OnlineInfomation
+};
+
+export const OnlineInfoWrap = ({
+  data
+}: OnlineInfoWrapProps) => {
+
+  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?.usageStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">상호</span>
+            <span className="v">{ data?.companyName }</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?.registrationDate }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">계약완료 여부</span>
+            <span className="v">{ data?.contractStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">홈페이지 심사 여부</span>
+            <span className="v">{ data?.cardAuditStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">보증보험</span>
+            <span className="v">{ data?.insuranceAmount }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">{ (data?.insuranceExpiryDate)? `(${moment(data?.insuranceExpiryDate).format('YYYY.MM.DD')})`: '' }</span>
+            <span className="v"></span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/registration-status-wrap.tsx

@@ -1,8 +1,80 @@
+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';
+
 export const RegistrationStatusWrap = () => {
 
+  const [mid, setMid] = useState<string>('nictest001m');
+  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 = () => {
+    let params: MerchantMidStatusParams = {
+      mid: mid
+    };
+    merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
+      setOnlineInfomation(rs.onlineInfomation);
+      setOfflineInfomation(rs.offlineInfomation);
+      setCardApplications(rs.cardApplications);
+      setEscrow(rs.escrow);
+    });
+  };
+
+  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">
+        <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>
     </>
   );
 };