[Vue] migrate PiwikMarketplaceLicenseController controller and twig template to Vue (#18955)

* start migration

* finish migrating license key

* get UI test to pass locally

* remove angularjs file

* remove todo

* apply review feedback

* apply review feedback

11 files changed, 837 insertions, 158 deletions

diff --git a/plugins/CoreVue/types/index.d.ts b/plugins/CoreVue/types/index.d.ts
index abef59d415..49fd91baa5 100644
--- a/plugins/CoreVue/types/index.d.ts
+++ b/plugins/CoreVue/types/index.d.ts
@@ -76,7 +76,7 @@ declare global {
 
   interface PiwikHelperGlobal {
     escape(text: string): string;
-    redirect(params: any);
+    redirect(params?: any);
     htmlDecode(encoded: string): string;
     htmlEntities(value: string): string;
     modalConfirm(element: JQuery|JQLite|HTMLElement|string, callbacks?: ModalConfirmCallbacks, options?: ModalConfirmOptions);
diff --git a/plugins/Marketplace/Marketplace.php b/plugins/Marketplace/Marketplace.php
index 752d26bf97..e043742518 100644
--- a/plugins/Marketplace/Marketplace.php
+++ b/plugins/Marketplace/Marketplace.php
@@ -57,7 +57,6 @@ class Marketplace extends \Piwik\Plugin
         $jsFiles[] = "node_modules/iframe-resizer/js/iframeResizer.min.js";
 
         $jsFiles[] = "plugins/Marketplace/angularjs/plugins/plugin-name.directive.js";
-        $jsFiles[] = "plugins/Marketplace/angularjs/licensekey/licensekey.controller.js";
         $jsFiles[] = "plugins/Marketplace/angularjs/marketplace/marketplace.controller.js";
         $jsFiles[] = "plugins/Marketplace/angularjs/marketplace/marketplace.directive.js";
     }
@@ -66,6 +65,20 @@ class Marketplace extends \Piwik\Plugin
     {
         $translationKeys[] = 'Marketplace_LicenseKeyActivatedSuccess';
         $translationKeys[] = 'Marketplace_LicenseKeyDeletedSuccess';
+        $translationKeys[] = 'Marketplace_PaidPluginsNoLicenseKeyIntro';
+        $translationKeys[] = 'Marketplace_PaidPluginsWithLicenseKeyIntro';
+        $translationKeys[] = 'Marketplace_RemoveLicenseKey';
+        $translationKeys[] = 'Marketplace_ViewSubscriptions';
+        $translationKeys[] = 'Marketplace_InstallPurchasedPlugins';
+        $translationKeys[] = 'Marketplace_InstallAllPurchasedPlugins';
+        $translationKeys[] = 'Marketplace_InstallThesePlugins';
+        $translationKeys[] = 'Marketplace_InstallAllPurchasedPluginsAction';
+        $translationKeys[] = 'Marketplace_ConfirmRemoveLicense';
+        $translationKeys[] = 'Marketplace_PaidPluginsNoLicenseKeyIntroNoSuperUserAccess';
+        $translationKeys[] = 'Marketplace_LicenseKeyIsValidShort';
+        $translationKeys[] = 'Marketplace_LicenseKey';
+        $translationKeys[] = 'CoreUpdater_UpdateTitle';
+        $translationKeys[] = 'Marketplace_ActivateLicenseKey';
     }
 
     /**
diff --git a/plugins/Marketplace/angularjs/licensekey/licensekey.controller.js b/plugins/Marketplace/angularjs/licensekey/licensekey.controller.js
deleted file mode 100644
index 6a19522c0d..0000000000
--- a/plugins/Marketplace/angularjs/licensekey/licensekey.controller.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function () {
-    angular.module('piwikApp').controller('PiwikMarketplaceLicenseController', PiwikMarketplaceLicenseController);
-
-    PiwikMarketplaceLicenseController.$inject = ['piwik', 'piwikApi'];
-
-    function PiwikMarketplaceLicenseController(piwik, piwikApi) {
-
-        this.licenseKey = '';
-        this.enableUpdate = false;
-        this.isUpdating = false;
-
-        var self = this;
-
-        function updateLicenseKey(action, licenseKey, onSuccessMessage)
-        {
-
-            piwikApi.withTokenInUrl();
-            piwikApi.post({
-                module: 'API',
-                method: 'Marketplace.' + action,
-                format: 'JSON'
-            }, {licenseKey: licenseKey}).then(function (response) {
-                self.isUpdating = false;
-
-                if (response && response.value) {
-                    var UI = require('piwik/UI');
-                    var notification = new UI.Notification();
-                    notification.show(onSuccessMessage, {context: 'success'});
-
-                    piwik.helper.redirect();
-                }
-            }, function () {
-                self.isUpdating = false;
-            });
-        }
-
-        this.updatedLicenseKey = function () {
-            this.enableUpdate = !!this.licenseKey;
-        };
-
-        this.updateLicense = function () {
-            this.enableUpdate = false;
-            this.isUpdating = true;
-
-            updateLicenseKey('saveLicenseKey', this.licenseKey, _pk_translate('Marketplace_LicenseKeyActivatedSuccess'));
-        };
-
-        this.removeLicense = function () {
-            piwik.helper.modalConfirm('#confirmRemoveLicense', {yes: function () {
-                self.enableUpdate = false;
-                self.isUpdating = true;
-                updateLicenseKey('deleteLicenseKey', '', _pk_translate('Marketplace_LicenseKeyDeletedSuccess'));
-            }});
-        };
-
-    }
-})();
\ No newline at end of file
diff --git a/plugins/Marketplace/templates/licenseform.twig b/plugins/Marketplace/templates/licenseform.twig
index 9e5b9ab596..5c4f41a6ca 100644
--- a/plugins/Marketplace/templates/licenseform.twig
+++ b/plugins/Marketplace/templates/licenseform.twig
@@ -1,75 +1,10 @@
-{% set defaultLicenseKeyFields %}
-        <div piwik-field uicontrol="text" name="license_key"
-             class="valign licenseKeyText"
-             full-width="true"
-             ng-model="licenseController.licenseKey"
-             ng-change="licenseController.updatedLicenseKey()"
-             placeholder="{% if isValidConsumer %}{{ 'Marketplace_LicenseKeyIsValidShort'|translate }}{% else %}{{ 'Marketplace_LicenseKey'|translate|e('html_attr') }}{% endif %}">
-        </div>
-        <div piwik-save-button
-             class="valign"
-             onconfirm="licenseController.updateLicense()"
-             data-disabled="!licenseController.enableUpdate"
-             value="{% if hasLicenseKey %}{{ 'CoreUpdater_UpdateTitle'|translate|e('html_attr') }}{% else %}{{ 'Marketplace_ActivateLicenseKey'|translate|e('html_attr') }}{% endif %}"
-             id="submit_license_key"></div>
-{% endset %}
-
-<div class="marketplace-max-width" ng-controller="PiwikMarketplaceLicenseController as licenseController">
-    <div class="marketplace-paid-intro">
-    {% if isValidConsumer %}
-        {% if isSuperUser %}
-            {{ 'Marketplace_PaidPluginsWithLicenseKeyIntro'|translate('')|raw }}
-            <br/>
-
-            <div class="licenseToolbar valign-wrapper">
-                {{ defaultLicenseKeyFields|raw }}
-
-                <div piwik-save-button
-                     class="valign"
-                     id="remove_license_key"
-                     onconfirm="licenseController.removeLicense()"
-                     value="{{ 'Marketplace_RemoveLicenseKey'|translate|e('html_attr') }}"
-                ></div>
-
-                <a href="{{ linkTo({'action': 'subscriptionOverview'}) }}" class="btn valign">
-                    {{ 'Marketplace_ViewSubscriptions'|translate }}
-                </a>
-
-                {% if isAutoUpdatePossible and isPluginsAdminEnabled and paidPluginsToInstallAtOnce|length %}
-                    <a href="javascript:;" class="btn installAllPaidPlugins valign">
-                        {{ 'Marketplace_InstallPurchasedPlugins'|translate }}
-                    </a>
-                    {% include '@Marketplace/paid-plugins-install-list.twig' %}
-                {% endif %}
-
-            </div>
-
-            <div piwik-activity-indicator loading="licenseController.isUpdating"></div>
-        {% endif %}
-
-    {% else %}
-        {% if isSuperUser %}
-            {{ 'Marketplace_PaidPluginsNoLicenseKeyIntro'|translate("<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/recommends/premium-plugins/'>", "</a>")|raw }}
-
-            <br/>
-
-            <div class="licenseToolbar valign-wrapper">
-                {{ defaultLicenseKeyFields|raw }}
-            </div>
-
-            <div piwik-activity-indicator loading="licenseController.isUpdating"></div>
-
-        {% else %}
-            {{ 'Marketplace_PaidPluginsNoLicenseKeyIntroNoSuperUserAccess'|translate("<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/recommends/premium-plugins/'>", "</a>")|raw }}
-        {% endif %}
-
-    {% endif %}
-    </div>
-</div>
-
-
-<div class="ui-confirm" id="confirmRemoveLicense">
-    <h2>{{ 'Marketplace_ConfirmRemoveLicense'|translate }}</h2>
-    <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-    <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-</div>
+<div
+  vue-entry="Marketplace.LicenseKey"
+  is-valid-consumer="{{ isValidConsumer|default(false)|json_encode|e('html_attr') }}"
+  is-super-user="{{ isSuperUser|default(false)|json_encode|e('html_attr') }}"
+  is-auto-update-possible="{{ isAutoUpdatePossible|default(false)|json_encode|e('html_attr') }}"
+  is-plugins-admin-enabled="{{ isPluginsAdminEnabled|default(false)|json_encode|e('html_attr') }}"
+  has-license-key="{{ hasLicenseKey|default(false)|json_encode|e('html_attr') }}"
+  paid-plugins-to-install-at-once="{{ paidPluginsToInstallAtOnce|default([])|json_encode|e('html_attr') }}"
+  install-nonce="{{ installNonce|default(null)|json_encode|e('html_attr') }}"
+></div>
diff --git a/plugins/Marketplace/templates/paid-plugins-install-list.twig b/plugins/Marketplace/templates/paid-plugins-install-list.twig
deleted file mode 100644
index 6c2feb4754..0000000000
--- a/plugins/Marketplace/templates/paid-plugins-install-list.twig
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="ui-confirm" id="installAllPaidPluginsAtOnce">
-    <h2>{{ 'Marketplace_InstallAllPurchasedPlugins'|translate }}</h2>
-    <p>
-        {{ 'Marketplace_InstallThesePlugins'|translate }}
-        <br /><br />
-    </p>
-    <ul>
-        {% for pluginName in paidPluginsToInstallAtOnce %}
-            <li>{{ pluginName }}</li>
-        {% endfor %}
-    </ul>
-
-    <p>
-        <input role="install" type="button" data-href="{{ linkTo({'action': 'installAllPaidPlugins', 'nonce': installNonce}) }}"
-               value="{{ 'Marketplace_InstallAllPurchasedPluginsAction'|translate(paidPluginsToInstallAtOnce|length) }}">
-        <input role="cancel" type="button" value="{{ 'General_Cancel'|translate }}"/>
-    </p>
-</div>
diff --git a/plugins/Marketplace/vue/dist/Marketplace.umd.js b/plugins/Marketplace/vue/dist/Marketplace.umd.js
new file mode 100644
index 0000000000..10b2c36c49
--- /dev/null
+++ b/plugins/Marketplace/vue/dist/Marketplace.umd.js
@@ -0,0 +1,489 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", , "CorePluginsAdmin"], factory);
+	else if(typeof exports === 'object')
+		exports["Marketplace"] = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else
+		root["Marketplace"] = factory(root["CoreHome"], root["Vue"], root["CorePluginsAdmin"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__, __WEBPACK_EXTERNAL_MODULE_a5a2__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/Marketplace/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "8bbf":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
+
+/***/ }),
+
+/***/ "a5a2":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_a5a2__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "LicenseKey", function() { return /* reexport */ LicenseKey; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue?vue&type=template&id=391f4838
+
+var _hoisted_1 = {
+  class: "marketplace-max-width"
+};
+var _hoisted_2 = {
+  class: "marketplace-paid-intro"
+};
+var _hoisted_3 = {
+  key: 0
+};
+var _hoisted_4 = {
+  key: 0
+};
+
+var _hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_6 = {
+  class: "licenseToolbar valign-wrapper"
+};
+var _hoisted_7 = ["href"];
+var _hoisted_8 = {
+  key: 0
+};
+var _hoisted_9 = {
+  href: "javascript:;",
+  class: "btn installAllPaidPlugins valign"
+};
+var _hoisted_10 = {
+  class: "ui-confirm",
+  id: "installAllPaidPluginsAtOnce"
+};
+
+var _hoisted_11 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_12 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_13 = ["data-href", "value"];
+var _hoisted_14 = ["value"];
+var _hoisted_15 = {
+  key: 1
+};
+var _hoisted_16 = {
+  key: 0
+};
+var _hoisted_17 = ["innerHTML"];
+
+var _hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_19 = {
+  class: "licenseToolbar valign-wrapper"
+};
+var _hoisted_20 = {
+  key: 1
+};
+var _hoisted_21 = ["innerHTML"];
+var _hoisted_22 = {
+  class: "ui-confirm",
+  id: "confirmRemoveLicense",
+  ref: "confirmRemoveLicense"
+};
+var _hoisted_23 = ["value"];
+var _hoisted_24 = ["value"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_DefaultLicenseKeyFields = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("DefaultLicenseKeyFields");
+
+  var _component_SaveButton = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("SaveButton");
+
+  var _component_ActivityIndicator = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ActivityIndicator");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_2, [_ctx.isValidConsumer ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_3, [_ctx.isSuperUser ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Marketplace_PaidPluginsWithLicenseKeyIntro', '')) + " ", 1), _hoisted_5, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_6, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_DefaultLicenseKeyFields, {
+    "model-value": _ctx.licenseKey,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      _ctx.licenseKey = $event;
+
+      _ctx.updatedLicenseKey();
+    }),
+    onConfirm: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.updateLicense();
+    }),
+    "has-license-key": _ctx.hasLicenseKey,
+    "is-valid-consumer": _ctx.isValidConsumer,
+    "enable-update": _ctx.enableUpdate
+  }, null, 8, ["model-value", "has-license-key", "is-valid-consumer", "enable-update"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    class: "valign",
+    id: "remove_license_key",
+    onConfirm: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.removeLicense();
+    }),
+    value: _ctx.translate('Marketplace_RemoveLicenseKey')
+  }, null, 8, ["value"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    class: "btn valign",
+    href: _ctx.subscriptionOverviewLink
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Marketplace_ViewSubscriptions')), 9, _hoisted_7), _ctx.showInstallAllPaidPlugins ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_8, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", _hoisted_9, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Marketplace_InstallPurchasedPlugins')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_10, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h2", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Marketplace_InstallAllPurchasedPlugins')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Marketplace_InstallThesePlugins')) + " ", 1), _hoisted_11, _hoisted_12]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("ul", null, [(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(_ctx.paidPluginsToInstallAtOnce, function (pluginName) {
+    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("li", {
+      key: pluginName
+    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(pluginName), 1);
+  }), 128))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+    role: "install",
+    type: "button",
+    "data-href": _ctx.installAllPaidPluginsLink,
+    value: _ctx.translate('Marketplace_InstallAllPurchasedPluginsAction', _ctx.paidPluginsToInstallAtOnce.length)
+  }, null, 8, _hoisted_13), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+    role: "cancel",
+    type: "button",
+    value: _ctx.translate('General_Cancel')
+  }, null, 8, _hoisted_14)])])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    loading: _ctx.isUpdating
+  }, null, 8, ["loading"])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_15, [_ctx.isSuperUser ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_16, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    innerHTML: _ctx.$sanitize(_ctx.noLicenseKeyIntroText)
+  }, null, 8, _hoisted_17), _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_19, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_DefaultLicenseKeyFields, {
+    "model-value": _ctx.licenseKey,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+      _ctx.licenseKey = $event;
+
+      _ctx.updatedLicenseKey();
+    }),
+    onConfirm: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.updateLicense();
+    }),
+    "has-license-key": _ctx.hasLicenseKey,
+    "is-valid-consumer": _ctx.isValidConsumer,
+    "enable-update": _ctx.enableUpdate
+  }, null, 8, ["model-value", "has-license-key", "is-valid-consumer", "enable-update"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    loading: _ctx.isUpdating
+  }, null, 8, ["loading"])])) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_20, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    innerHTML: _ctx.$sanitize(_ctx.noLicenseKeyIntroNoSuperUserAccessText)
+  }, null, 8, _hoisted_21)]))]))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_22, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h2", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Marketplace_ConfirmRemoveLicense')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+    role: "yes",
+    type: "button",
+    value: _ctx.translate('General_Yes')
+  }, null, 8, _hoisted_23), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+    role: "no",
+    type: "button",
+    value: _ctx.translate('General_No')
+  }, null, 8, _hoisted_24)], 512)]);
+}
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue?vue&type=template&id=391f4838
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// EXTERNAL MODULE: external "CorePluginsAdmin"
+var external_CorePluginsAdmin_ = __webpack_require__("a5a2");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue?vue&type=template&id=26188382
+
+var DefaultLicenseKeyFieldsvue_type_template_id_26188382_hoisted_1 = {
+  class: "valign licenseKeyText"
+};
+function DefaultLicenseKeyFieldsvue_type_template_id_26188382_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  var _component_SaveButton = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("SaveButton");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", DefaultLicenseKeyFieldsvue_type_template_id_26188382_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "license_key",
+    "full-width": true,
+    "model-value": _ctx.modelValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('update:modelValue', $event);
+    }),
+    placeholder: _ctx.licenseKeyPlaceholder
+  }, null, 8, ["model-value", "placeholder"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    class: "valign",
+    onConfirm: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.$emit('confirm');
+    }),
+    disabled: !_ctx.enableUpdate,
+    value: _ctx.saveButtonText,
+    id: "submit_license_key"
+  }, null, 8, ["disabled", "value"])], 64);
+}
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue?vue&type=template&id=26188382
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue?vue&type=script&lang=ts
+
+
+
+/* harmony default export */ var DefaultLicenseKeyFieldsvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    modelValue: String,
+    isValidConsumer: Boolean,
+    hasLicenseKey: Boolean,
+    enableUpdate: Boolean
+  },
+  emits: ['update:modelValue', 'confirm'],
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    SaveButton: external_CorePluginsAdmin_["SaveButton"]
+  },
+  computed: {
+    licenseKeyPlaceholder: function licenseKeyPlaceholder() {
+      return this.isValidConsumer ? Object(external_CoreHome_["translate"])('Marketplace_LicenseKeyIsValidShort') : Object(external_CoreHome_["translate"])('Marketplace_LicenseKey');
+    },
+    saveButtonText: function saveButtonText() {
+      return this.hasLicenseKey ? Object(external_CoreHome_["translate"])('CoreUpdater_UpdateTitle') : Object(external_CoreHome_["translate"])('Marketplace_ActivateLicenseKey');
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue
+
+
+
+DefaultLicenseKeyFieldsvue_type_script_lang_ts.render = DefaultLicenseKeyFieldsvue_type_template_id_26188382_render
+
+/* harmony default export */ var DefaultLicenseKeyFields = (DefaultLicenseKeyFieldsvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue?vue&type=script&lang=ts
+
+
+
+
+/* harmony default export */ var LicenseKeyvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    isValidConsumer: Boolean,
+    isSuperUser: Boolean,
+    isAutoUpdatePossible: Boolean,
+    isPluginsAdminEnabled: Boolean,
+    hasLicenseKey: Boolean,
+    paidPluginsToInstallAtOnce: {
+      type: Array,
+      required: true
+    },
+    installNonce: {
+      type: String,
+      required: true
+    }
+  },
+  components: {
+    SaveButton: external_CorePluginsAdmin_["SaveButton"],
+    ActivityIndicator: external_CoreHome_["ActivityIndicator"],
+    DefaultLicenseKeyFields: DefaultLicenseKeyFields
+  },
+  data: function data() {
+    return {
+      licenseKey: '',
+      enableUpdate: false,
+      isUpdating: false
+    };
+  },
+  methods: {
+    updateLicenseKey: function updateLicenseKey(action, licenseKey, onSuccessMessage) {
+      var _this = this;
+
+      external_CoreHome_["AjaxHelper"].post({
+        module: 'API',
+        method: "Marketplace.".concat(action),
+        format: 'JSON'
+      }, {
+        licenseKey: this.licenseKey
+      }, {
+        withTokenInUrl: true
+      }).then(function (response) {
+        _this.isUpdating = false;
+
+        if (response && response.value) {
+          external_CoreHome_["NotificationsStore"].show({
+            message: onSuccessMessage,
+            context: 'success',
+            type: 'transient'
+          });
+          external_CoreHome_["Matomo"].helper.redirect();
+        }
+      }, function () {
+        _this.isUpdating = false;
+      });
+    },
+    removeLicense: function removeLicense() {
+      var _this2 = this;
+
+      external_CoreHome_["Matomo"].helper.modalConfirm(this.$refs.confirmRemoveLicense, {
+        yes: function yes() {
+          _this2.enableUpdate = false;
+          _this2.isUpdating = true;
+
+          _this2.updateLicenseKey('deleteLicenseKey', '', Object(external_CoreHome_["translate"])('Marketplace_LicenseKeyDeletedSuccess'));
+        }
+      });
+    },
+    updatedLicenseKey: function updatedLicenseKey() {
+      this.enableUpdate = !!this.licenseKey;
+    },
+    updateLicense: function updateLicense() {
+      this.enableUpdate = false;
+      this.isUpdating = true;
+      this.updateLicenseKey('saveLicenseKey', this.licenseKey, Object(external_CoreHome_["translate"])('Marketplace_LicenseKeyActivatedSuccess'));
+    }
+  },
+  computed: {
+    subscriptionOverviewLink: function subscriptionOverviewLink() {
+      return "?".concat(external_CoreHome_["MatomoUrl"].stringify(Object.assign(Object.assign({}, external_CoreHome_["MatomoUrl"].urlParsed.value), {}, {
+        action: 'subscriptionOverview'
+      })));
+    },
+    noLicenseKeyIntroText: function noLicenseKeyIntroText() {
+      return Object(external_CoreHome_["translate"])('Marketplace_PaidPluginsNoLicenseKeyIntro', '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/recommends/premium-plugins/">', '</a>');
+    },
+    noLicenseKeyIntroNoSuperUserAccessText: function noLicenseKeyIntroNoSuperUserAccessText() {
+      return Object(external_CoreHome_["translate"])('Marketplace_PaidPluginsNoLicenseKeyIntroNoSuperUserAccess', '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/recommends/premium-plugins/">', '</a>');
+    },
+    installAllPaidPluginsLink: function installAllPaidPluginsLink() {
+      return "?".concat(external_CoreHome_["MatomoUrl"].stringify(Object.assign(Object.assign({}, external_CoreHome_["MatomoUrl"].urlParsed.value), {}, {
+        action: 'installAllPaidPlugins',
+        nonce: this.installNonce
+      })));
+    },
+    showInstallAllPaidPlugins: function showInstallAllPaidPlugins() {
+      return this.isAutoUpdatePossible && this.isPluginsAdminEnabled && this.paidPluginsToInstallAtOnce.length;
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue
+
+
+
+LicenseKeyvue_type_script_lang_ts.render = render
+
+/* harmony default export */ var LicenseKey = (LicenseKeyvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/Marketplace/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=Marketplace.umd.js.map
\ No newline at end of file
diff --git a/plugins/Marketplace/vue/dist/Marketplace.umd.min.js b/plugins/Marketplace/vue/dist/Marketplace.umd.min.js
new file mode 100644
index 0000000000..52c95a96e3
--- /dev/null
+++ b/plugins/Marketplace/vue/dist/Marketplace.umd.min.js
@@ -0,0 +1,8 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["Marketplace"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["Marketplace"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(l){if(t[l])return t[l].exports;var a=t[l]={i:l,l:!1,exports:{}};return e[l].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,l){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(n.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(l,a,function(t){return e[t]}.bind(null,a));return l},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/Marketplace/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"LicenseKey",(function(){return I})),"undefined"!==typeof window){var l=window.document.currentScript,a=l&&l.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(n.p=a[1])}var i=n("8bbf"),o={class:"marketplace-max-width"},r={class:"marketplace-paid-intro"},c={key:0},s={key:0},u=Object(i["createElementVNode"])("br",null,null,-1),d={class:"licenseToolbar valign-wrapper"},p=["href"],m={key:0},b={href:"javascript:;",class:"btn installAllPaidPlugins valign"},f={class:"ui-confirm",id:"installAllPaidPluginsAtOnce"},v=Object(i["createElementVNode"])("br",null,null,-1),O=Object(i["createElementVNode"])("br",null,null,-1),y=["data-href","value"],j=["value"],g={key:1},h={key:0},k=["innerHTML"],V=Object(i["createElementVNode"])("br",null,null,-1),P={class:"licenseToolbar valign-wrapper"},L={key:1},N=["innerHTML"],K={class:"ui-confirm",id:"confirmRemoveLicense",ref:"confirmRemoveLicense"},B=["value"],E=["value"];function A(e,t,n,l,a,A){var M=Object(i["resolveComponent"])("DefaultLicenseKeyFields"),S=Object(i["resolveComponent"])("SaveButton"),U=Object(i["resolveComponent"])("ActivityIndicator");return Object(i["openBlock"])(),Object(i["createElementBlock"])("div",o,[Object(i["createElementVNode"])("div",r,[e.isValidConsumer?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",c,[e.isSuperUser?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",s,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.translate("Marketplace_PaidPluginsWithLicenseKeyIntro",""))+" ",1),u,Object(i["createElementVNode"])("div",d,[Object(i["createVNode"])(M,{"model-value":e.licenseKey,"onUpdate:modelValue":t[0]||(t[0]=function(t){e.licenseKey=t,e.updatedLicenseKey()}),onConfirm:t[1]||(t[1]=function(t){return e.updateLicense()}),"has-license-key":e.hasLicenseKey,"is-valid-consumer":e.isValidConsumer,"enable-update":e.enableUpdate},null,8,["model-value","has-license-key","is-valid-consumer","enable-update"]),Object(i["createVNode"])(S,{class:"valign",id:"remove_license_key",onConfirm:t[2]||(t[2]=function(t){return e.removeLicense()}),value:e.translate("Marketplace_RemoveLicenseKey")},null,8,["value"]),Object(i["createElementVNode"])("a",{class:"btn valign",href:e.subscriptionOverviewLink},Object(i["toDisplayString"])(e.translate("Marketplace_ViewSubscriptions")),9,p),e.showInstallAllPaidPlugins?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",m,[Object(i["createElementVNode"])("a",b,Object(i["toDisplayString"])(e.translate("Marketplace_InstallPurchasedPlugins")),1),Object(i["createElementVNode"])("div",f,[Object(i["createElementVNode"])("h2",null,Object(i["toDisplayString"])(e.translate("Marketplace_InstallAllPurchasedPlugins")),1),Object(i["createElementVNode"])("p",null,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.translate("Marketplace_InstallThesePlugins"))+" ",1),v,O]),Object(i["createElementVNode"])("ul",null,[(Object(i["openBlock"])(!0),Object(i["createElementBlock"])(i["Fragment"],null,Object(i["renderList"])(e.paidPluginsToInstallAtOnce,(function(e){return Object(i["openBlock"])(),Object(i["createElementBlock"])("li",{key:e},Object(i["toDisplayString"])(e),1)})),128))]),Object(i["createElementVNode"])("p",null,[Object(i["createElementVNode"])("input",{role:"install",type:"button","data-href":e.installAllPaidPluginsLink,value:e.translate("Marketplace_InstallAllPurchasedPluginsAction",e.paidPluginsToInstallAtOnce.length)},null,8,y),Object(i["createElementVNode"])("input",{role:"cancel",type:"button",value:e.translate("General_Cancel")},null,8,j)])])])):Object(i["createCommentVNode"])("",!0)]),Object(i["createVNode"])(U,{loading:e.isUpdating},null,8,["loading"])])):Object(i["createCommentVNode"])("",!0)])):(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",g,[e.isSuperUser?(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",h,[Object(i["createElementVNode"])("span",{innerHTML:e.$sanitize(e.noLicenseKeyIntroText)},null,8,k),V,Object(i["createElementVNode"])("div",P,[Object(i["createVNode"])(M,{"model-value":e.licenseKey,"onUpdate:modelValue":t[3]||(t[3]=function(t){e.licenseKey=t,e.updatedLicenseKey()}),onConfirm:t[4]||(t[4]=function(t){return e.updateLicense()}),"has-license-key":e.hasLicenseKey,"is-valid-consumer":e.isValidConsumer,"enable-update":e.enableUpdate},null,8,["model-value","has-license-key","is-valid-consumer","enable-update"])]),Object(i["createVNode"])(U,{loading:e.isUpdating},null,8,["loading"])])):(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",L,[Object(i["createElementVNode"])("span",{innerHTML:e.$sanitize(e.noLicenseKeyIntroNoSuperUserAccessText)},null,8,N)]))]))]),Object(i["createElementVNode"])("div",K,[Object(i["createElementVNode"])("h2",null,Object(i["toDisplayString"])(e.translate("Marketplace_ConfirmRemoveLicense")),1),Object(i["createElementVNode"])("input",{role:"yes",type:"button",value:e.translate("General_Yes")},null,8,B),Object(i["createElementVNode"])("input",{role:"no",type:"button",value:e.translate("General_No")},null,8,E)],512)])}var M=n("19dc"),S=n("a5a2"),U={class:"valign licenseKeyText"};function _(e,t,n,l,a,o){var r=Object(i["resolveComponent"])("Field"),c=Object(i["resolveComponent"])("SaveButton");return Object(i["openBlock"])(),Object(i["createElementBlock"])(i["Fragment"],null,[Object(i["createElementVNode"])("div",U,[Object(i["createVNode"])(r,{uicontrol:"text",name:"license_key","full-width":!0,"model-value":e.modelValue,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.$emit("update:modelValue",t)}),placeholder:e.licenseKeyPlaceholder},null,8,["model-value","placeholder"])]),Object(i["createVNode"])(c,{class:"valign",onConfirm:t[1]||(t[1]=function(t){return e.$emit("confirm")}),disabled:!e.enableUpdate,value:e.saveButtonText,id:"submit_license_key"},null,8,["disabled","value"])],64)}var C=Object(i["defineComponent"])({props:{modelValue:String,isValidConsumer:Boolean,hasLicenseKey:Boolean,enableUpdate:Boolean},emits:["update:modelValue","confirm"],components:{Field:S["Field"],SaveButton:S["SaveButton"]},computed:{licenseKeyPlaceholder:function(){return this.isValidConsumer?Object(M["translate"])("Marketplace_LicenseKeyIsValidShort"):Object(M["translate"])("Marketplace_LicenseKey")},saveButtonText:function(){return this.hasLicenseKey?Object(M["translate"])("CoreUpdater_UpdateTitle"):Object(M["translate"])("Marketplace_ActivateLicenseKey")}}});C.render=_;var x=C,T=Object(i["defineComponent"])({props:{isValidConsumer:Boolean,isSuperUser:Boolean,isAutoUpdatePossible:Boolean,isPluginsAdminEnabled:Boolean,hasLicenseKey:Boolean,paidPluginsToInstallAtOnce:{type:Array,required:!0},installNonce:{type:String,required:!0}},components:{SaveButton:S["SaveButton"],ActivityIndicator:M["ActivityIndicator"],DefaultLicenseKeyFields:x},data:function(){return{licenseKey:"",enableUpdate:!1,isUpdating:!1}},methods:{updateLicenseKey:function(e,t,n){var l=this;M["AjaxHelper"].post({module:"API",method:"Marketplace.".concat(e),format:"JSON"},{licenseKey:this.licenseKey},{withTokenInUrl:!0}).then((function(e){l.isUpdating=!1,e&&e.value&&(M["NotificationsStore"].show({message:n,context:"success",type:"transient"}),M["Matomo"].helper.redirect())}),(function(){l.isUpdating=!1}))},removeLicense:function(){var e=this;M["Matomo"].helper.modalConfirm(this.$refs.confirmRemoveLicense,{yes:function(){e.enableUpdate=!1,e.isUpdating=!0,e.updateLicenseKey("deleteLicenseKey","",Object(M["translate"])("Marketplace_LicenseKeyDeletedSuccess"))}})},updatedLicenseKey:function(){this.enableUpdate=!!this.licenseKey},updateLicense:function(){this.enableUpdate=!1,this.isUpdating=!0,this.updateLicenseKey("saveLicenseKey",this.licenseKey,Object(M["translate"])("Marketplace_LicenseKeyActivatedSuccess"))}},computed:{subscriptionOverviewLink:function(){return"?".concat(M["MatomoUrl"].stringify(Object.assign(Object.assign({},M["MatomoUrl"].urlParsed.value),{},{action:"subscriptionOverview"})))},noLicenseKeyIntroText:function(){return Object(M["translate"])("Marketplace_PaidPluginsNoLicenseKeyIntro",'<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/recommends/premium-plugins/">',"</a>")},noLicenseKeyIntroNoSuperUserAccessText:function(){return Object(M["translate"])("Marketplace_PaidPluginsNoLicenseKeyIntroNoSuperUserAccess",'<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/recommends/premium-plugins/">',"</a>")},installAllPaidPluginsLink:function(){return"?".concat(M["MatomoUrl"].stringify(Object.assign(Object.assign({},M["MatomoUrl"].urlParsed.value),{},{action:"installAllPaidPlugins",nonce:this.installNonce})))},showInstallAllPaidPlugins:function(){return this.isAutoUpdatePossible&&this.isPluginsAdminEnabled&&this.paidPluginsToInstallAtOnce.length}}});T.render=A;var I=T;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */}})}));
+//# sourceMappingURL=Marketplace.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Marketplace/vue/dist/umd.metadata.json b/plugins/Marketplace/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..dce4477a3c
--- /dev/null
+++ b/plugins/Marketplace/vue/dist/umd.metadata.json
@@ -0,0 +1,6 @@
+{
+  "dependsOn": [
+    "CoreHome",
+    "CorePluginsAdmin"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue b/plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue
new file mode 100644
index 0000000000..6ac991a41f
--- /dev/null
+++ b/plugins/Marketplace/vue/src/LicenseKey/DefaultLicenseKeyFields.vue
@@ -0,0 +1,57 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div class="valign licenseKeyText">
+    <Field
+      uicontrol="text"
+      name="license_key"
+      :full-width="true"
+      :model-value="modelValue"
+      @update:model-value="$emit('update:modelValue', $event)"
+      :placeholder="licenseKeyPlaceholder"
+    ></Field>
+  </div>
+  <SaveButton
+     class="valign"
+     @confirm="$emit('confirm')"
+     :disabled="!enableUpdate"
+     :value="saveButtonText"
+     id="submit_license_key"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { translate } from 'CoreHome';
+import { Field, SaveButton } from 'CorePluginsAdmin';
+
+export default defineComponent({
+  props: {
+    modelValue: String,
+    isValidConsumer: Boolean,
+    hasLicenseKey: Boolean,
+    enableUpdate: Boolean,
+  },
+  emits: ['update:modelValue', 'confirm'],
+  components: {
+    Field,
+    SaveButton,
+  },
+  computed: {
+    licenseKeyPlaceholder() {
+      return this.isValidConsumer
+        ? translate('Marketplace_LicenseKeyIsValidShort')
+        : translate('Marketplace_LicenseKey');
+    },
+    saveButtonText() {
+      return this.hasLicenseKey
+        ? translate('CoreUpdater_UpdateTitle')
+        : translate('Marketplace_ActivateLicenseKey');
+    },
+  },
+});
+</script>
diff --git a/plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue b/plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue
new file mode 100644
index 0000000000..637b248e2b
--- /dev/null
+++ b/plugins/Marketplace/vue/src/LicenseKey/LicenseKey.vue
@@ -0,0 +1,244 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div class="marketplace-max-width">
+    <div class="marketplace-paid-intro">
+      <div v-if="isValidConsumer">
+        <div v-if="isSuperUser">
+          {{ translate('Marketplace_PaidPluginsWithLicenseKeyIntro', '') }}
+          <br />
+          <div class="licenseToolbar valign-wrapper">
+            <DefaultLicenseKeyFields
+              :model-value="licenseKey"
+              @update:model-value="licenseKey = $event; updatedLicenseKey()"
+              @confirm="updateLicense()"
+              :has-license-key="hasLicenseKey"
+              :is-valid-consumer="isValidConsumer"
+              :enable-update="enableUpdate"
+            />
+            <SaveButton
+              class="valign"
+              id="remove_license_key"
+              @confirm="removeLicense()"
+              :value="translate('Marketplace_RemoveLicenseKey')"
+            />
+            <a
+              class="btn valign"
+              :href="subscriptionOverviewLink"
+            >
+              {{ translate('Marketplace_ViewSubscriptions') }}
+            </a>
+            <div v-if="showInstallAllPaidPlugins">
+              <a
+                href="javascript:;"
+                class="btn installAllPaidPlugins valign"
+              >
+                {{ translate('Marketplace_InstallPurchasedPlugins') }}
+              </a>
+              <div
+                class="ui-confirm"
+                id="installAllPaidPluginsAtOnce"
+              >
+                <h2>{{ translate('Marketplace_InstallAllPurchasedPlugins') }}</h2>
+                <p>
+                  {{ translate('Marketplace_InstallThesePlugins') }}
+                  <br /><br />
+                </p>
+                <ul>
+                  <li v-for="pluginName in paidPluginsToInstallAtOnce" :key="pluginName">
+                    {{ pluginName }}
+                  </li>
+                </ul>
+                <p>
+                  <input
+                    role="install"
+                    type="button"
+                    :data-href="installAllPaidPluginsLink"
+                    :value="translate(
+                      'Marketplace_InstallAllPurchasedPluginsAction',
+                      paidPluginsToInstallAtOnce.length,
+                    )"
+                  />
+                  <input
+                    role="cancel"
+                    type="button"
+                    :value="translate('General_Cancel')"
+                  />
+                </p>
+              </div>
+            </div>
+          </div>
+          <ActivityIndicator :loading="isUpdating" />
+        </div>
+      </div>
+      <div v-else>
+        <div v-if="isSuperUser">
+          <span v-html="$sanitize(noLicenseKeyIntroText)"></span>
+          <br />
+          <div class="licenseToolbar valign-wrapper">
+            <DefaultLicenseKeyFields
+              :model-value="licenseKey"
+              @update:model-value="licenseKey = $event; updatedLicenseKey()"
+              @confirm="updateLicense()"
+              :has-license-key="hasLicenseKey"
+              :is-valid-consumer="isValidConsumer"
+              :enable-update="enableUpdate"
+            />
+          </div>
+          <ActivityIndicator :loading="isUpdating" />
+        </div>
+        <div v-else>
+          <span v-html="$sanitize(noLicenseKeyIntroNoSuperUserAccessText)"></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="ui-confirm" id="confirmRemoveLicense" ref="confirmRemoveLicense">
+      <h2>{{ translate('Marketplace_ConfirmRemoveLicense') }}</h2>
+      <input role="yes" type="button" :value="translate('General_Yes')"/>
+      <input role="no" type="button" :value="translate('General_No')"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  translate,
+  AjaxHelper,
+  Matomo,
+  ActivityIndicator,
+  MatomoUrl,
+  NotificationsStore,
+} from 'CoreHome';
+import { SaveButton } from 'CorePluginsAdmin';
+import DefaultLicenseKeyFields from './DefaultLicenseKeyFields.vue';
+
+interface LicenseKeyState {
+  licenseKey: string;
+  enableUpdate: boolean;
+  isUpdating: boolean;
+}
+
+export default defineComponent({
+  props: {
+    isValidConsumer: Boolean,
+    isSuperUser: Boolean,
+    isAutoUpdatePossible: Boolean,
+    isPluginsAdminEnabled: Boolean,
+    hasLicenseKey: Boolean,
+    paidPluginsToInstallAtOnce: {
+      type: Array,
+      required: true,
+    },
+    installNonce: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    SaveButton,
+    ActivityIndicator,
+    DefaultLicenseKeyFields,
+  },
+  data(): LicenseKeyState {
+    return {
+      licenseKey: '',
+      enableUpdate: false,
+      isUpdating: false,
+    };
+  },
+  methods: {
+    updateLicenseKey(action: string, licenseKey: string, onSuccessMessage: string) {
+      AjaxHelper.post(
+        {
+          module: 'API',
+          method: `Marketplace.${action}`,
+          format: 'JSON',
+        },
+        {
+          licenseKey: this.licenseKey,
+        },
+        { withTokenInUrl: true },
+      ).then((response) => {
+        this.isUpdating = false;
+
+        if (response && response.value) {
+          NotificationsStore.show({
+            message: onSuccessMessage,
+            context: 'success',
+            type: 'transient',
+          });
+          Matomo.helper.redirect();
+        }
+      }, () => {
+        this.isUpdating = false;
+      });
+    },
+    removeLicense() {
+      Matomo.helper.modalConfirm(this.$refs.confirmRemoveLicense as HTMLElement, {
+        yes: () => {
+          this.enableUpdate = false;
+          this.isUpdating = true;
+          this.updateLicenseKey(
+            'deleteLicenseKey',
+            '',
+            translate('Marketplace_LicenseKeyDeletedSuccess'),
+          );
+        },
+      });
+    },
+    updatedLicenseKey() {
+      this.enableUpdate = !!this.licenseKey;
+    },
+    updateLicense() {
+      this.enableUpdate = false;
+      this.isUpdating = true;
+
+      this.updateLicenseKey(
+        'saveLicenseKey',
+        this.licenseKey,
+        translate('Marketplace_LicenseKeyActivatedSuccess'),
+      );
+    },
+  },
+  computed: {
+    subscriptionOverviewLink() {
+      return `?${MatomoUrl.stringify({
+        ...MatomoUrl.urlParsed.value,
+        action: 'subscriptionOverview',
+      })}`;
+    },
+    noLicenseKeyIntroText() {
+      return translate(
+        'Marketplace_PaidPluginsNoLicenseKeyIntro',
+        '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/recommends/premium-plugins/">',
+        '</a>',
+      );
+    },
+    noLicenseKeyIntroNoSuperUserAccessText() {
+      return translate(
+        'Marketplace_PaidPluginsNoLicenseKeyIntroNoSuperUserAccess',
+        '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/recommends/premium-plugins/">',
+        '</a>',
+      );
+    },
+    installAllPaidPluginsLink() {
+      return `?${MatomoUrl.stringify({
+        ...MatomoUrl.urlParsed.value,
+        action: 'installAllPaidPlugins',
+        nonce: this.installNonce,
+      })}`;
+    },
+    showInstallAllPaidPlugins() {
+      return this.isAutoUpdatePossible
+        && this.isPluginsAdminEnabled
+        && this.paidPluginsToInstallAtOnce.length;
+    },
+  },
+});
+</script>
diff --git a/plugins/Marketplace/vue/src/index.ts b/plugins/Marketplace/vue/src/index.ts
new file mode 100644
index 0000000000..0eb27f81ef
--- /dev/null
+++ b/plugins/Marketplace/vue/src/index.ts
@@ -0,0 +1,8 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+export { default as LicenseKey } from './LicenseKey/LicenseKey.vue';