Added contact support option on No-data screen (#20666)

* Added contact support option on No-data screen, #PG-2773, #PG-2798 * Changes as per design * Changed to color-white variable * Updated screenshots * PR changes added * Screenshot updated * Design Changes * Updated UI screenshots * PR changes * PR suggestions applied * Changed to not important * Removed important from css * Added more UI changes * Updated UI Screenshots * Removed underline for a tags * Changed label to v-text from v-html, #AS-269 * Updated screenshots and reverted v-text code * built vue files --------- Co-authored-by: sgiehl <stefan@matomo.org> Co-authored-by: AltamashShaikh <AltamashShaikh@users.noreply.github.com>
matomo-org · May 10, 2023 · 533fa96 · 533fa96
1 parent 46cd680
commit 533fa96
Show file tree

Hide file tree

Showing 19 changed files with 224 additions and 103 deletions.
diff --git a/plugins/Morpheus/stylesheets/base/colors.less b/plugins/Morpheus/stylesheets/base/colors.less
@@ -3,6 +3,9 @@
 @color-black:       #000;
 @color-gray:        #ccc;
 @color-gray-light:  #f0f0f0;
+@color-gray-bright: #EBF2EB;
+@color-gray-400:    #BCBCBC;
+@color-jetstream:  #c3d9c4;
 @color-white:       #fff;
 @color-silver:      #999;
 @color-silver-l14:  lighten(@color-black, 14%);

diff --git a/plugins/SitesManager/Controller.php b/plugins/SitesManager/Controller.php
@@ -14,6 +14,7 @@
 use Piwik\API\Request;
 use Piwik\API\ResponseBuilder;
 use Piwik\Common;
+use Piwik\Container\StaticContainer;
 use Piwik\Piwik;
 use Piwik\Plugin\Manager;
 use Piwik\SiteContentDetector;
@@ -176,12 +177,15 @@ public function siteWithoutData()
         $emailTemplateData['cms'] = $this->siteContentDetector->cms;
 
         $emailContent = $this->renderTemplateAs('@SitesManager/_trackingCodeEmail', $emailTemplateData, $viewType = 'basic');
+        $inviteUserLink = $this->getInviteUserLink();
 
         return $this->renderTemplateAs('siteWithoutData', [
-            'siteName'           => $this->site->getName(),
-            'idSite'             => $this->idSite,
-            'piwikUrl'           => $piwikUrl,
-            'emailBody'          => $emailContent,
+            'siteName'                                            => $this->site->getName(),
+            'idSite'                                              => $this->idSite,
+            'piwikUrl'                                            => $piwikUrl,
+            'emailBody'                                           => $emailContent,
+            'siteWithoutDataStartTrackingTranslationKey'          => StaticContainer::get('SitesManager.SiteWithoutDataStartTrackingTranslation'),
+            'inviteUserLink'                                      => $inviteUserLink
         ], $viewType = 'basic');
     }
 
@@ -259,4 +263,19 @@ private function getActiveTabOnLoad($templateData)
 
         return $tabToDisplay;
     }
+
+    private function getInviteUserLink()
+    {
+        $request = \Piwik\Request::fromRequest();
+        $idSite = $request->getIntegerParameter('idSite', 0);
+        if (!$idSite || !Piwik::isUserHasAdminAccess($idSite)) {
+            return 'https://matomo.org/faq/general/manage-users/#imanadmin-creating-users';
+        }
+
+        return SettingsPiwik::getPiwikUrl() . 'index.php?' . Url::getQueryStringFromParameters([
+                'idSite' => $idSite,
+                'module' => 'UsersManager',
+                'action' => 'index',
+            ]);
+    }
 }
diff --git a/plugins/SitesManager/SitesManager.php b/plugins/SitesManager/SitesManager.php
@@ -514,6 +514,12 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = "SitesManager_SiteWithoutDataGoogleTagManagerDescription";
         $translationKeys[] = "SitesManager_SiteWithoutDataWordpress";
         $translationKeys[] = "SitesManager_SiteWithoutDataWordpressDescription";
