CompanyEditorModal Documentation

Overview

The CompanyEditorModal is a reusable component in the Vantage platform designed to facilitate the creation and editing of company information within the organization. It provides users with a user-friendly interface to manage company attributes such as the company name, active status, and monthly token budget.

Purpose

The primary function of the CompanyEditorModal is to present an intuitive modal dialog for users to input and modify company details. Once the necessary data is entered, users can save changes, and the updated information will be processed and stored within the analytics and data platform.

Settings

The CompanyEditorModal accepts the following settings:

1. isOpen

   • Input Type: Boolean
   • Description: Determines whether the modal is currently open or closed.
   • Default Value: false
   • Behavior: When set to true, the modal is displayed; when false, the modal is hidden.

2. onClose

   • Input Type: Function
   • Description: Callback function invoked when the modal needs to be closed.
   • Behavior: This function clears the current state and hides the modal.

3. company

   • Input Type: Object or null
   • Description: Contains existing company information to populate the modal when in edit mode.
   • Default Value: null
   • Behavior: If provided, the modal will pre-fill the fields with the company data; otherwise, the fields will be empty for the creation of a new company.

4. onSave

   • Input Type: Function
   • Description: Callback function triggered when the user saves the company details.
   • Behavior: This function receives an object containing the new or updated company details, which includes the trimmed name, active status, and token budget.

Internal State Variables

While not direct settings, the component maintains several internal state variables that manage the behavior and display:

1. name

   • Input Type: String
   • Description: Stores the name of the company being created or edited.
   • Default Value: ''
   • Behavior: Captures user input from the company name field. Validation checks for this field ensure it is required before saving changes.

2. isActive

   • Input Type: Boolean
   • Description: Captures whether the company is active or not.
   • Default Value: true
   • Behavior: This toggle input allows users to set or unset the active status of the company.

3. creditBudget

   • Input Type: String
   • Description: Holds the monthly token budget for the company as a string for flexible input handling.
   • Default Value: ''
   • Behavior: Accepts numerical input; if left blank, it indicates no limit on tokens.

4. saving

   • Input Type: Boolean
   • Description: Indicates whether the modal is currently processing a save request.
   • Default Value: false
   • Behavior: When set to true, it disables the save button to prevent multiple submissions.

5. error

   • Input Type: String or null
   • Description: Holds error messages related to validation.
   • Default Value: null
   • Behavior: Displays error messages in the modal if form validation fails.

How It Works

Upon rendering, the CompanyEditorModal component manages its display based on the isOpen prop. The modal will show the appropriate fields for creating or editing company information when invoked. The lifecycle management hook synchronizes the component state with the provided company data when the modal opens.

When the user attempts to save the data, the modal validates that the company name is not empty. If valid, it triggers the onSave function with the entered information. In case of an error during saving, an error message will be displayed within the modal.

Use Cases & Examples

Use Cases

1. Creating a New Company: A business administrator can input a new company's information to onboard it into the platform.
2. Editing an Existing Company: An existing company’s details can be modified, such as changing its active status or updating the token budget.
3. Managing Company Status: A manager can quickly update whether a company is currently active or inactive, which may affect the availability of resources or services.

Example Configuration

Use Case: Creating a new company with a monthly token budget.

Configuration Data:

const newCompanyData = {
    name: "Tech Innovations Inc.",
    is_active: true,
    credit_budget: 5000 // Assuming this is the budget for tokens, set to 5000.
};

// Usage of the CompanyEditorModal component
<CompanyEditorModal
    isOpen={true}
    onClose={() => setOpen(false)}
    company={null} // Indicating a new company creation
    onSave={(data) => {
        console.log("New company created with data: ", data);
        // Logic to handle saving the new company data
    }}
/>

In this example, the modal is opened for creating a new company. Upon the user filling in the modal and clicking save, the provided configuration data will trigger the onSave function with the populated data that can be processed further.