e49a0d1e3d
✨ Features: - Store Details page with live currency preview - Payments page with visual provider cards and test mode - Shipping & Delivery page with zone cards and local pickup - Shared components: SettingsLayout, SettingsCard, SettingsSection, ToggleField 🎨 UI/UX: - Card-based layouts (not boring forms) - Generous whitespace and visual hierarchy - Toast notifications using sonner (reused from Orders) - Sticky save button at top - Mobile-responsive design 🔧 Technical: - Installed ESLint with TypeScript support - Fixed all lint errors (0 errors) - Phase 1 files have zero warnings - Used existing toast from sonner (not reinvented) - Updated routes in App.tsx 📝 Files Created: - Store.tsx (currency preview, address, timezone) - Payments.tsx (provider cards, manual methods) - Shipping.tsx (zone cards, rates, local pickup) - SettingsLayout.tsx, SettingsCard.tsx, SettingsSection.tsx, ToggleField.tsx Phase 1 complete: 18-24 hours estimated work
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Database, DatabaseZap } from 'lucide-react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { useDummyDataToggle } from '@/lib/useDummyData';
|
|
import { useDashboardContext } from '@/contexts/DashboardContext';
|
|
import { __ } from '@/lib/i18n';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
/**
|
|
* Dummy Data Toggle Button
|
|
* Shows in development mode to toggle between real and dummy data
|
|
* Uses Dashboard context when on dashboard pages
|
|
*/
|
|
export function DummyDataToggle() {
|
|
const location = useLocation();
|
|
const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');
|
|
|
|
// Always call hooks unconditionally
|
|
const dashboardContext = useDashboardContext();
|
|
const localToggle = useDummyDataToggle();
|
|
|
|
// Use dashboard context for dashboard routes, otherwise use local state
|
|
const useDummyData = isDashboardRoute ? dashboardContext.useDummyData : localToggle.useDummyData;
|
|
const toggleDummyData = isDashboardRoute
|
|
? () => dashboardContext.setUseDummyData(!dashboardContext.useDummyData)
|
|
: localToggle.toggleDummyData;
|
|
|
|
// Only show in development (always show for now until we have real data)
|
|
// const isDev = import.meta.env?.DEV;
|
|
// if (!isDev) return null;
|
|
|
|
return (
|
|
<Button
|
|
variant={useDummyData ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={toggleDummyData}
|
|
className="gap-2"
|
|
title={useDummyData ? __('Using dummy data') : __('Using real data')}
|
|
>
|
|
{useDummyData ? (
|
|
<>
|
|
<DatabaseZap className="w-4 h-4" />
|
|
<span className="hidden sm:inline">{__('Dummy Data')}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Database className="w-4 h-4" />
|
|
<span className="hidden sm:inline">{__('Real Data')}</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|