delete form when form status is returned

src/api.ts

@@ -441,6 +441,12 @@ class Api {
     });
   };
 
+  deleteObservationForm = async (id: string): Promise<Form> =>
+    await this.delete({
+      resource: Resources.FORMS,
+      id,
+    });
+
   getTenantUsers = async ({
     filter,
     page,

src/components/other/DeleteCard.tsx

@@ -31,9 +31,7 @@ const DeleteCard = ({
         </IconContainer>
         <Title>{title}</Title>
         <Description>
-          {descriptionFirstPart}
-          <Name>{name}</Name>
-          {descriptionSecondPart}
+          {descriptionFirstPart} <Name>{name}</Name> {descriptionSecondPart}
         </Description>
         <BottomRow>
           <StyledButton

src/pages/ObservationForm/hooks/useData.ts

@@ -1,5 +1,12 @@
 import { useMutation, useQuery } from 'react-query';
 import { useNavigate, useParams } from 'react-router-dom';
+import { DeleteInfoProps } from '../../../types';
+import {
+  buttonsTitles,
+  deleteDescriptionFirstPart,
+  deleteDescriptionSecondPart,
+  deleteTitles,
+} from '../../../utils/texts';
 import { getMapQueryString } from '../functions';
 import { FormProps, FormServerProps } from '../types';
 import { default as api, default as Api } from './../../../api';
@@ -22,6 +29,26 @@ export const useData = () => {
     },
   );
 
+  const deleteForm = useMutation(() => api.deleteObservationForm(id), {
+    onError: () => {
+      handleErrorFromServerToast();
+    },
+    onSuccess: () => {
+      navigate(slugs.observationForms);
+    },
+    retry: false,
+  });
+
+  const deleteInfo: DeleteInfoProps = {
+    deleteButtonText: buttonsTitles.removeForm,
+    deleteDescriptionFirstPart: deleteDescriptionFirstPart.entity,
+    deleteDescriptionSecondPart: deleteDescriptionSecondPart.form,
+    deleteTitle: deleteTitles.form,
+    deleteName: `#${observationForm?.id}`,
+    deleteFunction:
+      observationForm?.status === StatusTypes.RETURNED ? deleteForm.mutateAsync : undefined,
+  };
+
   const disabled = !!observationForm && !observationForm?.canEdit;
   const mapQueryString = getMapQueryString(disabled);
 
@@ -111,6 +138,7 @@ export const useData = () => {
 
   return {
     handleSubmit,
+    deleteInfo,
     loading: isFetching || specieLoading,
     mapQueryString,
     initialValues,

src/pages/ObservationForm/index.tsx

@@ -25,7 +25,15 @@ import { useData } from './hooks/useData';
 import { FormProps } from './types';
 
 const ObservationForm = () => {
-  const { initialValues, id = '', disabled, loading, handleSubmit, mapQueryString } = useData();
+  const {
+    initialValues,
+    id = '',
+    deleteInfo,
+    disabled,
+    loading,
+    handleSubmit,
+    mapQueryString,
+  } = useData();
 
   const renderForm = (values: FormProps, errors: any, handleChange: any, setValues: any) => {
     const handleUpdateSpecie = (species: Species) => {
@@ -120,6 +128,7 @@ const ObservationForm = () => {
       validationSchema={validateForm}
       disabled={disabled}
       submitButtonText={buttonsTitles.submit}
+      deleteInfo={deleteInfo}
     />
   );
 };

src/pages/RequestForm/function.ts

@@ -16,7 +16,7 @@ export const getDeleteInfo = (
   return {
     deleteButtonText:
       type === RequestTypes.GET_ONCE ? buttonsTitles.deleteExcerpt : buttonsTitles.deleteRequest,
-    deleteDescriptionFirstPart: deleteDescriptionFirstPart.request,
+    deleteDescriptionFirstPart: deleteDescriptionFirstPart.entity,
     deleteDescriptionSecondPart:
       type === RequestTypes.GET_ONCE
         ? deleteDescriptionSecondPart.excerpt

src/pages/TenantUserForm.tsx

@@ -1,3 +1,9 @@
+import {
+  NumericTextField,
+  PhoneField,
+  SelectField,
+  TextField,
+} from '@aplinkosministerija/design-system';
 import { useMutation, useQuery } from 'react-query';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
@@ -21,7 +27,6 @@ import {
 } from '../utils/texts';
 import { validateCreateTenantUser, validateUpdateTenantUser } from '../utils/validation';
 import api from './../api';
-import { NumericTextField, PhoneField, SelectField, TextField } from '@aplinkosministerija/design-system';
 
 interface TenantUserProps {
   firstName?: string;
@@ -78,7 +83,7 @@ const TenantUserForm = () => {
 
   const deleteInfo: DeleteInfoProps = {
     deleteButtonText: buttonsTitles.removeTenantUser,
-    deleteDescriptionFirstPart: deleteDescriptionFirstPart.tenantUser,
+    deleteDescriptionFirstPart: deleteDescriptionFirstPart.entity,
     deleteDescriptionSecondPart: deleteDescriptionSecondPart.tenantUser,
     deleteTitle: deleteTitles.tenantUser,
     deleteName: `${user?.firstName} ${user?.lastName}`,

src/utils/texts.ts

@@ -250,6 +250,7 @@ export const buttonsTitles = {
   edit: 'Atnaujinti',
   view: 'Peržiūrėti',
   removeTenantUser: 'Pašalinti darbuotoją',
+  removeForm: 'Pašalinti stebėjimą',
   deleteGroup: 'Ištrinti grupę',
   sarasas: 'Sąrašas',
   zemelapis: 'Žemėlapis',
@@ -564,17 +565,18 @@ export const descriptions = {
 export const deleteTitles = {
   tenantUser: 'Pašalinti darbuotoją',
   request: 'Ištrinti prašymą',
+  form: 'Ištrinti stebėjimą',
   excerpt: 'Ištrinti išrašą',
 };
 
 export const deleteDescriptionFirstPart = {
-  tenantUser: 'Ar esate tikri, kad norite pašalinti ',
-  request: 'Ar esate tikri, kad norite ištrinti ',
+  entity: 'Ar esate tikri, kad norite pašalinti',
 };
 
 export const deleteDescriptionSecondPart = {
-  tenantUser: ' darbuotoją?',
+  tenantUser: 'darbuotoją?',
   request: 'prašymą?',
+  form: 'stebėjimą?',
   excerpt: 'išrašą?',
 };