andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Update registration Step

Browse Source
This commit is contained in:
Koncept Kit
2025-12-06 13:47:40 +07:00
parent 7bdb910a67
commit 7b8ee6442a
6 changed files with 940 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/components/registration/RegistrationStep1.js Normal file
View File

@@ -0,0 +1,235 @@
import React from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { Checkbox } from '../ui/checkbox';
const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
const leadSourceOptions = [
'Current member',
'Friend',
'OutSmart Magazine',
'Search engine (Google etc.)',
"I've known about LOAF for a long time",
'Other'
];
const handleLeadSourceChange = (source) => {
setFormData(prev => {
const sources = prev.lead_sources.includes(source)
? prev.lead_sources.filter(s => s !== source)
: [...prev.lead_sources, source];
return { ...prev, lead_sources: sources };
});
};
return (
<div className="space-y-8">
{/* Personal Information */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
Personal Information
</h2>
{/* First Name, Last Name */}
<div className="grid md:grid-cols-2 gap-4">
<div>
<Label htmlFor="first_name">First Name *</Label>
<Input
id="first_name"
name="first_name"
required
value={formData.first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="first-name-input"
/>
</div>
<div>
<Label htmlFor="last_name">Last Name *</Label>
<Input
id="last_name"
name="last_name"
required
value={formData.last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="last-name-input"
/>
</div>
</div>
{/* Phone, Date of Birth */}
<div className="grid md:grid-cols-2 gap-4">
<div>
<Label htmlFor="phone">Phone *</Label>
<Input
id="phone"
name="phone"
type="tel"
required
value={formData.phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="phone-input"
/>
</div>
<div>
<Label htmlFor="date_of_birth">Date of Birth *</Label>
<Input
id="date_of_birth"
name="date_of_birth"
type="date"
required
value={formData.date_of_birth}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="dob-input"
/>
</div>
</div>
{/* Address */}
<div>
<Label htmlFor="address">Address *</Label>
<Input
id="address"
name="address"
required
value={formData.address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="address-input"
/>
</div>
{/* City, State, Zipcode */}
<div className="grid md:grid-cols-3 gap-4">
<div>
<Label htmlFor="city">City *</Label>
<Input
id="city"
name="city"
required
value={formData.city}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="city-input"
/>
</div>
<div>
<Label htmlFor="state">State *</Label>
<Input
id="state"
name="state"
required
value={formData.state}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="state-input"
/>
</div>
<div>
<Label htmlFor="zipcode">Zipcode *</Label>
<Input
id="zipcode"
name="zipcode"
required
value={formData.zipcode}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="zipcode-input"
/>
</div>
</div>
</div>
{/* How Did You Hear About Us */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
How Did You Hear About Us? *
</h2>
<div className="space-y-3">
{leadSourceOptions.map((source) => (
<div key={source} className="flex items-center space-x-2">
<Checkbox
id={source}
checked={formData.lead_sources.includes(source)}
onCheckedChange={() => handleLeadSourceChange(source)}
data-testid={`lead-source-${source.toLowerCase().replace(/\s+/g, '-')}`}
/>
<Label htmlFor={source} className="text-base cursor-pointer">
{source}
</Label>
</div>
))}
</div>
</div>
{/* Partner Information */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
Partner Information (Optional)
</h2>
<div className="grid md:grid-cols-2 gap-4">
<div>
<Label htmlFor="partner_first_name">Partner First Name</Label>
<Input
id="partner_first_name"
name="partner_first_name"
value={formData.partner_first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="partner-first-name-input"
/>
</div>
<div>
<Label htmlFor="partner_last_name">Partner Last Name</Label>
<Input
id="partner_last_name"
name="partner_last_name"
value={formData.partner_last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="partner-last-name-input"
/>
</div>
</div>
<div className="space-y-3">
<div className="flex items-center space-x-2">
<Checkbox
id="partner_is_member"
name="partner_is_member"
checked={formData.partner_is_member}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, partner_is_member: checked }))
}
data-testid="partner-is-member-checkbox"
/>
<Label htmlFor="partner_is_member" className="text-base cursor-pointer">
Is your partner already a member?
</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="partner_plan_to_become_member"
name="partner_plan_to_become_member"
checked={formData.partner_plan_to_become_member}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, partner_plan_to_become_member: checked }))
}
data-testid="partner-plan-member-checkbox"
/>
<Label htmlFor="partner_plan_to_become_member" className="text-base cursor-pointer">
Does your partner plan to become a member?
</Label>
</div>
</div>
</div>
</div>
);
};
export default RegistrationStep1;