+        $translationKeys[] = "SitesManager_SiteWithoutDataStartTrackingDataHeader";
+        $translationKeys[] = "SitesManager_SiteWithoutDataStartTrackingDataDescriptionLine1";
+        $translationKeys[] = "SitesManager_SiteWithoutDataStartTrackingDataDescriptionLine2";
+        $translationKeys[] = "SitesManager_EmailInstructionsButtonText";
+        $translationKeys[] = "SitesManager_SiteWithoutDataIgnorePage";
+        $translationKeys[] = "SitesManager_DemoSiteButtonText";
     }
 
     public function noDataPageGTMTabInstructions(&$out)

diff --git a/plugins/SitesManager/config/config.php b/plugins/SitesManager/config/config.php
@@ -1,2 +1,4 @@
 <?php
-return array();
+return array(
+    'SitesManager.SiteWithoutDataStartTrackingTranslation' => \Piwik\DI::string('SitesManager_SiteWithoutDataStartTrackingDataDescriptionLine1')
+);
diff --git a/plugins/SitesManager/lang/en.json b/plugins/SitesManager/lang/en.json
@@ -86,7 +86,6 @@
         "SiteWithoutDataDescription": "You need to add some extra code to your website or mobile app if you haven't already. Check your option below or %1$ssend all the instructions to a team mate%2$s.",
         "SiteWithoutDataSetupTracking": "Please set up the %1$stracking code%2$s below into your website or mobile app if you haven't already.",
         "SiteWithoutDataMessageDisappears": "This message will disappear as soon as some data is tracked for this website.",
-        "SiteWithoutDataIgnoreMessage": "Don't show this message for the next hour",
         "SiteWithoutDataChoosePreferredWay": "Choose your preferred way of getting set up",
         "SiteWithoutDataCloudflare": "Cloudflare",
         "SiteWithoutDataCloudflareDescription": "You can use the Matomo App in Cloudflare to track data, follow the instructions from %1$sthis guide%2$s.",
@@ -183,6 +182,11 @@
         "SiteWithoutDataWordpressRequirementHeader": "Plugin requirements:",
         "SiteWithoutDataWordpressRequirement1": "Administrator account in WordPress.",
         "SiteWithoutDataWordpressRequirement2": "WordPress.com site with a Business, Commerce or Enterprise plan, or a Self-hosted WordPress site.",
-        "SiteWithoutDataWordpressFollowStepsIntro": "Steps to start tracking in Matomo"
+        "SiteWithoutDataWordpressFollowStepsIntro": "Steps to start tracking in Matomo",
+        "SiteWithoutDataStartTrackingDataHeader": "Start tracking data",
+        "SiteWithoutDataStartTrackingDataDescriptionLine1": "Choose your preferred tracking method below. If you need help, you can share these %1$sinstructions via email%2$s or %3$sinvite another user%4$s for assistance.",
+        "SiteWithoutDataStartTrackingDataDescriptionLine2": "Note: This screen will disappear as soon as some data is tracked for this website. Alternatively, you can %1$sclick here to hide this page for one hour%2$s.",
+        "EmailInstructionsButtonText": "Email instructions",
+        "SiteWithoutDataIgnorePage": "Don't show this page for an hour"
     }
 }
diff --git a/plugins/SitesManager/stylesheets/SitesManager.less b/plugins/SitesManager/stylesheets/SitesManager.less
@@ -124,6 +124,13 @@ td.editable-site-field:hover {
     text-decoration: underline;
 }
 
