Merge pull request #8154 from meronokbay/8098-custom-modal-order-deletion

Replaced the default alert and confirm modals in the order page by custom modals

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

@@ -2,6 +2,9 @@
 
 $(document).ready(function() {
 
+  initAlert()
+  initConfirm()
+
   if ($('#variant_autocomplete_template').length > 0) {
     window.variantTemplate = Handlebars.compile($('#variant_autocomplete_template').text());
     window.variantStockTemplate = Handlebars.compile($('#variant_autocomplete_stock_template').text());
@@ -45,7 +48,7 @@ $(document).ready(function() {
       if (quantity > maxQuantity) {
         quantity = maxQuantity;
         save.parents('tr').find('input.line_item_quantity').val(maxQuantity);
-        alert(t("js.admin.orders.quantity_adjusted"));
+        ofnAlert(t("js.admin.orders.quantity_adjusted"));
       }
       toggleItemEdit();
 
@@ -54,18 +57,23 @@ $(document).ready(function() {
     }
     $('a.save-item').click(handle_save_click);
 
-    handle_delete_click = function(e, confirmed){
-      if (confirmed) {
-        var del = $(this);
-        var shipment_number = del.data('shipment-number');
-        var variant_id = del.data('variant-id');
+    handle_delete_click = function(elementSelector){
+      var del = $(elementSelector);
+      del.hide()
+      var shipment_number = del.data('shipment-number');
+      var variant_id = del.data('variant-id');
 
-        toggleItemEdit();
+      toggleItemEdit();
 
-        adjustItems(shipment_number, variant_id, 0);
-      }
+      adjustItems(shipment_number, variant_id, 0);
     }
-    $('a.delete-item').on('confirm:complete', handle_delete_click);
+
+    $('a.delete-item').click((event) => {
+      ofnConfirm(() => {
+        handle_delete_click('#custom-confirm');
+      });
+    });
+
   }
 });
 
@@ -74,7 +82,7 @@ adjustItems = function(shipment_number, variant_id, quantity){
   var inventory_units = _.where(shipment.inventory_units, {variant_id: variant_id});
 
   if (quantity == 0 && inventory_units.length == shipment.inventory_units.length) {
-    alert(t("js.admin.orders.cannot_remove_last_item"));
+    ofnAlert(t("js.admin.orders.cannot_remove_last_item"));
     return;
   }
 
@@ -91,7 +99,7 @@ adjustItems = function(shipment_number, variant_id, quantity){
   url += '.json';
 
   if (new_quantity == 0) {
-    alert(t("js.admin.orders.quantity_unchanged"));
+    ofnAlert(t("js.admin.orders.quantity_unchanged"));
   } else {
     $.ajax({
       type: "PUT",
@@ -154,3 +162,27 @@ addVariantFromStockLocation = function() {
   }
   return 1
 }
+
+initAlert = function() {
+  $('#custom-alert .confirm').click(function(e) {
+    $('#custom-alert').hide();
+  })
+}
+
+initConfirm = function() {
+  $('#custom-confirm button.cancel').click(function(e) {
+    $('#custom-confirm').hide();
+  });
+}
+
+
+ofnAlert = function(message) {
+  $('#custom-alert .message').text(message);
+  $('#custom-alert').show();
+}
+
+ofnConfirm = function(callback) {
+  $('#custom-confirm').data($(event.target).data());
+  $('#custom-confirm button.confirm').click(callback);
+  $('#custom-confirm').show();
+}

app/assets/stylesheets/admin/orders.scss

@@ -134,3 +134,33 @@ table.index td.actions {
     color: $warning-red;
   }
 }
+
+.modal {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.4);
+	text-align: center;
+
+	.modal-content {
+		background-color: $color-1;
+		margin: 15% auto;
+		padding: 1.2em;
+		width: 30%;
+		border-radius: 1em;
+		border: 1px solid $color-border;
+	}
+
+	.modal-title {
+		font-size: $h4-size;
+	}
+
+	.message {
+		font-size: $h5-size;
+		padding: 1.2em 0;
+	}
+}

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

@@ -22,4 +22,7 @@
           = link_to '', '#', :class => 'save-item icon_link icon-ok no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'save'}, :title => t('actions.save'), :style => 'display: none'
           = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none'
           = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit')
-          = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove', :confirm => t(:are_you_sure)}, :title => t('actions.delete')
+          = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete')
+
+= render 'spree/admin/shared/custom-alert'
+= render 'spree/admin/shared/custom-confirm'

app/views/spree/admin/shared/_custom-alert.html.haml

@@ -0,0 +1,8 @@
+#custom-alert.modal
+  .modal-content
+    .modal-title
+      %i.icon-warning-sign
+    .message
+    .action-buttons
+      %button.confirm
+        = t(:ok)

app/views/spree/admin/shared/_custom-confirm.html.haml

@@ -0,0 +1,11 @@
+#custom-confirm.modal
+  .modal-content
+    .modal-title
+      %i.icon-question-sign
+    .message
+      = t(:are_you_sure)
+    .action-buttons
+      %button.cancel
+        = t(:cancel)
+      %button.confirm.red
+        = t(:ok)

spec/features/admin/order_spec.rb

@@ -144,7 +144,7 @@ feature '
       fill_in(:quantity, with: max_quantity + 1)
       find("a.save-item").click
     end
-    accept_js_alert
+    click_button("OK")
 
     expect(page).to_not have_content "Loading..."
     within("tr.stock-item", text: order.products.first.name) do