130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
|
|
import CaseLegal from '@/app/ui/file-page/violation-table/case-claims';
|
|
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
|
import { MatchStatus } from '@/app/actions/violationActions';
|
|
import { useEffect, useState } from 'react';
|
|
import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
|
|
|
|
const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
|
|
|
|
type TabType = 'complaint' | 'claim'
|
|
|
|
export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler, caseType }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler, caseType?: 'claim' | 'complaint' }) {
|
|
const t = useTranslations('Global');
|
|
const [activeTab, setActiveTab] = useState<TabType>('complaint');
|
|
const [showTabs, setShowTabs] = useState(false);
|
|
const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status);
|
|
const { data: userData, isLoading, isError, error } = useUserProfile();
|
|
|
|
const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
|
|
|
|
useEffect(() => {
|
|
setLocalViolation(selectedViolation);
|
|
|
|
if (caseType) {
|
|
setActiveTab(caseType)
|
|
}
|
|
}, [selectedViolation]);
|
|
|
|
useEffect(() => {
|
|
setShowTabs(false);
|
|
}, [localViolation.id]);
|
|
|
|
if (userData?.verifiedStatus !== "VERIFIED") {
|
|
return (
|
|
<div
|
|
className="violation-info-not-verified"
|
|
>
|
|
<div>
|
|
Подача жалобы/претензии невозможна,
|
|
<br />
|
|
так как вы не подтвердили свою личность
|
|
</div>
|
|
<div>
|
|
<button
|
|
className="btn-s"
|
|
>
|
|
Подтвердить
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!isInWork && !showTabs) {
|
|
return (
|
|
<div className="violation-info-choice">
|
|
<h4>
|
|
{t('you-can')}
|
|
</h4>
|
|
<div className="violation-info-choice-buttons">
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => {
|
|
setShowTabs(true);
|
|
setActiveTab('complaint');
|
|
}}
|
|
>
|
|
{t('file-a-complaint')}
|
|
</button>
|
|
|
|
<span>
|
|
{t('or')}
|
|
</span>
|
|
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => {
|
|
setShowTabs(true);
|
|
setActiveTab('claim');
|
|
}}
|
|
>
|
|
{t('file-a-claim')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="violation-info-tabs-wrapper">
|
|
<div className="violation-info-tabs">
|
|
<button
|
|
className={`btn-s btn-primary ${activeTab === 'complaint' ? 'active' : ''} ${localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
|
|
onClick={() => setActiveTab('complaint')}
|
|
>
|
|
{localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? t('complaint') : t('file-a-complaint')}
|
|
</button>
|
|
<button
|
|
className={`btn-s btn-primary ${activeTab === 'claim' ? 'active' : ''} ${localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
|
|
onClick={() => setActiveTab('claim')}
|
|
>
|
|
{localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? t('case') : t('file-a-claim')}
|
|
</button>
|
|
</div>
|
|
<div className="violation-info-content">
|
|
{activeTab === 'complaint' && (
|
|
<CaseComplaint
|
|
key={"complaint_" + localViolation.id}
|
|
selectedViolation={localViolation}
|
|
updateStatusHandler={updateStatusHandler}
|
|
setLocalViolation={setLocalViolation}
|
|
/>
|
|
)}
|
|
{activeTab === 'claim' && (
|
|
<CaseLegal
|
|
key={"legal_" + localViolation.id}
|
|
selectedViolation={localViolation}
|
|
updateStatusHandler={updateStatusHandler}
|
|
setLocalViolation={setLocalViolation}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |