bugfix: org invitation flow updated so that the invited org follows the exact steps of free trial registration.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { IsString, MinLength } from 'class-validator';
|
||||
import { IsEmail, IsEnum, IsString, MinLength } from 'class-validator';
|
||||
|
||||
export class AcceptOrganizationInviteDto {
|
||||
@IsString()
|
||||
@@ -9,6 +9,12 @@ export class AcceptOrganizationInviteDto {
|
||||
@MinLength(1)
|
||||
organizationName: string;
|
||||
|
||||
@IsEmail()
|
||||
organizationEmail: string;
|
||||
|
||||
@IsEnum(['CLINIC', 'LAB'])
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
|
||||
@IsString()
|
||||
@MinLength(1)
|
||||
ownerName: string;
|
||||
|
||||
@@ -424,12 +424,23 @@ export class OrganizationService {
|
||||
|
||||
async previewInvite(token: string) {
|
||||
const invitation = await this.findValidInvitation(token);
|
||||
let organizationEmail = '';
|
||||
if (invitation.invitedOrganizationId) {
|
||||
const invitedOrg = await this.prisma.organization.findUnique({
|
||||
where: { id: invitation.invitedOrganizationId },
|
||||
select: { email: true },
|
||||
});
|
||||
if (invitedOrg?.email && !invitedOrg.email.includes('@dyolink.local')) {
|
||||
organizationEmail = invitedOrg.email;
|
||||
}
|
||||
}
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
ownerEmail: invitation.invitedOwnerEmail,
|
||||
organizationName: invitation.invitedOrganizationName,
|
||||
organizationType: invitation.invitedOrganizationType,
|
||||
organizationEmail,
|
||||
inviterOrganizationName: invitation.inviterOrganization.name,
|
||||
expiresAt: invitation.expiresAt.toISOString(),
|
||||
status: invitation.acceptedAt ? 'ACCEPTED' : 'PENDING',
|
||||
@@ -443,6 +454,14 @@ export class OrganizationService {
|
||||
throw new BadRequestException('This invitation has already been accepted');
|
||||
}
|
||||
|
||||
if (dto.organizationType !== invitation.invitedOrganizationType) {
|
||||
throw new BadRequestException(
|
||||
`Organization type must be ${invitation.invitedOrganizationType} for this invitation`,
|
||||
);
|
||||
}
|
||||
|
||||
const organizationEmail = dto.organizationEmail.trim().toLowerCase();
|
||||
|
||||
const organization = await this.prisma.$transaction(async (tx) => {
|
||||
const passwordHash = await bcrypt.hash(dto.password, 10);
|
||||
const ownerEmail = invitation.invitedOwnerEmail;
|
||||
@@ -470,8 +489,9 @@ export class OrganizationService {
|
||||
where: { id: targetOrganizationId },
|
||||
data: {
|
||||
name: dto.organizationName.trim(),
|
||||
email: ownerEmail,
|
||||
email: organizationEmail,
|
||||
owner: { connect: { id: owner.id } },
|
||||
type: { connect: { name: dto.organizationType } },
|
||||
plan: { connect: { name: 'trial' } },
|
||||
},
|
||||
});
|
||||
@@ -479,9 +499,9 @@ export class OrganizationService {
|
||||
const createdOrg = await tx.organization.create({
|
||||
data: {
|
||||
name: dto.organizationName.trim(),
|
||||
email: ownerEmail,
|
||||
email: organizationEmail,
|
||||
owner: { connect: { id: owner.id } },
|
||||
type: { connect: { name: invitation.invitedOrganizationType } },
|
||||
type: { connect: { name: dto.organizationType } },
|
||||
plan: { connect: { name: 'trial' } },
|
||||
},
|
||||
});
|
||||
|
||||
@@ -3,15 +3,45 @@
|
||||
import { Suspense, useEffect, useMemo, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useForm, type FieldErrors, type UseFormRegister, type UseFormSetValue } from 'react-hook-form';
|
||||
import type { OrganizationDetailsFormValues } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Lock, Mail, User } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/common/Button';
|
||||
import { Input } from '@/components/ui/common/Input';
|
||||
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
|
||||
import { organizationApi } from '@/lib/api/organization';
|
||||
|
||||
const acceptOrganizationInviteSchema = z
|
||||
.object({
|
||||
ownerName: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number'),
|
||||
confirmPassword: z.string(),
|
||||
organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
|
||||
organizationEmail: z.string().email('Please enter a valid organization email'),
|
||||
organizationType: z.enum(['CLINIC', 'LAB'], {
|
||||
message: 'Please select organization type',
|
||||
}),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
|
||||
type AcceptOrganizationInviteForm = z.infer<typeof acceptOrganizationInviteSchema>;
|
||||
|
||||
function AcceptOrganizationInviteContent() {
|
||||
const params = useSearchParams();
|
||||
const router = useRouter();
|
||||
const token = useMemo(() => params.get('token') || '', [params]);
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
@@ -20,15 +50,29 @@ function AcceptOrganizationInviteContent() {
|
||||
ownerEmail: string;
|
||||
organizationName: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
organizationEmail?: string;
|
||||
inviterOrganizationName: string;
|
||||
expiresAt: string;
|
||||
status: 'PENDING' | 'ACCEPTED';
|
||||
} | null>(null);
|
||||
|
||||
const [ownerName, setOwnerName] = useState('');
|
||||
const [organizationName, setOrganizationName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
trigger,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<AcceptOrganizationInviteForm>({
|
||||
resolver: zodResolver(acceptOrganizationInviteSchema),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
organizationType: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const organizationType = watch('organizationType');
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
@@ -43,102 +87,168 @@ function AcceptOrganizationInviteContent() {
|
||||
try {
|
||||
const res = await organizationApi.previewInvite(token);
|
||||
setInviteInfo(res.data);
|
||||
setOrganizationName(res.data.organizationName || '');
|
||||
reset({
|
||||
ownerName: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
organizationName: res.data.organizationName || '',
|
||||
organizationEmail: res.data.organizationEmail || '',
|
||||
organizationType: res.data.organizationType,
|
||||
});
|
||||
if (res.data.status === 'ACCEPTED') {
|
||||
setSuccess('This invitation is already accepted. You can log in now.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Could not load invitation');
|
||||
} catch (e: unknown) {
|
||||
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
|
||||
setError(message || 'Could not load invitation');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [token]);
|
||||
}, [token, reset]);
|
||||
|
||||
async function onAccept() {
|
||||
const handleNext = async () => {
|
||||
const isValid = await trigger(['ownerName', 'password', 'confirmPassword']);
|
||||
if (isValid) {
|
||||
setStep(2);
|
||||
setError('');
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (data: AcceptOrganizationInviteForm) => {
|
||||
if (!token) return;
|
||||
setError('');
|
||||
setSuccess('');
|
||||
if (!ownerName.trim()) return setError('Owner name is required');
|
||||
if (!organizationName.trim()) return setError('Organization name is required');
|
||||
if (password.length < 8) return setError('Password must be at least 8 characters');
|
||||
if (password !== confirmPassword) return setError('Passwords do not match');
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await organizationApi.acceptInvite({
|
||||
token,
|
||||
ownerName: ownerName.trim(),
|
||||
organizationName: organizationName.trim(),
|
||||
password,
|
||||
ownerName: data.ownerName.trim(),
|
||||
password: data.password,
|
||||
organizationName: data.organizationName.trim(),
|
||||
organizationEmail: data.organizationEmail.trim(),
|
||||
organizationType: data.organizationType,
|
||||
});
|
||||
setSuccess('Invitation Accepted. Redirecting to login...');
|
||||
setSuccess('Invitation accepted. Redirecting to login...');
|
||||
setTimeout(() => router.replace('/login'), 1000);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Could not accept invitation');
|
||||
} catch (e: unknown) {
|
||||
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
|
||||
setError(message || 'Could not accept invitation');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md surface-card p-6 space-y-5">
|
||||
<h1 className="text-xl font-semibold text-text-primary">Accept organization invitation</h1>
|
||||
<div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<Link href="/" className="flex justify-center">
|
||||
<span className="text-3xl font-semibold text-text-primary">DyoLink</span>
|
||||
</Link>
|
||||
<h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
|
||||
Accept organization invitation
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-text-secondary">
|
||||
Already have an account?{' '}
|
||||
<Link href="/login" className="font-medium text-primary hover:opacity-90">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</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">
|
||||
{loading ? (
|
||||
<p className="text-sm text-text-secondary">Loading invitation...</p>
|
||||
) : (
|
||||
<>
|
||||
{inviteInfo && (
|
||||
<div className="rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
|
||||
<div className="mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
|
||||
<p>
|
||||
Invited by: <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
|
||||
</p>
|
||||
<p>
|
||||
Owner email: <span className="text-text-primary">{inviteInfo.ownerEmail}</span>
|
||||
Invited by:{' '}
|
||||
<span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inviteInfo?.status !== 'ACCEPTED' && (
|
||||
<RegistrationProgressSteps step={step} />
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-300">
|
||||
{error}
|
||||
<div className="mb-4 p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
|
||||
<div className="mb-4 rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inviteInfo?.status !== 'ACCEPTED' && (
|
||||
<div className="space-y-3">
|
||||
<Input label="Owner name" value={ownerName} onChange={(e) => setOwnerName(e.target.value)} />
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Input
|
||||
label="Organization name"
|
||||
value={organizationName}
|
||||
onChange={(e) => setOrganizationName(e.target.value)}
|
||||
label="Owner email"
|
||||
value={inviteInfo?.ownerEmail ?? ''}
|
||||
readOnly
|
||||
disabled
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Create password"
|
||||
label="Full name"
|
||||
{...register('ownerName')}
|
||||
placeholder="John Doe"
|
||||
error={errors.ownerName?.message}
|
||||
icon={<User className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Password"
|
||||
{...register('password')}
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Confirm password"
|
||||
{...register('confirmPassword')}
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
|
||||
<Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<OrganizationDetailsFields
|
||||
register={register as unknown as UseFormRegister<OrganizationDetailsFormValues>}
|
||||
errors={errors as FieldErrors<OrganizationDetailsFormValues>}
|
||||
organizationType={organizationType}
|
||||
setValue={setValue as unknown as UseFormSetValue<OrganizationDetailsFormValues>}
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<Button type="button" variant="outline" onClick={() => setStep(1)}>
|
||||
Back
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" isLoading={submitting} fullWidth>
|
||||
Activate organization
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-text-muted">
|
||||
Already have access? <Link href="/login" className="text-primary">Go to login</Link>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client';
|
||||
|
||||
import { Building2, Mail } from 'lucide-react';
|
||||
import type { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
|
||||
import { Input } from '@/components/ui/common/Input';
|
||||
|
||||
export type OrganizationDetailsFormValues = {
|
||||
organizationName: string;
|
||||
organizationEmail: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
};
|
||||
|
||||
type OrganizationDetailsFieldsProps = {
|
||||
register: UseFormRegister<OrganizationDetailsFormValues>;
|
||||
errors: FieldErrors<OrganizationDetailsFormValues>;
|
||||
organizationType: 'CLINIC' | 'LAB' | undefined;
|
||||
setValue: UseFormSetValue<OrganizationDetailsFormValues>;
|
||||
};
|
||||
|
||||
export function OrganizationDetailsFields({
|
||||
register,
|
||||
errors,
|
||||
organizationType,
|
||||
setValue,
|
||||
}: OrganizationDetailsFieldsProps) {
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
label="Organization name"
|
||||
{...register('organizationName')}
|
||||
placeholder="Sunshine Dental Clinic"
|
||||
error={errors.organizationName?.message}
|
||||
icon={<Building2 className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
'use client';
|
||||
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
type RegistrationProgressStepsProps = {
|
||||
step: number;
|
||||
firstLabel?: string;
|
||||
secondLabel?: string;
|
||||
};
|
||||
|
||||
export function RegistrationProgressSteps({
|
||||
step,
|
||||
firstLabel = 'Account',
|
||||
secondLabel = 'Organization',
|
||||
}: RegistrationProgressStepsProps) {
|
||||
return (
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
{firstLabel}
|
||||
</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'
|
||||
}`}
|
||||
>
|
||||
{secondLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -92,6 +92,7 @@ export const organizationApi = {
|
||||
ownerEmail: string;
|
||||
organizationName: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
organizationEmail?: string;
|
||||
inviterOrganizationName: string;
|
||||
expiresAt: string;
|
||||
status: 'PENDING' | 'ACCEPTED';
|
||||
@@ -106,6 +107,8 @@ export const organizationApi = {
|
||||
acceptInvite: async (body: {
|
||||
token: string;
|
||||
organizationName: string;
|
||||
organizationEmail: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
ownerName: string;
|
||||
password: string;
|
||||
}): Promise<{ success: boolean; message: string; data: { organizationId: string } }> => {
|
||||
|
||||
Reference in New Issue
Block a user