bugfix: org invitation flow updated so that the invited org follows the exact steps of free trial registration.

2026-05-17 02:03:18 +03:30
parent 201be53ddd
commit 09b511a136
7 changed files with 373 additions and 158 deletions
--- a/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
+++ b/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
@@ -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>
+    </>
+  );
+}