Update wheelio detection, update popup to ask for rating if detection…

… succeeded and reduce content in support statement + add way to report issues
feracommerce · Jul 7, 2021 · d380098 · d380098
1 parent 6eb7bf3
commit d380098
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 6 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -45,8 +45,6 @@ body {
 .support-statement {
     margin: 0 12px;
     text-align: center;
-    font-style: italic;
-    opacity: 0.5;
 }
 
 .footer-content:hover .support-statement {
@@ -62,3 +60,47 @@ body {
 .emphasize {
     font-weight: bold;
 }
+
+.rating-stars a {
+    color: gold;
+    font-style: normal;
+    font-size: 20px;
+    letter-spacing: 4px;
+    display: inline;
+}
+.rating-stars a:hover {
+    text-decoration: none;
+}
+
+.rating-stars a .on {
+    display: none;
+}
+
+.rating-stars a.active .on,
+.rating-stars a:hover .on {
+    display: inline;
+}
+
+.rating-stars a.active .off,
+.rating-stars a:hover .off {
+    display: none;
+}
+
+.rate-statement {
+    margin-top: 12px;
+    border-top: 1px solid #0000000f;
+    padding-top: 12px;
+    vertical-align: middle;
+    line-height: 100%;
+    background-color: white;
+    padding-bottom: 12px;
+}
+
+.rate-statement p {
+    margin-bottom: 4px;
+}
+
+.rate-statement .caption {
+    vertical-align: top;
+    margin-right: 10px;
+}
diff --git a/data/shopify_apps.js b/data/shopify_apps.js
@@ -126,7 +126,7 @@ var SHOPIFY_APPS = [
         short_description: "Gamified pop‑up",
         app_store_url: "https://apps.shopify.com/wheelio-first-interactive-exit-intent-pop-up",
         website_url: "http://wheelio.conversionpirate.com",
-        script_pattern: "wheelio-a62f3.firebaseapp.com/scripttag.js",
+        script_pattern: "wheelio",
         category: "Marketing"
     },
     {

diff --git a/js/popup.js b/js/popup.js
@@ -28,6 +28,18 @@ SAD.Popup = function(opts) {
         var $table = $('#appsTable');
         var $body = $table.find('tbody');
         var $num = $('.num-detections');
+        var $supportStatement = $('.footer-content .support-statement');
+        var $rateStatement = $('.footer-content .rate-statement');
+
+        $rateStatement.find('a').on('click', function(e) {
+            localStorage.setItem("rated", true);
+            $rateStatement.hide();
+
+            var $link = $(this);
+            if ($link.data('value') < 5) {
+                alert("Please send an email to help@fera.ai with what you'd like to improve - it really helps us maintain this free extension!\n\nPlease mention the app detector in your email.");
+            }
+        });
 
         updateDetectableCounts();
 
@@ -37,11 +49,18 @@ SAD.Popup = function(opts) {
 
         $num.html(self.apps.length + " app" + (self.apps.length == 1 ? '' : 's'));
 
+
         if (self.apps.length < 1) {
             $table.hide();
+            $rateStatement.hide();
         } else {
             $table.css('opacity', 1);
             $table.show();
+
+            if (self.apps.length > 3) {
+                if (! localStorage.getItem("rated")) $rateStatement.show();
+
+            }
         }
 
         $platformName.text(self.platform);

diff --git a/popup.html b/popup.html
@@ -56,9 +56,29 @@
     </div>
 
     <div class="footer-content">
-      <div class="support-statement">
-        Open source &amp; freely supported by <a href="https://www.github.com/feracommerce/shopify_app_detector" target="github">the github community </a> and
-        <a href="https://www.fera.ai?ref=shopify_app_detector" target="fera">the <img src="/img/icons/fera.png" class="img-responsive" style="height: 14px;"> Fera.ai team</a>.
+      <div class="footer-statement support-statement"><span>Supported by <a href="https://www.fera.ai?ref=shopify_app_detector" target="fera"><img src="/img/icons/fera.png" class="img-responsive" style="height: 14px;"> Fera.ai</a></span>
+    &nbsp;|&nbsp;&nbsp;<span class="footer-statement missingApp-statement">Problem? <a href="https://github.com/feracommerce/shopify_app_detector/issues/new" target="github_issue">Report isssue</a> or <a href="mailto:help@fera.ai?subject=Problem%20with%20app%20detector" target="email_issue">email us</a>.</span>
+      </div>
+
+      <div class="footer-statement rate-statement" style="display: none">
+        <span class="caption">How's the app for you so far?</span>
+        <span class="rating-stars">
+          <a href="mailto:help@fera.ai?subject=Problem%20with%20app%20detector" target="review_1" data-value="1">
+            <span class="off">☆</span><span class="on">★</span>
+          </a>
+          <a href="mailto:help@fera.ai?subject=Problem%20with%20app%20detector" target="review_1" data-value="2">
+            <span class="off">☆</span><span class="on">★</span>
+          </a>
+          <a href="mailto:help@fera.ai?subject=Problem%20with%20app%20detector" target="review_1" data-value="3">
+            <span class="off">☆</span><span class="on">★</span>
+          </a>
+          <a href="mailto:help@fera.ai?subject=Problem%20with%20app%20detector" target="review_1" data-value="4">
+            <span class="off">☆</span><span class="on">★</span>
+          </a>
+          <a href="https://chrome.google.com/webstore/detail/shopify-app-detector-by-f/lhfdhjladfcmghahdbcmlceajdlbkale/reviews" target="review_2" data-value="5">
+            <span class="off">☆</span><span class="on">★</span>
+          </a>
+        </span>
       </div>
     </div>
   </body>