[FIX] Issues on Custom Livechat messages (#648)

* Couple of fixes wrt custom messages

- Fix offline success messages not working
- Support HTML content on Offline message label

* Support markdown data on Instructions panel

* Update storybook

src/routes/LeaveMessage/component.js

@@ -3,6 +3,7 @@ import { h, Component } from 'preact';
 import { Button } from '../../components/Button';
 import { ButtonGroup } from '../../components/ButtonGroup';
 import { Form, FormField, SelectInput, TextInput, Validations } from '../../components/Form';
+import { renderMarkdown } from '../../components/Messages/MessageText/markdown';
 import Screen from '../../components/Screen';
 import { createClassName, sortArrayByColumn } from '../../components/helpers';
 import I18n from '../../i18n';
@@ -183,10 +184,10 @@ export default class LeaveMessage extends Component {
 			{...props}
 		>
 			<Screen.Content>
-				<p className={createClassName(styles, 'leave-message__main-message')}>
-					{hasForm ? message || defaultMessage : unavailableMessage || defaultUnavailableMessage}
-				</p>
-
+				<div className={createClassName(styles, 'leave-message__main-message')}
+					// eslint-disable-next-line react/no-danger
+					dangerouslySetInnerHTML={{ __html: renderMarkdown(hasForm ? message || defaultMessage : unavailableMessage || defaultUnavailableMessage) }}
+				/>
 				{hasForm && this.renderForm(this.props, this.state)}
 			</Screen.Content>
 			<Screen.Footer />

src/routes/LeaveMessage/container.js

@@ -10,14 +10,14 @@ import LeaveMessage from './component';
 
 export class LeaveMessageContainer extends Component {
 	handleSubmit = async (fields) => {
-		const { alerts, dispatch } = this.props;
+		const { alerts, dispatch, successMessage } = this.props;
 
 		await dispatch({ loading: true });
 		try {
 			const payload = parseOfflineMessage(fields);
 			const text = await Livechat.sendOfflineMessage(payload);
 			await ModalManager.alert({
-				text,
+				text: successMessage || text,
 			});
 			parentCall('callback', ['offline-form-submit', fields]);
 			return true;

src/routes/LeaveMessage/styles.scss

@@ -1,10 +1,8 @@
-.leave-message__main {
-	padding: 1rem 1.5rem 0;
+p {
+	margin: 0;
+	padding: 0;
 }
 
-.leave-message__message {
-	margin: 0 0 1rem;
-
-	font-weight: 500;
-	line-height: 1.5;
+.leave-message__main-message {
+	margin-bottom: 0.5rem;
 }