feat: add merchant entity type with dedicated company information and rider request steps to KYC form
This commit is contained in:
sazzadulalambd
@@ -1136,6 +1136,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
scheduleDate: string;
|
||||
investmentPlan: { planName: string; planType: string; bikes: number; amount: number; monthlyReturn: number; expectedROI: number };
|
||||
swapStationPlan: { planType: string; cabinets: number; amount: number; batteries: number; monthlyRent: number };
|
||||
merchantPlan: { companyCategory: string; bikersRequested: number; amount: number; monthlyBudget: number; requiredArea: string };
|
||||
requiredDocuments: Document[];
|
||||
}>({
|
||||
applicationSource: 'walkin',
|
||||
@@ -1168,6 +1169,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
scheduleDate: '',
|
||||
investmentPlan: { planName: '', planType: '', bikes: 1, amount: 0, monthlyReturn: 0, expectedROI: 0 },
|
||||
swapStationPlan: { planType: '', cabinets: 8, amount: 0, batteries: 0, monthlyRent: 0 },
|
||||
merchantPlan: { companyCategory: '', bikersRequested: 0, amount: 0, monthlyBudget: 0, requiredArea: '' },
|
||||
requiredDocuments: [],
|
||||
});
|
||||
|
||||
@@ -1940,49 +1942,118 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-purple-50/80 p-4 rounded-xl border border-purple-100">
|
||||
<h4 className="font-semibold text-purple-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Briefcase className="w-4 h-4" /> Business Information
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Business Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.company}
|
||||
onChange={(e) => updateField('employmentInfo.company', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Your business name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Monthly Income (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.employmentInfo.monthlyEarning}
|
||||
onChange={(e) => updateField('employmentInfo.monthlyEarning', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Nature of Business</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.whyEV}
|
||||
onChange={(e) => updateField('employmentInfo.whyEV', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="e.g., retail, wholesale, e-commerce"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(step === 3 && (formData.type === 'biker' || formData.type === 'investor' || formData.type === 'swapstation')) && (
|
||||
{(step === 2 && formData.type === 'merchant') && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-purple-50/80 p-4 rounded-xl border border-purple-100">
|
||||
<h4 className="font-semibold text-purple-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Briefcase className="w-4 h-4" /> Company Information (Merchant)
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.company}
|
||||
onChange={(e) => updateField('employmentInfo.company', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="e.g., Foodpanda, Uber, Pathao"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company Phone</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.phone}
|
||||
onChange={(e) => updateField('phone', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="01XXXXXXXXX"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => updateField('email', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="company@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Trade License Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.nid}
|
||||
onChange={(e) => updateField('nid', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Trade license number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">TIN Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.passport}
|
||||
onChange={(e) => updateField('passport', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="TIN number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Monthly Revenue (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.employmentInfo.monthlyEarning}
|
||||
onChange={(e) => updateField('employmentInfo.monthlyEarning', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company Address</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.presentAddress.line1}
|
||||
onChange={(e) => updateField('presentAddress.line1', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Company headquarters address"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Delivery Platform</label>
|
||||
<select
|
||||
value={formData.employmentInfo.whyEV}
|
||||
onChange={(e) => updateField('employmentInfo.whyEV', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
|
||||
>
|
||||
<option value="">Select Platform</option>
|
||||
<option value="Foodpanda">Foodpanda</option>
|
||||
<option value="Uber">Uber</option>
|
||||
<option value="Pathao">Pathao</option>
|
||||
<option value="SSL Commercial">SSL Commercial</option>
|
||||
<option value="Others">Others</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company Description</label>
|
||||
<textarea
|
||||
value={formData.employmentInfo.experience}
|
||||
onChange={(e) => updateField('employmentInfo.experience', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
rows={3}
|
||||
placeholder="Describe your company business..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(step === 3 && (formData.type === 'biker' || formData.type === 'investor' || formData.type === 'swapstation' || formData.type === 'merchant')) && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-pink-50/80 p-4 rounded-xl border border-pink-100">
|
||||
<h4 className="font-semibold text-pink-900 mb-3 flex items-center gap-2 text-sm">
|
||||
@@ -2367,6 +2438,86 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 4 && formData.type === 'merchant' && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-amber-50/80 p-4 rounded-xl border border-amber-100">
|
||||
<h4 className="font-semibold text-amber-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Users className="w-4 h-4" /> Rider Request Plan
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
|
||||
{[
|
||||
{ v: 5, l: '5 Riders', d: 'Request for 5 bikers' },
|
||||
{ v: 10, l: '10 Riders', d: 'Request for 10 bikers' },
|
||||
{ v: 20, l: '20 Riders', d: 'Request for 20 bikers' },
|
||||
{ v: 50, l: '50 Riders', d: 'Request for 50 bikers' },
|
||||
{ v: 100, l: '100 Riders', d: 'Request for 100 bikers' },
|
||||
].map(plan => (
|
||||
<button
|
||||
key={plan.v}
|
||||
onClick={() => updateField('merchantPlan.bikersRequested', plan.v)}
|
||||
className={`p-4 rounded-lg border text-left transition-all ${formData.merchantPlan.bikersRequested === plan.v
|
||||
? 'border-accent bg-accent/10 ring-1 ring-accent'
|
||||
: 'border-slate-200 bg-white hover:border-accent'
|
||||
}`}
|
||||
>
|
||||
<Users className={`w-5 h-5 mb-2 ${formData.merchantPlan.bikersRequested === plan.v ? 'text-accent' : 'text-slate-400'}`} />
|
||||
<p className="text-sm font-semibold text-slate-800">{plan.l}</p>
|
||||
<p className="text-xs text-slate-500">{plan.d}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company Category</label>
|
||||
<select
|
||||
value={formData.merchantPlan.companyCategory}
|
||||
onChange={(e) => updateField('merchantPlan.companyCategory', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
|
||||
>
|
||||
<option value="">Select Category</option>
|
||||
<option value="Food Delivery">Food Delivery</option>
|
||||
<option value="Parcel Delivery">Parcel Delivery</option>
|
||||
<option value="E-commerce">E-commerce</option>
|
||||
<option value="Logistics">Logistics</option>
|
||||
<option value="Quick Commerce">Quick Commerce</option>
|
||||
<option value="Others">Others</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Required Area/Zone</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.merchantPlan.requiredArea}
|
||||
onChange={(e) => updateField('merchantPlan.requiredArea', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="e.g., Dhaka, Chattogram"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Investment Amount (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.merchantPlan.amount}
|
||||
onChange={(e) => updateField('merchantPlan.amount', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Monthly Budget (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.merchantPlan.monthlyBudget}
|
||||
onChange={(e) => updateField('merchantPlan.monthlyBudget', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 5 && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-green-50/80 p-4 rounded-xl border border-green-100">
|
||||
|
||||
Reference in New Issue
Block a user