LandingHeader Component Documentation

Overview

The LandingHeader component is a user interface element designed to enhance the user experience in the Vantage analytics and data platform. It serves as a welcoming header for users upon logging in, providing contextual greetings, the current date, and helpful tips to encourage interaction with the platform's features. This component leverages user session data to customize the greeting and ensure a personalized experience.

Purpose

The main purposes of the LandingHeader component are:

• To greet the user based on the time of day.
• To display the current date in a user-friendly format.
• To provide a daily tip or suggestion for utilizing platform features efficiently.

By integrating these elements, the LandingHeader creates an engaging entry point for users to explore the functionalities offered by Vantage.

Settings

The LandingHeader component does not have explicit external settings passed as props; instead, it dynamically generates content based on user session data and predefined tips. Below, we summarize essential internal configurations it relies upon:

Internal Configuration

1. User Session

   • Input Type: Session object (derived from authentication)
   • Purpose: The component uses the user session to extract the user's first name for personalized greetings. Changing the session information (e.g., logging in as a different user) changes the displayed name.
   • Default Value: 'User' (in case the user name is not available)

2. Greeting Messages

   • Input Type: Derived via function
   • Purpose: The greeting changes based on the time of day: "Good morning", "Good afternoon", or "Good evening". This affects not only the text displayed but also the overall user experience.
   • Default Value: Depends on the current time of execution.

3. Date Formatting

   • Input Type: Derived via function
   • Purpose: It formats the current date to include the day of the week and the month and day. Changing the date settings on the system will not affect this as it always fetches the current date.
   • Default Value: Always reflects the current date.

4. Daily Tips

   • Input Type: Array of objects
   • Purpose: The component showcases a rotating daily tip for user engagement. The tip rotates through a predefined list based on the day of the year. Changing the time or date settings on the system will affect the displayed tip.
   • Default Value: First element of the TIPS array based on the current day of the year.

How It Works

The LandingHeader component utilizes the following functionality:

1. Session Management: It uses the useSession hook from next-auth/react to access the user's session data, particularly the user's name.
2. Memoization for Performance: computed values hooks are employed to compute and memoize the greeting, date string, and daily tip. This optimization approach minimizes unnecessary re-rendering of content.
3. Dynamic Rendering: Based on the computed values (greeting, date string, tip) and the user's session, the component builds the DOM structure dynamically.

Rendering Process:

• The user's first name is determined from the session data.
• The appropriate greeting is calculated based on the current hour.
• The date is formatted into a readable string.
• A relevant tip is selected from the array of tips based on the current day of the year.
• All these elements are then displayed in the component's HTML.

Use Cases & Examples

Use Cases

1. New User Onboarding

   • Upon a new user’s first login, LandingHeader provides a friendly greeting, the current date, and tips specifically designed to aid in familiarizing them with the Vantage platform.

2. Daily Engagement for Returning Users

   • For users who log in daily, the component showcases a new tip every day, encouraging them to explore features that they might not have used yet.

3. Adaptive User Experience

   • The LandingHeader can adapt its greeting and tips based on user activity, enhancing the sense of personalization and engagement.

Example Configuration

Use Case: Encourage a new user to start creating dashboards.

Configuration:

• User Logs In: "John Doe".
• Current Date: October 3, 2023.
• Generated Greeting: "Good afternoon, John".
• Daily Tip: "Try AI Forecasting to predict trends right from your dashboards".

Sample Configuration Data (simulated for context):

session = {
  user: {
    name: 'John Doe'
  }
}

// Current system date is set to October 3, 2023

This setup builds an informative and friendly header that not only greets the user but also directs them towards utilizing valuable features of the platform, thus enhancing user engagement and satisfaction.