[#1068] improve channels UI

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

@@ -0,0 +1,18 @@
+import {ConfigPayload} from 'httpclient';
+import _, {Dispatch} from 'redux';
+import {createAction} from 'typesafe-actions';
+
+import {HttpClientInstance} from '../../InitializeAiryApi';
+
+const ADD_SETTINGS_TO_STORE = 'ADD_CONFIG_TO_STORE';
+
+export const saveClientConfig = createAction(ADD_SETTINGS_TO_STORE, resolve => (config: ConfigPayload) =>
+  resolve(config)
+);
+
+export const getClientConfig = () => async (dispatch: Dispatch<any>) => {
+  return HttpClientInstance.getConfig().then((response: ConfigPayload) => {
+    dispatch(saveClientConfig(response));
+    return Promise.resolve(true);
+  });
+};

frontend/ui/src/pages/Channels/ChannelsSources/ChannelDetails.module.scss → frontend/ui/src/pages/Channels/ChannelsMainPage/SourceDescription/index.module.scss

@@ -1,10 +1,5 @@
-@import '../../../assets/scss/fonts';
-@import '../../../assets/scss/colors';
-
-.flexWrap {
-  display: flex;
-  flex-grow: 1;
-}
+@import '../../../../assets/scss/fonts';
+@import '../../../../assets/scss/colors';
 
 .channelCard {
   display: flex;
@@ -13,8 +8,8 @@
   width: 300px;
   border: 1px solid var(--color-light-gray);
   border-radius: 8px;
-  background-color: #ffffff;
-  margin-top: 22px;
+  background-color: white;
+  margin-top: 24px;
 }
 
 .channelLogo {
@@ -23,8 +18,8 @@
   width: 40px;
   margin: 16px 8px 42px 16px;
   svg {
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
   }
 }
 
@@ -37,7 +32,7 @@
   font-weight: bold;
   letter-spacing: 0;
   line-height: 24px;
-  margin: 16px 20px 2px 2px;
+  margin: 16px 20px 2px 0;
 }
 
 .channelText {
@@ -51,10 +46,6 @@
 }
 
 .channelButton {
-  display: flex;
-  padding-top: 8px;
-  width: 40px;
-  height: 40px;
   margin: 20px 0px 8px 0px;
 }
 
