Feature: Onboarding page for self-hosted installations

Author: Navaneeth-pk

app/controllers/metadata_controller.rb

@@ -23,7 +23,8 @@ def index
     render json: { 
       latest_version: data["latest_version"],
       installed_version: installed_version,
-      version_ignored: data["version_ignored"]
+      version_ignored: data["version_ignored"],
+      onboarded: data["onboarded"] || false
     }
   end
 
@@ -34,6 +35,27 @@ def skip_version
     Metadatum.first.update(data: data)
   end
 
+  def skip_onboarding
+    data = Metadatum.first&.data
+    data["onboarded"] = true
+    Metadatum.first.update(data: data)
+  end
+
+  def finish_installation
+
+    name = params[:name]
+    email = params[:email]
+
+    response = HTTParty.post('https://hub.tooljet.io/subscribe',
+      verify: false,
+      body: { name: name, email: email, installed_version: TOOLJET_VERSION }.to_json,
+      headers: { "Content-Type" => "application/json" })
+
+    data = Metadatum.first&.data
+    data["onboarded"] = true
+    Metadatum.first.update(data: data)
+  end
+
   private 
       def check_for_updates(current_data, installed_version)
 

config/application.rb

@@ -19,6 +19,8 @@
 # you've limited to :test, :development, or :production.
 Bundler.require(*Rails.groups)
 
+TOOLJET_VERSION = '0.5.3'
+
 module ToolJet
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.

config/routes.rb

@@ -45,6 +45,8 @@
   resources :metadata, only: [:index] do 
     collection do
       post '/skip_version', to: 'metadata#skip_version'
+      post '/skip_onboarding', to: 'metadata#skip_onboarding'
+      post '/finish_installation', to: 'metadata#finish_installation'
     end
   end
 

frontend/src/App/App.jsx

@@ -13,14 +13,16 @@ import '@/_styles/theme.scss';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ManageOrgUsers } from '@/ManageOrgUsers';
+import { OnboardingModal } from '@/Onboarding/OnboardingModal';
 
 class App extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       currentUser: null,
-      fetchedMetadata: false
+      fetchedMetadata: false,
+      onboarded: true
     };
   }
 
@@ -36,11 +38,11 @@ class App extends React.Component {
   }
 
   render() {
-    const { currentUser, fetchedMetadata, updateAvailable } = this.state;
+    const { currentUser, fetchedMetadata, updateAvailable, onboarded } = this.state;
 
     if(currentUser && fetchedMetadata === false) {
       tooljetService.fetchMetaData().then((data) => { 
-        this.setState({ fetchedMetadata: true });
+        this.setState({ fetchedMetadata: true, onboarded: data.onboarded });
 
         if(data.installed_version < data.latest_version && data.version_ignored === false) { 
           this.setState({ updateAvailable: true });
@@ -60,6 +62,10 @@ class App extends React.Component {
             </div>
           </div>}
 
+          {!onboarded && 
+            <OnboardingModal />
+          }
+
           <ToastContainer />
 
           <PrivateRoute exact path="/" component={HomePage} />

frontend/src/Onboarding/OnboardingModal.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { tooljetService } from '@/_services';
+import Modal from 'react-bootstrap/Modal';
+
+class OnboardingModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showModal: true,
+      options: {
+
+      }
+    };
+  }
+
+  componentDidMount() {
+  }
+
+  hideModal = () => {
+    this.setState({
+      showModal: false
+    });
+  };
+
+  finishOnboarding = () => {
+    this.setState({
+      showModal: false
+    });
+
+    tooljetService.finishOnboarding(this.state.options);
+  }
+
+  skipOnboard = () => {
+    tooljetService.skipOnboarding();
+    this.setState({showModal: false});
+  }
+
+  changeOptions = (option, value) => {
+    this.setState({
+      options: {
+        ...this.state.options,
+        [option]: value
+      }
+    });
+  };
+
+
+  render() {
+
+    return (
+      <Modal show={this.state.showModal} size="md" backdrop="static" centered={true} keyboard={true} onEscapeKeyDown={this.hideModal}>
+        <Modal.Header>
+          <Modal.Title className="text-center">
+            Finish ToolJet installation
+          </Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <h3>Receive product updates from the ToolJet team? </h3>
+          <small>We hate spam and we will never spam</small>
+
+          <input
+            onChange={(e) => onComponentOptionChanged(component, 'value', e.target.value)}
+            type="text"
+            className="form-control mt-3"
+            placeholder={'Your name'}
+            onChange={(e) => {
+              this.changeOptions('name', e.target.value);
+            }}
+          />
+
+          <input
+            onChange={(e) => onComponentOptionChanged(component, 'value', e.target.value)}
+            type="text"
+            className="form-control mt-3"
+            placeholder={'Your email'}
+            onChange={(e) => {
+              this.changeOptions('email', e.target.value);
+            }}
+          />
+
+        </Modal.Body>
+
+        <Modal.Footer>
+          <div className="row w-100">
+            <div className="col">
+              <button
+                className={`btn btn-primary`}
+                onClick={this.finishOnboarding}
+              >
+                Finish setup
+            </button>
+            </div>
+            <div className="col-auto">
+              <a onClick={this.skipOnboard} className="mt-2">
+                Skip
+            </a>
+            </div>
+          </div>
+
+
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+export { OnboardingModal };

frontend/src/_components/Header.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { authenticationService } from '@/_services';
+import { history } from '@/_helpers';
 
 export const Header = function Header({
 

frontend/src/_services/tooljet.service.js

@@ -3,7 +3,9 @@ import { authHeader, handleResponse } from '@/_helpers';
 
 export const tooljetService = {
   fetchMetaData,
-  skipVersion
+  skipVersion,
+  skipOnboarding,
+  finishOnboarding
 };
 
 function fetchMetaData() {
@@ -22,4 +24,25 @@ function skipVersion() {
   };
 
   return fetch(`${config.apiUrl}/metadata/skip_version`, requestOptions).then(handleResponse);
-}
+}
+
+function skipOnboarding() { 
+  const requestOptions = {
+    method: 'POST',
+    headers: authHeader()
+  };
+
+  return fetch(`${config.apiUrl}/metadata/skip_onboarding`, requestOptions).then(handleResponse);
+}
+
+function finishOnboarding(options) { 
+  const requestOptions = {
+    method: 'POST',
+    headers: authHeader(),
+    body: JSON.stringify({ 
+      ...options
+    })
+  };
+
+  return fetch(`${config.apiUrl}/metadata/finish_installation`, requestOptions).then(handleResponse);
+}