bluewave-labs / bluewave-onboarding

BlueWave Onboard

BlueWave Onboard helps app owners build knowledge and user-experience oriented apps. It includes the following features:

• Welcome tours
• Product hints
• Checklists
• Popups
• Banners
• Links

This is a work-in-progress application. The source code is available under GNU AGPLv3.

bluewave-onboarding's Issues

Develop a page for creating new product tour items and show it.

Develop a user interface component for creating new product tour items. This task involves splitting the interface into smaller, reusable components and integrating them into the overall design. Use example as guidance , fill free to change all necessary props and names. Integrate it with our existing components (button etc.)

Requirements:

• Integrate ProductTour page.

• Product Page has to be available if click on left menu sdiebar.

• The main interface should be split into the following components:

• TourList Component

  • Props:
    • items: Array of objects containing title and timestamp.
    • onSelectItem: Function to handle item selection.
  • Example:

    <TourList items={[{ title: 'Tour 1', timestamp: '10:00 AM', idTour: '184293', text: 'some text' }]} onSelectItem={handleSelect} />

• TourListItem Component

  • Props:
    • title: String representing the tour title.
    • timestamp: String representing the time of the tour.
  • Example:

    <TourListItem title="Tour 1" timestamp="10:00 AM" />

• ContentArea Component

  • Props:
    • children: React nodes to be rendered inside the container.
  • Example:

    <ContentArea>
      <div>Content goes here</div>
    </ContentArea>

• ContentHeader Component

  • Props:
    • title: String for the content header.
  • Example:

    <ContentHeader title="All Tours" />

• TourDescriptionText Component

  • Props:
    • description: String for the tour description.
  • Example:

    <TourDescriptionText description="Learn about the dashboard features." />

• InfoTooltip Component

  • Props:
    • text: String for the tooltip text.
  • title: some title text
  • Example:

    <InfoTooltip text="More info here" title="What is a product tour?" />

• Add Delete Icon to TourListItem Component

  • Props:
    • onDelete: Function to handle the delete action.
  • Example:

    <TourListItem title="Tour 1" timestamp="10:00 AM" onDelete={handleDelete} />

• Add Settings Icon to TourListItem Component

  • Props:
    • onEdit: Function to handle the edit action.
  • Example:

    <TourListItem title="Tour 1" timestamp="10:00 AM" onEdit={handleEdit} />

• Implement Confirmation Popup Component

  • Props:
    • open: Boolean to control the visibility of the popup.
    • onConfirm: Function to handle the confirmation action.
    • onCancel: Function to handle the cancellation action.
  • Example:

    <ConfirmationPopup open={isPopupOpen} onConfirm={handleConfirmDelete} onCancel={handleCancelDelete} />

• The delete and settings icons should be Material-UI IconButton components with appropriate icons.

• The confirmation popup should be a Material-UI Dialog component.

• All new functionality should be fully responsive and accessible.

Implementation Details:

• Utilize React hooks for state and lifecycle management within functional components.
• Apply CSS modules or styled-components for scoped styling and to avoid style conflicts.
• Integrate the components into the ProductTour page, ensuring they work together smoothly.
• Follow the color scheme and design guidelines from the provided in figma.
  https://www.figma.com/design/MLPbP1HM2L9ON6f88pHTee/User-onboarding?node-id=0-1&t=zfaJdBG4PYDSysBJ-1
  

Defining endpoints for fetching different types of popups based on user context or application state.

Build the component CreateActivityButton

To-Do List:

• Begin by creating a new branch from the develop branch. The branch name should be same of the task name feature/issue-number-description.

• Build the component CreateActivityButton tour/popup/etc.(use exisiting button component frontend\src\components\Button\Button.jsx)

• Ensure that each component is customizable through props and use the project default styles and color themes.

• Make sure to apply the project's default styles (./CreateActivityButtonStyles.css) to the components. Modify the CSS file to support the new components, using constants for colors and styles that align with the global theme.

• Define PropTypes for each new component to ensure proper prop validation.

• Create test cases to verify that the components render correctly with different props.
  

Implement text fields, charts, popup modal, tooltips, logos and editor design

• Text fields
• Charts
• Popup modal
• Tooltips
• Logos
• Editor design

Implement Home Page Content Components

To-Do List:

• Begin by creating a new branch from the develop branch. The branch name should be same of the task name feature/issue-number-description.

