Remove shop links from plugin details modal (#22154)

* Remove shop links from plugin details modal

* Tweak whitespace usage

* Add silver lining to metadata

* Extend silver lining to content

* Prevent metadata overflow when words are long and don't have natural break points

* Display vertical break only when there's a CTA button or a special offer available

* Show right-aligned images in plugin content readme at 48% width to avoid colision with the newly added border

* Completely remove whitespace above old plugin details metadata

* Override inconsistent marketplace "*-div-readme" styling

* Update expected screenshots

---------

Co-authored-by: Michal Kleiner <[email protected]>

plugins/Marketplace/Controller.php

@@ -190,7 +190,6 @@ public function pluginDetails()
         $view->activeTab    = $activeTab;
         $view->isAutoUpdatePossible = SettingsPiwik::isAutoUpdatePossible();
         $view->isAutoUpdateEnabled = SettingsPiwik::isAutoUpdateEnabled();
-        $view->numUsers = $this->environment->getNumUsers();
 
         return $view->render();
     }

plugins/Marketplace/stylesheets/plugin-details.less

@@ -43,9 +43,25 @@
     }
 
     #pluginDetailsTabs {
+        border-right: 1px solid silver;
         margin-top: 25px;
     }
 
+    // some plugins receive inline style from the marketplace
+    // override them for consistency
+    .main-div-readme {
+        display: flex;
+    }
+
+    .left-div-readme {
+        width: 50%;
+    }
+
+    .right-div-readme {
+        flex-grow: initial;
+        width: 48%;
+    }
+
     .contentDetails p {
         margin: 0 0 10px;
     }
@@ -54,6 +70,17 @@
         padding-right: 25px;
     }
 
+    .metadata {
+        padding-left: 0.75rem;
+
+        // -1px to force overlapping border overlapping with content
+        margin-left: calc(~"0.75rem - 1px");
+        border-left: 1px solid silver;
+
+        // prevent text overflow
+        word-break: break-word;
+    }
+
     .variationPicker {
         margin-top: 0;
         margin-bottom: 15px;
@@ -69,6 +96,7 @@
     .download,
     .install {
         padding: 11px 19px;
+        margin-bottom: 20px;
         font-size: 17.5px;
         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
@@ -318,7 +346,8 @@
         }
 
         .right-div-readme {
-            flex-grow: 1; width: 50%;
+            flex-grow: 1;
+            width: 50%;
         }
 
         .plugin-metadata-part2 {

plugins/Marketplace/templates/plugin-details.twig

@@ -110,42 +110,12 @@
                     <div class="metadata">
                         <div class="actionButton">
                             {% if not plugin.isDownloadable or not isSuperUser %}
-                                {% if hasSomeAdminAccess and plugin.hasExceededLicense is defined and plugin.hasExceededLicense and plugin.consumer %}
-                                    {% if plugin.consumer.loginUrl is defined and plugin.consumer.loginUrl %}
-                                        <a class="install update"
-                                           target="_blank"
-                                           rel="noreferrer noopener"
-                                           href="{{ plugin.consumer.loginUrl|default('')|e('html_attr') }}"
-                                        >{{ 'Marketplace_UpgradeSubscription'|translate }}</a>
-                                    {% endif %}
-
-                                {% elseif not plugin.isDownloadable and plugin.isPaid and plugin.shop is defined and plugin.shop %}
-
-                                    {% if plugin.shop.variations|length %}
-
-                                        <h4 style="color:#5bb75b;font-weight: bold;font-size: 1.2em;">{{ 'Marketplace_TryFreeTrialTitle'|translate }}</h4>
-                                        <div class="input-field variationPicker">
-                                            <select title="{{ 'Marketplace_ShownPriceIsExclTax'|translate|e('html_attr') }} {{ 'Marketplace_CurrentNumPiwikUsers'|translate(numUsers)|e('html_attr') }}">
-                                                {% for variation in plugin.shop.variations %}
-                                                    <option value="{{ variation.addToCartUrl }}"
-                                                            title="{{ 'Marketplace_PriceExclTax'|translate(variation.price, variation.currency)|e('html_attr') }} {{ 'Marketplace_CurrentNumPiwikUsers'|translate(numUsers)|e('html_attr') }}"
-                                                            {% if variation.recommended is defined and variation.recommended %}selected{% endif %}
-                                                    >{{ variation.name }} - {{ variation.prettyPrice }} / {{ variation.period }}</option>
-                                                {% endfor %}
-                                            </select>
-                                        </div>
-
-                                        <a class="install update addToCartLink" target="_blank"
-                                           title="{{ 'Marketplace_ClickToCompletePurchase'|translate|e('html_attr') }}"
-                                           rel="noreferrer noopener"
-                                           href="{{ plugin.shop.url|default('')|e('html_attr') }}"
-                                        >{{ 'Marketplace_AddToCart'|translate }}</a>
-                                    {% else %}
-                                        <a class="install update" target="_blank"
-                                           rel="noreferrer noopener"
-                                           href="{% if plugin.shop is defined and plugin.shop and plugin.shop.url %}{{ plugin.shop.url|e('html_attr') }}{% else %}{{ plugin.homepage|e('html_attr') }}{% endif %}"
-                                        >{{ 'General_MoreDetails'|translate }}</a>
-                                    {% endif %}
+                                {% if hasSomeAdminAccess and plugin.hasExceededLicense is defined and plugin.hasExceededLicense and plugin.consumer and plugin.consumer.loginUrl is defined and plugin.consumer.loginUrl %}
+                                    <a class="install update"
+                                       target="_blank"
+                                       rel="noreferrer noopener"
+                                       href="{{ plugin.consumer.loginUrl|default('')|e('html_attr') }}"
+                                    >{{ 'Marketplace_UpgradeSubscription'|translate }}</a>
                                 {% endif %}
                             {% elseif isSuperUser %}
                                 {% if not isAutoUpdatePossible %}
@@ -155,31 +125,15 @@
                                     <a class="install update"
                                        href="{{ linkTo({'module': 'Marketplace', 'action':'updatePlugin', 'pluginName': plugin.name, 'nonce': updateNonce}) }}"
                                     >{{ 'CoreUpdater_UpdateTitle'|translate }}</a>
-                                {% elseif plugin.isInstalled %}
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                {% elseif 0 < plugin.missingRequirements|length %}
-                                    <br />
-                                    <br />
-                                    <br />
-                                    <br />
-                                {% else %}
+                                {% elseif not plugin.isInstalled and 0 == plugin.missingRequirements|length %}
                                     <a href="{{ linkTo({'module': 'Marketplace', 'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': installNonce}) }}"
                                        class="install">{{ 'Marketplace_ActionInstall'|translate }}</a>
                                 {% endif %}
-                            {% else %}
-                                <br />
-                                <br />
-                                <br />
-                                <br />
                             {% endif %}
                         </div>
 
-                        {% if plugin.specialOffer is defined and plugin.specialOffer %}<p style="color: green;"><br />{{ plugin.specialOffer }}</p>{% endif %}
+                        {% if plugin.specialOffer is defined and plugin.specialOffer %}<p style="color: green;">{{ plugin.specialOffer }}<br /><br /></p>{% endif %}
 
-                        <p><br /></p>
                         <dl>
                             {% if not isBundle %}
                                 <dt>{{ 'CorePluginsAdmin_Version'|translate }}</dt>