first commit

wp-content/plugins/jet-elements/includes/modules/jet-dashboard/assets/js/jet-dashboard.js

@@ -0,0 +1,406 @@
+var eventBus = new Vue();
+
+( function( $, dashboardPageConfig ) {
+
+	'use strict';
+
+	Vue.config.devtools = true;
+
+	if ( ! $('#jet-dashboard-page')[0] ) {
+		return false;
+	}
+
+	/**
+	 * [template description]
+	 * @type {String}
+	 */
+	Vue.component( 'license-item', {
+		template: '#jet-dashboard-license-item',
+
+		props: {
+			licenseData: Object,
+			type: String
+		},
+
+		data: function() {
+			return {
+				licenseKey: this.licenseData.licenseKey,
+				licenseStatus: this.licenseData.licenseStatus,
+				licenseDetails: this.licenseData.licenseDetails,
+				activationStatus: false,
+				ajaxLicenseAction: null,
+			}
+		},
+
+		computed: {
+
+			isLicenseActive: function() {
+				return 'active' === this.licenseStatus ? true : false;
+			},
+
+			licenseActionType: function() {
+				return ! this.isLicenseActive ? 'activate' : 'deactivate';
+			},
+
+			maskedLicenseKey: function() {
+				let licenseKey      = this.licenseKey,
+					licenseKeyArray = licenseKey.split(''),
+					maskerLicenseArray = [];
+
+				maskerLicenseArray = licenseKeyArray.map( ( item, index ) => {
+
+					if ( index > 4 && index < licenseKeyArray.length - 4 ) {
+						return '*';
+					}
+
+					return item;
+				} );
+
+				return maskerLicenseArray.join('');
+			},
+
+			licenseStatus: function() {
+				return this.isLicenseActive ? 'activated' : 'not-activated';
+			},
+
+			licenseType: function() {
+				return this.licenseDetails.type ? this.licenseDetails.type : '';
+			},
+
+			productName: function() {
+				return this.licenseDetails.product_name ? this.licenseDetails.product_name : '';
+			},
+
+			isLicenseExpired: function() {
+				return 'expired' === this.licenseStatus ? true : false;
+			},
+
+			expireDate: function() {
+
+				let expireCases = [
+					'0000-00-00 00:00:00',
+					'lifetime'
+				];
+
+				if ( expireCases.includes( this.licenseDetails.expire ) ) {
+					return 'Lifetime';
+				}
+
+				return this.licenseDetails.expire;
+			},
+
+			licensePlugins: function() {
+				return this.licenseDetails.plugins ? this.licenseDetails.plugins : [];
+			},
+		},
+
+		methods: {
+			showLicenseManager: function() {
+				eventBus.$emit( 'showLicenseManager' );
+			},
+
+			licenseAction: function() {
+				var self       = this,
+					actionType = self.licenseActionType;
+
+				self.activationStatus = true;
+
+				self.ajaxLicenseAction = $.ajax( {
+					type: 'POST',
+					url: dashboardPageConfig.ajaxUrl,
+					dataType: 'json',
+					data: {
+						action: 'jet_license_action',
+						data: {
+							license: self.licenseKey,
+							action: actionType
+						}
+					},
+					beforeSend: function( jqXHR, ajaxSettings ) {
+
+						if ( null !== self.ajaxLicenseAction ) {
+							self.ajaxLicenseAction.abort();
+						}
+					},
+					success: function( responce, textStatus, jqXHR ) {
+						self.activationStatus = false;
+
+						self.$CXNotice.add( {
+							message: responce.message,
+							type: responce.status,
+							duration: 3000,
+						} );
+
+						if ( 'success' === responce.status ) {
+
+							if ( 'activate' === actionType ) {
+
+								self.licenseStatus = 'active';
+								self.licenseDetails = responce.data;
+
+								eventBus.$emit( 'addLicenseItem', {
+									'licenseKey': self.licenseKey,
+									'licenseStatus': 'active',
+									'licenseDetails': responce.data,
+								} );
+							}
+
+							if ( 'deactivate' === actionType ) {
+								eventBus.$emit( 'removeLicenseItem', self.licenseKey );
+							}
+						}
+					}
+				} );
+			}
+		}
+	});
+
+	/**
+	 * [template description]
+	 * @type {String}
+	 */
+	Vue.component( 'plugin-item-installed', {
+		template: '#jet-dashboard-plugin-item-installed',
+
+		props: {
+			pluginData: Object
+		},
+
+		data: function() {
+			return {
+				actionPlugin: false,
+				actionPluginRequest: null,
+				actionPluginProcessed: false,
+				licenseActionProcessed: false,
+				licenseKey: '',
+				ajaxLicenseAction: null
+			}
+		},
+
+		computed: {
+
+			deactivateAvaliable: function() {
+				return ( ! this.pluginData['licenseControl'] && this.pluginData['isInstalled'] && this.pluginData['isActivated'] ) ? true : false;
+			},
+
+			activateAvaliable: function() {
+				return ( this.pluginData['isInstalled'] && !this.pluginData['isActivated'] ) ? true : false;
+			},
+
+			updateAvaliable: function() {
+				return ( this.pluginData['updateAvaliable'] ) ? true : false;
+			},
+
+			updateActionAvaliable: function() {
+				return ( this.pluginData['licenseActivated'] && this.pluginData['updateAvaliable'] ) ? true : false;
+			},
+
+			activateLicenseVisible: function() {
+				return ( this.pluginData['licenseControl'] && !this.pluginData['licenseActivated'] ) ? true : false;
+			},
+
+			deactivateLicenseVisible: function() {
+				return ( this.pluginData['licenseActivated'] ) ? true : false;
+			},
+		},
+
+		methods: {
+
+			deactivatePlugin: function() {
+				this.actionPlugin = 'deactivate';
+				this.pluginAction();
+			},
+
+			activatePlugin: function() {
+				this.actionPlugin = 'activate';
+				this.pluginAction();
+			},
+
+			updatePlugin: function() {
+
+				console.log(this.updateActionAvaliable);
+
+				if ( this.updateActionAvaliable ) {
+
+					this.actionPlugin = 'update';
+					this.pluginAction();
+				} else {
+					eventBus.$emit( 'showPopupUpdateCheck' );
+				}
+
+			},
+
+			showPopupActivation: function() {
+				eventBus.$emit( 'showPopupActivation', this.pluginData['slug'] );
+			},
+
+			pluginAction: function() {
+				let self = this;
+
+				self.actionPluginRequest = $.ajax( {
+					type: 'POST',
+					url: dashboardPageConfig.ajaxUrl,
+					dataType: 'json',
+					data: {
+						action: 'jet_dashboard_plugin_action',
+						data: {
+							action: self.actionPlugin,
+							plugin: self.pluginData['slug'],
+						}
+					},
+					beforeSend: function( jqXHR, ajaxSettings ) {
+
+						if ( null !== self.actionPluginRequest ) {
+							self.actionPluginRequest.abort();
+						}
+
+						self.actionPluginProcessed = true;
+					},
+					success: function( responce, textStatus, jqXHR ) {
+						self.actionPluginProcessed = false;
+
+						self.$CXNotice.add( {
+							message: responce.message,
+							type: responce.status,
+							duration: 3000,
+						} );
+
+						if ( 'success' === responce.status ) {
+							eventBus.$emit( 'updateUserPluginData', {
+								'slug': self.pluginData['slug'],
+								'pluginData': responce.data,
+							} );
+						}
+					}
+				} );
+			},
+
+			deactivateLicense: function() {
+				eventBus.$emit( 'showPopupDeactivation', this.pluginData['slug'] );
+			}
+		}
+	});
+
+	/**
+	 * [template description]
+	 * @type {String}
+	 */
+	Vue.component( 'plugin-item-avaliable', {
+		template: '#jet-dashboard-plugin-item-avaliable',
+
+		props: {
+			pluginData: Object,
+		},
+
+		data: function() {
+			return {
+				pluginActionRequest: null,
+				pluginActionType: false,
+				pluginActionProcessed: false,
+			}
+		},
+
+		computed: {
+			installAvaliable: function() {
+				return !this.pluginData['isInstalled'] ? true : false;
+			},
+		},
+
+		methods: {
+
+			installPlugin: function() {
+				this.pluginActionType = 'install';
+				this.pluginAction();
+			},
+
+			pluginAction: function() {
+				let self = this;
+
+				self.pluginActionRequest = $.ajax( {
+					type: 'POST',
+					url: dashboardPageConfig.ajaxUrl,
+					dataType: 'json',
+					data: {
+						action: 'jet_dashboard_plugin_action',
+						data: {
+							action: self.pluginActionType,
+							plugin: self.pluginData['slug'],
+						}
+					},
+					beforeSend: function( jqXHR, ajaxSettings ) {
+
+						if ( null !== self.pluginActionRequest ) {
+							self.pluginActionRequest.abort();
+						}
+
+						self.pluginActionProcessed = true;
+					},
+					success: function( responce, textStatus, jqXHR ) {
+						self.pluginActionProcessed = false;
+
+						self.$CXNotice.add( {
+							message: responce.message,
+							type: responce.status,
+							duration: 3000,
+						} );
+
+						if ( 'success' === responce.status ) {
+							eventBus.$emit( 'updateUserPluginData', {
+								'slug': self.pluginData['slug'],
+								'pluginData': responce.data,
+							} );
+						}
+					}
+				} );
+			}
+
+		}
+
+	});
+
+	/**
+	 * [template description]
+	 * @type {String}
+	 */
+	Vue.component( 'plugin-item-more', {
+		template: '#jet-dashboard-plugin-item-more',
+
+		props: {
+			pluginData: Object
+		},
+
+		data: function() {
+			return {
+				morePluginsUrl: dashboardPageConfig.getMorePluginsUrl || {},
+			}
+		},
+	});
+
+	/**
+	 * [template description]
+	 * @type {String}
+	 */
+	Vue.component( 'jet-dashboard-header', {
+		template: '#jet-dashboard-header',
+
+		data: function() {
+			return {
+				title: dashboardPageConfig.headerTitle || '',
+			}
+		},
+
+	});
+
+	/**
+	 * [mounted description]
+	 */
+	window.JetDasboardPage = new Vue( {
+		el: '#jet-dashboard-page',
+
+		data: {
+			page: dashboardPageConfig.page || false
+		},
+
+	} );
+
+})( jQuery, window.JetDashboardPageConfig );

