Bug: Fix account_id in URLs (#894)

* Bug: Fix account_id in URLs
* Fix accountMixin specs

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -75,6 +75,7 @@ export default {
       inboxesList: 'inboxes/getInboxes',
       activeInbox: 'getSelectedInbox',
       currentUser: 'getCurrentUser',
+      accountId: 'getCurrentAccountId',
     }),
 
     isActiveChat() {
@@ -97,11 +98,7 @@ export default {
   methods: {
     cardClick(chat) {
       const { activeInbox } = this;
-      const path = conversationUrl(
+      const path = conversationUrl(this.accountId, activeInbox, chat.id);
-        this.currentUser.account_id,
-        activeInbox,
-        chat.id
-      );
       router.push({ path: frontendURL(path) });
     },
     extractMessageText(chatItem) {

app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Safates d'entrada",
-    "SIDEBAR_TXT": "<p><b>Safata d'entrada</b></p> <p> Quan connecteu un lloc web o una pàgina de facebook a Chatwoot, es diu <b>Safata d'entrada</b>. Teniu bústies d'entrada il·limitades al vostre compte de Chatwoot. </p><p> Feu click a <b>Afegir safata d'entrada</b> per connectar-vos a un lloc web o a una pàgina de Facebook. </p><p> Al <a href=\"/app/dashboard\">Tauler de control</a>, pots veure totes les converses de totes les teves safates d'entrada en un sol lloc i respondre-les a la pestanya `Converses`. </p><p> També pots veure converses específiques per a una safata d’entrada si feu clic al nom de la safata d'entrada, al panell esquerre de la taula. </p>",
+    "SIDEBAR_TXT": "<p><b>Safata d'entrada</b></p> <p> Quan connecteu un lloc web o una pàgina de facebook a Chatwoot, es diu <b>Safata d'entrada</b>. Teniu bústies d'entrada il·limitades al vostre compte de Chatwoot. </p><p> Feu click a <b>Afegir safata d'entrada</b> per connectar-vos a un lloc web o a una pàgina de Facebook. </p><p> Al Tauler de control, pots veure totes les converses de totes les teves safates d'entrada en un sol lloc i respondre-les a la pestanya `Converses`. </p><p> També pots veure converses específiques per a una safata d’entrada si feu clic al nom de la safata d'entrada, al panell esquerre de la taula. </p>",
     "LIST": {
       "404": "No hi ha cap safata d'entrada connectat a aquest compte."
     },

app/javascript/dashboard/i18n/locale/de/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Posteingänge",
-    "SIDEBAR_TXT": "<p> <b> Posteingang </b> </p> <p> Wenn Sie eine Website oder eine Facebook-Seite mit Chatwoot verbinden, wird dies als <b> Posteingang </b> bezeichnet. Sie können unbegrenzt Posteingänge in Ihrem Chatwoot-Konto haben. </p> <p> Klicken Sie auf <b> Posteingang hinzufügen </b>, um eine Website oder eine Facebook-Seite zu verbinden. </p> <p> Im <a href=\"/app/dashboard\"> Dashboard </a> können Sie alle Konversationen aus all Ihren Posteingängen an einem einzigen Ort anzeigen und unter 'Konversationen' darauf antworten `tab. </p> <p> Sie können Konversationen auch für einen Posteingang anzeigen, indem Sie auf den Namen des Posteingangs im linken Bereich des Dashboards klicken. </p>",
+    "SIDEBAR_TXT": "<p> <b> Posteingang </b> </p> <p> Wenn Sie eine Website oder eine Facebook-Seite mit Chatwoot verbinden, wird dies als <b> Posteingang </b> bezeichnet. Sie können unbegrenzt Posteingänge in Ihrem Chatwoot-Konto haben. </p> <p> Klicken Sie auf <b> Posteingang hinzufügen </b>, um eine Website oder eine Facebook-Seite zu verbinden. </p> <p> Im Dashboard können Sie alle Konversationen aus all Ihren Posteingängen an einem einzigen Ort anzeigen und unter 'Konversationen' darauf antworten `tab. </p> <p> Sie können Konversationen auch für einen Posteingang anzeigen, indem Sie auf den Namen des Posteingangs im linken Bereich des Dashboards klicken. </p>",
     "LIST": {
       "404": "Diesem Konto sind keine Posteingänge zugeordnet."
     },

app/javascript/dashboard/i18n/locale/el/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Κιβώτια Εισερχομένων",
-    "SIDEBAR_TXT": "<p><b>Κιβώτιο Εισερχομένων</b></p> <p> Όταν συνδέετε σε μια Ιστοσελίδα ή μια σελίδα του Facebook με το Chatwoot, δημιουργείται ένα <b>Κιβώτιο</b>. Μπορείτε να έχετε απεριόριστα κιβώτια στον λογαριασμό σας στο Chatwoot. </p><p> Πατήστε στο <b>Προσθήκη Κιβωτίου</b> για να το συνδέσετε με μια ιστοσελίδα ή μια σελίδα στο Facebook. </p><p> Στον <a href=\"/app/dashboard\">Πίνακα Ελέγχου</a>, μπορείτε να δείτε τις συνομιλίες από όλα τα κιβώτια σε ένα μέρος και να απαντήσετε από την καρτέλα `Συνομιλίες`. </p><p> Μπορείτε επίσης να δείτε τις συνομιλίες από ένα κιβώτιο εισερχομένων πατώντας στο όνομά του στο αριστερό μέρος του πίνακα ελέγχου. </p>",
+    "SIDEBAR_TXT": "<p><b>Κιβώτιο Εισερχομένων</b></p> <p> Όταν συνδέετε σε μια Ιστοσελίδα ή μια σελίδα του Facebook με το Chatwoot, δημιουργείται ένα <b>Κιβώτιο</b>. Μπορείτε να έχετε απεριόριστα κιβώτια στον λογαριασμό σας στο Chatwoot. </p><p> Πατήστε στο <b>Προσθήκη Κιβωτίου</b> για να το συνδέσετε με μια ιστοσελίδα ή μια σελίδα στο Facebook. </p><p> Στον Πίνακα Ελέγχου, μπορείτε να δείτε τις συνομιλίες από όλα τα κιβώτια σε ένα μέρος και να απαντήσετε από την καρτέλα `Συνομιλίες`. </p><p> Μπορείτε επίσης να δείτε τις συνομιλίες από ένα κιβώτιο εισερχομένων πατώντας στο όνομά του στο αριστερό μέρος του πίνακα ελέγχου. </p>",
     "LIST": {
       "404": "Δεν υπάρχουν κιβώτια εισερχομένων σε αυτόν τον λογαριασμό."
     },

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
-    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the <a href=\"/app/dashboard\">Dashboard</a>, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },

app/javascript/dashboard/i18n/locale/fr/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Boîtes de réception",
-    "SIDEBAR_TXT": "<p><b>Boîte de réception</b></p> <p> Lorsque vous connectez un site Web ou une page Facebook à Chatwoot, elle est appelée une <b>Boîte de réception</b>. Vous pouvez avoir des boîtes de réception illimitées dans votre compte Chatwoot. </p><p> Cliquez sur <b>Ajouter Boîte de réception</b> pour connecter un site Web ou une page Facebook. </p><p> Dans le <a href=\"/app/dashboard\">tableau de bord</a>, vous pouvez voir toutes les conversations de toutes vos boîtes de réception en un seul endroit et y répondre dans l'onglet `Conversations`. </p><p> Vous pouvez également voir les conversations spécifiques à une boîte de réception en cliquant sur le nom de la boîte de réception sur le volet gauche du tableau de bord. </p>",
+    "SIDEBAR_TXT": "<p><b>Boîte de réception</b></p> <p> Lorsque vous connectez un site Web ou une page Facebook à Chatwoot, elle est appelée une <b>Boîte de réception</b>. Vous pouvez avoir des boîtes de réception illimitées dans votre compte Chatwoot. </p><p> Cliquez sur <b>Ajouter Boîte de réception</b> pour connecter un site Web ou une page Facebook. </p><p> Dans le tableau de bord, vous pouvez voir toutes les conversations de toutes vos boîtes de réception en un seul endroit et y répondre dans l'onglet `Conversations`. </p><p> Vous pouvez également voir les conversations spécifiques à une boîte de réception en cliquant sur le nom de la boîte de réception sur le volet gauche du tableau de bord. </p>",
     "LIST": {
       "404": "Il n'y a aucune boîte de réception associée à ce compte."
     },

app/javascript/dashboard/i18n/locale/ml/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "ഇൻ‌ബോക്സുകൾ",
-    "SIDEBAR_TXT": "<p> <b> ഇൻ‌ബോക്സ് </b> </p> <p> ചാറ്റ് വൂട്ടിലേക്ക് നിങ്ങൾ ഒരു വെബ്‌സൈറ്റോ ഫേസ്ബുക്ക് പേജോ കണക്റ്റുചെയ്യുമ്പോൾ, അതിനെ <b> ഇൻ‌ബോക്സ് </b> എന്ന് വിളിക്കുന്നു. നിങ്ങളുടെ ചാറ്റ് വൂട്ട് അക്കൗണ്ടിൽ പരിധിയില്ലാത്ത ഇൻബോക്സുകൾ ഉണ്ടായിരിക്കാൻ‌ കഴിയും. </p> <p> ഒരു വെബ്‌സൈറ്റ് അല്ലെങ്കിൽ‌ ഫേസ്ബുക് പേജ് ബന്ധിപ്പിക്കുന്നതിന് <b> ഇൻ‌ബോക്സ് ചേർക്കുക </b> ക്ലിക്കുചെയ്യുക. </p> <p> <a href=\"/app/dashboard\"> ഡാഷ്‌ബോർഡ് </a>, നിങ്ങളുടെ എല്ലാ ഇൻ‌ബോക്‌സുകളിൽ‌ നിന്നുമുള്ള എല്ലാ സംഭാഷണങ്ങളും ഒരൊറ്റ സ്ഥലത്ത് കാണാനും `സംഭാഷണങ്ങൾ‌` ടാബിന് കീഴിൽ അവയോട് പ്രതികരിക്കാനും കഴിയും. </p> <p> ഡാഷ്‌ബോർഡിന്റെ ഇടത് പാളിയിലെ ഇൻ‌ബോക്സ് ബട്ടണിൽ ക്ലിക്കുചെയ്ത് ഇൻബോക്സിൽ ഉള്ള സംഭാഷണങ്ങൾ കാണാൻ നിങ്ങൾക്കു സാധിക്കും . </p>",
+    "SIDEBAR_TXT": "<p> <b> ഇൻ‌ബോക്സ് </b> </p> <p> ചാറ്റ് വൂട്ടിലേക്ക് നിങ്ങൾ ഒരു വെബ്‌സൈറ്റോ ഫേസ്ബുക്ക് പേജോ കണക്റ്റുചെയ്യുമ്പോൾ, അതിനെ <b> ഇൻ‌ബോക്സ് </b> എന്ന് വിളിക്കുന്നു. നിങ്ങളുടെ ചാറ്റ് വൂട്ട് അക്കൗണ്ടിൽ പരിധിയില്ലാത്ത ഇൻബോക്സുകൾ ഉണ്ടായിരിക്കാൻ‌ കഴിയും. </p> <p> ഒരു വെബ്‌സൈറ്റ് അല്ലെങ്കിൽ‌ ഫേസ്ബുക് പേജ് ബന്ധിപ്പിക്കുന്നതിന് <b> ഇൻ‌ബോക്സ് ചേർക്കുക </b> ക്ലിക്കുചെയ്യുക. </p> <p> ഡാഷ്‌ബോർഡ്, നിങ്ങളുടെ എല്ലാ ഇൻ‌ബോക്‌സുകളിൽ‌ നിന്നുമുള്ള എല്ലാ സംഭാഷണങ്ങളും ഒരൊറ്റ സ്ഥലത്ത് കാണാനും `സംഭാഷണങ്ങൾ‌` ടാബിന് കീഴിൽ അവയോട് പ്രതികരിക്കാനും കഴിയും. </p> <p> ഡാഷ്‌ബോർഡിന്റെ ഇടത് പാളിയിലെ ഇൻ‌ബോക്സ് ബട്ടണിൽ ക്ലിക്കുചെയ്ത് ഇൻബോക്സിൽ ഉള്ള സംഭാഷണങ്ങൾ കാണാൻ നിങ്ങൾക്കു സാധിക്കും . </p>",
     "LIST": {
       "404": "ഈ അക്കൗണ്ടിലേക്കു ഇൻ‌ബോക്സുകളൊന്നും ബന്ധിപ്പിച്ചിട്ടില്ല."
     },

app/javascript/dashboard/i18n/locale/nl/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Inboxen",
-    "SIDEBAR_TXT": "<p><b>Inboxen</b></p> <p> Wanneer u een website of een Facebook-pagina verbindt met Chatwoot, het heet een <b>inbox</b>. U kunt een oneindig aantal inboxen hebben in uw Chatwoot account. </p><p> Klik op <b>Voeg Postvak in</b> toe om een website of een Facebook-pagina te verbinden. </p><p> in het <a href=\"/app/dashboard\">Dashboard</a>, u kunt alle gesprekken van al uw inboxen op één plek zien en erop reageren onder het `Conversations` tabblad. </p><p> U kunt ook gesprekken zien die specifiek zijn voor een inbox door te klikken op de naam van de inbox op het linkerpaneel van het dashboard. </p>",
+    "SIDEBAR_TXT": "<p><b>Inboxen</b></p> <p> Wanneer u een website of een Facebook-pagina verbindt met Chatwoot, het heet een <b>inbox</b>. U kunt een oneindig aantal inboxen hebben in uw Chatwoot account. </p><p> Klik op <b>Voeg Postvak in</b> toe om een website of een Facebook-pagina te verbinden. </p><p> in het Dashboard, u kunt alle gesprekken van al uw inboxen op één plek zien en erop reageren onder het `Conversations` tabblad. </p><p> U kunt ook gesprekken zien die specifiek zijn voor een inbox door te klikken op de naam van de inbox op het linkerpaneel van het dashboard. </p>",
     "LIST": {
       "404": "Er zijn geen inboxen aan dit account gekoppeld."
     },

app/javascript/dashboard/i18n/locale/pt/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Caixas de Entrada",
-    "SIDEBAR_TXT": "<p><b>Caixa de entrada</b></p> <p> Quando você conectar um site ou uma página de Facebook ao Chatwoot, é chamado de <b>caixa de entrada</b>. Você pode ter caixas de entrada ilimitadas na sua conta de Chatwoot. </p><p> Clique em <b>Adicionar caixa de entrada</b> para conectar um site ou uma página do Facebook. </p><p> No <a href=\"/app/dashboard\">Painel</a>, você pode ver todas as conversas de todas as suas caixas de entrada em um único lugar e responder a elas sob a guia `Conversations`. </p><p> Você também pode ver conversas específicas para uma caixa de entrada, clicando no nome da caixa de entrada no painel esquerdo do painel. </p>",
+    "SIDEBAR_TXT": "<p><b>Caixa de entrada</b></p> <p> Quando você conectar um site ou uma página de Facebook ao Chatwoot, é chamado de <b>caixa de entrada</b>. Você pode ter caixas de entrada ilimitadas na sua conta de Chatwoot. </p><p> Clique em <b>Adicionar caixa de entrada</b> para conectar um site ou uma página do Facebook. </p><p> No Painel, você pode ver todas as conversas de todas as suas caixas de entrada em um único lugar e responder a elas sob a guia `Conversations`. </p><p> Você também pode ver conversas específicas para uma caixa de entrada, clicando no nome da caixa de entrada no painel esquerdo do painel. </p>",
     "LIST": {
       "404": "Não há caixas de entrada anexadas a esta conta."
     },

app/javascript/dashboard/i18n/locale/ro/inboxMgmt.json

@@ -1,7 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Căsuțe",
-    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> Când conectezi un site web sau o pagină de Facebook la Chatwoot, se numește <b>Inbox</b>. Poți avea inbox-uri nelimitate în contul tău din Chatwoot. </p><p> Faceţi clic pe <b>Adăugaţi Inbox</b> pentru a conecta un website sau o pagină Facebook. </p><p> În Panoul de control <a href=\"/app/dashboard\"></a>, poți vedea toate conversațiile din toate cutiile tale într-un singur loc și să le răspunzi sub fila `Conversations`. </p><p> De asemenea, poți vedea conversații specifice unei căsuțe poștale făcând clic pe numele inbox-ului din panoul stâng al tabloului de bord. </p>",
+    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> Când conectezi un site web sau o pagină de Facebook la Chatwoot, se numește <b>Inbox</b>. Poți avea inbox-uri nelimitate în contul tău din Chatwoot. </p><p> Faceţi clic pe <b>Adăugaţi Inbox</b> pentru a conecta un website sau o pagină Facebook. </p><p> În Panoul de control, poți vedea toate conversațiile din toate cutiile tale într-un singur loc și să le răspunzi sub fila `Conversations`. </p><p> De asemenea, poți vedea conversații specifice unei căsuțe poștale făcând clic pe numele inbox-ului din panoul stâng al tabloului de bord. </p>",
     "LIST": {
       "404": "Nu există căsuțe poștale atașate acestui cont."
     },

app/javascript/dashboard/mixins/account.js

@@ -1,10 +1,10 @@
-import auth from '../api/auth';
+import { mapGetters } from 'vuex';
 
 export default {
   computed: {
-    accountId() {
+    ...mapGetters({
-      return auth.getCurrentUser().account_id;
+      accountId: 'getCurrentAccountId',
-    },
+    }),
   },
   methods: {
     addAccountScoping(url) {

app/javascript/dashboard/mixins/specs/account.spec.js

@@ -1,33 +1,40 @@
-import { createWrapper } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import accountMixin from '../account';
-import Vue from 'vue';
+import Vuex from 'vuex';
 
-jest.mock('../../api/auth', () => ({
+const localVue = createLocalVue();
-  getCurrentUser: () => ({ account_id: 1 }),
+localVue.use(Vuex);
-}));
 
 describe('accountMixin', () => {
-  test('set accountId properly', () => {
+  let getters;
+  let store;
+
+  beforeEach(() => {
+    getters = {
+      getCurrentAccountId: () => 1,
+    };
+
+    store = new Vuex.Store({ getters });
+  });
+
+  it('set accountId properly', () => {
     const Component = {
       render() {},
       title: 'TestComponent',
       mixins: [accountMixin],
     };
-    const Constructor = Vue.extend(Component);
+    const wrapper = shallowMount(Component, { store, localVue });
-    const vm = new Constructor().$mount();
-    const wrapper = createWrapper(vm);
     expect(wrapper.vm.accountId).toBe(1);
   });
 
-  test('returns current url', () => {
+  it('returns current url', () => {
     const Component = {
       render() {},
       title: 'TestComponent',
       mixins: [accountMixin],
     };
-    const Constructor = Vue.extend(Component);
+
-    const vm = new Constructor().$mount();
+    const wrapper = shallowMount(Component, { store, localVue });
-    const wrapper = createWrapper(vm);
     expect(wrapper.vm.addAccountScoping('settings/inboxes/new')).toBe(
       '/app/accounts/1/settings/inboxes/new'
     );

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -94,12 +94,12 @@
 import Vue from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
-import { accountIdFromPathname } from 'dashboard/helper/URLHelper';
 import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
+import accountMixin from '../../../../mixins/account';
 
 export default {
-  mixins: [alertMixin, configMixin],
+  mixins: [accountMixin, alertMixin, configMixin],
   data() {
     return {
       id: '',
@@ -140,10 +140,7 @@ export default {
   },
   methods: {
     async initializeAccount() {
-      const { pathname } = window.location;
+      try {
-      const accountId = accountIdFromPathname(pathname);
-
-      if (accountId) {
         await this.$store.dispatch('accounts/get');
         const {
           name,
@@ -153,7 +150,7 @@ export default {
           support_email,
           domain_emails_enabled,
           features,
-        } = this.getAccount(accountId);
+        } = this.getAccount(this.accountId);
 
         Vue.config.lang = locale;
         this.name = name;
@@ -163,6 +160,8 @@ export default {
         this.supportEmail = support_email;
         this.domainEmailsEnabled = domain_emails_enabled;
         this.features = features;
+      } catch (error) {
+        // Ignore error
       }
     },
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -82,13 +82,14 @@ import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader';
 import router from '../../../../index';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import accountMixin from '../../../../../mixins/account';
 
 export default {
   components: {
     LoadingState,
     PageHeader,
   },
-  mixins: [globalConfigMixin],
+  mixins: [globalConfigMixin, accountMixin],
   data() {
     return {
       isCreating: false,
@@ -126,9 +127,6 @@ export default {
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
     }),
-    accountId() {
-      return this.currentUser.account_id;
-    },
   },
 
   created() {