feat(popup): add step content when empty

erxes · Aug 28, 2020 · 0939533 · 0939533
1 parent dbb06d1
commit 0939533
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/ui/src/modules/inbox/components/leftSidebar/styles.ts b/ui/src/modules/inbox/components/leftSidebar/styles.ts
@@ -65,6 +65,10 @@ const FlexContent = styled.div`
   .tags {
     margin-top: 5px;
     line-height: 1;
+
+    > span {
+      margin-bottom: 3px;
+    }
   }
 `;
 
@@ -133,6 +137,7 @@ const RowItem = styledTS<{
     css`
       background: ${colors.bgUnread};
       border-top: 1px solid rgba(0,0,0,0.05);
+      border-left: 1px solid ${colors.colorSecondary};
       margin-top: -1px;
 
       ${MessageContent} {

diff --git a/ui/src/modules/knowledgeBase/components/article/ArticleList.tsx b/ui/src/modules/knowledgeBase/components/article/ArticleList.tsx
@@ -43,8 +43,6 @@ class ArticleList extends React.Component<Props> {
       <DataWithLoader
         loading={loading}
         count={articles.length}
-        emptyText="Articles can address any number of issues your customers encounter. Types of knowledge articles can include solutions to common issues, product or feature documentation, FAQ's and much more."
-        emptyImage="/images/actions/8.svg"
         emptyContent={<EmptyContent content={EMPTY_CONTENT_KNOWLEDGEBASE} />}
         data={this.renderArticles()}
       />

diff --git a/ui/src/modules/leads/components/List.tsx b/ui/src/modules/leads/components/List.tsx
@@ -1,12 +1,14 @@
 import Button from 'modules/common/components/Button';
 import CountsByTag from 'modules/common/components/CountsByTag';
 import DataWithLoader from 'modules/common/components/DataWithLoader';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
 import FormControl from 'modules/common/components/form/Control';
 import Pagination from 'modules/common/components/pagination/Pagination';
 import Table from 'modules/common/components/table';
 import { __ } from 'modules/common/utils';
 import Wrapper from 'modules/layout/components/Wrapper';
 import { BarItems } from 'modules/layout/styles';
+import { EMPTY_CONTENT_POPUPS } from 'modules/settings/constants';
 import TaggerPopover from 'modules/tags/components/TaggerPopover';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -151,8 +153,7 @@ class List extends React.Component<Props, {}> {
             data={content}
             loading={loading}
             count={integrations.length}
-            emptyText="There is always a pop ups!"
-            emptyImage="/images/actions/12.svg"
+            emptyContent={<EmptyContent content={EMPTY_CONTENT_POPUPS} maxItemWidth="360px" />}
           />
         }
       />

diff --git a/ui/src/modules/settings/constants.ts b/ui/src/modules/settings/constants.ts
@@ -97,6 +97,25 @@ export const EMPTY_CONTENT_SCRIPT = {
   ]
 };
 
+export const EMPTY_CONTENT_POPUPS = {
+  title: "Getting Started with erxes Popups",
+  description: "Never miss a potential lead by capturing them with a customizable Popups & Forms",
+  steps: [
+    {
+      title: "Create Popup",
+      description: "Fill out the details and create your popup message or form",
+      url: "/leads/create",
+      urlText: "Create Popup"
+    },
+    {
+      title: "Install the script",
+      description: "Copy the individual script or use Script Manager to avoid script duplication errors if you’re planning to display this popup along with any other erxes widgets",
+      url: "/settings/scripts",
+      urlText: "Go to Script Manager"
+    }
+  ]
+};
+
 export const EMPTY_CONTENT_ENGAGE = {
   title: "Getting Started with Engage",
   description: "Learn how to use this feature to engage your contacts and drive conversations.",