bugfix: org invitation flow updated so that the invited org follows the exact steps of free trial registration.
This commit is contained in:
@@ -5,8 +5,10 @@ import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import Link from 'next/link';
|
||||
import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
|
||||
import { Mail, Lock, User } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
|
||||
import { Button } from '@/components/ui/common/Button';
|
||||
import { Input } from '@/components/ui/common/Input';
|
||||
const registerSchema = z.object({
|
||||
@@ -89,31 +91,7 @@ export default function RegisterPage() {
|
||||
</div>
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="surface-card py-8 px-4 sm:px-10">
|
||||
{/* Progress Steps */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 1 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
|
||||
1
|
||||
</div>
|
||||
<div className={`ml-2 text-sm font-medium ${step >= 1 ? 'text-primary' : 'text-text-muted'
|
||||
}`}>
|
||||
Account
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
|
||||
<div className="flex items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 2 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
|
||||
|
||||
2
|
||||
</div>
|
||||
<div className={`ml-2 text-sm font-medium ${step >= 2 ? 'text-primary' : 'text-text-muted'
|
||||
}`}>
|
||||
Organization
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RegistrationProgressSteps step={step} />
|
||||
{/* Trial Info Banner */}
|
||||
<div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
|
||||
<h3 className="text-sm font-medium text-text-primary mb-2">Your trial
|
||||
@@ -177,57 +155,12 @@ export default function RegisterPage() {
|
||||
)}
|
||||
{step === 2 && (
|
||||
<>
|
||||
<Input
|
||||
label="Organization name"
|
||||
{...register('organizationName')}
|
||||
placeholder="Sunshine Dental Clinic"
|
||||
error={errors.organizationName?.message}
|
||||
icon={<Building2 className="h-5 w-5 icon-flat" />}
|
||||
<OrganizationDetailsFields
|
||||
register={register as never}
|
||||
errors={errors as never}
|
||||
organizationType={organizationType}
|
||||
setValue={setValue as never}
|
||||
/>
|
||||
<Input
|
||||
label="Organization email"
|
||||
{...register('organizationEmail')}
|
||||
type="email"
|
||||
placeholder="contact@sunshineclinic.com"
|
||||
error={errors.organizationEmail?.message}
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-secondary mb-2">
|
||||
Organization type
|
||||
</label>
|
||||
<input type="hidden" {...register('organizationType')} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setValue('organizationType', 'CLINIC', { shouldValidate: true });
|
||||
}}
|
||||
className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'CLINIC' ? 'border-primary/60 bg-primary-soft text-text-primary'
|
||||
: 'border-border text-text-secondary hover:border-border-strong'
|
||||
}`}
|
||||
>
|
||||
<Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
|
||||
<span className="text-sm font-medium">Dental Clinic</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setValue('organizationType', 'LAB', { shouldValidate: true });
|
||||
}}
|
||||
className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'LAB'
|
||||
? 'border-primary/60 bg-primary-soft text-text-primary'
|
||||
: 'border-border text-text-secondary hover:border-border-strong'
|
||||
}`}
|
||||
>
|
||||
<Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
|
||||
<span className="text-sm font-medium">Dental Lab</span>
|
||||
</button>
|
||||
</div>
|
||||
{errors.organizationType && (
|
||||
<p className="mt-2 text-sm text-red-600">{errors.organizationType.message}</p>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
|
||||
Reference in New Issue
Block a user