applying the fix
This commit is contained in:
parent
6e3cbdc228
commit
524038cf2b
2 changed files with 12 additions and 159 deletions
|
|
@ -3,53 +3,28 @@ import { useSeller } from '../../context/SellerContext';
|
|||
|
||||
export default function OnboardingWizard() {
|
||||
const {
|
||||
profileStep, setProfileStep,
|
||||
setIsProfileComplete, setCurrentPage,
|
||||
businessType, setBusinessType,
|
||||
gstin, setGstin,
|
||||
storeSlug, setStoreSlug,
|
||||
supportEmail, setSupportEmail,
|
||||
supportPhone, setSupportPhone,
|
||||
selectedCategories, setSelectedCategories,
|
||||
saveProfileBackend
|
||||
saveProfileBackend,
|
||||
setIsProfileComplete,
|
||||
setCurrentPage
|
||||
} = useSeller();
|
||||
|
||||
const handleNext = () => {
|
||||
const isLastStep = profileStep === 3;
|
||||
saveProfileBackend(isLastStep)
|
||||
saveProfileBackend(true)
|
||||
.then(() => {
|
||||
if (!isLastStep) {
|
||||
setProfileStep(profileStep + 1);
|
||||
} else {
|
||||
setIsProfileComplete(true);
|
||||
setCurrentPage('dashboard');
|
||||
}
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
alert("Failed to save progress: " + err.message);
|
||||
});
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (profileStep > 1) {
|
||||
setProfileStep(profileStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCategory = (cat: string) => {
|
||||
if (selectedCategories.includes(cat)) {
|
||||
setSelectedCategories(selectedCategories.filter((c: string) => c !== cat));
|
||||
} else {
|
||||
setSelectedCategories([...selectedCategories, cat]);
|
||||
}
|
||||
};
|
||||
|
||||
const renderStep1 = () => (
|
||||
<div className="columns is-vcentered" style={{ minHeight: 'calc(100vh - 4rem)' }}>
|
||||
{/* Left Column (Text) */}
|
||||
<div className="column is-5 is-flex is-flex-direction-column is-justify-content-center p-6">
|
||||
<p className="has-text-primary mb-4 is-size-7 has-text-weight-bold is-uppercase tracking-wide" style={{ letterSpacing: '0.1em' }}>
|
||||
Welcome to Tradhox — Step 1 of 3
|
||||
Welcome to Tradhox
|
||||
</p>
|
||||
<h1 className="title is-1 has-text-dark mb-5" style={{ fontFamily: 'Libre Caslon Text, serif', lineHeight: '1.2' }}>
|
||||
Every Piece You List Keeps a Craft Alive
|
||||
|
|
@ -81,7 +56,7 @@ export default function OnboardingWizard() {
|
|||
|
||||
<div>
|
||||
<button className="button is-primary is-medium is-rounded is-outlined" onClick={handleNext}>
|
||||
<span>Continue to Store Setup</span>
|
||||
<span>Go to Dashboard</span>
|
||||
<span className="icon is-small ml-2"><span className="material-symbols-outlined">arrow_forward</span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -131,132 +106,10 @@ export default function OnboardingWizard() {
|
|||
</div>
|
||||
);
|
||||
|
||||
const renderStep2 = () => (
|
||||
<div className="columns is-centered mt-6">
|
||||
<div className="column is-8-desktop is-10-tablet">
|
||||
<div className="box p-6">
|
||||
<p className="has-text-grey mb-2 is-size-7 has-text-weight-bold is-uppercase tracking-wide has-text-centered">
|
||||
Step 2 of 3
|
||||
</p>
|
||||
<h1 className="title is-3 has-text-primary has-text-centered mb-6" style={{ fontFamily: 'Libre Caslon Text, serif' }}>
|
||||
Business Details
|
||||
</h1>
|
||||
|
||||
<div className="field">
|
||||
<label className="label">Business Type</label>
|
||||
<div className="control">
|
||||
<div className="select is-fullwidth">
|
||||
<select value={businessType} onChange={e => setBusinessType(e.target.value as any)}>
|
||||
<option value="registered_company">Registered Company</option>
|
||||
<option value="self_help_group">Self-Help Group (SHG)</option>
|
||||
<option value="individual_maker">Individual Maker / Artisan</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label className="label">GSTIN (Optional for Individuals)</label>
|
||||
<div className="control has-icons-left">
|
||||
<input className="input" type="text" placeholder="29AAAAA1111A1Z1" value={gstin} onChange={e => setGstin(e.target.value)} />
|
||||
<span className="icon is-small is-left"><span className="material-symbols-outlined">receipt_long</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="columns mt-4">
|
||||
<div className="column is-half">
|
||||
<div className="field">
|
||||
<label className="label">Support Email</label>
|
||||
<div className="control has-icons-left">
|
||||
<input className="input" type="email" placeholder="support@brand.com" value={supportEmail} onChange={e => setSupportEmail(e.target.value)} />
|
||||
<span className="icon is-small is-left"><span className="material-symbols-outlined">mail</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column is-half">
|
||||
<div className="field">
|
||||
<label className="label">Support Phone</label>
|
||||
<div className="control has-icons-left">
|
||||
<input className="input" type="tel" placeholder="+91 9876543210" value={supportPhone} onChange={e => setSupportPhone(e.target.value)} />
|
||||
<span className="icon is-small is-left"><span className="material-symbols-outlined">phone</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field mt-4">
|
||||
<label className="label">Store URL Slug</label>
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<a className="button is-static">tradhox.com/store/</a>
|
||||
</p>
|
||||
<p className="control is-expanded">
|
||||
<input className="input" type="text" placeholder="my-artisan-store" value={storeSlug} onChange={e => setStoreSlug(e.target.value)} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="is-flex is-justify-content-space-between mt-6">
|
||||
<button className="button is-light" onClick={handleBack}>Back</button>
|
||||
<button className="button is-primary is-outlined" onClick={handleNext}>Next: Categories</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderStep3 = () => {
|
||||
const availableCategories = ['Textiles & Apparel', 'Home Decor', 'Jewelry', 'Art & Collectibles', 'Beauty & Wellness', 'Food & Beverages'];
|
||||
|
||||
return (
|
||||
<div className="columns is-centered mt-6">
|
||||
<div className="column is-8-desktop is-10-tablet">
|
||||
<div className="box p-6">
|
||||
<p className="has-text-grey mb-2 is-size-7 has-text-weight-bold is-uppercase tracking-wide has-text-centered">
|
||||
Step 3 of 3
|
||||
</p>
|
||||
<h1 className="title is-3 has-text-primary has-text-centered mb-2" style={{ fontFamily: 'Libre Caslon Text, serif' }}>
|
||||
What do you sell?
|
||||
</h1>
|
||||
<p className="has-text-centered has-text-grey mb-6">Select all categories that apply to your handcrafted products.</p>
|
||||
|
||||
<div className="columns is-multiline">
|
||||
{availableCategories.map(cat => (
|
||||
<div className="column is-6" key={cat}>
|
||||
<div
|
||||
className={`box is-clickable is-flex is-align-items-center transition-all duration-200 ${selectedCategories.includes(cat) ? 'has-background-primary-light border-primary' : 'has-background-white-ter'}`}
|
||||
onClick={() => toggleCategory(cat)}
|
||||
style={{ border: selectedCategories.includes(cat) ? '2px solid var(--bulma-primary)' : '2px solid transparent' }}
|
||||
>
|
||||
<span className={`icon is-large mr-3 ${selectedCategories.includes(cat) ? 'has-text-primary' : 'has-text-grey'}`}>
|
||||
<span className="material-symbols-outlined">
|
||||
{selectedCategories.includes(cat) ? 'check_circle' : 'circle'}
|
||||
</span>
|
||||
</span>
|
||||
<span className={`has-text-weight-medium ${selectedCategories.includes(cat) ? 'has-text-primary' : 'has-text-grey-dark'}`}>
|
||||
{cat}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="is-flex is-justify-content-space-between mt-6">
|
||||
<button className="button is-light" onClick={handleBack}>Back</button>
|
||||
<button className="button is-primary is-outlined" onClick={handleNext}>Complete Onboarding</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="has-background-white" style={{ minHeight: 'calc(100vh - 4rem)' }}>
|
||||
<div className="container is-fluid px-0">
|
||||
{profileStep === 1 && renderStep1()}
|
||||
{profileStep === 2 && renderStep2()}
|
||||
{profileStep === 3 && renderStep3()}
|
||||
{renderStep1()}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -584,11 +584,11 @@ export const SellerProvider: React.FC<{children: React.ReactNode}> = ({ children
|
|||
categories: selectedCategories,
|
||||
aadhar_file: aadharFile,
|
||||
pan_file: panFile,
|
||||
aadhar_s3_key: aadharS3Key || 'suppliers/default/aadhar.pdf',
|
||||
pan_s3_key: panS3Key || 'suppliers/default/pan.pdf',
|
||||
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 || 'suppliers/default/logo.jpg',
|
||||
logo_s3_key: logoS3Key || null,
|
||||
business_bio: businessBio,
|
||||
street: address.street,
|
||||
city: address.city,
|
||||
|
|
|
|||
Loading…
Reference in a new issue