• Build the content components for the Home Page, which include:

  • User title component (e.g., "Hello, [User]")
  • Date display component (e.g., "Today is [Day], [Date]")
  • Statistic cards displaying metrics such as "Monthly active users," "Tour views," etc.
  • CreateActivityButton "Create a tour" button component and others activities.

• Ensure that each component is customizable through props and use the project default styles and color themes.

• Make sure to apply the project's default styles (./HomePageContentStyles.css) to the components. Modify the CSS file to support the new components, using constants for colors and styles that align with the global theme.

• Define PropTypes for each new component to ensure proper prop validation.

• Create test cases to verify that the components render correctly with different props.

Props examples:

UserTitle.propTypes = {
  userName: PropTypes.string.isRequired,
};
DateDisplay.propTypes = {
  dayOfWeek: PropTypes.string.isRequired, 
  date: PropTypes.string.isRequired,
};
StatisticCard.propTypes = {
  metricName: PropTypes.string.isRequired,
  metricValue: PropTypes.number.isRequired,
  changeType: PropTypes.oneOf(['increase', 'decrease']), 
};
CreateActivityButton.propTypes = {
  iconName: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  onButtonClick: PropTypes.func.isRequired,
};

Visual Reference:

The design and functionality expected for the Home Page content are based on the provided image.
https://www.figma.com/design/MLPbP1HM2L9ON6f88pHTee/User-onboarding?node-id=11-37642&t=AhexSZE5D9WsJT08-4

Remove the 30-day trial wording in the signup page

As per what the issue says.

Implement backend logic for Login folder

API Requests:

• Add the necessary API requests for login functionality.
• Ensure endpoints cover login, account creation, password reset, and email verification.
• Implement these API requests in frontend/src/services/apiServices.js.

Page Refactoring:

• Ensure all login-related pages are properly routed.
• Optimize the logic structure within these pages.
• Split the pages into smaller, reusable components if necessary.

Endpoint Emulation:

• Use Postman or another tool to emulate endpoint calls and verify functionality.

Routing examples:

<Route path="/login" component={LoginPage} />
<Route path="/create-account" component={CreateAccountPage} />
<Route path="/forgot-password" component={ForgotPasswordPage} />
<Route path="/check-email" component={CheckYourEmailPage} />
<Route path="/reset-password" component={PasswordResetPage} />
<Route path="/set-new-password" component={SetNewPasswordPage} />

Choosing a logo for the onboarding app

Refactor 'Buttons' to 'Button' component to make it reusable

We need to refactor the existing "Button" component to make it reusable for our application. Currently, the Buttons component has hardcoded values and lacks flexibility. Implement props to increase flexibility.

• Create the branch from the develop branch for this issue, use exactly the name as the issue title to link it. @SimerdeepSinghGrewal
• Update the "Buttons"-> it has to be "Button" component to accept props for the button text, button click handler, button variant, and any additional styles or classes.
• Ensure the component can handle different types of buttons (e.g., primary, secondary, etc.).
• Make sure the existing styles './ButtonsStyles.css' are applied correctly and update if necessary to support the new prop-based structure. Implement constants in css file, use global color theme colors.
• Implement PropTypes: "see the Switch component as an example"
  Buttons.propTypes = { text: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, variant: PropTypes.oneOf(['text', 'outlined', 'contained']), className: PropTypes.string, };
• Test the Component:
  Create a test parent component to verify the new Button component works as expected with different props.
  Ensure the button click handler works correctly.
  

Building APIs to serve popup content to the frontend application dynamically.

Implement Left Menu, Header, and Dashboard template

• Implement Sidebar - Left Menu
• Create a responsive sidebar component.
• Include navigation links to different sections of the app.
• Implement Routing for Left Menu
• Set up routing for the sidebar navigation.
• Ensure that clicking on sidebar links updates the main content area with the appropriate components
• Implement Header with App Name and Login/Profile
• Add a login/profile dropdown menu on the top right corner.
• Implement Dashboard page

Implementing mechanisms for frontend applications to request specific popups and handle responses accordingly.

ProgressSteps component refactoring

The ProgressSteps component is currently implemented as a single monolithic component. This task involves refactoring it into smaller, reusable subcomponents to avoid code repetition.

