Add disabled payment notice to detail page (bug 786888)

media/css/mkt/detail.less

@@ -441,3 +441,37 @@
         }
     }
 }
+
+.no-payments.notification-box {
+    .border-radius(5px);
+    .box-shadow(0 -1px 0 #ddd inset, 0 1px 0 rgba(0,0,0,.1));
+    border: 1px solid #CCD6E3;
+    padding: 15px;
+    background: #E3EDFA;
+    line-height: 1.3;
+    margin: 15px 0;
+    p {
+        margin: 0;
+        + p {
+            margin-top: 10px;
+        }
+    }
+    b {
+        color: #333;
+    }
+    a {
+        font-weight: bold;
+        text-decoration: underline;
+        &:hover {
+            text-decoration: none;
+        }
+    }
+    &.notice {
+        b, a {
+            color: @blue;
+        }
+        a:hover {
+            color: darken(@blue, 10%);
+        }
+    }
+}

media/css/mkt/lib.less

@@ -66,6 +66,7 @@
 @yellow: #ffe;
 @gold: darken(@yellow, 75%);
 @faint-blue: #ECF5FE;
+@blue: #258;
 
 // Used for content ratings for games in Brazil.
 // You can use them elsewhere when you want colourful boxes.

mkt/detail/templates/detail/app.html

@@ -29,6 +29,9 @@
 {% endif %}
 
 {% block content %}
+  {% if product.is_premium() %}
+    {{ disabled_payments_notice(addon=product) }}
+  {% endif %}
   <h1 id="top">{{ _('App Details') }}</h1>
   {% include 'purchase/error.html' %}
   {{ mkt_breadcrumbs(items=[(url('browse.apps'), _('Apps')),

mkt/detail/tests/test_views.py

@@ -95,6 +95,12 @@ class TestDetail(DetailBase):
         doc = self.get_pq()
         eq_(doc('.product.premium.button').length, 1)
 
+    def test_disabled_payments_notice(self):
+        self.create_switch('disabled-payments')
+        self.make_premium(self.app)
+        doc = self.get_pq()
+        eq_(doc('.no-payments.notification-box').length, 1)
+
     def dev_receipt_url(self):
         return urlparams(reverse('receipt.issue',
                                  args=[self.app.app_slug]), src='')

mkt/developers/helpers.py

@@ -201,9 +201,10 @@ def display_url(url):
 
 @register.inclusion_tag('developers/helpers/disabled_payments_notice.html')
 @jinja2.contextfunction
-def disabled_payments_notice(context):
+def disabled_payments_notice(context, addon=None):
     """
     If payments are disabled, we show a friendly message urging the developer
     to make his/her app free.
     """
-    return {'request': context.get('request'), 'addon': context.get('addon')}
+    addon = context.get('addon', addon)
+    return {'request': context.get('request'), 'addon': addon}