From d992221ee32bc198d7df9679501623c31127341b Mon Sep 17 00:00:00 2001 From: Bodo Tasche Date: Wed, 24 Feb 2021 11:45:52 +0100 Subject: [PATCH 1/5] [#660] Enable users to connect via Airy Live Chat closes #660 --- frontend/assets/images/icons/plus-circle.svg | 7 +- frontend/assets/scss/colors.scss | 1 - frontend/ui/src/App.tsx | 2 +- frontend/ui/src/actions/channel/index.ts | 24 +- .../SourceDescription/index.tsx | 7 +- .../SourceInfo/index.module.scss | 17 +- .../ChannelsMainPage/SourceInfo/index.tsx | 17 +- .../Sources/ChatPluginConnect.module.scss | 159 ++++++++++ .../Sources/ChatPluginConnect.tsx | 298 ++++++++++++++++++ .../Sources/ChatPluginSource.tsx | 25 +- .../Sources/FacebookSource.tsx | 10 +- .../ChannelsMainPage/Sources/GoogleSource.tsx | 3 - .../Sources/TwilioSmsSource.tsx | 3 - .../Sources/TwilioWhatsAppSource.tsx | 3 - frontend/ui/src/pages/Channels/index.tsx | 18 +- .../ui/src/reducers/data/channels/index.ts | 18 +- frontend/ui/src/routes/routes.ts | 1 + lib/typescript/httpclient/client.ts | 6 + .../endpoints/connectChatPluginChannel.ts | 15 + .../httpclient/endpoints/disconnectChannel.ts | 13 +- lib/typescript/httpclient/endpoints/index.ts | 2 + .../httpclient/endpoints/updateChannel.ts | 16 + .../ConnectChatPluginRequestPayload.ts | 4 + .../payload/UpdateChannelRequestPayload.ts | 5 + lib/typescript/httpclient/payload/index.ts | 18 +- yarn.lock | 32 +- 26 files changed, 644 insertions(+), 80 deletions(-) create mode 100644 frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss create mode 100644 frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx create mode 100644 lib/typescript/httpclient/endpoints/connectChatPluginChannel.ts create mode 100644 lib/typescript/httpclient/endpoints/updateChannel.ts create mode 100644 lib/typescript/httpclient/payload/ConnectChatPluginRequestPayload.ts create mode 100644 lib/typescript/httpclient/payload/UpdateChannelRequestPayload.ts diff --git a/frontend/assets/images/icons/plus-circle.svg b/frontend/assets/images/icons/plus-circle.svg index 2067cd0bbd..3f896ed076 100644 --- a/frontend/assets/images/icons/plus-circle.svg +++ b/frontend/assets/images/icons/plus-circle.svg @@ -1,3 +1,4 @@ - - - + + + + \ No newline at end of file diff --git a/frontend/assets/scss/colors.scss b/frontend/assets/scss/colors.scss index 6f9690baae..fa3bd96b1d 100644 --- a/frontend/assets/scss/colors.scss +++ b/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; diff --git a/frontend/ui/src/App.tsx b/frontend/ui/src/App.tsx index 54f5078d78..65c78c7c2b 100644 --- a/frontend/ui/src/App.tsx +++ b/frontend/ui/src/App.tsx @@ -84,7 +84,7 @@ class App extends Component & RouteComponentPro - + diff --git a/frontend/ui/src/actions/channel/index.ts b/frontend/ui/src/actions/channel/index.ts index 860a622c27..f9203a93a8 100644 --- a/frontend/ui/src/actions/channel/index.ts +++ b/frontend/ui/src/actions/channel/index.ts @@ -6,12 +6,16 @@ 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 UPDATE_CHANNEL = '@@channel/UPDATE_CHANNEL'; +const DELETE_CHANNEL = '@@channel/DELETE_CHANNEL'; export const setCurrentChannelsAction = createAction(SET_CURRENT_CHANNELS, resolve => (channels: Channel[]) => resolve(channels) @@ -19,6 +23,8 @@ export const setCurrentChannelsAction = createAction(SET_CURRENT_CHANNELS, resol export const addChannelsAction = createAction(ADD_CHANNELS, resolve => (channels: Channel[]) => resolve(channels)); export const setChannelAction = createAction(SET_CHANNEL, resolve => (channel: Channel) => resolve(channel)); +export const updateChannelAction = createAction(UPDATE_CHANNEL, resolve => (channel: Channel) => resolve(channel)); +export const deleteChannelAction = createAction(DELETE_CHANNEL, resolve => (channelId: string) => resolve(channelId)); export const listChannels = () => async (dispatch: Dispatch) => HttpClientInstance.listChannels().then((response: Channel[]) => { @@ -39,10 +45,22 @@ export const connectChannel = (requestPayload: ConnectChannelRequestPayload) => return Promise.resolve(response); }); +export const connectChatPlugin = (requestPayload: ConnectChatPluginRequestPayload) => async (dispatch: Dispatch) => + HttpClientInstance.connectChatPluginChannel(requestPayload).then((response: Channel) => { + dispatch(addChannelsAction([response])); + return Promise.resolve(response); + }); + +export const updateChannel = (requestPayload: UpdateChannelRequestPayload) => async (dispatch: Dispatch) => + HttpClientInstance.updateChannel(requestPayload).then((response: Channel) => { + dispatch(updateChannelAction(response)); + return Promise.resolve(response); + }); + export const disconnectChannel = (source: string, requestPayload: DisconnectChannelRequestPayload) => async ( dispatch: Dispatch ) => - 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); }); diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceDescription/index.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceDescription/index.tsx index adf33c07a8..93d0a1c52a 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceDescription/index.tsx +++ b/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 && (
-
diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss index 00fc9cfbe1..e033a962db 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss +++ b/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 { diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx index 5fbedcbf5d..a367af1511 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx +++ b/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,8 +40,8 @@ const SourceInfo = (props: SourceInfoProps) => { {channels.slice(0, channelsToShow).map((channel: Channel) => { return (
  • -
    - {source === 'facebook' && channel.metadata.imageUrl ? ( +
    +
    • ); })}
    {hasExtraChannels && ( - + +{channels.length - channelsToShow} {props.isConnected} )} @@ -67,9 +70,9 @@ const SourceInfo = (props: SourceInfoProps) => {
    -
    diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss new file mode 100644 index 0000000000..36a09ff63b --- /dev/null +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss @@ -0,0 +1,159 @@ +@import '../../../../assets/scss/fonts'; +@import '../../../../assets/scss/colors'; + +.wrapper { + background: white; + display: block; + border-radius: 10px; + padding-left: 96px; + padding-top: 88px; + width: 100%; + overflow-y: auto; + padding: 32px; + margin: 88px 1.5em 0 100px; + min-height: calc(100vh - 170px); +} + +.headline { + @include font-xl; + font-weight: bold; + margin-bottom: 8px; +} + +.backButton { + display: block; + margin-bottom: 16px; + cursor: pointer; + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + +.backIcon { + path { + fill: var(--color-airy-blue); + } + margin-right: 8px; +} + +.newPageParagraph { + margin: 24px 0; + color: var(--color-text-gray); +} + +.updatePageParagraph { + margin: 24px 0; + color: var(--color-text-gray); +} + +.formWrapper { + display: flex; +} + +.formRow { + margin-bottom: 16px; +} + +.settings { + width: 20rem; +} + +.headline { + display: flex; +} + +.headlineText { + flex-grow: 1; +} + +.overview { + margin-top: 32px; +} + +.listItem { + display: flex; + align-items: center; + margin-bottom: 8px; +} + +.listChannelName { + flex-grow: 1; + border-bottom: 1px solid var(--color-light-gray); + height: 50px; + display: flex; + align-items: center; + padding-left: 16px; +} + +.listButtons { + display: flex; + border-bottom: 1px solid var(--color-light-gray); + height: 50px; + align-items: center; +} + +.listButtonEdit { + margin-right: 8px; + font-weight: normal; +} + +.channelImage { + width: 40px; + height: 40px; + object-fit: cover; + border-radius: 100%; +} + +.tabView { + display: flex; + margin-bottom: 16px; + list-style-type: none; + + li { + margin-right: 16px; + } +} + +.tabEntrySelected { + border-bottom: 2px solid var(--color-airy-blue); + a { + color: var(--color-text-contrast); + font-weight: bold; + text-decoration: none; + } +} + +.tabEntry { + a { + color: var(--color-airy-blue); + text-decoration: none; + } +} + +.installHint { + font-weight: bold; + margin-bottom: 8px; + code { + color: var(--color-red-alert); + background-color: var(--color-background-gray); + padding: 2px; + } +} + +.codeArea { + @include font-s; + width: 40em; + height: 17em; + background-color: var(--color-background-gray); + color: var(--color-text-contrast); + border-radius: 8px; + border: 1px solid var(--color-dark-elements-gray); + resize: none; + padding: 8px; +} + +.codeAreaHint { + margin: 8px 0; + color: var(--color-text-gray); +} diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx new file mode 100644 index 0000000000..82d0de5a39 --- /dev/null +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx @@ -0,0 +1,298 @@ +import React, {FormEvent, useEffect, useState, MouseEvent, createRef, TextareaHTMLAttributes} from 'react'; +import _, {connect, ConnectedProps} from 'react-redux'; +import {Button, Input, LinkButton} from '@airyhq/components'; +import {withRouter, RouteComponentProps, Link} from 'react-router-dom'; +import {Channel} from 'httpclient'; + +import {ReactComponent as AiryLogo} from 'assets/images/icons/airy_avatar.svg'; +import {ReactComponent as BackIcon} from 'assets/images/icons/arrow-left-2.svg'; + +import {CHANNELS_CHAT_PLUGIN_ROUTE, CHANNELS_ROUTE} from '../../../../routes/routes'; +import {connectChatPlugin, updateChannel, disconnectChannel} from '../../../../actions/channel'; +import {StateModel} from '../../../../reducers'; +import {allChannels} from '../../../../selectors/channels'; + +import styles from './ChatPluginConnect.module.scss'; + +const mapDispatchToProps = { + connectChatPlugin, + updateChannel, + disconnectChannel, +}; + +const mapStateToProps = (state: StateModel) => ({ + channels: Object.values(allChannels(state)), + config: state.data.config, +}); + +const connector = connect(mapStateToProps, mapDispatchToProps); + +interface ChatPluginRouterProps { + channelId?: string; +} + +type ChatPluginProps = {} & ConnectedProps & RouteComponentProps; + +const ChatPluginConnect = (props: ChatPluginProps) => { + const [showNewPage, setShowNewPage] = useState(true); + const [displayName, setDisplayName] = useState(''); + const [imageUrl, setImageUrl] = useState(''); + const [currentPage, setCurrentPage] = useState('settings'); + const channelId = props.match.params.channelId; + const codeAreaRef = createRef(); + + useEffect(() => { + setShowNewPage(true); + setCurrentPage('settings'); + }, []); + + useEffect(() => { + if (channelId !== 'new' && channelId?.length) { + const channel = props.channels.find((channel: Channel) => { + return channel.id === channelId; + }); + if (channel) { + setDisplayName(channel.metadata?.name); + setImageUrl(channel.metadata?.imageUrl || ''); + } + } + }, [props.channels, channelId]); + + const createNewConnection = (event: FormEvent) => { + event.preventDefault(); + props + .connectChatPlugin({ + name: displayName, + ...(imageUrl.length > 0 && { + imageUrl: imageUrl, + }), + }) + .then((channel: Channel) => { + props.history.replace(CHANNELS_CHAT_PLUGIN_ROUTE + '/' + channel.id); + }); + }; + + const updateConnection = (event: FormEvent) => { + event.preventDefault(); + props.updateChannel({channelId: channelId, name: displayName, imageUrl: imageUrl}).then(() => { + props.history.replace(CHANNELS_CHAT_PLUGIN_ROUTE); + }); + }; + + const renderFormFields = () => ( + <> +
    + ) => { + setDisplayName(e.target.value); + }} + label="Display Name" + placeholder="Add a name" + autoFocus + required + height={32} + fontClass="font-s" + /> +
    + +
    + ) => { + setImageUrl(e.target.value); + }} + label="Image URL" + placeholder="(optionaly) add an image url" + hint="max. 1024x1024 pixel PNG" + height={32} + fontClass="font-s" + /> +
    + + ); + + const renderNewPage = () => { + return showNewPage ? ( +
    +

    Add Airy Live Chat to your website and application

    + + +
    + ) : ( +
    +

    Add Airy Live Chat to your website and application

    +
    +
    +
    + {renderFormFields()} + +
    +
    +
    +
    + ); + }; + + const showSettings = (event: MouseEvent) => { + event.preventDefault(); + setCurrentPage('settings'); + }; + + const showInstallDoc = (event: MouseEvent) => { + event.preventDefault(); + setCurrentPage('installDoc'); + }; + + const generateCode = () => { + return ``; + }; + + const copyToClipboard = () => { + codeAreaRef.current?.select(); + document.execCommand('copy'); + }; + + const renderChannelPage = () => ( +
    +

    Add Airy Live Chat to your website and application

    + +
    + {currentPage === 'settings' ? ( +
    +
    + {renderFormFields()} + + +
    +
    + ) : ( +
    +
    + Add this code inside the tag <head>: +
    +
    + +
    +
    + Replace SCRIPT_HOST with the URL to your instance of the Chat Plugin server. +
    + +
    + )} +
    +
    + ); + + const disconnectChannel = (channel: Channel) => { + if (window.confirm('Do you really want to delete this channel?')) { + props.disconnectChannel('chatplugin', {channelId: channel.id}); + } + }; + + const renderOverviewPage = () => ( +
    +
      + {props.channels.map((channel: Channel) => ( +
    • +
      + {channel.metadata?.imageUrl ? ( + {channel.metadata?.name} + ) : ( +
      + {' '} +
      + )} +
      + +
      {channel.metadata?.name}
      +
      + + Edit + + { + disconnectChannel(channel); + }}> + Delete + +
      +
      • + ))} +
    +
    + ); + + const openNewPage = () => { + props.history.push(CHANNELS_CHAT_PLUGIN_ROUTE + '/new'); + }; + + const renderPage = () => { + if (channelId === 'new') { + return renderNewPage(); + } + + if (channelId?.length > 0) { + return renderChannelPage(); + } + + return renderOverviewPage(); + }; + + return ( +
    +
    +

    Airy Live Chat

    + {channelId == null && ( +
    + +
    + )} +
    + + + + Back + + + {renderPage()} +
    + ); +}; + +export default connector(withRouter(ChatPluginConnect)); diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginSource.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginSource.tsx index e2cb01d469..751d6cd8fb 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginSource.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginSource.tsx @@ -1,13 +1,16 @@ 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 {withRouter, RouteComponentProps} from 'react-router-dom'; import {Channel} from 'httpclient'; + +import {ReactComponent as AiryLogo} from 'assets/images/icons/airy_avatar.svg'; + import SourceInfo from '../SourceInfo'; import SourceDescription from '../SourceDescription'; +import {CHANNELS_CHAT_PLUGIN_ROUTE} from '../../../../routes/routes'; type ChatPluginProps = {pluginSource: Channel[]}; -const ChatPluginSource = (props: ChatPluginProps) => { +const ChatPluginSource = (props: ChatPluginProps & RouteComponentProps) => { const channels = props.pluginSource.filter((channel: Channel) => channel.source === 'chat_plugin'); return ( @@ -16,8 +19,10 @@ const ChatPluginSource = (props: ChatPluginProps) => { title="Airy Live Chat " text="Best of class browser messenger" image={} - buttonIcon={} displayButton={!channels.length} + onAddChannelClick={() => { + props.history.push(CHANNELS_CHAT_PLUGIN_ROUTE + '/new'); + }} /> { connected="CONNECTED" placeholderImage={} isConnected="connected" - addAChannel={} + onMoreChannelsClick={() => { + props.history.push(CHANNELS_CHAT_PLUGIN_ROUTE); + }} + onAddChannelClick={() => { + props.history.push(CHANNELS_CHAT_PLUGIN_ROUTE + '/new'); + }} + onChannelClick={(channel: Channel) => { + props.history.push(`${CHANNELS_CHAT_PLUGIN_ROUTE}/${channel.id}`); + }} /> ); }; -export default ChatPluginSource; +export default withRouter(ChatPluginSource); diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/FacebookSource.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/FacebookSource.tsx index 18d33d43ce..24fa4c7e5d 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/FacebookSource.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/FacebookSource.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {ReactComponent as FacebookLogo} from 'assets/images/icons/messenger_avatar.svg'; -import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg'; import {Channel} from 'httpclient'; import SourceDescription from '../SourceDescription'; import SourceInfo from '../SourceInfo'; @@ -16,17 +15,10 @@ const FacebookSource = (props: FacebookSourceProps) => { title="Messenger " text="Connect multiple Facebook pages" image={} - buttonIcon={} displayButton={!channels.length} /> - } - /> + ); }; diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/GoogleSource.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/GoogleSource.tsx index 0236f306be..5e914d8e96 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/GoogleSource.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/GoogleSource.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {ReactComponent as GoogleLogo} from 'assets/images/icons/google_avatar.svg'; -import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg'; import {Channel} from 'httpclient'; import SourceDescription from '../SourceDescription'; import SourceInfo from '../SourceInfo'; @@ -16,7 +15,6 @@ const GoogleSource = (props: GoogleSourceProps) => { title="Google Business Messages" text="Be there when people search" image={} - buttonIcon={} displayButton={!channels.length} /> @@ -26,7 +24,6 @@ const GoogleSource = (props: GoogleSourceProps) => { connected="CONNECTED" placeholderImage={} isConnected="connected" - addAChannel={} /> ); diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioSmsSource.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioSmsSource.tsx index 0b44967593..64db9a4d8e 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioSmsSource.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioSmsSource.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {ReactComponent as SMSLogo} from 'assets/images/icons/sms_avatar.svg'; -import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg'; import {Channel} from 'httpclient'; import SourceDescription from '../SourceDescription'; import SourceInfo from '../SourceInfo'; @@ -16,7 +15,6 @@ const TwilioSmsSource = (props: TwilioSmsSourceProps) => { title="SMS " text="Deliver SMS with ease" image={} - buttonIcon={} displayButton={!channels.length} /> @@ -26,7 +24,6 @@ const TwilioSmsSource = (props: TwilioSmsSourceProps) => { connected="CONNECTED" placeholderImage={} isConnected="connected" - addAChannel={} /> ); diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioWhatsAppSource.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioWhatsAppSource.tsx index cdeafbb522..12111d14e0 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioWhatsAppSource.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/TwilioWhatsAppSource.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {ReactComponent as WhatsappLogo} from 'assets/images/icons/whatsapp_avatar.svg'; -import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg'; import {Channel} from 'httpclient'; import SourceDescription from '../SourceDescription'; import SourceInfo from '../SourceInfo'; @@ -16,7 +15,6 @@ const TwilioWhatsAppSource = (props: TwilioWhatsAppSourceProps) => { title="Whatsapp" text="World #1 chat app" image={} - buttonIcon={} displayButton={!channels.length} /> @@ -26,7 +24,6 @@ const TwilioWhatsAppSource = (props: TwilioWhatsAppSourceProps) => { connected="CONNECTED" placeholderImage={} isConnected="connected" - addAChannel={} /> ); diff --git a/frontend/ui/src/pages/Channels/index.tsx b/frontend/ui/src/pages/Channels/index.tsx index 6cae7267bb..67ba5d807f 100644 --- a/frontend/ui/src/pages/Channels/index.tsx +++ b/frontend/ui/src/pages/Channels/index.tsx @@ -1,6 +1,7 @@ import React, {useEffect} from 'react'; import _, {connect, ConnectedProps} from 'react-redux'; -import {RouteComponentProps} from 'react-router-dom'; +import {Route, RouteComponentProps, Switch} from 'react-router-dom'; + import {listChannels} from '../../actions/channel'; import {getClientConfig} from '../../actions/config'; import {StateModel} from '../../reducers/index'; @@ -10,6 +11,8 @@ import {allChannels} from '../../selectors/channels'; import {setPageTitle} from '../../services/pageTitle'; import ChannelsMainPage from './ChannelsMainPage'; +import ChatPluginConnect from './ChannelsMainPage/Sources/ChatPluginConnect'; +import {CHANNELS_CHAT_PLUGIN_ROUTE} from '../../routes/routes'; const mapDispatchToProps = { listChannels, @@ -27,16 +30,25 @@ type ChannelsConnectProps = {} & ConnectedProps & RouteCompone const Channels = (props: ChannelsConnectProps) => { useEffect(() => { - props.listChannels(); + if (props.channels.length == 0) { + props.listChannels(); + } props.getClientConfig(); setPageTitle('Channels'); }, []); - return ( + const renderChannels = () => (
    ); + + return ( + + + + + ); }; export default connector(Channels); diff --git a/frontend/ui/src/reducers/data/channels/index.ts b/frontend/ui/src/reducers/data/channels/index.ts index 18566e5f2f..40b35a6827 100644 --- a/frontend/ui/src/reducers/data/channels/index.ts +++ b/frontend/ui/src/reducers/data/channels/index.ts @@ -2,7 +2,7 @@ import {ActionType, getType} from 'typesafe-actions'; import {Channel} from 'httpclient'; import * as actions from '../../../actions/channel'; import * as metadataActions from '../../../actions/metadata'; -import {merge} from 'lodash-es'; +import {merge, omitBy} from 'lodash-es'; type Action = ActionType | ActionType; @@ -36,6 +36,22 @@ const channelsReducer = (state = {}, action: Action): ChannelsState => { return action.payload.reduce(setChannel, state); case getType(actions.setChannelAction): return setChannel(state, action.payload); + + case getType(actions.updateChannelAction): + return { + ...state, + [action.payload.id]: { + id: action.payload.id, + ...state[action.payload.id], + metadata: merge({}, state[action.payload.id]?.metadata, action.payload.metadata), + }, + }; + + case getType(actions.deleteChannelAction): + return omitBy(state, (_channel, channelId: string) => { + return channelId == action.payload; + }); + default: return state; } diff --git a/frontend/ui/src/routes/routes.ts b/frontend/ui/src/routes/routes.ts index d19738cf1d..821f03c28c 100644 --- a/frontend/ui/src/routes/routes.ts +++ b/frontend/ui/src/routes/routes.ts @@ -2,6 +2,7 @@ export const ROOT_ROUTE = '/'; export const LOGIN_ROUTE = '/login'; export const LOGOUT_ROUTE = '/logout'; export const CHANNELS_ROUTE = '/channels'; +export const CHANNELS_CHAT_PLUGIN_ROUTE = '/channels/chat_plugin'; export const INBOX_ROUTE = '/inbox'; export const INBOX_CONVERSATIONS_ROUTE = '/inbox/conversations'; export const TAGS_ROUTE = '/tags'; diff --git a/lib/typescript/httpclient/client.ts b/lib/typescript/httpclient/client.ts index 9e1a794578..a2b172b139 100644 --- a/lib/typescript/httpclient/client.ts +++ b/lib/typescript/httpclient/client.ts @@ -10,6 +10,8 @@ import { UntagConversationRequestPayload, MessagePayload, ListMessagesRequestPayload, + ConnectChatPluginRequestPayload, + UpdateChannelRequestPayload, } from './payload'; import {Tag, Message} from './model'; @@ -91,6 +93,10 @@ export class HttpClient { public connectFacebookChannel: (requestPayload: ConnectChannelRequestPayload) => Promise; + public connectChatPluginChannel: (requestPayload: ConnectChatPluginRequestPayload) => Promise; + + public updateChannel: (requestPayload: UpdateChannelRequestPayload) => Promise; + public disconnectChannel: (source: string, requestPayload: DisconnectChannelRequestPayload) => Promise; public listConversations: (conversationListRequest: ListConversationsRequestPayload) => Promise; diff --git a/lib/typescript/httpclient/endpoints/connectChatPluginChannel.ts b/lib/typescript/httpclient/endpoints/connectChatPluginChannel.ts new file mode 100644 index 0000000000..1056706fb4 --- /dev/null +++ b/lib/typescript/httpclient/endpoints/connectChatPluginChannel.ts @@ -0,0 +1,15 @@ +import {ChannelPayload, ConnectChatPluginRequestPayload} from '../payload'; +/* eslint-disable @typescript-eslint/no-var-requires */ +const camelcaseKeys = require('camelcase-keys'); +import {HttpClient} from '../client'; + +export default HttpClient.prototype.connectChatPluginChannel = async function( + requestPayload: ConnectChatPluginRequestPayload +) { + const response: ChannelPayload = await this.doFetchFromBackend( + 'channels.chatplugin.connect', + camelcaseKeys(requestPayload) + ); + + return camelcaseKeys(response, {deep: true, stopPaths: ['metadata.userData']}); +}; diff --git a/lib/typescript/httpclient/endpoints/disconnectChannel.ts b/lib/typescript/httpclient/endpoints/disconnectChannel.ts index 9131318ce4..78794d7d22 100644 --- a/lib/typescript/httpclient/endpoints/disconnectChannel.ts +++ b/lib/typescript/httpclient/endpoints/disconnectChannel.ts @@ -1,16 +1,13 @@ -import {DisconnectChannelRequestPayload, ChannelsPayload} from '../payload'; -/* eslint-disable @typescript-eslint/no-var-requires */ -const camelcaseKeys = require('camelcase-keys'); +import {DisconnectChannelRequestPayload} from '../payload'; import {HttpClient} from '../client'; export default HttpClient.prototype.disconnectChannel = async function( source: string, requestPayload: DisconnectChannelRequestPayload ) { - const response: ChannelsPayload = await this.doFetchFromBackend( - `channels.${source}.disconnect`, - camelcaseKeys(requestPayload) - ); + await this.doFetchFromBackend(`channels.${source}.disconnect`, { + channel_id: requestPayload.channelId, + }); - return camelcaseKeys(response.data, {deep: true, stopPaths: ['metadata.userData']}); + return true; }; diff --git a/lib/typescript/httpclient/endpoints/index.ts b/lib/typescript/httpclient/endpoints/index.ts index 702a9a1d0b..46958c75f3 100644 --- a/lib/typescript/httpclient/endpoints/index.ts +++ b/lib/typescript/httpclient/endpoints/index.ts @@ -1,6 +1,7 @@ export * from './listChannels'; export * from './exploreFacebookChannels'; export * from './connectFacebookChannel'; +export * from './connectChatPluginChannel'; export * from './disconnectChannel'; export * from './listConversations'; export * from './getConversationInfo'; @@ -15,3 +16,4 @@ export * from './tagConversation'; export * from './untagConversation'; export * from './sendMessages'; export * from './getConfig'; +export * from './updateChannel'; diff --git a/lib/typescript/httpclient/endpoints/updateChannel.ts b/lib/typescript/httpclient/endpoints/updateChannel.ts new file mode 100644 index 0000000000..9693892926 --- /dev/null +++ b/lib/typescript/httpclient/endpoints/updateChannel.ts @@ -0,0 +1,16 @@ +import {ChannelPayload, UpdateChannelRequestPayload} from '../payload'; +/* eslint-disable @typescript-eslint/no-var-requires */ +const camelcaseKeys = require('camelcase-keys'); +import {HttpClient} from '../client'; + +export default HttpClient.prototype.updateChannel = async function(requestPayload: UpdateChannelRequestPayload) { + const response: ChannelPayload = await this.doFetchFromBackend(`channels.update`, { + channel_id: requestPayload.channelId, + name: requestPayload.name, + ...(requestPayload.imageUrl && { + image_url: requestPayload.imageUrl, + }), + }); + + return camelcaseKeys(response, {deep: true, stopPaths: ['metadata.userData']}); +}; diff --git a/lib/typescript/httpclient/payload/ConnectChatPluginRequestPayload.ts b/lib/typescript/httpclient/payload/ConnectChatPluginRequestPayload.ts new file mode 100644 index 0000000000..aa766a8915 --- /dev/null +++ b/lib/typescript/httpclient/payload/ConnectChatPluginRequestPayload.ts @@ -0,0 +1,4 @@ +export interface ConnectChatPluginRequestPayload { + name: string; + imageUrl?: string; +} diff --git a/lib/typescript/httpclient/payload/UpdateChannelRequestPayload.ts b/lib/typescript/httpclient/payload/UpdateChannelRequestPayload.ts new file mode 100644 index 0000000000..1264232e32 --- /dev/null +++ b/lib/typescript/httpclient/payload/UpdateChannelRequestPayload.ts @@ -0,0 +1,5 @@ +export interface UpdateChannelRequestPayload { + channelId: string; + name: string; + imageUrl?: string; +} diff --git a/lib/typescript/httpclient/payload/index.ts b/lib/typescript/httpclient/payload/index.ts index 990e8ef85a..ca96dc2671 100644 --- a/lib/typescript/httpclient/payload/index.ts +++ b/lib/typescript/httpclient/payload/index.ts @@ -1,22 +1,24 @@ +export * from './ChannelPayload'; +export * from './ChannelsPayload'; +export * from './ConfigPayload'; export * from './ConnectChannelRequestApiPayload'; export * from './ConnectChannelRequestPayload'; +export * from './ConnectChatPluginRequestPayload'; +export * from './ConversationPayload'; export * from './CreateTagRequestPayload'; export * from './DisconnectChannelRequestApiPayload'; export * from './DisconnectChannelRequestPayload'; export * from './ExploreChannelRequestPayload'; export * from './ListConversationsRequestPayload'; +export * from './ListMessagesRequestPayload'; export * from './ListTagsResponsePayload'; export * from './LoginViaEmailRequestPayload'; export * from './UserPayload'; +export * from './MessagePayload'; export * from './PaginatedPayload'; export * from './PaginatedResponse'; -export * from './MessagePayload'; -export * from './ChannelPayload'; -export * from './ChannelsPayload'; -export * from './TagPayload'; -export * from './ConversationPayload'; -export * from './ListMessagesRequestPayload'; +export * from './SendMessagesRequestPayload'; export * from './TagConversationRequestPayload'; +export * from './TagPayload'; export * from './UntagConversationRequestPayload'; -export * from './SendMessagesRequestPayload'; -export * from './ConfigPayload'; +export * from './UpdateChannelRequestPayload'; diff --git a/yarn.lock b/yarn.lock index c6053cf32e..3219743d5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3,9 +3,9 @@ "@airyhq/components@latest": - version "0.4.12" - resolved "https://registry.npmjs.org/@airyhq/components/-/components-0.4.12.tgz" - integrity sha512-uX3ykZgS+fMY5vlPCGpqmKtXjgL3c7t+xTbktTjipvtjktrNSH8i/7vBh4AKWn2LndwDNHKHnubUS6nJQhHs9w== + version "0.4.13" + resolved "https://registry.yarnpkg.com/@airyhq/components/-/components-0.4.13.tgz#c67a0d19dbf3e9559c861d3cc4fff5e34c4bd4bf" + integrity sha512-xU+Q2ueZd8agJ8rUXq4OmB4cogqpzMM5ndlYS/DmGOl5FlYG1VxqaADbGb7Z4G6qgCf1bpob3YqulbMT9jeiIg== dependencies: "@crello/react-lottie" "^0.0.9" emoji-mart "^3.0.0" @@ -1627,7 +1627,7 @@ "@crello/react-lottie@^0.0.9": version "0.0.9" - resolved "https://registry.yarnpkg.com/@crello/react-lottie/-/react-lottie-0.0.9.tgz" + resolved "https://registry.yarnpkg.com/@crello/react-lottie/-/react-lottie-0.0.9.tgz#919567c8e06a7e0d12029f33b4fec2bdf2b7f6b4" integrity sha512-dkAS/Nc3luAnuXg3OG4p5EXKb6vl/jmHyn7St7a+SN+WWX1sq1Gx7T2bU/sYDxn8SSUKn/R+37LwwxcQD7SU3A== dependencies: lottie-web "5.5.9" @@ -2661,7 +2661,7 @@ atob@^2.1.2: autosize@^4.0.2: version "4.0.2" - resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz" + resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9" integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA== aws-sign2@~0.7.0: @@ -3378,7 +3378,7 @@ component-emitter@^1.2.1: computed-style@~0.1.3: version "0.1.4" - resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz" + resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74" integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ= concat-map@0.0.1: @@ -4418,7 +4418,7 @@ executable@^4.1.1: exenv@^1.2.0: version "1.2.2" - resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= exit-hook@^1.0.0: @@ -5824,7 +5824,7 @@ js-base64@^2.1.8: "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== js-yaml@^3.13.1: @@ -6010,7 +6010,7 @@ levn@^0.4.1: line-height@^0.3.1: version "0.3.1" - resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz" + resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9" integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk= dependencies: computed-style "~0.1.3" @@ -6182,14 +6182,14 @@ long@^4.0.0: loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" - resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== dependencies: js-tokens "^3.0.0 || ^4.0.0" lottie-web@5.5.9: version "5.5.9" - resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.5.9.tgz" + resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.5.9.tgz#f8775e8c36dfada428f9acea826ab674750419a8" integrity sha512-3Zdxnuyi6WXnMj+0ZfwDd17EXCM87Hcbhd+sVFq6EPGfkVoGzoIkZt9OafcgXw4mzjyILOkPDLaBumrgGKoCaw== loud-rejection@^1.0.0: @@ -6850,7 +6850,7 @@ oauth-sign@~0.9.0: object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" - resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= object-copy@^0.1.0: @@ -7642,7 +7642,7 @@ raw-body@2.4.0: react-autosize-textarea@^7.1.0: version "7.1.0" - resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz" + resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz#902c84fc395a689ca3a484dfb6bc2be9ba3694d1" integrity sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g== dependencies: autosize "^4.0.2" @@ -7685,7 +7685,7 @@ react-is@^16.6.0, react-is@^16.7.0: react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0: version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: @@ -7711,7 +7711,7 @@ react-markdown@^5.0.3: react-modal@^3.11.2: version "3.12.1" - resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.12.1.tgz" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.12.1.tgz#38c33f70d81c33d02ff1ed115530443a3dc2afd3" integrity sha512-WGuXn7Fq31PbFJwtWmOk+jFtGC7E9tJVbFX0lts8ZoS5EPi9+WWylUJWLKKVm3H4GlQ7ZxY7R6tLlbSIBQ5oZA== dependencies: exenv "^1.2.0" @@ -9528,7 +9528,7 @@ vm-browserify@^1.0.1: warning@^4.0.3: version "4.0.3" - resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== dependencies: loose-envify "^1.0.0" From 7f6f3d2e38b226005067ab61fb30f6927904fac4 Mon Sep 17 00:00:00 2001 From: Bodo Tasche Date: Wed, 3 Mar 2021 13:11:55 +0100 Subject: [PATCH 2/5] use api host in embed code generator --- .../Sources/ChatPluginConnect.module.scss | 6 +----- .../ChannelsMainPage/Sources/ChatPluginConnect.tsx | 8 +++----- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss index 36a09ff63b..68f5037ea4 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.module.scss @@ -151,9 +151,5 @@ border: 1px solid var(--color-dark-elements-gray); resize: none; padding: 8px; -} - -.codeAreaHint { - margin: 8px 0; - color: var(--color-text-gray); + margin-bottom: 16px; } diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx index 82d0de5a39..0c92c0b335 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx @@ -7,7 +7,8 @@ import {Channel} from 'httpclient'; import {ReactComponent as AiryLogo} from 'assets/images/icons/airy_avatar.svg'; import {ReactComponent as BackIcon} from 'assets/images/icons/arrow-left-2.svg'; -import {CHANNELS_CHAT_PLUGIN_ROUTE, CHANNELS_ROUTE} from '../../../../routes/routes'; +import {env} from '../../../../env'; +import {CHANNELS_CHAT_PLUGIN_ROUTE} from '../../../../routes/routes'; import {connectChatPlugin, updateChannel, disconnectChannel} from '../../../../actions/channel'; import {StateModel} from '../../../../reducers'; import {allChannels} from '../../../../selectors/channels'; @@ -157,7 +158,7 @@ const ChatPluginConnect = (props: ChatPluginProps) => { (function(w, d, s, n) { w[n] = w[n] || {}; w[n].channelId = "${channelId}"; - w[n].host = "SCRIPT_HOST"; + w[n].host = "${'https://' + env.API_HOST}"; var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; @@ -206,9 +207,6 @@ const ChatPluginConnect = (props: ChatPluginProps) => {
    -
    - Replace SCRIPT_HOST with the URL to your instance of the Chat Plugin server. -
    )} From db704e26e82e1c6d8ac98cfaed3e4c129959dd5e Mon Sep 17 00:00:00 2001 From: Bodo Tasche Date: Wed, 3 Mar 2021 13:24:35 +0100 Subject: [PATCH 3/5] fixed linting errors --- .../Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx index 0c92c0b335..021e4af94e 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/Sources/ChatPluginConnect.tsx @@ -1,4 +1,4 @@ -import React, {FormEvent, useEffect, useState, MouseEvent, createRef, TextareaHTMLAttributes} from 'react'; +import React, {FormEvent, useEffect, useState, MouseEvent, createRef} from 'react'; import _, {connect, ConnectedProps} from 'react-redux'; import {Button, Input, LinkButton} from '@airyhq/components'; import {withRouter, RouteComponentProps, Link} from 'react-router-dom'; From 9e950fbc879e7712ebaa53eb216b6f1d928843f3 Mon Sep 17 00:00:00 2001 From: Bodo Tasche Date: Wed, 3 Mar 2021 14:18:31 +0100 Subject: [PATCH 4/5] Changes after chris review --- frontend/ui/index.html | 10 +++--- frontend/ui/nginx.conf | 2 ++ frontend/ui/src/actions/channel/index.ts | 4 +-- .../ui/src/components/IconChannel/index.tsx | 4 +-- frontend/ui/src/env.ts | 2 ++ .../ChannelsMainPage/SourceInfo/index.tsx | 8 ++--- .../Sources/ChatPluginConnect.tsx | 4 +-- .../pages/Inbox/ConversationsFilter/Popup.tsx | 6 ++-- .../ui/src/reducers/data/channels/index.ts | 33 ++++++++++--------- 9 files changed, 38 insertions(+), 35 deletions(-) diff --git a/frontend/ui/index.html b/frontend/ui/index.html index f85c9a66c6..9567955d3d 100644 --- a/frontend/ui/index.html +++ b/frontend/ui/index.html @@ -4,10 +4,7 @@ Airy UI - +