Merge pull request #826 from muffinresearch/add-progress-on-tier-changes

Add loading and error handling to price tier xhr (bug 885258)

media/css/devreg/overlay.styl

@@ -63,6 +63,9 @@ body.overlayed {
                 display: block;
             }
         }
+        > p {
+            margin-bottom: 1em;
+        }
     }
     header .dismiss {
         width: 50px;

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;

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 %}