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

174
src/components/registration/RegistrationStep3.js Normal file
View File

@@ -0,0 +1,174 @@
import React, { useEffect } from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { Textarea } from '../ui/textarea';
const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
// Pre-fill directory fields when user opts in
useEffect(() => {
if (formData.show_in_directory && !formData.directory_email) {
setFormData(prev => ({
...prev,
directory_email: prev.email || '',
directory_address: prev.address || '',
directory_phone: prev.phone || '',
directory_dob: prev.date_of_birth || '',
directory_partner_name: prev.partner_first_name && prev.partner_last_name
? `${prev.partner_first_name} ${prev.partner_last_name}`
: ''
}));
}
}, [formData.show_in_directory]);
return (
<div className="space-y-6">
<div className="space-y-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
Members Directory
</h2>
<p className="text-[#6B708D]">
Would you like to be displayed on our private members directory? (optional and you can change the answer later)
</p>
{/* Directory Opt-in Radio Buttons */}
<div className="space-y-3">
<div
className={`
p-4 rounded-xl border-2 cursor-pointer transition-all
${formData.show_in_directory
? 'border-[#E07A5F] bg-[#E07A5F]/5'
: 'border-[#EAE0D5] hover:border-[#6B708D]'
}
`}
onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
>
<div className="flex items-center space-x-3">
<div className={`
w-5 h-5 rounded-full border-2 flex items-center justify-center
${formData.show_in_directory ? 'border-[#E07A5F]' : 'border-[#EAE0D5]'}
`}>
{formData.show_in_directory && (
<div className="w-3 h-3 rounded-full bg-[#E07A5F]" />
)}
</div>
<span className="font-medium text-[#3D405B]">
Yes, include me in the Members Directory
</span>
</div>
</div>
<div
className={`
p-4 rounded-xl border-2 cursor-pointer transition-all
${!formData.show_in_directory
? 'border-[#E07A5F] bg-[#E07A5F]/5'
: 'border-[#EAE0D5] hover:border-[#6B708D]'
}
`}
onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
>
<div className="flex items-center space-x-3">
<div className={`
w-5 h-5 rounded-full border-2 flex items-center justify-center
${!formData.show_in_directory ? 'border-[#E07A5F]' : 'border-[#EAE0D5]'}
`}>
{!formData.show_in_directory && (
<div className="w-3 h-3 rounded-full bg-[#E07A5F]" />
)}
</div>
<span className="font-medium text-[#3D405B]">
No, don't include me in the Members Directory
</span>
</div>
</div>
</div>
</div>
{/* Conditional Directory Fields */}
{formData.show_in_directory && (
<div className="space-y-4 mt-6 p-6 bg-[#FDFCF8] rounded-xl border border-[#EAE0D5]">
<p className="text-[#6B708D] text-sm">
Below, choose what information you would like include in the Members Only Directory.
(If you ever want to update this information, remember the Directory Section and Account Section are separate)
</p>
<div>
<Label htmlFor="directory_email">Your preferred contact email</Label>
<Input
id="directory_email"
name="directory_email"
type="email"
value={formData.directory_email}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
<div>
<Label htmlFor="directory_bio">Bio for my Member Profile</Label>
<Textarea
id="directory_bio"
name="directory_bio"
value={formData.directory_bio}
onChange={handleInputChange}
placeholder="Tell other members about yourself..."
rows={4}
className="rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
<div>
<Label htmlFor="directory_address">Preferred address</Label>
<Input
id="directory_address"
name="directory_address"
value={formData.directory_address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
<div>
<Label htmlFor="directory_phone">Preferred contact phone number</Label>
<Input
id="directory_phone"
name="directory_phone"
type="tel"
value={formData.directory_phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
<div>
<Label htmlFor="directory_dob">Date of birth</Label>
<Input
id="directory_dob"
name="directory_dob"
type="date"
value={formData.directory_dob}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
<div>
<Label htmlFor="directory_partner_name">
Enter your partner's name as you'd like it to appear in the Members Directory
</Label>
<Input
id="directory_partner_name"
name="directory_partner_name"
value={formData.directory_partner_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
/>
</div>
</div>
)}
</div>
);
};
export default RegistrationStep3;