Merge pull request #689 from openreplay/support-callout

Support callout

frontend/app/Router.js

@@ -16,12 +16,13 @@ import { withStore } from 'App/mstore';
 
 import APIClient from './api_client';
 import * as routes from './routes';
-import { OB_DEFAULT_TAB } from 'App/routes';
+import { OB_DEFAULT_TAB, isRoute } from 'App/routes';
 import Signup from './components/Signup/Signup';
 import { fetchTenants } from 'Duck/user';
 import { setSessionPath } from 'Duck/sessions';
 import { ModalProvider } from './components/Modal';
 import { GLOBAL_DESTINATION_PATH } from 'App/constants/storageKeys';
+import SupportCallout from 'Shared/SupportCallout';
 
 const Login = lazy(() => import('Components/Login/Login'));
 const ForgotPassword = lazy(() => import('Components/ForgotPassword/ForgotPassword'));
@@ -104,6 +105,7 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
             tenants: state.getIn(['user', 'tenants']),
             existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
             onboarding: state.getIn(['user', 'onboarding']),
+            isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' || state.getIn(['user', 'authDetails', 'edition']) === 'ee',
         };
     },
     {
@@ -169,9 +171,10 @@ class Router extends React.Component {
     }
 
     render() {
-        const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding } = this.props;
+        const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding, isEnterprise } = this.props;
         const siteIdList = sites.map(({ id }) => id).toJS();
         const hideHeader = (location.pathname && location.pathname.includes('/session/')) || location.pathname.includes('/assist/');
+        const isPlayer = isRoute(SESSION_PATH, location.pathname);
 
         return isLoggedIn ? (
             <ModalProvider>
@@ -228,6 +231,7 @@ class Router extends React.Component {
                         </Switch>
                     </Suspense>
                 </Loader>
+                {!isEnterprise && !isPlayer && <SupportCallout /> }
             </ModalProvider>
         ) : (
             <Suspense fallback={<Loader loading={true} className="flex-1" />}>
@@ -237,6 +241,7 @@ class Router extends React.Component {
                     {!existingTenant && <Route exact strict path={SIGNUP_PATH} component={Signup} />}
                     <Redirect to={LOGIN_PATH} />
                 </Switch>
+                {!isEnterprise && <SupportCallout /> }
             </Suspense>
         );
     }

frontend/app/components/shared/SupportCallout/SupportCallout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import SlackIcon from '../../../svg/slack-help.svg';
+import { Popup } from 'UI';
+
+function SupportCallout() {
+  return (
+    <a href="https://slack.openreplay.com" target="_blank">
+      <div className="w-12 h-12 absolute z-50 cursor-pointer right-0 bottom-0 m-4">
+        <Popup content="OpenReplay community" delay={0}>
+          <img src={SlackIcon} />
+        </Popup>
+      </div>
+    </a>
+  );
+}
+
+export default SupportCallout;

frontend/app/components/shared/SupportCallout/index.ts

@@ -0,0 +1 @@
+export { default } from './SupportCallout';

frontend/app/svg/slack-help.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect y="4.13794" width="82.7586" height="82.7586" rx="41.3793" fill="#394EFF"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3373 34.6699C25.1254 34.6699 24.144 33.6586 24.3317 32.4638C25.5052 25.2052 31.0356 19.9138 40.6326 19.9138C50.2339 19.9138 56.7073 25.7173 56.7073 33.633C56.7073 39.3682 53.8696 43.3964 49.0689 46.3195C44.375 49.1316 43.035 51.0903 43.035 54.8967V55.0247C43.035 55.5906 42.8102 56.1332 42.4101 56.5334C42.01 56.9335 41.4673 57.1583 40.9014 57.1583H37.6156C37.0534 57.1583 36.514 56.9365 36.1144 56.5409C35.7149 56.1454 35.4876 55.6082 35.482 55.046L35.4692 54.1926C35.2857 48.9823 37.5047 45.6538 42.4888 42.6198C46.8841 39.9229 48.4502 37.7765 48.4502 33.9658C48.4502 29.7882 45.2156 26.7201 40.2315 26.7201C35.9258 26.7201 32.9345 28.9774 31.9615 32.7027C31.6799 33.7866 30.7753 34.6699 29.6572 34.6699H26.3416H26.3373ZM39.2287 71.1207C41.8829 71.1207 43.9013 69.098 43.9013 66.4694C43.9013 63.8323 41.8829 61.8096 39.2287 61.8096C36.6427 61.8096 34.5902 63.8323 34.5902 66.4652C34.5902 69.098 36.6427 71.1207 39.2287 71.1207Z" fill="white"/>
 <rect x="52.3045" y="49.2005" width="37.116" height="37.116" rx="18.558" fill="white"/>