• Eliminate repetitive code patterns.
• Extract mockup data to a separate file or a constant within the component.
• Create reusable subcomponents for each part of the ProgressSteps component.
• The refactored ProgressSteps component should function identically to the current implementation.
• All components should be fully tested to ensure they work as expected.
• Ensure that the new subcomponents are flexible and can be reused in other parts of the application if needed.
• Create a StepIcon component that takes completed and iconType as props.
• Develop a StepLine component that renders the connecting line based on the completed prop.
• Implement a Step component that composes the StepIcon, StepLine, and step details.
• Refactor the ProgressSteps component to use the new subcomponents.
• Remove hardcoded mockup data and replace it with props or context.

Implement table with search and pagination, date picker, tabs

Implement the following with Reactjs & MUI:

• #32
• Date picker
• #31

Refactor the 'RadioButton' Component

We need to enhance the existing "RadioButton" component to ensure it aligns with our application's design system and is fully reusable. @KenanTopal

To-Do List:

• Create new branch from the develop branch specifically for this task. The branch name should match the issue title exactly for easy reference.

• Delete/Modify/Create the "RadioButton" component to accept props for:

  • RadioButton text
  • RadioButton selection handler
  • RadioButton style variant
  • Additional styles or classes as needed

• Ensure the "RadioButton" component can accommodate various style variants, such as primary, secondary, etc., to match our design language.

• Confirm that the existing styles in ./RadioButtonStyles.css are correctly implemented. Update the stylesheet as needed to support the new prop-based structure. Utilize constants for colors and styles, referencing the global color theme.

• Define the PropTypes for the "RadioButton" component, follow example:

  RadioButton.propTypes = {
    label: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    variant: PropTypes.oneOf(['default', 'primary', 'secondary']),
    className: PropTypes.string,
  };

Refactor Logos Component to Make it Reusable

We need to refactor the existing Logos component to make it reusable for our application. Currently, the Logos component has hardcoded values. Implement props to increase flexibility.

• Create the branch from develop branch for this issue, use exactly the name as the issue title to link it. @SevinjFeyzi
• Update the Logos component to accept props for the logo sources, alt text, and additional styles or classes.

props example key={index} src={src} alt={altText} className='logoImage'

• Make sure the component can handle a dynamic list of logos.
• Make sure the existing styles in LogosStyles.css are applied correctly and update if necessary to support the new prop-based structure.
• Implement PropTypes: "see the Switch component as an example"
• Test the Component:

Create a test parent component to verify the new Logos component works as expected with different props.
Ensure the component renders the logos correctly.

Finding a React icon library

Discussed here: bluewave-labs/bluewave-hrm#11

Implementing user Logout functionalities

Schema design:

• Define the schema for the tokens

Forget password endpoint:

• Create an endpoint to handle user forget password
• Validate incoming user data (e.g., username uniqueness, password strength)
• Hash and store passwords securely in the database

Logout Endpoint:

• Implement an endpoint for user logout.
• Invalidate or expire the JWT token.

Session management:

• Handle user sessions securely (e.g., token expiration, token refreshing)

Simplified home page

It's in Figma now.

Writing the backend logic for popups

This task includes implementing algorithms to prioritize and sequence popups effectively to guide users through the onboarding process smoothly.

• Writing the backend logic to customize the selection and delivery of popups based on user preference, or other contextual factors.

User login, logout, forgot password screen designs

All designs are in our Figma file (User onboarding section).

Implementing logging mechanisms

When a popup is served and shown to the end user, it must generate a logging event and this must be sent back to the server. Those logging events include but not limited to:

• Type of the popup (e.g guide, tooltip, hotspot, checklist)
• ID of the user
• Showing time
• Completed or not (e.g to find out the abandonment rate)

Later, as this data populates, they will be shown on the dashboard for proper analytics.

Fix Auth migrations and auth controller

• change updated_at to updatedAt in create_users)table migration
• Change { User }to User in auth controller imports.

These were causing problems when I tried to call the auth endpoints. The problems are gone with these fixes.

Implementing user registration, login, and logout functionalities

Schema design:

• Define the schema for the user table, including fields such as username, email, password (hashed), etc.

Registration endpoint:

• Create an endpoint to handle user registration
• Validate incoming user data (e.g., username uniqueness, password strength)
• Hash and store passwords securely in the database

Login endpoint:

• Implement an endpoint for user login
• Verify user credentials against the stored data.
• Generate and return a JWT (JSON Web Token) upon successful authentication.

Logout Endpoint:

• Implement an endpoint for user logout.
• Invalidate or expire the JWT token.

Session management:

• Handle user sessions securely (e.g., token expiration, token refreshing)

Create new endpoints for managing the Tour list

Create new endpoints for managing the Tour list. This will involve setting up routes to handle CRUD operations for tours displayed in the application.

Tasks

• Define the schema for tours in PostgreSQL.
• Set up the Node.js server with the necessary routes.
• Implement the GET /tours endpoint to retrieve all tours.
• Implement the POST /tours endpoint to add a new tour.
• Implement the PUT /tours/:id endpoint to update an existing tour.
• Implement the DELETE /tours/:id endpoint to remove a tour.
• Write test requests for each endpoint. Create a postman collection.

##Criteria

• All endpoints must be secured and only accessible to authorized users.
• The GET /tours endpoint should return a list of tours.
• The data returned should match the structure presented in the provided UI mockup.
• Integration tests should pass with 100% coverage for the new endpoints.

Notes

• The backend logic should be implemented in accordance with the provided picture, ensuring consistency with the UI elements such as tour titles and IDs.

https://www.figma.com/design/MLPbP1HM2L9ON6f88pHTee/User-onboarding?node-id=0-1&t=zfaJdBG4PYDSysBJ-1

Tabs

Building APIs to serve popup content to the frontend application

A set of APIs are required for the popups, hints and banners to be served from the server to the remote application.

This includes the following process:

• The application is loaded. It includes the js loader.
• The js loader asks which widget types must served from the onboarding server (e.g banner, hint, popup etc)
• The js loader server gets the conditions (e.g how many times the popup should be shown, the directory it should be shown etc)

Develop the Avatar Component

Create a new "Avatar" component that meet to our project design system and use across our application. @SevinjFeyzi

To-Do List:

• Start by creating a new branch from the develop branch for this task. Ensure the branch name same the issue title for tracking purposes.

• Create the "Avatar" component to accept props for:

  • Avatar image source
  • Avatar alt text
  • Avatar size (small, medium, large)
  • Additional styles or classes as necessary

• The "Avatar" component should support different sizes and style variants, such as circular or with a border, to fit various UI contexts.

• Verify that the existing styles in ./AvatarStyles.css are applied correctly. Revise the stylesheet to accommodate the new prop-based structure. Use constants for dimensions and refer to the global color theme.

• Clearly define the PropTypes for the "Avatar" component to ensure proper usage:

  Avatar.propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    className: PropTypes.string,
  };

• Implement new Avatar component into right top menu ( frontend\src\components\Header\Header.jsx line:18)
  

Define colors, text, menu icons and popup menu

Implement the following with Reactjs & MUI:

• Drop down with search
• Selectable drop downs
• Define colors
• Define text used in the app
• Implement menu and menu icons
• Implement popover menu

Migration frontend to Vite

Create a new branch and migrate whole project to Vite.

"Register for 30 days" functionality in the login endpoint:

"Register for 30 days" functionality in the login endpoint:

• Create an endpoint to handle user token
• Validate incoming user data (e.g., username uniqueness, password strength)
• Hash and store passwords securely in the database

API endpoints for Users Table

Users Table list with Search and Pagination:

• Create the branch from the develop branch for this issue, use exactly the name as the issue title to link it. @DamilolaAlao
• Create an API endpoint that fetches data for the table. (/api/users-list)
• Ensure that the API response includes the necessary information for rendering the table (e.g., rows, columns, total count).
  Columns Json example:

{
    id: "user hash id",
    name: "Alice Johnson",
    status: "Active",
    role: "Frontend Dev",
    team: "Development",
    hireDate: "10 April, 2024",
}

• Test the API:
  Create a request to endpoint to verify the API url works as expected . Use Postman or any VScode extensions to test it.

Create skeleton for frontend React

Description:

Issue Type: Task

Create the basic structure for the frontend React application to kickstart development. This includes initializing the project, configuring essential files, installing dependencies, and verifying setup.

Tasks:

1. Initialize React project.
2. Set up directory structure.
3. Configure essential files.
4. Install required dependencies.
5. Implement basic React component.
6. Verify setup by running development server.

Acceptance Criteria:

• Project initializes without errors.
• Directory structure is organized.
• Development server runs without issues, displaying basic React component.

Refactor Title Component to Make it Reusable

We need to refactor the existing "Title" component to make it reusable for our application. Currently, the Title component has hardcoded values for the title text and button text. Implement props.

• Create the branch from develop branch for this issue , use exactly name as issue title to link it . @SimerdeepSinghGrewal
• Update the Title component to accept props for the title text, button text, and button click handler.
• Make sure the component can render children components passed to it.
• Make sure the existing styles in TitleStyles.css are applied correctly and update if necessary to support the new prop-based structure.
• Implement PropTypes: "see the Switch component as an example"
• Test the Component:

1. Create a test parent component to verify the new Title component works as expected with different props.
2. Ensure the button click handler works correctly.

Implement and integrate Checkbox component

We need to refactor/create the Checkbox component to make it reusable for our application. Also implement props and ensure it can be integrated into our existing codebase.

Tasks

• Create a new branch from the develop branch named feature/Implement-and-integrate-Checkbox-component.
• Update/create the Checkbox component to accept the following props:
  • label: to specify the text label associated with the checkbox.
  • checked: to determine whether the checkbox is initially checked.
  • onChange: to handle the change event when the checkbox is clicked.
  • variant: to define the checkbox style (e.g., primary, secondary).
  • className: to apply additional CSS classes.
  • style: to apply inline styles.
• Ensure the component can handle different types of checkboxes, such as primary, secondary, etc.
• Apply the existing styles from './CheckboxStyles.css' correctly and update if necessary to support the new prop-based structure.
• Implement constants in the CSS file to use global color theme colors.
  

Build the component TextField

To-Do List:

• Begin by creating a new branch from the develop branch. The branch name should be same of the task name feature/issue-number-description.

• Build the component TextField (refactor existing , replace all outdated code in project related to TextField if necessary ).

• Ensure that each component is customizable through props and use the project default styles and color themes.

• Make sure to apply the project's default styles (./TextFieldStyles.css) to the components. Modify the CSS file to support the new components, using constants for colors and styles that align with the global theme.

• Define PropTypes for each new component to ensure proper prop validation.

• Create test cases to verify that the components render correctly with different props.
  
  https://www.figma.com/design/USQRG7Oacv7uXw8XkTPINq/Style-guide?node-id=0-1&t=U5agXmPAvJQe8j7c-0

Popup design and implementation for product tours, highlights, contextual help, etc

For the popup design and implementation, driver.js can be used. Its API is well-documented and provides most of the features we need (https://driverjs.com/docs/api). Ideally, a full stack engineer can implement driverjs in the Onboarding app.

Currently since we don't have a Chrome extension, the configuration of the elements can be retrieved from the server itself. Check https://driverjs.com/docs/static-tour as an example where the steps can be taken from a configuration file generated in the Onboarding server.

Later, when the Chrome extension is implemented, this configuration can be generated on the extension and then sent to the server, where it will be served to the driverjs endpoint.

Each driverjs instance should be initiated with an API key generated on the Onboarding server.

• #23
• #24
• #25

Tour and banner popup designs

Both are in the Figma file.

Table with search and pagination

Creating popup js code

Implement progress, announcements, sidebar, popup messages, file upload dialog

Implement the following in Reactjs & MUI:

• Progress steps
• Popup messages
• Announcements
• Sidebar
• File upload dialog

Creating test structure for frontend

Set up Vitest for Unit and Integration Tests

• make comparison for Vitest and Cypress

• Install Vitest: Run npm install vitest --save-dev to add Vitest to your project.

• Configure Vitest: Modify your vite.config.js to include the Vitest configuration.

• Write Tests: create couple tests just for example

Set up Cypress for End-to-End Tests

• Install Cypress: Execute npm install cypress --save-dev to install Cypress.
• Interactive Test Runner: Use the Cypress interactive test runner for writing and debugging tests.
• Configure for Vite: Set up Cypress to work with Vite for component testing.

Refactor Title component

frontend\src\components\Title\Title.jsx

Implement button groups, buttons, checkboxes, progress, check icons, avatar and switch toggle

Implement with MUI & Reactjs:

• Button groups
• Buttons
• Checkboxes
• Check icons
• Avatar
• Switch toggle

Authenticate JWT in auth middleware still calls the end function if the token is invalid