[DEV-17228] Add markup and content for premium plugins promos (#21402)

* Add initial template for plugin promos

* Move image to Card so grid can be used at card level

* Add plugin promo screenshots

* Adjust content

* Use widget template instead of controller view

* Populate plugin promo content

* Remove enable/disable variable override

* Remove legal info markup as not yet designed

* Unify image alt text and remove help url property

* Prepare promo widgets for refactoring for reusability

* Integrate CTA links

* Rename A/B Testing image to match plugin name

* Use marketplace plugin info where possible

* Update Start free trial CTA to open marketplace in new tab

* Move promo features text to lang file

* Add UI tests

* Update UI test screenshots from CI

* Simplify UI test selector

* Update UI tests

* Use full plugin names in category ids

* Disable Professional Services ads for UI tests apart from the plugin itself

* Fix typo in test method name

* Add new widget categories to widgets test

* Add integration test without professional services widgets/categories

* Update expected list of report pages returned by the API in a system test

* Added missing externalLink method reference to the vue global properties

* built vue files

* Use test.vars. approach to disable professional services for UI tests as needed

This is needed as config override from UI tests has lower priority than ui-test.php file overrides.

* Remove test dependency on Advertising class

It seems the DI config isn't passed to the class properly during the UI tests
so using its static method using config provided by the DI works better.

* Reverse logic so that Professional Services are disabled for UI tests by default and only enabled when required

* Ensure page is reloaded after config change

* Update screenshot from CI run

* Reset UI tests config before each test

Tidying up the config within the test where it's set didn't work.

* Move mouse out of viewport to prevent any unwanted hover effects

* Update tests from CI

* Update language to use visitor instead of user

* Update UI test screenshots after content change

---------

Co-authored-by: Ben <[email protected]>

config/environment/ui-test.php

@@ -41,11 +41,19 @@ public function write(string $key, string $content): void
         };
     },
 
-    'Piwik\Config' => \Piwik\DI::decorate(function (\Piwik\Config $config) {
+    'Piwik\Config' => \Piwik\DI::decorate(function (\Piwik\Config $config, Container $c) {
         $config->General['cors_domains'][] = '*';
         $config->General['trusted_hosts'][] = '127.0.0.1';
         $config->General['trusted_hosts'][] = $config->tests['http_host'];
         $config->General['trusted_hosts'][] = $config->tests['http_host'] . ':' . $config->tests['port'];
+
+        // disable plugin promos for UI tests, only enable when explicitly requested
+        if ($c->get('test.vars.enableProfessionalSupportAdsForUITests')) {
+            $config->General['piwik_professional_support_ads_enabled'] = '1';
+        } else {
+            $config->General['piwik_professional_support_ads_enabled'] = '0';
+        }
+
         return $config;
     }),
 

core/Plugin/WidgetsProvider.php

@@ -42,7 +42,7 @@ public function getWidgetConfigs()
         $configs = array();
 
         /**
-         * Triggered to add custom widget configs. To filder widgets have a look at the {@hook Widget.filterWidgets}
+         * Triggered to add custom widget configs. To filter widgets have a look at the {@hook Widget.filterWidgets}
          * event.
          *
          * **Example**