Switch floors from map

For comparison [see this commit][commit]

The commit above adds `active_link_to`. A gem that adds classes to links if
they share the same path with the current_url.

We can use the gem too! This commit uses a different helper from the same
library to achieve the same effect.

[commit]: seanpdoyle@1f53ca7

Gemfile

@@ -50,3 +50,4 @@ gem 'sprockets-rails', :require => 'sprockets/railtie'
 gem 'superglue', path: '/Users/johnyho/superglue/superglue_rails'
 
 gem "form_props", "~> 0.0.3"
+gem 'active_link_to'

Gemfile.lock

@@ -54,6 +54,9 @@ GEM
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    active_link_to (1.0.5)
+      actionpack
+      addressable
     activejob (7.0.8)
       activesupport (= 7.0.8)
       globalid (>= 0.3.6)
@@ -229,6 +232,7 @@ PLATFORMS
   arm64-darwin-21
 
 DEPENDENCIES
+  active_link_to
   bootsnap (>= 1.4.2)
   byebug
   capybara (>= 2.15)

app/components/Cart.js

@@ -5,9 +5,9 @@ import ButtonTo from './ButtonTo'
 
 export default class extends React.Component {
   render () {
-    const cartItems = this.props.cart.map(({rowNumber, price, removeSeatForm, id}) => (
+    const cartItems = this.props.cart.map(({description, price, removeSeatForm, id}) => (
       <tr key={id}>
-        <td> {rowNumber} </td>
+        <td> {description} </td>
         <td className="syos-table__cell--numerals"> {price} </td>
         <td className="syos-u-text-align-right">
           <ButtonTo {...removeSeatForm} className="syos-button syos-button--transparent">

app/components/FloorSwitcher.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export default class extends React.Component {
+  render() {
+    const {
+      floors,
+    } = this.props
+
+    return (
+      <nav className="syos-frame__floor-nav syos-floor-nav">
+        <div className="syos-floor-nav__header">
+          <p className="syos-u-margin-bottom-3 syos-u-font-weight-bold">
+            Floors
+          </p>
+        </div>
+
+        <div className="syos-floor-nav__diagram-wrapper">
+          <ul className="syos-block-stack">
+            {
+              floors.map(({path, name, className}) => (
+                <li className="syos-block-stack__item" key={path}>
+                  <a href={path} className={className}>{name}</a>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+      </nav>
+    )
+  }
+}

app/views/seats/_cart.json.props

@@ -1,6 +1,6 @@
 json.array! Current.cart.seats do |seat|
   json.id seat.id
-  json.row_number seat.row_number
+  json.description "#{seat.section.name}, #{seat.row_number}"
   json.price number_to_currency(seat.section.price / 100.0)
   json.removeSeatForm do
     form_props(url: seat_selection_path(seat), method: :delete)

app/views/seats/_floors.json.props

@@ -0,0 +1,7 @@
+json.array! venue.floors do |floor|
+  floor_path = venue_floor_seats_path(venue, floor)
+
+  json.path floor_path
+  json.name floor.name
+  json.class_name active_link_to_class(floor_path)
+end

app/views/seats/index.js

@@ -3,6 +3,7 @@ import SeatDialog from '../../components/SeatDialog'
 import Cart from '../../components/Cart'
 import SeatingMap from '../../components/SeatingMap'
 import SeatingLegend from '../../components/SeatingLegend'
+import FloorSwitcher from '../../components/FloorSwitcher'
 import Layout from '../../components/Layout'
 
 export default (props) => {
@@ -11,6 +12,7 @@ export default (props) => {
     sections,
     cart,
     seat,
+    floors,
   } = props
 
   return (
@@ -27,6 +29,7 @@ export default (props) => {
           className="syos-frame"
         >
           <div className="syos-frame__map">
+            <FloorSwitcher floors={floors}/>
             <SeatingLegend />
             <SeatingMap sections={sections} />
           </div>

app/views/seats/index.json.props

@@ -3,6 +3,9 @@ json.venue_name venue.name
 json.sections(partial: ['sections', locals: local_assigns]) do
 end
 
+json.floors(partial: ['floors', locals: local_assigns]) do
+end
+
 json.cart(partial: ['cart', locals: local_assigns]) do
 end
 

app/views/seats/show.json.props

@@ -3,7 +3,10 @@ json.venue_name venue.name
 json.sections(partial: ["sections", locals: local_assigns]) do
 end
 
-json.cart(partial: ["cart", locals: local_assigns]) do
+json.floors(partial: ['floors', locals: local_assigns]) do
+end
+
+json.cart(partial: ['cart', locals: local_assigns]) do
 end
 
 json.seat do

test/factories.rb

@@ -4,11 +4,18 @@
     slug { "benedum_center" }
   end
 
-  factory :orchestra, class: "Floor" do
+  factory :floor do
     association :venue, factory: [:benedum_center]
 
-    name { "Orchestra" }
-    slug { "orchestra" }
+    factory :balcony do
+      name { "Balcony" }
+      slug { "balcony" }
+    end
+
+    factory :orchestra do
+      name { "Orchestra" }
+      slug { "orchestra" }
+    end
   end
 
   factory :section do

test/system/visitor_changes_floor_test.rb

@@ -0,0 +1,23 @@
+require "application_system_test_case"
+
+class VisitorChangesFloorTest < ApplicationSystemTestCase
+  test "visiting the balcony from the orchestra" do
+    benedum_center = create(:benedum_center)
+    orchestra = create(:orchestra, venue: benedum_center)
+    balcony = create(:balcony, venue: benedum_center)
+    front = create(:section, floor: orchestra)
+    back = create(:section, floor: balcony)
+    orchestra_seat = create(:seat, section: front, row: "AA", number: "1")
+    balcony_seat = create(:seat, section: back, row: "ZZ", number: "1")
+
+    visit "/venues/benedum_center/floors/orchestra/seats"
+    click_on balcony.name
+
+    assert_selector seat_selector(balcony_seat)
+    refute_selector seat_selector(orchestra_seat)
+  end
+
+  def seat_selector(seat)
+    %{a[aria-label="#{seat.row_number}"]}
+  end
+end

test/system/visitor_selects_seat_test.rb

@@ -12,6 +12,7 @@ class VisitorSelectsSeatTest < ApplicationSystemTestCase
 
     within("#cart-summary") do
       assert_text "$10.00"
+      assert_text section.name
     end
   end
 end