[#660] Enable users to connect via Airy Live Chat

frontend/assets/scss/colors.scss

@@ -19,7 +19,6 @@
   --color-red-alert: #d51548;
   --color-accent-magenta: #f7147d;
   --color-error-background: #fae6e9;
-  --color-red-alert: #bf1a2f;
   --color-highlight-yellow: #fbbd54;
   --color-background-yellow: #fbf9ee;
   --color-background-red: #fff7f9;

frontend/ui/index.html

@@ -4,10 +4,7 @@
     <title>Airy UI</title>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
 
     <!--
@@ -17,8 +14,9 @@
     <link rel="manifest" href="/manifest.json" />
     <script>
       window.AIRY_TEMPLATED_STATE = {
-        "API_HOST": "{{API_HOST}}"
-      }
+        API_HOST: '{{API_HOST}}',
+        CHATPLUGIN_HOST: '{{CHATPLUGIN_HOST}}',
+      };
     </script>
   </head>
 

frontend/ui/nginx.conf

@@ -11,6 +11,7 @@ events {
 # By default nginx does not make any env variables accessible to lua
 # http://nginx.org/en/docs/ngx_core_module.html#env
 env API_HOST;
+env CHATPLUGIN_HOST;
 
 http {
     include       /etc/nginx/mime.types;
@@ -48,6 +49,7 @@ http {
                 local template_string = ngx.location.capture("/index.html")
                 template.render(template_string.body, {
                     API_HOST = os.getenv("API_HOST")
+                    CHATPLUGIN_HOST = os.getenv("CHATPLUGIN_HOST")
                 })
             }
         }

frontend/ui/src/App.tsx

@@ -84,7 +84,7 @@ class App extends Component<ConnectedProps<typeof connector> & RouteComponentPro
               <Route exact path={LOGIN_ROUTE} component={Login} />
               <Route path={INBOX_ROUTE} component={Inbox} />
               <Route exact path={LOGOUT_ROUTE} component={Logout} />
-              <Route exact path={CHANNELS_ROUTE} component={Channels} />
+              <Route path={CHANNELS_ROUTE} component={Channels} />
               <Route component={NotFound} />
             </Switch>
           </div>

frontend/ui/src/actions/channel/index.ts

@@ -6,19 +6,23 @@ import {
   ConnectChannelRequestPayload,
   ExploreChannelRequestPayload,
   DisconnectChannelRequestPayload,
+  ConnectChatPluginRequestPayload,
+  UpdateChannelRequestPayload,
 } from 'httpclient';
 import {HttpClientInstance} from '../../InitializeAiryApi';
 
 const SET_CURRENT_CHANNELS = '@@channel/SET_CHANNELS';
 const ADD_CHANNELS = '@@channel/ADD_CHANNELS';
 const SET_CHANNEL = '@@channel/SET_CHANNEL';
+const DELETE_CHANNEL = '@@channel/DELETE_CHANNEL';
 
 export const setCurrentChannelsAction = createAction(SET_CURRENT_CHANNELS, resolve => (channels: Channel[]) =>
   resolve(channels)
 );
 
 export const addChannelsAction = createAction(ADD_CHANNELS, resolve => (channels: Channel[]) => resolve(channels));
 export const setChannelAction = createAction(SET_CHANNEL, resolve => (channel: Channel) => resolve(channel));
+export const deleteChannelAction = createAction(DELETE_CHANNEL, resolve => (channelId: string) => resolve(channelId));
 
 export const listChannels = () => async (dispatch: Dispatch<any>) =>
   HttpClientInstance.listChannels().then((response: Channel[]) => {
@@ -39,10 +43,22 @@ export const connectChannel = (requestPayload: ConnectChannelRequestPayload) =>
     return Promise.resolve(response);
   });
 
+export const connectChatPlugin = (requestPayload: ConnectChatPluginRequestPayload) => async (dispatch: Dispatch<any>) =>
+  HttpClientInstance.connectChatPluginChannel(requestPayload).then((response: Channel) => {
+    dispatch(addChannelsAction([response]));
+    return Promise.resolve(response);
+  });
+
+export const updateChannel = (requestPayload: UpdateChannelRequestPayload) => async (dispatch: Dispatch<any>) =>
+  HttpClientInstance.updateChannel(requestPayload).then((response: Channel) => {
+    dispatch(setChannelAction(response));
+    return Promise.resolve(response);
+  });
+
 export const disconnectChannel = (source: string, requestPayload: DisconnectChannelRequestPayload) => async (
   dispatch: Dispatch<any>
 ) =>
-  HttpClientInstance.disconnectChannel(source, requestPayload).then((response: Channel[]) => {
-    dispatch(setCurrentChannelsAction(response));
-    return Promise.resolve(response);
+  HttpClientInstance.disconnectChannel(source, requestPayload).then(() => {
+    dispatch(deleteChannelAction(requestPayload.channelId));
+    return Promise.resolve(true);
   });

frontend/ui/src/components/IconChannel/index.tsx

@@ -80,14 +80,14 @@ const IconChannel: React.FC<IconChannelProps> = ({
     return (
       <div className={styles.iconName}>
         {channelInfo.icon()}
-        <p>{channel.metadata.name}</p>
+        <p>{channel.metadata?.name}</p>
       </div>
     );
   } else if (showAvatar && showName) {
     return (
       <div className={styles.avatarName}>
         {channelInfo.avatar()}
-        <p>{channel.metadata.name}</p>
+        <p>{channel.metadata?.name}</p>
       </div>
     );
   } else if (icon && text) {

frontend/ui/src/env.ts

@@ -1,5 +1,6 @@
 export interface Env {
   API_HOST?: string;
+  CHATPLUGIN_HOST?: string;
 }
 
 declare const window: {
@@ -10,4 +11,5 @@ const templatedState: Env = window.AIRY_TEMPLATED_STATE || {};
 
 export const env: Env = {
   API_HOST: templatedState.API_HOST || 'api.airy',
+  CHATPLUGIN_HOST: templatedState.CHATPLUGIN_HOST || 'chatplugin.airy',
 };

frontend/ui/src/pages/Channels/ChannelsMainPage/SourceDescription/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import styles from './index.module.scss';
+import {ReactComponent as AddIcon} from 'assets/images/icons/plus-circle.svg';
 
 type SourceDescriptionProps = {
   image: JSX.Element;
   title: string;
   text: string;
-  buttonIcon: JSX.Element;
   displayButton: boolean;
+  onAddChannelClick?: () => void;
 };
 
 const SourceDescription = (props: SourceDescriptionProps) => {
@@ -22,9 +23,9 @@ const SourceDescription = (props: SourceDescriptionProps) => {
 
       {props.displayButton && (
         <div className={styles.channelButton}>
-          <button type="button" className={styles.addChannelButton}>
+          <button type="button" className={styles.addChannelButton} onClick={props.onAddChannelClick}>
             <div className={styles.channelButtonIcon} title="Add a channel">
-              {props.buttonIcon}
+              <AddIcon />
             </div>
           </button>
         </div>

frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss

@@ -55,9 +55,18 @@
 }
 
 .connectedChannelData {
+  @include font-base;
   display: flex;
-  align-items: center;
   margin: 4px;
+  align-items: flex-start;
+  border: none;
+  background-color: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .channelListEntry {
@@ -81,12 +90,16 @@
 
 .connectedChannelName {
   min-width: 168px;
-  height: 24px;
   margin: 0 4px 0 4px;
   max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  margin-right: 7px;
+}
+
+.channelId {
+  padding-top: 10px;
 }
 
 .channelButton {

frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Channel} from 'httpclient';
 import {LinkButton} from '@airyhq/components';
+import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg';
 import styles from './index.module.scss';
 
 type SourceInfoProps = {
@@ -9,7 +10,9 @@ type SourceInfoProps = {
   connected: string;
   placeholderImage?: JSX.Element;
   isConnected: string;
-  addAChannel: JSX.Element;
+  onAddChannelClick?: () => void;
+  onMoreChannelsClick?: () => void;
+  onChannelClick?: (channel: Channel) => void;
 };
 
 const SourceInfo = (props: SourceInfoProps) => {
@@ -37,28 +40,28 @@ const SourceInfo = (props: SourceInfoProps) => {
                 {channels.slice(0, channelsToShow).map((channel: Channel) => {
                   return (
                     <li key={channel.sourceChannelId} className={styles.channelListEntry}>
-                      <div className={styles.connectedChannelData}>
-                        {source === 'facebook' && channel.metadata.imageUrl ? (
+                      <button className={styles.connectedChannelData} onClick={() => props.onChannelClick(channel)}>
+                        {channel.metadata?.imageUrl ? (
                           <img
-                            src={channel.metadata.imageUrl}
-                            alt={channel.metadata.name}
+                            src={channel.metadata?.imageUrl}
+                            alt={channel.metadata?.name}
                             className={styles.facebookImage}
                           />
                         ) : (
                           <div className={styles.placeholderLogo}>{props.placeholderImage} </div>
                         )}
-                        <div className={styles.connectedChannelName}>{channel.metadata.name}</div>
+                        <div className={styles.connectedChannelName}>{channel.metadata?.name}</div>
                         {isPhoneNumberSource() && (
                           <div className={styles.extraPhoneInfo}>{channel.sourceChannelId}</div>
                         )}
-                      </div>
+                      </button>
                     </li>
                   );
                 })}
               </div>
               <div className={styles.extraChannel}>
                 {hasExtraChannels && (
-                  <LinkButton>
+                  <LinkButton onClick={props.onMoreChannelsClick}>
                     +{channels.length - channelsToShow} {props.isConnected}
                   </LinkButton>
                 )}
@@ -67,9 +70,9 @@ const SourceInfo = (props: SourceInfoProps) => {
           </div>
 
           <div className={styles.channelButton}>
-            <button type="button" className={styles.addChannelButton}>
+            <button type="button" className={styles.addChannelButton} onClick={props.onAddChannelClick}>
               <div className={styles.channelButtonIcon} title="Add a channel">
-                {props.addAChannel}
+                <AddChannel />
               </div>
             </button>
           </div>