[rubyforgood#3090] PR feedback:

Combine same named items & quantities for display in confirmation modal

app/javascript/controllers/distribution_confirmation_controller.js

@@ -12,6 +12,7 @@ import { Controller } from "@hotwired/stimulus"
  * If the pre-check fails, it submits the form to the server for full validation and render with the errors.
 
  * The modal shows the user what they're about to submit, including items and quantities to distribute.
+ * If multiple items have the same name, the quantities will be combined into a single row for display.
  * If the user clicks the "Yes..." button from the modal, it submits the form.
  * If the user clicks the "No..." button from the modal, it closes and user remains on the same url.
  */
@@ -34,7 +35,7 @@ export default class extends Controller {
 
   openModal(event) {
     event.preventDefault();
-    this.debugFormData();
+    // this.debugFormData();
 
     const formData = new FormData(this.formTarget);
     const formObject = this.buildNestedObject(formData);
@@ -94,14 +95,21 @@ export default class extends Controller {
     this.storageNameTarget.textContent = storageName;
   }
 
+  // Iterate over the items and if any items have the same name, then combine their quantities.
   populateItemsAndQuantities() {
-    let itemsHtml = "";
+    let combinedItems = {};
     this.itemSelectionTargets.forEach((itemSel, index) => {
       const itemName = itemSel.selectedOptions[0].text;
-      const itemQuantity = this.quantityTargets[index].value;
-      itemsHtml += `<tr><td>${itemName}</td><td>${itemQuantity}</td></tr>`;
+      if (combinedItems.hasOwnProperty(itemName)) {
+        combinedItems[itemName] += Number(this.quantityTargets[index].value);
+      } else {
+        combinedItems[itemName] = Number(this.quantityTargets[index].value);
+      }
     });
-    this.tbodyTarget.innerHTML = itemsHtml;
+    const combinedItemsHtml = Object.entries(combinedItems)
+      .map(([itemName, quantity]) => `<tr><td>${itemName}</td><td>${quantity}</td></tr>`)
+      .join('');
+    this.tbodyTarget.innerHTML = combinedItemsHtml;
   }
 
   debugFormData() {

spec/system/distribution_system_spec.rb

@@ -55,7 +55,7 @@
       end
     end
 
-    it "Displays a confirmation modal and allows user to return to the new form" do
+    it "Displays a confirmation modal with combined items and allows user to return to the new form" do
       item = View::Inventory.new(organization.id).items_for_location(storage_location.id).first.db_item
       item.update!(on_hand_minimum_quantity: 5)
       TestInventory.create_inventory(organization,
@@ -68,7 +68,13 @@
       select storage_location.name, from: "From storage location"
       select2(page, 'distribution_line_items_item_id', item.name, position: 1)
       select storage_location.name, from: "distribution_storage_location_id"
-      fill_in "distribution_line_items_attributes_0_quantity", with: 18
+      fill_in "distribution_line_items_attributes_0_quantity", with: 15
+
+      # This will fill in another item row with the same item but an additional quantity of 3
+      click_on "Add Another Item"
+      quantity_fields = all('input[data-distribution-confirmation-target="quantity"]')
+      second_quantity_field = quantity_fields[1]
+      second_quantity_field&.fill_in(with: '3')
 
       click_button "Save"
 
@@ -78,6 +84,7 @@
         expect(find(:element, "data-testid": "distribution-confirmation-partner")).to have_text(partner.name)
         expect(find(:element, "data-testid": "distribution-confirmation-storage")).to have_text(storage_location.name)
         expect(page).to have_content(item.name)
+        # There are two line items in the form for the same quantity (15 + 3 = 18)
         expect(page).to have_content("18")
         click_button "No, I need to make changes"
       end