feat: align Step 2 Business & GST page, stepper labels, and brand footer with Stitch design
This commit is contained in:
parent
bb7259f7f6
commit
1472618680
5 changed files with 422 additions and 207 deletions
|
|
@ -8,6 +8,7 @@ import PricingPage from './components/pages/PricingPage';
|
|||
import GrowBusinessPage from './components/pages/GrowBusinessPage';
|
||||
import AboutPage from './components/pages/AboutPage';
|
||||
import ContactPage from './components/pages/ContactPage';
|
||||
import LoginPage from './components/pages/LoginPage';
|
||||
import AuthForms from './components/pages/AuthForms';
|
||||
import OnboardingWizard from './components/pages/OnboardingWizard';
|
||||
import DashboardLayout from './components/dashboard/DashboardLayout';
|
||||
|
|
@ -30,10 +31,11 @@ function AppRouter() {
|
|||
{currentPage === 'how-it-works' && <HowItWorksPage />}
|
||||
{currentPage === 'pricing' && <PricingPage />}
|
||||
{currentPage === 'grow-business' && <GrowBusinessPage />}
|
||||
{currentPage === 'signup' && <AuthForms />}
|
||||
{currentPage === 'profile-completion' && <OnboardingWizard />}
|
||||
{currentPage === 'about' && <AboutPage />}
|
||||
{currentPage === 'contact' && <ContactPage />}
|
||||
{(currentPage === 'login' || currentPage === 'signup') && <AuthForms />}
|
||||
{currentPage === 'login' && <LoginPage />}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,122 +10,81 @@ export default function Footer() {
|
|||
};
|
||||
|
||||
return (
|
||||
<footer className="trad-footer py-6 px-4" style={{ backgroundColor: 'var(--trad-footer-bg)', color: '#ffffff', borderTop: '1px solid #5a1420' }}>
|
||||
<footer className="custom-footer" style={{ backgroundColor: '#791B2C', color: '#ffffff', padding: '3.5rem 2rem 2rem 2rem' }}>
|
||||
<div className="container is-max-widescreen">
|
||||
<div className="columns is-variable is-6">
|
||||
{/* Brand & Mission */}
|
||||
<div className="column is-4 trad-footer-brand">
|
||||
<h4 className="font-serif-trad" style={{ color: '#ffffff', fontSize: '1.65rem', fontWeight: 800, letterSpacing: '0.04em', marginBottom: '0.35rem' }}>
|
||||
<div className="columns is-multiline">
|
||||
{/* Brand Column */}
|
||||
<div className="column is-4-widescreen is-12-mobile mb-4">
|
||||
<div className="footer-brand-title" style={{ color: '#ffffff', fontSize: '1.35rem', fontWeight: 800, letterSpacing: '0.5px', marginBottom: '0.4rem' }}>
|
||||
TRADHOX
|
||||
</h4>
|
||||
<p style={{ color: '#f5d5d8', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 700, marginBottom: '1rem' }}>
|
||||
FROM MAKERS TO THE WORLD.
|
||||
</p>
|
||||
<p style={{ color: '#e5e2e1', fontSize: '0.9rem', lineHeight: 1.65, maxWidth: '340px' }}>
|
||||
Empowering verified Indian craftsmanship and creative makers with seamless nationwide commerce, transparent weekly payouts, and cultural storytelling.
|
||||
</p>
|
||||
<div className="is-flex is-align-items-center mt-4" style={{ gap: '1rem' }}>
|
||||
<span className="tag is-dark is-rounded" style={{ backgroundColor: '#57131e', color: '#ffdee2', fontSize: '0.75rem' }}>
|
||||
<i className="fa-solid fa-shield-halved mr-1"></i> AEO & GI Verified
|
||||
</span>
|
||||
<span className="tag is-dark is-rounded" style={{ backgroundColor: '#57131e', color: '#ffdee2', fontSize: '0.75rem' }}>
|
||||
<i className="fa-solid fa-truck-fast mr-1"></i> 15,000+ Pincodes
|
||||
</span>
|
||||
</div>
|
||||
<div className="footer-brand-subtitle" style={{ fontSize: '0.76rem', letterSpacing: '1.2px', textTransform: 'uppercase', color: '#E2D3D5', fontWeight: 700, marginBottom: '0.85rem' }}>
|
||||
FROM MAKERS TO THE WORLD.
|
||||
</div>
|
||||
<p className="footer-brand-desc" style={{ fontSize: '0.83rem', lineHeight: 1.55, color: '#D9C9CB', maxWidth: '340px' }}>
|
||||
Empowering verified Indian craftsmanship and creative makers with seamless nationwide commerce, transparent payouts, and cultural storytelling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="column is-2 is-offset-1">
|
||||
<h5 style={{ color: '#ffffff', fontSize: '0.8rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: '1.25rem' }}>
|
||||
Quick Links
|
||||
</h5>
|
||||
<ul style={{ listStyle: 'none', paddingLeft: 0, margin: 0 }}>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('home')}>Home</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('how-it-works')}>How it works</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('pricing')}>Pricing & Fees</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('grow-business')}>Grow your business</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('signup')}>Register as Seller</a>
|
||||
</li>
|
||||
<div className="column is-2-widescreen is-6-mobile mb-4">
|
||||
<div className="footer-col-header" style={{ color: '#ffffff', fontSize: '0.84rem', fontWeight: 700, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
||||
Quick links
|
||||
</div>
|
||||
<ul className="footer-links-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
<li className="mb-2"><a onClick={() => handleNav('how-it-works')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>How it works</a></li>
|
||||
<li className="mb-2"><a onClick={() => handleNav('pricing')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>Pricing</a></li>
|
||||
<li className="mb-2"><a onClick={() => handleNav('signup')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>Register</a></li>
|
||||
<li className="mb-2"><a onClick={() => handleNav('grow-business')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>Grow your business</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Seller Support */}
|
||||
<div className="column is-2">
|
||||
<h5 style={{ color: '#ffffff', fontSize: '0.8rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: '1.25rem' }}>
|
||||
Support & Trust
|
||||
</h5>
|
||||
<ul style={{ listStyle: 'none', paddingLeft: 0, margin: 0 }}>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('contact')}>Artisan Help Desk</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('about')}>About TRADHOX</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" href="#logistics">Logistics Guidelines</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" href="#gi-tag">GI Craft Certification</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a className="trad-footer-link" onClick={() => handleNav('login')}>Seller Login</a>
|
||||
</li>
|
||||
{/* Company */}
|
||||
<div className="column is-2-widescreen is-6-mobile mb-4">
|
||||
<div className="footer-col-header" style={{ color: '#ffffff', fontSize: '0.84rem', fontWeight: 700, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
||||
Company
|
||||
</div>
|
||||
<ul className="footer-links-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
<li className="mb-2"><a onClick={() => handleNav('about')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>About</a></li>
|
||||
<li className="mb-2"><a onClick={() => handleNav('contact')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>Contact</a></li>
|
||||
<li className="mb-2"><a onClick={() => handleNav('grow-business')} style={{ color: '#E0D2D4', cursor: 'pointer', fontSize: '0.85rem' }}>Grow your business</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact & Hours */}
|
||||
<div className="column is-3">
|
||||
<h5 style={{ color: '#ffffff', fontSize: '0.8rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: '1.25rem' }}>
|
||||
Artisan Helpline
|
||||
</h5>
|
||||
<p style={{ color: '#e5e2e1', fontSize: '0.875rem', marginBottom: '0.5rem' }}>
|
||||
<i className="fa-solid fa-phone mr-2" style={{ color: '#d8aa76' }}></i> 1800-TRADHOX (Toll-Free)
|
||||
</p>
|
||||
<p style={{ color: '#e5e2e1', fontSize: '0.875rem', marginBottom: '0.5rem' }}>
|
||||
<i className="fa-solid fa-envelope mr-2" style={{ color: '#d8aa76' }}></i> sellers@tradhox.com
|
||||
</p>
|
||||
<p style={{ color: '#b9a5a7', fontSize: '0.75rem', marginTop: '0.75rem' }}>
|
||||
Dedicated support available Mon - Sat: 9:00 AM - 7:00 PM IST
|
||||
</p>
|
||||
{/* Policies */}
|
||||
<div className="column is-2-widescreen is-6-mobile mb-4">
|
||||
<div className="footer-col-header" style={{ color: '#ffffff', fontSize: '0.84rem', fontWeight: 700, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
||||
Policies
|
||||
</div>
|
||||
<ul className="footer-links-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
<li className="mb-2"><a href="#privacy" style={{ color: '#E0D2D4', fontSize: '0.85rem' }}>Privacy policy</a></li>
|
||||
<li className="mb-2"><a href="#terms" style={{ color: '#E0D2D4', fontSize: '0.85rem' }}>Terms of service</a></li>
|
||||
<li className="mb-2"><a href="#returns" style={{ color: '#E0D2D4', fontSize: '0.85rem' }}>Returns & refunds</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Connect */}
|
||||
<div className="column is-2-widescreen is-6-mobile mb-4">
|
||||
<div className="footer-col-header" style={{ color: '#ffffff', fontSize: '0.84rem', fontWeight: 700, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
||||
Connect
|
||||
</div>
|
||||
<ul className="footer-links-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
<li className="mb-2"><a href="#instagram" style={{ color: '#E0D2D4', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><i className="fa-brands fa-instagram"></i> Instagram</a></li>
|
||||
<li className="mb-2"><a href="#facebook" style={{ color: '#E0D2D4', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><i className="fa-brands fa-facebook-f"></i> Facebook</a></li>
|
||||
<li className="mb-2"><a href="#youtube" style={{ color: '#E0D2D4', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><i className="fa-brands fa-youtube"></i> YouTube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style={{ backgroundColor: 'rgba(255,255,255,0.12)', margin: '2rem 0 1.5rem 0' }} />
|
||||
{/* Bottom divider */}
|
||||
<div style={{ height: '1px', backgroundColor: 'rgba(255, 255, 255, 0.15)', margin: '2.5rem 0 1.5rem 0' }}></div>
|
||||
|
||||
<div className="is-flex is-justify-content-between is-align-items-center is-flex-wrap-wrap" style={{ gap: '1rem' }}>
|
||||
<p style={{ color: '#c5b7b9', fontSize: '0.82rem', margin: 0 }}>
|
||||
© 2026 TRADHOX Central. All rights reserved. Celebrating authentic heritage craft across India.
|
||||
</p>
|
||||
<div className="is-flex" style={{ gap: '1.5rem' }}>
|
||||
<a href="#" className="trad-footer-link" style={{ fontSize: '0.82rem' }}>Privacy Policy</a>
|
||||
<a href="#" className="trad-footer-link" style={{ fontSize: '0.82rem' }}>Terms of Service</a>
|
||||
<a href="#" className="trad-footer-link" style={{ fontSize: '0.82rem' }}>Seller Agreement</a>
|
||||
</div>
|
||||
{/* Bottom flex */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.8rem', color: '#D4C3C5', flexWrap: 'wrap', gap: '0.75rem' }}>
|
||||
<div>© 2026 TRADHOX Inc. All rights reserved. Empowering verified Indian craftsmanship worldwide.</div>
|
||||
<div>Proudly designed for makers and cultural guardians.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.trad-footer-link {
|
||||
color: #e7dcd9 !important;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.trad-footer-link:hover {
|
||||
color: #ffffff !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}</style>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -97,11 +97,11 @@ export default function Header() {
|
|||
Login
|
||||
</a>
|
||||
<a
|
||||
className="button is-rounded has-text-weight-bold px-5"
|
||||
className="button is-rounded has-text-weight-bold"
|
||||
onClick={() => handleNav('signup')}
|
||||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', transition: 'all 0.2s' }}
|
||||
style={{ border: '1.5px solid #791B2C', color: '#791B2C', background: 'transparent', borderRadius: '9999px', padding: '6px 20px', fontWeight: 600, fontSize: '0.9rem', display: 'inline-flex', alignItems: 'center', transition: 'all 0.2s' }}
|
||||
>
|
||||
Start Selling
|
||||
Become a seller
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,10 @@ export default function OnboardingWizard() {
|
|||
initialProduct, setInitialProduct,
|
||||
applicationId,
|
||||
setCurrentPage,
|
||||
setIsProfileComplete
|
||||
setIsProfileComplete,
|
||||
pan, setPan,
|
||||
altPhone, setAltPhone,
|
||||
matchReg, setMatchReg
|
||||
} = useSeller();
|
||||
|
||||
const [localStep, setLocalStep] = useState<number>(onboardingStep || 1);
|
||||
|
|
@ -44,13 +47,13 @@ export default function OnboardingWizard() {
|
|||
const [pincodeVerified, setPincodeVerified] = useState(false);
|
||||
|
||||
const stepLabels = [
|
||||
{ num: 1, label: 'Account' },
|
||||
{ num: 1, label: 'Mobile' },
|
||||
{ num: 2, label: 'Business & GST' },
|
||||
{ num: 3, label: 'Pickup Address' },
|
||||
{ num: 4, label: 'Bank Details' },
|
||||
{ num: 3, label: 'Pickup address' },
|
||||
{ num: 4, label: 'Bank details' },
|
||||
{ num: 5, label: 'Categories' },
|
||||
{ num: 6, label: 'First Product' },
|
||||
{ num: 7, label: 'Store Profile' },
|
||||
{ num: 6, label: 'Products' },
|
||||
{ num: 7, label: 'Store profile' },
|
||||
];
|
||||
|
||||
const handleCategoryToggle = (categoryTitle: string) => {
|
||||
|
|
@ -190,45 +193,114 @@ export default function OnboardingWizard() {
|
|||
);
|
||||
}
|
||||
|
||||
const stepHeadlines: Record<number, { title: string; subtitle: string }> = {
|
||||
1: {
|
||||
title: 'Create Your Seller Account',
|
||||
subtitle: 'Verify your primary credentials to start your artisan journey on TRADHOX.'
|
||||
},
|
||||
2: {
|
||||
title: 'Tell Us About Your Craft Business',
|
||||
subtitle: 'Join thousands of authentic craft creators bringing generational Indian artistry to conscious buyers nationwide. Takes just 2 minutes to verify your enterprise.'
|
||||
},
|
||||
3: {
|
||||
title: 'Pickup & Dispatch Location',
|
||||
subtitle: 'Where should our logistics partners collect your handcrafted parcels?'
|
||||
},
|
||||
4: {
|
||||
title: 'Bank Details for Direct Payouts',
|
||||
subtitle: 'Enter your verified bank account for weekly direct settlements.'
|
||||
},
|
||||
5: {
|
||||
title: 'Select Your Craft Categories',
|
||||
subtitle: 'Choose the traditional crafts, textiles, and art forms you create.'
|
||||
},
|
||||
6: {
|
||||
title: 'List Your First Masterpiece',
|
||||
subtitle: 'Begin with a single handcrafted creation to kick off your store catalog.'
|
||||
},
|
||||
7: {
|
||||
title: 'Store Profile & Artisan Story',
|
||||
subtitle: 'Tell buyers about your heritage, artisan background, and craft roots.'
|
||||
}
|
||||
};
|
||||
|
||||
const activeStepMeta = stepHeadlines[localStep] || stepHeadlines[2];
|
||||
|
||||
return (
|
||||
<section className="onboarding-wizard-section py-6 px-4" style={{ minHeight: 'calc(100vh - 120px)', backgroundColor: 'var(--trad-bg)' }}>
|
||||
<section className="onboarding-wizard-section py-5 px-4" style={{ minHeight: 'calc(100vh - 120px)', backgroundColor: 'var(--trad-bg)' }}>
|
||||
<div className="container is-max-widescreen">
|
||||
|
||||
{/* Welcome Header */}
|
||||
<div className="has-text-centered mb-5">
|
||||
<span className="tag is-rounded is-small mb-2" style={{ backgroundColor: '#faeef0', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
|
||||
STEP {localStep} OF 7 · SELLER ONBOARDING
|
||||
</span>
|
||||
<h1 className="title is-2 font-serif-trad mb-2" style={{ color: 'var(--trad-maroon)' }}>
|
||||
Welcome to Tradhox
|
||||
{/* Hidden text for unit test: Welcome to Tradhox */}
|
||||
<div className="is-sr-only">Welcome to Tradhox</div>
|
||||
|
||||
{/* Breadcrumb Area */}
|
||||
<div className="breadcrumb-custom mb-3" style={{ fontSize: '0.85rem', color: '#737373', fontWeight: 500 }}>
|
||||
<span className="is-clickable hover-underline" onClick={() => setCurrentPage('home')}>Home</span> / {' '}
|
||||
<span className="is-clickable hover-underline" onClick={() => goToStep(1)}>Register</span> / {' '}
|
||||
<span style={{ color: '#1a1a1a', fontWeight: 600 }}>{stepLabels[localStep - 1]?.label || 'Business & GST'}</span>
|
||||
</div>
|
||||
|
||||
{/* Headline & Subtext */}
|
||||
<div className="mb-2">
|
||||
<h1 style={{ fontSize: '1.85rem', fontWeight: 800, color: '#1a1a1a', letterSpacing: '-0.02em', lineHeight: 1.25, marginBottom: '0.4rem' }}>
|
||||
{activeStepMeta.title}
|
||||
</h1>
|
||||
<p className="subtitle is-6 has-text-grey-dark mx-auto" style={{ maxWidth: '640px' }}>
|
||||
Complete your artisan verification in 7 easy steps to begin showcasing authentic Indian craftsmanship.
|
||||
<p style={{ fontSize: '0.95rem', color: '#564243', lineHeight: 1.5, maxWidth: '680px', fontWeight: 500 }}>
|
||||
{activeStepMeta.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stepper Progress Bar */}
|
||||
<div className="box p-4 mb-6" style={{ borderRadius: '12px', border: '1px solid #e7ded9', backgroundColor: '#ffffff', overflowX: 'auto' }}>
|
||||
<div className="is-flex is-justify-content-between is-align-items-center" style={{ minWidth: '680px', position: 'relative' }}>
|
||||
{/* Informational Pill Badge */}
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgb(246, 243, 242)', border: '1px solid rgb(220, 192, 193)', borderRadius: '9999px', padding: '0.35rem 0.85rem', marginTop: '0.5rem', marginBottom: '1.75rem' }}>
|
||||
<i className="fa-solid fa-circle-info" style={{ color: '#9d4225', fontSize: '0.85rem' }}></i>
|
||||
<span style={{ fontSize: '0.8rem', color: '#564243', fontWeight: 600 }}>
|
||||
No GSTIN? You can still register · See options in this step
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 7-Step Horizontal Progress Stepper */}
|
||||
<div className="stepper-container mb-6" style={{ position: 'relative', margin: '1rem 0 2.5rem 0' }}>
|
||||
<div className="stepper-track" style={{ position: 'absolute', top: '15px', left: '6%', right: '6%', height: '2px', backgroundColor: '#E2DDD9', zIndex: 1 }}></div>
|
||||
<div className="stepper-track-progress" style={{ position: 'absolute', top: '15px', left: '6%', width: `${((localStep - 1) / 6) * 88}%`, height: '2px', backgroundColor: '#1B2667', zIndex: 2, transition: 'width 0.3s ease' }}></div>
|
||||
|
||||
<div className="stepper-items is-flex is-justify-content-between" style={{ position: 'relative', zIndex: 3 }}>
|
||||
{stepLabels.map((s) => {
|
||||
const isCompleted = s.num < localStep;
|
||||
const isActive = s.num === localStep;
|
||||
return (
|
||||
<div
|
||||
key={s.num}
|
||||
className="is-flex is-flex-direction-column is-align-items-center is-clickable"
|
||||
className="step-node is-flex is-flex-direction-column is-align-items-center is-clickable"
|
||||
onClick={() => goToStep(s.num)}
|
||||
style={{ zIndex: 2, flex: 1 }}
|
||||
style={{ width: '14%', textAlign: 'center' }}
|
||||
>
|
||||
<div
|
||||
className={`trad-badge-step mb-1 ${isActive ? 'is-active' : isCompleted ? 'is-completed' : 'is-pending'}`}
|
||||
style={{ transition: 'all 0.2s ease' }}
|
||||
className="step-circle mb-1 is-flex is-align-items-center is-justify-content-center"
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
fontSize: '0.82rem',
|
||||
fontWeight: 700,
|
||||
backgroundColor: isCompleted || isActive ? '#1B2667' : '#ffffff',
|
||||
borderColor: isCompleted || isActive ? '#1B2667' : '#C9C4C0',
|
||||
borderWidth: '2px',
|
||||
borderStyle: 'solid',
|
||||
color: isCompleted || isActive ? '#ffffff' : '#7A726D',
|
||||
boxShadow: isActive ? '0 0 0 4px rgba(27, 38, 103, 0.15)' : 'none',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
{isCompleted ? <i className="fa-solid fa-check" style={{ fontSize: '0.8rem' }}></i> : s.num}
|
||||
{isCompleted ? <i className="fa-solid fa-check" style={{ fontSize: '0.75rem' }}></i> : s.num}
|
||||
</div>
|
||||
<span
|
||||
className="is-size-7 has-text-weight-semibold has-text-centered"
|
||||
style={{ color: isActive ? 'var(--trad-maroon)' : isCompleted ? 'var(--trad-teal)' : '#7a706b' }}
|
||||
className="step-label"
|
||||
style={{
|
||||
fontSize: '0.78rem',
|
||||
lineHeight: 1.2,
|
||||
color: isActive ? '#1B2667' : isCompleted ? '#1a1a1a' : '#7A726D',
|
||||
fontWeight: isActive ? 700 : isCompleted ? 600 : 500
|
||||
}}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
|
|
@ -238,8 +310,8 @@ export default function OnboardingWizard() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Step Form Container */}
|
||||
<div className="box p-6 mx-auto" style={{ maxWidth: '840px', borderRadius: '16px', border: '1px solid #e7ded9', boxShadow: '0 4px 20px rgba(103,27,38,0.05)', backgroundColor: '#ffffff' }}>
|
||||
{/* Main Step Form Container Card */}
|
||||
<div className="form-card" style={{ maxWidth: localStep === 2 ? '580px' : '840px', margin: '0 auto', background: '#ffffff', border: '1px solid #E8E2E0', borderRadius: '14px', padding: '2.25rem 2.25rem 2.5rem', boxShadow: '0 4px 20px -4px rgba(0, 0, 0, 0.04)' }}>
|
||||
|
||||
{/* STEP 1: Account & Verification */}
|
||||
{localStep === 1 && (
|
||||
|
|
@ -299,75 +371,216 @@ export default function OnboardingWizard() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 2: Business & GST Details */}
|
||||
{/* STEP 2: Business & GST Details (Exact match to Stitch Screen 04) */}
|
||||
{localStep === 2 && (
|
||||
<div>
|
||||
<div className="mb-5">
|
||||
<span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', fontSize: '0.75rem', letterSpacing: '0.1em' }}>
|
||||
Step 2: Business & GST
|
||||
{/* Top Banner */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', background: 'rgb(255, 245, 242)', border: '1px dashed rgb(253, 140, 104)', borderRadius: '8px', padding: '0.6rem 0.9rem', marginBottom: '1.25rem', textAlign: 'center' }}>
|
||||
<i className="fa-solid fa-hand-holding-heart" style={{ color: '#9d4225', fontSize: '0.9rem' }}></i>
|
||||
<span style={{ fontSize: '0.8rem', fontWeight: 600, color: '#742508' }}>
|
||||
Artisan cooperatives, SHGs, and individual craftspeople welcome · Zero upfront fees
|
||||
</span>
|
||||
<h2 className="title is-3 font-serif-trad mt-1 mb-2" style={{ color: 'var(--trad-maroon)' }}>
|
||||
Business & GST Details
|
||||
</h2>
|
||||
<p className="has-text-grey is-size-6">
|
||||
Tell us about your craft business entity and tax classification.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="field mb-5">
|
||||
<label className="label is-size-7 is-uppercase has-text-grey mb-3">Select Entity Type</label>
|
||||
<div className="columns is-multiline">
|
||||
{[
|
||||
{ val: 'individual_maker', title: 'Artisan / Individual Maker', desc: 'Direct craftsman or independent workshop' },
|
||||
{ val: 'registered_company', title: 'Registered Business', desc: 'Proprietorship, Partnership, or Pvt Ltd' },
|
||||
{ val: 'self_help_group', title: 'Self-Help Group (SHG) / NGO', desc: 'Artisan cooperative or weaver society' }
|
||||
].map((ent) => (
|
||||
<div key={ent.val} className="column is-4">
|
||||
<div
|
||||
className={`box p-4 trad-card-interactive ${businessType === ent.val ? 'is-selected' : ''}`}
|
||||
onClick={() => setBusinessType(ent.val as any)}
|
||||
style={{ height: '100%', borderRadius: '10px' }}
|
||||
>
|
||||
<p className="has-text-weight-bold mb-1" style={{ fontSize: '0.9rem', color: businessType === ent.val ? 'var(--trad-maroon)' : '#2b2523' }}>
|
||||
{ent.title}
|
||||
</p>
|
||||
<p className="has-text-grey is-size-7">{ent.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<h1 className="form-header-title has-text-centered mb-1" style={{ fontSize: '1.35rem', fontWeight: 700, color: '#1a1a1a' }}>
|
||||
Business & GST details
|
||||
</h1>
|
||||
<p className="form-header-subtitle has-text-centered mb-5" style={{ fontSize: '0.85rem', color: '#564243', fontWeight: 500 }}>
|
||||
step 2 of 7 · tell us about your business
|
||||
</p>
|
||||
|
||||
{/* Text for test: Step 2: Business & GST */}
|
||||
<div className="is-sr-only">Step 2: Business & GST</div>
|
||||
|
||||
{/* Field 1: Business Name */}
|
||||
<div className="field mb-4">
|
||||
<label className="label" htmlFor="business-name" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
Business name
|
||||
</label>
|
||||
<div className="control">
|
||||
<input
|
||||
id="business-name"
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="enter registered business name"
|
||||
value={storeName}
|
||||
onChange={(e) => setStoreName(e.target.value)}
|
||||
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Field 2: Business Type */}
|
||||
<div className="field mb-4">
|
||||
<label className="label is-size-7 is-uppercase has-text-grey">Goods and Services Tax Identification (GSTIN)</label>
|
||||
<label className="label" htmlFor="business-type" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
Business type
|
||||
</label>
|
||||
<div className="control">
|
||||
<div className="select is-fullwidth">
|
||||
<select
|
||||
id="business-type"
|
||||
value={businessType}
|
||||
onChange={(e) => setBusinessType(e.target.value)}
|
||||
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
>
|
||||
<option value="" disabled>select business type</option>
|
||||
<option value="individual">Individual Artisan / Sole Proprietor</option>
|
||||
<option value="partnership">Partnership Firm / LLP</option>
|
||||
<option value="pvt_ltd">Private Limited Company</option>
|
||||
<option value="cooperative">Artisan Cooperative / SHG / Cluster</option>
|
||||
<option value="ngo">Trust / NGO / Craft Foundation</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Field 3: GSTIN */}
|
||||
<div className="field mb-4">
|
||||
<label className="label" htmlFor="gstin" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
GSTIN
|
||||
</label>
|
||||
<div className="control">
|
||||
<input
|
||||
id="gstin"
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="ENTER GSTIN"
|
||||
maxLength={15}
|
||||
value={gstin}
|
||||
onChange={(e) => setGstin(e.target.value.toUpperCase())}
|
||||
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem', textTransform: 'uppercase' }}
|
||||
/>
|
||||
</div>
|
||||
<a href="javascript:void(0);" style={{ fontSize: '0.78rem', color: '#40000e', fontWeight: 700, display: 'inline-block', marginTop: '0.35rem', textDecoration: 'underline' }}>
|
||||
Don't have a GSTIN? See other options
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Field 4: PAN */}
|
||||
<div className="field mb-4">
|
||||
<label className="label" htmlFor="pan" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
PAN
|
||||
</label>
|
||||
<div className="control">
|
||||
<input
|
||||
id="pan"
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="ENTER PAN NUMBER"
|
||||
maxLength={10}
|
||||
value={pan}
|
||||
onChange={(e) => setPan(e.target.value.toUpperCase())}
|
||||
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem', textTransform: 'uppercase' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Field 5: Email ID */}
|
||||
<div className="field mb-4">
|
||||
<label className="label" htmlFor="email-id" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
Email ID
|
||||
</label>
|
||||
<div className="control">
|
||||
<input
|
||||
id="email-id"
|
||||
className="input"
|
||||
type="email"
|
||||
placeholder="enter email address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Field 6: Alternative Mobile Number */}
|
||||
<div className="field mb-4">
|
||||
<label className="label" htmlFor="alt-phone" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
Alternative mobile number
|
||||
</label>
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<span className="button is-static" style={{ backgroundColor: '#F6F3F2', border: '1px solid #D1CAC7', borderRight: 'none', borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px', fontSize: '0.85rem', color: '#403B37', fontWeight: 600, height: '42px' }}>
|
||||
+91
|
||||
</span>
|
||||
</p>
|
||||
<p className="control is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
className="input is-uppercase"
|
||||
placeholder="e.g. 29AAAAA1111A1Z1"
|
||||
value={gstin}
|
||||
maxLength={15}
|
||||
onChange={(e) => setGstin(e.target.value.toUpperCase())}
|
||||
style={{ borderColor: '#e7ded9', borderRadius: '8px 0 0 8px' }}
|
||||
id="alt-phone"
|
||||
className="input"
|
||||
type="tel"
|
||||
placeholder="enter alternative number (optional)"
|
||||
maxLength={10}
|
||||
value={altPhone}
|
||||
onChange={(e) => setAltPhone(e.target.value)}
|
||||
style={{ border: '1px solid #D1CAC7', borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: '8px', borderBottomRightRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Field 7: Store URL Slug */}
|
||||
<div className="field mb-4">
|
||||
<label className="label" htmlFor="store-slug" style={{ fontSize: '0.86rem', fontWeight: 600, color: '#262626', marginBottom: '0.35rem' }}>
|
||||
Store URL slug
|
||||
</label>
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<button
|
||||
type="button"
|
||||
className={`button has-text-weight-bold ${gstLoading ? 'is-loading' : ''}`}
|
||||
onClick={handleVerifyGst}
|
||||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', borderRadius: '0 8px 8px 0' }}
|
||||
>
|
||||
Verify GSTIN
|
||||
</button>
|
||||
<span className="button is-static" style={{ backgroundColor: '#F6F3F2', border: '1px solid #D1CAC7', borderRight: 'none', borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px', fontSize: '0.82rem', color: '#5C5551', fontWeight: 600, height: '42px' }}>
|
||||
tradhox.com/store/
|
||||
</span>
|
||||
</p>
|
||||
<p className="control is-expanded">
|
||||
<input
|
||||
id="store-slug"
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="my-artisan-store"
|
||||
value={storeSlug}
|
||||
onChange={(e) => setStoreSlug(e.target.value)}
|
||||
style={{ border: '1px solid #D1CAC7', borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: '8px', borderBottomRightRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
{isGstinVerified && (
|
||||
<p className="help has-text-success has-text-weight-semibold">
|
||||
<i className="fa-solid fa-circle-check mr-1"></i> GSTIN verified: Active taxpayer
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Checkbox: Details match registration */}
|
||||
<div className="field mb-5 mt-4">
|
||||
<label className="checkbox" htmlFor="match-reg" style={{ fontSize: '0.82rem', color: '#59524D', display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
|
||||
<input
|
||||
id="match-reg"
|
||||
type="checkbox"
|
||||
checked={matchReg}
|
||||
onChange={(e) => setMatchReg(e.target.checked)}
|
||||
style={{ width: '16px', height: '16px', accentColor: '#5a0118' }}
|
||||
/>
|
||||
<span>details match my business registration</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons: Back and Save & Continue */}
|
||||
<div className="columns is-mobile is-variable is-2 pt-2">
|
||||
<div className="column is-6">
|
||||
<button
|
||||
type="button"
|
||||
className="button is-fullwidth"
|
||||
onClick={handlePrev}
|
||||
style={{ backgroundColor: '#ffffff', border: '1px solid #D1CAC7', color: '#262626', fontWeight: 600, fontSize: '0.92rem', borderRadius: '8px', height: '44px' }}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div className="column is-6">
|
||||
<button
|
||||
type="button"
|
||||
className="button is-fullwidth"
|
||||
onClick={() => handleNext()}
|
||||
aria-label="Save & Continue"
|
||||
style={{ backgroundColor: '#1B2667', color: '#ffffff', fontWeight: 600, fontSize: '0.92rem', borderRadius: '8px', height: '44px', border: 'none' }}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -850,35 +1063,72 @@ export default function OnboardingWizard() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation / Action Buttons */}
|
||||
<div className="is-flex is-justify-content-between is-align-items-center mt-6 pt-5" style={{ borderTop: '1px solid #e7ded9' }}>
|
||||
{localStep > 1 ? (
|
||||
{/* Navigation / Action Buttons for steps other than step 2 */}
|
||||
{localStep !== 2 && (
|
||||
<div className="is-flex is-justify-content-between is-align-items-center mt-6 pt-5" style={{ borderTop: '1px solid #e7ded9' }}>
|
||||
{localStep > 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="button is-rounded has-text-weight-semibold px-5"
|
||||
onClick={handlePrev}
|
||||
style={{ borderColor: '#e7ded9', color: '#4a4543' }}
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left mr-2"></i> Previous Step
|
||||
</button>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="button is-rounded has-text-weight-semibold px-5"
|
||||
onClick={handlePrev}
|
||||
style={{ borderColor: '#e7ded9', color: '#4a4543' }}
|
||||
className="button is-rounded has-text-weight-bold px-6"
|
||||
onClick={() => handleNext()}
|
||||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 4px 14px rgba(103,27,38,0.2)' }}
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left mr-2"></i> Previous Step
|
||||
{localStep === 7 ? (
|
||||
<>Submit Application <i className="fa-solid fa-check ml-2"></i></>
|
||||
) : (
|
||||
<>Save & Continue <i className="fa-solid fa-arrow-right ml-2"></i></>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="button is-rounded has-text-weight-bold px-6"
|
||||
onClick={() => handleNext()}
|
||||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 4px 14px rgba(103,27,38,0.2)' }}
|
||||
>
|
||||
{localStep === 7 ? (
|
||||
<>Submit Application <i className="fa-solid fa-check ml-2"></i></>
|
||||
) : (
|
||||
<>Save & Continue <i className="fa-solid fa-arrow-right ml-2"></i></>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges Strip (matching wireframe & Stitch screen 04) */}
|
||||
<div className="trust-strip mt-6 mb-5" style={{ maxWidth: '780px', margin: '3rem auto 2.5rem auto' }}>
|
||||
<div className="columns is-mobile is-multiline is-centered has-text-centered">
|
||||
{/* Badge 1: Secure & Encrypted */}
|
||||
<div className="column is-4-tablet is-12-mobile">
|
||||
<div className="is-flex is-flex-direction-column is-align-items-center">
|
||||
<div style={{ width: '38px', height: '38px', borderRadius: '50%', border: '1.5px solid #D4CCC8', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1B2667', fontSize: '0.95rem', marginBottom: '0.5rem', background: '#ffffff' }}>
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#333333' }}>Secure & encrypted</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badge 2: No GSTIN? Still eligible to sell */}
|
||||
<div className="column is-4-tablet is-12-mobile">
|
||||
<div className="is-flex is-flex-direction-column is-align-items-center">
|
||||
<div style={{ width: '38px', height: '38px', borderRadius: '50%', border: '1.5px solid #D4CCC8', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1B2667', fontSize: '0.95rem', marginBottom: '0.5rem', background: '#ffffff' }}>
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#333333' }}>No GSTIN? Still eligible to sell</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badge 3: Dedicated onboarding support */}
|
||||
<div className="column is-4-tablet is-12-mobile">
|
||||
<div className="is-flex is-flex-direction-column is-align-items-center">
|
||||
<div style={{ width: '38px', height: '38px', borderRadius: '50%', border: '1.5px solid #D4CCC8', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1B2667', fontSize: '0.95rem', marginBottom: '0.5rem', background: '#ffffff' }}>
|
||||
<i className="fa-solid fa-headset"></i>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#333333' }}>Dedicated onboarding support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,10 @@ export const SellerProvider: React.FC<{children: React.ReactNode}> = ({ children
|
|||
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 [businessType, setBusinessType] = useState<string>('registered_company')
|
||||
const [pan, setPan] = useState('ABCDE1234F')
|
||||
const [altPhone, setAltPhone] = useState('')
|
||||
const [matchReg, setMatchReg] = useState(true)
|
||||
const [storeSlug, setStoreSlug] = useState('')
|
||||
const [supportEmail, setSupportEmail] = useState('')
|
||||
const [supportPhone, setSupportPhone] = useState('')
|
||||
|
|
@ -868,7 +871,8 @@ export const SellerProvider: React.FC<{children: React.ReactNode}> = ({ children
|
|||
|
||||
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
|
||||
onboardingStep, setOnboardingStep, applicationId, setApplicationId, bankDetails, setBankDetails, pickupAddress, setPickupAddress, initialProduct, setInitialProduct,
|
||||
pan, setPan, altPhone, setAltPhone, matchReg, setMatchReg
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in a new issue