[Enhancement] Remove frontend env file 🔥(#179)

.env.sample

@@ -1 +0,0 @@
-fb_app_id=

.eslintrc.js

@@ -43,6 +43,5 @@ module.exports = {
   },
   globals: {
     __WEBPACK_ENV__: true,
-    __FB_APP_ID__: true,
   },
 };

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

@@ -1,12 +1,20 @@
 <template>
   <div class="wizard-body columns content-box small-9">
-    <div class="login-init full-height" v-if="!hasLoginStarted">
+    <div v-if="!hasLoginStarted" class="login-init full-height">
-      <a href="#" @click="startLogin()"><img src="~dashboard/assets/images/channels/facebook_login.png" alt="Facebook-logo"/></a>
+      <a href="#" @click="startLogin()">
+        <img
+          src="~dashboard/assets/images/channels/facebook_login.png"
+          alt="Facebook-logo"
+        />
+      </a>
       <p>{{ $t('INBOX_MGMT.ADD.FB.HELP') }}</p>
     </div>
     <div v-else>
-      <loading-state :message="emptyStateMessage" v-if="showLoader"></loading-state>
+      <loading-state
-      <form class="row" v-on:submit.prevent="createChannel()" v-if="!showLoader">
+        v-if="showLoader"
+        :message="emptyStateMessage"
+      ></loading-state>
+      <form v-if="!showLoader" class="row" @submit.prevent="createChannel()">
         <div class="medium-12 columns">
           <page-header
             :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
@@ -15,7 +23,8 @@
         </div>
         <div class="medium-7 columns">
           <div class="medium-12 columns">
-            <div class="input-wrap" :class="{ 'error': $v.selectedPage.$error }">Choose Page
+            <div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
+              Choose Page
               <multiselect
                 v-model.trim="selectedPage"
                 :close-on-select="true"
@@ -24,20 +33,30 @@
                 track-by="id"
                 label="name"
                 placeholder="Pick a value"
-                selected-label=''
+                selected-label=""
                 @select="setPageName"
               />
-              <span class="message" v-if="$v.selectedPage.$error">Select a page from the list</span>
+              <span v-if="$v.selectedPage.$error" class="message">
+                Select a page from the list
+              </span>
             </div>
           </div>
           <div class="medium-12 columns">
-            <label :class="{ 'error': $v.pageName.$error }">Inbox Name
+            <label :class="{ error: $v.pageName.$error }">
-              <input type="text" v-model.trim="pageName" @input="$v.pageName.$touch" placeholder="Pick A Name Your Inbox">
+              Inbox Name
-              <span class="message" v-if="$v.pageName.$error">Add a name for your inbox</span>
+              <input
+                v-model.trim="pageName"
+                type="text"
+                placeholder="Pick A Name Your Inbox"
+                @input="$v.pageName.$touch"
+              />
+              <span v-if="$v.pageName.$error" class="message">
+                Add a name for your inbox
+              </span>
             </label>
           </div>
           <div class="medium-12 columns text-right">
-            <input type="submit" value="Create Inbox" class="button">
+            <input type="submit" value="Create Inbox" class="button" />
           </div>
         </div>
       </form>
@@ -48,8 +67,6 @@
 /* eslint no-console: 0 */
 /* eslint-env browser */
 /* global FB */
-/* global bus */
-/* global $v, __FB_ID__ */
 import { required } from 'vuelidate/lib/validators';
 import ChannelApi from '../../../../api/channels';
 import LoadingState from '../../../../components/widgets/LoadingState';
