867 lines
32 KiB
TypeScript
867 lines
32 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect } from 'react';
|
|
import { CONFIG, apiFetch } from '../config';
|
|
|
|
type Page = 'home' | 'about' | 'contact' | 'login' | 'signup' | 'how-it-works' | 'pricing' | 'grow-business' | 'profile-completion' | 'confirmation' | 'dashboard' | 'forgot-password' | 'login-otp' | 'welcome-tour' | 'application-submitted';
|
|
type DashboardTab = 'overview' | 'products' | 'orders' | 'returns' | 'wallet' | 'settings' | 'barcode-generator' | 'analytics';
|
|
type DateFilter = 'year' | 'week' | 'day' | 'custom';
|
|
|
|
interface Product {
|
|
id: string;
|
|
title: string;
|
|
category: string;
|
|
price: number;
|
|
stock: number;
|
|
sku: string;
|
|
image: string;
|
|
}
|
|
|
|
interface Order {
|
|
id: string;
|
|
date: string;
|
|
item: string;
|
|
quantity: number;
|
|
customer: string;
|
|
total: number;
|
|
status: 'Ready to Ship test' | 'Ready to Ship' | 'Shipped' | 'Delivered' | 'Cancelled' | 'Pending Acceptance' | 'Rejected';
|
|
carrier: string;
|
|
tracking: string;
|
|
eta: string;
|
|
}
|
|
|
|
interface ReturnRequest {
|
|
id: string;
|
|
orderId: string;
|
|
customer: string;
|
|
item: string;
|
|
reason: string;
|
|
status: 'Pending Approval' | 'Approved' | 'Rejected' | 'In Transit';
|
|
image: string;
|
|
returningTracking: string;
|
|
}
|
|
|
|
export const SellerContext = createContext<any>(null);
|
|
|
|
export const useSeller = () => useContext(SellerContext);
|
|
|
|
export const SellerProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
|
|
const [currentPage, setCurrentPage] = useState<Page>('home')
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
const [activeTab, setActiveTab] = useState<'login' | 'register'>('login')
|
|
|
|
// Onboarding Status
|
|
const [isProfileComplete, setIsProfileComplete] = useState(false)
|
|
|
|
// Registration / Onboarding Form States
|
|
const [email, setEmail] = useState('')
|
|
const [phone, setPhone] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
|
|
// Step 1: Verification
|
|
const [phoneVerified, setPhoneVerified] = useState(false)
|
|
const [emailVerified, setEmailVerified] = useState(false)
|
|
const [phoneOtpSent, setPhoneOtpSent] = useState(false)
|
|
const [emailOtpSent, setEmailOtpSent] = useState(false)
|
|
const [enteredPhoneOtp, setEnteredPhoneOtp] = useState('')
|
|
const [enteredEmailOtp, setEnteredEmailOtp] = useState('')
|
|
|
|
// Step 2: Business details (moved GSTIN here)
|
|
const [gstin, setGstin] = useState('29AAAAA1111A1Z1')
|
|
const [isGstinVerified, setIsGstinVerified] = useState(false)
|
|
const [aadharFile, setAadharFile] = useState<string | null>(null)
|
|
const [panFile, setPanFile] = useState<string | null>(null)
|
|
const [aadharS3Key, setAadharS3Key] = useState<string | null>(null)
|
|
const [aadharUrl, setAadharUrl] = useState<string | null>(null) // New
|
|
const [panS3Key, setPanS3Key] = useState<string | null>(null)
|
|
const [panUrl, setPanUrl] = useState<string | null>(null) // New
|
|
|
|
// New onboarding customization states
|
|
const [businessType, setBusinessType] = useState<'registered_company' | 'self_help_group' | 'individual_maker'>('registered_company')
|
|
const [storeSlug, setStoreSlug] = useState('')
|
|
const [supportEmail, setSupportEmail] = useState('')
|
|
const [supportPhone, setSupportPhone] = useState('')
|
|
const [selectedCategories, setSelectedCategories] = useState<string[]>([])
|
|
|
|
// 7-step onboarding state
|
|
const [onboardingStep, setOnboardingStep] = useState<number>(1)
|
|
const [applicationId, setApplicationId] = useState<string>('TRD-' + Math.floor(100000 + Math.random() * 900000))
|
|
const [bankDetails, setBankDetails] = useState({
|
|
accountHolderName: '',
|
|
accountNumber: '',
|
|
confirmAccountNumber: '',
|
|
ifscCode: '',
|
|
bankName: '',
|
|
branchName: '',
|
|
accountType: 'Current'
|
|
})
|
|
const [pickupAddress, setPickupAddress] = useState({
|
|
buildingName: '',
|
|
street: '123 Handloom Lane',
|
|
landmark: '',
|
|
city: 'Textile Town',
|
|
state: 'Karnataka',
|
|
pincode: '560001',
|
|
contactPerson: '',
|
|
contactPhone: ''
|
|
})
|
|
const [initialProduct, setInitialProduct] = useState({
|
|
title: '',
|
|
category: 'Handloom & Textiles',
|
|
price: '',
|
|
stock: '',
|
|
description: '',
|
|
sku: '',
|
|
materials: '',
|
|
image: ''
|
|
})
|
|
|
|
// Store and Location details
|
|
const [storeName, setStoreName] = useState('My Artisan Handloom')
|
|
const [storeLogo, setStoreLogo] = useState<string | null>(null)
|
|
const [logoS3Key, setLogoS3Key] = useState<string | null>(null)
|
|
const [businessBio, setBusinessBio] = useState('Traditional weaving and local sustainable designs.')
|
|
const [address, setAddress] = useState({
|
|
street: '123 Handloom Lane',
|
|
city: 'Textile Town',
|
|
state: 'Karnataka',
|
|
pincode: '560001'
|
|
})
|
|
const [mapCoordinates, setMapCoordinates] = useState({ lat: 12.9716, lng: 77.5946 })
|
|
|
|
// --- Password visibility, confirm password and policy states ---
|
|
const [showLoginPass, setShowLoginPass] = useState(false)
|
|
const [showSignupPass, setShowSignupPass] = useState(false)
|
|
const [showSignupConfirmPass, setShowSignupConfirmPass] = useState(false)
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
const [policyAccepted, setPolicyAccepted] = useState(false)
|
|
|
|
// --- Password Reset Page States ---
|
|
const [resetEmail, setResetEmail] = useState('')
|
|
const [resetOtpSent, setResetOtpSent] = useState(false)
|
|
const [resetOtp, setResetOtp] = useState('')
|
|
const [resetPassword, setResetPassword] = useState('')
|
|
|
|
// --- OTP Login States ---
|
|
const [otpLoginPhone, setOtpLoginPhone] = useState('')
|
|
const [otpLoginSent, setOtpLoginSent] = useState(false)
|
|
const [otpLoginCode, setOtpLoginCode] = useState('')
|
|
|
|
// --- Barcode Generator States ---
|
|
const [barcodeProductSku, setBarcodeProductSku] = useState('')
|
|
const [barcodeGenerated, setBarcodeGenerated] = useState(false)
|
|
|
|
// --- Active Dashboard States ---
|
|
const [dashTab, setDashTab] = useState<DashboardTab>('overview')
|
|
const [dateFilter, setDateFilter] = useState<DateFilter>('year')
|
|
const [customDates, setCustomDates] = useState({ start: '2026-06-01', end: '2026-06-15' })
|
|
|
|
// Lists
|
|
const [products, setProducts] = useState<Product[]>([])
|
|
const [orders, setOrders] = useState<Order[]>([])
|
|
const [returns, setReturns] = useState<ReturnRequest[]>([])
|
|
|
|
// Forms & Editing
|
|
const [productForm, setProductForm] = useState({
|
|
id: '',
|
|
title: '',
|
|
category: 'Apparel',
|
|
price: 0,
|
|
stock: 0,
|
|
sku: '',
|
|
image: 'https://images.unsplash.com/photo-1544022613-e87ca75a784a?auto=format&fit=crop&q=80&w=100'
|
|
})
|
|
const [isEditingProduct, setIsEditingProduct] = useState(false)
|
|
|
|
// New Heritage UI wizard states
|
|
const [productWizardStep, setProductWizardStep] = useState<number>(0) // 0: Catalog list, 1-5: Product upload wizard steps
|
|
const [productFormDetails, setProductFormDetails] = useState({
|
|
id: '',
|
|
name: '',
|
|
category: 'Textiles & Apparel',
|
|
description: '',
|
|
isGiTagged: false,
|
|
primaryImage: 'https://images.unsplash.com/photo-1544022613-e87ca75a784a?auto=format&fit=crop&q=80&w=300',
|
|
additionalViews: [] as string[],
|
|
videoUrl: '',
|
|
view360Url: '',
|
|
basePrice: '',
|
|
compareAtPrice: '',
|
|
trackInventory: true,
|
|
sku: '',
|
|
initialStock: '',
|
|
shippingProfile: 'Standard Fragile',
|
|
processingDays: 3,
|
|
packageWeight: 1.0
|
|
})
|
|
const [selectedOrderDetail, setSelectedOrderDetail] = useState<any | null>(null)
|
|
const [orderNotes, setOrderNotes] = useState<string>('')
|
|
|
|
// Payout outstanding states
|
|
const [wallet, setWallet] = useState({
|
|
outstanding: 850.00,
|
|
withdrawn: 1250.00,
|
|
history: [
|
|
{ id: 'TX-9031', date: '2026-08-01', amount: 500.00, status: 'Transferred' },
|
|
{ id: 'TX-9022', date: '2026-07-15', amount: 750.00, status: 'Transferred' }
|
|
]
|
|
})
|
|
const [withdrawAmount, setWithdrawAmount] = useState('')
|
|
|
|
// Load data from backend on mount or when profile is complete / logged in
|
|
useEffect(() => {
|
|
const token = localStorage.getItem('access_token');
|
|
if (token) {
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/profile/`)
|
|
.then(res => {
|
|
if (res.ok) return res.json();
|
|
throw new Error('Session expired');
|
|
})
|
|
.then(user => {
|
|
if (user && user.profile) {
|
|
const profile = user.profile;
|
|
setPhone(profile.phone || '');
|
|
setPhoneVerified(profile.phone_verified || false);
|
|
setEmail(user.email || '');
|
|
setEmailVerified(profile.email_verified || false);
|
|
setGstin(profile.gstin || '29AAAAA1111A1Z1');
|
|
setIsGstinVerified(profile.is_gstin_verified || false);
|
|
setAadharFile(profile.aadhar_file || null);
|
|
setPanFile(profile.pan_file || null);
|
|
setAadharS3Key(profile.aadhar_s3_key || null);
|
|
setPanS3Key(profile.pan_s3_key || null);
|
|
setAadharUrl(profile.aadhar_url || null); // New
|
|
setPanUrl(profile.pan_url || null); // New
|
|
|
|
setBusinessType(profile.business_type || 'registered_company');
|
|
setStoreSlug(profile.store_slug || '');
|
|
setSupportEmail(profile.support_email || '');
|
|
setSupportPhone(profile.support_phone || '');
|
|
setSelectedCategories(profile.categories || []);
|
|
|
|
setStoreName(profile.store_name || 'My Artisan Handloom');
|
|
setStoreLogo(profile.store_logo || null);
|
|
setLogoS3Key(profile.logo_s3_key || null);
|
|
setBusinessBio(profile.business_bio || 'Traditional weaving and local sustainable designs.');
|
|
setAddress({
|
|
street: profile.street || '123 Handloom Lane',
|
|
city: profile.city || 'Textile Town',
|
|
state: profile.state || 'Karnataka',
|
|
pincode: profile.pincode || '560001'
|
|
});
|
|
if (profile.latitude && profile.longitude) {
|
|
setMapCoordinates({ lat: Number(profile.latitude), lng: Number(profile.longitude) });
|
|
}
|
|
|
|
const step = profile.onboarding_step;
|
|
// The onboarding flow is now just 1 step, so anything >= 2 (or 4 if we keep old backend state) means complete
|
|
if (step >= 4 || profile.is_profile_complete) {
|
|
setIsProfileComplete(true);
|
|
setCurrentPage('dashboard');
|
|
} else {
|
|
setIsProfileComplete(false);
|
|
setCurrentPage('profile-completion');
|
|
}
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Session restore failed:', err);
|
|
localStorage.removeItem('access_token')
|
|
localStorage.removeItem('refresh_token');
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isProfileComplete || currentPage === 'dashboard') {
|
|
// Fetch Products
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/products/`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (Array.isArray(data)) setProducts(data);
|
|
else if (data && Array.isArray(data.results)) setProducts(data.results);
|
|
})
|
|
.catch(err => console.error('Error fetching products:', err));
|
|
|
|
// Fetch Orders
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/orders/`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (Array.isArray(data)) setOrders(data);
|
|
else if (data && Array.isArray(data.results)) setOrders(data.results);
|
|
})
|
|
.catch(err => console.error('Error fetching orders:', err));
|
|
|
|
// Fetch Returns
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/returns/`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (Array.isArray(data)) setReturns(data);
|
|
else if (data && Array.isArray(data.results)) setReturns(data.results);
|
|
})
|
|
.catch(err => console.error('Error fetching returns:', err));
|
|
|
|
// Fetch Wallet
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/wallet/`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data) setWallet(data);
|
|
})
|
|
.catch(err => console.error('Error fetching wallet:', err));
|
|
}
|
|
}, [isProfileComplete, currentPage]);
|
|
|
|
const uploadDocument = async (file: File, fileType: string) => {
|
|
try {
|
|
const response = await apiFetch(`${CONFIG.apiBaseUrl}/api/profile/presigned-url/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ file_type: fileType, content_type: file.type })
|
|
});
|
|
if (!response.ok) throw new Error('Failed to get presigned URL');
|
|
const data = await response.json();
|
|
|
|
// Simulate file upload PUT to mock presigned_url
|
|
await fetch(data.presigned_url, {
|
|
method: 'PUT',
|
|
body: file,
|
|
headers: { 'Content-Type': file.type }
|
|
}).catch(err => console.log('Mock S3 upload:', err));
|
|
|
|
return data.s3_key;
|
|
} catch (err) {
|
|
console.error(err);
|
|
return `suppliers/default/${fileType}.jpg`;
|
|
}
|
|
};
|
|
|
|
const handleAcceptOrder = (id: string) => {
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/orders/${id}/accept/`, {
|
|
method: 'POST'
|
|
})
|
|
.then(res => res.json())
|
|
.then(updatedOrder => {
|
|
setOrders(orders.map(o => o.id === updatedOrder.id ? updatedOrder : o))
|
|
alert(`Order accepted successfully!`)
|
|
})
|
|
.catch(err => console.error(err))
|
|
}
|
|
|
|
const handleRejectOrder = (id: string) => {
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/orders/${id}/reject/`, {
|
|
method: 'POST'
|
|
})
|
|
.then(res => res.json())
|
|
.then(updatedOrder => {
|
|
setOrders(orders.map(o => o.id === updatedOrder.id ? updatedOrder : o))
|
|
alert(`Order rejected.`)
|
|
})
|
|
.catch(err => console.error(err))
|
|
}
|
|
|
|
// Bulk Upload
|
|
const [bulkLog, setBulkLog] = useState<string[]>([])
|
|
const [isParsingBulk, setIsParsingBulk] = useState(false)
|
|
const [bulkCsvFile, setBulkCsvFile] = useState<File | null>(null)
|
|
const [bulkZipFile, setBulkZipFile] = useState<File | null>(null)
|
|
|
|
// GSTIN verification simulator
|
|
const handleVerifyGstin = () => {
|
|
if (!gstin.trim() || gstin.length !== 15) {
|
|
alert('Invalid GSTIN length. Must be 15 chars.');
|
|
return;
|
|
}
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/profile/submit-gstin/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ gstin })
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('Failed to verify GSTIN.');
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
if (data.verified) {
|
|
setIsGstinVerified(true);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
alert(err.message);
|
|
});
|
|
}
|
|
|
|
// Handle Logo Upload simulation
|
|
const handleLogoChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0]
|
|
if (file) {
|
|
const reader = new FileReader()
|
|
reader.onloadend = () => {
|
|
setStoreLogo(reader.result as string)
|
|
}
|
|
reader.readAsDataURL(file)
|
|
|
|
const s3Key = await uploadDocument(file, 'logo');
|
|
setLogoS3Key(s3Key);
|
|
}
|
|
}
|
|
|
|
// Route/Navigation Guard: If profile is not complete, redirect to profile-completion
|
|
const navigateTo = (page: Page, forceComplete: boolean = false) => {
|
|
const publicPages: Page[] = ['home', 'about', 'contact', 'login', 'signup', 'forgot-password', 'login-otp']
|
|
const complete = isProfileComplete || forceComplete
|
|
|
|
if (!complete && !publicPages.includes(page) && page !== 'profile-completion') {
|
|
alert('Access Denied: Please complete your supplier profile first!')
|
|
setCurrentPage('profile-completion')
|
|
} else {
|
|
setCurrentPage(page)
|
|
}
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/auth/logout/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
})
|
|
.catch(err => console.error('Error logging out:', err))
|
|
.finally(() => {
|
|
localStorage.removeItem('access_token')
|
|
localStorage.removeItem('refresh_token')
|
|
// Reset all onboarding & profile states to their defaults
|
|
setIsProfileComplete(false)
|
|
setEmail('')
|
|
setPhone('')
|
|
setPassword('')
|
|
setConfirmPassword('')
|
|
setPolicyAccepted(false)
|
|
|
|
setPhoneVerified(false)
|
|
setEmailVerified(false)
|
|
setPhoneOtpSent(false)
|
|
setEmailOtpSent(false)
|
|
setEnteredPhoneOtp('')
|
|
setEnteredEmailOtp('')
|
|
|
|
setGstin('29AAAAA1111A1Z1')
|
|
setIsGstinVerified(false)
|
|
setAadharFile(null)
|
|
setPanFile(null)
|
|
setAadharS3Key(null)
|
|
setAadharUrl(null)
|
|
setPanS3Key(null)
|
|
setPanUrl(null)
|
|
|
|
setBusinessType('registered_company')
|
|
setStoreSlug('')
|
|
setSupportEmail('')
|
|
setSupportPhone('')
|
|
setSelectedCategories([])
|
|
|
|
setStoreName('My Artisan Handloom')
|
|
setStoreLogo(null)
|
|
setLogoS3Key(null)
|
|
setBusinessBio('Traditional weaving and local sustainable designs.')
|
|
setAddress({
|
|
street: '123 Handloom Lane',
|
|
city: 'Textile Town',
|
|
state: 'Karnataka',
|
|
pincode: '560001'
|
|
})
|
|
setMapCoordinates({ lat: 12.9716, lng: 77.5946 })
|
|
|
|
navigateTo('home', true)
|
|
})
|
|
}
|
|
|
|
|
|
const handleRegisterSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
// Email Validation
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(email)) {
|
|
alert('Please enter a valid email address.');
|
|
return;
|
|
}
|
|
|
|
// Phone Validation
|
|
const phoneRegex = /^[6-9]\d{9}$/;
|
|
if (!phoneRegex.test(phone)) {
|
|
alert('Please enter a valid 10-digit mobile number starting with 6, 7, 8, or 9.');
|
|
return;
|
|
}
|
|
|
|
// Password Validation
|
|
if (password.length < 8) {
|
|
alert('Password must be at least 8 characters long.');
|
|
return;
|
|
}
|
|
if (password !== confirmPassword) {
|
|
alert('Passwords do not match.');
|
|
return;
|
|
}
|
|
|
|
// Policy Validation
|
|
if (!policyAccepted) {
|
|
alert('You must accept the Terms of Service and Privacy Policy.');
|
|
return;
|
|
}
|
|
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/auth/register/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
username: email,
|
|
email: email,
|
|
phone: phone,
|
|
password: password,
|
|
confirm_password: confirmPassword,
|
|
policy_accepted: policyAccepted
|
|
})
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('Registration failed. Username/email might already be taken.');
|
|
return res.json();
|
|
})
|
|
.then(() => {
|
|
// Auto login after signup
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/auth/login/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: email, password: password })
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('Auto-login failed.');
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
localStorage.setItem('access_token', data.access_token);
|
|
if (data.refresh_token) localStorage.setItem('refresh_token', data.refresh_token);
|
|
navigateTo('profile-completion')
|
|
})
|
|
})
|
|
.catch(err => {
|
|
alert(err.message);
|
|
});
|
|
}
|
|
|
|
const handleLoginSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!email.trim()) {
|
|
alert('Please enter your email or phone number.');
|
|
return;
|
|
}
|
|
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/auth/login/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: email, password: password })
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('Invalid credentials.');
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
localStorage.setItem('access_token', data.access_token);
|
|
if (data.refresh_token) localStorage.setItem('refresh_token', data.refresh_token);
|
|
if (data.user && data.user.profile) {
|
|
const profile = data.user.profile;
|
|
setPhone(profile.phone || '');
|
|
setPhoneVerified(profile.phone_verified || false);
|
|
setEmail(data.user.email || '');
|
|
setEmailVerified(profile.email_verified || false);
|
|
setGstin(profile.gstin || '29AAAAA1111A1Z1');
|
|
setIsGstinVerified(profile.is_gstin_verified || false);
|
|
setAadharFile(profile.aadhar_file || null);
|
|
setPanFile(profile.pan_file || null);
|
|
setAadharS3Key(profile.aadhar_s3_key || null);
|
|
setPanS3Key(profile.pan_s3_key || null);
|
|
setAadharUrl(profile.aadhar_url || null);
|
|
setPanUrl(profile.pan_url || null);
|
|
setBusinessType(profile.business_type || 'registered_company');
|
|
setStoreSlug(profile.store_slug || '');
|
|
setSupportEmail(profile.support_email || '');
|
|
setSupportPhone(profile.support_phone || '');
|
|
setSelectedCategories(profile.categories || []);
|
|
setStoreName(profile.store_name || 'My Artisan Handloom');
|
|
setStoreLogo(profile.store_logo || null);
|
|
setLogoS3Key(profile.logo_s3_key || null);
|
|
setBusinessBio(profile.business_bio || 'Traditional weaving and local sustainable designs.');
|
|
setAddress({
|
|
street: profile.street || '123 Handloom Lane',
|
|
city: profile.city || 'Textile Town',
|
|
state: profile.state || 'Karnataka',
|
|
pincode: profile.pincode || '560001'
|
|
});
|
|
if (profile.latitude && profile.longitude) {
|
|
setMapCoordinates({ lat: Number(profile.latitude), lng: Number(profile.longitude) });
|
|
}
|
|
|
|
const step = profile.onboarding_step;
|
|
if (step >= 4 || profile.is_profile_complete) {
|
|
setIsProfileComplete(true);
|
|
navigateTo('dashboard', true);
|
|
} else {
|
|
setIsProfileComplete(false);
|
|
navigateTo('profile-completion');
|
|
}
|
|
} else {
|
|
setIsProfileComplete(false);
|
|
navigateTo('profile-completion');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
alert(err.message);
|
|
});
|
|
}
|
|
|
|
const saveProfileBackend = (isComplete: boolean) => {
|
|
return apiFetch(`${CONFIG.apiBaseUrl}/api/profile/`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
phone: phone,
|
|
phone_verified: phoneVerified,
|
|
email_verified: emailVerified,
|
|
gstin: gstin,
|
|
is_gstin_verified: isGstinVerified,
|
|
business_type: businessType,
|
|
store_slug: storeSlug,
|
|
support_email: supportEmail,
|
|
support_phone: supportPhone,
|
|
categories: selectedCategories,
|
|
aadhar_file: aadharFile,
|
|
pan_file: panFile,
|
|
aadhar_s3_key: aadharS3Key || null,
|
|
pan_s3_key: panS3Key || null,
|
|
store_name: storeName,
|
|
store_logo: storeLogo || 'https://images.unsplash.com/photo-1513519245088-0e12902e5a38?auto=format&fit=crop&q=80&w=800',
|
|
logo_s3_key: logoS3Key || null,
|
|
business_bio: businessBio,
|
|
street: address.street,
|
|
city: address.city,
|
|
state: address.state,
|
|
pincode: address.pincode,
|
|
latitude: mapCoordinates.lat,
|
|
longitude: mapCoordinates.lng,
|
|
is_profile_complete: isComplete
|
|
})
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('Failed to update profile.');
|
|
return res.json();
|
|
});
|
|
};
|
|
|
|
const handleProfileSubmit = (e?: React.FormEvent) => {
|
|
if (e && typeof e.preventDefault === 'function') {
|
|
e.preventDefault();
|
|
}
|
|
return saveProfileBackend(true)
|
|
.catch(err => {
|
|
alert(err.message);
|
|
})
|
|
};
|
|
|
|
// --- Dashboard Logic Actions ---
|
|
|
|
// Product creation/modification
|
|
const handleSaveProduct = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
const url = isEditingProduct
|
|
? `${CONFIG.apiBaseUrl}/api/products/${productForm.id}/`
|
|
: `${CONFIG.apiBaseUrl}/api/products/`
|
|
const method = isEditingProduct ? 'PUT' : 'POST'
|
|
|
|
apiFetch(url, {
|
|
method: method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
title: productForm.title,
|
|
category: productForm.category,
|
|
price: String(productForm.price),
|
|
stock: Number(productForm.stock),
|
|
sku: productForm.sku || `PROD-${Date.now().toString().slice(-6)}`,
|
|
image: productForm.image
|
|
})
|
|
})
|
|
.then(res => res.json())
|
|
.then(() => {
|
|
// Refresh products from backend
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/products/`)
|
|
.then(r => r.json())
|
|
.then(prods => {
|
|
if (Array.isArray(prods)) setProducts(prods);
|
|
else if (prods && Array.isArray(prods.results)) setProducts(prods.results);
|
|
})
|
|
setIsEditingProduct(false)
|
|
alert(isEditingProduct ? 'Product modified successfully!' : 'Product uploaded successfully!')
|
|
})
|
|
.catch(err => console.error(err))
|
|
|
|
// reset form
|
|
setProductForm({ id: '', title: '', category: 'Apparel', price: 0, stock: 0, sku: '', image: 'https://images.unsplash.com/photo-1544022613-e87ca75a784a?auto=format&fit=crop&q=80&w=100' })
|
|
}
|
|
|
|
const handleEditClick = (p: Product) => {
|
|
setProductForm(p)
|
|
setIsEditingProduct(true)
|
|
}
|
|
|
|
const handleDeleteProduct = (id: string) => {
|
|
if (confirm('Are you sure you want to delete this listing?')) {
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/products/${id}/`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(() => {
|
|
setProducts(products.filter(p => p.id !== id))
|
|
})
|
|
.catch(err => console.error(err))
|
|
}
|
|
}
|
|
|
|
const handleBulkUploadSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!bulkCsvFile) {
|
|
alert("Please select a CSV file to upload.");
|
|
return;
|
|
}
|
|
setIsParsingBulk(true);
|
|
setBulkLog(['Uploading files to server...', 'Parsing CSV data and extracting ZIP images...']);
|
|
|
|
const formData = new FormData();
|
|
formData.append('csv_file', bulkCsvFile);
|
|
if (bulkZipFile) {
|
|
formData.append('zip_file', bulkZipFile);
|
|
}
|
|
|
|
try {
|
|
const token = localStorage.getItem('access_token');
|
|
const response = await fetch(`${CONFIG.apiBaseUrl}/api/products/bulk-upload/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
...(token ? { 'Authorization': `Bearer ${token}` } : {})
|
|
},
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to complete bulk upload.');
|
|
}
|
|
|
|
setBulkLog([
|
|
'CSV file parsed successfully.',
|
|
`Extracted and matched images for SKUs from ZIP file.`,
|
|
`Successfully added ${data.products?.length || 0} product listings!`,
|
|
]);
|
|
|
|
// Refresh product list
|
|
const prodRes = await apiFetch(`${CONFIG.apiBaseUrl}/api/products/`);
|
|
const prods = await prodRes.json();
|
|
if (Array.isArray(prods)) {
|
|
setProducts(prods);
|
|
} else if (prods && Array.isArray(prods.results)) {
|
|
setProducts(prods.results);
|
|
}
|
|
setBulkCsvFile(null);
|
|
setBulkZipFile(null);
|
|
} catch (err: any) {
|
|
setBulkLog(prev => [...prev, `Error: ${err.message}`]);
|
|
} finally {
|
|
setIsParsingBulk(false);
|
|
}
|
|
};
|
|
|
|
// Wallet outstanding requests
|
|
const handleWithdrawRequest = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
const amount = Number(withdrawAmount)
|
|
if (isNaN(amount) || amount <= 0) {
|
|
alert('Please enter a valid amount')
|
|
return
|
|
}
|
|
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/wallet/withdraw/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ amount: String(amount) })
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('Insufficient funds or invalid request');
|
|
return res.json();
|
|
})
|
|
.then(updatedWallet => {
|
|
setWallet(updatedWallet)
|
|
setWithdrawAmount('')
|
|
alert(`Payout of $${amount} successfully transferred!`)
|
|
})
|
|
.catch(err => {
|
|
alert(err.message)
|
|
})
|
|
}
|
|
|
|
// Returns actions
|
|
const handleReturnAction = (id: string, action: 'Approved' | 'Rejected') => {
|
|
apiFetch(`${CONFIG.apiBaseUrl}/api/returns/${id}/action/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ action: action })
|
|
})
|
|
.then(res => res.json())
|
|
.then(updatedReturn => {
|
|
setReturns(returns.map(ret => ret.id === id ? updatedReturn : ret))
|
|
alert(`Return request ${action.toLowerCase()}!`)
|
|
})
|
|
.catch(err => console.error(err))
|
|
}
|
|
|
|
// Compute realtime metrics based on state loaded from backend
|
|
const computeRealtimeMetrics = () => {
|
|
const totalSales = orders
|
|
.filter(o => o.status !== 'Cancelled' && o.status !== 'Rejected')
|
|
.reduce((sum, o) => sum + Number(o.total), 0)
|
|
|
|
const totalEarned = Number(wallet.outstanding) + Number(wallet.withdrawn)
|
|
const totalStock = products.reduce((sum, p) => sum + Number(p.stock), 0)
|
|
const totalReturns = returns.length
|
|
|
|
const isLoggedIn = currentPage === 'dashboard' || currentPage === 'profile-completion' || currentPage === 'welcome-tour' || isProfileComplete
|
|
|
|
if (isLoggedIn) {
|
|
return {
|
|
totalSales,
|
|
totalEarned,
|
|
stockDetails: totalStock,
|
|
returnedItems: totalReturns,
|
|
chartValues: orders.length > 0
|
|
? orders.map(o => Number(o.total))
|
|
: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
}
|
|
}
|
|
|
|
return {
|
|
totalSales: 45280.00,
|
|
totalEarned: 38488.00,
|
|
stockDetails: 342,
|
|
returnedItems: 12,
|
|
chartValues: CONFIG.dashboardData.filters[dateFilter]?.chartValues || [30, 45, 35, 60, 50, 75, 65, 80, 70, 95, 90, 110]
|
|
}
|
|
}
|
|
|
|
const selectedMetrics = computeRealtimeMetrics()
|
|
|
|
|
|
|
|
const contextValue = {
|
|
setBusinessBio, email, resetPassword, setLogoS3Key, setStoreName, setShowLoginPass, storeName, otpLoginSent, setOtpLoginSent, aadharS3Key, logoS3Key, customDates, setProductFormDetails, handleBulkUploadSubmit, setMapCoordinates, setAadharFile, gstin, mapCoordinates, setIsGstinVerified, enteredPhoneOtp, address, setEmailVerified, dashTab, selectedOrderDetail, setShowSignupConfirmPass, handleRegisterSubmit, setBulkCsvFile, confirmPassword, navigateTo, setResetPassword, orderNotes, setOrders, handleRejectOrder, barcodeProductSku, setEnteredEmailOtp, setIsEditingProduct, setBulkLog, isMobileMenuOpen, resetOtp, productWizardStep, setCustomDates, setConfirmPassword, isGstinVerified, bulkCsvFile, setAddress, storeLogo, handleProfileSubmit, setPhoneOtpSent, setOrderNotes, handleDeleteProduct, setWallet, policyAccepted, emailOtpSent, setResetOtpSent, setGstin, phoneOtpSent, showLoginPass, showSignupConfirmPass, setPhoneVerified, aadharFile, setDateFilter, activeTab, computeRealtimeMetrics, setIsParsingBulk, handleLogout, panS3Key, setCurrentPage, selectedCategories, setEmailOtpSent, showSignupPass, resetEmail, handleLogoChange, dateFilter, setShowSignupPass, businessBio, setWithdrawAmount, phoneVerified, currentPage, setResetOtp, enteredEmailOtp, setEnteredPhoneOtp, setPanFile, setIsSidebarOpen, setSelectedOrderDetail, handleAcceptOrder, saveProfileBackend, supportPhone, handleEditClick, setStoreLogo, setEmail, password, setOtpLoginPhone, bulkLog, businessType, setPanS3Key, setProducts, setSupportEmail, setOtpLoginCode, withdrawAmount, handleSaveProduct, setStoreSlug, setBarcodeProductSku, setProductForm, setBulkZipFile, productFormDetails, setIsProfileComplete, otpLoginPhone, orders, setActiveTab, bulkZipFile, isSidebarOpen, setBarcodeGenerated, setBusinessType, handleReturnAction, setSupportPhone, barcodeGenerated, products, productForm, setProductWizardStep, resetOtpSent, emailVerified, panFile, isParsingBulk, setDashTab, setReturns, setPassword, handleWithdrawRequest, uploadDocument, setPolicyAccepted, isEditingProduct, setIsMobileMenuOpen, isProfileComplete, setSelectedCategories, storeSlug, phone, setPhone, setAadharS3Key, handleVerifyGstin, returns, handleLoginSubmit, setResetEmail, wallet, otpLoginCode, supportEmail, aadharUrl, setAadharUrl, panUrl, setPanUrl,
|
|
onboardingStep, setOnboardingStep, applicationId, setApplicationId, bankDetails, setBankDetails, pickupAddress, setPickupAddress, initialProduct, setInitialProduct
|
|
};
|
|
|
|
return (
|
|
<SellerContext.Provider value={contextValue}>
|
|
{children}
|
|
</SellerContext.Provider>
|
|
);
|
|
};
|