wp-content/plugins/jet-elements/includes/modules/jet-dashboard/assets/js/license-page.js

@@ -0,0 +1,247 @@
+(function () {
+
+	'use strict';
+
+	Vue.component( 'license-page', {
+		template: '#jet-dashboard-license-page',
+
+		data: function() {
+			return {
+				allJetPlugins: window.JetDashboardPageConfig.allJetPlugins || {},
+				licenseList: window.JetDashboardPageConfig.licenseList || [],
+				licenseManagerVisible: false,
+				licensePopupVisible: false,
+				deactivatePopupVisible: false,
+				updateCheckPopupVisible: false,
+				licenseActionProcessed: false,
+				ajaxLicenseAction: null,
+				activatingPluginSlug: false,
+			};
+		},
+
+		created: function() {
+			eventBus.$on( 'addLicenseItem', this.addLicense );
+			eventBus.$on( 'removeLicenseItem', this.removeLicense );
+			eventBus.$on( 'updateUserPluginData', this.updateUserPluginData );
+			eventBus.$on( 'showLicenseManager', this.showLicenseManager );
+			eventBus.$on( 'showPopupActivation', this.showPopupActivation );
+			eventBus.$on( 'showPopupDeactivation', this.showPopupDeactivation );
+			eventBus.$on( 'showPopupUpdateCheck', this.showPopupUpdateCheck );
+		},
+
+		computed: {
+
+			newlicenseData: function() {
+				return {
+					'licenseStatus': 'inactive',
+					'licenseKey': '',
+					'licenseDetails': {},
+				};
+			},
+
+			licencePluginList: function() {
+
+				let licencePluginList = {};
+
+				for ( let licence of this.licenseList ) {
+					let plugins = licence['licenseDetails']['plugins'];
+
+					for ( let plugin in plugins ) {
+
+						let pluginData = plugins[ plugin ];
+						let pluginSlug = pluginData.slug;
+
+						if ( ! licencePluginList.hasOwnProperty( plugin ) ) {
+
+							licencePluginList[ plugin ] = pluginData;
+						}
+					}
+				}
+
+				return licencePluginList;
+			},
+
+			installedPluginList: function() {
+				let installedPluginList = {};
+
+				for ( let pluginSlug in this.allJetPlugins ) {
+
+					if ( this.allJetPlugins[ pluginSlug ][ 'isInstalled' ] ) {
+
+						let pluginData = this.allJetPlugins[ pluginSlug ];
+
+						let licenseActivated = this.licencePluginList.hasOwnProperty( pluginSlug ) ? true : false;
+
+						this.$set( pluginData, 'licenseActivated', licenseActivated );
+
+						installedPluginList[ pluginSlug ] = pluginData;
+					}
+				}
+
+				return installedPluginList;
+			},
+
+			installedPluginListVisible: function() {
+				return 0 !== Object.keys( this.installedPluginList ).length ? true : false;
+			},
+
+			avaliablePluginList: function() {
+
+				let avaliablePluginList = {};
+
+				for ( let pluginSlug in this.allJetPlugins ) {
+
+					if ( ( ! this.allJetPlugins[ pluginSlug ]['isInstalled'] )
+						&& this.licencePluginList.hasOwnProperty( pluginSlug ) ) {
+
+						let pluginData = this.allJetPlugins[ pluginSlug ];
+
+						let licenseActivated = this.licencePluginList.hasOwnProperty( pluginSlug ) ? true : false;
+
+						this.$set( pluginData, 'licenseActivated', licenseActivated );
+
+						avaliablePluginList[ pluginSlug ] = pluginData;
+					}
+				}
+
+				return avaliablePluginList;
+			},
+
+			avaliablePluginListVisible: function() {
+				return 0 !== Object.keys( this.avaliablePluginList ).length ? true : false;
+			},
+
+			morePluginList: function() {
+
+				let morePluginList = {};
+
+				for ( let pluginSlug in this.allJetPlugins ) {
+
+					if ( ( ! this.allJetPlugins[ pluginSlug ]['isInstalled'] ) &&
+						( ! this.licencePluginList.hasOwnProperty( pluginSlug ) ) ) {
+
+						let pluginData = this.allJetPlugins[ pluginSlug ];
+
+						let licenseActivated = this.licencePluginList.hasOwnProperty( pluginSlug ) ? true : false;
+
+						this.$set( pluginData, 'licenseActivated', licenseActivated );
+
+						morePluginList[ pluginSlug ] = pluginData;
+					}
+				}
+
+				return morePluginList;
+			},
+
+			morePluginListVisible: function() {
+				return Object.keys( this.morePluginList ).length ? true : false;
+			},
+		},
+
+		methods: {
+
+			showLicenseManager: function() {
+				this.deactivatePopupVisible = false;
+				this.licensePopupVisible = false;
+				this.licenseManagerVisible = true;
+			},
+
+			showPopupActivation: function( slug ) {
+				this.activatingPluginSlug = slug;
+				this.updateCheckPopupVisible = false;
+				this.licensePopupVisible = true;
+			},
+
+			showPopupDeactivation: function( slug ) {
+				this.deactivatePopupVisible = true;
+			},
+
+			showPopupUpdateCheck: function() {
+				this.updateCheckPopupVisible = true;
+			},
+
+			addNewLicense: function() {
+				this.licenseManagerVisible = false;
+				this.licensePopupVisible = true;
+			},
+
+			addLicense: function( licenseData ) {
+				this.licenseList.push( licenseData );
+			},
+
+			removeLicense: function( licenceKey ) {
+
+				let removingIndex = false;
+
+				for ( let licenceIndex in this.licenseList ) {
+					let licenseData =  this.licenseList[ licenceIndex ];
+
+					if ( licenseData['licenseKey'] === licenceKey ) {
+						removingIndex = licenceIndex;
+
+						break;
+					}
+				}
+
+				if ( removingIndex ) {
+					this.licenseList.splice( removingIndex, 1 );
+				}
+
+				this.licensePopupVisible = false;
+			},
+
+			updateUserPluginData: function( data ) {
+				let slug       = data.slug,
+					pluginData = data.pluginData;
+
+				this.allJetPlugins[ slug ] = Object.assign( {}, this.allJetPlugins[ slug ], pluginData );
+			},
+
+			licenseAction: function() {
+				var self = this;
+
+				self.ajaxLicenseAction = jQuery.ajax( {
+					type: 'POST',
+					url: window.JetDashboardPageConfig.ajaxUrl,
+					dataType: 'json',
+					data: {
+						action: 'jet_license_action',
+						data: {
+							//plugin: self.activatingPluginSlug,
+							license: self.licenseKey,
+							action: 'activate'
+						}
+					},
+					beforeSend: function( jqXHR, ajaxSettings ) {
+
+						if ( null !== self.ajaxLicenseAction ) {
+							self.ajaxLicenseAction.abort();
+						}
+
+						self.licenseActionProcessed = true;
+					},
+					success: function( responce, textStatus, jqXHR ) {
+						self.licenseActionProcessed = false;
+
+						self.$CXNotice.add( {
+							message: responce.message,
+							type: responce.status,
+							duration: 3000,
+						} );
+
+						if ( 'success' === responce.status ) {
+
+							self.addLicense( {
+								'licenseKey': self.licenseKey,
+								'licenseStatus': 'active',
+								'licenseDetails': responce.data,
+							} );
+						}
+					}
+				} );
+			}
+		}
+
+	} );
+
+})();

