CompanyEditorModal Documentation

Purpose

The CompanyEditorModal is a modal component designed for editing or creating company information within the Vantage analytics and data platform. It provides users with a user-friendly interface to input and modify details such as the company name, monthly token budget, and the company's active status. This component helps facilitate proper data management by ensuring that company details are structured and up-to-date.

Settings

The CompanyEditorModal has several settings that control its behavior and appearance. Below is a comprehensive explanation of each setting.

1. isOpen

• Input Type: Boolean
• Description: Determines whether the modal is displayed. If true, the modal is shown; if false, it is hidden. The state is typically controlled by a parent component that manages the visibility of the modal.
• Default Value: false

2. onClose

• Input Type: Function
• Description: A callback function to be executed when the modal is closed. This function is responsible for updating the state of the parent component to hide the modal.
• Default Value: None (must be provided)

3. company

• Input Type: Object (optional)
• Description: An object representing the company details to be edited. If this object is provided, the modal populates its fields with the company's existing information. If not provided, the fields will be empty, allowing for the creation of a new company.
• Default Value: null

4. onSave

• Input Type: Function
• Description: A callback function to be executed when the user saves the company details. It receives the company information in an object format, including the name, active status, and budget, which can then be processed (e.g., saved to a database).
• Default Value: None (must be provided)

Working Mechanism

The CompanyEditorModal operates as follows:

1. State Management:

   • The component uses local state variables to maintain input values (name, isActive, creditBudget), saving status (saving), and error messages (error).
   • It initializes these states depending on whether it is in "edit" or "create" mode when opened.

2. Effect Hook:

   • The lifecycle management hook watches the isOpen and company props. When the modal opens, it populates the input fields based on the company object, if provided.

3. Save Handling:

   • The modal features a handleSave function that validates the user inputs. If the company name is empty, it sets an error message. Otherwise, it calls the onSave function with the trimmed input values. It converts creditBudget to a number if it is not left blank.

4. UI Structure:

   • The modal contains input fields for the company name and monthly token budget, an active status switch, and action buttons (Cancel and Save).
   • The modal uses conditional rendering to display error messages and adjusts button states based on the saving status or input validation.

Data Expectations

The CompanyEditorModal expects the following data formats:

• Company Object: If provided, this object should have the following structure:
  jsonCopy

  {
    "name": "string",
    "is_active": "boolean",
    "creditBudget": "number or null"
  }

• onSave Function Parameter: This function should handle the following data:
  jsonCopy

  {
    "name": "string",
    "is_active": "boolean",
    "credit_budget": "number or null"
  }

Use Cases & Examples

Use Case 1: Creating a New Company

A business needs to onboard a new client in their system. The CompanyEditorModal can be used to collect the client's details, ensuring all necessary information is obtained.

Use Case 2: Editing an Existing Company

Users in an organization might need to update a company's information, such as changing the monthly token budget or activating/deactivating the company's status to reflect current operations.

Use Case 3: Managing Company Data for Analytics Billing

Business managers need to monitor and adjust companies' token budgets based on their usage for the analytics platform, ensuring that only active companies incur charges and budgets are managed effectively.

Example Configuration

Scenario: Editing a Company

When a user selects a company to edit, the modal can be initialized with the following props:

<CompanyEditorModal
  isOpen={true}
  onClose={() => setShowModal(false)}
  company={{
    name: "Acme Corp",
    is_active: true,
    creditBudget: 1000
  }}
  onSave={(data) => {
    // Save the company data to the database
    updateCompanyInDatabase(data);
  }}
/>

In this scenario, the modal will be displayed with the fields pre-filled with "Acme Corp" as the company name, set as active, and a monthly token budget of 1000. The user can make necessary changes and save the updated information, which will be processed by the onSave function.