@@ -57,7 +74,6 @@ import PageHeader from '../SettingsSubPageHeader';
 import router from '../../../index';
 
 export default {
-
   components: {
     LoadingState,
     PageHeader,
@@ -78,7 +94,6 @@ export default {
   },
 
   validations: {
-
     pageName: {
       required,
     },
@@ -88,12 +103,6 @@ export default {
         return this.selectedPage !== null && !!this.selectedPage.name;
       },
     },
-
-  },
-
-  created() {
-    this.initFB();
-    this.loadFBsdk();
   },
 
   computed: {
@@ -101,10 +110,15 @@ export default {
       return !this.user_access_token || this.isCreating;
     },
     getSelectablePages() {
-      return this.pageList.filter(item => (!item.exists));
+      return this.pageList.filter(item => !item.exists);
     },
   },
 
+  created() {
+    this.initFB();
+    this.loadFBsdk();
+  },
+
   mounted() {
     this.initFB();
   },
@@ -130,24 +144,22 @@ export default {
       if (window.fbSDKLoaded === undefined) {
         window.fbAsyncInit = () => {
           FB.init({
-            appId: __FB_ID__,
+            appId: window.chatwootConfig.fbAppId,
             xfbml: true,
-            version: 'v2.8',
+            version: 'v4.0',
             status: true,
           });
           window.fbSDKLoaded = true;
           FB.AppEvents.logPageView();
-          // this.tryFBlogin();
         };
-      } else {
-        // this.tryFBlogin();
       }
     },
 
     loadFBsdk() {
       ((d, s, id) => {
         let js;
-        const fjs = js = d.getElementsByTagName(s)[0];
+        // eslint-disable-next-line
+        const fjs = (js = d.getElementsByTagName(s)[0]);
         if (d.getElementById(id)) {
           return;
         }
@@ -159,25 +171,37 @@ export default {
     },
 
     tryFBlogin() {
-      FB.login((response) => {
+      FB.login(
+        response => {
           if (response.status === 'connected') {
             this.fetchPages(response.authResponse.accessToken);
           } else if (response.status === 'not_authorized') {
             // The person is logged into Facebook, but not your app.
-          this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH');
+            this.emptyStateMessage = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
+            );
           } else {
             // The person is not logged into Facebook, so we're not sure if
             // they are logged into this app or not.
-          this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH');
+            this.emptyStateMessage = this.$t(
+              'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
+            );
           }
-      }, { scope: 'manage_pages,read_page_mailboxes,pages_messaging,pages_messaging_phone_number' });
+        },
+        {
+          scope:
+            'manage_pages,read_page_mailboxes,pages_messaging,pages_messaging_phone_number',
+        }
+      );
     },
 
     fetchPages(_token) {
-      ChannelApi.fetchFacebookPages(_token).then((response) => {
+      ChannelApi.fetchFacebookPages(_token)
+        .then(response => {
           this.pageList = response.data.data.page_details;
           this.user_access_token = response.data.data.user_access_token;
-      }).catch();
+        })
+        .catch();
     },
 
     channelParams() {
@@ -195,14 +219,18 @@ export default {
       if (!this.$v.$error) {
         this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
         this.isCreating = true;
-        this.$store.dispatch('addInboxItem', {
+        this.$store
+          .dispatch('addInboxItem', {
             channel: this.channel,
             params: this.channelParams(),
-        }).then((response) => {
+          })
-          console.log(response);
+          .then(response => {
-          router.replace({ name: 'settings_inboxes_add_agents', params: { page: 'new', inbox_id: response.data.id } });
+            router.replace({
-        }).catch((error) => {
+              name: 'settings_inboxes_add_agents',
-          console.log(error);
+              params: { page: 'new', inbox_id: response.data.id },
+            });
+          })
+          .catch(() => {
             this.isCreating = false;
           });
       }

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -6,8 +6,12 @@
         :header-title="inbox.label"
       />
       <div class="code-wrapper">
-        <p class="title">{{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}</p>
+        <p class="title">
-        <p class="sub-head">{{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}</p>
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
+        </p>
+        <p class="sub-head">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
+        </p>
         <p class="code">
           <code>
             {{ messengerScript }}
@@ -15,8 +19,12 @@
         </p>
       </div>
       <div class="agent-wrapper">
-        <p class="title">{{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}</p>
+        <p class="title">
-        <p class="sub-head">{{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT') }}</p>
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}
+        </p>
+        <p class="sub-head">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT') }}
+        </p>
         <multiselect
           v-model="selectedAgents"
           :options="agentList"
@@ -37,41 +45,29 @@
         </div>
       </div>
     </div>
-    </div>
   </woot-modal>
 </template>
 
 <script>
-/* global bus, __FB_ID__ */
 /* eslint no-console: 0 */
 /* eslint-disable no-useless-escape */
+/* global bus */
 import { mapGetters } from 'vuex';
-import PageHeader from '../SettingsSubPageHeader';
 
 export default {
-  props: [
+  props: ['onClose', 'inbox', 'show'],
-    'onClose',
-    'inbox',
-    'show',
-  ],
-  components: {
-    PageHeader,
-  },
   data() {
     return {
       selectedAgents: [],
       isUpdating: false,
       messengerScript: `<script>
-
         window.fbAsyncInit = function() {
           FB.init({
-            appId: "${__FB_ID__}",
+            appId: "${window.chatwootConfig.fbAppId}",
             xfbml: true,
-            version: "v2.6"
+            version: "v4.0"
           });
-
         };
-
         (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
@@ -82,7 +78,7 @@ export default {
 
       <\/script>
       <div class="fb-messengermessageus"
-        messenger_app_id="${__FB_ID__}"
+        messenger_app_id="${window.chatwootConfig.fbAppId}"
         page_id="${this.inbox.pageId}"
         color="blue"
         size="standard" >
@@ -95,39 +91,50 @@ export default {
     }),
   },
   mounted() {
-    this.$store.dispatch('fetchAgents')
+    this.$store.dispatch('fetchAgents').then(() => {
-      .then(() => {
       this.fetchAttachedAgents();
     });
   },
   methods: {
     fetchAttachedAgents() {
-      this.$store.dispatch('listInboxAgents', {
+      this.$store
+        .dispatch('listInboxAgents', {
           inboxId: this.inbox.channel_id,
         })
-      .then((response) => {
+        .then(response => {
           const { payload } = response.data;
-        payload.forEach((el) => {
+          payload.forEach(el => {
-          const [item] = this.agentList.filter(agent => agent.id === el.user_id);
+            const [item] = this.agentList.filter(
+              agent => agent.id === el.user_id
+            );
             if (item) this.selectedAgents.push(item);
           });
         })
-      .catch((error) => {
+        .catch(error => {
           console.log(error);
         });
     },
     updateAgents() {
       const agentList = this.selectedAgents.map(el => el.id);
       this.isUpdating = true;
-      this.$store.dispatch('updateInboxAgents', {
+      this.$store
+        .dispatch('updateInboxAgents', {
           inboxId: this.inbox.channel_id,
           agentList,
-      }).then(() => {
+        })
+        .then(() => {
           this.isUpdating = false;
-        bus.$emit('newToastMessage', this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+          bus.$emit(
-      }).catch(() => {
+            'newToastMessage',
+            this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE')
+          );
+        })
+        .catch(() => {
           this.isUpdating = false;
-        bus.$emit('newToastMessage', this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+          bus.$emit(
+            'newToastMessage',
+            this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE')
+          );
         });
     },
   },

app/views/layouts/vueapp.html.erb

@@ -29,5 +29,10 @@
     <div id="app"></div>
     <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
     <%= yield %>
+    <script>
+      window.chatwootConfig = {
+        fbAppId: <%= ENV['fb_app_id'] %>
+      }
+    </script>
   </body>
 </html>

config/webpack/environment.js

@@ -1,6 +1,5 @@
 const { environment } = require('@rails/webpacker');
 const { VueLoaderPlugin } = require('vue-loader');
-const webpack = require('webpack');
 const resolve = require('./resolve');
 const vue = require('./loaders/vue');
 
@@ -17,13 +16,4 @@ environment.loaders.append('audio', {
 
 environment.config.merge({ resolve });
 
-const { fb_app_id: fbAppID } = process.env;
-
-environment.plugins.prepend(
-  'DefinePlugin',
-  new webpack.DefinePlugin({
-    __FB_ID__: `"${fbAppID}"`,
-  })
-);
-
 module.exports = environment;

configure

@@ -5,6 +5,3 @@
 # ref docs for detailed instructions
 cp shared/config/database.yml config/database.yml
 cp shared/config/application.yml config/application.yml
-
-# copy frontend env file
-cp .env.sample .env