From ea9e78a3f3891219f1898db91a15b3998ba53998 Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Tue, 20 Jul 2021 18:20:45 +0530 Subject: [PATCH] chore: Use API to load widget data --- app/javascript/packs/widget.js | 6 -- app/javascript/widget/App.vue | 80 ++++++++++------- app/javascript/widget/api/appConfig.js | 12 +++ app/javascript/widget/components/Branding.vue | 6 +- .../widget/components/ChatFooter.vue | 3 +- .../widget/components/ChatHeader.vue | 4 +- .../widget/components/ChatHeaderExpanded.vue | 4 +- .../widget/components/HeaderActions.vue | 12 ++- app/javascript/widget/mixins/availability.js | 6 +- app/javascript/widget/mixins/configMixin.js | 16 ++-- app/javascript/widget/router.js | 24 ----- app/javascript/widget/store/index.js | 2 - .../widget/store/modules/appConfig.js | 88 +++++++++++++++++-- app/javascript/widget/store/types.js | 3 +- app/javascript/widget/views/Unread.vue | 8 +- app/views/widgets/show.html.erb | 28 ------ 16 files changed, 174 insertions(+), 128 deletions(-) create mode 100644 app/javascript/widget/api/appConfig.js delete mode 100755 app/javascript/widget/router.js diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js index e4aa8cfd1..dd7678de6 100644 --- a/app/javascript/packs/widget.js +++ b/app/javascript/packs/widget.js @@ -3,7 +3,6 @@ import Vuelidate from 'vuelidate'; import VueI18n from 'vue-i18n'; import store from '../widget/store'; import App from '../widget/App.vue'; -import ActionCableConnector from '../widget/helpers/actionCable'; import i18n from '../widget/i18n'; Vue.use(VueI18n); @@ -25,9 +24,4 @@ window.onload = () => { i18n: i18nConfig, render: h => h(App), }).$mount('#app'); - - window.actionCable = new ActionCableConnector( - window.WOOT_WIDGET, - window.chatwootPubsubToken - ); }; diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue index fc2e9bb55..740e817fb 100755 --- a/app/javascript/widget/App.vue +++ b/app/javascript/widget/App.vue @@ -19,6 +19,7 @@ import Router from './views/Router'; import { getLocale } from './helpers/urlParamsHelper'; import { BUS_EVENTS } from 'shared/constants/busEvents'; import { isEmptyObject } from 'widget/helpers/utils'; +import ActionCableConnector from './helpers/actionCable'; export default { name: 'App', @@ -38,11 +39,15 @@ export default { }, computed: { ...mapGetters({ + activeCampaign: 'campaign/getActiveCampaign', + authToken: 'appConfig/getAuthToken', + campaigns: 'campaign/getCampaigns', + contact: 'appConfig/getContact', hasFetched: 'agent/getHasFetched', + isWidgetConfigured: 'appConfig/getWidgetConfigured', messageCount: 'conversation/getMessageCount', unreadMessageCount: 'conversation/getUnreadMessageCount', - campaigns: 'campaign/getCampaigns', - activeCampaign: 'campaign/getActiveCampaign', + webChannelConfig: 'appConfig/getWebChannelConfig', }), isLeftAligned() { const isLeft = this.widgetPosition === 'left'; @@ -59,31 +64,42 @@ export default { activeCampaign() { this.setCampaignView(); }, + isWidgetConfigured() { + const { pubsubToken } = this.contact || {}; + window.chatwootPubsubToken = pubsubToken; + window.actionCable = new ActionCableConnector( + window.WOOT_WIDGET, + window.chatwootPubsubToken + ); + const { websiteToken, locale } = this.webChannelConfig; + this.setLocale(locale); + if (this.isIFrame) { + this.registerListeners(); + this.sendLoadedEvent(); + setHeader('X-Auth-Token', this.authToken); + } else { + setHeader('X-Auth-Token', this.authToken); + this.fetchOldConversations(); + this.fetchAvailableAgents(websiteToken); + this.setLocale(getLocale(window.location.search)); + } + if (this.isRNWebView) { + this.registerListeners(); + this.sendRNWebViewLoadedEvent(); + } + this.$store.dispatch('conversationAttributes/getAttributes'); + this.registerUnreadEvents(); + this.registerCampaignEvents(); + }, }, mounted() { - const { websiteToken, locale } = window.chatwootWebChannel; - this.setLocale(locale); - if (this.isIFrame) { - this.registerListeners(); - this.sendLoadedEvent(); - setHeader('X-Auth-Token', window.authToken); - } else { - setHeader('X-Auth-Token', window.authToken); - this.fetchOldConversations(); - this.fetchAvailableAgents(websiteToken); - this.setLocale(getLocale(window.location.search)); - } - if (this.isRNWebView) { - this.registerListeners(); - this.sendRNWebViewLoadedEvent(); - } - this.$store.dispatch('conversationAttributes/getAttributes'); - this.setWidgetColor(window.chatwootWebChannel); - this.registerUnreadEvents(); - this.registerCampaignEvents(); + const url = new URL(window.location.href); + this.$store.dispatch('appConfig/fetchAppConfig', { + token: url.searchParams.get('cw_conversation'), + websiteToken: url.searchParams.get('website_token'), + }); }, methods: { - ...mapActions('appConfig', ['setWidgetColor']), ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']), ...mapActions('campaign', ['initCampaigns', 'executeCampaign']), ...mapActions('agent', ['fetchAvailableAgents']), @@ -98,7 +114,7 @@ export default { }); }, setLocale(locale) { - const { enabledLanguages } = window.chatwootWebChannel; + const { enabledLanguages } = this.webChannelConfig; if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) { this.$root.$i18n.locale = locale; } @@ -124,7 +140,7 @@ export default { }, registerCampaignEvents() { bus.$on('on-campaign-view-clicked', campaignId => { - const { websiteToken } = window.chatwootWebChannel; + const { websiteToken } = this.webChannelConfig; this.showCampaignView = false; this.showUnreadView = false; this.unsetUnreadView(); @@ -143,9 +159,7 @@ export default { !this.isWebWidgetTriggered; if (this.isIFrame && isCampaignReadyToExecute) { this.showCampaignView = true; - IFrameHelper.sendMessage({ - event: 'setCampaignMode', - }); + IFrameHelper.sendMessage({ event: 'setCampaignMode' }); } }, setUnreadView() { @@ -176,7 +190,7 @@ export default { this.$store.dispatch('events/create', { name: eventName }); }, registerListeners() { - const { websiteToken } = window.chatwootWebChannel; + const { websiteToken } = this.webChannelConfig; window.addEventListener('message', e => { if (!IFrameHelper.isAValidEvent(e)) { return; @@ -233,8 +247,8 @@ export default { IFrameHelper.sendMessage({ event: 'loaded', config: { - authToken: window.authToken, - channelConfig: window.chatwootWebChannel, + authToken: this.authToken, + channelConfig: this.webChannelConfig, }, }); }, @@ -242,8 +256,8 @@ export default { RNHelper.sendMessage({ event: 'loaded', config: { - authToken: window.authToken, - channelConfig: window.chatwootWebChannel, + authToken: this.authToken, + channelConfig: this.webChannelConfig, }, }); }, diff --git a/app/javascript/widget/api/appConfig.js b/app/javascript/widget/api/appConfig.js new file mode 100644 index 000000000..08545614a --- /dev/null +++ b/app/javascript/widget/api/appConfig.js @@ -0,0 +1,12 @@ +import { API } from 'widget/helpers/axios'; + +export const fetchAppConfigAPI = async ({ token, websiteToken }) => { + return API({ + method: 'post', + url: '/api/v1/widget/config', + data: { + website_token: websiteToken, + }, + headers: { 'X-Auth-Token': token }, + }); +}; diff --git a/app/javascript/widget/components/Branding.vue b/app/javascript/widget/components/Branding.vue index aacf825d3..aad2e0e53 100644 --- a/app/javascript/widget/components/Branding.vue +++ b/app/javascript/widget/components/Branding.vue @@ -28,9 +28,7 @@ export default { }; }, computed: { - ...mapGetters({ - globalConfig: 'globalConfig/get', - }), + ...mapGetters({ globalConfig: 'appConfig/getGlobalConfig' }), brandRedirectURL() { const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=widget_branding`; if (this.referrerHost) { @@ -46,8 +44,6 @@ export default { }, }; - -