Admins hear success/error sounds when adding items to a pickup for a reservation

app/controllers/admin/reservations/pending_reservation_items_controller.rb

@@ -1,16 +1,15 @@
 module Admin
   module Reservations
     class PendingReservationItemsController < BaseController
+      include Sounds
       before_action :load_pending_reservation_item
 
       # Merge into the reservation
       def update
         result = ReservationLending.add_pending_item_to_reservation(@pending_reservation_item)
         if result.success?
-          render_turbo_response(
-            turbo_stream: turbo_stream.action(:redirect,
-              admin_reservation_loans_path(@pending_reservation_item.reservation))
-          )
+          @sound_type = success_sound_path
+          render_turbo_response(:update)
         else
           render_turbo_response :error
         end
@@ -19,6 +18,7 @@ def update
       # Remove from reservation
       def destroy
         if @pending_reservation_item.destroy
+          @sound_type = removed_sound_path
           render_turbo_response :destroy
         end
       end

app/controllers/admin/reservations/reservation_loans_controller.rb

@@ -1,6 +1,7 @@
 module Admin
   module Reservations
     class ReservationLoansController < BaseController
+      include Sounds
       before_action :set_reservation_loan, only: :destroy
 
       def index
@@ -11,6 +12,7 @@ def index
       # that we're creating a ReservationLoan for an ItemPool without uniquely numbered items.
       # Otherwise, we're creating a ReservationLoan for an individual ReservableItem.
       def create
+        @sound_type = success_sound_path
         if (reservation_hold_id = reservation_loan_params[:reservation_hold_id])
           @reservation_hold = @reservation.reservation_holds.find(reservation_hold_id)
 
@@ -36,6 +38,7 @@ def create
               created_by: current_user
             )
             if pending_item.save
+              @sound_type = neutral_sound_path
               respond_to do |format|
                 format.turbo_stream
               end
@@ -56,6 +59,7 @@ def create
             format.turbo_stream
           end
         else
+          @sound_type = failure_sound_path
           render_form
         end
       end
@@ -65,6 +69,8 @@ def destroy
 
         @reservation_hold = @reservation_loan.reservation_hold
 
+        @sound_type = removed_sound_path
+
         respond_to do |format|
           format.turbo_stream do
             render :create
@@ -75,13 +81,14 @@ def destroy
       private
 
       def render_form_with_error(message)
+        @sound_type = failure_sound_path
         @reservation_loan = ReservationLoan.new
         @reservation_loan.errors.add(:reservable_item_number, message)
         render_form
       end
 
       def render_form
-        render partial: "admin/reservations/reservation_loans/form", locals: {reservation: @reservation, reservation_loan: @reservation_loan}, status: :unprocessable_entity
+        render_turbo_response :create_error, status: :unprocessable_entity
       end
 
       def set_reservation_loan

app/javascript/application.js

@@ -10,7 +10,7 @@ import { highlightElement } from './lib/highlight'
 
 ActiveStorage.start()
 
-// When we send a custom turob action of "redirect", simply go to that location.
+// When we send a custom turbo action of "redirect", simply go to that location.
 // Based on https://www.ducktypelabs.com/turbo-break-out-and-redirect/
 Turbo.StreamActions.redirect = function () {
   Turbo.visit(this.target)
@@ -20,6 +20,17 @@ Turbo.StreamActions.arrangeAppointment = function () {
   arrangeAppointment(this.target)
 }
 
+Turbo.StreamActions.playSound = function () {
+  const soundType = this.getAttribute('sound_type')
+  const audioTag = document.body.querySelector(`[src="${soundType}"]`)
+  if (audioTag) {
+    // Check to make sure fastSeek is implemented
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek#browser_compatibility
+    audioTag.fastSeek && audioTag.fastSeek(0)
+    audioTag.play()
+  }
+}
+
 document.documentElement.addEventListener('turbo:load', setupFeatherIcons)
 document.documentElement.addEventListener(
   'turbo:frame-render',

app/lib/sounds.rb

@@ -0,0 +1,20 @@
+module Sounds
+  extend self
+
+  ALL = [
+    SUCCESS = "success",
+    NEUTRAL = "neutral",
+    FAILURE = "failure",
+    REMOVED = "removed"
+  ]
+
+  ALL.each do |sound|
+    define_method(:"#{sound}_sound_path") do
+      "/sounds/#{sound}.wav"
+    end
+  end
+
+  def all_sound_paths
+    ALL.map { |sound| "/sounds/#{sound}.wav" }
+  end
+end

app/views/admin/reservations/check_ins/create.turbo_stream.erb

@@ -17,3 +17,7 @@
     <%= render partial: "admin/reservations/pending_reservation_items", formats: [:html], locals: {reservation: @reservation} %>
   </template>
 </turbo-stream>
+
+<% if @sound_type %>
+  <turbo-stream action="playSound" sound_type="<%= @sound_type %>"></turbo-stream>
+<% end %>

app/views/admin/reservations/pending_reservation_items/destroy.turbo_stream.erb

@@ -3,3 +3,7 @@
     <%= render partial: "admin/reservations/pending_reservation_items", formats: [:html], locals: {reservation: @reservation} %>
   </template>
 </turbo-stream>
+
+<% if @sound_type %>
+  <turbo-stream action="playSound" sound_type="<%= @sound_type %>"></turbo-stream>
+<% end %>

app/views/admin/reservations/pending_reservation_items/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.action(:redirect, admin_reservation_loans_path(@pending_reservation_item.reservation)) %>
+
+<% if @sound_type %>
+  <turbo-stream action="playSound" sound_type="<%= @sound_type %>"></turbo-stream>
+<% end %>

app/views/admin/reservations/reservation_loans/create.turbo_stream.erb

@@ -12,6 +12,10 @@
   </turbo-stream>
 <% end %>
 
+<% if @sound_type %>
+  <turbo-stream action="playSound" sound_type="<%= @sound_type %>"></turbo-stream>
+<% end %>
+
 <turbo-stream action="replace" target="pickup-status">
   <template>
     <%= render partial: "admin/reservations/status", formats: [:html], locals: {reservation: @reservation} %>

app/views/admin/reservations/reservation_loans/create_error.turbo_stream.erb

@@ -0,0 +1,9 @@
+<turbo-stream action="replace" target="reservation-loan-form">
+  <template>
+    <%= render partial: "admin/reservations/reservation_loans/form", formats: [:html], locals: {reservation: @reservation, reservation_loan: @reservation_loan} %>
+  </template>
+</turbo-stream>
+
+<% if @sound_type %>
+  <turbo-stream action="playSound" sound_type="<%= @sound_type %>"></turbo-stream>
+<% end %>

app/views/admin/reservations/reservation_loans/index.html.erb

@@ -28,5 +28,8 @@
       <%= render partial: "reservation_hold", locals: {reservation: @reservation, reservation_hold: reservation_hold} %>
     <% end %>
   </table>
+<% end %>
 
+<% Sounds.all_sound_paths.each do |sound_path| %>
+  <audio src="<%= sound_path %>" preload="auto"></audio>
 <% end %>