From ca6266e064920ae5e9b575225984aa19f95cba32 Mon Sep 17 00:00:00 2001
From: Stuart Colville <scolville@mozilla.com>
Date: Thu, 20 Jun 2013 13:54:30 +0000
Subject: [PATCH] Add loading and error handling to price tier xhr (bug 885258)

---
 media/css/devreg/overlay.styl                         |  3 +++
 media/js/devreg/payments.js                           |  9 +++++++++
 .../templates/developers/payments/premium.html        | 11 +++++++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/media/css/devreg/overlay.styl b/media/css/devreg/overlay.styl
index 99f2c4fccc..27439b9c34 100644
--- a/media/css/devreg/overlay.styl
+++ b/media/css/devreg/overlay.styl
@@ -63,6 +63,9 @@ body.overlayed {
                 display: block;
             }
         }
+        > p {
+            margin-bottom: 1em;
+        }
     }
     header .dismiss {
         width: 50px;
diff --git a/media/js/devreg/payments.js b/media/js/devreg/payments.js
index 2e21807690..2de32ed649 100644
--- a/media/js/devreg/payments.js
+++ b/media/js/devreg/payments.js
@@ -3,6 +3,7 @@ define('payments', [], function() {
 
     var currentPrice;
     var $regions = $('.regions');
+    var $regionsIsland = $('#regions');
     var pricesApiEndpoint = $regions.data('pricelistApiUrl') + '{0}/';
 
     function getOverlay(opts) {
@@ -79,6 +80,7 @@ define('payments', [], function() {
         var apiUrl = format(pricesApiEndpoint, parseInt(selectedPrice, 10));
         var disabledRegions = $regions.data('disabledRegions');
         var freeWithInAppId = $regions.data('freeWithInappId');
+        var apiErrorMsg = $regions.data('apiErrorMsg');
 
         if (currentPrice == selectedPrice) {
             return;
@@ -101,6 +103,9 @@ define('payments', [], function() {
 
         $.ajax({
             url: apiUrl,
+            beforeSend: function() {
+                $regionsIsland.addClass('loading');
+            },
             success: function(data) {
                 var prices = data.prices || [];
                 var tierPrice = data.price;
@@ -130,6 +135,10 @@ define('payments', [], function() {
                                                      .trigger('change');
             },
             dataType: "json"
+        }).fail(function() {
+            z.doc.trigger('notify', { 'msg': apiErrorMsg });
+        }).always(function() {
+            $regionsIsland.removeClass('loading');
         });
 
         currentPrice = selectedPrice;
diff --git a/mkt/developers/templates/developers/payments/premium.html b/mkt/developers/templates/developers/payments/premium.html
index b08a02b545..adba749c2e 100644
--- a/mkt/developers/templates/developers/payments/premium.html
+++ b/mkt/developers/templates/developers/payments/premium.html
@@ -174,15 +174,18 @@
               <tr>
                 <td colspan="2" class="region-container">
                   <div class="checkbox-choices regions"
+                       data-api-error-msg="{{ _('A server error occurred. Please try again later.') }}"
                        data-disabled-regions="{{ region_form.disabled_regions|json }}"
-                       data-pricelist-api-url="{{ api_pricelist_url }}"
-                       data-free-with-inapp-id="{{ free_with_in_app_id }}">
+                       data-free-with-inapp-id="{{ free_with_in_app_id }}"
+                       data-pricelist-api-url="{{ api_pricelist_url }}">
                     {{ region_form.regions.errors }}
                     <table>
                       <thead>
-                        <th><span class="region-heading">{{ _('Region') }}</span></th>
-                        <th>{{ _('Retail price') }}
+                        <tr>
+                          <th><span class="region-heading">{{ _('Region') }}</span></th>
+                          <th>{{ _('Retail price') }}
                             <span class="local-currency-heading">({{ _('local currency') }})</span></th>
+                        </tr>
                       </thead>
                       <tbody>
                         {% for value, text in region_form.regions.field.choices %}