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

186
src/components/registration/RegistrationStep2.js Normal file
View File

@@ -0,0 +1,186 @@
import React from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { Textarea } from '../ui/textarea';
import { Checkbox } from '../ui/checkbox';
const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
const volunteerOptions = [
'Welcoming new members at events',
'Sending out birthday cards',
'Care Team Calls',
'Sharing ideas for events',
'Researching grants',
'Applying for grants',
'Assisting with TeatherLOAFers',
'Assisting with ActiveLOAFers',
'Assisting with weekday Lunch Bunch',
'Uploading Photos to the Website',
'Assisting with eNewsletter',
'Other administrative task'
];
const handleVolunteerChange = (option) => {
setFormData(prev => {
const interests = prev.volunteer_interests.includes(option)
? prev.volunteer_interests.filter(i => i !== option)
: [...prev.volunteer_interests, option];
return { ...prev, volunteer_interests: interests };
});
};
return (
<div className="space-y-8">
{/* Newsletter Publication Preferences */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
Newsletter Publication Preferences *
</h2>
<p className="text-[#6B708D]">
Please check what information may be published in LOAF Newsletter
</p>
<div className="space-y-3">
<div className="flex items-center space-x-2">
<Checkbox
id="newsletter_publish_name"
checked={formData.newsletter_publish_name}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, newsletter_publish_name: checked }))
}
/>
<Label htmlFor="newsletter_publish_name" className="text-base cursor-pointer">
Name
</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="newsletter_publish_photo"
checked={formData.newsletter_publish_photo}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, newsletter_publish_photo: checked }))
}
/>
<Label htmlFor="newsletter_publish_photo" className="text-base cursor-pointer">
Photo (added later in profile)
</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="newsletter_publish_birthday"
checked={formData.newsletter_publish_birthday}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, newsletter_publish_birthday: checked }))
}
/>
<Label htmlFor="newsletter_publish_birthday" className="text-base cursor-pointer">
Birthday
</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="newsletter_publish_none"
checked={formData.newsletter_publish_none}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, newsletter_publish_none: checked }))
}
/>
<Label htmlFor="newsletter_publish_none" className="text-base cursor-pointer">
Do not publish any of my information
</Label>
</div>
</div>
</div>
{/* Referral */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
Referral
</h2>
<div>
<Label htmlFor="referred_by_member_name">
Name of a LOAF Member who already knows you
</Label>
<Input
id="referred_by_member_name"
name="referred_by_member_name"
value={formData.referred_by_member_name}
onChange={handleInputChange}
placeholder="Enter member name or email"
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
data-testid="referral-input"
/>
<p className="text-sm text-[#6B708D] mt-2">
If referred by a current member, you may skip the event attendance requirement.
</p>
</div>
</div>
{/* Volunteer Interests */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
Volunteer Interests (Optional)
</h2>
<p className="text-[#6B708D]">
I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
</p>
<div className="space-y-3">
{volunteerOptions.map((option) => (
<div key={option} className="flex items-center space-x-2">
<Checkbox
id={`volunteer_${option}`}
checked={formData.volunteer_interests.includes(option)}
onCheckedChange={() => handleVolunteerChange(option)}
/>
<Label htmlFor={`volunteer_${option}`} className="text-base cursor-pointer">
{option}
</Label>
</div>
))}
</div>
</div>
{/* Scholarship Request */}
<div className="space-y-4">
<div className="flex items-center space-x-2">
<Checkbox
id="scholarship_requested"
checked={formData.scholarship_requested}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, scholarship_requested: checked }))
}
/>
<Label htmlFor="scholarship_requested" className="text-base cursor-pointer font-semibold">
I am requesting for scholarship
</Label>
</div>
<p className="text-sm text-[#6B708D]">
Scholarship information is kept confidential
</p>
{formData.scholarship_requested && (
<div className="mt-4">
<Label htmlFor="scholarship_reason">
Please explain your situation *
</Label>
<Textarea
id="scholarship_reason"
name="scholarship_reason"
value={formData.scholarship_reason}
onChange={handleInputChange}
placeholder="Tell us why you're requesting a scholarship..."
rows={4}
className="rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
)}
</div>
</div>
);
};
export default RegistrationStep2;