Merge pull request #9412 from binarygit/optimize-notes-and-tracking-workflow

Optimize notes and tracking workflow

app/assets/javascripts/admin/spree/orders/shipments.js.erb

@@ -39,23 +39,72 @@ $(document).ready(function() {
   }
   $('[data-hook=admin_order_edit_form] a.save-method').click(handle_shipping_method_save);
 
-  //handle tracking edit click
+  //handle tracking info edit/delete
+
+  // Show the input field to edit the tracking info
+  // And hide the input field when cancel is clicked
   $('a.edit-tracking').click(toggleTrackingEdit);
   $('a.cancel-tracking').click(toggleTrackingEdit);
 
+  saveTrackingInfo = function(){
+    let shipmentNumber = $(this).data('shipment-number');
+    let tracking = document.getElementById('tracking').value
+
+    makeApiCall(trackingUrl(shipmentNumber), { shipment: { tracking: tracking } } )
+  }
+
+  deleteTrackingInfo = function(){
+    let shipmentNumber = $(this).data('shipment-number');
+    let tracking = ''
+
+    confirmDelete(trackingUrl(shipmentNumber), { shipment: { tracking: tracking } })
+  }
+
+  trackingUrl = function(shipmentNumber){
+    return Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipmentNumber + ".json");
+  }
+
+  $('[data-hook=admin_order_edit_form] a.save-tracking').click(saveTrackingInfo);
+  $('[data-hook=admin_order_edit_form] a.delete-tracking').click(deleteTrackingInfo);
+
+  // handle note edit/delete
+
+  // Show the input field to edit the note
+  // And hide the input field when cancel is clicked
   $('a.edit-note.icon-edit').click(toggleNoteEdit);
   $('a.cancel-note').click(toggleNoteEdit);
 
-  handle_tracking_save = function(){
-    var link = $(this);
-    var shipment_number = link.data('shipment-number');
-    var tracking = link.parents('tbody').find('input#tracking').val();
-    var url = Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipment_number + ".json");
+  saveNote = function(){
+    let note = document.getElementById('note').value
+    makeApiCall(getNoteUrl(), { note: note })
+  }
 
