Fix url in emails, add frontendURL helper (#19)

Fixes #16

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

@@ -1,13 +1,20 @@
 <template>
-  <form class="login-box medium-4 column align-self-middle" v-on:submit.prevent="submit()">
-    <h4>{{$t('RESET_PASSWORD.TITLE')}}</h4>
+  <form
+    class="login-box medium-4 column align-self-middle"
+    @submit.prevent="submit()"
+  >
+    <h4>{{ $t('RESET_PASSWORD.TITLE') }}</h4>
     <div class="column log-in-form">
-
-      <label :class="{ 'error': $v.credentials.email.$error }">
-        {{$t('RESET_PASSWORD.EMAIL.LABEL')}}
-        <input type="text" v-bind:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')" v-model.trim="credentials.email" @input="$v.credentials.email.$touch">
-        <span class="message" v-if="$v.credentials.email.$error">
-          {{$t('RESET_PASSWORD.EMAIL.ERROR')}}
+      <label :class="{ error: $v.credentials.email.$error }">
+        {{ $t('RESET_PASSWORD.EMAIL.LABEL') }}
+        <input
+          v-model.trim="credentials.email"
+          type="text"
+          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+          @input="$v.credentials.email.$touch"
+        />
+        <span v-if="$v.credentials.email.$error" class="message">
+          {{ $t('RESET_PASSWORD.EMAIL.ERROR') }}
         </span>
       </label>
       <woot-submit-button
@@ -24,6 +31,7 @@
 /* global bus */
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
+import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   data() {
@@ -58,13 +66,13 @@ export default {
     submit() {
       this.resetPassword.showLoading = true;
       Auth.resetPassword(this.credentials)
-        .then((res) => {
-          let message = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
+        .then(res => {
+          let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
           if (res.data && res.data.message) {
-            message = res.data.message;
+            successMessage = res.data.message;
           }
-          this.showAlert(message);
-          window.location = '/login';
+          this.showAlert(successMessage);
+          window.location = frontendURL('login');
         })
         .catch(() => {
           this.showAlert(this.$t('RESET_PASSWORD.API.ERROR_MESSAGE'));

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

@@ -1,9 +1,17 @@
 <template>
   <div class="medium-10 column signup">
     <div class="text-center medium-12 signup__hero">
-      <img src="~assets/images/woot-logo.svg" alt="Woot-logo" class="hero__logo" />
-      <h2 class="hero__title">{{$t('REGISTER.TRY_WOOT')}}</h2>
-      <p class="hero__sub">{{$t('REGISTER.TRY_WOOT_SUB')}}</p>
+      <img
+        src="~assets/images/woot-logo.svg"
+        alt="Woot-logo"
+        class="hero__logo"
+      />
+      <h2 class="hero__title">
+        {{ $t('REGISTER.TRY_WOOT') }}
+      </h2>
+      <p class="hero__sub">
+        {{ $t('REGISTER.TRY_WOOT_SUB') }}
+      </p>
     </div>
     <div class="row align-center">
       <div class="medium-5 column">
@@ -16,24 +24,38 @@
         </ul>
       </div>
       <div class="medium-5 column">
-        <form class="signup-box login-box " v-on:submit.prevent="submit()">
+        <form class="signup-box login-box " @submit.prevent="submit()">
           <div class="column log-in-form">
-            <label :class="{ 'error': $v.credentials.name.$error }">
-              {{$t('REGISTER.ACCOUNT_NAME.LABEL')}}
-              <input type="text" v-bind:placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')" v-model.trim="credentials.name" @input="$v.credentials.name.$touch">
-              <span class="message" v-if="$v.credentials.name.$error">
-                {{$t('REGISTER.ACCOUNT_NAME.ERROR')}}
+            <label :class="{ error: $v.credentials.name.$error }">
+              {{ $t('REGISTER.ACCOUNT_NAME.LABEL') }}
+              <input
+                v-model.trim="credentials.name"
+                type="text"
+                :placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')"
+                @input="$v.credentials.name.$touch"
+              />
+              <span v-if="$v.credentials.name.$error" class="message">
+                {{ $t('REGISTER.ACCOUNT_NAME.ERROR') }}
               </span>
             </label>
-            <label :class="{ 'error': $v.credentials.email.$error }">
-              {{$t('REGISTER.EMAIL.LABEL')}}
-              <input type="email" v-bind:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')" v-model.trim="credentials.email" @input="$v.credentials.email.$touch">
-              <span class="message" v-if="$v.credentials.email.$error">
-                {{$t('REGISTER.EMAIL.ERROR')}}
+            <label :class="{ error: $v.credentials.email.$error }">
+              {{ $t('REGISTER.EMAIL.LABEL') }}
+              <input
+                v-model.trim="credentials.email"
+                type="email"
+                :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+                @input="$v.credentials.email.$touch"
+              />
+              <span v-if="$v.credentials.email.$error" class="message">
+                {{ $t('REGISTER.EMAIL.ERROR') }}
               </span>
             </label>
             <woot-submit-button
-              :disabled="$v.credentials.name.$invalid || $v.credentials.email.$invalid || register.showLoading"
+              :disabled="
+                $v.credentials.name.$invalid ||
+                  $v.credentials.email.$invalid ||
+                  register.showLoading
+              "
               :button-text="$t('REGISTER.SUBMIT')"
               :loading="register.showLoading"
               button-class="large expanded"
@@ -58,6 +80,7 @@
 
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
+import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   data() {
@@ -96,12 +119,12 @@ export default {
     submit() {
       this.register.showLoading = true;
       Auth.register(this.credentials)
-        .then((res) => {
+        .then(res => {
           if (res.status === 200) {
-            window.location = '/u/dashboard';
+            window.location = frontendURL('dashboard');
           }
         })
-        .catch((error) => {
+        .catch(error => {
           let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
           if (error.response && error.response.data.message) {
             errorMessage = error.response.data.message;

app/javascript/src/routes/auth/auth.routes.js

@@ -3,11 +3,12 @@ import Confirmation from './Confirmation';
 import Signup from './Signup';
 import PasswordEdit from './PasswordEdit';
 import ResetPassword from './ResetPassword';
+import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/auth',
+      path: frontendURL('auth'),
       name: 'auth',
       component: Auth,
       children: [

app/javascript/src/routes/dashboard/conversation/conversation.routes.js

@@ -1,10 +1,11 @@
 /* eslint arrow-body-style: 0 */
 import ConversationView from './ConversationView';
+import { frontendURL } from '../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/dashboard',
+      path: frontendURL('dashboard'),
       name: 'home',
       roles: ['administrator', 'agent'],
       component: ConversationView,
@@ -13,7 +14,7 @@ export default {
       },
     },
     {
-      path: '/u/inbox/:inbox_id',
+      path: frontendURL('inbox/:inbox_id'),
       name: 'inbox_dashboard',
       roles: ['administrator', 'agent'],
       component: ConversationView,
@@ -22,7 +23,7 @@ export default {
       },
     },
     {
-      path: '/u/conversations/:conversation_id',
+      path: frontendURL('conversations/:conversation_id'),
       name: 'inbox_conversation',
       roles: ['administrator', 'agent'],
       component: ConversationView,

app/javascript/src/routes/dashboard/dashboard.routes.js

@@ -1,11 +1,12 @@
 import AppContainer from './Dashboard';
 import settings from './settings/settings.routes';
 import conversation from './conversation/conversation.routes';
+import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/',
+      path: frontendURL(''),
       component: AppContainer,
       children: [...conversation.routes, ...settings.routes],
     },

app/javascript/src/routes/dashboard/settings/agents/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="column content-box">
     <button
-      class="button icon success btn-fixed-right-top"
+      class="button nice icon success btn-fixed-right-top"
       @click="openAddPopup()"
     >
       <i class="icon ion-android-add-circle"></i>
@@ -12,13 +12,20 @@
     <!-- List Agents -->
     <div class="row">
       <div class="small-8 columns">
-        <woot-loading-state v-if="fetchStatus" :message="$t('AGENT_MGMT.LOADING')" />
-        <p v-if="!fetchStatus && !agentList.length">{{ $t('AGENT_MGMT.LIST.404') }}</p>
-        <table class="woot-table"  v-if="!fetchStatus && agentList.length">
+        <woot-loading-state
+          v-if="fetchStatus"
+          :message="$t('AGENT_MGMT.LOADING')"
+        />
+        <p v-if="!fetchStatus && !agentList.length">
+          {{ $t('AGENT_MGMT.LIST.404') }}
+        </p>
+        <table v-if="!fetchStatus && agentList.length" class="woot-table">
           <tbody>
-            <tr v-for="(agent, index) in agentList">
+            <tr v-for="(agent, index) in agentList" :key="agent.email">
               <!-- Gravtar Image -->
-              <td><img class="woot-thumbnail" :src="gravatarUrl(agent.email)"/></td>
+              <td>
+                <img class="woot-thumbnail" :src="gravatarUrl(agent.email)" />
+              </td>
               <!-- Agent Name + Email -->
               <td>
                 <span class="agent-name">{{ agent.name }}</span>
@@ -27,17 +34,21 @@
               <!-- Agent Role + Verification Status -->
               <td>
                 <span class="agent-name">{{ agent.role }}</span>
-                <span v-if="agent.confirmed">{{$t('AGENT_MGMT.LIST.VERIFIED')}}</span>
-                <span v-if="!agent.confirmed">{{$t('AGENT_MGMT.LIST.VERIFICATION_PENDING')}}</span>
+                <span v-if="agent.confirmed">
+                  {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
+                </span>
+                <span v-if="!agent.confirmed">
+                  {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
+                </span>
               </td>
               <!-- Actions -->
               <td>
                 <div v-if="showActions(agent)" class="button-wrapper">
                   <div @click="openEditPopup(agent)">
                     <woot-submit-button
-                    :button-text="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
-                    icon-class="ion-edit"
-                    button-class="link hollow grey-btn"
+                      :button-text="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
+                      icon-class="ion-edit"
+                      button-class="link hollow grey-btn"
                     />
                   </div>
                   <div @click="openDeletePopup(agent, index)">
@@ -60,18 +71,18 @@
     </div>
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-agent :on-close="hideAddPopup"/>
+      <add-agent :on-close="hideAddPopup" />
     </woot-modal>
 
     <!-- Edit Agent -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <edit-agent
+        v-if="showEditPopup"
+        :id="currentAgent.id"
         :name="currentAgent.name"
         :type="currentAgent.role"
         :email="currentAgent.email"
-        :id="currentAgent.id"
         :on-close="hideEditPopup"
-        v-if="showEditPopup"
       />
     </woot-modal>
 
@@ -87,9 +98,7 @@
     />
 
     <!-- Loader Status -->
-
   </div>
-
 </template>
 <script>
 /* global bus */
@@ -97,14 +106,12 @@
 import { mapGetters } from 'vuex';
 import md5 from 'md5';
 
-import PageHeader from '../SettingsSubPageHeader';
 import AddAgent from './AddAgent';
 import EditAgent from './EditAgent';
 import DeleteAgent from './DeleteAgent';
 
 export default {
   components: {
-    PageHeader,
     AddAgent,
     EditAgent,
     DeleteAgent,
@@ -127,13 +134,19 @@ export default {
       fetchStatus: 'getAgentFetchStatus',
     }),
     deleteConfirmText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${this.currentAgent.name}`;
+      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
+        this.currentAgent.name
+      }`;
     },
     deleteRejectText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${this.currentAgent.name}`;
+      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
+        this.currentAgent.name
+      }`;
     },
     deleteMessage() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')} ${this.currentAgent.name} ?`;
+      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+        this.currentAgent.name
+      } ?`;
     },
   },
   mounted() {
@@ -142,7 +155,9 @@ export default {
   methods: {
     showActions(agent) {
       if (agent.role === 'administrator') {
-        const adminList = this.agentList.filter(item => item.role === 'administrator');
+        const adminList = this.agentList.filter(
+          item => item.role === 'administrator'
+        );
         return adminList.length !== 1;
       }
       return true;
@@ -184,19 +199,22 @@ export default {
       this.deleteAgent(this.currentAgent.id);
     },
     deleteAgent(id) {
-      this.$store.dispatch('deleteAgent', {
-        id,
-      }).then(() => {
-        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      }).catch(() => {
-        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
-      });
+      this.$store
+        .dispatch('deleteAgent', {
+          id,
+        })
+        .then(() => {
+          this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        })
+        .catch(() => {
+          this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+        });
     },
     // Show SnackBar
     showAlert(message) {
       // Reset loading, current selected agent
       this.loading[this.currentAgent.id] = false;
-      this.currentAgent = { };
+      this.currentAgent = {};
       // Show message
       this.agentAPI.message = message;
       bus.$emit('newToastMessage', message);

app/javascript/src/routes/dashboard/settings/agents/agent.routes.js

@@ -1,10 +1,11 @@
 import SettingsContent from '../Wrapper';
 import AgentHome from './Index';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/settings/agents',
+      path: frontendURL('settings/agents'),
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_MGMT.HEADER',

app/javascript/src/routes/dashboard/settings/billing/billing.routes.js

@@ -1,11 +1,12 @@
 import Index from './Index';
 import SettingsContent from '../Wrapper';
 import AccountLocked from './AccountLocked';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/settings/billing',
+      path: frontendURL('settings/billing'),
       component: SettingsContent,
       props: {
         headerTitle: 'BILLING.HEADER',

app/javascript/src/routes/dashboard/settings/canned/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="column content-box">
     <button
-      class="button icon success btn-fixed-right-top"
+      class="button nice icon success btn-fixed-right-top"
       @click="openAddPopup()"
     >
       <i class="icon ion-android-add-circle"></i>
@@ -10,31 +10,46 @@
     <!-- List Canned Response -->
     <div class="row">
       <div class="small-8 columns">
-        <p v-if="!fetchStatus && !cannedResponseList.length" class="no-items-error-message">
+        <p
+          v-if="!fetchStatus && !cannedResponseList.length"
+          class="no-items-error-message"
+        >
           {{ $t('CANNED_MGMT.LIST.404') }}
         </p>
-        <woot-loading-state v-if="fetchStatus" :message="$t('CANNED_MGMT.LOADING')" />
+        <woot-loading-state
+          v-if="fetchStatus"
+          :message="$t('CANNED_MGMT.LOADING')"
+        />
 
-        <table class="woot-table" v-if="!fetchStatus && cannedResponseList.length">
+        <table
+          v-if="!fetchStatus && cannedResponseList.length"
+          class="woot-table"
+        >
           <thead>
             <!-- Header -->
-            <th v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')">
+            <th
+              v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
               {{ thHeader }}
             </th>
           </thead>
           <tbody>
-            <tr v-for="(cannedItem, index) in cannedResponseList">
+            <tr
+              v-for="(cannedItem, index) in cannedResponseList"
+              :key="cannedItem.short_code"
+            >
               <!-- Short Code  -->
               <td>{{ cannedItem.short_code }}</td>
               <!-- Content -->
               <td>{{ cannedItem.content }}</td>
               <!-- Action Buttons -->
               <td class="button-wrapper">
-                <div @click="openEditPopup(cannedItem)" >
+                <div @click="openEditPopup(cannedItem)">
                   <woot-submit-button
-                  :button-text="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                  icon-class="ion-edit"
-                  button-class="link hollow grey-btn"
+                    :button-text="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
+                    icon-class="ion-edit"
+                    button-class="link hollow grey-btn"
                   />
                 </div>
                 <div @click="openDeletePopup(cannedItem, index)">
@@ -57,17 +72,17 @@
     </div>
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-canned :on-close="hideAddPopup"/>
+      <add-canned :on-close="hideAddPopup" />
     </woot-modal>
 
     <!-- Edit Canned Response -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <edit-canned
+        v-if="showEditPopup"
+        :id="selectedResponse.id"
         :edshort-code="selectedResponse.short_code"
         :edcontent="selectedResponse.content"
-        :id="selectedResponse.id"
         :on-close="hideEditPopup"
-        v-if="showEditPopup"
       />
     </woot-modal>
 
@@ -82,13 +97,11 @@
       :reject-text="deleteRejectText"
     />
   </div>
-
 </template>
 <script>
 /* global bus */
 import { mapGetters } from 'vuex';
 
-import PageHeader from '../SettingsSubPageHeader';
 import AddCanned from './AddCanned';
 import EditCanned from './EditCanned';
 import DeleteCanned from './DeleteCanned';
@@ -96,7 +109,6 @@ import DeleteCanned from './DeleteCanned';
 export default {
   components: {
     AddCanned,
-    PageHeader,
     EditCanned,
     DeleteCanned,
   },
@@ -119,13 +131,19 @@ export default {
     }),
     // Delete Modal
     deleteConfirmText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${this.selectedResponse.short_code}`;
+      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedResponse.short_code
+      }`;
     },
     deleteRejectText() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${this.selectedResponse.short_code}`;
+      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.NO')} ${
+        this.selectedResponse.short_code
+      }`;
     },
     deleteMessage() {
-      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')} ${this.selectedResponse.short_code} ?`;
+      return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+        this.selectedResponse.short_code
+      } ?`;
     },
   },
   mounted() {
@@ -136,7 +154,7 @@ export default {
     showAlert(message) {
       // Reset loading, current selected agent
       this.loading[this.selectedResponse.id] = false;
-      this.selectedResponse = { };
+      this.selectedResponse = {};
       // Show message
       this.cannedResponseAPI.message = message;
       bus.$emit('newToastMessage', message);
@@ -173,13 +191,16 @@ export default {
       this.deleteCannedResponse(this.selectedResponse.id);
     },
     deleteCannedResponse(id) {
-      this.$store.dispatch('deleteCannedResponse', {
-        id,
-      }).then(() => {
-        this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      }).catch(() => {
-        this.showAlert(this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE'));
-      });
+      this.$store
+        .dispatch('deleteCannedResponse', {
+          id,
+        })
+        .then(() => {
+          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        })
+        .catch(() => {
+          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE'));
+        });
     },
   },
 };

app/javascript/src/routes/dashboard/settings/canned/canned.routes.js

@@ -1,10 +1,11 @@
 import SettingsContent from '../Wrapper';
 import CannedHome from './Index';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/settings/canned-response',
+      path: frontendURL('settings/canned-response'),
       component: SettingsContent,
       props: {
         headerTitle: 'CANNED_MGMT.HEADER',

app/javascript/src/routes/dashboard/settings/inbox/Index.vue

@@ -5,15 +5,24 @@
       <div class="small-8 columns">
         <p v-if="!inboxesList.length" class="no-items-error-message">
           {{ $t('INBOX_MGMT.LIST.404') }}
-          <router-link to="/u/settings/inboxes/new" v-if="isAdmin()">
+          <router-link
+            v-if="isAdmin()"
+            :to="frontendURL('settings/inboxes/new')"
+          >
             {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
           </router-link>
         </p>
 
-        <table class="woot-table" v-if="inboxesList.length">
+        <table v-if="inboxesList.length" class="woot-table">
           <tbody>
-            <tr v-for="item in inboxesList">
-              <td><img class="woot-thumbnail" :src="item.avatarUrl" alt="No Page Image"/></td>
+            <tr v-for="item in inboxesList" :key="item.label">
+              <td>
+                <img
+                  class="woot-thumbnail"
+                  :src="item.avatarUrl"
+                  alt="No Page Image"
+                />
+              </td>
               <!-- Short Code  -->
               <td>
                 <span class="agent-name">{{ item.label }}</span>
@@ -23,11 +32,11 @@
               <!-- Action Buttons -->
               <td>
                 <div class="button-wrapper">
-                  <div @click="openSettings(item)" v-if="isAdmin()">
+                  <div v-if="isAdmin()" @click="openSettings(item)">
                     <woot-submit-button
-                    :button-text="$t('INBOX_MGMT.SETTINGS')"
-                    icon-class="ion-gear-b"
-                    button-class="link hollow grey-btn"
+                      :button-text="$t('INBOX_MGMT.SETTINGS')"
+                      icon-class="ion-gear-b"
+                      button-class="link hollow grey-btn"
                     />
                   </div>
                   <!-- <div>
@@ -37,7 +46,7 @@
                     button-class="link hollow grey-btn"
                     />
                   </div> -->
-                  <div @click="openDelete(item)" v-if="isAdmin()">
+                  <div v-if="isAdmin()" @click="openDelete(item)">
                     <woot-submit-button
                       :button-text="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
                       :loading="loading[item.id]"
@@ -57,10 +66,10 @@
       </div>
     </div>
     <settings
+      v-if="showSettings"
       :show.sync="showSettings"
       :on-close="closeSettings"
       :inbox="selectedInbox"
-      v-if="showSettings"
     />
 
     <delete-inbox
@@ -78,14 +87,13 @@
 /* global bus */
 
 import { mapGetters } from 'vuex';
-import InboxListItem from '../../../../components/widgets/InboxListItem';
 import Settings from './Settings';
 import DeleteInbox from './DeleteInbox';
 import adminMixin from '../../../../mixins/isAdmin';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   components: {
-    InboxListItem,
     Settings,
     DeleteInbox,
   },
@@ -104,13 +112,19 @@ export default {
     }),
     // Delete Modal
     deleteConfirmText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${this.selectedInbox.label}`;
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedInbox.label
+      }`;
     },
     deleteRejectText() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${this.selectedInbox.label}`;
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
+        this.selectedInbox.label
+      }`;
     },
     deleteMessage() {
-      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${this.selectedInbox.label} ?`;
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+        this.selectedInbox.label
+      } ?`;
     },
   },
   methods: {
@@ -123,9 +137,20 @@ export default {
       this.selectedInbox = {};
     },
     deleteInbox({ channel_id }) {
-      this.$store.dispatch('deleteInbox', channel_id)
-        .then(() => bus.$emit('newToastMessage', this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE')))
-        .catch(() => bus.$emit('newToastMessage', this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE')));
+      this.$store
+        .dispatch('deleteInbox', channel_id)
+        .then(() =>
+          bus.$emit(
+            'newToastMessage',
+            this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE')
+          )
+        )
+        .catch(() =>
+          bus.$emit(
+            'newToastMessage',
+            this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE')
+          )
+        );
     },
 
     confirmDeletion() {
@@ -140,6 +165,7 @@ export default {
       this.showDeletePopup = false;
       this.selectedInbox = {};
     },
+    frontendURL,
   },
 };
 </script>

app/javascript/src/routes/dashboard/settings/inbox/inbox.routes.js

@@ -6,11 +6,12 @@ import ChannelList from './ChannelList';
 import channelFactory from './channel-factory';
 import AddAgents from './AddAgents';
 import FinishSetup from './FinishSetup';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/settings/inboxes',
+      path: frontendURL('settings/inboxes'),
       component: SettingsContent,
       props: {
         headerTitle: 'INBOX_MGMT.HEADER',

app/javascript/src/routes/dashboard/settings/reports/reports.routes.js

@@ -1,10 +1,11 @@
 import Index from './Index';
 import SettingsContent from '../Wrapper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/reports',
+      path: frontendURL('reports'),
       component: SettingsContent,
       props: {
         headerTitle: 'REPORT.HEADER',

app/javascript/src/routes/dashboard/settings/settings.routes.js

@@ -4,18 +4,19 @@ import canned from './canned/canned.routes';
 import reports from './reports/reports.routes';
 import billing from './billing/billing.routes';
 import Auth from '../../../api/auth';
+import { frontendURL } from '../../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/settings',
+      path: frontendURL('settings'),
       name: 'settings_home',
       roles: ['administrator', 'agent'],
       redirect: () => {
         if (Auth.isAdmin()) {
-          return '/u/settings/agents/';
+          return frontendURL('settings/agents');
         }
-        return '/u/settings/canned-response';
+        return frontendURL('settings/canned-response');
       },
     },
     ...inbox.routes,

app/javascript/src/routes/index.js

@@ -5,6 +5,7 @@ import auth from '../api/auth';
 import login from './login/login.routes';
 import dashboard from './dashboard/dashboard.routes';
 import authRoute from './auth/auth.routes';
+import { frontendURL } from '../helper/URLHelper';
 
 /* Vue Routes */
 const routes = [
@@ -13,7 +14,7 @@ const routes = [
   ...authRoute.routes,
   {
     path: '/',
-    redirect: '/u/dashboard',
+    redirect: frontendURL('dashboard'),
   },
 ];
 
@@ -66,15 +67,15 @@ const redirectUser = (to, from, next) => {
     const isAccessible =
       window.roleWiseRoutes[currentUser.role].indexOf(to.name) > -1;
     if (!isAccessible) {
-      return next('/u/dashboard');
+      return next(frontendURL('dashboard'));
     }
   }
   // If unprotected and loggedIn -> redirect
   if (unProtectedRoutes.indexOf(to.name) !== -1 && isLoggedIn) {
-    return next('/u/dashboard');
+    return next(frontendURL('dashboard'));
   }
   if (unProtectedRoutes.indexOf(to.name) === -1 && !isLoggedIn) {
-    return next('/u/login');
+    return next(frontendURL('login'));
   }
   return next();
 };
@@ -82,7 +83,7 @@ const redirectUser = (to, from, next) => {
 // protecting routes
 router.beforeEach((to, from, next) => {
   if (!to.name) {
-    return next('/u/dashboard');
+    return next(frontendURL('dashboard'));
   }
 
   return redirectUser(to, from, next);

app/javascript/src/routes/login/login.routes.js

@@ -1,9 +1,10 @@
 import Login from './Login';
+import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   routes: [
     {
-      path: '/u/login',
+      path: frontendURL('login'),
       name: 'login',
       component: Login,
     },