barsa 90fa9443d4 Enhance Authentication Flow in Catalog Views

- Added redirect functionality to the LoginForm component, allowing for dynamic redirection after login.
- Updated PublicInternetConfigure and PublicSimConfigure views to utilize modals for user authentication, improving user experience by avoiding full-page redirects.
- Enhanced PublicInternetPlans and PublicSimPlans views with updated button labels for clarity and consistency.
- Refactored plan configuration views to display detailed plan information and prompt users for account creation or login, streamlining the onboarding process.

2025-12-19 16:33:53 +09:00

3.4 KiB

Raw Blame History

Shop Experience UX Improvements

Overview

The shop experience has been significantly improved to be more user-friendly and less disruptive. Instead of redirecting users to a full signup page when they want to configure a plan, we now show plan context and use a modal for authentication.

Key Improvements

1. AuthModal Component ✨

Location: apps/portal/src/features/auth/components/AuthModal/
Purpose: Reusable modal component for signup/login that doesn't break the shopping flow
Features:
- Overlay design that keeps users in context
- Toggle between signup and login modes
- Automatic redirect after successful authentication
- Customizable title and description
- Responsive design

2. Improved Configure Pages

Both PublicInternetConfigureView and PublicSimConfigureView now:

Show plan information before requiring authentication
- Plan name, description, pricing
- Plan features and badges
- Visual plan summary card
Use modal authentication instead of full-page redirects
- Users stay on the configure page
- Can see what they're signing up for
- Better context preservation
Better loading and error states
- Skeleton loaders while fetching plan data
- Clear error messages if plan not found

3. Improved Plan Card CTAs

Changed button labels from "Create account" to "Get started" (more inviting)
Plan cards now link to configure pages instead of directly to signup
Configure pages show plan context before requiring auth

4. Better User Flow

Before:

User browses plans
Clicks "Create account" → Redirected to full signup page
Loses context of what plan they selected
Must navigate back after signup

After:

User browses plans
Clicks "Get started" → Goes to configure page
Sees plan details and context
Clicks "Create account" → Modal opens
Completes signup/login in modal
Automatically redirected to authenticated configure page
Never loses context

Technical Details

Components Created

AuthModal - Reusable authentication modal
Updated PublicInternetConfigureView - Shows plan context with modal auth
Updated PublicSimConfigureView - Shows plan context with modal auth

Components Updated

LoginForm - Added redirectTo prop for modal usage
PublicInternetPlans - Improved CTAs and redirects
PublicSimPlans - Improved CTAs and redirects

Key Features

Context Preservation: Users always see what plan they're configuring
Progressive Disclosure: Plan details shown before requiring authentication
Non-Blocking: Modal can be closed to continue browsing
Seamless Flow: Automatic redirect after authentication maintains user intent

Benefits

Better UX: Users don't lose context when authenticating
Higher Conversion: Less friction in the signup process
Clearer Intent: Users see what they're signing up for
Professional Feel: Modal-based auth feels more modern
Flexible: Easy to reuse AuthModal in other parts of the app

Future Enhancements

Potential improvements for the future:

Add "Continue as guest" option (if business logic allows)
Show more plan details before auth (pricing breakdown, installation options)
Add plan comparison before auth
Remember selected plan in localStorage for returning visitors
Add social login options in the modal

3.4 KiB Raw Blame History