feat: add delete future accepted vacation periods

src/modules/vacations/components/VacationTable/VacationTableDesktop/VacationTable.desktop.test.tsx

@@ -40,6 +40,12 @@ describe('Desktop Table', () => {
     expect(screen.getByText('Remove vacation id - 3')).toBeInTheDocument()
   })
 
+  test('should render remove vacation button on future accepted vacation', () => {
+    setup(mockVacations('FUTURE_ACCEPTED'))
+
+    expect(screen.getByText('Remove vacation id - 1')).toBeInTheDocument()
+  })
+
   test('edit the vacation request when the user click on the edit button', () => {
     const vacations = mockVacations('PENDING')
     const { onUpdateVacationMock } = setup(vacations)

src/modules/vacations/components/VacationTable/VacationTableDesktop/VacationTable.desktop.tsx

@@ -3,6 +3,7 @@ import { RemoveVacationButton } from 'modules/vacations/components/VacationTable
 import { VacationBadge } from 'modules/vacations/components/VacationTable/VacationBadge'
 import { useTranslation } from 'react-i18next'
 import type { Vacation } from 'shared/types/Vacation'
+import chrono from 'shared/utils/chrono'
 
 interface Props {
   vacations: Vacation[]
@@ -57,6 +58,11 @@ const VacationTableDesktop = (props: Props) => {
                   <RemoveVacationButton vacationId={vacation.id} />
                 </Stack>
               )}
+              {vacation.state === 'ACCEPT' && chrono(vacation.startDate).isAfter(chrono.now()) && (
+                <Stack direction="row" spacing={2}>
+                  <RemoveVacationButton vacationId={vacation.id} />
+                </Stack>
+              )}
             </Td>
           </Tr>
         ))}

src/test-utils/server-api-mock/data/vacations.ts

@@ -10,6 +10,18 @@ const acceptedVacation: Vacation = {
   description: undefined,
   chargeYear: new Date('2020-01-01')
 }
+const today = new Date()
+const tomorrow = new Date(today)
+const futureAcceptedVacation: Vacation = {
+  id: 1,
+  startDate: new Date(tomorrow.setDate(tomorrow.getDate() + 2)),
+  endDate: new Date(tomorrow.setDate(tomorrow.getDate() + 6)),
+  days: [new Date('2020-03-10')],
+  state: 'ACCEPT',
+  observations: undefined,
+  description: undefined,
+  chargeYear: new Date('2020-01-01')
+}
 
 const canceledVacation: Vacation = {
   id: 2,
@@ -44,14 +56,18 @@ const rejectVacation: Vacation = {
   chargeYear: new Date('2020-01-01')
 }
 
-export const mockVacations = (type: 'ALL' | 'EMPTY' | VacationStatus): Vacation[] => {
+export const mockVacations = (
+  type: 'ALL' | 'EMPTY' | 'FUTURE_ACCEPTED' | VacationStatus
+): Vacation[] => {
   switch (type) {
     case 'ALL':
       return [acceptedVacation, canceledVacation, pendingVacation, rejectVacation]
     case 'EMPTY':
       return []
     case 'ACCEPT':
       return [acceptedVacation]
+    case 'FUTURE_ACCEPTED':
+      return [futureAcceptedVacation]
     case 'CANCELLED':
       return [canceledVacation]
     case 'PENDING':