[#1726] Customize Start a New Conversation button (#1731)

* edited and added customization for start a new conversation button * updated button name
airyhq · May 5, 2021 · 80e6143 · 80e6143
1 parent 96a2ad5
commit 80e6143
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/frontend/chat-plugin/src/components/chat/index.tsx b/frontend/chat-plugin/src/components/chat/index.tsx
@@ -188,7 +188,10 @@ const Chat = (props: Props) => {
             setNewConversation={setNewConversation}
           />
         ) : (
-          <NewConversation reAuthenticate={reAuthenticate} />
+          <NewConversation
+            reAuthenticate={reAuthenticate}
+            startNewConversationText={config.startNewConversationText || null}
+          />
         );
 
   const bubble = props.bubbleProp

diff --git a/frontend/chat-plugin/src/components/newConversation/index.module.scss b/frontend/chat-plugin/src/components/newConversation/index.module.scss
@@ -5,7 +5,6 @@
 .newConversation {
   display: flex;
   justify-content: center;
-  padding-left: 20px;
   margin: 0;
   font-family: 'Lato', sans-serif;
   color: var(--color-airy-blue);
@@ -19,12 +18,32 @@
   margin: 0;
 }
 
-.newConversationLink {
+.startConversationContainer {
   display: flex;
   justify-content: center;
+  width: 100%;
   margin-bottom: 20px;
+}
+
+.newConversationLink,
+.newConversationLink:hover,
+.newConversationLink:active {
+  text-decoration: none;
+  color: var(--color-airy-blue);
   font-family: 'Lato', sans-serif;
+  font-size: 16px;
+}
+
+.newConversationButton {
   font-weight: 600;
-  font-size: 20px;
-  color: #1578d4;
+  line-height: 16px;
+  height: 40px;
+  background-color: white;
+  border-radius: 8px;
+  border: 1px solid var(--color-airy-blue);
+  cursor: pointer;
+  padding: 8px 10px;
+  &:hover {
+    background-color: rgba(128, 128, 128, 0.173);
+  }
 }
diff --git a/frontend/chat-plugin/src/components/newConversation/index.tsx b/frontend/chat-plugin/src/components/newConversation/index.tsx
@@ -4,24 +4,26 @@ import {cyChatPluginStartNewConversation} from 'chat-plugin-handles';
 
 type newConversationProps = {
   reAuthenticate: () => void;
+  startNewConversationText: string;
 };
 
 const NewConversation = (props: newConversationProps) => {
   return (
     <div>
       <div className={style.paragraphWrapper}>
-        <p className={style.newConversation}>Your conversation has ended. Thank you for</p>{' '}
-        <p className={style.newConversationLine}>chatting with us today.</p>
+        <p className={style.newConversation}>Your conversation has ended.</p>
       </div>
 
-      <div>
-        <a
-          href=""
-          onClick={props.reAuthenticate}
-          className={style.newConversationLink}
-          data-cy={cyChatPluginStartNewConversation}>
-          Click Here To Start a New Conversation
-        </a>
+      <div className={style.startConversationContainer}>
+        <button className={style.newConversationButton}>
+          <a
+            href=""
+            onClick={props.reAuthenticate}
+            data-cy={cyChatPluginStartNewConversation}
+            className={style.newConversationLink}>
+            {props.startNewConversationText || 'Start a new Conversation'}
+          </a>
+        </button>
       </div>
     </div>
   );

diff --git a/frontend/chat-plugin/src/config.ts b/frontend/chat-plugin/src/config.ts
@@ -7,6 +7,7 @@ export type RenderProp = (ctrl?: RenderCtrl) => JSX.Element;
 export type Config = {
   welcomeMessage?: {};
   headerText?: string;
+  startNewConversationText?: string;
   headerTextColor?: string;
   backgroundColor?: string;
   primaryColor?: string;

diff --git a/frontend/ui/src/pages/Channels/Providers/Airy/ChatPlugin/sections/CustomiseSection.tsx b/frontend/ui/src/pages/Channels/Providers/Airy/ChatPlugin/sections/CustomiseSection.tsx
@@ -12,6 +12,7 @@ interface CustomiseSectionProps {
 
 export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
   const [headerText, setHeaderText] = useState('');
+  const [startNewConversationText, setStartNewConversationText] = useState('');
   const [bubbleIconUrl, setBubbleIconUrl] = useState('');
   const [sendMessageIconUrl, setSendMessageIconUrl] = useState('');
   const [headerTextColor, setHeaderTextColor] = useState('');
@@ -44,6 +45,7 @@ export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
   const getTemplateConfig = () => {
     if (
       headerText === '' &&
+      startNewConversationText === '' &&
       bubbleIconUrl === '' &&
       sendMessageIconUrl === '' &&
       headerTextColor === '' &&
@@ -55,6 +57,7 @@ export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
     }
     let config = '';
     if (headerText !== '') config += `\n              headerText: '${headerText}',`;
+    if (startNewConversationText !== '') config += `\n    startNewConversationText: '${startNewConversationText}',`;
     if (bubbleIconUrl !== '') config += `\n              bubbleIcon: '${bubbleIconUrl}',`;
     if (sendMessageIconUrl !== '') config += `\n              sendMessageIcon: '${sendMessageIconUrl}',`;
     if (headerTextColor !== '') config += `\n              headerTextColor: '${headerTextColor}',`;
@@ -73,6 +76,7 @@ export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
     config: {
       showMode: true,
       ...(headerText && {headerText}),
+      ...(startNewConversationText && {startNewConversationText}),
       ...(headerTextColor && {headerTextColor}),
       ...(primaryColor && {primaryColor}),
       ...(accentColor && {accentColor}),
@@ -126,6 +130,18 @@ export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
           height={32}
           fontClass="font-base"
         />
+        <Input
+          type="text"
+          name="startNewConversationText"
+          value={startNewConversationText}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setStartNewConversationText(e.target.value);
+          }}
+          label="Start new Conversation Text"
+          placeholder="(optionally) add a text"
+          height={32}
+          fontClass="font-base"
+        />
         <Input
           type="url"
           name="bubbleIconUrl"