Market Place - Frontend

Requirements:

• Endpoint based on adapterId, to GET form fields.
• https://chat.openai.com/share/f3470534-71d5-41b5-8b18-49c78264202f
• https://www.figma.com/file/w4jYcjhGBqAAjhHCk6lTGi/Market-Place-_-New?type=design&node-id=304-90&mode=design&t=BgYTloVdNkAGM3Pu-0
• https://chat.openai.com/share/24f75139-9fb6-4c2d-acf4-f6e29d975b75

Flows

---

[1]. Basic flow

Side Nav → Integration List → List For Adapters → Create New Adapters → Success Message → Redirect to My Integrations.

My Integrations → List of all Integration by users → Edit/Delete → Edit Adapter Details

[2]. API Call Flows:

• Translation API, Account API
• For SideNav Bar → GET Integration List
• GET List for Adapters Based on Integrations
• GET Form Details for selected Adapter NEW API
• POST to create new TenantAdapter for the given accountId and AdapterId

Approach to Create Dynamic Form:

---

Dynamic Json Form:

• First we will call the api to get all the fields for that adapter
• Load the form dynamically
• Check for the reqired field while submiting
• Reformate

Resource:

// Function to handle form submission
function submitForm(event) {
  event.preventDefault();
  
  const formData = {};
  const formElements = event.target.elements;

  for (let i = 0; i < formElements.length; i++) {
    const element = formElements[i];
    if (element.type !== 'submit') {
      // Split the name attribute by '.' to handle nested fields
      const keys = element.name.split('.');
      let currentObj = formData;

      // Traverse through the keys to set the value
      for (let j = 0; j < keys.length - 1; j++) {
        const key = keys[j];
        currentObj[key] = currentObj[key] || {};
        currentObj = currentObj[key];
      }

      // Set the value at the final nested level
      currentObj[keys[keys.length - 1]] = element.value;
    }
  }

  fetch('/newForm', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // Handle success, maybe show a success message
  })
  .catch(error => console.error('Error submitting form:', error));
}

// Attach submit event listener to the form
document.getElementById('customForm').addEventListener('submit', submitForm);