complete onboarding UX v2
Some checks failed
deploy / deploy (push) Has been cancelled

Tasks C, H, I from the plan:

- Forgiving API key validation: add Printify UUID format and Printful
  length validation, validate on blur for fast feedback, helpful error
  messages with specific guidance

- External links UX: verified all external links use <.external_link>
  component with target="_blank", rel="noopener noreferrer", icon, and
  screen reader text

- Input styling WCAG compliance: increase input border contrast from
  ~3.3:1 to ~4.5-5:1 across all theme moods (neutral, warm, cool, dark)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-10 07:56:54 +00:00
parent 951147a675
commit 2282af91db
15 changed files with 1034 additions and 153 deletions

View File

@@ -28,9 +28,9 @@ defmodule BerrypodWeb.Admin.DashboardTest do
assert html =~ "Launch checklist"
assert html =~ "Connect a print provider"
assert html =~ "Connect Stripe"
assert html =~ "Sync your products"
assert html =~ "Customise your theme"
assert html =~ "Connect Stripe for payments"
assert html =~ "Import products"
assert html =~ "Customise your shop"
assert html =~ "Go live"
end
@@ -43,16 +43,16 @@ defmodule BerrypodWeb.Admin.DashboardTest do
test "collapse and expand checklist", %{conn: conn} do
{:ok, view, html} = live(conn, ~p"/admin")
assert html =~ "Sync your products"
assert html =~ "Import products"
# Collapse
html = render_click(view, "toggle_checklist")
refute html =~ "Sync your products"
refute html =~ "Import products"
assert html =~ "Launch checklist"
# Expand
html = render_click(view, "toggle_checklist")
assert html =~ "Sync your products"
assert html =~ "Import products"
end
test "go live button works", %{conn: conn} do

View File

@@ -174,11 +174,14 @@ defmodule BerrypodWeb.Admin.ProvidersTest do
{:ok, view, _html} = live(conn, ~p"/admin/providers/new")
# Printify uses 36-character UUID format keys
valid_uuid_key = "12345678-1234-1234-1234-123456789012"
{:ok, _view, html} =
view
|> form("#provider-form", %{
"provider_connection" => %{
"api_key" => "test_key_123"
"api_key" => valid_uuid_key
}
})
|> render_submit()

View File

@@ -57,12 +57,13 @@ defmodule BerrypodWeb.Setup.OnboardingTest do
end
describe "fresh install (no admin)" do
test "shows all three cards with email form active", %{conn: conn} do
test "shows only account card (simplified setup)", %{conn: conn} do
{:ok, _view, html} = live(conn, ~p"/setup")
assert html =~ "Set up your account"
assert html =~ "Connect a print provider"
assert html =~ "Connect payments"
# Provider and Stripe cards are hidden until after account creation
refute html =~ "Connect a print provider"
refute html =~ "Connect payments"
end
test "creating account auto-confirms and redirects to login", %{conn: conn} do
@@ -73,7 +74,8 @@ defmodule BerrypodWeb.Setup.OnboardingTest do
account: %{
shop_name: "Test Shop",
email: "admin@example.com",
password: "valid_password_123"
password: "valid_password_123",
password_confirmation: "valid_password_123"
}
)
|> render_submit()
@@ -87,26 +89,31 @@ defmodule BerrypodWeb.Setup.OnboardingTest do
describe "configure (logged in)" do
setup :register_and_log_in_user
test "shows provider and stripe steps", %{conn: conn, user: user} do
test "shows guided setup flow", %{conn: conn} do
{:ok, _view, html} = live(conn, ~p"/setup")
assert html =~ user.email
assert html =~ "Connect a print provider"
assert html =~ "Connect payments"
# Guided flow shows progress bar
assert html =~ "Setup progress"
# Shows one of the setup steps or intro
assert html =~ "Connect" or html =~ "Let's get started"
end
test "shows provider cards", %{conn: conn} do
{:ok, _view, html} = live(conn, ~p"/setup")
test "clicking start shows provider step", %{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/setup")
html = render_click(view, "start_setup")
assert html =~ "Connect a print provider"
assert html =~ "Printify"
assert html =~ "Printful"
assert html =~ "Gelato"
assert html =~ "Coming soon"
end
test "selecting a provider shows the API key form", %{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/setup")
# First go to provider step
render_click(view, "start_setup")
html =
view
|> form(~s(form[phx-change="select_provider"]), %{provider_select: %{type: "printify"}})
@@ -116,11 +123,15 @@ defmodule BerrypodWeb.Setup.OnboardingTest do
assert html =~ "Printify"
end
test "shows stripe form", %{conn: conn} do
{:ok, _view, html} = live(conn, ~p"/setup")
test "skipping provider step shows stripe step", %{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/setup")
# Start and skip provider
render_click(view, "start_setup")
html = render_click(view, "skip_step")
assert html =~ "Secret key"
assert html =~ "Connect payments"
assert html =~ "Connect Stripe"
end
end