refactor(onboarding): restructure onboarding routes and components

- Removed obsolete onboarding routes: complete, create-complex, index, verify-email, and verify. - Introduced new setup stepper page for onboarding process. - Created a multi-step setup component to handle complex creation with validation. - Added new schemas for complex creation and plan features. - Implemented detailed steps for complex name, location, plan selection, and court setup. - Enhanced error handling and user feedback during the onboarding process.
2026-06-02 10:02:28 -03:00
parent 2aaa91444d
commit 4544911f0e
51 changed files with 1006 additions and 2383 deletions
--- a/apps/frontend/src/features/onboard/components/steps/review-step.tsx
+++ b/apps/frontend/src/features/onboard/components/steps/review-step.tsx
@@ -0,0 +1,123 @@
+import type { PlanWithFeatures } from '@repo/api-contract';
+import { Check, X } from 'lucide-react';
+
+type ReviewStepProps = {
+  data: {
+    complexName: string;
+    physicalAddress: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    planCode: string;
+    setupCourts: boolean;
+    courtSportName?: string;
+    courtStartTime?: string;
+    courtEndTime?: string;
+    courtDaysOfWeek?: string[];
+  };
+  selectedPlan: PlanWithFeatures | undefined;
+};
+
+const DAY_LABELS: Record<string, string> = {
+  MONDAY: 'Lunes',
+  TUESDAY: 'Martes',
+  WEDNESDAY: 'Miércoles',
+  THURSDAY: 'Jueves',
+  FRIDAY: 'Viernes',
+  SATURDAY: 'Sábado',
+  SUNDAY: 'Domingo',
+};
+
+export function ReviewStep({ data, selectedPlan }: ReviewStepProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold">Revisá tus datos</h2>
+        <p className="text-sm text-muted-foreground">
+          Antes de confirmar, revisá que todos los datos sean correctos.
+        </p>
+      </div>
+
+      <div className="space-y-3 rounded-lg border p-4">
+        <Section title="Complejo">
+          <Row label="Nombre" value={data.complexName} />
+          <Row label="Dirección" value={data.physicalAddress} />
+          {data.city && <Row label="Ciudad" value={data.city} />}
+          {data.state && <Row label="Provincia" value={data.state} />}
+          {data.country && <Row label="País" value={data.country} />}
+        </Section>
+
+        <Section title="Plan seleccionado">
+          {selectedPlan ? (
+            <>
+              <Row label="Plan" value={`${selectedPlan.name} - $${selectedPlan.price}/mes`} />
+              <div className="mt-2 space-y-1">
+                {[
+                  ['publicBookingPage', 'Página de booking pública'],
+                  ['onlinePayments', 'Pagos online'],
+                  ['advancedReports', 'Reportes avanzados'],
+                  ['whatsappReminders', 'Recordatorios WhatsApp'],
+                ].map(([feature, label]) => {
+                  const enabled =
+                    selectedPlan.features[feature as keyof typeof selectedPlan.features];
+                  return (
+                    <div key={feature} className="flex items-center gap-2 text-xs">
+                      {enabled ? (
+                        <Check className="size-3.5 shrink-0 text-green-600" />
+                      ) : (
+                        <X className="size-3.5 shrink-0 text-muted-foreground" />
+                      )}
+                      <span className={enabled ? '' : 'text-muted-foreground'}>{label}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">No se seleccionó un plan.</p>
+          )}
+        </Section>
+
+        <Section title="Cancha">
+          {data.setupCourts ? (
+            <>
+              <Row label="Deporte" value={data.courtSportName ?? '-'} />
+              <Row
+                label="Horario"
+                value={`${data.courtStartTime ?? '08:00'} - ${data.courtEndTime ?? '22:00'}`}
+              />
+              <Row
+                label="Días"
+                value={(data.courtDaysOfWeek ?? []).map((d) => DAY_LABELS[d] ?? d).join(', ')}
+              />
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              No se crearán canchas automáticamente. Podés agregarlas después.
+            </p>
+          )}
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h3 className="mb-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+        {title}
+      </h3>
+      <div className="space-y-1.5">{children}</div>
+    </div>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between gap-4 text-sm">
+      <span className="shrink-0 text-muted-foreground">{label}</span>
+      <span className="flex-1 text-end font-medium">{value}</span>
+    </div>
+  );
+}