SendTileEmailModal Documentation

Purpose

The SendTileEmailModal component is designed to facilitate the process of composing and sending an email containing tile data within the Vantage analytics platform. This modal allows users to summarize key metrics, share data insights, and notify team members effectively.

Settings

1. isOpen

• Type: Boolean
• Description: Controls the visibility of the modal. If true, the modal is displayed; if false, it is hidden.
• Default Value: false

2. onClose

• Type: Function
• Description: Callback function triggered when the modal is closed. This function should handle any necessary cleanup or state updates.
• Default Value: None (required, must be provided)

3. tileTitle

• Type: String
• Description: The title of the tile to be included in the email. This title is displayed prominently in the email body.
• Default Value: '' (empty string)

4. tileData

• Type: Object
• Description: Contains the data related to the tile. This information is utilized to dynamically construct the email's content.
• Default Value: null

5. tileConfig

• Type: Object
• Description: Configurations specific to the tile, which may include visualizations, categories, or key metrics. It enriches the email content with relevant metadata.
• Default Value: null

6. actionConfig

• Type: Object
• Description: Includes configuration options for the action of sending the email. This can specify default recipients, email subject, and the email service being used (e.g., SES, Gmail).
• Default Value: {} (empty object)

a. actionConfig.defaultTo

• Type: String
• Description: A comma-separated string representing default email recipients. When provided, these emails will be pre-selected when the modal opens.
• Default Value: undefined

b. actionConfig.defaultSubject

• Type: String
• Description: Default subject line for the email. If not specified, the modal will use the tileTitle as the subject by default.
• Default Value: undefined

c. actionConfig.emailService

• Type: String
• Description: Specifies which email service should be used to send the email (e.g., 'ses', 'gmail', or 'outlookmail'). This affects how the email is processed and sent.
• Default Value: 'ses'

d. actionConfig.credentialId

• Type: String
• Description: When using certain email services (likely for OAuth integrations), this ID specifies the credential to be used for sending emails.
• Default Value: undefined

Functionality Overview

• The modal renders a form for composing an email, including fields for selecting recipients, entering a subject, and editing the message body.
• It fetches team members and their email addresses from an API endpoint, allowing users to select from recommended recipients.
• The component supports adding custom email addresses and handles validation to ensure duplicates or invalid formats are avoided.
• On clicking the "Send" button, the component sends a POST request to the defined API, sending the tile data, subject, message body, and recipient emails.
• The component provides visual feedback upon successfully sending the email and shows an error message if an error occurs.

Expected Data

The SendTileEmailModal expects a variety of data types for its props, primarily focusing on strings and objects that contain relevant information regarding the email composition and tile metadata. Below are specifics:

• tileData: Should be an object or an array (if wrapping actual data) which holds information that will be included in the email message body.
• tileConfig: Should collate all necessary properties that describe the tile being referenced, like visualization type and category.
• actionConfig: Should provide adequate default settings for the email composition, including service parameters.

Use Cases & Examples

Use Case 1: Team Notification of Data Insights

A project manager wants to notify the analytics team about newly available data metrics from a recent project. Using the SendTileEmailModal, they can easily select relevant team members, fill out a subject line, and describe the insights in the message body.

Use Case 2: Sharing Performance Reports

An analyst needs to share performance reports with stakeholders. By using the SendTileEmailModal, they can attach tile data that visualizes key performance metrics and send it directly to relevant executives.

Example Configuration for Use Case 1

{
    "isOpen": true,
    "onClose": function() { console.log('Modal closed'); },
    "tileTitle": "Quarterly Sales Report",
    "tileData": {
        "data": [
            { "metric": "Sales Growth", "value": "20%" },
            { "metric": "Customer Acquisition", "value": "150 new customers" }
        ]
    },
    "tileConfig": {
        "visualizationType": "bar_chart",
        "subtitle": "Overview of Q3 Performance",
        "category": "Sales"
    },
    "actionConfig": {
        "defaultTo": "john.doe@example.com, jane.smith@example.com",
        "defaultSubject": "Review of Quarterly Sales Metrics",
        "emailService": "gmail",
        "credentialId": "credential_12345"
    }
}

In this configuration, when the modal is opened, it will pre-fill the subject and recipient fields to expedite the email composition process, allowing the user to focus on crafting a meaningful message that summarizes the key metrics seamlessly.