+#site-without-data {
+    background: @color-white;
+    .top_controls {
+        background: @color-white;
+    }
+}
+
 .site-without-data {
     h3 {
         font-weight: bold;
@@ -139,6 +146,83 @@ td.editable-site-field:hover {
             width: unset !important;
             float: unset !important;
         }
+
+        a:not(.active) {
+            text-decoration: none !important;
+            color: @color-black !important;
+
+            &:hover {
+                background-color: @color-gray-bright !important;
+                opacity: unset;
+            }
+
+            &:focus {
+                background-color: @color-jetstream !important;
+                opacity: unset;
+            }
+        }
+
+        a.active {
+            color: @color-green-piwik !important;
+            text-decoration: none !important;
+            font-weight: bold;
+
+            &:hover {
+                opacity: unset;
+            }
+        }
+
+        .indicator {
+            border-bottom: 2px solid @color-green-piwik;
+            z-index: 10;
+            bottom: 0.3rem;
+        }
+
+        .tab {
+            text-transform: unset;
+
+            a {
+                font-size: 16px;
+            }
+        }
+    }
+
+    .no-data-screen-ul-tabs::after {
+        border-bottom: 0.5px solid @color-gray-400;
+        width: 100%;
+        content: '';
+        display: block;
+        overflow: hidden;
+        bottom: 0.3rem;
+        z-index: 2;
+        position: absolute;
+    }
+
+    .no-data-footer {
+        position: sticky;
+        width: inherit;
+        bottom: 0;
+        background: @color-white;
+
+        .col {
+            width: unset !important;
+        }
+
+        @media only screen {
+            @media (max-width: 800px) {
+                .m-bottom-1 {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+    }
+
+    #start-tracking-data-header {
+        font-weight: bold;
+    }
+
+    .no-data-tabs-main-div .col:not(.tabs-row):not(.tabs-row .col) {
+        padding-top: 1rem;
     }
 }
 
@@ -152,4 +236,4 @@ td.editable-site-field:hover {
     button {
         margin: 10px;
     }
-}
+}
diff --git a/plugins/SitesManager/templates/_siteWithoutDataTabs.twig b/plugins/SitesManager/templates/_siteWithoutDataTabs.twig
@@ -6,8 +6,8 @@
 
 {% set columnClass = activeTab ? 's2' : 's3' %}
 
-<div class="row">
-    <div class="col s12">
+<div class="row no-data-tabs-main-div">
+    <div class="col s12 tabs-row">
         <ul class="tabs no-data-screen-ul-tabs">
             <li class="tab col {{ columnClass }}"><a {% if siteType != constant('Piwik\\Plugins\\SitesManager\\SitesManager::SITE_TYPE_UNKNOWN') and (consentManagerName == false) and (activeTab == '') %} class="active" {% endif %} href="#integrations">{{ 'SitesManager_Integrations'|translate }}</a></li>
             <li class="tab col {{ columnClass }}"><a {% if (siteType == constant('Piwik\\Plugins\\SitesManager\\SitesManager::SITE_TYPE_UNKNOWN') and (activeTab == '')) or consentManagerName %} class="active" {% endif %} href="#tracking-code">{{ 'CoreAdminHome_TrackingCode'|translate }}</a></li>
@@ -26,7 +26,7 @@
     </div>
 
     <div id="integrations" class="col s12">
-        <h3>{{ 'SitesManager_Integrations'|translate }}</h3>
+        <p>&nbsp;</p>
         {% if instruction %}
             <p>{{ instruction|raw }}</p>
 
@@ -59,7 +59,7 @@
     </div>
 
     <div id="tracking-code" class="col s12">
-
+        <p>&nbsp;</p>
         {% if consentManagerName %}
         <p></p><p></p>
         <div class="system notification notification-info">
@@ -86,8 +86,6 @@
         </div>
         {% endif %}
 
-        <h3>{{ 'CoreAdminHome_TrackingCode'|translate }}</h3>
-
         <p>{{ 'CoreAdminHome_JSTracking_CodeNoteBeforeClosingHead'|translate("&lt;/head&gt;")|raw }}</p>
 
         <pre vue-directive="CoreHome.SelectOnFocus">{{ jsTag|raw }}</pre>

diff --git a/plugins/SitesManager/templates/siteWithoutData.twig b/plugins/SitesManager/templates/siteWithoutData.twig
@@ -8,6 +8,8 @@
     {% include "@CoreHome/_siteSelectHeader.twig" %}
 {% endblock %}
 
+{% set bodyId = 'site-without-data' %}
+
 {% block content %}
 
     <script type="text/javascript" charset="utf-8">
@@ -33,8 +35,10 @@
         <div
             vue-entry="SitesManager.SiteWithoutData"
             email-body="{{ emailBody|json_encode }}"
+            site-without-data-start-tracking-translation-key="{{ siteWithoutDataStartTrackingTranslationKey|json_encode }}"
             after-intro-event-content="{{ afterIntroEventContent|json_encode }}"
             after-tracking-help-event-content="{{ afterTrackingHelpEventContent|json_encode }}"
+            invite-user-link="{{ inviteUserLink|json_encode }}"
         ></div>
     </div>