feat(procedures): dgpr removal of mocks (#13934)

ref: MANAGER-15473

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/apps/procedures/src/data/api/proceduresApi.ts

@@ -0,0 +1,59 @@
+import { v6 } from '@ovh-ux/manager-core-api';
+import axios from 'axios';
+import { Procedure } from '@/types/procedure';
+
+export type UploadLink = {
+  link: string;
+  method: string;
+  headers: any;
+};
+
+const s3AxiosInstance = axios.create({});
+
+const uploadDocument: (link: UploadLink, file: File) => Promise<void> = (
+  link,
+  file,
+) => {
+  return s3AxiosInstance.put(link.link, file, {
+    headers: {
+      ...link.headers,
+    },
+  });
+};
+
+export const getProceduresAPI = (procedure: Procedure) => {
+  const uri = `/me/procedure/${procedure}`;
+
+  const getStatus: <TResponse>() => Promise<TResponse> = async () => {
+    const { data } = await v6.get(uri);
+    return data;
+  };
+
+  const getDocumentsLinks = <TData extends { numberOfDocuments: number }>(
+    dataQuery: TData,
+  ): Promise<UploadLink[]> => {
+    return v6
+      .post(uri, dataQuery)
+      .then(({ data: dataResponse }) => dataResponse.uploadLinks);
+  };
+
+  const finalize: () => Promise<void> = () => {
+    return v6.post(`${uri}/finalize`).then(({ data }) => data);
+  };
+
+  const uploadDocuments: (
+    files: File[],
+    links: UploadLink[],
+  ) => Promise<void> = async (files, links) => {
+    await Promise.all(
+      links.map((link, index) => uploadDocument(link, files[index])),
+    );
+    return finalize();
+  };
+
+  return {
+    getStatus,
+    getDocumentsLinks,
+    uploadDocuments,
+  };
+};

packages/manager/apps/procedures/src/data/hooks/useProcedures.tsx

@@ -0,0 +1,66 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { getProceduresAPI, UploadLink } from '@/data/api/proceduresApi';
+import { Procedure } from '@/types/procedure';
+
+export type UploadDocumentsProps = {
+  files: File[];
+  links: UploadLink[];
+};
+
+export const useProcedures = (procedure: Procedure) => {
+  const { getStatus, getDocumentsLinks, uploadDocuments } = getProceduresAPI(
+    procedure,
+  );
+
+  const useStatus = <TResponse,>() =>
+    useQuery<TResponse, AxiosError>({
+      queryKey: ['getStatus', procedure],
+      queryFn: getStatus,
+      retry: 0,
+    });
+
+  const useUploadLinks = <TData extends { numberOfDocuments: number }>({
+    onSuccess,
+    onError,
+  }: {
+    onSuccess: (links: UploadLink[]) => void;
+    onError: () => void;
+  }) =>
+    useMutation({
+      mutationFn: (data: TData) => getDocumentsLinks(data),
+      onSuccess: (links) => {
+        onSuccess?.(links);
+      },
+      onError: () => {
+        onError?.();
+      },
+    });
+
+  const useUploadDocuments = ({
+    onSuccess,
+    onError,
+  }: {
+    onSuccess: () => void;
+    onError: () => void;
+  }) =>
+    useMutation({
+      mutationFn: ({ files, links }: UploadDocumentsProps) => {
+        return uploadDocuments(files, links);
+      },
+      onSuccess: () => {
+        onSuccess?.();
+      },
+      onError: () => {
+        // TODO: add logs to better understand what is going wrong on procedure finalization (MANAGER-15281)
+        onError?.();
+      },
+      retry: 1,
+      retryDelay: 3000,
+    });
+  return {
+    useStatus,
+    useUploadLinks,
+    useUploadDocuments,
+  };
+};

packages/manager/apps/procedures/src/pages/disableMFA/DisableMFA.page.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Home from './DisableMFA.page';
+import { useProcedures } from '@/data/hooks/useProcedures';
 
 const mockedUsedNavigate = vi.fn();
 const mockedUsedLocation = vi.fn();
@@ -28,8 +29,10 @@ vi.mock('@/components/Loading/Loading', () => ({
   default: () => <p>TestLoading</p>,
 }));
 
-vi.mock('@/data/hooks/useStatus', () => ({
-  useFetch2faStatus: () => fetch2faStatusFakeResponse,
+vi.mock('@/data/hooks/useProcedures', () => ({
+  useProcedures: () => ({
+    useStatus: () => fetch2faStatusFakeResponse,
+  }),
 }));
 
 describe('DisableMFA.page', () => {