122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
import { IMAGE_ROOT } from "@/shared/constants/common";
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { CalendarType, HeaderType } from '@/entities/common/model/types';
|
|
import {
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode,
|
|
useSetOnBack
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
import { useState } from "react";
|
|
import { useExtensionPayoutRequestMutation } from "@/entities/additional-service/api/payout/use-extension-payout-request-mutation";
|
|
import { ExtensionPayoutRequestParams, ExtensionPayoutRequestResponse } from "@/entities/additional-service/model/payout/types";
|
|
import NiceCalendar from "@/shared/ui/calendar/nice-calendar";
|
|
|
|
export const PayoutRequestPage = () => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
|
const [mid, setMid] = useState<string>('nictest001m')
|
|
const [submallId, setSubmallId] = useState<string>('');
|
|
const [disbursementAmount, setDisbursementAmount] = useState<number>(0);
|
|
const [settlementDate, setSettlementDate] = useState<string>('');
|
|
|
|
const { mutateAsync: extensionPayoutRequest } = useExtensionPayoutRequestMutation();
|
|
|
|
useSetHeaderTitle('지급대행 신청');
|
|
useSetHeaderType(HeaderType.RightClose);
|
|
useSetFooterMode(false);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.additionalService.payout.list);
|
|
});
|
|
|
|
const callExtensionPayoutRequest = () => {
|
|
let params: ExtensionPayoutRequestParams = {
|
|
mid: mid,
|
|
submallId: submallId,
|
|
disbursementAmount: disbursementAmount,
|
|
settlementDate: settlementDate,
|
|
};
|
|
extensionPayoutRequest(params).then((rs: ExtensionPayoutRequestResponse) => {
|
|
navigate(PATHS.additionalService.payout.list);
|
|
});
|
|
};
|
|
|
|
const setNewDate = (date: string) => {
|
|
setSettlementDate(date);
|
|
setCalendarOpen(false);
|
|
};
|
|
const onClickToOpenCalendar = () => {
|
|
setCalendarOpen(true);
|
|
};
|
|
return (
|
|
<>
|
|
<main>
|
|
<div className="tab-content">
|
|
<div className="tab-pane sub active">
|
|
<div className="ing-list">
|
|
<div className="billing-form gap-30">
|
|
<div className="billing-row">
|
|
<div className="billing-label">서브ID</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={ submallId }
|
|
onChange={ (e) => setSubmallId(e.target.value) }
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="billing-row">
|
|
<div className="billing-label">지급액</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="text"
|
|
value={ disbursementAmount }
|
|
onChange={ (e) => setDisbursementAmount(parseInt(e.target.value)) }
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="billing-row">
|
|
<div className="billing-label">지급일</div>
|
|
<div className="billing-field">
|
|
<div className="input-wrapper date">
|
|
<input
|
|
className="date-input"
|
|
type="text"
|
|
placeholder="날짜 선택"
|
|
value={ settlementDate }
|
|
/>
|
|
<button
|
|
className="date-btn"
|
|
type="button"
|
|
onClick={ () => onClickToOpenCalendar() }
|
|
>
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_date.svg' }
|
|
alt="날짜 선택"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div className="apply-row">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
onClick={ callExtensionPayoutRequest }
|
|
>신청</button>
|
|
</div>
|
|
<NiceCalendar
|
|
calendarOpen={ calendarOpen }
|
|
setCalendarOpen={ setCalendarOpen }
|
|
calendarType={ CalendarType.Single }
|
|
setNewDate={ setNewDate }
|
|
></NiceCalendar>
|
|
</>
|
|
);
|
|
}; |