@bigbinary/neeto-crm-frontend

neeto-crm-nano

The neeto-crm-nano facilitates the integration of NeetoCRM with neeto-products. It exports the @bigbinary/neeto-crm-frontend NPM package and neeto-crm-engine Rails engine for development.

Contents

• neeto-crm-nano
  • Contents
  • Development with Host Application
    • Engine
      • Installation
    • Frontend package
      • Installation
      • Instructions for development
      • Components
        • Integrations
  • Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage CRM functionalities across neeto products.

Installation

• Create a config/neeto_crm_engine.yml file and add the required input fields. This file is loaded by the initializer to configure the CRM form. You can edit the fields according to your requirements.

  Example:

  input_fields:
    - value: "email"
      required: true
      allowed_kinds: ["email", "additional_guests"]
    - value: "phone_number"
      required: false
      allowed_kinds: ["phone"]
    - value: "company_name"
      required: false
      allowed_kinds: ["name", "text"]
  

• Add this line to your application's Gemfile:

  source "NEETO_GEM_SERVER_URL" do
    # ..existing gems
  
    gem 'neeto-crm-engine'
  
    # Use this for live development:
    # gem 'neeto-crm-engine', path: "../neeto-crm-nano"
  end
  

• And then execute:

  bundle install
  

• Add this line to your application's config/routes.rb file:

  mount NeetoCrmEngine::Engine => "/neeto_crm_engine"
  

• Run the following command to copy the migrations from the engine to the host application:

  bundle exec rails neeto_crm_engine:install:migrations
  

• Add the migrations to the database:

  bundle exec rails db:migrate
  

• Run the initializer generator to create the initializer file:

  bundle exec rails g neeto_crm_engine:initializer
  

• In the generated config/initializers/neeto_crm_engine.rb file, specify the owner_class and owner_foreign_key to which the Neeto CRM integration should be attached.

  NeetoCrmEngine.owner_class = "User" # Replace with your owner class
  NeetoCrmEngine.owner_foreign_key = "user_id" # Replace with your foreign key
  

Frontend package

Installation

• Install the latest neeto-crm-frontend package using the below command:

  yarn add @bigbinary/neeto-crm-frontend
  

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

Integrations

This component is the main entry point for the CRM UI. It handles the internal routing and renders the appropriate views based on the provided configuration.

Props

• integrationConfig (object): A configuration object for the component with the following structure:
  • resource (object): Contains data related to the resource the CRM is attached to.
    • id (string): The ID of the resource.
    • data (array): This refers to the data of the resource.
    • processedData (array): This refers to the records/questions that should be mapped to the CRM fields.
    • invalidateResource (function): A function to refetch or invalidate the resource data.
  • navigation (object): Contains configuration for navigation elements.
    • breadcrumbs (array): An array of breadcrumb objects ({ text: string; path?: string; }).
    • basePath (string): The base path for the CRM routes (e.g., "/crm").
  • help (object): Contains URLs for help documentation.
    • docUrl (string): URL for the documentation page.
    • walkthroughVideoUrl (string): URL for a walkthrough video.

Usage

import React from "react";

import { Integrations } from "@bigbinary/neeto-crm-frontend";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

const Main = () => {
  const integrationConfig = {
    resource: {
      id: "123",
      data: [],
      processedData: [],
      invalidateResource: () => console.log("Invalidating resource..."),
    },
    navigation: {
      breadcrumbs: [
        { text: "Settings", path: "/settings" },
        { text: "CRM" },
      ],
      basePath: "/crm",
    },
    help: {
      docUrl: "https://help.example.com/crm",
      walkthroughVideoUrl: "https://videos.example.com/crm-walkthrough",
    },
  };

  return (
    <BrowserRouter>
      <Switch>
        <Route
          path="/crm"
          render={() => <Integrations integrationConfig={integrationConfig} />}
        />
      </Switch>
      <ToastContainer />
    </BrowserRouter>
  );
};

export default Main;

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.