Implement import account selection form

app/views/imports/_empty.html.erb

@@ -1,7 +1,7 @@
 <div class="flex justify-center items-center py-20">
  <div class="text-center flex flex-col items-center max-w-[300px]">
  <p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".message") %></p>
- <%= link_to new_import_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+ <%= link_to new_import_path(enable_type_selector: true), class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
  <%= lucide_icon("plus", class: "w-5 h-5") %>
  <span><%= t(".new") %></span>
  <% end %>

app/views/imports/_form.html.erb

@@ -1,22 +1,7 @@
-<%= form_with(model: import, class: "contents") do |form| %>
- <% if import.errors.any? %>
- <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
- <h2><%= pluralize(import.errors.count, "error") %> prohibited this import from being saved:</h2>
-
- <ul>
- <% import.errors.each do |error| %>
- <li><%= error.full_message %></li>
- <% end %>
- </ul>
- </div>
- <% end %>
-
- <div class="my-5">
- <%= form.label :account_id %>
- <%= form.text_field :account_id, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<%= form_with model: @import do |form| %>
+ <div class="mb-4">
+ <%= form.collection_select :account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".account"), required: true } %>
  </div>
 
- <div class="inline">
- <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
- </div>
+ <%= form.submit t(".next"), class: "px-4 py-2 block w-full rounded-lg bg-gray-900 text-white text-sm font-medium" %>
 <% end %>

app/views/imports/_nav.html.erb

@@ -1,19 +1,13 @@
 <div>
- <% if import.new_record? %>
- <ul class="flex items-center gap-2 py-12">
- <%= render partial: "nav_item", locals: { name: "Select", path: new_import_path, index: 0, is_complete: true, is_current: false } %>
- <div class="h-px bg-alpha-black-200 w-12"></div>
- <%= render partial: "nav_item", locals: { name: "Import", path: new_import_path, index: 1, is_complete: true, is_current: false } %>
- <div class="h-px bg-alpha-black-200 w-12"></div>
- <%= render partial: "nav_item", locals: { name: "Setup", path: new_import_path, index: 2, is_complete: false, is_current: true } %>
- <div class="h-px bg-alpha-black-200 w-12"></div>
- <%= render partial: "nav_item", locals: { name: "Clean", path: new_import_path, index: 3, is_complete: false, is_current: false } %>
- <div class="h-px bg-alpha-black-200 w-12"></div>
- <%= render partial: "nav_item", locals: { name: "Confirm", path: new_import_path, index: 4, is_complete: false, is_current: false } %>
- </ul>
- <% else %>
- <div>
- <p>Placeholder</p>
- </div>
- <% end %>
+ <ul class="flex items-center gap-2">
+ <%= render partial: "nav_item", locals: { name: "Select", path: new_import_path, index: 0, is_complete: false, is_current: true } %>
+ <div class="h-px bg-alpha-black-200 w-12"></div>
+ <%= render partial: "nav_item", locals: { name: "Import", path: nil, index: 1, is_complete: false, is_current: false } %>
+ <div class="h-px bg-alpha-black-200 w-12"></div>
+ <%= render partial: "nav_item", locals: { name: "Setup", path: nil, index: 2, is_complete: false, is_current: false } %>
+ <div class="h-px bg-alpha-black-200 w-12"></div>
+ <%= render partial: "nav_item", locals: { name: "Clean", path: nil, index: 3, is_complete: false, is_current: false } %>
+ <div class="h-px bg-alpha-black-200 w-12"></div>
+ <%= render partial: "nav_item", locals: { name: "Confirm", path: nil, index: 4, is_complete: false, is_current: false } %>
+ </ul>
 </div>

app/views/imports/_nav_item.html.erb

@@ -1,4 +1,4 @@
-<%# locals:(name:, index:, path:, is_current:, is_complete:) %>
+<%# locals:(name:, index:, path: "#", is_current:, is_complete:) %>
 <li class="flex items-center <%= is_complete ? "text-green-600" : "text-gray-900" %>">
  <%= link_to path, class: "flex items-center gap-3" do %>
  <% if is_complete %>

app/views/imports/new.html.erb

@@ -1,18 +1,20 @@
 <%= content_for :return_to_path, return_to_path(params, imports_path) %>
 
-<%= content_for :nav do %>
- <%= render "nav", import: @import %>
-<% end %>
-
 <% if params[:enable_type_selector].present? %>
  <%= modal do %>
  <%= render "type_selector" %>
  <% end %>
 <% end %>
 
-<div class="mx-auto md:w-2/3 w-full">
- <h1 class="sr-only">New import</h1>
+<%= content_for :nav do %>
+ <%= render "nav", import: @import %>
+<% end %>
 
+<div class="mx-auto max-w-[400px] w-full py-56">
+ <h1 class="sr-only">New import</h1>
+ <div class="space-y-2 mb-6 text-center">
+ <p class="text-3xl font-medium text-gray-900"><%= t(".header_text") %></p>
+ <p class="text-gray-500 text-sm"><%= t(".description_text") %></p>
+ </div>
  <%= render "form", import: @import %>
-
 </div>

app/views/imports/steps/load.html.erb

@@ -1,4 +1,3 @@
 <div>
- <h1 class="font-bold text-4xl">Imports::Steps#load-data</h1>
- <p>Find me in app/views/imports/steps/load-data.html.erb</p>
+ <h1 class="sr-only">Load import</h1>
 </div>

app/views/layouts/imports.html.erb

@@ -1,12 +1,14 @@
 <%= content_for :content do %>
- <div class="flex items-center justify-between">
+ <div class="flex items-center justify-between p-8">
  <%= link_to root_path do %>
  <%= image_tag "logo.svg", alt: "Maybe", class: "h-[22px]" %>
  <% end %>
  <nav>
  <%= content_for :nav %>
  </nav>
- <%= link_to "Back", content_for(:return_to_path) %>
+ <%= link_to content_for(:return_to_path) do %>
+ <%= lucide_icon("x", class: "text-gray-500 w-5 h-5") %>
+ <% end %>
  </div>
 
  <%= yield %>

config/locales/views/imports/en.yml

@@ -4,6 +4,10 @@ en:
  empty:
  message: No imports to show
  new: New Import
+ form:
+ account: Account
+ next: Next
+ select_account: Select account
  import:
  delete: Delete
  edit: Edit
@@ -12,6 +16,10 @@ en:
  imports: Imports
  new: New import
  title: Imports
+ new:
+ description_text: Importing transactions can only be done for one account at
+ a time. You will need to go through this process again for other accounts.
+ header_text: Select the account your transactions will belong to
  type_selector:
  description: You can manually import transactions from CSVs or from other financial
  apps like Mint, Empower (formerly Personal Capital) or Apple Card.

test/system/imports_test.rb

@@ -19,6 +19,14 @@ class ImportsTest < ApplicationSystemTestCase
  end
 
  assert_selector "h1", text: "New import"
+
+ within "form" do
+ select "Checking Account", from: "import_account_id"
+ end
+
+ click_button "Next"
+
+ assert_selector "h1", text: "Load import"
  end
 
  private