Initial commit

apps/frontend/src/features/onboard/components/onboarding-complete-step.tsx

@@ -0,0 +1,119 @@
+import type { PlanSummary } from '@repo/api-contract'
+import { Controller, type UseFormReturn } from 'react-hook-form'
+import { Button } from '@/components/ui/button'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import type { CompleteValues } from '@/features/onboard/onboarding.types'
+
+type OnboardingCompleteStepProps = {
+  form: UseFormReturn<CompleteValues>
+  plans: PlanSummary[]
+  verifiedEmail: string | null
+  errorMessage: string | null
+  infoMessage: string | null
+  planPlaceholder: string
+  onSubmit: (values: CompleteValues) => Promise<void>
+}
+
+export function OnboardingCompleteStep({
+  form,
+  plans,
+  verifiedEmail,
+  errorMessage,
+  infoMessage,
+  planPlaceholder,
+  onSubmit,
+}: OnboardingCompleteStepProps) {
+  return (
+    <form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
+      {verifiedEmail && (
+        <Field>
+          <FieldLabel htmlFor="verified-email">Email verificado</FieldLabel>
+          <Input id="verified-email" type="email" value={verifiedEmail} disabled readOnly />
+        </Field>
+      )}
+
+      <Field data-invalid={Boolean(form.formState.errors.password)}>
+        <FieldLabel htmlFor="onboard-password">Contrasena</FieldLabel>
+        <Input
+          id="onboard-password"
+          type="password"
+          placeholder="********"
+          aria-invalid={Boolean(form.formState.errors.password)}
+          {...form.register('password')}
+        />
+        <FieldError errors={[form.formState.errors.password]} />
+      </Field>
+
+      <Field data-invalid={Boolean(form.formState.errors.complexName)}>
+        <FieldLabel htmlFor="complex-name">Nombre del complejo</FieldLabel>
+        <Input
+          id="complex-name"
+          type="text"
+          placeholder="Complejo Las Palmeras"
+          aria-invalid={Boolean(form.formState.errors.complexName)}
+          {...form.register('complexName')}
+        />
+        <FieldError errors={[form.formState.errors.complexName]} />
+      </Field>
+
+      <Field data-invalid={Boolean(form.formState.errors.physicalAddress)}>
+        <FieldLabel htmlFor="physical-address">Direccion fisica</FieldLabel>
+        <Input
+          id="physical-address"
+          type="text"
+          placeholder="Ej: Av. San Martin 1234, Salta"
+          aria-invalid={Boolean(form.formState.errors.physicalAddress)}
+          {...form.register('physicalAddress')}
+        />
+        <FieldError errors={[form.formState.errors.physicalAddress]} />
+      </Field>
+
+      <Field data-invalid={Boolean(form.formState.errors.planCode)}>
+        <FieldLabel htmlFor="plan-code">Plan</FieldLabel>
+        <Controller
+          control={form.control}
+          name="planCode"
+          render={({ field }) => (
+            <select
+              id="plan-code"
+              className="h-10 w-full rounded-md border bg-background px-3 text-sm"
+              aria-invalid={Boolean(form.formState.errors.planCode)}
+              value={field.value ?? ''}
+              onChange={(event) => {
+                field.onChange(event.target.value)
+              }}
+              disabled={plans.length === 0}
+            >
+              <option value="">
+                {plans.length > 0 ? planPlaceholder : 'No hay planes disponibles'}
+              </option>
+              {plans.map((plan) => (
+                <option key={plan.code} value={plan.code}>
+                  {plan.name} - ${plan.price.toFixed(2)}
+                </option>
+              ))}
+            </select>
+          )}
+        />
+        {plans.length === 0 && (
+          <p className="text-xs text-muted-foreground">
+            Carga planes en la base para continuar con el onboarding.
+          </p>
+        )}
+        <FieldError errors={[form.formState.errors.planCode]} />
+      </Field>
+
+      {errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
+      {infoMessage && <p className="text-sm text-muted-foreground">{infoMessage}</p>}
+
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={form.formState.isSubmitting || !form.formState.isValid}
+      >
+        {form.formState.isSubmitting ? 'Finalizando...' : 'Completar onboarding'}
+      </Button>
+    </form>
+  )
+}