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

.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">
- <a href="#" @click="startLogin()"><img src="~dashboard/assets/images/channels/facebook_login.png" alt="Facebook-logo"/></a>
+ <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>
  <p>{{ $t('INBOX_MGMT.ADD.FB.HELP') }}</p>
  </div>
  <div v-else>
- <loading-state :message="emptyStateMessage" v-if="showLoader"></loading-state>
- <form class="row" v-on:submit.prevent="createChannel()" v-if="!showLoader">
+ <loading-state
+ 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
- <input type="text" v-model.trim="pageName" @input="$v.pageName.$touch" placeholder="Pick A Name Your Inbox">
- <span class="message" v-if="$v.pageName.$error">Add a name for your inbox</span>
+ <label :class="{ error: $v.pageName.$error }">
+ Inbox Name
+ <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,16 +67,13 @@
 /* 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';
 import PageHeader from '../SettingsSubPageHeader';
 import router from '../../../index';
 
 export default {
-
  components: {
  LoadingState,
  PageHeader,
@@ -78,7 +94,6 @@ export default {
  },
 
  validations: {
-
  pageName: {
  required,
  },
@@ -88,23 +103,22 @@ export default {
  return this.selectedPage !== null && !!this.selectedPage.name;
  },
  },
-
- },
-
- created() {
- this.initFB();
- this.loadFBsdk();
  },
 
  computed: {
  showLoader() {
  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) => {
- 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');
- } 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');
+ 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'
+ );
+ } 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'
+ );
+ }
+ },
+ {
+ 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) => {
- this.pageList = response.data.data.page_details;
- this.user_access_token = response.data.data.user_access_token;
- }).catch();
+ ChannelApi.fetchFacebookPages(_token)
+ .then(response => {
+ this.pageList = response.data.data.page_details;
+ this.user_access_token = response.data.data.user_access_token;
+ })
+ .catch();
  },
 
  channelParams() {
@@ -195,16 +219,20 @@ export default {
  if (!this.$v.$error) {
  this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
  this.isCreating = true;
- this.$store.dispatch('addInboxItem', {
- channel: this.channel,
- params: this.channelParams(),
- }).then((response) => {
- console.log(response);
- router.replace({ name: 'settings_inboxes_add_agents', params: { page: 'new', inbox_id: response.data.id } });
- }).catch((error) => {
- console.log(error);
- this.isCreating = false;
- });
+ this.$store
+ .dispatch('addInboxItem', {
+ channel: this.channel,
+ params: this.channelParams(),
+ })
+ .then(response => {
+ router.replace({
+ name: 'settings_inboxes_add_agents',
+ params: { page: 'new', inbox_id: response.data.id },
+ });
+ })
+ .catch(() => {
+ this.isCreating = false;
+ });
  }
  },
  },