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() {
|
export default function OnboardingWizard() {
|
||||||
const {
|
const {
|
||||||
profileStep, setProfileStep,
|
saveProfileBackend,
|
||||||
setIsProfileComplete, setCurrentPage,
|
setIsProfileComplete,
|
||||||
businessType, setBusinessType,
|
setCurrentPage
|
||||||
gstin, setGstin,
|
|
||||||
storeSlug, setStoreSlug,
|
|
||||||
supportEmail, setSupportEmail,
|
|
||||||
supportPhone, setSupportPhone,
|
|
||||||
selectedCategories, setSelectedCategories,
|
|
||||||
saveProfileBackend
|
|
||||||
} = useSeller();
|
} = useSeller();
|
||||||
|
|
||||||
const handleNext = () => {
|
const handleNext = () => {
|
||||||
const isLastStep = profileStep === 3;
|
saveProfileBackend(true)
|
||||||
saveProfileBackend(isLastStep)
|
|
||||||
.then(() => {
|
.then(() => {
|
||||||
if (!isLastStep) {
|
setIsProfileComplete(true);
|
||||||
setProfileStep(profileStep + 1);
|
setCurrentPage('dashboard');
|
||||||
} else {
|
|
||||||
setIsProfileComplete(true);
|
|
||||||
setCurrentPage('dashboard');
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch((err: Error) => {
|
.catch((err: Error) => {
|
||||||
alert("Failed to save progress: " + err.message);
|
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 = () => (
|
const renderStep1 = () => (
|
||||||
<div className="columns is-vcentered" style={{ minHeight: 'calc(100vh - 4rem)' }}>
|
<div className="columns is-vcentered" style={{ minHeight: 'calc(100vh - 4rem)' }}>
|
||||||
{/* Left Column (Text) */}
|
{/* Left Column (Text) */}
|
||||||
<div className="column is-5 is-flex is-flex-direction-column is-justify-content-center p-6">
|
<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' }}>
|
<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>
|
</p>
|
||||||
<h1 className="title is-1 has-text-dark mb-5" style={{ fontFamily: 'Libre Caslon Text, serif', lineHeight: '1.2' }}>
|
<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
|
Every Piece You List Keeps a Craft Alive
|
||||||
|
|
@ -81,7 +56,7 @@ export default function OnboardingWizard() {
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button className="button is-primary is-medium is-rounded is-outlined" onClick={handleNext}>
|
<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>
|
<span className="icon is-small ml-2"><span className="material-symbols-outlined">arrow_forward</span></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -131,132 +106,10 @@ export default function OnboardingWizard() {
|
||||||
</div>
|
</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 (
|
return (
|
||||||
<section className="has-background-white" style={{ minHeight: 'calc(100vh - 4rem)' }}>
|
<section className="has-background-white" style={{ minHeight: 'calc(100vh - 4rem)' }}>
|
||||||
<div className="container is-fluid px-0">
|
<div className="container is-fluid px-0">
|
||||||
{profileStep === 1 && renderStep1()}
|
{renderStep1()}
|
||||||
{profileStep === 2 && renderStep2()}
|
|
||||||
{profileStep === 3 && renderStep3()}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -584,11 +584,11 @@ export const SellerProvider: React.FC<{children: React.ReactNode}> = ({ children
|
||||||
categories: selectedCategories,
|
categories: selectedCategories,
|
||||||
aadhar_file: aadharFile,
|
aadhar_file: aadharFile,
|
||||||
pan_file: panFile,
|
pan_file: panFile,
|
||||||
aadhar_s3_key: aadharS3Key || 'suppliers/default/aadhar.pdf',
|
aadhar_s3_key: aadharS3Key || null,
|
||||||
pan_s3_key: panS3Key || 'suppliers/default/pan.pdf',
|
pan_s3_key: panS3Key || null,
|
||||||
store_name: storeName,
|
store_name: storeName,
|
||||||
store_logo: storeLogo || 'https://images.unsplash.com/photo-1513519245088-0e12902e5a38?auto=format&fit=crop&q=80&w=800',
|
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,
|
business_bio: businessBio,
|
||||||
street: address.street,
|
street: address.street,
|
||||||
city: address.city,
|
city: address.city,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue