Fixing tooltip popovers and adding donations to the ticket request form (not charging yet)

.rubocop.yml

@@ -22,6 +22,9 @@ Metrics/ClassLength:
 Metrics/ModuleLength:
   Enabled: false
 
+Metrics/AbcSize:
+  Enabled: false
+
 Layout/HashAlignment:
   Enabled: true
   EnforcedColonStyle: table

.rubocop_todo.yml

@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config`
-# on 2024-05-20 17:20:36 UTC using RuboCop version 1.63.5.
+# on 2024-05-20 21:02:26 UTC using RuboCop version 1.63.5.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
@@ -16,11 +16,6 @@ Lint/UnmodifiedReduceAccumulator:
   Exclude:
     - 'app/helpers/shifts_helper.rb'
 
-# Offense count: 36
-# Configuration parameters: AllowedMethods, AllowedPatterns, CountRepeatedAttributes.
-Metrics/AbcSize:
-  Max: 65
-
 # Offense count: 6
 # Configuration parameters: CountComments, CountAsOne, AllowedMethods, AllowedPatterns, inherit_mode.
 # AllowedMethods: refine
@@ -35,7 +30,7 @@ Metrics/CyclomaticComplexity:
 # Offense count: 50
 # Configuration parameters: CountComments, CountAsOne, AllowedMethods, AllowedPatterns.
 Metrics/MethodLength:
-  Max: 58
+  Max: 60
 
 # Offense count: 10
 # Configuration parameters: AllowedMethods, AllowedPatterns.
@@ -217,9 +212,9 @@ Style/GuardClause:
     - 'app/controllers/ticket_requests_controller.rb'
     - 'app/models/event.rb'
 
-# Offense count: 25
+# Offense count: 27
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: AllowHeredoc, AllowURI, URISchemes, IgnoreCopDirectives, AllowedPatterns.
 # URISchemes: http, https
 Layout/LineLength:
-  Max: 154
+  Max: 252

app/assets/stylesheets/application.bootstrap.scss

@@ -24,3 +24,10 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
 // via yarn run build:css:index
 @import './site/_index.css.scss';
 
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/tooltip";
+
+// .popover{:role => "tooltip"}
+//  .arrow
+//  %h3.popover-header
+//  .popover-body

app/assets/stylesheets/site/_index.css.scss

@@ -9,6 +9,7 @@
 @import "links.css.scss";
 @import "nav.css.scss";
 @import "payments.css.scss";
+@import "popovers.css.scss";
 @import "shifts.css.scss";
 @import "time_slots.css.scss";
 @import "width_0000_0600.css.scss";

app/assets/stylesheets/site/events.css.scss

@@ -60,7 +60,6 @@ table.event-summary {
 td.ticket-user {
   a {
     line-height: 0.7;
-    white-space: nowrap;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.1em;

app/assets/stylesheets/site/fonts.css.scss

@@ -23,3 +23,22 @@
   font-weight: 400;
   font-style: normal;
 }
+
+@mixin dosis-popover {
+  font-family: "Dosis", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  color: $dark-text-emphasis;
+  font-size: 0.9em;
+}
+
+@mixin dosis-popover-header {
+  font-family: "Oswald", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  color: $dark-text-emphasis;
+  font-size: 1.1em;
+}
+

app/assets/stylesheets/site/global.css.scss

@@ -71,7 +71,11 @@ legend {
 }
 
 label.strong {
-  font-weight: 800;
+  font-weight: 500;
+}
+
+strong {
+  font-weight: 600;
 }
 
 .event-row {
@@ -179,3 +183,7 @@ body {
 img.hover-tooltip {
   cursor: pointer;
 }
+
+tr.ticket-request-row td {
+  background-color: #eee !important;
+}

app/assets/stylesheets/site/popovers.css.scss

@@ -0,0 +1,42 @@
+@import "fonts.css.scss";
+
+.popover {
+  padding: 20px !important;
+
+  h3.popover-header {
+    text-shadow: none;
+    background-color: transparent;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 10px;
+    @include dosis-popover-header;
+  }
+
+  .popover-body {
+    @include dosis-popover;
+    padding: 0;
+    font-size: 0.9em;
+  }
+}
+
+body {
+  .tooltip-box {
+    margin-left: 10px;
+    opacity: 0.9;
+    cursor: pointer;
+
+    background-color: #64d84b !important;
+    color: #fff !important;
+    padding: 5px;
+    border-radius: 5px;
+
+    &:focus, &:active, &:hover {
+      color: black !important;
+      background-color: #2cf002 !important;
+    }
+
+    &:visited {
+      background-color: #3b9627 !important;
+    }
+  }
+}

app/assets/stylesheets/site/width_0900_1500.css.scss

@@ -22,7 +22,7 @@
     td.ticket-user {
       a {
         font-size: 0.9em;
-        white-space: nowrap;
+        white-space: wrap;
       }
     }
   }

app/controllers/ticket_requests_controller.rb

@@ -106,7 +106,7 @@ def create
     end
 
     tr_params = permitted_params[:ticket_request].to_h || {}
-
+    tr_params[:donation] = 0 unless tr_params[:donation].present? && tr_params[:donation] =~ /^[\d.]+$/
     if tr_params.empty?
       flash.now[:error] = 'Please fill out the form below to request tickets.'
       return render_flash(flash)
@@ -158,6 +158,8 @@ def update
              .flatten.map(&:presence)
              .compact
 
+    ticket_request_params[:donation] = 0 unless ticket_request_params[:donation].present? && ticket_request_params[:donation] =~ /^[\d.]+$/
+
     ticket_request_params.delete(:guest_list)
     ticket_request_params[:guests] = guests
 

app/helpers/application_helper.rb

@@ -8,12 +8,18 @@ def datetimepicker(name, datetime)
     end
   end
 
-  def help_mark(help_text, options = {})
-    extra_classes = options[:class] || ''
-    content_tag :a, class: "help-popover help-inline #{extra_classes}",
-                data:      { placement: 'right', content: help_text } do
-      content_tag :i, nil, class: 'icon-question-sign'
-    end
+  def tooltip_box(content, title: nil, **options, &block)
+    css_class = 'tooltip-box ' unless block
+    css_class += options[:class] if options[:class]
+    block ||= proc { content_tag :strong, nil, class: 'bi bi-question-square' }
+
+    content_tag(:a,
+                tabindex: 0,
+                role:     'button',
+                class:    css_class,
+                title:,
+                data:     { 'bs-toggle': 'popover', 'bs-content': content, 'bs-trigger': 'focus', 'bs-placement': 'right' },
+                &block)
   end
 
   def alert_class(alert_type)

app/helpers/ticket_requests_helper.rb

@@ -4,9 +4,9 @@ module TicketRequestsHelper
   def class_for_table_row(ticket_request)
     case ticket_request.status
     when 'P'
-      'warning'
+      'bg-warning'
     when 'A'
-      ticket_request.payment ? 'info' : 'success'
+      ticket_request.payment ? 'bg-info' : 'bg-success'
     end
   end
 
@@ -86,15 +86,8 @@ def help_text_for(sym)
       # HACK: This copy is specific for TicketBooth--we'll have to add a
       # customization so that this can be set on a per-event basis
       <<-HELP
-      The cost of tickets for children will be dependent on how many you bring.
-      Unfortunately, kids count against our limit capacity with our contract
-      at the site.  As much as we would like to allow kids in for free, we
-      simply cannot afford it. However, we know we start excluding families
-      from attending if we charge too much for kids to attend, and so we've
-      attempted to create a pricing model that is reasonable and well-balanced.
-      If anyone needs further assistance, check the financial assistance
-      checkbox below, and give us a brief explanation of what your needs are.
-      We'll do our best to work with you to figure something out.
+      Kids 12 and under are free. They do need to be registered with name and age on the
+      ticket request form. Reach out to [email protected] if you have any questions.
       HELP
     when :cabins
       <<-HELP

app/javascript/controllers/popovers_controller.js

@@ -1,8 +1,14 @@
 import { Controller } from "@hotwired/stimulus"
-import TicketsRequestController from "./tickets_request_controller";
 
 // Connects to data-controller="popovers"
 export default class PopoversController extends Controller {
   connect() {
+    const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+    const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl)
+    });
+    // $(function () {
+    //   $('[data-toggle="popover"]').popover({container: 'body'})
+    // })
   }
 }

app/javascript/init_bootstrap.js

@@ -1,6 +1,6 @@
 
 
-import "bootstrap/dist/js/bootstrap";
+import "bootstrap/dist/js/bootstrap.bundle.min";
 
 import * as bootstrap from "bootstrap";
 

app/views/eald_payments/_form.html.haml

@@ -57,7 +57,7 @@
         = number_to_currency(extra)
       processing fee
       to the card entered above.
-      = help_mark 'This fee covers the the fees charged by our credit card processor, Stripe.'
+      = tooltip_box 'This fee covers the the fees charged by our credit card processor, Stripe.'
 
   %p
     Early Arrival / Late Departure passes are

app/views/ticket_requests/_form.html.haml

@@ -2,7 +2,6 @@
 - is_update = form_action_name == :update
 
 %div{"data-controller": "tickets-request"}
-
   .card
     .card-header.bg-dark-subtle
       - unless is_update && [email protected]?(current_user)
@@ -26,7 +25,7 @@
         = turbo_frame_tag :turbo_register do
           = render partial: "devise/shared/register", layout: false, locals: { resource: User.new, resource_name: devise_mapping.name, existing: false, redirect_to: new_event_ticket_request_url(@event) }
 
-      #ticket-request-form
+      #ticket-request-form{"data-controller": "popovers"}
         - if !(signed_in? && @user)
         - else
           = form_for @ticket_request,
@@ -154,7 +153,7 @@
 
                     = f.label :kids do
                       Number of children (12 and under) you are bringing with you (not transferable to adults; babes in arms are free)
-                      = help_mark help_text_for(:kids)
+                      = tooltip_box help_text_for(:kids), title: "Bringing Kids to FnF"
 
                     = f.number_field :kids, class: 'input-mini', min: 0,
                       max: @event.max_kid_tickets_per_request,
@@ -164,7 +163,6 @@
                     %span.help-inline.inline-price
                     %p.help-inline-block.muted
 
-
                     - unless is_update
                       .card.bg-warning-subtle.mb-3{:style => "max-width: 100%;"}
                         .card-body.bg-success-subtle.text-dark.pt-1
@@ -177,7 +175,7 @@
 
                     = f.label :cabins do
                       How many cabins did you want?
-                      = help_mark help_text_for(:cabins)
+                      = tooltip_box help_text_for(:cabins)
 
                     = f.number_field :cabins, class: 'input-mini', min: 0,
                       max: @event.max_cabins_per_request,
@@ -195,15 +193,23 @@
                   = f.label :needs_assistance, class: 'checkbox' do
                     = f.check_box :needs_assistance
                     I’m requesting financial assistance with purchasing my ticket(s)
-                    = help_mark help_text_for(:needs_assistance)
+                    = tooltip_box help_text_for(:needs_assistance), title: "Financial Assistance"
+
+                .control-group
+
+                - if @event.allow_donations
+                  %br
+                  = f.label :donation, 'Your Donation'
+                  = f.number_field :donation, class: 'input-mini', min: 0, required: false
+                  = tooltip_box "Your donation is optional, but would be greatly appreciated!"
 
                 .control-group
 
                 - if @event.require_mailing_address
                   %fieldset
                     = f.label :address_line1, class: 'required-label' do
                       Address1
-                      = help_mark help_text_for(:address)
+                      = tooltip_box help_text_for(:address)
                     = f.text_field :address_line1, required: true, placeholder: 'Street address, P.O. box, etc.', maxlength: 200
                     = f.label :address_line2 do
                       Address2
@@ -256,7 +262,7 @@
                              id: 'submit-request',
                              data: { disable_with: 'Submitting...' }
                   - if @ticket_request && @ticket_request.id
-                    = link_to event_ticket_request_path(event_id: @event.id, id: @ticket_request&.id), method: :get, class: 'btn btn-large btn-danger' do
-                      Back
+                    = link_to event_ticket_request_path(event_id: @event.id, id: @ticket_request&.id), method: :get, class: 'btn btn-large btn-secondary' do
+                      View Request