chore: Adjust Chatwoot Config to deploy frontend as a separate app (#2347)

app/javascript/dashboard/assets/scss/_woot.scss

@@ -46,5 +46,4 @@
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
-@import '@chatwoot/prosemirror-schema/src/woot-editor.css';
 @import '~shared/assets/stylesheets/ionicons';

app/javascript/dashboard/components/widgets/InboxListItem.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="inbox-item" >
-    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image"/>
+  <div class="inbox-item">
+    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
     <div class="item--details columns">
-      <h4 class="item--name">{{ inbox.label }}</h4>
-      <p class="item--sub">Facebook</p>
+      <h4 class="item--name">
+        {{ inbox.label }}
+      </h4>
+      <p class="item--sub">
+        Facebook
+      </p>
     </div>
     <!-- <span class="ion-chevron-right arrow"></span> -->
   </div>
 </template>
 <script>
 /* eslint no-console: 0 */
-/* global bus */
 // import WootSwitch from '../ui/Switch';
 
 export default {
   props: ['inbox'],
-  created() {
-  },
+  created() {},
 };
 </script>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -28,6 +28,7 @@ import TagAgents from '../conversation/TagAgents.vue';
 import { EditorState } from 'prosemirror-state';
 import { defaultMarkdownParser } from 'prosemirror-markdown';
 import { wootWriterSetup } from '@chatwoot/prosemirror-schema';
+import '@chatwoot/prosemirror-schema/src/woot-editor.css';
 
 const createState = (content, placeholder, plugins = []) => {
   return EditorState.create({

app/javascript/dashboard/constants.js

@@ -1,8 +1,4 @@
 export default {
-  APP_BASE_URL: '/',
-  get apiURL() {
-    return `${this.APP_BASE_URL}/`;
-  },
   GRAVATAR_URL: 'https://www.gravatar.com/avatar/',
   ASSIGNEE_TYPE: {
     ME: 'me',
@@ -15,3 +11,4 @@ export default {
     BOT: 'bot',
   },
 };
+export const DEFAULT_REDIRECT_URL = '/app/';

app/javascript/dashboard/helper/APIHelper.js

@@ -1,14 +1,11 @@
 /* eslint no-console: 0 */
-import constants from '../constants';
 import Auth from '../api/auth';
 
-const parseErrorCode = error => {
-  return Promise.reject(error);
-};
+const parseErrorCode = error => Promise.reject(error);
 
 export default axios => {
-  const wootApi = axios.create();
-  wootApi.defaults.baseURL = constants.apiURL;
+  const { apiHost = '' } = window.chatwootConfig || {};
+  const wootApi = axios.create({ baseURL: `${apiHost}/` });
   // Add Auth Headers to requests if logged in
   if (Auth.isLoggedIn()) {
     const {

app/javascript/dashboard/helper/actionCable.js

@@ -4,7 +4,8 @@ import { newMessageNotification } from 'shared/helpers/AudioNotificationHelper';
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
-    super(app, pubsubToken);
+    const { websocketURL = '' } = window.chatwootConfig || {};
+    super(app, pubsubToken, websocketURL);
     this.CancelTyping = [];
     this.events = {
       'message.created': this.onMessageCreated,

app/javascript/dashboard/routes/auth/Confirmation.vue

@@ -2,31 +2,35 @@
   <loading-state :message="$t('CONFIRM_EMAIL')"></loading-state>
 </template>
 <script>
-/* eslint-disable */
 import LoadingState from '../../components/widgets/LoadingState';
 import Auth from '../../api/auth';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 export default {
-  props: {
-    confirmationToken: String,
-    redirectUrl: String,
-    config: String,
-  },
   components: {
     LoadingState,
   },
+  props: {
+    confirmationToken: {
+      type: String,
+      default: '',
+    },
+  },
   mounted() {
     this.confirmToken();
   },
   methods: {
-    confirmToken() {
-      Auth.verifyPasswordToken({
-        confirmationToken: this.confirmationToken
-      }).then(res => {
-        window.location = res.data.redirect_url;
-      }).catch(res => {
-        window.location = '/';
-      });
-    }
-  }
-}
+    async confirmToken() {
+      try {
+        const {
+          data: { redirect_url: redirectURL },
+        } = await Auth.verifyPasswordToken({
+          confirmationToken: this.confirmationToken,
+        });
+        window.location = redirectURL;
+      } catch (error) {
+        window.location = DEFAULT_REDIRECT_URL;
+      }
+    },
+  },
+};
 </script>

app/javascript/dashboard/routes/auth/PasswordEdit.vue

@@ -46,12 +46,11 @@
 </template>
 
 <script>
-/* global bus */
-
 import { required, minLength } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
 
 import WootSubmitButton from '../../components/buttons/FormSubmitButton';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 export default {
   components: {
@@ -81,7 +80,7 @@ export default {
     // If url opened without token
     // redirect to login
     if (!this.resetPasswordToken) {
-      window.location = '/';
+      window.location = DEFAULT_REDIRECT_URL;
     }
   },
   validations: {
@@ -118,7 +117,7 @@ export default {
       Auth.setNewPassword(credentials)
         .then(res => {
           if (res.status === 200) {
-            window.location = '/';
+            window.location = DEFAULT_REDIRECT_URL;
           }
         })
         .catch(() => {

app/javascript/dashboard/routes/auth/ResetPassword.vue

@@ -30,7 +30,6 @@
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
-import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   data() {
@@ -71,7 +70,6 @@ export default {
             successMessage = res.data.message;
           }
           this.showAlert(successMessage);
-          window.location = frontendURL('login');
         })
         .catch(error => {
           let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');

app/javascript/dashboard/routes/auth/Signup.vue

@@ -79,6 +79,7 @@ import Auth from '../../api/auth';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 export default {
   mixins: [globalConfigMixin, alertMixin],
@@ -132,7 +133,7 @@ export default {
       try {
         const response = await Auth.register(this.credentials);
         if (response.status === 200) {
-          window.location = '/';
+          window.location = DEFAULT_REDIRECT_URL;
         }
       } catch (error) {
         let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -49,7 +49,6 @@
 </template>
 
 <script>
-/* global bus */
 /* eslint no-console: 0 */
 import { required, minLength } from 'vuelidate/lib/validators';
 

app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue

@@ -44,7 +44,6 @@
 </template>
 
 <script>
-/* global bus */
 import { required, url, minLength } from 'vuelidate/lib/validators';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';

app/javascript/dashboard/routes/index.js

@@ -1,4 +1,3 @@
-/* eslint no-console: 0 */
 import VueRouter from 'vue-router';
 
 import auth from '../api/auth';
@@ -7,14 +6,13 @@ import dashboard from './dashboard/dashboard.routes';
 import authRoute from './auth/auth.routes';
 import { frontendURL } from '../helper/URLHelper';
 
-const loggedInUser = auth.getCurrentUser() || {};
 const routes = [
   ...login.routes,
   ...dashboard.routes,
   ...authRoute.routes,
   {
     path: '/',
-    redirect: frontendURL(`accounts/${loggedInUser.account_id}/dashboard`),
+    redirect: '/app',
   },
 ];
 
@@ -41,10 +39,7 @@ const generateRoleWiseRoute = route => {
 // returns an object with roles as keys and routeArr as values
 generateRoleWiseRoute(routes);
 
-export const router = new VueRouter({
-  mode: 'history',
-  routes, // short for routes: routes
-});
+export const router = new VueRouter({ mode: 'history', routes });
 
 const unProtectedRoutes = ['login', 'auth_signup', 'auth_reset_password'];
 
@@ -117,7 +112,10 @@ const validateRouteAccess = (to, from, next) => {
 router.beforeEach((to, from, next) => {
   if (!to.name) {
     const user = auth.getCurrentUser();
-    return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+    if (user) {
+      return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+    }
+    return next('/app/login');
   }
 
   return validateRouteAccess(to, from, next);

app/javascript/dashboard/routes/index.spec.js

@@ -13,10 +13,6 @@ jest.mock('./login/login.routes', () => ({
 }));
 jest.mock('../constants', () => {
   return {
-    APP_BASE_URL: '/',
-    get apiUrl() {
-      return `${this.APP_BASE_URL}/`;
-    },
     GRAVATAR_URL: 'https://www.gravatar.com/avatar',
     CHANNELS: {
       FACEBOOK: 'facebook',

app/javascript/dashboard/store/modules/auth.js

@@ -6,6 +6,7 @@ import authAPI from '../../api/auth';
 import createAxios from '../../helper/APIHelper';
 import actionCable from '../../helper/actionCable';
 import { setUser, getHeaderExpiry, clearCookiesOnLogout } from '../utils/api';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 const state = {
   currentUser: {
@@ -69,7 +70,7 @@ export const actions = {
           commit(types.default.SET_CURRENT_USER);
           window.axios = createAxios(axios);
           actionCable.init(Vue);
-          window.location = '/';
+          window.location = DEFAULT_REDIRECT_URL;
           resolve();
         })
         .catch(error => {

app/javascript/shared/helpers/BaseActionCableConnector.js

@@ -3,8 +3,9 @@ import { createConsumer } from '@rails/actioncable';
 const PRESENCE_INTERVAL = 60000;
 
 class BaseActionCableConnector {
-  constructor(app, pubsubToken) {
-    this.consumer = createConsumer();
+  constructor(app, pubsubToken, websocketHost = '') {
+    const websocketURL = websocketHost ? `${websocketHost}/cable` : undefined;
+    this.consumer = createConsumer(websocketURL);
     this.subscription = this.consumer.subscriptions.create(
       {
         channel: 'RoomChannel',