+  deleteNote = function(){
+    let note = ''
+    confirmDelete(getNoteUrl(), { note: note })
+  }
+
+  getNoteUrl = function(){
+    return Spree.url( Spree.routes.orders_api + "/" + order_number);
+  }
+
+  confirmDelete = function(url, params){
+    displayDeleteAlert(function(confirmation) {
+      if (confirmation) {
+        makeApiCall(url, params)
+      }
+    }); 
+  }
+
+  $('[data-hook=admin_order_edit_form] a.save-note').click(saveNote);
+  $('[data-hook=admin_order_edit_form] a.delete-note').click(deleteNote);
+
+  // Makes API call for notes/tracking info
+  makeApiCall = function(url, params) {
     $.ajax({
       type: "PUT",
       url: url,
-      data: { shipment: { tracking: tracking } }
+      data: params
     }).done(function( msg ) {
       window.location.reload();
     }).error(function( msg ) {
@@ -63,57 +112,21 @@ $(document).ready(function() {
     });
   }
 
-  handle_tracking_delete = function(){
-    var link = $(this);
-    var shipment_number = link.data('shipment-number');
-    var tracking = ''
-    var url = Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipment_number + ".json");
-
-    $.ajax({
-      type: "PUT",
-      url: url,
-      data: { shipment: { tracking: tracking } }
-    }).done(function( msg ) {
-      window.location.reload();
-    }).error(function( msg ) {
-      console.log(msg);
+  displayDeleteAlert = function(callback) {
+    i18nKey = "are_you_sure";
+    $('#custom-confirm .message').html(
+      ` ${t(i18nKey)}
+              <div class="form">
+              </div>`);
+    $('#custom-confirm button.confirm').unbind( "click" ).click(() => {
+      $('#custom-confirm').hide();
+      callback(true);
     });
+    $('#custom-confirm button.cancel').click(() => {
+      $('#custom-confirm').hide();
+      callback(false)
+    });
+    $('#custom-confirm').show();
   }
 
-  handle_note_save = function(){
-    var link = $(this);
-    var note = link.parents('tbody').find('#note').val();
-    var url = Spree.url( Spree.routes.orders_api + "/" + order_number);
-
-    $.ajax({
-      type: "PUT",
-      url: url,
-      data: { note: note }
-    }).done(function( msg ) {
-      window.location.reload();
-    }).error(function( msg ) {
-      console.log(msg);
-    });
-  }
-
-  handle_note_delete = function(){
-    var link = $(this);
-    var note = ''
-    var url = Spree.url( Spree.routes.orders_api + "/" + order_number);
-
-    $.ajax({
-      type: "PUT",
-      url: url,
-      data: { note: note }
-    }).done(function( msg ) {
-      window.location.reload();
-    }).error(function( msg ) {
-      console.log(msg);
-    });
-  }
-
-  $('[data-hook=admin_order_edit_form] a.save-tracking').click(handle_tracking_save);
-  $('[data-hook=admin_order_edit_form] a.delete-tracking').click(handle_tracking_delete);
-  $('[data-hook=admin_order_edit_form] a.save-note').click(handle_note_save);
-  $('[data-hook=admin_order_edit_form] a.delete-note').click(handle_note_delete);
 });

app/views/spree/admin/orders/_form.html.haml

@@ -6,7 +6,8 @@
     = render 'spree/admin/orders/insufficient_stock_lines', insufficient_stock_lines: @order.insufficient_stock_lines
 
   = render :partial => "spree/admin/orders/shipment", :collection => @order.shipments, :locals => { :order => order }
-  = render partial: "spree/admin/orders/note", locals: { order: @order }
+  - if order.line_items.exists?
+    = render partial: "spree/admin/orders/note", locals: { order: @order }
 
   = render :partial => "spree/admin/orders/_form/adjustments", :locals => { :adjustments => @order.line_item_adjustments, :title => t(".line_item_adjustments")}
   = render :partial => "spree/admin/orders/_form/adjustments", :locals => { :adjustments => order_adjustments_for_display(@order), :title => t(".order_adjustments")}

app/views/spree/admin/orders/_note.html.haml

@@ -21,4 +21,6 @@
 
     %td.actions
       = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit')
-      = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'delete' }, title: Spree.t('delete')
+      - if @order.note.present?
+        = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete')
+

app/views/spree/admin/orders/_shipment.html.haml

@@ -85,4 +85,5 @@
         %td.actions
           - if can?(:update, shipment) && shipment.can_modify?
             = link_to '', '', :class => 'edit-tracking icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit')
-            = link_to '', '', :class => 'delete-tracking icon_link icon-trash no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'delete' }
+            - if shipment.tracking.present?
+              = link_to '', '', :class => 'delete-tracking icon_link icon-trash no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'remove' }, :title => Spree.t('delete')

app/views/spree/shipment_mailer/shipped_email.html.haml

@@ -14,7 +14,7 @@
     = item.variant.options_text
     %br
 
-- if @shipment.tracking
+- if @shipment.tracking.present?
   %p.lead
     = t('.track_information', tracking: @shipment.tracking)
 

spec/system/admin/order_spec.rb

@@ -591,6 +591,17 @@ describe '
         expect(page).to have_content test_tracking_number
 
         find('.delete-tracking.icon-trash').click
+        # Cancel Deletion
+        # Check if the alert box shows and after clicking cancel
+        # the alert box vanishes and tracking num is still present
+        expect(page).to have_content 'Are you sure?'
+        find('.cancel').click
+        expect(page).to_not have_content 'Are you sure?'
+        expect(page).to have_content test_tracking_number
+
+        find('.delete-tracking.icon-trash').click
+        expect(page).to have_content 'Are you sure?'
+        find('.confirm').click
         expect(page).to_not have_content test_tracking_number
       end
 
@@ -605,6 +616,17 @@ describe '
         expect(page).to have_content test_note
 
         find('.delete-note.icon-trash').click
+        # Cancel Deletion
+        # Check if the alert box shows and after clicking cancel
+        # the alert box vanishes and note is still present
+        expect(page).to have_content 'Are you sure?'
+        find('.cancel').click
+        expect(page).to_not have_content 'Are you sure?'
+        expect(page).to have_content test_note
+
+        find('.delete-note.icon-trash').click
+        expect(page).to have_content 'Are you sure?'
+        find('.confirm').click
         expect(page).to_not have_content test_note
       end