Add ability to disconnect Slack integration in UI (#514)

* Improve slack logging for debugging, fix some dialyzer warnings

* Add ability to delete slack authorization from the UI

* Show alert in chatbot demo redirecting to standard demo

* Remove unused

* Only show top 5 in customer breakdown stats in reporting UI

* Improve ts types

* Clean up logging some more

* Minor ux improvement in integrations table

* Fix typo

assets/src/api.ts

@@ -181,7 +181,7 @@ export const fetchCustomer = async (id: string, token = getAccessToken()) => {
 
 export const updateCustomer = async (
   id: string,
-  updates: any,
+  updates: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -198,7 +198,7 @@ export const updateCustomer = async (
 };
 
 export const createNewCompany = async (
-  params: any,
+  params: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -236,7 +236,7 @@ export const fetchCompany = async (id: string, token = getAccessToken()) => {
 
 export const updateCompany = async (
   id: string,
-  updates: any,
+  updates: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -291,7 +291,7 @@ export const fetchAccountInfo = async (token = getAccessToken()) => {
 };
 
 export const updateAccountInfo = async (
-  updates: any,
+  updates: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -319,7 +319,7 @@ export const fetchUserProfile = async (token = getAccessToken()) => {
 };
 
 export const updateUserProfile = async (
-  updates: any,
+  updates: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -347,7 +347,7 @@ export const fetchUserSettings = async (token = getAccessToken()) => {
 };
 
 export const updateUserSettings = async (
-  updates: any,
+  updates: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -460,7 +460,7 @@ export const fetchSharedConversation = async (
 
 export const updateConversation = async (
   conversationId: string,
-  updates: any,
+  updates: Record<string, any>,
   token = getAccessToken()
 ) => {
   if (!token) {
@@ -558,6 +558,19 @@ export const fetchSlackAuthorization = async (
     .then((res) => res.body.data);
 };
 
+export const deleteSlackAuthorization = async (
+  authorizationId: string,
+  token = getAccessToken()
+) => {
+  if (!token) {
+    throw new Error('Invalid token!');
+  }
+
+  return request
+    .delete(`/api/slack/authorizations/${authorizationId}`)
+    .set('Authorization', token);
+};
+
 export const fetchSlackChannels = async (
   query = {},
   token = getAccessToken()

assets/src/components/account/AccountOverview.tsx

@@ -15,14 +15,14 @@ import DisabledUsersTable from './DisabledUsersTable';
 import WorkingHoursSelector from './WorkingHoursSelector';
 import {WorkingHours} from './support';
 import * as API from '../../api';
-import {User} from '../../types';
+import {Account, User} from '../../types';
 import {FRONTEND_BASE_URL} from '../../config';
 import {sleep, hasValidStripeKey} from '../../utils';
 import logger from '../../logger';
 
 type Props = {};
 type State = {
-  account: any;
+  account: Account | null;
   companyName: string;
   currentUser: User | null;
   inviteUrl: string;
@@ -125,7 +125,7 @@ class AccountOverview extends React.Component<Props, State> {
     }
   };
 
-  handleChangeCompanyName = (e: any) => {
+  handleChangeCompanyName = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({companyName: e.target.value});
   };
 

assets/src/components/account/GettingStartedOverview.tsx

@@ -70,25 +70,27 @@ class GettingStartedOverview extends React.Component<Props, State> {
     400
   );
 
-  handleChangeTitle = (e: any) => {
+  handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({title: e.target.value}, this.debouncedUpdateWidgetSettings);
   };
 
-  handleChangeSubtitle = (e: any) => {
+  handleChangeSubtitle = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState(
       {subtitle: e.target.value},
       this.debouncedUpdateWidgetSettings
     );
   };
 
-  handleChangeGreeting = (e: any) => {
+  handleChangeGreeting = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState(
       {greeting: e.target.value},
       this.debouncedUpdateWidgetSettings
     );
   };
 
-  handleChangeNewMessagePlaceholder = (e: any) => {
+  handleChangeNewMessagePlaceholder = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     this.setState(
       {newMessagePlaceholder: e.target.value},
       this.debouncedUpdateWidgetSettings

assets/src/components/account/UserProfile.tsx

@@ -87,25 +87,25 @@ class UserProfile extends React.Component<Props, State> {
     }
   };
 
-  handleChangeFullName = (e: any) => {
+  handleChangeFullName = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({fullName: e.target.value});
   };
 
-  handleChangeDisplayName = (e: any) => {
+  handleChangeDisplayName = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({displayName: e.target.value});
   };
 
-  handleChangeProfilePhotoUrl = (e: any) => {
+  handleChangeProfilePhotoUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({profilePhotoUrl: e.target.value});
   };
 
-  handleCancel = () => {
+  handleCancel = async () => {
     return this.fetchLatestProfile().then(() =>
       this.setState({isEditing: false})
     );
   };
 
-  handleUpdate = () => {
+  handleUpdate = async () => {
     const {displayName, fullName, profilePhotoUrl} = this.state;
 
     return API.updateUserProfile({

assets/src/components/account/WorkingHoursSelector.tsx

@@ -67,7 +67,7 @@ const filterSelectOption = (input: string, option: any) => {
 };
 
 type Props = {
-  timezone: string | null;
+  timezone?: string | null;
   workingHours: Array<WorkingHours>;
   onCancel?: () => void;
   onSave: (data: {

assets/src/components/auth/Login.tsx

@@ -32,15 +32,15 @@ class Login extends React.Component<Props, State> {
     this.setState({redirect: String(redirect)});
   }
 
-  handleChangeEmail = (e: any) => {
+  handleChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({email: e.target.value});
   };
 
-  handleChangePassword = (e: any) => {
+  handleChangePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({password: e.target.value});
   };
 
-  handleSubmit = (e: any) => {
+  handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     this.setState({loading: true, error: null});

assets/src/components/auth/PasswordReset.tsx

@@ -41,11 +41,13 @@ class PasswordReset extends React.Component<Props, State> {
     }
   }
 
-  handleChangePassword = (e: any) => {
+  handleChangePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({password: e.target.value});
   };
 
-  handleChangePasswordConfirmation = (e: any) => {
+  handleChangePasswordConfirmation = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     this.setState({passwordConfirmation: e.target.value});
   };
 
@@ -71,7 +73,7 @@ class PasswordReset extends React.Component<Props, State> {
     this.setState({error: this.getValidationError()});
   };
 
-  handleSubmit = (e: any) => {
+  handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const error = this.getValidationError();

assets/src/components/auth/Register.tsx

@@ -43,19 +43,21 @@ class Register extends React.Component<Props, State> {
     this.setState({inviteToken, redirect: String(redirect)});
   }
 
-  handleChangeCompanyName = (e: any) => {
+  handleChangeCompanyName = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({companyName: e.target.value});
   };
 
-  handleChangeEmail = (e: any) => {
+  handleChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({email: e.target.value});
   };
 
-  handleChangePassword = (e: any) => {
+  handleChangePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({password: e.target.value});
   };
 
-  handleChangePasswordConfirmation = (e: any) => {
+  handleChangePasswordConfirmation = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     this.setState({passwordConfirmation: e.target.value});
   };
 
@@ -91,7 +93,7 @@ class Register extends React.Component<Props, State> {
     this.setState({error: this.getValidationError()});
   };
 
-  handleSubmit = (e: any) => {
+  handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const error = this.getValidationError();

assets/src/components/auth/RequestPasswordReset.tsx

@@ -26,11 +26,11 @@ class RequestPasswordReset extends React.Component<Props, State> {
     //
   }
 
-  handleChangeEmail = (e: any) => {
+  handleChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({email: e.target.value});
   };
 
-  handleSubmit = (e: any) => {
+  handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     this.setState({loading: true, error: null});

assets/src/components/billing/PaymentForm.tsx

@@ -25,7 +25,7 @@ const PaymentForm = ({onSuccess, onCancel}: Props) => {
     }
   };
 
-  const handleSubmit = async (e: any) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!stripe || !elements) {

assets/src/components/common.tsx

@@ -72,7 +72,7 @@ export const TextArea = Input.TextArea;
 /* Whitelist node types that we allow when we render markdown.
  * Reference https://github.com/rexxars/react-markdown#node-types
  */
-export const allowedNodeTypes: any[] = [
+export const allowedNodeTypes: Array<any> = [
   'root',
   'text',
   'break',

assets/src/components/companies/CompanyDetailsPage.tsx

@@ -12,6 +12,7 @@ import {
 } from '../common';
 import {ArrowLeftOutlined, DeleteOutlined} from '../icons';
 import * as API from '../../api';
+import {Company} from '../../types';
 import {sleep} from '../../utils';
 import Spinner from '../Spinner';
 import logger from '../../logger';
@@ -43,7 +44,7 @@ type State = {
   loading: boolean;
   deleting: boolean;
   refreshing: boolean;
-  company: any;
+  company: Company | null;
   customers: Array<any>;
 };
 

assets/src/components/companies/UpdateCompanyPage.tsx

@@ -4,13 +4,14 @@ import {Box, Flex} from 'theme-ui';
 import {Button, Input, Select, Title} from '../common';
 import {ArrowLeftOutlined} from '../icons';
 import * as API from '../../api';
+import {Company} from '../../types';
 import logger from '../../logger';
 
 type Props = RouteComponentProps<{id: string}>;
 type State = {
   loading: boolean;
   saving: boolean;
-  company: any;
+  company: Company | null;
   name: string;
   description: string;
   websiteUrl: string;

assets/src/components/conversations/ConversationFooter.tsx

@@ -11,7 +11,8 @@ const ConversationFooter = ({
 }) => {
   const [message, setMessage] = React.useState('');
 
-  const handleMessageChange = (e: any) => setMessage(e.target.value);
+  const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+    setMessage(e.target.value);
 
   const handleKeyDown = (e: any) => {
     const {key, metaKey} = e;

assets/src/components/conversations/ConversationMessages.tsx

@@ -49,7 +49,7 @@ const ConversationMessages = ({
   isAgentMessage,
 }: {
   messages: Array<Message>;
-  currentUser?: User;
+  currentUser?: User | null;
   customer: Customer | null;
   loading?: boolean;
   isClosing?: boolean;

assets/src/components/conversations/ConversationsContainer.tsx

@@ -3,7 +3,7 @@ import {Box, Flex} from 'theme-ui';
 import qs from 'query-string';
 import {colors, Layout, notification, Sider, Text, Title} from '../common';
 import {sleep} from '../../utils';
-import {Conversation, Message, User} from '../../types';
+import {Account, Conversation, Message, User} from '../../types';
 import ConversationHeader from './ConversationHeader';
 import ConversationItem from './ConversationItem';
 import ConversationClosing from './ConversationClosing';
@@ -14,8 +14,8 @@ import {getColorByUuid} from './support';
 
 type Props = {
   title?: string;
-  account: any;
-  currentUser: User;
+  account: Account | null;
+  currentUser: User | null;
   currentlyOnline?: any;
   loading: boolean;
   showGetStarted: boolean;

assets/src/components/conversations/ConversationsProvider.tsx

@@ -3,15 +3,15 @@ import {Channel, Socket} from 'phoenix';
 import {throttle} from 'lodash';
 import * as API from '../../api';
 import {notification} from '../common';
-import {Conversation, Message} from '../../types';
+import {Account, Conversation, Message, User} from '../../types';
 import {sleep, isWindowHidden, updateQueryParams} from '../../utils';
 import {SOCKET_URL} from '../../socket';
 import logger from '../../logger';
 
 export const ConversationsContext = React.createContext<{
   loading: boolean;
-  account: any;
-  currentUser: any;
+  account: Account | null;
+  currentUser: User | null;
   isNewUser: boolean;
 
   all: Array<string>;
@@ -147,8 +147,8 @@ export const updatePresenceWithExiters = (
 type Props = React.PropsWithChildren<{}>;
 type State = {
   loading: boolean;
-  account: any | null;
-  currentUser: any | null;
+  account: Account | null;
+  currentUser: User | null;
   isNewUser: boolean;
 
   selectedConversationId: string | null;