wp-content/plugins/jet-elements/includes/modules/jet-dashboard/assets/js/welcome-page.js

@@ -0,0 +1,12 @@
+(function () {
+
+	'use strict';
+
+	Vue.component( 'welcome-page', {
+		template: '#jet-dashboard-welcome-page',
+		data: function() {
+			return {};
+		}
+	} );
+
+})();

wp-content/plugins/jet-elements/includes/modules/jet-dashboard/assets/scss/jet-dashboard-admin.scss

@@ -0,0 +1,715 @@
+.cx-vui-notices {
+	z-index: 1000;
+}
+
+.jet-dashboard-page {
+	font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+	margin: 25px 15px 0 15px;
+
+	&__header {
+		position: relative;
+		padding: 40px;
+		background: linear-gradient(90deg, #5B77E7 0%, #49B5D2 53.65%, #26E8A8 100%);
+		border-radius: 6px 6px 0px 0px;
+
+		.header-title {
+			color: white;
+			font-size: 18px;
+			font-weight: normal;
+			margin: 0;
+		}
+
+		.header-bg {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+	}
+
+	&__content {
+		position: relative;
+		font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+	}
+
+	&__footer {}
+
+	p {
+		font-size: 12px;
+		color: #7b7e81;
+		margin: 0 0 10px 0;
+	}
+
+	.dashicons {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.cx-vui-subtitle {
+		font-size: 24px;
+		font-weight: 500;
+		margin-bottom: 40px;
+		padding-bottom: 16px;
+		border-bottom: 1px solid #DCDCDD;
+	}
+
+	.cx-vui-button {
+		background-color: transparent;
+
+		&:hover {
+			background-color: transparent;
+		}
+
+		.cx-vui-button__content {
+			> span {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+			}
+
+			.button-icon {
+				margin-right: 5px;
+			}
+		}
+
+		&.cx-vui-button--style-accent {
+			color: #007cba;
+			box-shadow: inset 0px 0px 0px 1px #007cba;
+
+			.cx-vui-button__loader {
+				svg, path {
+					fill: #007cba;
+				}
+			}
+
+			.button-icon, path {
+				fill: #007cba;
+			}
+		}
+
+		&.cx-vui-button--style-danger {
+			color: #D6336C;
+			box-shadow: inset 0px 0px 0px 1px #D6336C;
+
+			.cx-vui-button__loader {
+				svg, path {
+					fill: #D6336C;
+				}
+			}
+
+			.button-icon, path {
+				fill: #D6336C;
+			}
+		}
+	}
+
+	.cx-vui-alert {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 10px 20px;
+		margin-top: 20px;
+		background-color: #F4F4F5;
+		border-radius: 4px;
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+
+		.cx-vui-alert__icon {
+			margin-top: 3px;
+			margin-right: 10px;
+		}
+
+		.cx-vui-alert__message {
+			flex: 1 1 auto;
+			color: #7B7E81;
+			font-size: 13px;
+		}
+
+		&.info-type {
+			background-color: #EDF6FA;
+
+			.cx-vui-alert__icon {
+				svg {
+					fill: #007CBA;
+				}
+			}
+
+			.cx-vui-alert__message {
+				color: #007CBA;
+			}
+		}
+
+		&.success-type {
+			background-color: #E9F6EA;
+
+			.cx-vui-alert__icon {
+				svg {
+					fill: #46B450;
+				}
+			}
+
+			.cx-vui-alert__message {
+				color: #46B450;
+			}
+		}
+
+		&.error-type {
+			background-color: #FBF0F0;
+
+			.cx-vui-alert__icon {
+				svg {
+					fill: #C92C2C;
+				}
+			}
+
+			.cx-vui-alert__message {
+				color: #C92C2C;
+			}
+		}
+	}
+
+	.cx-vui-popup {
+		.cx-vui-popup__header {
+			text-align: center;
+			margin-bottom: 30px;
+		}
+
+		.cx-vui-popup__header-label {
+			font-weight: 500;
+			font-size: 24px;
+			line-height: 36px;
+			text-align: center;
+			color: #23282D;
+		}
+
+		.cx-vui-popup__content {
+
+		}
+
+		&.license-manager-popup {
+
+			.cx-vui-popup__body {
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+				align-items: stretch;
+				overflow: hidden;
+				max-height: calc( 100% - 100px );
+			}
+
+			.cx-vui-popup__header {
+				padding-bottom: 15px;
+				border-bottom: 1px solid #DCDCDD;
+
+				.cx-vui-popup__header-inner {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+				}
+			}
+
+			.cx-vui-popup__content {
+				flex: 1 1 auto;
+				overflow-y: auto;
+
+				.license-manager {
+					width: 100%;
+					max-width: 1260px;
+
+				}
+			}
+		}
+
+		&.license-activation-popup {
+
+			.cx-vui-popup__header {
+				text-align: center;
+			}
+
+			.cx-vui-popup__body {
+
+			}
+
+			.popup-licence-control {
+				width: 100%;
+				display: flex;
+				justify-content: flex-start;
+				align-items: flex-start;
+				flex-wrap: wrap;
+				margin-top: 10px;
+
+				p {
+					width: 100%;
+				}
+
+				.popup-licence__key {
+					flex: 1 1 auto;
+
+					input {
+						border-radius: 4px 0 0 4px;
+					}
+				}
+
+				.popup-licence__action-button {
+					border-radius: 0 4px 4px 0;
+					box-shadow: none;
+				}
+			}
+		}
+
+		&.license-deactivation-popup {
+			.cx-vui-popup__content {
+				text-align: center;
+
+				.show-license-manager {
+					margin-top: 20px;
+				}
+			}
+		}
+
+		&.update-check-popup {
+
+			.cx-vui-popup__content {
+				text-align: center;
+
+				svg {
+					margin-bottom: 20px;
+				}
+
+				p {
+					text-align: center;
+					line-height: 30px;
+
+					span {
+						font-size: 20px;
+						color: #23282d;
+						display: block;
+					}
+				}
+
+				.cx-vui-button {
+					margin-top: 20px;
+				}
+			}
+		}
+	}
+}
+
+.jet-dashboard-license-page {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: stretch;
+
+	.ready-for-use-plugins {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: stretch;
+		padding: 40px;
+	}
+
+	.avaliable-plugins {
+		margin-top: 50px;
+	}
+
+	.license-manager-button {
+		align-self: flex-end;
+	}
+
+	.plugin-list--more-plugins {
+		display: flex;
+		justify-content: flex-start;
+		align-items: stretch;
+		flex-wrap: wrap;
+
+		.plugin-item {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: stretch;
+			flex-wrap: wrap;
+			width: 19%;
+			min-width: 200px;
+			margin-right: 1%;
+			margin-bottom: 30px;
+
+			&__inner {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+				align-items: stretch;
+
+				.plugin-tumbnail {
+					flex: 1 1 100%;
+
+					img {
+						width: auto;
+						max-width: 100%;
+					}
+				}
+			}
+		}
+	}
+
+	.plugin-list {
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		flex-wrap: wrap;
+
+		.plugin-item {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: stretch;
+			width: 30%;
+			min-width: 400px;
+			margin-right: 2%;
+			margin-bottom: 40px;
+
+			&__inner {
+				display: flex;
+				justify-content: flex-start;
+				align-items: flex-start;
+			}
+
+			&.is-installed {}
+
+			&.is-activated {}
+
+			&.update-avaliable {
+				.plugin-version {
+					background-color: #D6336C;
+				}
+			}
+
+			&--more {
+
+				.plugin-item__inner {
+					flex-direction: column;
+					align-items: stretch;
+
+					.plugin-tumbnail {
+						margin: 0;
+
+						img {
+							width: auto;
+						}
+					}
+				}
+			}
+		}
+
+		.plugin-tumbnail {
+			position: relative;
+			margin-right: 20px;
+
+			img {
+				width: 100px;
+			}
+		}
+
+		.plugin-info {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex: 1 1 auto;
+		}
+
+		.plugin-name {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			font-size: 15px;
+			color: #23282d;
+			font-weight: 500;
+		}
+
+		.plugin-desc {
+			margin: 10px 0 0 0;
+		}
+
+		.plugin-version {
+			font-size: 12px;
+			padding: 2px 6px;
+			border-radius: 3px;
+			background-color: #46B450;
+			color: white;
+			margin-left: 10px;
+		}
+
+		.plugin-actions {
+			width: 100%;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			flex-wrap: wrap;
+			margin-top: 20px;
+
+			.cx-vui-button {
+				font-size: 13px;
+				margin-left: 20px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+
+			}
+
+			.show-license-control {
+				color: #46B450;
+			}
+
+			.deactivate-plugin-button {
+				color: #D6336C;
+			}
+		}
+
+		.plugin-update-label {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			margin-top: 10px;
+			color: #7B7E81;
+			font-size: 13px;
+
+			.latest-version {
+				color: #007DBA;
+				font-weight: 500;
+				margin: 0 3px;
+			}
+
+			.cx-vui-button {
+				font-size: 13px;
+				margin-left: 3px;
+			}
+		}
+	}
+
+	.add-new-license {
+		display: flex;
+
+		.cx-vui-button__content {
+			> span {
+				display: flex;
+			}
+			.dashicons {
+				font-size: 16px;
+			}
+		}
+	}
+
+	.license-manager {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: stretch;
+
+		.license-list {
+			width: 100%;
+			display: flex;
+			justify-content: flex-start;
+			align-items: stretch;
+			flex-wrap: wrap;
+
+			.license-item {
+				margin: 10px;
+			}
+		}
+	}
+
+	.license-item {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: stretch;
+		width: 400px;
+
+		&__label {
+			font-weight: 500;
+			font-size: 24px;
+			line-height: 36px;
+			text-align: center;
+			color: #23282D;
+			margin-bottom: 40px;
+		}
+
+		&__control {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: stretch;
+
+			.license-item__activation-message {
+				text-align: center;
+				margin-bottom: 30px;
+			}
+
+			.license-item__key {
+			}
+
+			.license-item__action-button {
+				margin-top: 10px;
+			}
+		}
+
+		&__details {
+			flex-direction: 1 1 auto;
+		}
+
+		&__deactivation {
+			align-self: flex-start;
+		}
+
+		&.license-activated {
+			.license-status {
+				color: #46B450;
+			}
+
+			.license-item__deactivation {
+				color: #D6336C;
+				box-shadow: inset 0px 0px 0px 1px #D6336C;
+			}
+		}
+	}
+
+	.license-details {
+		margin: 30px 0;
+
+		&__label {
+			color: #23282D;
+			font-size: 15px;
+			font-weight: 700;
+			margin-bottom: 20px;
+		}
+
+		&__fields {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: stretch;
+		}
+
+		&__field {
+			display: flex;
+			justify-content: flex-start;
+			align-items: stretch;
+			margin-bottom: 10px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.label {
+				min-width: 120px;
+				font-weight: 700;
+				white-space: nowrap;
+				color: #23282D;
+			}
+
+			.status-label {
+				text-transform: capitalize;
+				color: #46B450;
+			}
+
+			.license-type {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				svg {
+					width: 110px;
+					height: auto;
+				}
+			}
+
+			.included-plugin-list {
+				display: flex;
+				justify-content: flex-start;
+				align-items: flex-start;
+				flex-wrap: wrap;
+				flex: 1 1 auto;
+
+				.included-plugin {
+					width: 50%;
+					margin-bottom: 10px;
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+
+					svg {
+						margin-right: 5px;
+					}
+				}
+			}
+
+			&.license-status {
+				color: #C92C2C;
+				font-weight: 700;
+				text-transform: capitalize;
+			}
+
+			&.license-type {
+				text-transform: capitalize;
+			}
+
+			&.license-plugins {
+				flex: 1 1 auto;
+			}
+		}
+
+		&__actions {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 20px;
+
+			.show-license-manager {
+				font-size: 13px;
+			}
+
+			.cx-vui-button {
+				margin-left: 5px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+			}
+		}
+	}
+}
+
+.popup-enter {
+	opacity: 0;
+
+	.cx-vui-popup__body {
+		transform: translateY(10px);
+	}
+}
+.popup-enter-active {
+	transition: opacity .3s;
+
+	.cx-vui-popup__body {
+		transition: transform .3s;
+	}
+}
+.popup-enter-to {
+	opacity: 1;
+	transform: translateY(0);
+
+	.cx-vui-popup__body {
+		transform: translateY(0px);
+	}
+}
+.popup-leave {
+	opacity: 1;
+}
+.popup-leave-leave {
+	transition: opacity .1s;
+}
+.popup-leave-to {
+	opacity: 0;
+}