refactor: reuse shared confirmation controller for kit creation modal

Author: rodrigovirgilio

app/controllers/kits_controller.rb

@@ -19,6 +19,20 @@ def new
     @kit.line_items.build
   end
 
+  def validate
+    @kit = current_organization.kits.new(kit_params)
+    @kit.line_items.combine!
+    @kit.valid?
+    @kit.errors.add(:base, "At least one item is required") if @kit.line_items.empty?
+
+    if @kit.errors.none?
+      body = render_to_string(template: "kits/validate", formats: [:html], layout: false)
+      render json: {valid: true, body: body}
+    else
+      render json: {valid: false}
+    end
+  end
+
   def create
     kit_creation = KitCreateService.new(organization_id: current_organization.id, kit_params: kit_params)
     kit_creation.call

app/javascript/controllers/confirmation_controller.js

@@ -15,6 +15,10 @@ import { Controller } from "@hotwired/stimulus"
 
  * 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.
+ *
+ * The button that opened the modal is remembered and passed back into requestSubmit, so that any other
+ * Stimulus controller composed onto the same form (e.g. duplicate-items) still sees it as `event.submitter`
+ * when the form is eventually (re)submitted.
  */
 export default class extends Controller {
   static targets = [
@@ -29,6 +33,8 @@ export default class extends Controller {
   openModal(event) {
     event.preventDefault();
 
+    this.submitter = event.currentTarget;
+
     const formData = new FormData(this.formTarget);
     const formObject = this.buildNestedObject(formData);
 
@@ -49,15 +55,15 @@ export default class extends Controller {
         this.modalTarget.innerHTML = data.body;
         $(this.modalTarget).modal("show");
       } else {
-        this.formTarget.requestSubmit();
+        this.formTarget.requestSubmit(this.submitter);
       }
     })
     .catch((error) => {
       // Something went wrong in communication to server validation endpoint
       // In this case, just submit the form as if the user had clicked Save.
       // NICE TO HAVE: Send to bugsnag but need to install/configure https://www.npmjs.com/package/@bugsnag/js
       console.log(`=== ConfirmationController ERROR ${error}`);
-      this.formTarget.requestSubmit();
+      this.formTarget.requestSubmit(this.submitter);
     });
   }
 
@@ -106,6 +112,6 @@ export default class extends Controller {
     $(this.modalTarget).find('#modalYes').prop('disabled', true);
     $(this.modalTarget).find('#modalNo').prop('disabled', true);
     $(this.modalTarget).modal("hide");
-    this.formTarget.requestSubmit();
+    this.formTarget.requestSubmit(this.submitter);
   }
 }

app/javascript/controllers/kit_confirmation_controller.js

@@ -1,4 +1,4 @@
-<%= simple_form_for @kit, remote: request.xhr?, data: { controller: "form-input duplicate-items kit-confirmation" }, html: { class: 'form-horizontal' } do |f| %>
+<%= simple_form_for @kit, remote: request.xhr?, data: { controller: "form-input duplicate-items", confirmation_target: "form" }, html: { class: 'form-horizontal' } do |f| %>
   <section class="content">
     <div class="container-fluid">
       <div class="row">
@@ -36,8 +36,7 @@
               <p><b>NB: You will not be able to change the composition of the kit once saved. Partner visibility and name can be changed via the kit's item.</b></p>
               <%= submit_button({}, {
                 "duplicate-items-target": "itemSubmitButton",
-                "kit-confirmation-target": "submitButton",
-                action: "click->kit-confirmation#openModal"
+                action: "click->confirmation#openModal"
               }) %>
             </div>
           </div>
@@ -46,3 +45,14 @@
     </div>
   </section>
 <% end %>
+
+<%# Confirmation modal: See confirmation_controller.js for how this gets displayed %>
+<%# and app/controllers/kits_controller.rb#validate for how it gets populated. %>
+<div id="kitConfirmationModal"
+  class="modal confirm"
+  aria-labelledby="kitConfirmationModal"
+  aria-hidden="true"
+  tabindex="-1"
+  data-bs-backdrop="static"
+  data-confirmation-target="modal">
+</div>

app/views/kits/_form.html.erb

@@ -20,5 +20,7 @@
   </div>
 </section>
 
-<%= render 'form' %>
+<div data-controller="confirmation" data-confirmation-pre-check-path-value="<%= validate_kits_path(format: :json) %>">
+  <%= render 'form' %>
+</div>
 <%= render partial: "barcode_items/barcode_modal" %>

