Rewrite tour component

app/views/events/_nav.html.erb

@@ -11,6 +11,9 @@
       </span>
     <% end %>
   </div>
+
+  <%= render partial: "walkthrough_progress" %>
+
   <nav class="dock dock--desktop mt2 font-medium">
     <%= dock_item "Home",
                   event_path(id: @event.slug),

app/views/events/_walkthrough_progress.html.erb

@@ -0,0 +1,31 @@
+  <% steps = local_assigns[:steps] || [
+    { name: "Home", completed: true },
+    { name: "Announcements", completed: true },
+    { name: "Donations", completed: true },
+    { name: "Check deposits", completed: false }
+  ] %>
+<div data-behavior="modal_trigger" data-modal="walkthrough_modal" style="border-width:2px;border-style:solid" class="cursor-pointer flex border-gray-200 bg-white p-0 pr-3 rounded-xl -mx-2">
+  <div class="flex items-center w-full">
+    <svg width="77" height="77" viewBox="-9.625 -9.625 96.25 96.25" version="1.1" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg)">
+      <circle r="28.5" cx="38.5" cy="38.5" fill="transparent" stroke="#e0e0e0" stroke-width="10"></circle>
+      <circle r="28.5" cx="38.5" cy="38.5" stroke="#76e5b1" stroke-width="10" stroke-linecap="round" stroke-dashoffset="38px" fill="transparent" stroke-dasharray="178.98000000000002px"></circle>
+    </svg>
+    <div class="flex-1">
+      <p class="my-0 font-bold" style="line-height:1.2">
+        Make the most of HCB's features
+      </p>
+      <p class="my-0 text-sm muted">
+        <%= steps.select { |s| s[:completed] }.count %>/<%= steps.count %> completed
+      </p>
+    </div>
+      <%= inline_icon "view-forward", class: "opacity-60" %>
+  </div>
+</div>
+
+
+<section class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="walkthrough_modal">
+  <header>
+    <h3 class="text-center my-0">Welcome to <%= @event.name %>!</h3>
+    <p class="muted text-center mt-3">Make the most of HCB's features</p>
+  </header>
+</section>

db/migrate/20251012054436_create_walkthroughs.rb

@@ -0,0 +1,12 @@
+class CreateWalkthroughs < ActiveRecord::Migration[7.2]
+  def change
+    create_table :walkthroughs do |t|
+      t.timestamps
+      t.string :key, null: false
+      t.integer :progress, default: 0
+      t.references :user, null: false, foreign_key: true
+      t.references :event, null: false, foreign_key: true
+      t.index [:user_id, :event_id, :key], unique: true
+    end
+  end
+end

db/schema.rb

@@ -12,7 +12,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2025_10_05_204939) do
+ActiveRecord::Schema[7.2].define(version: 2025_10_12_054436) do
   create_schema "google_sheets"
 
   # These are extensions that must be enabled in order to support this database
@@ -1019,12 +1019,12 @@
     t.boolean "financially_frozen", default: false, null: false
     t.boolean "donation_tiers_enabled", default: false, null: false
     t.bigint "parent_id"
+    t.boolean "fee_waiver_eligible", default: false, null: false
+    t.boolean "fee_waiver_applied", default: false, null: false
     t.string "discord_guild_id"
     t.string "discord_channel_id"
     t.index ["discord_channel_id"], name: "index_events_on_discord_channel_id", unique: true
     t.index ["discord_guild_id"], name: "index_events_on_discord_guild_id", unique: true
-    t.boolean "fee_waiver_eligible", default: false, null: false
-    t.boolean "fee_waiver_applied", default: false, null: false
     t.index ["parent_id"], name: "index_events_on_parent_id"
     t.index ["point_of_contact_id"], name: "index_events_on_point_of_contact_id"
   end
@@ -2403,6 +2403,18 @@
     t.index ["uploaded_by_id"], name: "index_w9s_on_uploaded_by_id"
   end
 
+  create_table "walkthroughs", force: :cascade do |t|
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.string "key", null: false
+    t.integer "progress", default: 0
+    t.bigint "user_id", null: false
+    t.bigint "event_id", null: false
+    t.index ["event_id"], name: "index_walkthroughs_on_event_id"
+    t.index ["user_id", "event_id", "key"], name: "index_walkthroughs_on_user_id_and_event_id_and_key", unique: true
+    t.index ["user_id"], name: "index_walkthroughs_on_user_id"
+  end
+
   create_table "webauthn_credentials", force: :cascade do |t|
     t.bigint "user_id", null: false
     t.string "name"
@@ -2637,6 +2649,8 @@
   add_foreign_key "user_sessions", "users"
   add_foreign_key "user_sessions", "users", column: "impersonated_by_id"
   add_foreign_key "w9s", "users", column: "uploaded_by_id"
+  add_foreign_key "walkthroughs", "events"
+  add_foreign_key "walkthroughs", "users"
   add_foreign_key "webauthn_credentials", "users"
   add_foreign_key "wires", "events"
   add_foreign_key "wires", "users"

package.json

@@ -44,6 +44,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clsx": "^2.1.1",
     "cssnano": "^7.1.1",
+    "driver.js": "^1.3.6",
     "emoji-picker-element": "^1.27.0",
     "fuzzysort": "^3.1.0",
     "gsap": "^3.13.0",

yarn.lock

@@ -2983,6 +2983,11 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
 
+driver.js@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/driver.js/-/driver.js-1.3.6.tgz#de80839bb52aa77de2a53e9b4013210da8fc6793"
+  integrity sha512-g2nNuu+tWmPpuoyk3ffpT9vKhjPz4NrJzq6mkRDZIwXCrFhrKdDJ9TX5tJOBpvCTBrBYjgRQ17XlcQB15q4gMg==
+
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"