[#1674] Chatplugin customize problems (#1678)

* fixed shadow problem * reset config * linting
airyhq · Apr 29, 2021 · 6a13489 · 6a13489
1 parent 97666de
commit 6a13489
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 47 deletions.
diff --git a/frontend/chat-plugin/src/App.tsx b/frontend/chat-plugin/src/App.tsx
@@ -17,22 +17,10 @@ export default class App extends Component {
     const queryParams = new URLSearchParams(window.location.search);
     const channelId = queryParams.get('channel_id');
 
-    const customStyle = {
-      background: 'transparent',
-      ...(config?.primaryColor && {
-        '--color-airy-blue': config?.primaryColor,
-      }),
-      ...(config?.accentColor && {
-        '--color-airy-accent': config?.accentColor,
-        '--color-airy-blue-hover': config?.accentColor,
-        '--color-airy-blue-pressed': config?.accentColor,
-      }),
-    };
-
     const apiHost: string = window.airy ? window.airy.host : process.env.API_HOST;
 
     return (
-      <div className={style.container} style={customStyle}>
+      <div className={style.container}>
         {channelId ? (
           <Chat
             channelId={channelId}

diff --git a/frontend/chat-plugin/src/components/chat/index.module.scss b/frontend/chat-plugin/src/components/chat/index.module.scss
@@ -1,3 +1,5 @@
+@import 'assets/scss/fonts.scss';
+
 .main {
   height: 100%;
   padding: 0;
@@ -84,7 +86,7 @@
   position: relative;
 }
 
-.disconnectedOverlay {
+.modalOverlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -97,6 +99,21 @@
   color: white;
 }
 
+.modalCloseChat {
+  @include font-m;
+  width: 100%;
+  margin: 16px;
+  padding: 32px 0 38px 0;
+  background: white;
+  border-radius: 8px;
+  p {
+    text-align: center;
+    font-size: 18px;
+    margin: 0 0 8px 0;
+    color: gray;
+  }
+}
+
 .buttonWrapper {
   height: 30px;
   display: flex;
@@ -114,7 +131,7 @@
   height: 40px;
   background-color: white;
   color: var(--color-airy-blue);
-  border-radius: 4px;
+  border-radius: 8px;
   border: 1px solid var(--color-airy-blue);
   cursor: pointer;
   padding: 8px 10px;
@@ -130,7 +147,7 @@
   height: 40px;
   background-color: var(--color-airy-blue);
   color: white;
-  border-radius: 4px;
+  border-radius: 8px;
   border: none;
   cursor: pointer;
   padding: 8px 10px;

diff --git a/frontend/chat-plugin/src/components/chat/index.tsx b/frontend/chat-plugin/src/components/chat/index.tsx
@@ -24,7 +24,6 @@ import {MessageInfoWrapper} from 'render/components/MessageInfoWrapper';
 const camelcaseKeys = require('camelcase-keys');
 import {cyBubble, cyChatPluginMessageList, cyChatPluginEndChatModalButton} from 'chat-plugin-handles';
 import {getResumeTokenFromStorage, resetStorage} from '../../storage';
-import {ModalDialogue} from '../../components/modal';
 import NewConversation from '../../components/newConversation';
 import {setApiHost, start} from '../../api';
 
@@ -49,6 +48,18 @@ const Chat = (props: Props) => {
     defaultWelcomeMessage.content = config.welcomeMessage;
   }
 
+  const customStyle = {
+    background: 'transparent',
+    ...(config?.primaryColor && {
+      '--color-airy-blue': config?.primaryColor,
+    }),
+    ...(config?.accentColor && {
+      '--color-airy-accent': config?.accentColor,
+      '--color-airy-blue-hover': config?.accentColor,
+      '--color-airy-blue-pressed': config?.accentColor,
+    }),
+  };
+
   const chatHiddenInitialState = (): boolean => {
     if (config.showMode === true) return false;
     if (getResumeTokenFromStorage(props.channelId)) return true;
@@ -205,7 +216,7 @@ const Chat = (props: Props) => {
   };
 
   return (
-    <div className={style.main}>
+    <div className={style.main} style={customStyle}>
       {!isChatHidden && (
         <div
           className={`${style.container} ${styleFor(animation)}`}
@@ -245,32 +256,33 @@ const Chat = (props: Props) => {
               </div>
               <InputBarProp render={inputBar} />
               {connectionState === ConnectionState.Disconnected && (
-                <div className={style.disconnectedOverlay}>Reconnecting...</div>
+                <div className={style.modalOverlay}>Reconnecting...</div>
+              )}
+              {showModal && (
+                <div className={style.modalOverlay}>
+                  <div className={style.modalCloseChat}>
+                    <p>Are you sure you want to end this chat?</p>
+                    <div className={style.buttonWrapper}>
+                      <button className={style.cancelButton} onClick={closeModalOnClick}>
+                        {' '}
+                        Cancel
+                      </button>
+                      <button
+                        className={style.endChatButton}
+                        onClick={cancelChatSession}
+                        data-cy={cyChatPluginEndChatModalButton}>
+                        {' '}
+                        End Chat
+                      </button>
+                    </div>
+                  </div>
+                </div>
               )}
             </div>
           </div>
         </div>
       )}
       <BubbleProp render={bubble} />
-      {showModal && (
-        <ModalDialogue close={closeModalOnClick}>
-          <>
-            <div className={style.buttonWrapper}>
-              <button className={style.cancelButton} onClick={closeModalOnClick}>
-                {' '}
-                Cancel
-              </button>
-              <button
-                className={style.endChatButton}
-                onClick={cancelChatSession}
-                data-cy={cyChatPluginEndChatModalButton}>
-                {' '}
-                End Chat
-              </button>
-            </div>
-          </>
-        </ModalDialogue>
-      )}
     </div>
   );
 };

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
@@ -54,13 +54,13 @@ export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
       return '';
     }
     let config = '';
-    if (headerText !== '') config += `\n              headerText: '${headerText}'`;
-    if (bubbleIconUrl !== '') config += `\n              bubbleIcon: '${bubbleIconUrl}'`;
-    if (sendMessageIconUrl !== '') config += `\n              sendMessageIcon: '${sendMessageIconUrl}'`;
-    if (headerTextColor !== '') config += `\n              headerTextColor: '${headerTextColor}'`;
-    if (primaryColor !== '') config += `\n              primaryColor: '${primaryColor}'`;
-    if (accentColor !== '') config += `\n              accentColor: '${accentColor}'`;
-    if (backgroundColor !== '') config += `\n              backgroundColor: '${backgroundColor}'`;
+    if (headerText !== '') config += `\n              headerText: '${headerText}',`;
+    if (bubbleIconUrl !== '') config += `\n              bubbleIcon: '${bubbleIconUrl}',`;
+    if (sendMessageIconUrl !== '') config += `\n              sendMessageIcon: '${sendMessageIconUrl}',`;
+    if (headerTextColor !== '') config += `\n              headerTextColor: '${headerTextColor}',`;
+    if (primaryColor !== '') config += `\n              primaryColor: '${primaryColor}',`;
+    if (accentColor !== '') config += `\n              accentColor: '${accentColor}',`;
+    if (backgroundColor !== '') config += `\n              backgroundColor: '${backgroundColor}',`;
 
     return `
         w[n].config = {${config}          
@@ -94,9 +94,9 @@ export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
         w[n].channelId = "${channelId}";
         w[n].host = "${host}";${getTemplateConfig()}
         var f = d.getElementsByTagName(s)[0],
-          j = d.createElement(s);
+        j = d.createElement(s);
         j.async = true;
-        j.src = w[n].host + "/s.js";
+        j.src = w[n].host + '/chatplugin/ui/s.js';
         f.parentNode.insertBefore(j, f);
       })(window, document, "script", "airy");
     </script>`;