feat(common): add empty content to engage, messenger, scriptManager

ui/src/modules/common/components/empty/EmptyContent.tsx

@@ -20,7 +20,7 @@ function EmptyContent({ content, vertical, maxItemWidth }: Props) {
 			return null;
 		}
 
-		const buttonText = text || __('Learn More');
+		const buttonText = __(text) || __('Learn More');
 
 		if(isOutside) {
 			return (
@@ -50,8 +50,8 @@ function EmptyContent({ content, vertical, maxItemWidth }: Props) {
 						max={maxItemWidth}
 					>
 						{step.icon ? <Icon size={16} icon={step.icon} /> : <i>{index + 1}</i>}
-						<h4>{step.title}</h4>
-						<p>{step.description}</p>
+						<h4>{__(step.title)}</h4>
+						{step.html ? <p dangerouslySetInnerHTML={{ __html: step.description }}/> : <p>{__(step.description)}</p>}
 						<Action>
 							{renderButton(step.url, step.urlText, step.isOutside, step.target)}
 						</Action>

ui/src/modules/common/components/empty/constants.ts

@@ -1,3 +1,3 @@
 export const ITEM_COLORS = [
-  "#3bc5cb", "#65b657", "#f9b920", "#2649f2", "#e64b4b", "#5b48a2"
+  "#3bc5cb", "#f9b920", "#2649f2", "#65b657", "#e64b4b", "#5b48a2"
 ];

ui/src/modules/common/components/empty/styles.ts

@@ -1,20 +1,20 @@
 import { darken, rgba } from 'modules/common/styles/color';
 import styled from 'styled-components';
 import styledTS from 'styled-components-ts';
-import { colors } from '../../styles';
+import { colors, dimensions } from '../../styles';
 
 const Container = styled.div`
   display: flex;
   min-height: 100%;
   flex: 1;
   justify-content: center;
   align-items: center;
-  padding: 20px 40px;
+  padding: ${dimensions.coreSpacing}px ${dimensions.coreSpacing * 2}px;
 	background: ${colors.bgLight};
 	flex-direction: column;
 
 	h2 {
-		margin: 0px 0 10px;
+		margin: 0px 0 ${dimensions.unitSpacing}px;
 		font-weight: 700;
 		text-align: center;
 	}
@@ -47,13 +47,12 @@ const Action = styled.div`
 	}
 `;
 
-
 const ItemContent = styledTS<{ color: string, vertical?: boolean; max?:string }>(styled.div)`
 	background: ${props => rgba(props.color, 0.2)};
 	padding: 25px 30px;
 	border-radius: 5px;
 	margin: 10px;
-	min-width: 220px;
+	min-width: 240px;
 	max-width: ${props => props.vertical ? '420px' : props.max};
 	flex: 1;
 	display: flex;
@@ -64,7 +63,7 @@ const ItemContent = styledTS<{ color: string, vertical?: boolean; max?:string }>
 	transition: background 0.3s ease;
 
 	h4 {
-		margin: 20px 0 10px;
+		margin: ${dimensions.coreSpacing}px 0 ${dimensions.unitSpacing}px;
 		font-size: 16px;
 		font-weight: 700;
 		line-height: 20px;
@@ -82,9 +81,21 @@ const ItemContent = styledTS<{ color: string, vertical?: boolean; max?:string }>
 		margin: 0 0 20px;
 	}
 
-	&:hover {
-		background: ${props => rgba(props.color, 0.3)};
-		border-color: ${props => props.color};
+	strong {
+		font-weight: 600;
+	}
+
+	ul {
+		padding-left: ${dimensions.coreSpacing}px;
+		margin: 0;
+
+		li {
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin: 0;
+			}
+		}
 	}
 	
 	> i {
@@ -98,6 +109,11 @@ const ItemContent = styledTS<{ color: string, vertical?: boolean; max?:string }>
 		display: block;
 		font-style: normal;
 	}
+
+	&:hover {
+		background: ${props => rgba(props.color, 0.3)};
+		border-color: ${props => props.color};
+	}
 `;
 
 export { Container, Items, Action, ItemContent };

ui/src/modules/engage/components/MessageList.tsx

@@ -1,11 +1,13 @@
 import Button from 'modules/common/components/Button';
 import DataWithLoader from 'modules/common/components/DataWithLoader';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
 import FormControl from 'modules/common/components/form/Control';
 import ModalTrigger from 'modules/common/components/ModalTrigger';
 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 { EMPTY_CONTENT_ENGAGE } from 'modules/settings/constants';
 import TaggerPopover from 'modules/tags/components/TaggerPopover';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -177,8 +179,7 @@ class List extends React.Component<Props> {
             data={mainContent}
             loading={loading}
             count={messages.length}
-            emptyText="A strong customer engagement can help to further brand growth and loyalty"
-            emptyImage="/images/actions/14.svg"
+            emptyContent={<EmptyContent content={EMPTY_CONTENT_ENGAGE} />}
           />
         }
       />

ui/src/modules/knowledgeBase/components/article/ArticleRow.tsx

@@ -37,7 +37,7 @@ const ArticleRow = (props: Props) => {
 
   const renderReactions = () => {
     const reactions = Object.entries(props.article.reactionCounts || {});
-    console.log(props.article);
+
     return reactions.map(([key, value]) => (
       <ReactionCount key={key}>
         <img src={key} alt="reaction" /> {value}

ui/src/modules/settings/constants.ts

@@ -11,8 +11,9 @@ export const EMPTY_IMPORT_CONTENT = {
     {
       title: "Create Custom Properties",
       description: "If you wish to import any properties that are not available on erxes, you need to create custom properties",
-      url: "/settings/properties?type=customer",
-      isOutside: false
+      url: "https://www.erxes.org/user/general-settings/#how-to-setup-properties",
+      isOutside: true,
+      target: "_blank"
     },
     {
       title: "Choose the data type",
@@ -96,30 +97,65 @@ export const EMPTY_CONTENT_SCRIPT = {
   ]
 };
 
+export const EMPTY_CONTENT_ENGAGE = {
+  title: "Getting Started with Engage",
+  description: "Learn how to use this feature to engage your contacts and drive conversations.",
+  steps: [
+    {
+      title: "Email",
+      description: "<ul><li><strong><a href='/settings/engage-configs'>Verify</a> your email address</strong> <br/> Make sure it is the same as one of your team members</li><li><strong>Integrate that email address with <a href='/settings/integrations#showImapModal=true'>IMAP</a></strong> <br/> Connect your existing emails address as an integration</li><li><strong>Prepare your contacts by Segment / Tag / Brand</strong> <br/> For more targeted marketing, create a <a href='/segments/new/customer'>Segment</a></li></ul>",
+      html: true,
+      icon: "envelope-edit"
+    },
+    {
+      title: "Messenger",
+      description: "<strong>Prepare your contacts by Segment / Tag / Brand</strong><br/> For more targeted marketing, create a Segment",
+      html: true,
+      url: "/segments/new/customer",
+      urlText: "Create a Segment",
+      icon: "comment-edit"
+    },
+    {
+      title: "SMS",
+      description: "<ul><li><strong><a href='/settings/engage-configs'>Claim</a> your phone number</strong> <br/> Make sure you assigned it to a team member</li><li><strong>Prepare your contacts</strong> <br/> Check the <a href='https://en.wikipedia.org/wiki/E.164' target='_blank'>format</a>, verification status, and primary phone state</li><li><strong><a href='/segments/new/customer'>Create</a> a segment</strong> <br/> Filter all contacts with valid phone numbers and other properties</li></ul>",
+      html: true,
+      icon: "comment-alt-message"
+    }
+  ]
+};
+
 export const EMPTY_CONTENT_MESSENGER = {
   title: "Getting Started with erxes Messenger",
   description: "Learn how the erxes Messenger works and it is set up. It is used in the Team Inbox and Knowledgebase and Engage features uses Messenger.",
   steps: [
     {
       title: "Create a new messenger",
       description: "Click on “Add” and complete all the steps.",
+      url: "/settings/integrations/createMessenger",
+      urlText: "Add Messenger"
     },
     {
       title: "Display your Knowledgebase",
-      description: "Click on “Add” of the Knowledgebase integration, if any, and complete the steps. [Add Knowledgebase]"
+      description: "Click on “Add” of the Knowledgebase integration, if any, and complete the steps.",
+      url: "/settings/integrations#showKBAddModal=true",
+      urlText: "Add Knowledgebase"
     },
     {
       title: "Display your form",
-      description: "Click on “Add” of the Popup integration,if any, and complete the steps. [Add Popup]"
+      description: "Click on “Add” of the Popup integration,if any, and complete the steps.",
+      url: "/settings/integrations#showPopupAddModal=true",
+      urlText: "Add Popup"
     },
     {
       title: "Install the script",
       description: "Copy the script and install it on your website by clicking on the “Install Code” button."
     },
     {
       title: "Avoid duplication of erxes widget scripts",
-      description: "If you wish to display erxes messenger and any other erxes widgets on the same webpage, use the Script Manager to combine scripts and avoid any duplication errors. [Manage Scripts]",
-      icon: "exclamation-circle"
+      description: "If you wish to display erxes messenger and any other erxes widgets on the same webpage, use the Script Manager to combine scripts and avoid any duplication errors.",
+      icon: "exclamation-circle",
+      url: "/settings/scripts",
+      urlText: "Manange Scripts"
     },
   ]
 };

ui/src/modules/settings/integrations/components/store/Entry.tsx

@@ -104,7 +104,7 @@ function renderCreate(createUrl, kind) {
     const content = props => <Lead {...props} />;
 
     return (
-      <ModalTrigger title="Add Pop Ups" trigger={trigger} content={content} />
+      <ModalTrigger title="Add Pop Ups" trigger={trigger} content={content} autoOpenKey="showPopupAddModal" />
     );
   }
 
@@ -116,6 +116,7 @@ function renderCreate(createUrl, kind) {
         title="Add knowledge base"
         trigger={trigger}
         content={content}
+        autoOpenKey="showKBAddModal"
       />
     );
   }

ui/src/modules/settings/scripts/components/List.tsx

@@ -112,7 +112,7 @@ class ScriptList extends React.Component<Props> {
           <HeaderDescription
             icon="/images/actions/23.svg"
             title="Scripts"
-            description={`Script manager allows erxes users to quickly and easily generate and update related scripts for any of their business websites. Set up once and your marketing team will be able to easily create forms, add in chats and list FAQs on any of their businesses websites.`}
+            description={`Script manager allows erxes users to quickly and easily generate and update related scripts for any of their business websites. Set up once and your team will be able to easily display multiple erxes widgets on any of their businesses websites`}
           />
         }
         renderForm={this.renderForm}