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;
|
scheduleDate: string;
|
||||||
investmentPlan: { planName: string; planType: string; bikes: number; amount: number; monthlyReturn: number; expectedROI: number };
|
investmentPlan: { planName: string; planType: string; bikes: number; amount: number; monthlyReturn: number; expectedROI: number };
|
||||||
swapStationPlan: { planType: string; cabinets: number; amount: number; batteries: number; monthlyRent: 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[];
|
requiredDocuments: Document[];
|
||||||
}>({
|
}>({
|
||||||
applicationSource: 'walkin',
|
applicationSource: 'walkin',
|
||||||
@@ -1168,6 +1169,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
|||||||
scheduleDate: '',
|
scheduleDate: '',
|
||||||
investmentPlan: { planName: '', planType: '', bikes: 1, amount: 0, monthlyReturn: 0, expectedROI: 0 },
|
investmentPlan: { planName: '', planType: '', bikes: 1, amount: 0, monthlyReturn: 0, expectedROI: 0 },
|
||||||
swapStationPlan: { planType: '', cabinets: 8, amount: 0, batteries: 0, monthlyRent: 0 },
|
swapStationPlan: { planType: '', cabinets: 8, amount: 0, batteries: 0, monthlyRent: 0 },
|
||||||
|
merchantPlan: { companyCategory: '', bikersRequested: 0, amount: 0, monthlyBudget: 0, requiredArea: '' },
|
||||||
requiredDocuments: [],
|
requiredDocuments: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1940,49 +1942,118 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : null}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
</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="space-y-5">
|
||||||
<div className="bg-pink-50/80 p-4 rounded-xl border border-pink-100">
|
<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">
|
<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>
|
</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 && (
|
{step === 5 && (
|
||||||
<div className="space-y-5">
|
<div className="space-y-5">
|
||||||
<div className="bg-green-50/80 p-4 rounded-xl border border-green-100">
|
<div className="bg-green-50/80 p-4 rounded-xl border border-green-100">
|
||||||
|
|||||||
Reference in New Issue
Block a user