feat(board): add guide content when there is no board/pipeline

ui/src/modules/boards/constants.ts

@@ -29,6 +29,7 @@ export const TEXT_COLORS = [
   '#222',
   '#000'
 ];
+
 export const REMINDER_MINUTES = [
   { _id: '0', name: 'At Time of Due Date' },
   { _id: '5', name: '5 Minutes Before' },
@@ -45,3 +46,39 @@ export const PIPELINE_UPDATE_STATUSES = {
   END: 'end',
   NEW_REQUEST: 'newRequest'
 };
+
+export const EMPTY_CONTENT_DEAL = {
+  title: "Getting Started with Sales Pipeline",
+  description: "Drive leads to a successful close with our Kanban-style boards",
+  steps: [
+    {
+      title: "Create Boards and Pipelines",
+      description: "Track your entire sales pipeline from one dashboard. You can also restrict access to your sales pipelines.",
+      url: "/settings/boards/deal",
+      urlText: "Go to Board & Pipeline"
+    },
+    {
+      title: "Tip: Choose different views",
+      description: "Click on “Boards, Calendar, Conversions” to filter deals",
+      icon: "lightbulb-alt"
+    },
+  ]
+};
+
+export const EMPTY_CONTENT_TASK = {
+  title: "Getting Started with Tasks",
+  description: "Create a more collaborative, self-reliant and cross-linked team with our Kanban-style boards",
+  steps: [
+    {
+      title: "Create your first Task Board",
+      description: "Tip: This could be equivalent to your brands or you can organize by year/project/etc.",
+      url: "/settings/boards/task",
+      urlText: "Go to Board & Pipeline"
+    },
+    {
+      title: "Tip: Filter",
+      description: "Click on “Show Menu” to filter tasks by assigned team members, customers, date, etc.",
+      icon: "lightbulb-alt"
+    },
+  ]
+};

ui/src/modules/boards/containers/Board.tsx

@@ -1,11 +1,13 @@
 import gql from 'graphql-tag';
 import * as compose from 'lodash.flowright';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
 import EmptyState from 'modules/common/components/EmptyState';
 import { IRouterProps } from 'modules/common/types';
 import { withProps } from 'modules/common/utils';
 import React from 'react';
 import { graphql } from 'react-apollo';
 import { withRouter } from 'react-router-dom';
+import { EMPTY_CONTENT_DEAL, EMPTY_CONTENT_TASK } from '../constants';
 import { queries } from '../graphql';
 import { RootBack, ScrolledContent } from '../styles/common';
 import { IOptions, PipelineDetailQueryResponse } from '../types';
@@ -21,6 +23,18 @@ class Board extends React.Component<Props> {
     const { pipelineDetailQuery, queryParams, options } = this.props;
 
     if (!pipelineDetailQuery || !pipelineDetailQuery.pipelineDetail) {
+
+      const type = options.type;
+
+      if (type === "deal" || type === "task") {
+        return (
+          <EmptyContent 
+            content={type === "deal" ? EMPTY_CONTENT_DEAL : EMPTY_CONTENT_TASK} 
+            maxItemWidth="400px" 
+          />
+        );
+      }
+
       return (
         <EmptyState
           image="/images/actions/18.svg"

ui/src/modules/boards/styles/header.ts

@@ -10,6 +10,7 @@ export const PageHeader = styled.div`
   background: ${colors.colorWhite};
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
   min-height: 50px;
+  z-index: 2;
 
   @media (max-width: 768px) {
     min-height: auto;

ui/src/modules/settings/boards/components/Pipelines.tsx

@@ -1,12 +1,14 @@
 import { IBoard, IPipeline } from 'modules/boards/types';
 import { collectOrders } from 'modules/boards/utils';
 import Button from 'modules/common/components/Button';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
 import EmptyState from 'modules/common/components/EmptyState';
 import Table from 'modules/common/components/table';
 import { Count, Title } from 'modules/common/styles/main';
 import { IButtonMutateProps, IRouterProps } from 'modules/common/types';
 import { __ } from 'modules/common/utils';
 import Wrapper from 'modules/layout/components/Wrapper';
+import { EMPTY_CONTENT_DEAL_PIPELINE, EMPTY_CONTENT_TASK_PIPELINE } from 'modules/settings/constants';
 import React from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import PipelineForm from '../containers/PipelineForm';
@@ -105,10 +107,19 @@ class Pipelines extends React.Component<Props, State> {
   }
 
   renderContent() {
-    const { pipelines, options } = this.props;
+    const { pipelines, options, type } = this.props;
     const pipelineName = options ? options.pipelineName : 'pipeline';
 
     if (pipelines.length === 0) {
+      if(type === 'deal' || type === 'task') {
+        return (
+          <EmptyContent 
+            content={type === 'deal' ? EMPTY_CONTENT_DEAL_PIPELINE : EMPTY_CONTENT_TASK_PIPELINE} 
+            maxItemWidth="420px" 
+          />
+        );
+      }
+
       return (
         <EmptyState
           text={`Get started on your ${pipelineName.toLowerCase()}`}

ui/src/modules/settings/constants.ts

@@ -234,3 +234,41 @@ export const EMPTY_CONTENT_CONTACTS = {
     }
   ]
 };
+
+export const EMPTY_CONTENT_DEAL_PIPELINE = {
+  title: "Getting Started with Sales Pipeline",
+  description: "Drive leads to a successful close with our Kanban-style boards",
+  steps: [
+    {
+      title: "Create your first Sales Board",
+      description: "Tip: This could be equivalent to your brands and/or you can organize by year/project/etc.",
+      url: "/settings/boards/deal#showBoardModal=true",
+      urlText: "Create a Board"
+    },
+    {
+      title: "Start adding Pipelines to the Board",
+      description: "Tip: This could be a bit more granular than the Board and/or you can organize by period/project/etc.",
+      urlText: "Create a Pipeline",
+      url: "/settings/boards/deal#showPipelineModal=true"
+    }
+  ]
+};
+
+export const EMPTY_CONTENT_TASK_PIPELINE = {
+  title: "Getting Started with Sales Pipeline",
+  description: "Drive leads to a successful close with our Kanban-style boards",
+  steps: [
+    {
+      title: "Create your first Task Board",
+      description: "Tip: This could be equivalent to your departments and/or you can organize by year/project/etc.",
+      url: "/settings/boards/task#showBoardModal=true",
+      urlText: "Create a Board"
+    },
+    {
+      title: "Start adding Pipelines to the Board",
+      description: "Tip: This could be a bit more granular than the Board and/or you can organize by period/project/etc.",
+      urlText: "Create a Pipeline",
+      url: "/settings/boards/task#showPipelineModal=true"
+    }
+  ]
+};