­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ 'use strict'; let jetPopupSettinsMixin = { data: function() { return { pageOptions: window.jetPopupSettingsConfig.settings, preparedOptions: {}, savingStatus: false, ajaxSaveHandler: null, }; }, watch: { pageOptions: { handler( options ) { let prepared = {}; for ( let option in options ) { if ( options.hasOwnProperty( option ) ) { prepared[ option ] = options[ option ]; } } this.preparedOptions = prepared; this.saveOptions(); }, deep: true }, }, methods: { saveOptions: function() { this.savingStatus = true; wp.apiFetch( { method: 'post', path: window.jetPopupSettingsConfig.saveSettingsPath, data: this.preparedOptions, } ).then( ( response ) => { this.savingStatus = false; switch ( response.status ) { case 'success': this.$CXNotice.add( { message: response.message, type: 'success', duration: 3000, } ); break; case 'error': this.$CXNotice.add( { message: response.message, type: 'error', duration: 3000, } ); break; } } ); }, } } let jetPopupSettinsEventBus = new Vue(); Vue.component( 'mailchimp-list-item', { template: '#jet-dashboard-mailchimp-list-item', props: { list: Object, apikey: String }, data: function() { return { mergeFieldsStatusLoading: false } }, computed: { isMergeFields: function() { return this.list.hasOwnProperty( 'mergeFields' ) && ! jQuery.isEmptyObject( this.list[ 'mergeFields' ] ) ? true : false; } }, methods: { getMergeFields: function() { let self = this; jQuery.ajax( { type: 'POST', url: ajaxurl, data: { 'action': 'get_mailchimp_list_merge_fields', 'apikey': self.apikey, 'listid': self.list.id, 'nonce': window.jetPopupSettingsConfig.mailchimpNonce, }, beforeSend: function( jqXHR, ajaxSettings ) { self.mergeFieldsStatusLoading = true; }, success: function( data, textStatus, jqXHR ) { self.mergeFieldsStatusLoading = false; switch ( data.type ) { case 'success': self.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); jetPopupSettinsEventBus.$emit( 'updateListMergeFields', data.request ); break; case 'error': self.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); } } }); Vue.component( 'jet-popup-integrations', { template: '#jet-dashboard-jet-popup-integrations', mixins: [ jetPopupSettinsMixin ], data: function() { return ( { settingsData: window.jetPopupSettingsConfig.settings || {}, mailchimpApiData: window.jetPopupSettingsConfig.mailchimpApiData || {}, saveStatusLoading: false, syncStatusLoading: false, mergeFieldsStatusLoading: false, mailchimpAccountData: {}, mailchimpListsData: {} } ) }, mounted: function() { var self = this; if ( this.mailchimpApiData.hasOwnProperty( this.settingsData['apikey'] ) ) { var user = this.mailchimpApiData[ this.settingsData['apikey'] ]; if ( user.hasOwnProperty( 'account' ) ) { var account = user.account; this.mailchimpAccountData = { account_id: account.account_id, username: account.username || '-', first_name: account.first_name || '-', last_name: account.last_name || '-', avatar_url: account.avatar_url }; } if ( user.hasOwnProperty( 'lists' ) ) { var lists = user.lists, tempLists = {}; if ( ! jQuery.isEmptyObject( lists ) ) { for ( var key in lists ) { var listInfo = lists[ key ]['info'], mergeFields = lists[ key ]['merge_fields'] || [], mergeFieldsTemp = {}; mergeFields.forEach( function( field, i, arr ) { mergeFieldsTemp[ field['tag'] ] = field['name']; } ); tempLists[ key ] = { id: listInfo.id, name: listInfo.name, memberCount: listInfo.stats.member_count, doubleOptin: listInfo.double_optin, dateCreated: listInfo.date_created, mergeFields: mergeFieldsTemp }; } } this.mailchimpListsData = tempLists; } } // Bus Events jetPopupSettinsEventBus.$on( 'updateListMergeFields', function ( request ) { var listid = request.list_id, mergeFields = request.merge_fields, mergeFieldsTemp = {}; for ( key in mergeFields ) { var fieldData = mergeFields[ key ]; mergeFieldsTemp[ fieldData['tag'] ] = fieldData['name']; } Vue.set( self.mailchimpListsData[ listid ], 'mergeFields', mergeFieldsTemp ); } ); }, computed: { isMailchimpAccountData: function() { return ! jQuery.isEmptyObject( this.mailchimpAccountData ) ? true : false; }, isMailchimpListsData: function() { return ! jQuery.isEmptyObject( this.mailchimpListsData ) ? true : false; } }, methods: { mailchimpSync: function() { var self = this; jQuery.ajax( { type: 'POST', url: ajaxurl, data: { 'action': 'get_mailchimp_user_data', 'apikey': this.settingsData.apikey, 'nonce': window.jetPopupSettingsConfig.mailchimpNonce, }, beforeSend: function( jqXHR, ajaxSettings ) { self.syncStatusLoading = true; }, success: function( data, textStatus, jqXHR ) { switch ( data.type ) { case 'success': var dataRequest = data.request; self.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); self.mailchimpAccountData = { account_id: dataRequest.account_id, username: dataRequest.username || '-', first_name: dataRequest.first_name || '-', last_name: dataRequest.last_name || '-', avatar_url: dataRequest.avatar_url }; self.mailchimpSyncLists(); break; case 'error': self.syncStatusLoading = false; self.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); }, mailchimpSyncLists: function() { var self = this; jQuery.ajax( { type: 'POST', url: ajaxurl, data: { 'action': 'get_mailchimp_lists', 'apikey': this.settingsData.apikey, 'nonce': window.jetPopupSettingsConfig.mailchimpNonce, }, beforeSend: function( jqXHR, ajaxSettings ) { self.syncStatusLoading = true; }, success: function( data, textStatus, jqXHR ) { self.syncStatusLoading = false; switch ( data.type ) { case 'success': self.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); var request = data.request; if ( request.hasOwnProperty( 'lists' ) ) { var lists = request['lists'], tempLists = {}; for ( var key in lists ) { var listData = lists[ key ]; tempLists[ listData.id ] = { id: listData.id, name: listData.name, memberCount: listData.stats.member_count, doubleOptin: listData.double_optin, dateCreated: listData.date_created } } self.mailchimpListsData = tempLists; } break; case 'error': vueInstance.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); } } } ); Vue.component( 'jet-popup-general', { template: '#jet-dashboard-jet-popup-general', mixins: [ jetPopupSettinsMixin ], data: function() { return { clearCacheStatus: false, }; }, computed: { cacheTimeoutOptions: function () { return window.jetPopupSettingsConfig.cacheTimeoutOptions } }, methods: { clearCache: function() { this.clearCacheStatus = true; wp.apiFetch( { method: 'post', path: window.jetPopupSettingsConfig.clearPopupCachePath, data: {}, } ).then( ( response ) => { this.clearCacheStatus = false; switch ( response.status ) { case 'success': this.$CXNotice.add( { message: response.message, type: 'success', duration: 3000, } ); break; case 'error': this.$CXNotice.add( { message: response.message, type: 'error', duration: 3000, } ); break; } } ); }, } } );