@@ -74,18 +65,20 @@
 
 .channelButtonIcon {
   @include font-m;
-  margin-right: 16px;
-  width: 24px;
-  height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 16px;
+  padding: 0px;
+  border-radius: 50%;
   color: var(--color-text-gray);
   cursor: pointer;
 
-  padding: 0px;
-
   svg {
+    height: 30px;
+    width: 30px;
     margin: 0;
     path {
       fill: var(--color-text-gray);

frontend/ui/src/pages/Channels/ChannelsSources/ChannelDetails.tsx → frontend/ui/src/pages/Channels/ChannelsMainPage/SourceDescription/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import styles from './ChannelDetails.module.scss';
+import styles from './index.module.scss';
 
-type ChannelDetailsProps = {
+type SourceDescriptionProps = {
   image: JSX.Element;
   title: string;
   text: string;
   buttonIcon: JSX.Element;
   displayButton: boolean;
 };
 
-const ChannelDetails = (props: ChannelDetailsProps) => {
+const SourceDescription = (props: SourceDescriptionProps) => {
   return (
     <>
       <div className={styles.channelCard}>
@@ -33,4 +33,4 @@ const ChannelDetails = (props: ChannelDetailsProps) => {
   );
 };
 
-export default ChannelDetails;
+export default SourceDescription;

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

@@ -1,5 +1,5 @@
-@import '../../../assets/scss/fonts';
-@import '../../../assets/scss/colors';
+@import '../../../../assets/scss/fonts';
+@import '../../../../assets/scss/colors';
 
 .connectedContainer {
   display: flex;
@@ -17,8 +17,9 @@
 .connectedChannelBox {
   display: flex;
   box-sizing: border-box;
+  width: 550px;
   min-height: 100px;
-  min-width: 450px;
+  overflow: hidden;
   border: 1px solid var(--color-light-gray);
   border-radius: 8px;
   background-color: #ffffff;
@@ -29,69 +30,66 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  min-width: 398px;
+  justify-content: space-evenly;
+  white-space: nowrap;
+  min-width: 400px;
   min-height: 94px;
+  padding: 8px;
+}
+
+.extraPhoneInfo {
+  overflow: hidden;
+  max-width: 142px;
+  text-overflow: ellipsis;
 }
 
 .extraChannel {
   display: flex;
   min-width: 88px;
   min-height: 20px;
-  border: none;
-  padding: 0;
-  outline: none;
+  padding: 0 24px 0 24px;
   cursor: pointer;
-  background: white;
-  color: var(--color-airy-blue);
-  text-decoration: underline;
-  margin: 2px -1px 0px 0px;
+  button {
+    outline: none;
+  }
 }
 
 .connectedChannelData {
   display: flex;
-  align-items: flex-start;
-  margin: 6px 0px 0px 6px;
+  align-items: center;
+  margin: 4px;
 }
 
 .channelListEntry {
   display: inline-flex;
 }
 
 .placeholderLogo {
-  display: inline-flex;
-  height: 20px;
-  width: 20px;
-  margin: 14px 2px 0px 6px;
+  height: 24px;
+  width: 24px;
   svg {
-    height: 18px;
-    width: 18px;
+    height: 24px;
+    width: 24px;
   }
 }
 
 .facebookImage {
-  display: inline-flex;
-  height: 16px;
-  width: 16px;
+  height: 20px;
+  width: 20px;
   border-radius: 50%;
-  margin: 14px 6px 0px 8px;
 }
 
 .connectedChannelName {
   min-width: 168px;
   height: 24px;
-  margin-right: 7px;
-  padding-top: 10px;
-}
-
-.channelId {
-  padding-top: 10px;
+  margin: 0 4px 0 4px;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .channelButton {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  padding-top: 8px;
   margin: 20px 0px 8px 0px;
 }
 
@@ -110,17 +108,20 @@
 
 .channelButtonIcon {
   @include font-m;
-  margin: 0px 16px 24px 0px;
-  width: 24px;
-  height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 16px;
+  padding: 0px;
+  border-radius: 50%;
   color: var(--color-text-gray);
   cursor: pointer;
-  padding: 0;
 
   svg {
+    height: 30px;
+    width: 30px;
     margin: 0;
     path {
       fill: var(--color-text-gray);

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import {Channel} from 'httpclient';
+import {LinkButton} from '@airyhq/components';
+import styles from './index.module.scss';
+
+type SourceInfoProps = {
+  source: string;
+  channels: Channel[];
+  connected: string;
+  placeholderImage?: JSX.Element;
+  isConnected: string;
+  addAChannel: JSX.Element;
+};
+
+const SourceInfo = (props: SourceInfoProps) => {
+  const {source, channels} = props;
+
+  const isPhoneNumberSource = () => {
+    return source === 'twilio.sms' || source === 'twilio.whatsapp';
+  };
+
+  const channelsToShow = isPhoneNumberSource() ? 2 : 4;
+  const hasExtraChannels = channels.length > channelsToShow;
+
+  return (
+    <>
+      {channels && channels.length > 0 && (
+        <>
+          <div className={styles.connectedContainer}>
+            <div className={styles.connectedSum}>
+              <p>
+                {channels.length} {props.connected}
+              </p>
+            </div>
+            <div className={styles.connectedChannelBox}>
+              <div className={styles.connectedChannel}>
+                {channels.slice(0, channelsToShow).map((channel: Channel) => {
+                  return (
+                    <li key={channel.sourceChannelId} className={styles.channelListEntry}>
+                      <div className={styles.connectedChannelData}>
+                        {source === 'facebook' && channel.metadata.imageUrl ? (
+                          <img
+                            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>
+                        {isPhoneNumberSource() && (
+                          <div className={styles.extraPhoneInfo}>{channel.sourceChannelId}</div>
+                        )}
+                      </div>
+                    </li>
+                  );
+                })}
+              </div>
+              <div className={styles.extraChannel}>
+                {hasExtraChannels && (
+                  <LinkButton>
+                    +{channels.length - channelsToShow} {props.isConnected}
+                  </LinkButton>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.channelButton}>
+            <button type="button" className={styles.addChannelButton}>
+              <div className={styles.channelButtonIcon} title="Add a channel">
+                {props.addAChannel}
+              </div>
+            </button>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default SourceInfo;

frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginSource.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {ReactComponent as AiryLogo} from 'assets/images/icons/airy_avatar.svg';
+import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg';
+import {Channel} from 'httpclient';
+import SourceInfo from '../SourceInfo';
+import SourceDescription from '../SourceDescription';
+
+type ChatPluginProps = {pluginSource: Channel[]};
+
+const ChatPluginSource = (props: ChatPluginProps) => {
+  const channels = props.pluginSource.filter((channel: Channel) => channel.source === 'chat_plugin');
+
+  return (
+    <div style={{display: 'flex', flexGrow: 1}}>
+      <SourceDescription
+        title="Airy Live Chat "
+        text="Best of class browser messenger"
+        image={<AiryLogo />}
+        buttonIcon={<AddChannel />}
+        displayButton={!channels.length}
+      />
+
+      <SourceInfo
+        source="chat_plugin"
+        channels={channels}
+        connected="CONNECTED"
+        placeholderImage={<AiryLogo />}
+        isConnected="connected"
+        addAChannel={<AddChannel />}
+      />
+    </div>
+  );
+};
+
+export default ChatPluginSource;