Add confirmation step on kit creation (fixes #5566)

Author: rodrigovirgilio

app/javascript/controllers/duplicate_items_controller.js

@@ -23,16 +23,96 @@ export default class extends Controller {
     if (!this.itemSubmitButtonTargets.includes(submitter)) return
 
     event.preventDefault()
-    
+
+    this.showConfirmationModal(submitter.name)
+  }
+
+  checkForDuplicatesAndSubmit(buttonName) {
     const duplicates = this.findDuplicates()
-    
+
     if (duplicates.length > 0) {
-      this.showModal(duplicates, submitter.name)
+      this.showDuplicatesModal(duplicates, buttonName)
     } else {
-      this.submitForm(submitter.name)
+      this.submitForm(buttonName)
     }
   }
 
+  collectLineItems() {
+    const items = []
+
+    this.element.querySelectorAll('select[name*="[item_id]"]').forEach(select => {
+      const itemId = select.value
+      const itemText = select.options[select.selectedIndex]?.text
+      const section = select.closest('.line_item_section')
+      const quantityInput = section?.querySelector('input[name*="[quantity]"]')
+      const quantity = parseInt(quantityInput?.value) || 0
+
+      if (!itemId || itemText === "Choose an item" || quantity === 0) return
+
+      items.push({ name: itemText, quantity })
+    })
+
+    return items
+  }
+
+  showConfirmationModal(buttonName) {
+    const name = this.element.querySelector('#kit_name')?.value || ''
+    const value = parseFloat(this.element.querySelector('#kit_value_in_dollars')?.value || 0).toFixed(2)
+    const items = this.collectLineItems()
+
+    const itemRows = items.map(item =>
+      `<tr><td>${item.name}</td><td>${item.quantity}</td></tr>`
+    ).join('')
+
+    const modalHtml = `
+      <div class="modal fade" id="kitConfirmationModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Kit Creation Confirmation</h5>
+              <button type="button" class="close" data-bs-dismiss="modal">
+                <span>&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="lead">You are about to create a kit named
+                <span class="fw-bolder fst-italic" data-testid="kit-confirmation-name">${name}</span>
+                with value
+                <span class="fw-bolder fst-italic" data-testid="kit-confirmation-value">$${value}</span>
+              </p>
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th>Item Name</th>
+                    <th>Quantity</th>
+                  </tr>
+                </thead>
+                <tbody>${itemRows}</tbody>
+              </table>
+              <p>Please confirm that this is the correct composition of the kit. Note: You will
+                <span class="text-danger fw-bold">not</span> be able to edit the items contained in the kit.</p>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, I need to make changes</button>
+              <button type="button" class="btn btn-success" id="kitConfirmationYes">Yes, it's correct</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+
+    document.getElementById('kitConfirmationModal')?.remove()
+    document.body.insertAdjacentHTML('beforeend', modalHtml)
+
+    const modal = new bootstrap.Modal(document.getElementById('kitConfirmationModal'))
+    modal.show()
+
+    document.getElementById('kitConfirmationYes').addEventListener('click', () => {
+      modal.hide()
+      this.checkForDuplicatesAndSubmit(buttonName)
+    })
+  }
+
   findDuplicates() {
     const itemCounts = {}
     const itemData = {}
@@ -59,7 +139,7 @@ export default class extends Controller {
       .map(id => itemData[id])
   }
 
-  showModal(duplicates, buttonName) {
+  showDuplicatesModal(duplicates, buttonName) {
     const itemRows = duplicates.map(item => {
       const entries = item.entries
       const total = entries.reduce((sum, entry) => sum + entry.quantity, 0)

spec/system/kit_system_spec.rb

@@ -47,11 +47,48 @@
 
     click_button "Save"
 
+    expect(page).to have_css("#kitConfirmationModal", visible: true)
+    within "#kitConfirmationModal" do
+      expect(page).to have_content("Kit Creation Confirmation")
+      expect(find(:element, "data-testid": "kit-confirmation-name")).to have_text(kit_traits[:name])
+      expect(find(:element, "data-testid": "kit-confirmation-value")).to have_text("$10.10")
+      expect(page).to have_content(item.name)
+      expect(page).to have_content(quantity_per_kit.to_s)
+      expect(page).to have_css(".text-danger", text: "not")
+      click_button "Yes, it's correct"
+    end
+
     expect(page.find(".alert")).to have_content "Kit created successfully"
     expect(page).to have_content(kit_traits[:name])
     expect(page).to have_content("#{quantity_per_kit} #{item.name}")
   end
 
+  it "returns to the form with values intact when declining the confirmation" do
+    visit new_kit_path
+    kit_traits = attributes_for(:kit)
+
+    fill_in "Name", with: kit_traits[:name]
+    find(:css, '#kit_value_in_dollars').set('10.10')
+
+    item = Item.last
+    quantity_per_kit = 5
+    select item.name, from: "kit_item_line_items_attributes_0_item_id"
+    find(:css, '#kit_item_line_items_attributes_0_quantity').set(quantity_per_kit)
+
+    click_button "Save"
+
+    expect(page).to have_css("#kitConfirmationModal", visible: true)
+    within "#kitConfirmationModal" do
+      click_button "No, I need to make changes"
+    end
+
+    expect(page).to have_no_css("#kitConfirmationModal", visible: true)
+    expect(page).to have_current_path(new_kit_path)
+    expect(page).to have_no_content("Kit created successfully")
+    expect(page).to have_field("Name", with: kit_traits[:name])
+    expect(page).to have_field("kit_item_line_items_attributes_0_quantity", with: quantity_per_kit.to_s)
+  end
+
   it "can add items correctly" do
     visit new_kit_path
     new_barcode = "1234567890"
@@ -221,6 +258,11 @@
 
       click_button "Save"
 
+      expect(page).to have_css("#kitConfirmationModal", visible: true)
+      within "#kitConfirmationModal" do
+        click_button "Yes, it's correct"
+      end
+
       expect(page.find(".alert")).to have_content "Name can't be blank"
       expect(page).to have_content(kit_traits[:quantity])
       expect(page).to have_content(item.name)
@@ -253,10 +295,15 @@
         fill_in quantity_input[:id], with: "15"
       end
 
-      # Try to save - should trigger duplicate detection modal
+      # Try to save - the confirmation preview appears first
       click_button "Save"
 
-      # JavaScript modal should appear
+      expect(page).to have_css("#kitConfirmationModal", visible: true)
+      within "#kitConfirmationModal" do
+        click_button "Yes, it's correct"
+      end
+
+      # Confirming then triggers duplicate detection
       expect(page).to have_css("#duplicateItemsModal", visible: true)
       expect(page).to have_content("Multiple Item Entries Detected")
       expect(page).to have_content("Merge Items")