Submit the report form data to the /account/report endpoint

[ricardobrg]

Deliverable

https://github.com/tiki/dashboard/issues/106

Description

POST the form data as multipart form data to /account/report endpoint.

The text-fields should be in the body and the files should be sent as files in multipart form data format.

Acceptance Criteria

• [ ] On form submission the endpoint is called

[ricardobrg]

Sample code:

import FormReq from './FormReq'; // Import your FormReq interface

const submitForm = async (formReq: FormReq) => {
  try {
    // Create a FormData object to handle multipart form data
    const formData = new FormData();

    // Append non-file fields
    formData.append('report', new Blob([JSON.stringify({
      name: formReq.name,
      email: formReq.email,
      companyName: formReq.companyName,
      website: formReq.website,
    })], { type: 'application/json' }));

    // Append files for dataSamples
    if (formReq.dataSamples) {
      formReq.dataSamples.forEach((file, index) => {
        formData.append(`dataSamples`, file);
      });
    }

    // Append files for legalDocuments
    if (formReq.legalDocuments) {
      formReq.legalDocuments.forEach((file, index) => {
        formData.append(`legalDocuments`, file);
      });
    }

    // Send the request to the backend using fetch
    const response = await fetch('/api/report', {
      method: 'POST',
      body: formData, // Send the FormData object
      headers: {
        // 'Content-Type' is not required here; fetch sets it automatically for FormData
      },
    });

    // Check if the response is successful
    if (response.ok) {
      const result = await response.json();
      console.log('Form submitted successfully:', result);
    } else {
      console.error('Error submitting form:', response.statusText);
    }
  } catch (error) {
    console.error('Error submitting form:', error);
  }
};

export default submitForm;