app/views/kits/new.html.erb

@@ -0,0 +1,37 @@
+<div class="modal-dialog modal-lg">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">Kit Creation Confirmation</h5>
+      <button id="modalClose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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"><%= @kit.name %></span>
+        with value
+        <span class="fw-bolder fst-italic" data-testid="kit-confirmation-value">$<%= format("%.2f", @kit.value_in_dollars) %></span>
+      </p>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Item Name</th>
+            <th>Quantity</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @kit.line_items.each do |line_item| %>
+            <tr>
+              <td><%= line_item.name %></td>
+              <td><%= line_item.quantity %></td>
+            </tr>
+          <% end %>
+        </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 id="modalNo" type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="No I need to make changes">No, I need to make changes</button>
+      <button id="modalYes" type="button" class="btn btn-success" data-action="confirmation#submitForm">Yes, it's correct</button>
+    </div>
+  </div>
+</div>

app/views/kits/validate.html.erb

@@ -187,6 +187,9 @@ def set_up_flipper
   end
 
   resources :kits do
+    collection do
+      post :validate
+    end
     member do
       get :allocations
       post :allocate

config/routes.rb

@@ -19,6 +19,64 @@
       end
     end
 
+    describe "POST #validate" do
+      let(:item) { create(:item, organization: organization) }
+
+      it "returns valid and the confirmation modal body for a valid kit" do
+        post validate_kits_url(format: :json), params: {
+          kit: {
+            name: "A new kit",
+            value_in_dollars: "10.10",
+            line_items_attributes: {"0": {item_id: item.id, quantity: 5}}
+          }
+        }
+
+        expect(response).to be_successful
+        json = JSON.parse(response.body)
+        expect(json["valid"]).to eq(true)
+        expect(json["body"]).to include("A new kit")
+        expect(json["body"]).to include("$10.10")
+        expect(json["body"]).to include(item.name)
+      end
+
+      it "returns invalid when the name is blank" do
+        post validate_kits_url(format: :json), params: {
+          kit: {
+            name: "",
+            value_in_dollars: "10.10",
+            line_items_attributes: {"0": {item_id: item.id, quantity: 5}}
+          }
+        }
+
+        expect(response).to be_successful
+        json = JSON.parse(response.body)
+        expect(json["valid"]).to eq(false)
+        expect(json["body"]).to be_nil
+      end
+
+      it "returns invalid when there are no line items" do
+        post validate_kits_url(format: :json), params: {
+          kit: {name: "A new kit", value_in_dollars: "10.10"}
+        }
+
+        expect(response).to be_successful
+        json = JSON.parse(response.body)
+        expect(json["valid"]).to eq(false)
+      end
+
+      it "does not persist the kit" do
+        expect {
+          post validate_kits_url(format: :json), params: {
+            kit: {
+              name: "A new kit",
+              value_in_dollars: "10.10",
+              line_items_attributes: {"0": {item_id: item.id, quantity: 5}}
+            }
+          }
+        }.not_to change(Kit, :count)
+      end
+    end
+
     describe "GET #index" do
       before do
         # this shouldn't be shown

spec/requests/kit_requests_spec.rb

@@ -72,8 +72,8 @@
 
     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)
+    select item.name, from: "kit_line_items_attributes_0_item_id"
+    find(:css, '#kit_line_items_attributes_0_quantity').set(quantity_per_kit)
 
     click_button "Save"
 
@@ -86,7 +86,7 @@
     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)
+    expect(page).to have_field("kit_line_items_attributes_0_quantity", with: quantity_per_kit.to_s)
   end
 
   it "can add items correctly" do
@@ -247,7 +247,6 @@
   describe "when missing required fields" do
     it "displays error indicating missing field and preserves filled out fields" do
       visit new_kit_path
-      kit_traits = attributes_for(:kit)
 
       find(:css, '#kit_value_in_dollars').set('10.10')
 
@@ -258,13 +257,9 @@
 
       click_button "Save"
 
-      expect(page).to have_css("#kitConfirmationModal", visible: true)
-      within "#kitConfirmationModal" do
-        click_button "Yes, it's correct"
-      end
-
+      expect(page).to have_no_css("#kitConfirmationModal", visible: true)
       expect(page.find(".alert")).to have_content "Name can't be blank"
-      expect(page).to have_content(kit_traits[:quantity])
+      expect(page).to have_field("kit_line_items_attributes_0_quantity", with: quantity_per_kit.to_s)
       expect(page).to have_content(item.name)
     end
   end