feat: implement StepEngine architecture for assistant onboarding and configuration flows
This commit is contained in:
File diff suppressed because it is too large
Load Diff
+38
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function OrganizationPicker({ allOrganizations, loadOrganizationContext }: Props) {
|
||||
return (
|
||||
<QuestionCard
|
||||
isActive={true}
|
||||
title="Selecciona la Organización"
|
||||
description="¿A qué negocio deseas aplicar estos cambios?"
|
||||
onNext={() => {}}
|
||||
disableNext={true}
|
||||
nextLabel=""
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
|
||||
{allOrganizations.map((org: any) => (
|
||||
<div
|
||||
key={org.id || org._id}
|
||||
onClick={() => loadOrganizationContext(org)}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '2px solid transparent',
|
||||
color: 'white', transition: 'all 0.2s ease',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center'
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--wine-red)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.borderColor = 'transparent'}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>{org.name}</h4>
|
||||
<p style={{ margin: 0, fontSize: '12px', opacity: 0.7 }}>{org.street} {org.streetNumber}, {org.city}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function SuccessScreen(props: Props) {
|
||||
const { action, flowId, isStandaloneAction, router } = props;
|
||||
|
||||
const getSuccessMessage = () => {
|
||||
if (action === "new-service") return "Has agregado tu nuevo servicio exitosamente.";
|
||||
if (action === "edit-schedule") return "Tus horarios se han actualizado exitosamente.";
|
||||
if (action === "edit-location") return "La ubicación de tu negocio ha sido actualizada.";
|
||||
if (action === "edit-contact") return "Tus datos de contacto han sido actualizados.";
|
||||
if (action === "edit-appearance") return "La apariencia de tu negocio ha sido actualizada.";
|
||||
if (flowId === "override-schedule" || flowId === "disable-schedule") return "El horario especial ha sido guardado exitosamente.";
|
||||
if (flowId === "new-collaborator") return "El colaborador fue invitado exitosamente.";
|
||||
if (flowId === "setup-collaborator") return "El colaborador ha sido configurado exitosamente y ya puede comenzar a recibir reservas.";
|
||||
if (flowId === "notifications") return "La configuración de notificaciones se ha guardado exitosamente.";
|
||||
if (flowId === "whatsapp-bot") return "Tu bot de WhatsApp está configurado y funcionando. Tus clientes recibirán notificaciones automáticas por WhatsApp.";
|
||||
if (flowId === "open-reservation-periods") return "El período de reservas fue extendido exitosamente.";
|
||||
if (isStandaloneAction) return "Tus cambios se han guardado exitosamente.";
|
||||
return "Has configurado exitosamente tu negocio. Todo está listo para que empieces a recibir reservas y gestionar tu agenda como un profesional.";
|
||||
};
|
||||
|
||||
const successButtonStyle: React.CSSProperties = {
|
||||
padding: '16px 40px', fontSize: '18px', fontWeight: 'bold',
|
||||
background: 'white', color: 'var(--wine-red)', border: 'none',
|
||||
borderRadius: '30px', cursor: 'pointer',
|
||||
boxShadow: '0 4px 15px rgba(0,0,0,0.3)',
|
||||
transition: 'transform 0.2s, box-shadow 0.2s'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh',
|
||||
background: 'linear-gradient(135deg, #1a0515 0%, #300018 100%)',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
||||
zIndex: 9999, overflow: 'hidden', padding: '20px', boxSizing: 'border-box'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '120px', height: '120px', borderRadius: '50%', background: 'rgba(255,255,255,0.1)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '30px',
|
||||
boxShadow: '0 0 50px rgba(255, 255, 255, 0.2)',
|
||||
animation: 'pulse 2s infinite ease-in-out'
|
||||
}}>
|
||||
<span style={{ fontSize: '60px' }}>🎉</span>
|
||||
</div>
|
||||
<h1 style={{ color: 'white', fontSize: '32px', marginBottom: '15px', textAlign: 'center', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>
|
||||
¡Felicitaciones!
|
||||
</h1>
|
||||
<p style={{ color: 'rgba(255,255,255,0.8)', fontSize: '18px', maxWidth: '500px', textAlign: 'center', marginBottom: '40px', lineHeight: '1.5' }}>
|
||||
{getSuccessMessage()}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (isStandaloneAction) router.push("/admin/assistant");
|
||||
else window.location.href = "/landing/dashboard";
|
||||
}}
|
||||
style={successButtonStyle}
|
||||
onMouseOver={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = '0 6px 20px rgba(255,255,255,0.3)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
|
||||
}}
|
||||
>
|
||||
{isStandaloneAction ? "Volver al Menú Principal" : "Ir a mi Panel de Control"}
|
||||
</button>
|
||||
<style>{`
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
|
||||
70% { transform: scale(1.05); box-shadow: 0 0 0 30px rgba(255, 255, 255, 0); }
|
||||
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { NotificationChannel } from "@models/NotificationPreferences.model";
|
||||
|
||||
export const NOTIF_CHANNELS: { key: NotificationChannel; label: string; description: string }[] = [
|
||||
{ key: "whatsapp", label: "WhatsApp", description: "Mensajes automáticos por WhatsApp." },
|
||||
{ key: "email", label: "Email", description: "Correos electrónicos al cliente." },
|
||||
{ key: "system", label: "Sistema", description: "Notificaciones dentro de la plataforma." }
|
||||
];
|
||||
|
||||
export const NOTIF_REMINDER_PRESETS: { minutes: number; label: string }[] = [
|
||||
{ minutes: 60, label: "1 hora antes" },
|
||||
{ minutes: 180, label: "3 horas antes" },
|
||||
{ minutes: 360, label: "6 horas antes" },
|
||||
{ minutes: 720, label: "12 horas antes" },
|
||||
{ minutes: 1440, label: "1 día antes" },
|
||||
{ minutes: 2880, label: "2 días antes" }
|
||||
];
|
||||
|
||||
export const ALL_NOTIF_CHANNELS: NotificationChannel[] = ["whatsapp", "email", "system"];
|
||||
@@ -0,0 +1,9 @@
|
||||
import { ReservationPeriodDuration } from "@models/SchedulesEnabled.type";
|
||||
|
||||
export const reservationPeriodOptions: Array<ReservationPeriodDuration & { label: string }> = [
|
||||
{ unit: "week", value: 1, label: "1 semana" },
|
||||
{ unit: "week", value: 2, label: "2 semanas" },
|
||||
{ unit: "week", value: 3, label: "3 semanas" },
|
||||
{ unit: "month", value: 1, label: "1 mes" },
|
||||
{ unit: "month", value: 2, label: "2 meses" },
|
||||
];
|
||||
@@ -0,0 +1,292 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function DisableScheduleFlow(props: Props) {
|
||||
const { currentStepIndex, scheduleScope, setScheduleScope, targetEmployeeId, setTargetEmployeeId, allEmployees, handleNext, workingDaysMode, setWorkingDaysMode, openTime, setOpenTime, closeTime, setCloseTime, hasBreak, setHasBreak, breakStart, setBreakStart, breakEnd, setBreakEnd, isCreating, handleUpdateScheduleSubmit, handleOverrideScheduleSubmit, disableDuration, setDisableDuration, disableStartDate, setDisableStartDate, disableEndDate, setDisableEndDate, isFullDayDisabled, setIsFullDayDisabled, disableStartTime, setDisableStartTime, disableEndTime, setDisableEndTime, handleDisableScheduleSubmit } = props;
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title="Cerrar Agenda"
|
||||
description="¿A quiénes quieres aplicar esta inhabilitación de agenda?"
|
||||
onNext={() => {
|
||||
if (scheduleScope === "specific" && !targetEmployeeId) {
|
||||
alert("Por favor selecciona un colaborador.");
|
||||
return;
|
||||
}
|
||||
handleNext();
|
||||
}}
|
||||
disableNext={!scheduleScope || (scheduleScope === "specific" && !targetEmployeeId)}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
|
||||
<div
|
||||
onClick={() => setScheduleScope("me")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "me" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "me" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>Solo a mí</h4>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setScheduleScope("specific")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "specific" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "specific" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>A un colaborador en particular</h4>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setScheduleScope("all")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "all" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "all" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>A todos mis colaboradores</h4>
|
||||
</div>
|
||||
|
||||
{scheduleScope === "specific" && (
|
||||
<div style={{ marginTop: '15px', width: '100%' }}>
|
||||
<select
|
||||
value={targetEmployeeId || ""}
|
||||
onChange={(e) => setTargetEmployeeId(e.target.value)}
|
||||
style={{
|
||||
width: '100%', padding: '12px', borderRadius: '8px',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', border: '1px solid rgba(255,255,255,0.2)',
|
||||
outline: 'none', fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
<option value="" disabled style={{ color: 'black' }}>-- Seleccionar --</option>
|
||||
{allEmployees.map((emp: any) => (
|
||||
<option key={emp.id || emp._id || emp.employeeId} value={emp.id || emp._id || emp.employeeId} style={{ color: 'black' }}>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="Duración del Cierre"
|
||||
description="¿Por cuánto tiempo se cerrará la agenda?"
|
||||
onNext={handleNext}
|
||||
disableNext={!disableDuration}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '15px', width: '100%', justifyContent: 'center' }}>
|
||||
<div
|
||||
onClick={() => setDisableDuration("one-day")}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: disableDuration === "one-day" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${disableDuration === "one-day" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Solo por un día
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setDisableDuration("multi-day")}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: disableDuration === "multi-day" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${disableDuration === "multi-day" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Por varios días
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
{disableDuration === "one-day" && (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="Fecha del Cierre"
|
||||
description="Selecciona la fecha en la que no se recibirán turnos."
|
||||
onNext={handleNext}
|
||||
disableNext={!disableStartDate}
|
||||
>
|
||||
<div style={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
|
||||
<input
|
||||
type="date"
|
||||
value={disableStartDate}
|
||||
onChange={(e) => setDisableStartDate(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '16px', fontFamily: 'sans-serif'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="Rango Horario"
|
||||
description="¿Esta inhabilitación aplica para todo el día o solo en una franja horaria?"
|
||||
onNext={() => {
|
||||
if (isFullDayDisabled) {
|
||||
handleDisableScheduleSubmit();
|
||||
} else if (disableStartTime && disableEndTime) {
|
||||
handleDisableScheduleSubmit();
|
||||
}
|
||||
}}
|
||||
nextLabel={isCreating ? "Guardando..." : "Cerrar Agenda"}
|
||||
disableNext={(!isFullDayDisabled && (!disableStartTime || !disableEndTime)) || isCreating}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', gap: '15px', width: '100%' }}>
|
||||
<div
|
||||
onClick={() => setIsFullDayDisabled(true)}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: isFullDayDisabled === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${isFullDayDisabled === true ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Todo el día
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setIsFullDayDisabled(false)}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: isFullDayDisabled === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${isFullDayDisabled === false ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Franja Específica
|
||||
</div>
|
||||
</div>
|
||||
{!isFullDayDisabled && (
|
||||
<div style={{ display: 'flex', gap: '20px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Desde (Hora)</label>
|
||||
<input
|
||||
type="time"
|
||||
value={disableStartTime}
|
||||
onChange={(e) => setDisableStartTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Hasta (Hora)</label>
|
||||
<input
|
||||
type="time"
|
||||
value={disableEndTime}
|
||||
onChange={(e) => setDisableEndTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
)}
|
||||
|
||||
{disableDuration === "multi-day" && (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="¿Cuándo inicia?"
|
||||
description="Selecciona la fecha y hora de inicio de la inhabilitación."
|
||||
onNext={handleNext}
|
||||
disableNext={!disableStartDate || !disableStartTime}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Fecha de Inicio</label>
|
||||
<input
|
||||
type="date"
|
||||
value={disableStartDate}
|
||||
onChange={(e) => setDisableStartDate(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '16px', fontFamily: 'sans-serif'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Hora de Inicio</label>
|
||||
<input
|
||||
type="time"
|
||||
value={disableStartTime}
|
||||
onChange={(e) => setDisableStartTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="¿Cuándo termina?"
|
||||
description="Selecciona la fecha y hora en la que finaliza el cierre."
|
||||
onNext={handleDisableScheduleSubmit}
|
||||
nextLabel={isCreating ? "Guardando..." : "Cerrar Agenda"}
|
||||
disableNext={!disableEndDate || !disableEndTime || isCreating}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Fecha de Fin</label>
|
||||
<input
|
||||
type="date"
|
||||
value={disableEndDate}
|
||||
onChange={(e) => setDisableEndDate(e.target.value)}
|
||||
min={disableStartDate}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '16px', fontFamily: 'sans-serif'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Hora de Fin</label>
|
||||
<input
|
||||
type="time"
|
||||
value={disableEndTime}
|
||||
onChange={(e) => setDisableEndTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import React from "react";
|
||||
import ReactAvatar from "react-avatar";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
import QuestionInput from "../../QuestionCard/QuestionInput";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function NewCollaboratorFlow(props: Props) {
|
||||
const { currentStepIndex, inviteEmail, setInviteEmail, inviteEmailError, setInviteEmailError, isSearchingEmail, handleSearchCollaboratorEmail, handleKeyDown, inviteCollaborator, inviteRole, setInviteRole, handleNext, handleCreateCollaborator, isCreating, createdCompanyId, router, resetInviteFlow, inviteFlowNotice, isUpgradeRequired } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<QuestionCard isActive={currentStepIndex === 1} title="Buscar Colaborador" description="Ingresa el e-mail del usuario. Importante: debe estar registrado previamente en TurnosXpress." onNext={handleSearchCollaboratorEmail} disableNext={!inviteEmail || !inviteEmail.includes("@") || isSearchingEmail} nextLabel={isSearchingEmail ? "Buscando..." : "Buscar"}>
|
||||
<QuestionInput
|
||||
placeholder="ejemplo@correo.com"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => { setInviteEmail(e.target.value); setInviteEmailError(""); }}
|
||||
onKeyDown={(e) => {
|
||||
if (inviteEmail.includes("@") && !isSearchingEmail) handleKeyDown(e, handleSearchCollaboratorEmail);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
{inviteEmailError && (
|
||||
<div style={{ marginTop: '15px', padding: '15px', background: 'rgba(255,0,0,0.1)', border: '1px solid rgba(255,0,0,0.3)', borderRadius: '8px', color: '#ff9999', fontSize: '13px' }}>
|
||||
<b>No encontramos este e-mail.</b><br />
|
||||
Asegúrate de que la persona ya haya creado una cuenta en TurnosXpress con este correo. Pídele que se registre primero y vuelve a intentarlo.
|
||||
</div>
|
||||
)}
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === 2} title="Configurar Rol" description={`¿Qué permisos quieres darle a ${inviteCollaborator?.firstName || inviteCollaborator?.fullName}?`} onNext={handleNext}>
|
||||
{inviteCollaborator && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px' }}>
|
||||
{inviteCollaborator.avatar ? (
|
||||
<img src={inviteCollaborator.avatar} alt="Avatar" style={{ width: 60, height: 60, borderRadius: '50%', marginBottom: '10px', objectFit: 'cover' }} />
|
||||
) : (
|
||||
<ReactAvatar name={inviteCollaborator.fullName} size="60" round color="#600018" style={{ marginBottom: '10px' }} />
|
||||
)}
|
||||
<div style={{ color: 'white', fontWeight: 'bold' }}>{inviteCollaborator.fullName}</div>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
|
||||
<div onClick={() => setInviteRole("colaborador")} style={{ padding: '15px', borderRadius: '12px', background: inviteRole === "colaborador" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)', border: `1px solid ${inviteRole === "colaborador" ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`, cursor: 'pointer', color: 'white', transition: 'all 0.2s' }}>
|
||||
<div style={{ fontWeight: 'bold' }}>Colaborador</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.8, marginTop: '5px' }}>Solo podrá ver y gestionar su propia agenda de turnos.</div>
|
||||
</div>
|
||||
<div onClick={() => setInviteRole("admin")} style={{ padding: '15px', borderRadius: '12px', background: inviteRole === "admin" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)', border: `1px solid ${inviteRole === "admin" ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`, cursor: 'pointer', color: 'white', transition: 'all 0.2s' }}>
|
||||
<div style={{ fontWeight: 'bold' }}>Administrador</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.8, marginTop: '5px' }}>Tendrá acceso total para modificar horarios, servicios y otros colaboradores de esta organización.</div>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === 3 && !isUpgradeRequired} title="Confirmar Invitación" description={`Se enviará una invitación a ${inviteCollaborator?.email}. El usuario deberá aceptarla para comenzar.`} onNext={handleCreateCollaborator} disableNext={isCreating} nextLabel={isCreating ? "Enviando..." : "Enviar Invitación"}>{null}</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === 4} title="Invitación Enviada" description="¿Cómo quieres continuar?">
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
|
||||
<ActionCard onClick={resetInviteFlow} title="Invitar otro colaborador" description="Agrega otra persona a tu equipo." />
|
||||
<ActionCard onClick={() => router.push(`/admin/assistant?flow=update-schedule${createdCompanyId ? `&companyId=${createdCompanyId}` : ""}`)} title="Configurar mis horarios" description="Define tus horarios personales de atención." />
|
||||
<ActionCard onClick={() => router.push("/admin/assistant")} title="Terminar" description="Volver a la home del asistente." />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === 5} title="Invitación Pendiente" description={inviteFlowNotice || "No pudimos enviar la invitación en este momento."}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
|
||||
<ActionCard onClick={resetInviteFlow} title="Invitar otro colaborador" description="Busca otra persona para sumar al equipo." />
|
||||
<ActionCard onClick={() => router.push("/admin/assistant")} title="Volver al asistente" description="Regresar a la home del asistente." />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === 6} title="El usuario ya pertenece" description={inviteFlowNotice || "Este usuario ya pertenece a la compañía."}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
|
||||
<ActionCard onClick={resetInviteFlow} title="Invitar otro colaborador" description="Busca otra persona para sumar al equipo." />
|
||||
<ActionCard onClick={() => router.push("/admin/assistant")} title="Volver al asistente" description="Regresar a la home del asistente." />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === 3 && isUpgradeRequired} title="¡Haz crecer tu equipo!" description="Parece que has alcanzado el límite de colaboradores de tu plan actual. Actualiza tu suscripción para seguir sumando profesionales a tu negocio." onNext={() => window.location.href = "/landing/pricing"} nextLabel="Ver Planes y Mejorar">
|
||||
<div style={{ padding: '20px', background: 'linear-gradient(135deg, rgba(255, 65, 108, 0.1) 0%, rgba(255, 75, 43, 0.1) 100%)', border: '1px solid var(--wine-red)', borderRadius: '15px', color: 'white', textAlign: 'center', margin: '15px 0' }}>
|
||||
<div style={{ fontSize: '40px', marginBottom: '10px' }}>🚀</div>
|
||||
<h4 style={{ margin: '0 0 10px 0', fontSize: '18px' }}>Beneficios de expandirte</h4>
|
||||
<ul style={{ textAlign: 'left', margin: '0', padding: '0 0 0 20px', opacity: 0.9, fontSize: '14px', lineHeight: '1.6' }}>
|
||||
<li>Agendas ilimitadas para todo tu equipo.</li>
|
||||
<li>Aumento exponencial de tus reservas diarias.</li>
|
||||
<li>Control total sobre los permisos de cada integrante.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionCard({ onClick, title, description }: Props) {
|
||||
return (
|
||||
<div onClick={onClick} style={{ padding: '15px', borderRadius: '12px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer', color: 'white', transition: 'all 0.2s' }}>
|
||||
<div style={{ fontWeight: 'bold' }}>{title}</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.8, marginTop: '5px' }}>{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
// @ts-nocheck
|
||||
import React from "react";
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
import ClientPicker from "../../ClientPicker/ClientPicker";
|
||||
import Switch from "@components/Switch/Switch";
|
||||
import TextTime from "@components/TextTime/TextTime";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function NotificationsFlow(props: Props) {
|
||||
const { currentStepIndex, notificationsScope, setNotificationsScope, handleNext, notifLoading, NOTIF_CHANNELS, NOTIF_REMINDER_PRESETS, notifChannels, notifReminderRules, toggleNotifReminder, notifQuietHoursActive, setNotifQuietHoursActive, dayjsFromHHmm, notifQuietHoursFrom, setNotifQuietHoursFrom, notifQuietHoursTo, setNotifQuietHoursTo, handleSaveNotifications, isCreating, notifSelectedClientId, setNotifSelectedClientId, notifClients, notifClientPickerOpen, setNotifClientPickerOpen, setNotifChannels, toggleNotifChannel, handleSelectNotifScope } = props;
|
||||
const renderNotificationsChannelToggle = (channel: NotificationChannel) => (
|
||||
<div
|
||||
key={channel}
|
||||
style={{
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
padding: "14px 16px", borderRadius: "12px",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: `1px solid ${notifChannels.includes(channel) ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
|
||||
color: "white", transition: "all 0.2s ease"
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
|
||||
<span style={{ fontWeight: 700 }}>{NOTIF_CHANNELS.find(c => c.key === channel)?.label}</span>
|
||||
<span style={{ fontSize: "13px", color: "rgba(255,255,255,0.65)" }}>
|
||||
{NOTIF_CHANNELS.find(c => c.key === channel)?.description}
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
checked={notifChannels.includes(channel)}
|
||||
onChange={() => toggleNotifChannel(channel)}
|
||||
disabled={notifLoading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (() => {
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title="Configurar Notificaciones"
|
||||
description="Te ayudamos a definir cómo y cuándo reciben notificaciones tus clientes. Primero elegí a qué querés aplicarle esta configuración."
|
||||
onNext={() => {
|
||||
if (!notificationsScope) return;
|
||||
handleNext();
|
||||
}}
|
||||
disableNext={!notificationsScope}
|
||||
nextLabel="Siguiente"
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%" }}>
|
||||
<div
|
||||
onClick={() => handleSelectNotifScope("org")}
|
||||
style={{
|
||||
padding: "18px", borderRadius: "12px", cursor: "pointer",
|
||||
background: notificationsScope === "org" ? "var(--wine-red)" : "rgba(255,255,255,0.05)",
|
||||
border: `2px solid ${notificationsScope === "org" ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
|
||||
color: "white", textAlign: "center", transition: "all 0.2s ease"
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: "0 0 5px 0", fontSize: "16px", fontWeight: notificationsScope === "org" ? "bold" : "normal" }}>
|
||||
A la organización en general
|
||||
</h4>
|
||||
<p style={{ margin: 0, fontSize: "13px", color: "rgba(255,255,255,0.75)" }}>
|
||||
Configura canales, recordatorios y horario silencioso para todos los clientes.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => handleSelectNotifScope("client")}
|
||||
style={{
|
||||
padding: "18px", borderRadius: "12px", cursor: "pointer",
|
||||
background: notificationsScope === "client" ? "var(--wine-red)" : "rgba(255,255,255,0.05)",
|
||||
border: `2px solid ${notificationsScope === "client" ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
|
||||
color: "white", textAlign: "center", transition: "all 0.2s ease"
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: "0 0 5px 0", fontSize: "16px", fontWeight: notificationsScope === "client" ? "bold" : "normal" }}>
|
||||
A un cliente específico
|
||||
</h4>
|
||||
<p style={{ margin: 0, fontSize: "13px", color: "rgba(255,255,255,0.75)" }}>
|
||||
Elige un cliente y define qué canales de notificación recibe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "18px", padding: "14px", borderRadius: "12px", background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.7)", fontSize: "13px", lineHeight: 1.5 }}>
|
||||
Estos ajustes se sincronizan con la página de notificaciones de tu organización, así que después podés seguir ajustándolos desde ahí.
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
{notificationsScope === "org" && (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="1. Canales de notificación"
|
||||
description="Elige los canales por los cuales se enviarán las notificaciones automáticas a tus clientes."
|
||||
onNext={handleNext}
|
||||
disableNext={notifLoading}
|
||||
nextLabel={notifLoading ? "Cargando..." : "Siguiente"}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
|
||||
{NOTIF_CHANNELS.map(c => renderNotificationsChannelToggle(c.key))}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="2. Reglas de recordatorio"
|
||||
description="Activá los momentos en los que se enviará un recordatorio antes del turno. Podés elegir varios."
|
||||
onNext={handleNext}
|
||||
disableNext={notifLoading}
|
||||
nextLabel={notifLoading ? "Cargando..." : "Siguiente"}
|
||||
>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "10px", justifyContent: "center", width: "100%" }}>
|
||||
{NOTIF_REMINDER_PRESETS.map(preset => {
|
||||
const isActive = notifReminderRules.some(r => r.offset === preset.minutes);
|
||||
return (
|
||||
<div
|
||||
key={preset.minutes}
|
||||
onClick={() => toggleNotifReminder(preset.minutes)}
|
||||
style={{
|
||||
padding: "10px 18px", borderRadius: "999px", cursor: "pointer",
|
||||
background: isActive ? "var(--wine-red)" : "rgba(255,255,255,0.05)",
|
||||
border: `1px solid ${isActive ? "var(--wine-red)" : "rgba(255,255,255,0.15)"}`,
|
||||
color: "white",
|
||||
fontWeight: isActive ? "bold" : "normal",
|
||||
transition: "all 0.2s ease",
|
||||
fontSize: "14px"
|
||||
}}
|
||||
>
|
||||
{preset.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ marginTop: "18px", color: "rgba(255,255,255,0.55)", fontSize: "13px", textAlign: "center" }}>
|
||||
{notifReminderRules.length === 0
|
||||
? "No hay recordatorios activos todavía."
|
||||
: `Recordatorios activos: ${notifReminderRules.length}.`}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="3. Horario silencioso"
|
||||
description="Durante este rango horario no se enviarán notificaciones. Activá la opción solo si querés definirlo."
|
||||
onNext={handleNext}
|
||||
disableNext={notifLoading}
|
||||
nextLabel={notifLoading ? "Cargando..." : "Siguiente"}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px", width: "100%", alignItems: "center" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
padding: "14px 16px", borderRadius: "12px", width: "100%", maxWidth: "400px",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: `1px solid ${notifQuietHoursActive ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
|
||||
color: "white", transition: "all 0.2s ease"
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 700 }}>Activar horario silencioso</span>
|
||||
<Switch
|
||||
checked={notifQuietHoursActive}
|
||||
onChange={(checked) => setNotifQuietHoursActive(checked)}
|
||||
disabled={notifLoading}
|
||||
/>
|
||||
</div>
|
||||
{notifQuietHoursActive && (
|
||||
<div style={{ display: "flex", gap: "16px", width: "100%", maxWidth: "500px" }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<TextTime
|
||||
placeholder="Desde"
|
||||
width="100%"
|
||||
value={dayjsFromHHmm(notifQuietHoursFrom)}
|
||||
onChange={(v) => setNotifQuietHoursFrom(v.format("HH:mm"))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<TextTime
|
||||
placeholder="Hasta"
|
||||
width="100%"
|
||||
value={dayjsFromHHmm(notifQuietHoursTo)}
|
||||
onChange={(v) => setNotifQuietHoursTo(v.format("HH:mm"))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 4}
|
||||
title="Resumen"
|
||||
description="Revisá la configuración antes de guardarla."
|
||||
onNext={handleSaveNotifications}
|
||||
disableNext={isCreating || notifLoading}
|
||||
nextLabel={isCreating ? "Guardando..." : "Guardar configuración"}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%", maxWidth: "500px", margin: "0 auto", background: "rgba(255,255,255,0.05)", borderRadius: "12px", padding: "18px", border: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
<div>
|
||||
<div style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px" }}>Canales activos</div>
|
||||
<div style={{ color: "white", fontWeight: 700 }}>
|
||||
{notifChannels.length > 0
|
||||
? notifChannels.map(c => NOTIF_CHANNELS.find(nc => nc.key === c)?.label).join(", ")
|
||||
: "Ninguno"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px" }}>Recordatorios</div>
|
||||
<div style={{ color: "white", fontWeight: 700 }}>
|
||||
{notifReminderRules.length > 0
|
||||
? notifReminderRules.map(r => NOTIF_REMINDER_PRESETS.find(p => p.minutes === r.offset)?.label || `${r.offset} min`).join(", ")
|
||||
: "Ninguno"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px" }}>Horario silencioso</div>
|
||||
<div style={{ color: "white", fontWeight: 700 }}>
|
||||
{notifQuietHoursActive ? `De ${notifQuietHoursFrom} a ${notifQuietHoursTo}` : "Desactivado"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
)}
|
||||
|
||||
{notificationsScope === "client" && (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="1. Selecciona el cliente"
|
||||
description="Elegí a qué cliente de la organización querés aplicarle esta configuración de canales."
|
||||
onNext={() => {
|
||||
if (!notifSelectedClientId) return;
|
||||
handleNext();
|
||||
}}
|
||||
disableNext={!notifSelectedClientId || notifLoading}
|
||||
nextLabel={notifLoading ? "Cargando..." : "Siguiente"}
|
||||
>
|
||||
<div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "12px" }}>
|
||||
{notifClients.length === 0 ? (
|
||||
<div style={{ color: "rgba(255,255,255,0.7)", textAlign: "center", padding: "24px", borderRadius: "12px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
No hay clientes para esta organización todavía. Cuando alguien reserve un turno, aparecerá acá.
|
||||
</div>
|
||||
) : notifSelectedClientId ? (() => {
|
||||
const sc = notifClients.find(c => c.id === notifSelectedClientId);
|
||||
const sub = sc ? ((sc.email && sc.email.trim() !== "") ? sc.email : [sc.phoneCountryCode, sc.phoneAreaCode, sc.phoneNumber].filter(p => p && String(p).trim() !== "").map(p => String(p).trim()).join(" ")).replace(/^(?!\+)/, "+") : "";
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setNotifClientPickerOpen(true)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: "12px", width: "100%",
|
||||
padding: "12px", borderRadius: "14px",
|
||||
background: "rgba(255,42,127,0.08)",
|
||||
border: "1px solid var(--wine-red)",
|
||||
boxShadow: "0 0 24px rgba(255,42,127,0.18)",
|
||||
cursor: "pointer", color: "white", textAlign: "left",
|
||||
fontFamily: "inherit",
|
||||
transition: "background 0.2s, box-shadow 0.2s",
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", width: "44px", height: "44px", borderRadius: "50%", overflow: "hidden", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "14px", fontWeight: 700, color: "white", background: "linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%)" }}>
|
||||
{(sc?.avatar && sc.avatar.trim() !== "") ? (
|
||||
<img
|
||||
src={sc.avatar}
|
||||
alt={sc?.fullName || ""}
|
||||
style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
|
||||
onError={(e) => { (e.currentTarget as HTMLImageElement).style.opacity = "0"; }}
|
||||
/>
|
||||
) : null}
|
||||
{sc ? `${(sc.firstName?.[0] || "").toUpperCase()}${(sc.lastName?.[0] || "").toUpperCase()}` : "?"}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "2px" }}>
|
||||
<span style={{ color: "white", fontWeight: 700, fontSize: "15px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
{sc?.fullName || "—"}
|
||||
</span>
|
||||
{sub && (
|
||||
<span style={{ color: "rgba(255,255,255,0.55)", fontSize: "12px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
{sub}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span style={{ color: "var(--wine-red)", fontSize: "13px", fontWeight: 600, flexShrink: 0 }}>Cambiar</span>
|
||||
</button>
|
||||
);
|
||||
})() : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setNotifClientPickerOpen(true)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", width: "100%",
|
||||
padding: "14px", borderRadius: "14px",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: "1px solid rgba(255,255,255,0.14)",
|
||||
cursor: "pointer", color: "white",
|
||||
fontFamily: "inherit", fontSize: "15px", fontWeight: 600,
|
||||
transition: "border-color 0.2s, background 0.2s, box-shadow 0.2s",
|
||||
}}
|
||||
>
|
||||
<SearchIcon style={{ fontSize: 20, color: "var(--wine-red)" }} />
|
||||
Buscar y seleccionar cliente
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="2. Canales de notificación"
|
||||
description="Activá los canales por los que este cliente recibirá notificaciones de la organización. Los desactivados se silencian."
|
||||
onNext={handleNext}
|
||||
disableNext={!notifSelectedClientId || notifLoading}
|
||||
nextLabel={notifLoading ? "Cargando..." : "Siguiente"}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
|
||||
{NOTIF_CHANNELS.map(c => renderNotificationsChannelToggle(c.key))}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="Resumen"
|
||||
description="Revisá la configuración antes de guardarla."
|
||||
onNext={handleSaveNotifications}
|
||||
disableNext={isCreating || notifLoading}
|
||||
nextLabel={isCreating ? "Guardando..." : "Guardar configuración"}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%", maxWidth: "500px", margin: "0 auto", background: "rgba(255,255,255,0.05)", borderRadius: "12px", padding: "18px", border: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
<div>
|
||||
<div style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px" }}>Cliente</div>
|
||||
<div style={{ color: "white", fontWeight: 700 }}>
|
||||
{notifClients.find(c => c.id === notifSelectedClientId)?.fullName || "—"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px" }}>Canales activos</div>
|
||||
<div style={{ color: "white", fontWeight: 700 }}>
|
||||
{notifChannels.length > 0
|
||||
? notifChannels.map(c => NOTIF_CHANNELS.find(nc => nc.key === c)?.label).join(", ")
|
||||
: "Ninguno"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<ClientPicker
|
||||
open={notifClientPickerOpen}
|
||||
clients={notifClients}
|
||||
selectedId={notifSelectedClientId}
|
||||
loading={notifLoading}
|
||||
onSelect={(id) => {
|
||||
setNotifChannels([]);
|
||||
setNotifSelectedClientId(id);
|
||||
setNotifClientPickerOpen(false);
|
||||
}}
|
||||
onClose={() => setNotifClientPickerOpen(false)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})();
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,478 @@
|
||||
import React from "react";
|
||||
import ReactAvatar from "react-avatar";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
import QuestionInput from "../../QuestionCard/QuestionInput";
|
||||
import OnboardingPhone from "../../OnboardingPhone/OnboardingPhone";
|
||||
import OnboardingLocation from "../../OnboardingLocation/OnboardingLocation";
|
||||
import SelectLocationMap from "@core/app/components/SelectLocationMap/SelectLocationMap";
|
||||
import { validatePhone } from "@core/helpers/validatePhone";
|
||||
import categories from "@models/Categories.type";
|
||||
import style from "../StepEngine.module.css";
|
||||
|
||||
type OnboardingOrgFlowProps = {
|
||||
currentStepIndex: any;
|
||||
SessionInfo: any;
|
||||
imageError: any;
|
||||
setImageError: any;
|
||||
handleNext: any;
|
||||
handleNextName: any;
|
||||
orgName: any;
|
||||
setOrgName: any;
|
||||
nameError: any;
|
||||
setNameError: any;
|
||||
isCheckingName: any;
|
||||
categoryId: any;
|
||||
setCategoryId: any;
|
||||
handleCreateCompany: any;
|
||||
isCreating: any;
|
||||
orgDescription: any;
|
||||
setOrgDescription: any;
|
||||
handleKeyDown: any;
|
||||
handleUpdateLocation: any;
|
||||
isStandaloneAction: any;
|
||||
street: any;
|
||||
streetNumber: any;
|
||||
builingFloor: any;
|
||||
buildingApartament: any;
|
||||
state: any;
|
||||
city: any;
|
||||
block: any;
|
||||
zipCode: any;
|
||||
latitude: any;
|
||||
longitude: any;
|
||||
setStreet: any;
|
||||
setStreetNumber: any;
|
||||
setBuilingFloor: any;
|
||||
setBuildingApartament: any;
|
||||
setState: any;
|
||||
setCity: any;
|
||||
setBlock: any;
|
||||
setZipCode: any;
|
||||
setLatitude: any;
|
||||
setLongitude: any;
|
||||
handleUpdateContact: any;
|
||||
phoneAreaCode: any;
|
||||
phoneNumber: any;
|
||||
setPhoneAreaCode: any;
|
||||
setPhoneNumber: any;
|
||||
handleUpdateRules: any;
|
||||
heatMapFraction: any;
|
||||
setHeatMapFraction: any;
|
||||
appointmentTime: any;
|
||||
setAppointmentTime: any;
|
||||
cancellationTime: any;
|
||||
setCancellationTime: any;
|
||||
handleUploadHeader: any;
|
||||
headerColor: any;
|
||||
setHeaderColor: any;
|
||||
headerFontColor: any;
|
||||
setHeaderFontColor: any;
|
||||
headerImage: any;
|
||||
setHeaderImage: any;
|
||||
};
|
||||
|
||||
export default function OnboardingOrgFlow(props: OnboardingOrgFlowProps) {
|
||||
const { currentStepIndex, SessionInfo, imageError, setImageError, handleNext, handleNextName, orgName, setOrgName, nameError, setNameError, isCheckingName, categoryId, setCategoryId, handleCreateCompany, isCreating, orgDescription, setOrgDescription, handleKeyDown, handleUpdateLocation, isStandaloneAction, street, streetNumber, builingFloor, buildingApartament, state, city, block, zipCode, latitude, longitude, setStreet, setStreetNumber, setBuilingFloor, setBuildingApartament, setState, setCity, setBlock, setZipCode, setLatitude, setLongitude, handleUpdateContact, phoneAreaCode, phoneNumber, setPhoneAreaCode, setPhoneNumber, handleUpdateRules, heatMapFraction, setHeatMapFraction, appointmentTime, setAppointmentTime, cancellationTime, setCancellationTime, handleUploadHeader, headerColor, setHeaderColor, headerFontColor, setHeaderFontColor, headerImage, setHeaderImage } = props;
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title={`¡Bienvenido a TurnosXpress, ${SessionInfo.userFullName.split(" ")[0]}!`}
|
||||
description="Vamos a configurar tu negocio en solo unos minutos. Relájate, yo te guiaré paso a paso para que todo quede perfecto."
|
||||
onNext={handleNext}
|
||||
nextLabel="Empezar ahora"
|
||||
topAccessory={
|
||||
SessionInfo.avatar && !imageError ? (
|
||||
<img
|
||||
src={SessionInfo.avatar}
|
||||
alt="Avatar"
|
||||
style={{ width: 90, height: 90, borderRadius: '50%', objectFit: 'cover' }}
|
||||
onError={() => setImageError(true)}
|
||||
/>
|
||||
) : (
|
||||
<ReactAvatar
|
||||
name={SessionInfo.userFullName || "Usuario"}
|
||||
size="90"
|
||||
round={true}
|
||||
textSizeRatio={2.5}
|
||||
maxInitials={2}
|
||||
color="#600018"
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
{null}
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="1. Identidad de tu Negocio"
|
||||
description="Para empezar, ¿cuál es el nombre de tu organización o emprendimiento?"
|
||||
onNext={handleNextName}
|
||||
disableNext={orgName.trim().length < 3 || isCheckingName}
|
||||
nextLabel={isCheckingName ? "Validando..." : "Siguiente"}
|
||||
>
|
||||
<QuestionInput
|
||||
placeholder="Ej. Salón de Belleza VIP"
|
||||
value={orgName}
|
||||
onChange={(e) => {
|
||||
setOrgName(e.target.value);
|
||||
if (nameError) setNameError("");
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (orgName.trim().length >= 3) {
|
||||
handleKeyDown(e, handleNextName);
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
error={nameError}
|
||||
/>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="2. ¿A qué te dedicas?"
|
||||
description="Elige la categoría que mejor describa los servicios que ofreces."
|
||||
onNext={handleNext}
|
||||
disableNext={categoryId === null}
|
||||
>
|
||||
<div className={style.categoryGrid}>
|
||||
{categories.filter(c => c.id !== 0).map(cat => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className={`${style.categoryItem} ${categoryId === cat.id ? style.categorySelected : ''}`}
|
||||
onClick={() => {
|
||||
setCategoryId(cat.id);
|
||||
setTimeout(handleNext, 400);
|
||||
}}
|
||||
>
|
||||
<div className={style.categoryIcon}>✧</div>
|
||||
<div className={style.categoryName}>{cat.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="3. Una breve descripción"
|
||||
description={`Cuentanos un poco sobre "${orgName}". Esta descripción la verán tus clientes.`}
|
||||
onNext={handleCreateCompany}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Creando..." : "Guardar Organización"}
|
||||
>
|
||||
<QuestionInput
|
||||
placeholder="Ej. Ofrecemos los mejores cortes..."
|
||||
value={orgDescription}
|
||||
onChange={(e) => setOrgDescription(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (orgDescription.trim().length >= 10) {
|
||||
handleKeyDown(e, handleCreateCompany);
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</QuestionCard>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 4}
|
||||
title="4. Ubicación de tu Negocio"
|
||||
description={`¿Dónde queda "${orgName}"? Esto es crucial para que tus clientes te encuentren.`}
|
||||
onNext={handleUpdateLocation}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : (isStandaloneAction ? "Guardar Cambios" : "Siguiente")}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
|
||||
<OnboardingLocation
|
||||
data={{
|
||||
street, streetNumber, builingFloor, buildingApartament, state, city, block, zipCode, latitude, longitude
|
||||
}}
|
||||
onChange={(newData) => {
|
||||
if (newData.street !== undefined) setStreet(newData.street);
|
||||
if (newData.streetNumber !== undefined) setStreetNumber(newData.streetNumber);
|
||||
if (newData.builingFloor !== undefined) setBuilingFloor(newData.builingFloor);
|
||||
if (newData.buildingApartament !== undefined) setBuildingApartament(newData.buildingApartament);
|
||||
if (newData.state !== undefined) setState(newData.state);
|
||||
if (newData.city !== undefined) setCity(newData.city);
|
||||
if (newData.block !== undefined) setBlock(newData.block);
|
||||
if (newData.zipCode !== undefined) setZipCode(newData.zipCode);
|
||||
if (newData.latitude !== undefined) setLatitude(newData.latitude);
|
||||
if (newData.longitude !== undefined) setLongitude(newData.longitude);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 5}
|
||||
title="5. Ubica tu local en el mapa (Opcional)"
|
||||
description={`Para que los clientes encuentren "${orgName}" con exactitud. Por favor, haz el máximo zoom posible y arrastra el marcador a tu ubicación exacta.`}
|
||||
onNext={handleUpdateLocation}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : "Guardar Ubicación"}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%', alignItems: 'center' }}>
|
||||
<div style={{ width: '100%', borderRadius: '8px', overflow: 'hidden' }}>
|
||||
<SelectLocationMap
|
||||
initialCoordinates={{ latitude, longitude }}
|
||||
height="350px"
|
||||
onChange={(loc) => {
|
||||
setLatitude(loc.latitude);
|
||||
setLongitude(loc.longitude);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '10px',
|
||||
fontSize: '13px',
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
cursor: 'pointer',
|
||||
textDecoration: 'underline'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!isCreating) handleUpdateLocation();
|
||||
}}
|
||||
>
|
||||
Omitir este paso
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 6}
|
||||
title="6. Contacto"
|
||||
description="¿Cómo pueden contactarte tus clientes? Ingresa el número de teléfono (preferiblemente WhatsApp)."
|
||||
onNext={handleUpdateContact}
|
||||
disableNext={!validatePhone(phoneAreaCode, phoneNumber).isValid || isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : (isStandaloneAction ? "Guardar Cambios" : "Siguiente")}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%', alignItems: 'center' }}>
|
||||
<OnboardingPhone
|
||||
value={phoneAreaCode + phoneNumber}
|
||||
onChange={(area, num, full) => {
|
||||
setPhoneAreaCode(area);
|
||||
setPhoneNumber(num);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (validatePhone(phoneAreaCode, phoneNumber).isValid) {
|
||||
handleKeyDown(e, handleUpdateContact);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 7}
|
||||
title="7. Reglas de Negocio"
|
||||
description="Configura los tiempos de tu agenda. Esto determinará cómo se muestran los turnos a tus clientes."
|
||||
onNext={handleUpdateRules}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : "Siguiente: Crear Servicio"}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%' }}>
|
||||
<div>
|
||||
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Fracción de la Agenda (Minutos)</div>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
{[15, 30, 45, 60, 120].map(val => (
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => setHeatMapFraction(val)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
background: heatMapFraction === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
|
||||
border: `1px solid ${heatMapFraction === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
|
||||
color: 'white',
|
||||
fontWeight: heatMapFraction === val ? 'bold' : 'normal',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
{val}m
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Anticipación mínima para reservar (Horas)</div>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
{[1, 2, 12, 24, 48].map(val => (
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => setAppointmentTime(val)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
background: appointmentTime === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
|
||||
border: `1px solid ${appointmentTime === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
|
||||
color: 'white',
|
||||
fontWeight: appointmentTime === val ? 'bold' : 'normal',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
{val}h
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Anticipación mínima para cancelar (Horas)</div>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
{[1, 2, 12, 24, 48].map(val => (
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => setCancellationTime(val)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
background: cancellationTime === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
|
||||
border: `1px solid ${cancellationTime === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
|
||||
color: 'white',
|
||||
fontWeight: cancellationTime === val ? 'bold' : 'normal',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
{val}h
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 8}
|
||||
title="8. Apariencia"
|
||||
description="Sube una foto de portada para tu negocio y elige tus colores corporativos. Esto es lo primero que verán tus clientes."
|
||||
onNext={handleUploadHeader}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : (isStandaloneAction ? "Guardar Cambios" : "Siguiente")}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%', alignItems: 'center' }}>
|
||||
<div style={{
|
||||
display: 'flex', gap: '20px', width: '100%', maxWidth: '500px',
|
||||
justifyContent: 'center', background: 'rgba(255,255,255,0.05)',
|
||||
padding: '15px', borderRadius: '12px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px', flex: 1 }}>
|
||||
<label style={{ color: 'white', fontSize: '13px' }}>Color de Fondo</label>
|
||||
<input
|
||||
type="color"
|
||||
value={headerColor}
|
||||
onChange={(e) => setHeaderColor(e.target.value)}
|
||||
style={{ width: '100%', height: '40px', border: 'none', borderRadius: '8px', cursor: 'pointer' }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px', flex: 1 }}>
|
||||
<label style={{ color: 'white', fontSize: '13px' }}>Color del Texto</label>
|
||||
<input
|
||||
type="color"
|
||||
value={headerFontColor}
|
||||
onChange={(e) => setHeaderFontColor(e.target.value)}
|
||||
style={{ width: '100%', height: '40px', border: 'none', borderRadius: '8px', cursor: 'pointer' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PREVIEW BOX */}
|
||||
<div style={{ width: '100%', maxWidth: '500px', marginTop: '10px' }}>
|
||||
<div style={{ color: 'rgba(255,255,255,0.7)', fontSize: '13px', marginBottom: '8px', textAlign: 'left' }}>
|
||||
Vista previa:
|
||||
</div>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '120px',
|
||||
backgroundColor: headerColor,
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 4px 15px rgba(0,0,0,0.3)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{headerImage && (
|
||||
<img
|
||||
src={URL.createObjectURL(headerImage)}
|
||||
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.4 }}
|
||||
alt="Preview"
|
||||
/>
|
||||
)}
|
||||
<div style={{
|
||||
color: headerFontColor,
|
||||
fontSize: '24px',
|
||||
fontWeight: 'bold',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
textShadow: '0 2px 4px rgba(0,0,0,0.5)'
|
||||
}}>
|
||||
{orgName || "Tu Negocio"}
|
||||
</div>
|
||||
<div style={{
|
||||
color: headerFontColor,
|
||||
fontSize: '14px',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
opacity: 0.9,
|
||||
marginTop: '5px'
|
||||
}}>
|
||||
Categoría seleccionada
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: '500px',
|
||||
height: '200px',
|
||||
border: '2px dashed rgba(255, 255, 255, 0.3)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
background: headerImage ? 'transparent' : 'rgba(255,255,255,0.05)'
|
||||
}}>
|
||||
{headerImage ? (
|
||||
<img
|
||||
src={URL.createObjectURL(headerImage)}
|
||||
alt="Preview"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<span style={{ color: 'rgba(255,255,255,0.6)' }}>Toca para seleccionar imagen</span>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
setHeaderImage(e.target.files[0]);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
opacity: 0,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
+381
@@ -0,0 +1,381 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type OnboardingScheduleFlowProps = {
|
||||
currentStepIndex: any;
|
||||
handleNext: any;
|
||||
doesProvideServices: any;
|
||||
setDoesProvideServices: any;
|
||||
createdCompanyId: any;
|
||||
router: any;
|
||||
workingDaysMode: any;
|
||||
setWorkingDaysMode: any;
|
||||
openTime: any;
|
||||
setOpenTime: any;
|
||||
closeTime: any;
|
||||
setCloseTime: any;
|
||||
hasBreak: any;
|
||||
setHasBreak: any;
|
||||
breakStart: any;
|
||||
setBreakStart: any;
|
||||
breakEnd: any;
|
||||
setBreakEnd: any;
|
||||
handleCreateSchedule: any;
|
||||
isCreating: any;
|
||||
headerColor: any;
|
||||
headerImage: any;
|
||||
headerFontColor: any;
|
||||
orgName: any;
|
||||
previewServices: any;
|
||||
setServiceName: any;
|
||||
setServiceDescription: any;
|
||||
setServiceLength: any;
|
||||
setServicePrice: any;
|
||||
setServiceLimit: any;
|
||||
setServiceImage: any;
|
||||
setCreatedServiceId: any;
|
||||
setIsAddingAnotherService: any;
|
||||
setCurrentStepIndex: any;
|
||||
};
|
||||
|
||||
export default function OnboardingScheduleFlow(props: OnboardingScheduleFlowProps) {
|
||||
const { currentStepIndex, handleNext, doesProvideServices, setDoesProvideServices, createdCompanyId, router, workingDaysMode, setWorkingDaysMode, openTime, setOpenTime, closeTime, setCloseTime, hasBreak, setHasBreak, breakStart, setBreakStart, breakEnd, setBreakEnd, handleCreateSchedule, isCreating, headerColor, headerImage, headerFontColor, orgName, previewServices, setServiceName, setServiceDescription, setServiceLength, setServicePrice, setServiceLimit, setServiceImage, setCreatedServiceId, setIsAddingAnotherService, setCurrentStepIndex } = props;
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title="Configura tus Horarios"
|
||||
description="El último paso. Vamos a definir cuándo estás disponible para recibir clientes."
|
||||
onNext={handleNext}
|
||||
nextLabel="Comenzar"
|
||||
>
|
||||
<div style={{ color: "rgba(255, 255, 255, 0.7)", textAlign: "center", padding: "10px" }}>
|
||||
Con esta información, tu agenda online comenzará a aceptar reservas automáticamente.
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="Atención al Cliente"
|
||||
description="¿Brindas tú mismo los servicios que configuraste?"
|
||||
onNext={() => {
|
||||
if (doesProvideServices === null) return;
|
||||
if (!doesProvideServices) {
|
||||
const query = createdCompanyId ? `&companyId=${createdCompanyId}` : "";
|
||||
router.push(`/admin/assistant?flow=new-collaborator${query}`);
|
||||
} else {
|
||||
handleNext();
|
||||
}
|
||||
}}
|
||||
disableNext={doesProvideServices === null}
|
||||
nextLabel={doesProvideServices === false ? "Invitar colaborador" : "Siguiente"}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap', width: '100%', justifyContent: 'center' }}>
|
||||
<div
|
||||
onClick={() => setDoesProvideServices(true)}
|
||||
style={{
|
||||
padding: '20px 24px',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
background: doesProvideServices === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${doesProvideServices === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`,
|
||||
color: 'white',
|
||||
transition: 'all 0.2s ease',
|
||||
textAlign: 'center',
|
||||
flex: '1',
|
||||
minWidth: '200px'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0', fontSize: '18px', fontWeight: doesProvideServices === true ? 'bold' : 'normal' }}>Sí, yo atiendo a los clientes</h4>
|
||||
<p style={{ margin: 0, fontSize: '13px', color: 'rgba(255,255,255,0.7)' }}>Asignaremos los servicios a tu nombre.</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setDoesProvideServices(false)}
|
||||
style={{
|
||||
padding: '20px 24px',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
background: doesProvideServices === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${doesProvideServices === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`,
|
||||
color: 'white',
|
||||
transition: 'all 0.2s ease',
|
||||
textAlign: 'center',
|
||||
flex: '1',
|
||||
minWidth: '200px'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0', fontSize: '18px', fontWeight: doesProvideServices === false ? 'bold' : 'normal' }}>No, tengo un equipo</h4>
|
||||
<p style={{ margin: 0, fontSize: '13px', color: 'rgba(255,255,255,0.7)' }}>Te guiaremos para invitar al primer colaborador.</p>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="1. Días Laborables"
|
||||
description="¿Qué días de la semana atiendes?"
|
||||
onNext={handleNext}
|
||||
disableNext={!workingDaysMode}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', width: '100%', justifyContent: 'center' }}>
|
||||
{[
|
||||
{ value: "mon-fri", label: "Lunes a Viernes" },
|
||||
{ value: "mon-sat", label: "Lunes a Sábado" },
|
||||
{ value: "mon-sun", label: "Lunes a Domingo" },
|
||||
].map(opt => (
|
||||
<div
|
||||
key={opt.value}
|
||||
onClick={() => setWorkingDaysMode(opt.value)}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
background: workingDaysMode === opt.value ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${workingDaysMode === opt.value ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`,
|
||||
color: 'white',
|
||||
fontWeight: workingDaysMode === opt.value ? 'bold' : 'normal',
|
||||
transition: 'all 0.2s ease',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="2. Horario General"
|
||||
description="¿A qué hora abres y cierras tu negocio?"
|
||||
onNext={handleNext}
|
||||
disableNext={!openTime || !closeTime}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<span style={{ color: 'white', fontSize: '14px' }}>Apertura</span>
|
||||
<input
|
||||
type="time"
|
||||
value={openTime}
|
||||
onChange={(e) => setOpenTime(e.target.value)}
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
color: 'white',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ color: 'white', fontSize: '18px' }}>a</span>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<span style={{ color: 'white', fontSize: '14px' }}>Cierre</span>
|
||||
<input
|
||||
type="time"
|
||||
value={closeTime}
|
||||
onChange={(e) => setCloseTime(e.target.value)}
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
color: 'white',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 4}
|
||||
title="3. Horario Cortado"
|
||||
description="¿Cierras tu negocio al mediodía para descansar?"
|
||||
onNext={handleNext}
|
||||
disableNext={hasBreak === null}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<div
|
||||
onClick={() => setHasBreak(true)}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
background: hasBreak === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
|
||||
border: `1px solid ${hasBreak === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
|
||||
color: 'white',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
Sí, tengo descanso
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setHasBreak(false)}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
background: hasBreak === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
|
||||
border: `1px solid ${hasBreak === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
|
||||
color: 'white',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
No, horario corrido
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasBreak && (
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<span style={{ color: 'white', fontSize: '14px' }}>Inicia el descanso</span>
|
||||
<input
|
||||
type="time"
|
||||
value={breakStart}
|
||||
onChange={(e) => setBreakStart(e.target.value)}
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
color: 'white',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ color: 'white', fontSize: '18px' }}>a</span>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<span style={{ color: 'white', fontSize: '14px' }}>Termina</span>
|
||||
<input
|
||||
type="time"
|
||||
value={breakEnd}
|
||||
onChange={(e) => setBreakEnd(e.target.value)}
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
color: 'white',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 5}
|
||||
title="Resumen Final y Vista Previa"
|
||||
description="Revisa cómo se verá tu negocio. Al finalizar, será publicado automáticamente."
|
||||
onNext={handleCreateSchedule}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Publicando..." : "Publicar y Activar Agenda"}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%', alignItems: 'center' }}>
|
||||
|
||||
{/* Mockup visual */}
|
||||
<div style={{
|
||||
width: '100%', maxWidth: '500px', borderRadius: '12px', overflow: 'hidden',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.5)', background: '#1e1e1e', border: '1px solid rgba(255,255,255,0.1)'
|
||||
}}>
|
||||
{/* Cabecera Mockup */}
|
||||
<div style={{
|
||||
background: headerColor,
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative'
|
||||
}}>
|
||||
{/* Simular imagen de cabecera si hay Archivo */}
|
||||
{headerImage && (
|
||||
<img src={URL.createObjectURL(headerImage)} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.6 }} />
|
||||
)}
|
||||
<h2 style={{ color: headerFontColor, margin: 0, zIndex: 1, textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>{orgName || "Tu Negocio"}</h2>
|
||||
</div>
|
||||
|
||||
{/* Cuerpo Mockup (Servicios y Horarios) */}
|
||||
<div style={{ padding: '20px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
|
||||
<h4 style={{ margin: 0, color: 'white' }}>Servicios ({previewServices.length})</h4>
|
||||
<button
|
||||
onClick={() => {
|
||||
setServiceName("");
|
||||
setServiceDescription("");
|
||||
setServiceLength(null);
|
||||
setServicePrice("");
|
||||
setServiceLimit(1);
|
||||
setServiceImage(null);
|
||||
setCreatedServiceId(null);
|
||||
setIsAddingAnotherService(true);
|
||||
setCurrentStepIndex(1); // Service creation starts at step 1
|
||||
}}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)',
|
||||
color: 'white', borderRadius: '15px', padding: '4px 12px', fontSize: '12px',
|
||||
cursor: 'pointer', transition: 'background 0.2s'
|
||||
}}
|
||||
onMouseOver={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.2)'}
|
||||
onMouseOut={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
|
||||
>
|
||||
+ Agregar otro
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '20px' }}>
|
||||
{previewServices.map((s: any, idx: number) => (
|
||||
<div key={idx} style={{ background: 'rgba(255,255,255,0.05)', padding: '10px', borderRadius: '8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ color: 'white', fontWeight: 'bold', fontSize: '14px' }}>{s.name}</span>
|
||||
<span style={{ color: 'rgba(255,255,255,0.6)', fontSize: '12px' }}>{s.length} min</span>
|
||||
</div>
|
||||
<span style={{ color: 'var(--wine-red)', fontWeight: 'bold' }}>${s.originalPrice}</span>
|
||||
</div>
|
||||
))}
|
||||
{previewServices.length === 0 && (
|
||||
<span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '14px' }}>Sin servicios configurados aún.</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h4 style={{ margin: '0 0 10px 0', color: 'white' }}>Horario Laboral</h4>
|
||||
<div style={{ background: 'rgba(255,255,255,0.05)', padding: '15px', borderRadius: '8px' }}>
|
||||
<div style={{ color: 'white', fontSize: '14px', marginBottom: '5px' }}>
|
||||
<strong>Días:</strong> {workingDaysMode === "mon-fri" ? "Lunes a Viernes" : (workingDaysMode === "mon-sat" ? "Lunes a Sábado" : "Lunes a Domingo")}
|
||||
</div>
|
||||
<div style={{ color: 'white', fontSize: '14px', marginBottom: '5px' }}>
|
||||
<strong>Horario:</strong> {openTime} a {closeTime}
|
||||
</div>
|
||||
{hasBreak && (
|
||||
<div style={{ color: 'white', fontSize: '14px' }}>
|
||||
<strong>Descanso:</strong> {breakStart} a {breakEnd}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advertencia Explícita */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 60, 60, 0.1)',
|
||||
borderLeft: '4px solid #ff3c3c',
|
||||
padding: '15px',
|
||||
borderRadius: '0 8px 8px 0',
|
||||
width: '100%',
|
||||
maxWidth: '500px'
|
||||
}}>
|
||||
<h4 style={{ margin: '0 0 5px 0', color: '#ff3c3c', fontSize: '16px' }}>🚨 Aviso de Publicación</h4>
|
||||
<p style={{ margin: 0, color: 'rgba(255,255,255,0.8)', fontSize: '13px', lineHeight: '1.4' }}>
|
||||
Al hacer clic en <strong>Publicar y Activar Agenda</strong>, tu organización, servicios y esta primera jornada laboral serán publicados en TurnosXpress.
|
||||
<br/><br/>
|
||||
¡Tus clientes podrán empezar a reservar turnos de inmediato! Podrás editar todo más tarde desde tu panel.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
import QuestionInput from "../../QuestionCard/QuestionInput";
|
||||
|
||||
type OnboardingServiceFlowProps = {
|
||||
heatMapFraction: any;
|
||||
currentStepIndex: any;
|
||||
handleNext: any;
|
||||
serviceName: any;
|
||||
setServiceName: any;
|
||||
serviceDescription: any;
|
||||
setServiceDescription: any;
|
||||
handleKeyDown: any;
|
||||
serviceLength: any;
|
||||
setServiceLength: any;
|
||||
handleCreateService: any;
|
||||
isCreating: any;
|
||||
servicePrice: any;
|
||||
setServicePrice: any;
|
||||
serviceLimit: any;
|
||||
setServiceLimit: any;
|
||||
handleUploadServiceImage: any;
|
||||
serviceImage: any;
|
||||
setServiceImage: any;
|
||||
};
|
||||
|
||||
export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps) {
|
||||
const { heatMapFraction, currentStepIndex, handleNext, serviceName, setServiceName, serviceDescription, setServiceDescription, handleKeyDown, serviceLength, setServiceLength, handleCreateService, isCreating, servicePrice, setServicePrice, serviceLimit, setServiceLimit, handleUploadServiceImage, serviceImage, setServiceImage } = props;
|
||||
const fraction = heatMapFraction || 60;
|
||||
const durationOptions = [fraction, fraction * 2, fraction * 3, fraction * 4];
|
||||
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title="Configura tus Servicios"
|
||||
description="Ya creaste tu negocio. Ahora necesitas configurar al menos un servicio para que tus clientes puedan empezar a reservar."
|
||||
onNext={handleNext}
|
||||
nextLabel="Comenzar"
|
||||
>
|
||||
<div style={{ color: "rgba(255, 255, 255, 0.7)", textAlign: "center", padding: "10px" }}>
|
||||
Vamos a crear el primer servicio de tu negocio. ¡Es muy fácil!
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="1. Nombre y Descripción"
|
||||
description="Elige un nombre atractivo y describe de qué trata el servicio."
|
||||
onNext={handleNext}
|
||||
disableNext={serviceName.trim().length < 3 || serviceDescription.trim().length < 5}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
|
||||
<QuestionInput
|
||||
placeholder="Ej. Corte clásico con lavado"
|
||||
value={serviceName}
|
||||
onChange={(e) => setServiceName(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<QuestionInput
|
||||
placeholder="Breve descripción del servicio..."
|
||||
value={serviceDescription}
|
||||
onChange={(e) => setServiceDescription(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (serviceName.trim().length >= 3 && serviceDescription.trim().length >= 5) {
|
||||
handleKeyDown(e, handleNext);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="2. Duración del Servicio"
|
||||
description={`Elige cuánto tiempo tomará. Las opciones están basadas en tu fracción de agenda (${fraction} min).`}
|
||||
onNext={handleNext}
|
||||
disableNext={!serviceLength}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', width: '100%', justifyContent: 'center' }}>
|
||||
{durationOptions.map(val => {
|
||||
const hours = Math.floor(val / 60);
|
||||
const minutes = val % 60;
|
||||
const label = hours > 0
|
||||
? `${hours}h ${minutes > 0 ? minutes + 'm' : ''}`.trim()
|
||||
: `${minutes} min`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => setServiceLength(val)}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
background: serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`,
|
||||
color: 'white',
|
||||
fontWeight: serviceLength === val ? 'bold' : 'normal',
|
||||
transition: 'all 0.2s ease',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="3. Precio y Cupos"
|
||||
description="¿Cuánto cuesta y a cuántas personas puedes atender a la vez en este servicio?"
|
||||
onNext={handleCreateService}
|
||||
disableNext={isCreating || !servicePrice}
|
||||
nextLabel={isCreating ? "Guardando..." : "Crear Servicio"}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%' }}>
|
||||
<div>
|
||||
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Precio Original</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<span style={{ position: 'absolute', left: '15px', top: '50%', transform: 'translateY(-50%)', color: 'white', fontSize: '18px' }}>$</span>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={servicePrice}
|
||||
onChange={(e) => setServicePrice(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '15px 15px 15px 35px',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
color: 'white',
|
||||
fontSize: '18px',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Cupos Simultáneos (Por defecto 1)</div>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
{[1, 2, 3, 5, 10].map(val => (
|
||||
<div
|
||||
key={val}
|
||||
onClick={() => setServiceLimit(val)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
background: serviceLimit === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
|
||||
border: `1px solid ${serviceLimit === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
|
||||
color: 'white',
|
||||
fontWeight: serviceLimit === val ? 'bold' : 'normal',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
{val}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 4}
|
||||
title="4. Imagen del Servicio"
|
||||
description="Sube una foto representativa para que los clientes sepan qué ofreces. (Opcional)"
|
||||
onNext={handleUploadServiceImage}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Subiendo..." : (serviceImage ? "Subir y Finalizar" : "Omitir por ahora")}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%', alignItems: 'center' }}>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '150px',
|
||||
border: '2px dashed rgba(255,255,255,0.3)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
background: serviceImage ? 'transparent' : 'rgba(255,255,255,0.05)'
|
||||
}}>
|
||||
{serviceImage ? (
|
||||
<img
|
||||
src={URL.createObjectURL(serviceImage)}
|
||||
alt="Preview"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<span style={{ color: 'rgba(255,255,255,0.6)' }}>Toca para seleccionar imagen</span>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
setServiceImage(e.target.files[0]);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
opacity: 0,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
+218
@@ -0,0 +1,218 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function OverrideScheduleFlow(props: Props) {
|
||||
const { currentStepIndex, scheduleScope, setScheduleScope, targetEmployeeId, setTargetEmployeeId, allEmployees, handleNext, overrideDate, setOverrideDate, workingDaysMode, setWorkingDaysMode, openTime, setOpenTime, closeTime, setCloseTime, hasBreak, setHasBreak, breakStart, setBreakStart, breakEnd, setBreakEnd, isCreating, handleUpdateScheduleSubmit, handleOverrideScheduleSubmit, disableDuration, setDisableDuration, disableStartDate, setDisableStartDate, disableEndDate, setDisableEndDate, isFullDayDisabled, setIsFullDayDisabled, disableStartTime, setDisableStartTime, disableEndTime, setDisableEndTime, handleDisableScheduleSubmit } = props;
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title="Horario Especial"
|
||||
description="¿A quiénes quieres aplicar este horario especial?"
|
||||
onNext={() => {
|
||||
if (scheduleScope === "specific" && !targetEmployeeId) {
|
||||
alert("Por favor selecciona un colaborador.");
|
||||
return;
|
||||
}
|
||||
handleNext();
|
||||
}}
|
||||
disableNext={!scheduleScope || (scheduleScope === "specific" && !targetEmployeeId)}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
|
||||
<div
|
||||
onClick={() => setScheduleScope("me")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "me" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "me" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>Solo a mí</h4>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setScheduleScope("specific")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "specific" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "specific" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>A un colaborador en particular</h4>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setScheduleScope("all")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "all" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "all" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>A todos mis colaboradores</h4>
|
||||
</div>
|
||||
|
||||
{scheduleScope === "specific" && (
|
||||
<div style={{ marginTop: '15px', width: '100%' }}>
|
||||
<select
|
||||
value={targetEmployeeId || ""}
|
||||
onChange={(e) => setTargetEmployeeId(e.target.value)}
|
||||
style={{
|
||||
width: '100%', padding: '12px', borderRadius: '8px',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', border: '1px solid rgba(255,255,255,0.2)',
|
||||
outline: 'none', fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
<option value="" disabled style={{ color: 'black' }}>-- Seleccionar --</option>
|
||||
{allEmployees.map((emp: any) => (
|
||||
<option key={emp.id || emp._id || emp.employeeId} value={emp.id || emp._id || emp.employeeId} style={{ color: 'black' }}>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="Fecha de la Excepción"
|
||||
description="¿En qué fecha deseas aplicar este horario distinto?"
|
||||
onNext={handleNext}
|
||||
disableNext={!overrideDate}
|
||||
>
|
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<input
|
||||
type="date"
|
||||
value={overrideDate}
|
||||
onChange={(e) => setOverrideDate(e.target.value)}
|
||||
style={{
|
||||
padding: '12px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'sans-serif'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="Horario Especial"
|
||||
description="¿A qué hora empieza y termina la jornada para este día en particular?"
|
||||
onNext={handleNext}
|
||||
disableNext={!openTime || !closeTime}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Apertura</label>
|
||||
<input
|
||||
type="time"
|
||||
value={openTime}
|
||||
onChange={(e) => setOpenTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Cierre</label>
|
||||
<input
|
||||
type="time"
|
||||
value={closeTime}
|
||||
onChange={(e) => setCloseTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="Descansos"
|
||||
description="¿Habrá algún horario de descanso en este día especial?"
|
||||
onNext={() => {
|
||||
if (hasBreak) {
|
||||
handleNext();
|
||||
} else {
|
||||
handleOverrideScheduleSubmit();
|
||||
}
|
||||
}}
|
||||
disableNext={hasBreak === null}
|
||||
nextLabel={hasBreak ? "Siguiente" : (isCreating ? "Guardando..." : "Guardar Excepción")}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '15px', width: '100%', justifyContent: 'center' }}>
|
||||
<div
|
||||
onClick={() => setHasBreak(true)}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: hasBreak === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${hasBreak === true ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Sí, hay descanso
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setHasBreak(false)}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: hasBreak === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${hasBreak === false ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
No, de corrido
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 4}
|
||||
title="Horario de Descanso"
|
||||
description="¿De qué hora a qué hora no estarán disponibles en este día?"
|
||||
onNext={handleOverrideScheduleSubmit}
|
||||
disableNext={!breakStart || !breakEnd || isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : "Guardar Excepción"}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Inicio descanso</label>
|
||||
<input
|
||||
type="time"
|
||||
value={breakStart}
|
||||
onChange={(e) => setBreakStart(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Fin descanso</label>
|
||||
<input
|
||||
type="time"
|
||||
value={breakEnd}
|
||||
onChange={(e) => setBreakEnd(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import React from "react";
|
||||
import QrCode2Icon from "@mui/icons-material/QrCode2";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type PublicLinkFlowProps = {
|
||||
options: any;
|
||||
getPublicLink: any;
|
||||
getPublicLinkQrUrl: any;
|
||||
getSelectedOrganizationSlug: any;
|
||||
setShowOnboardingPublicLink: any;
|
||||
setIsSuccess: any;
|
||||
router: any;
|
||||
selectedOrganization: any;
|
||||
orgName: any;
|
||||
handleCopyPublicLink: any;
|
||||
publicLinkCopied: any;
|
||||
};
|
||||
|
||||
export default function PublicLinkFlow(props: PublicLinkFlowProps) {
|
||||
const { options, getPublicLink, getPublicLinkQrUrl, getSelectedOrganizationSlug, setShowOnboardingPublicLink, setIsSuccess, router, selectedOrganization, orgName, handleCopyPublicLink, publicLinkCopied } = props;
|
||||
const isOnboardingCompletion = options?.onboardingCompletion === true;
|
||||
const publicLink = getPublicLink();
|
||||
const publicLinkQrUrl = getPublicLinkQrUrl();
|
||||
const orgSlug = getSelectedOrganizationSlug();
|
||||
|
||||
return (
|
||||
<QuestionCard
|
||||
isActive={true}
|
||||
title="Link público y código QR"
|
||||
description="Compartí este enlace para que tus clientes entren directo a la página pública de reservas de la organización. También podés usar el código QR en redes, vidriera o piezas impresas."
|
||||
onNext={() => {
|
||||
if (isOnboardingCompletion) {
|
||||
setShowOnboardingPublicLink(false);
|
||||
setIsSuccess(true);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/admin/assistant");
|
||||
}}
|
||||
nextLabel={isOnboardingCompletion ? "Finalizar" : "Volver al asistente"}
|
||||
topAccessory={<QrCode2Icon style={{ fontSize: 52, color: "var(--wine-red)" }} />}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "18px", width: "100%", maxWidth: "560px", margin: "0 auto" }}>
|
||||
<div style={{ padding: "16px", borderRadius: "14px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)", color: "rgba(255,255,255,0.75)", lineHeight: 1.5, fontSize: "14px" }}>
|
||||
Organización: <strong style={{ color: "white" }}>{selectedOrganization?.name || orgName || "Sin organización seleccionada"}</strong>
|
||||
{orgSlug && (
|
||||
<div style={{ marginTop: "6px", color: "rgba(255,255,255,0.62)", fontSize: "13px" }}>
|
||||
Slug público: <strong style={{ color: "white" }}>{orgSlug}</strong>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{publicLink ? (
|
||||
<>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "10px", padding: "16px", borderRadius: "14px", background: "rgba(255,42,127,0.08)", border: "1px solid rgba(255,42,127,0.32)", boxShadow: "0 0 24px rgba(255,42,127,0.12)" }}>
|
||||
<span style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px", fontWeight: 600 }}>Link público</span>
|
||||
<a href={publicLink} target="_blank" rel="noopener noreferrer" style={{ color: "white", fontWeight: 700, wordBreak: "break-all", textDecoration: "none", fontSize: "16px" }}>
|
||||
{publicLink}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
|
||||
<button type="button" onClick={handleCopyPublicLink} style={{ flex: 1, minWidth: "140px", padding: "12px 16px", borderRadius: "10px", background: "var(--wine-red)", border: "1px solid var(--wine-red)", color: "white", cursor: "pointer", fontWeight: 700, fontFamily: "inherit" }}>
|
||||
{publicLinkCopied ? "Link copiado" : "Copiar link"}
|
||||
</button>
|
||||
<button type="button" onClick={() => window.open(publicLink, "_blank", "noopener,noreferrer")} style={{ flex: 1, minWidth: "140px", padding: "12px 16px", borderRadius: "10px", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.16)", color: "white", cursor: "pointer", fontWeight: 700, fontFamily: "inherit" }}>
|
||||
Abrir link
|
||||
</button>
|
||||
<a href={`${publicLinkQrUrl}&download=1`} download={`turnosxpress-${orgSlug}-qr.png`} style={{ flex: 1, minWidth: "140px", padding: "12px 16px", borderRadius: "10px", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.16)", color: "white", cursor: "pointer", fontWeight: 700, fontFamily: "inherit", textAlign: "center", textDecoration: "none", boxSizing: "border-box" }}>
|
||||
Descargar QR
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", padding: "18px", borderRadius: "16px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)" }}>
|
||||
<div style={{ padding: "14px", borderRadius: "12px", background: "white", boxShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
||||
<img src={publicLinkQrUrl} width={260} height={260} alt={`Código QR para ${publicLink}`} style={{ display: "block", maxWidth: "100%", height: "auto" }} />
|
||||
</div>
|
||||
<span style={{ color: "rgba(255,255,255,0.62)", fontSize: "13px", textAlign: "center", lineHeight: 1.45 }}>
|
||||
Este QR apunta al mismo link público. Si cambiás el nombre o slug de la organización, generá y compartí el QR actualizado.
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ padding: "18px", borderRadius: "14px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)", color: "rgba(255,255,255,0.72)", textAlign: "center", lineHeight: 1.5 }}>
|
||||
No encontramos un slug para esta organización. Revisá el nombre de la organización en la configuración del perfil y volvé a intentar.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function PublicVisibilityFlow(props: Props) {
|
||||
const { isSelectedOrganizationPaidPlan, router, createdCompanyId, selectedOrganization, handleSavePublicVisibility, isCreating, orgShowPublicScores, setOrgShowPublicScores, orgShowPublicOpinions, setOrgShowPublicOpinions, orgShowPublicProfessionals, setOrgShowPublicProfessionals, servicesShowPublicScores, setServicesShowPublicScores, servicesShowPublicOpinions, setServicesShowPublicOpinions } = props;
|
||||
const renderVisibilityCheckbox = (label: string, description: string, checked: boolean, onChange: (checked: boolean) => void) => (
|
||||
<label style={{
|
||||
display: 'flex', gap: '12px', alignItems: 'flex-start', padding: '14px', borderRadius: '12px',
|
||||
background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', cursor: 'pointer'
|
||||
}}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
style={{ width: '18px', height: '18px', marginTop: '2px', accentColor: 'var(--wine-red)', cursor: 'pointer' }}
|
||||
/>
|
||||
<span style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<span style={{ color: 'white', fontWeight: 700 }}>{label}</span>
|
||||
<span style={{ color: 'rgba(255,255,255,0.65)', fontSize: '13px', lineHeight: 1.4 }}>{description}</span>
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
|
||||
return (() => {
|
||||
if (!isSelectedOrganizationPaidPlan()) {
|
||||
return (
|
||||
<QuestionCard
|
||||
isActive={true}
|
||||
title="Esta configuración requiere un plan pago"
|
||||
description="La visibilidad pública de opiniones, puntuaciones y profesionales está disponible para organizaciones con plan pago activo. El flujo seguirá visible para que puedas volver cuando actualices tu plan."
|
||||
onNext={() => router.push(createdCompanyId ? `/landing/upgrade-plan?org=${createdCompanyId}` : "/landing/pricing")}
|
||||
nextLabel="Ver planes"
|
||||
>
|
||||
<div style={{
|
||||
color: 'rgba(255,255,255,0.75)', textAlign: 'center', padding: '18px', borderRadius: '16px',
|
||||
background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', lineHeight: 1.5
|
||||
}}>
|
||||
Estás configurando {selectedOrganization?.name ? <strong>{selectedOrganization.name}</strong> : "esta organización"}. Para cambiar qué opiniones, puntuaciones y profesionales se muestran públicamente, el dueño de esta organización necesita un plan pago.
|
||||
</div>
|
||||
</QuestionCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<QuestionCard
|
||||
isActive={true}
|
||||
title="Configura la visibilidad pública"
|
||||
description="Elige qué información verán tus clientes en la página pública de la organización y sus servicios. Si un valor nunca fue configurado, se considera visible por defecto."
|
||||
onNext={handleSavePublicVisibility}
|
||||
disableNext={isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : "Guardar configuración"}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '18px', width: '100%' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<h3 style={{ color: 'white', margin: 0, fontSize: '16px' }}>Organización</h3>
|
||||
{renderVisibilityCheckbox("Mostrar puntuación pública", "Permite que los clientes vean la puntuación promedio de la organización.", orgShowPublicScores, setOrgShowPublicScores)}
|
||||
{renderVisibilityCheckbox("Mostrar opiniones públicas", "Permite que los clientes vean las opiniones recibidas por la organización.", orgShowPublicOpinions, setOrgShowPublicOpinions)}
|
||||
{renderVisibilityCheckbox("Mostrar profesionales públicos", "Permite que los clientes vean la lista de profesionales de la organización.", orgShowPublicProfessionals, setOrgShowPublicProfessionals)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<h3 style={{ color: 'white', margin: 0, fontSize: '16px' }}>Servicios</h3>
|
||||
{renderVisibilityCheckbox("Mostrar puntuación pública de servicios", "Aplica este valor a todos los servicios de la organización.", servicesShowPublicScores, setServicesShowPublicScores)}
|
||||
{renderVisibilityCheckbox("Mostrar opiniones públicas de servicios", "Aplica este valor a todos los servicios de la organización.", servicesShowPublicOpinions, setServicesShowPublicOpinions)}
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
);
|
||||
})();
|
||||
|
||||
|
||||
}
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
import React from "react";
|
||||
import dayjs from "dayjs";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function ReservationPeriodFlow(props: Props) {
|
||||
const { reservationPeriodEmployeesLoading, currentStepIndex, reservationPeriodEmployeesError, allEmployees, reservationPeriodScope, setReservationPeriodScope, targetEmployeeId, setTargetEmployeeId, reservationPeriodSummary, handleNext, reservationPeriodDuration, setReservationPeriodDuration, reservationPeriodOptions, handleExtendReservationPeriods, isCreating, selectedOrganization, orgName } = props;
|
||||
|
||||
if (reservationPeriodEmployeesLoading) {
|
||||
return <QuestionCard isActive={currentStepIndex === 0} title="Cargando colaboradores" description="Estamos buscando los colaboradores disponibles para extender el período de reservas." disableNext nextLabel="Cargando..."><div /></QuestionCard>;
|
||||
}
|
||||
|
||||
if (reservationPeriodEmployeesError || allEmployees.length === 0) {
|
||||
return <QuestionCard isActive={currentStepIndex === 0} title="No pudimos preparar la extensión" description={reservationPeriodEmployeesError || "No encontramos colaboradores activos para extender el período de reservas."} disableNext nextLabel="Extensión bloqueada"><div /></QuestionCard>;
|
||||
}
|
||||
|
||||
const needsEmployeeSelection = allEmployees.length > 1 && reservationPeriodScope === "employee";
|
||||
const selectedEmployee = allEmployees.find((employee: any) => String(employee.id || employee._id || employee.employeeId) === String(targetEmployeeId));
|
||||
const reservationPeriodEmployees = reservationPeriodSummary?.employees || [];
|
||||
const getReservationPeriodEmployeeSummary = (employee: any) => {
|
||||
const employeeKey = employee.id || employee._id || employee.employeeId;
|
||||
return reservationPeriodEmployees.find((summary: any) => String(summary.employeeId) === String(employeeKey));
|
||||
};
|
||||
const getReservationPeriodStatus = (employee: any) => {
|
||||
const summary = getReservationPeriodEmployeeSummary(employee);
|
||||
const daysRemaining = summary?.daysRemaining;
|
||||
const safeDaysRemaining = typeof daysRemaining === "number" ? Math.max(daysRemaining, 0) : 0;
|
||||
const progress = Math.min(Math.round((safeDaysRemaining / 30) * 100), 100);
|
||||
const color = !summary?.isOpen || safeDaysRemaining === 0 ? "#ef4444" : safeDaysRemaining <= 7 ? "#f59e0b" : "#22c55e";
|
||||
|
||||
let label = "Sin período abierto";
|
||||
if (summary?.isOpen && typeof daysRemaining === "number") {
|
||||
if (daysRemaining < 0) label = "Vencido";
|
||||
else if (daysRemaining === 1) label = "1 día restante";
|
||||
else label = `${daysRemaining} días restantes`;
|
||||
} else if (typeof daysRemaining === "number" && daysRemaining < 0) {
|
||||
label = "Vencido";
|
||||
}
|
||||
|
||||
return {
|
||||
label,
|
||||
color,
|
||||
progress,
|
||||
openUntilLabel: summary?.currentOpenUntil ? `Abierto hasta ${dayjs(summary.currentOpenUntil).format("D [de] MMMM")}` : null
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{allEmployees.length > 1 && (
|
||||
<QuestionCard isActive={currentStepIndex === 0} title="Elegí a quién extenderle el período" description="Podés abrir reservas para todos los colaboradores o para uno específico." onNext={handleNext} disableNext={!reservationPeriodScope || (needsEmployeeSelection && !targetEmployeeId)} nextLabel="Siguiente">
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%" }}>
|
||||
<SelectionCard selected={reservationPeriodScope === "all"} onClick={() => { setReservationPeriodScope("all"); setTargetEmployeeId(null); }} title="Todos los colaboradores" description="Extiende el período de reservas para todo el equipo." />
|
||||
<SelectionCard selected={reservationPeriodScope === "employee"} onClick={() => setReservationPeriodScope("employee")} title="Un colaborador específico" description="Elige una persona del equipo." />
|
||||
{needsEmployeeSelection && (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "8px", marginTop: "8px" }}>
|
||||
{allEmployees.map((employee: any) => {
|
||||
const employeeKey = employee.id || employee._id || employee.employeeId;
|
||||
const isSelected = String(targetEmployeeId) === String(employeeKey);
|
||||
const periodStatus = getReservationPeriodStatus(employee);
|
||||
return (
|
||||
<div key={employeeKey} onClick={() => setTargetEmployeeId(employeeKey)} style={{ padding: "12px 14px", borderRadius: "10px", cursor: "pointer", background: isSelected ? "rgba(255,42,127,0.18)" : "rgba(255,255,255,0.04)", border: `1px solid ${isSelected ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`, color: "white" }}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", gap: "12px", alignItems: "flex-start" }}>
|
||||
<span style={{ fontWeight: 600 }}>{employee.fullName || `${employee.firstName || ""} ${employee.lastName || ""}`.trim() || employee.email || "Colaborador"}</span>
|
||||
<span style={{ color: periodStatus.color, fontSize: "12px", fontWeight: 700, whiteSpace: "nowrap" }}>{periodStatus.label}</span>
|
||||
</div>
|
||||
<div style={{ height: "7px", borderRadius: "999px", background: "rgba(255,255,255,0.12)", overflow: "hidden" }}>
|
||||
<div style={{ width: `${periodStatus.progress}%`, minWidth: periodStatus.progress > 0 ? "8px" : 0, height: "100%", borderRadius: "999px", background: periodStatus.color, transition: "width 0.2s ease" }} />
|
||||
</div>
|
||||
{periodStatus.openUntilLabel && <span style={{ color: "rgba(255,255,255,0.62)", fontSize: "12px" }}>{periodStatus.openUntilLabel}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
)}
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === (allEmployees.length > 1 ? 1 : 0)} title="Elegí cuánto extender" description="Abriremos un nuevo bloque continuo desde el último día actualmente disponible." onNext={handleNext} disableNext={!reservationPeriodDuration} nextLabel="Siguiente">
|
||||
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap", width: "100%", justifyContent: "center" }}>
|
||||
{reservationPeriodOptions.map((option: any) => {
|
||||
const isSelected = reservationPeriodDuration?.unit === option.unit && reservationPeriodDuration.value === option.value;
|
||||
return <div key={`${option.unit}-${option.value}`} onClick={() => setReservationPeriodDuration({ unit: option.unit, value: option.value })} style={{ padding: "12px 24px", borderRadius: "12px", cursor: "pointer", background: isSelected ? "var(--wine-red)" : "rgba(255,255,255,0.05)", border: `2px solid ${isSelected ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`, color: "white", fontWeight: isSelected ? "bold" : "normal", transition: "all 0.2s ease", fontSize: "16px" }}>{option.label}</div>;
|
||||
})}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={currentStepIndex === (allEmployees.length > 1 ? 2 : 1)} title="Confirmar extensión" description="Revisá la selección antes de abrir el nuevo período de reservas." onNext={handleExtendReservationPeriods} disableNext={isCreating || reservationPeriodEmployeesLoading || Boolean(reservationPeriodEmployeesError) || allEmployees.length === 0 || !reservationPeriodScope || !reservationPeriodDuration || (reservationPeriodScope === "employee" && !targetEmployeeId)} nextLabel={isCreating ? "Extendiendo..." : "Extender período"}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%", maxWidth: "500px", margin: "0 auto", background: "rgba(255,255,255,0.05)", borderRadius: "12px", padding: "18px", border: "1px solid rgba(255,255,255,0.1)", color: "white" }}>
|
||||
<SummaryLine label="Organización" value={selectedOrganization?.name || orgName} />
|
||||
<SummaryLine label="Aplicar a" value={reservationPeriodScope === "all" ? "Todos los colaboradores" : (selectedEmployee?.fullName || selectedEmployee?.email || "Colaborador seleccionado")} />
|
||||
<SummaryLine label="Duración" value={reservationPeriodOptions.find((option: any) => option.unit === reservationPeriodDuration?.unit && option.value === reservationPeriodDuration.value)?.label} />
|
||||
{reservationPeriodSummary?.worstDaysRemaining !== null && reservationPeriodSummary?.worstDaysRemaining !== undefined && (
|
||||
<div style={{ color: "rgba(255,255,255,0.7)", fontSize: "13px" }}>Menor disponibilidad actual: {reservationPeriodSummary.worstDaysRemaining} días restantes.</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectionCard({ selected, onClick, title, description }: Props) {
|
||||
return <div onClick={onClick} style={{ padding: "18px", borderRadius: "12px", cursor: "pointer", background: selected ? "var(--wine-red)" : "rgba(255,255,255,0.05)", border: `2px solid ${selected ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`, color: "white", textAlign: "center", transition: "all 0.2s ease" }}><h4 style={{ margin: "0 0 5px 0", fontSize: "16px", fontWeight: selected ? "bold" : "normal" }}>{title}</h4><p style={{ margin: 0, fontSize: "13px", color: "rgba(255,255,255,0.75)" }}>{description}</p></div>;
|
||||
}
|
||||
|
||||
function SummaryLine({ label, value }: Props) {
|
||||
return <div><div style={{ color: "rgba(255,255,255,0.65)", fontSize: "13px" }}>{label}</div><div style={{ fontWeight: 700 }}>{value}</div></div>;
|
||||
}
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
import QuestionInput from "../../QuestionCard/QuestionInput";
|
||||
import style from "../StepEngine.module.css";
|
||||
|
||||
type Props = any;
|
||||
|
||||
const DAY_LABELS = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
|
||||
const getDayLabel = (day: number) => DAY_LABELS[day];
|
||||
|
||||
export default function SetupCollaboratorFlow(props: Props) {
|
||||
const { currentStepIndex, collaboratorToSetup, setupMissingServices, setupMissingSchedules, setupSelectedServices, setSetupSelectedServices, setupAvailableServices, workingDaysMode, setWorkingDaysMode, customDays, setCustomDays, unifiedCustomSchedule, setUnifiedCustomSchedule, customSchedulesMap, setCustomSchedulesMap, openTime, setOpenTime, closeTime, setCloseTime, hasBreak, setHasBreak, breakStart, setBreakStart, breakEnd, setBreakEnd, isCreating, handleSetupIntroNext, handleSetupServicesNext, handleSetupSchedulesNext } = props;
|
||||
|
||||
const canProceed = () => {
|
||||
if (!workingDaysMode) return false;
|
||||
if (workingDaysMode === "custom") {
|
||||
if (customDays.length === 0) return false;
|
||||
if (unifiedCustomSchedule === null) return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
if (currentStepIndex === 0) {
|
||||
return (
|
||||
<QuestionCard isActive={true} title="Configuración de Colaborador" description={`El colaborador ${collaboratorToSetup?.name || ""} requiere tu atención para comenzar a recibir reservas.`} step={1} totalSteps={setupMissingServices && setupMissingSchedules ? 3 : 2} onNext={handleSetupIntroNext} nextLabel="Comenzar Configuración">
|
||||
<div style={{ padding: "30px", background: 'linear-gradient(135deg, rgba(255, 65, 108, 0.1) 0%, rgba(255, 75, 43, 0.1) 100%)', border: '1px solid var(--wine-red)', borderRadius: '15px', color: 'white', textAlign: 'center', margin: '15px 0' }}>
|
||||
<div style={{ fontSize: '40px', marginBottom: '10px' }}>⚠️</div>
|
||||
<p style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '15px' }}>Hemos detectado que a este colaborador le falta:</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center', marginBottom: '20px' }}>
|
||||
{setupMissingServices && <MissingBadge icon="✂️" label="Servicios asignados" />}
|
||||
{setupMissingSchedules && <MissingBadge icon="🕒" label="Horarios de atención" />}
|
||||
</div>
|
||||
<p style={{ opacity: 0.8, fontSize: '14px' }}>Te guiaremos paso a paso para configurarlo rápidamente.</p>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStepIndex === 1) {
|
||||
return (
|
||||
<QuestionCard isActive={true} title="Asignación de Servicios" description="Selecciona los servicios que este colaborador podrá realizar." step={2} totalSteps={setupMissingServices && setupMissingSchedules ? 3 : 2} onNext={handleSetupServicesNext} nextLabel="Guardar y Continuar" disableNext={isCreating}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
|
||||
{setupAvailableServices.map((service: any) => {
|
||||
const serviceId = service.id || service._id;
|
||||
const selected = setupSelectedServices.includes(serviceId);
|
||||
return (
|
||||
<div key={serviceId} onClick={() => setSetupSelectedServices((prev: string[]) => prev.includes(serviceId) ? prev.filter(i => i !== serviceId) : [...prev, serviceId])} style={{ padding: "15px", borderRadius: "10px", background: selected ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.05)", border: `1px solid ${selected ? "#fff" : "rgba(255,255,255,0.1)"}`, cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<div>
|
||||
<div style={{ color: "#fff", fontWeight: "bold" }}>{service.name}</div>
|
||||
<div style={{ color: "rgba(255,255,255,0.6)", fontSize: "13px" }}>{service.duration} min - ${service.price}</div>
|
||||
</div>
|
||||
{selected && <div style={{ color: "#fff" }}>✓</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{setupAvailableServices.length === 0 && <div style={{ color: "rgba(255,255,255,0.6)" }}>No hay servicios creados en la organización.</div>}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStepIndex === 2) {
|
||||
return (
|
||||
<QuestionCard isActive={true} title="Horarios de Atención" description="¿En qué días y horarios trabajará este colaborador?" step={setupMissingServices ? 3 : 2} totalSteps={setupMissingServices && setupMissingSchedules ? 3 : 2} onNext={() => handleSetupSchedulesNext(canProceed)} nextLabel="Guardar Horarios" disableNext={isCreating || !canProceed()}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "10px", marginBottom: "20px" }}>
|
||||
<ModeCard active={workingDaysMode === "mon-fri"} onClick={() => setWorkingDaysMode("mon-fri")} title="Lunes a Viernes" description="Horario comercial estándar" />
|
||||
<ModeCard active={workingDaysMode === "mon-sat"} onClick={() => setWorkingDaysMode("mon-sat")} title="Lunes a Sábado" description="Jornada extendida" />
|
||||
<ModeCard active={workingDaysMode === "mon-sun"} onClick={() => setWorkingDaysMode("mon-sun")} title="Todos los días" description="Lunes a Domingo" />
|
||||
<ModeCard active={workingDaysMode === "custom"} onClick={() => setWorkingDaysMode("custom")} title="Otros / Personalizado" description="Selecciona días específicos y horarios variables" />
|
||||
</div>
|
||||
|
||||
{workingDaysMode === "custom" && (
|
||||
<div style={{ marginBottom: "25px", padding: "20px", background: "rgba(0,0,0,0.2)", borderRadius: "15px" }}>
|
||||
<h4 style={{ color: "white", marginBottom: "15px" }}>Selecciona los días:</h4>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "10px", marginBottom: "20px" }}>
|
||||
{[1,2,3,4,5,6,0].map(day => (
|
||||
<div key={day} onClick={() => setCustomDays((prev: number[]) => prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day].sort())} style={{ padding: "8px 16px", borderRadius: "20px", cursor: "pointer", background: customDays.includes(day) ? "var(--wine-red)" : "rgba(255,255,255,0.1)", color: "white", fontWeight: customDays.includes(day) ? "bold" : "normal", transition: "all 0.2s", border: `1px solid ${customDays.includes(day) ? "var(--wine-red)" : "transparent"}` }}>
|
||||
{getDayLabel(day)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{customDays.length > 0 && (
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
<h4 style={{ color: "white", marginBottom: "15px", fontSize: "15px" }}>¿Utiliza el mismo horario para todos estos días?</h4>
|
||||
<div style={{ display: "flex", gap: "10px" }}>
|
||||
<button className={style.primaryButton} style={{ flex: 1, background: unifiedCustomSchedule === true ? "var(--wine-red)" : "rgba(255,255,255,0.1)", color: "white" }} onClick={() => setUnifiedCustomSchedule(true)}>Sí, el mismo</button>
|
||||
<button className={style.primaryButton} style={{ flex: 1, background: unifiedCustomSchedule === false ? "var(--wine-red)" : "rgba(255,255,255,0.1)", color: "white" }} onClick={() => setUnifiedCustomSchedule(false)}>No, personalizar por día</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{((workingDaysMode && workingDaysMode !== "custom") || (workingDaysMode === "custom" && unifiedCustomSchedule === true && customDays.length > 0)) && (
|
||||
<TimeSettings openTime={openTime} setOpenTime={setOpenTime} closeTime={closeTime} setCloseTime={setCloseTime} hasBreak={hasBreak} setHasBreak={setHasBreak} breakStart={breakStart} setBreakStart={setBreakStart} breakEnd={breakEnd} setBreakEnd={setBreakEnd} />
|
||||
)}
|
||||
|
||||
{workingDaysMode === "custom" && unifiedCustomSchedule === false && customDays.length > 0 && (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{customDays.map((day: number) => {
|
||||
const ds = customSchedulesMap[day] || { openTime: "09:00", closeTime: "18:00", hasBreak: false, breakStart: "13:00", breakEnd: "14:00" };
|
||||
const updateDS = (updates: any) => setCustomSchedulesMap((prev: any) => ({...prev, [day]: { ...ds, ...updates } }));
|
||||
return <CustomDaySettings key={day} day={day} ds={ds} updateDS={updateDS} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</QuestionCard>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function MissingBadge({ icon, label }: Props) {
|
||||
return <div style={{ background: 'rgba(0,0,0,0.3)', padding: '10px 20px', borderRadius: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}><span>{icon}</span> {label}</div>;
|
||||
}
|
||||
|
||||
function ModeCard({ active, onClick, title, description }: Props) {
|
||||
return <div style={{ padding: "15px", borderRadius: "10px", background: active ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.05)", border: `1px solid ${active ? "#fff" : "rgba(255,255,255,0.1)"}`, cursor: "pointer", transition: "all 0.2s" }} onClick={onClick}><h4 style={{ color: "#fff", margin: "0 0 5px 0", fontSize: "16px" }}>{title}</h4><p style={{ color: "rgba(255,255,255,0.6)", margin: 0, fontSize: "13px" }}>{description}</p></div>;
|
||||
}
|
||||
|
||||
function TimeSettings(props: Props) {
|
||||
const { openTime, setOpenTime, closeTime, setCloseTime, hasBreak, setHasBreak, breakStart, setBreakStart, breakEnd, setBreakEnd } = props;
|
||||
return (
|
||||
<div className={style.timeSettingsContainer}>
|
||||
<h4 style={{ color: "rgba(255,255,255,0.9)", marginBottom: "15px" }}>Horario de apertura y cierre</h4>
|
||||
<div style={{ display: "flex", gap: "20px", marginBottom: "20px" }}>
|
||||
<QuestionInput label="Hora de Apertura" type="time" value={openTime} onChange={(e) => setOpenTime(e.target.value)} />
|
||||
<QuestionInput label="Hora de Cierre" type="time" value={closeTime} onChange={(e) => setCloseTime(e.target.value)} />
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "20px" }}>
|
||||
<input type="checkbox" id="hasBreak" checked={hasBreak === true} onChange={(e) => setHasBreak(e.target.checked)} style={{ width: "18px", height: "18px" }} />
|
||||
<label htmlFor="hasBreak" style={{ color: "rgba(255,255,255,0.8)", cursor: "pointer" }}>Tiene horario de descanso (almuerzo)</label>
|
||||
</div>
|
||||
{hasBreak && <div style={{ display: "flex", gap: "20px", marginBottom: "20px", padding: "15px", background: "rgba(0,0,0,0.2)", borderRadius: "10px" }}><QuestionInput label="Inicio de Descanso" type="time" value={breakStart} onChange={(e) => setBreakStart(e.target.value)} /><QuestionInput label="Fin de Descanso" type="time" value={breakEnd} onChange={(e) => setBreakEnd(e.target.value)} /></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomDaySettings({ day, ds, updateDS }: Props) {
|
||||
return (
|
||||
<div style={{ padding: "15px", background: "rgba(0,0,0,0.2)", borderRadius: "15px", border: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
<h4 style={{ color: "white", marginBottom: "15px", borderBottom: "1px solid rgba(255,255,255,0.1)", paddingBottom: "10px" }}>Configuración para {getDayLabel(day)}</h4>
|
||||
<div style={{ display: "flex", gap: "20px", marginBottom: "15px" }}>
|
||||
<QuestionInput label="Apertura" type="time" value={ds.openTime} onChange={(e) => updateDS({ openTime: e.target.value })} />
|
||||
<QuestionInput label="Cierre" type="time" value={ds.closeTime} onChange={(e) => updateDS({ closeTime: e.target.value })} />
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "15px" }}>
|
||||
<input type="checkbox" id={`hasBreak_${day}`} checked={ds.hasBreak === true} onChange={(e) => updateDS({ hasBreak: e.target.checked })} style={{ width: "18px", height: "18px" }} />
|
||||
<label htmlFor={`hasBreak_${day}`} style={{ color: "rgba(255,255,255,0.8)", cursor: "pointer", fontSize: "14px" }}>Descanso</label>
|
||||
</div>
|
||||
{ds.hasBreak && <div style={{ display: "flex", gap: "20px", padding: "10px", background: "rgba(0,0,0,0.3)", borderRadius: "10px" }}><QuestionInput label="Inicio" type="time" value={ds.breakStart} onChange={(e) => updateDS({ breakStart: e.target.value })} /><QuestionInput label="Fin" type="time" value={ds.breakEnd} onChange={(e) => updateDS({ breakEnd: e.target.value })} /></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import React from "react";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type Props = any;
|
||||
|
||||
export default function UpdateScheduleFlow(props: Props) {
|
||||
const { currentStepIndex, scheduleScope, setScheduleScope, targetEmployeeId, setTargetEmployeeId, allEmployees, handleNext, workingDaysMode, setWorkingDaysMode, openTime, setOpenTime, closeTime, setCloseTime, hasBreak, setHasBreak, breakStart, setBreakStart, breakEnd, setBreakEnd, isCreating, handleUpdateScheduleSubmit, handleOverrideScheduleSubmit, disableDuration, setDisableDuration, disableStartDate, setDisableStartDate, disableEndDate, setDisableEndDate, isFullDayDisabled, setIsFullDayDisabled, disableStartTime, setDisableStartTime, disableEndTime, setDisableEndTime, handleDisableScheduleSubmit } = props;
|
||||
return (
|
||||
<>
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 0}
|
||||
title="Actualizar Horarios"
|
||||
description="¿A quiénes quieres aplicar esta nueva rutina de horarios?"
|
||||
onNext={() => {
|
||||
if (scheduleScope === "specific" && !targetEmployeeId) {
|
||||
alert("Por favor selecciona un colaborador.");
|
||||
return;
|
||||
}
|
||||
handleNext();
|
||||
}}
|
||||
disableNext={!scheduleScope || (scheduleScope === "specific" && !targetEmployeeId)}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
|
||||
<div
|
||||
onClick={() => setScheduleScope("me")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "me" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "me" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>Solo a mí</h4>
|
||||
<p style={{ margin: 0, fontSize: '12px', opacity: 0.7 }}>Aplica esta rutina únicamente a tus horarios.</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setScheduleScope("specific")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "specific" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "specific" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>A un colaborador en particular</h4>
|
||||
<p style={{ margin: 0, fontSize: '12px', opacity: 0.7 }}>Aplica esta rutina a un integrante específico de tu equipo.</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setScheduleScope("all")}
|
||||
style={{
|
||||
padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: scheduleScope === "all" ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${scheduleScope === "all" ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center', transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<h4 style={{ margin: '0 0 5px 0' }}>A todos mis colaboradores</h4>
|
||||
<p style={{ margin: 0, fontSize: '12px', opacity: 0.7 }}>Sobrescribe masivamente los horarios de todo tu equipo.</p>
|
||||
</div>
|
||||
|
||||
{scheduleScope === "specific" && (
|
||||
<div style={{ marginTop: '15px', width: '100%' }}>
|
||||
<label style={{ color: 'white', display: 'block', marginBottom: '8px', fontSize: '14px' }}>Selecciona el colaborador:</label>
|
||||
<select
|
||||
value={targetEmployeeId || ""}
|
||||
onChange={(e) => setTargetEmployeeId(e.target.value)}
|
||||
style={{
|
||||
width: '100%', padding: '12px', borderRadius: '8px',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', border: '1px solid rgba(255,255,255,0.2)',
|
||||
outline: 'none', fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
<option value="" disabled style={{ color: 'black' }}>-- Seleccionar --</option>
|
||||
{allEmployees.map((emp: any) => (
|
||||
<option key={emp.id || emp._id || emp.employeeId} value={emp.id || emp._id || emp.employeeId} style={{ color: 'black' }}>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 1}
|
||||
title="Días de Trabajo"
|
||||
description="¿Qué días aplicará esta rutina?"
|
||||
onNext={handleNext}
|
||||
disableNext={!workingDaysMode}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
|
||||
{[
|
||||
{ id: 'mon-fri', label: 'Lunes a Viernes' },
|
||||
{ id: 'mon-sat', label: 'Lunes a Sábado' },
|
||||
{ id: 'mon-sun', label: 'Todos los días' }
|
||||
].map(mode => (
|
||||
<div
|
||||
key={mode.id}
|
||||
onClick={() => setWorkingDaysMode(mode.id)}
|
||||
style={{
|
||||
padding: '15px',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
background: workingDaysMode === mode.id ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${workingDaysMode === mode.id ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
{mode.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 2}
|
||||
title="Horario Comercial"
|
||||
description="¿A qué hora empieza y termina la jornada laboral?"
|
||||
onNext={handleNext}
|
||||
disableNext={!openTime || !closeTime}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Apertura</label>
|
||||
<input
|
||||
type="time"
|
||||
value={openTime}
|
||||
onChange={(e) => setOpenTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Cierre</label>
|
||||
<input
|
||||
type="time"
|
||||
value={closeTime}
|
||||
onChange={(e) => setCloseTime(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 3}
|
||||
title="Descansos"
|
||||
description="¿Tienen un horario de corte al mediodía o descanso?"
|
||||
onNext={() => {
|
||||
if (hasBreak) {
|
||||
handleNext();
|
||||
} else {
|
||||
handleUpdateScheduleSubmit();
|
||||
}
|
||||
}}
|
||||
disableNext={hasBreak === null}
|
||||
nextLabel={hasBreak ? "Siguiente" : (isCreating ? "Guardando..." : "Guardar Horarios")}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '15px', width: '100%', justifyContent: 'center' }}>
|
||||
<div
|
||||
onClick={() => setHasBreak(true)}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: hasBreak === true ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${hasBreak === true ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Sí, hay descanso
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setHasBreak(false)}
|
||||
style={{
|
||||
flex: 1, padding: '15px', borderRadius: '12px', cursor: 'pointer',
|
||||
background: hasBreak === false ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
|
||||
border: `2px solid ${hasBreak === false ? 'var(--wine-red)' : 'transparent'}`,
|
||||
color: 'white', textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
No, horario corrido
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard
|
||||
isActive={currentStepIndex === 4}
|
||||
title="Horario de Descanso"
|
||||
description="¿De qué hora a qué hora no estarán disponibles?"
|
||||
onNext={handleUpdateScheduleSubmit}
|
||||
disableNext={!breakStart || !breakEnd || isCreating}
|
||||
nextLabel={isCreating ? "Guardando..." : "Guardar Horarios"}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '20px', width: '100%', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Inicio descanso</label>
|
||||
<input
|
||||
type="time"
|
||||
value={breakStart}
|
||||
onChange={(e) => setBreakStart(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<label style={{ color: 'white', fontSize: '12px', opacity: 0.7 }}>Fin descanso</label>
|
||||
<input
|
||||
type="time"
|
||||
value={breakEnd}
|
||||
onChange={(e) => setBreakEnd(e.target.value)}
|
||||
style={{
|
||||
padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)',
|
||||
background: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none',
|
||||
fontSize: '18px', fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QuestionCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import WhatsAppIcon from "@mui/icons-material/WhatsApp";
|
||||
import QuestionCard from "../../QuestionCard/QuestionCard";
|
||||
|
||||
type WhatsAppBotFlowProps = {
|
||||
wapPhase: any;
|
||||
wapAction: any;
|
||||
wapView: any;
|
||||
wapQr: any;
|
||||
wapError: any;
|
||||
createdCompanyId: any;
|
||||
router: any;
|
||||
loadWapView: any;
|
||||
handleWapAssignServer: any;
|
||||
handleWapCreateBot: any;
|
||||
handleWapQuitServer: any;
|
||||
handleWapStartBot: any;
|
||||
handleWapDeleteBot: any;
|
||||
handleWapVerifyQr: any;
|
||||
handleWapStopBot: any;
|
||||
getImageFromBase64: any;
|
||||
setIsSuccess: any;
|
||||
setWapPhase: any;
|
||||
setWapError: any;
|
||||
};
|
||||
|
||||
export default function WhatsAppBotFlow(props: WhatsAppBotFlowProps) {
|
||||
const { wapPhase, wapAction, wapView, wapQr, wapError, createdCompanyId, router, loadWapView, handleWapAssignServer, handleWapCreateBot, handleWapQuitServer, handleWapStartBot, handleWapDeleteBot, handleWapVerifyQr, handleWapStopBot, getImageFromBase64, setIsSuccess, setWapPhase, setWapError } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<QuestionCard isActive={wapPhase === "intro"} title="Bot de WhatsApp" description="Vamos a configurar tu bot de WhatsApp. Esto te permitirá enviar notificaciones automáticas a tus clientes. Primero verificamos el estado actual de tu organización." onNext={loadWapView} nextLabel="Verificar estado" topAccessory={<WhatsAppIcon style={{ fontSize: 48, color: "#25D366" }} />}>
|
||||
{null}
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "plan-required"} title="Plan no compatible" description="Tu plan actual no incluye notificaciones por WhatsApp. Necesitás un plan que incluya esta funcionalidad para configurar el bot." onNext={() => router.push(`/landing/upgrade-plan?org=${createdCompanyId}`)} nextLabel="Ver planes" topAccessory={<div style={{ fontSize: 48 }}>📦</div>}>
|
||||
<div style={{ padding: "14px", borderRadius: "12px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)", fontSize: "13px", lineHeight: 1.5 }}>
|
||||
Actualizá tu plan para desbloquear notificaciones por WhatsApp y mejorar la comunicación con tus clientes.
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "assign-server"} title="Asignar servidor" description="Tu organización necesita un servidor de WhatsApp. Vamos a asignar uno automáticamente." onNext={handleWapAssignServer} disableNext={wapAction !== null} nextLabel={wapAction === "assign" ? "Asignando servidor..." : "Asignar servidor"} topAccessory={<div style={{ fontSize: 48 }}>🖥️</div>}>
|
||||
{wapAction === "assign" && <LoadingMessage label="Asignando servidor..." />}
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "create-bot"} title="Crear bot de WhatsApp" description={`Servidor asignado: ${wapView?.serverName || "disponible"}. Ahora vamos a crear tu bot de WhatsApp.`} onNext={handleWapCreateBot} disableNext={wapAction !== null} nextLabel={wapAction === "create" ? "Creando bot..." : "Crear bot de WhatsApp"} topAccessory={<div style={{ fontSize: 48 }}>🤖</div>}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%" }}>
|
||||
{wapAction === "create" && <LoadingMessage label="Creando bot..." />}
|
||||
<SecondaryButton onClick={handleWapQuitServer} disabled={wapAction !== null} loading={wapAction === "quit"} loadingLabel="Desasignando servidor..." label="Desasignar servidor" />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "start-bot"} title="Iniciar bot" description="Tu bot de WhatsApp está creado pero detenido. Vamos a iniciarlo." onNext={handleWapStartBot} disableNext={wapAction !== null} nextLabel={wapAction === "start" ? "Iniciando bot..." : "Iniciar bot"} topAccessory={<div style={{ fontSize: 48 }}>▶️</div>}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%" }}>
|
||||
{wapAction === "start" && <LoadingMessage label="Iniciando bot..." />}
|
||||
<SecondaryButton onClick={handleWapDeleteBot} disabled={wapAction !== null} loading={wapAction === "delete"} loadingLabel="Eliminando bot..." label="Eliminar bot" />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "scan-qr"} title="Escanear código QR" description="Tu bot está funcionando. Ahora necesitás vincular tu número de WhatsApp escaneando este código QR con tu teléfono." onNext={handleWapVerifyQr} disableNext={wapAction !== null} nextLabel={wapAction === "verify" ? "Verificando..." : "Ya escaneé el código"} topAccessory={<div style={{ fontSize: 48 }}>📱</div>}>
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "16px", width: "100%" }}>
|
||||
{wapQr ? (
|
||||
<div style={{ padding: "16px", borderRadius: "12px", background: "white", boxShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
||||
<img src={getImageFromBase64(wapQr)} width={250} height={250} alt="Escaneá el código QR" style={{ display: "block" }} />
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ width: 250, height: 250, borderRadius: "12px", background: "rgba(255,255,255,0.05)", border: "2px dashed rgba(255,255,255,0.2)", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.5)", fontSize: "14px" }}>Cargando QR...</div>
|
||||
)}
|
||||
<div style={{ padding: "12px 16px", borderRadius: "10px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)", fontSize: "13px", lineHeight: 1.5, textAlign: "center", maxWidth: "350px" }}>
|
||||
Abrí WhatsApp en tu teléfono → <strong style={{ color: "white" }}>Configuración</strong> → <strong style={{ color: "white" }}>Dispositivos vinculados</strong> → <strong style={{ color: "white" }}>Vincular dispositivo</strong>
|
||||
</div>
|
||||
{wapError && <div style={{ padding: "12px 16px", borderRadius: "10px", background: "rgba(255,60,60,0.1)", border: "1px solid rgba(255,60,60,0.3)", color: "#ff9999", fontSize: "13px", textAlign: "center", maxWidth: "350px" }}>{wapError}</div>}
|
||||
<SecondaryButton onClick={handleWapStopBot} disabled={wapAction !== null} loading={wapAction === "stop"} loadingLabel="Deteniendo bot..." label="Detener bot" />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "bot-ready"} title="¡Bot funcionando!" description="Tu bot de WhatsApp está conectado y funcionando correctamente. Ya puede enviar notificaciones a tus clientes." onNext={() => setIsSuccess(true)} nextLabel="Finalizar" topAccessory={<div style={{ fontSize: 48 }}>✅</div>}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "100%" }}>
|
||||
<div style={{ padding: "14px", borderRadius: "12px", background: "rgba(74,222,128,0.08)", border: "1px solid rgba(74,222,128,0.2)", color: "#4ade80", fontSize: "13px", textAlign: "center", fontWeight: 600 }}>
|
||||
Sesión de WhatsApp activa — Bot operativo
|
||||
</div>
|
||||
<SecondaryButton onClick={handleWapStopBot} disabled={wapAction !== null} loading={wapAction === "stop"} loadingLabel="Deteniendo bot..." label="Detener bot" />
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<QuestionCard isActive={wapPhase === "error"} title="Error" description={wapError || "Ocurrió un error inesperado. Por favor, intentá nuevamente."} onNext={() => { setWapPhase("intro"); setWapError(null); }} nextLabel="Reintentar" topAccessory={<div style={{ fontSize: 48 }}>⚠️</div>}>
|
||||
<div style={{ padding: "14px", borderRadius: "12px", background: "rgba(255,60,60,0.1)", border: "1px solid rgba(255,60,60,0.3)", color: "#ff9999", fontSize: "13px", lineHeight: 1.5 }}>
|
||||
Si el problema persiste, contactá al soporte de TurnosXpress.
|
||||
</div>
|
||||
</QuestionCard>
|
||||
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingMessage({ label }: { label: string }) {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", padding: "20px 0" }}>
|
||||
<Spinner size={36} borderWidth={3} />
|
||||
<span style={{ color: "rgba(255,255,255,0.7)", fontSize: "14px" }}>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SecondaryButton({ onClick, disabled, loading, loadingLabel, label }: any) {
|
||||
return (
|
||||
<button type="button" onClick={onClick} disabled={disabled} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "12px 20px", borderRadius: "10px", width: "100%", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.15)", color: "rgba(255,255,255,0.7)", cursor: "pointer", fontSize: "14px", fontWeight: 600, fontFamily: "inherit", transition: "all 0.2s ease", marginTop: "4px" }}>
|
||||
{loading ? <><Spinner size={18} borderWidth={2} />{loadingLabel}</> : label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Spinner({ size, borderWidth }: { size: number; borderWidth: number }) {
|
||||
return <div style={{ width: size, height: size, border: `${borderWidth}px solid rgba(255,255,255,0.2)`, borderTopColor: "var(--wine-red)", borderRadius: "50%", animation: "spin 1s linear infinite" }} />;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
export const getEmployeeId = (employee: any) => employee.id || employee._id || employee.employeeId;
|
||||
|
||||
export const getEmployeeUserId = (employee: any) => employee.userId?._id || employee.userId?.id || employee.userId;
|
||||
|
||||
export const getTargetEmployees = (
|
||||
allEmployees: any[],
|
||||
scheduleScope: "me" | "specific" | "all" | null,
|
||||
targetEmployeeId: string | null,
|
||||
sessionUserId: string
|
||||
) => {
|
||||
if (scheduleScope === "me") {
|
||||
const me = allEmployees.find((employee: any) => String(getEmployeeUserId(employee)) === String(sessionUserId));
|
||||
return me ? [me] : [];
|
||||
}
|
||||
|
||||
if (scheduleScope === "specific") {
|
||||
const specific = allEmployees.find((employee: any) => String(getEmployeeId(employee)) === String(targetEmployeeId));
|
||||
return specific ? [specific] : [];
|
||||
}
|
||||
|
||||
if (scheduleScope === "all") {
|
||||
return [...allEmployees];
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export const getImageFromBase64 = (base64: string): string => {
|
||||
const base64Data = base64.includes("base64,") ? base64.split(",")[1] : base64;
|
||||
const byteCharacters = atob(base64Data);
|
||||
const byteArray = new Uint8Array(byteCharacters.length);
|
||||
for (let i = 0; i < byteCharacters.length; i++) {
|
||||
byteArray[i] = byteCharacters.charCodeAt(i);
|
||||
}
|
||||
const blob = new Blob([byteArray], { type: "image/png" });
|
||||
return URL.createObjectURL(blob);
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { getSlug } from "@core/app/helpers/Slug";
|
||||
|
||||
export const getSelectedOrganizationSlug = (selectedOrganization: any, orgName: string) => {
|
||||
return selectedOrganization?.slug || getSlug(selectedOrganization?.name || orgName || "");
|
||||
};
|
||||
|
||||
export const getPublicLink = (selectedOrganization: any, orgName: string) => {
|
||||
const slug = getSelectedOrganizationSlug(selectedOrganization, orgName);
|
||||
const publicBaseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://turnosxpress.com.ar";
|
||||
return slug ? `${publicBaseUrl.replace(/\/$/, "")}/${slug}` : "";
|
||||
};
|
||||
|
||||
export const getPublicLinkQrUrl = (selectedOrganization: any, orgName: string) => {
|
||||
const publicLink = getPublicLink(selectedOrganization, orgName);
|
||||
return publicLink ? `https://api.qrserver.com/v1/create-qr-code/?size=260x260&format=png&data=${encodeURIComponent(publicLink)}` : "";
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
type ScheduleBlock = { from: string; to: string; disabled: boolean };
|
||||
|
||||
export const getWorkingDays = (workingDaysMode: string, customDays: number[] = []) => {
|
||||
if (workingDaysMode === "mon-fri") return [1, 2, 3, 4, 5];
|
||||
if (workingDaysMode === "mon-sat") return [1, 2, 3, 4, 5, 6];
|
||||
if (workingDaysMode === "mon-sun") return [1, 2, 3, 4, 5, 6, 0];
|
||||
if (workingDaysMode === "custom") return customDays;
|
||||
return [];
|
||||
};
|
||||
|
||||
export const buildScheduleBlocks = (
|
||||
openTime: string,
|
||||
closeTime: string,
|
||||
hasBreak: boolean | null,
|
||||
breakStart: string,
|
||||
breakEnd: string
|
||||
): ScheduleBlock[] => {
|
||||
if (hasBreak) {
|
||||
return [
|
||||
{ from: openTime, to: breakStart, disabled: false },
|
||||
{ from: breakEnd, to: closeTime, disabled: false }
|
||||
];
|
||||
}
|
||||
|
||||
return [{ from: openTime, to: closeTime, disabled: false }];
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export const dayjsFromHHmm = (hhmm: string) => {
|
||||
const [h, m] = (hhmm || "00:00").split(":").map(Number);
|
||||
return dayjs().hour(h || 0).minute(m || 0).second(0).millisecond(0);
|
||||
};
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
import API from "@services/Api.Service";
|
||||
|
||||
type UseNewCollaboratorHandlersDeps = {
|
||||
inviteEmail: string;
|
||||
inviteCollaborator: any | null;
|
||||
inviteRole: "admin" | "colaborador";
|
||||
createdCompanyId: string | null;
|
||||
sessionUserId: string;
|
||||
setInviteEmail: (value: string) => void;
|
||||
setInviteCollaborator: (value: any | null) => void;
|
||||
setInviteEmailError: (value: string) => void;
|
||||
setInviteRole: (value: "admin" | "colaborador") => void;
|
||||
setIsSearchingEmail: (value: boolean) => void;
|
||||
setIsCreating: (value: boolean) => void;
|
||||
setIsUpgradeRequired: (value: boolean) => void;
|
||||
setInviteFlowNotice: (value: string) => void;
|
||||
setCurrentStepIndex: (value: number) => void;
|
||||
handleNext: () => void;
|
||||
};
|
||||
|
||||
export function useNewCollaboratorHandlers({
|
||||
inviteEmail,
|
||||
inviteCollaborator,
|
||||
inviteRole,
|
||||
createdCompanyId,
|
||||
sessionUserId,
|
||||
setInviteEmail,
|
||||
setInviteCollaborator,
|
||||
setInviteEmailError,
|
||||
setInviteRole,
|
||||
setIsSearchingEmail,
|
||||
setIsCreating,
|
||||
setIsUpgradeRequired,
|
||||
setInviteFlowNotice,
|
||||
setCurrentStepIndex,
|
||||
handleNext
|
||||
}: UseNewCollaboratorHandlersDeps) {
|
||||
const handleSearchCollaboratorEmail = async () => {
|
||||
if (!inviteEmail || !inviteEmail.includes("@")) return;
|
||||
setIsSearchingEmail(true);
|
||||
setInviteEmailError("");
|
||||
setInviteCollaborator(null);
|
||||
try {
|
||||
const data = await API.post<any>("users/get-by-email", { email: inviteEmail.trim().toLowerCase() });
|
||||
if (data && (data.id || data._id)) {
|
||||
if ((data.id || data._id) === sessionUserId) {
|
||||
setInviteEmailError("No puedes invitarte a ti mismo.");
|
||||
setIsSearchingEmail(false);
|
||||
return;
|
||||
}
|
||||
setInviteCollaborator(data);
|
||||
handleNext();
|
||||
} else {
|
||||
setInviteEmailError("Usuario no registrado");
|
||||
}
|
||||
} catch (error: any) {
|
||||
setInviteEmailError("Usuario no registrado");
|
||||
} finally {
|
||||
setIsSearchingEmail(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateCollaborator = async () => {
|
||||
if (!inviteCollaborator || !createdCompanyId) return;
|
||||
setIsCreating(true);
|
||||
setInviteFlowNotice("");
|
||||
try {
|
||||
await API.post<any>("employees/create", {
|
||||
companyId: createdCompanyId,
|
||||
userId: inviteCollaborator.id || inviteCollaborator._id,
|
||||
roles: inviteRole === "admin" ? ["admin"] : [],
|
||||
hostOk: true,
|
||||
sessionUser: sessionUserId
|
||||
});
|
||||
handleNext();
|
||||
} catch (error: any) {
|
||||
const errorMessage = error.desc || error.message || "Error al invitar al colaborador";
|
||||
const normalizedErrorMessage = errorMessage.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
||||
if (normalizedErrorMessage.includes("limite")) {
|
||||
setIsUpgradeRequired(true);
|
||||
} else if (normalizedErrorMessage.includes("invitacion") && normalizedErrorMessage.includes("pendiente")) {
|
||||
setInviteFlowNotice("Ya se envió una invitación para que este usuario forme parte de la compañía y todavía no respondió.");
|
||||
setCurrentStepIndex(5);
|
||||
} else if (normalizedErrorMessage.includes("ya pertenece")) {
|
||||
setInviteFlowNotice("Este usuario ya pertenece a la compañía.");
|
||||
setCurrentStepIndex(6);
|
||||
} else {
|
||||
setInviteFlowNotice(errorMessage);
|
||||
setCurrentStepIndex(5);
|
||||
}
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetInviteFlow = () => {
|
||||
setInviteEmail("");
|
||||
setInviteCollaborator(null);
|
||||
setInviteEmailError("");
|
||||
setInviteRole("colaborador");
|
||||
setIsUpgradeRequired(false);
|
||||
setInviteFlowNotice("");
|
||||
setCurrentStepIndex(1);
|
||||
};
|
||||
|
||||
return {
|
||||
handleSearchCollaboratorEmail,
|
||||
handleCreateCollaborator,
|
||||
resetInviteFlow
|
||||
};
|
||||
}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
import API from "@services/Api.Service";
|
||||
import type React from "react";
|
||||
import { NotificationChannel, ReminderRule } from "@models/NotificationPreferences.model";
|
||||
import { ALL_NOTIF_CHANNELS } from "../constants/notifications";
|
||||
|
||||
type UseNotificationsHandlersDeps = {
|
||||
createdCompanyId: string | null;
|
||||
sessionUserId: string;
|
||||
isCreating: boolean;
|
||||
notificationsScope: "org" | "client" | null;
|
||||
notifChannels: NotificationChannel[];
|
||||
notifQuietHoursActive: boolean;
|
||||
notifQuietHoursFrom: string;
|
||||
notifQuietHoursTo: string;
|
||||
notifReminderRules: ReminderRule[];
|
||||
notifSelectedClientId: string | null;
|
||||
setNotificationsScope: (value: "org" | "client") => void;
|
||||
setNotifChannels: React.Dispatch<React.SetStateAction<NotificationChannel[]>>;
|
||||
setNotifQuietHoursActive: (value: boolean) => void;
|
||||
setNotifQuietHoursFrom: (value: string) => void;
|
||||
setNotifQuietHoursTo: (value: string) => void;
|
||||
setNotifReminderRules: React.Dispatch<React.SetStateAction<ReminderRule[]>>;
|
||||
setNotifSelectedClientId: (value: string | null) => void;
|
||||
setIsCreating: (value: boolean) => void;
|
||||
handleActionSuccess: () => void;
|
||||
};
|
||||
|
||||
export function useNotificationsHandlers({
|
||||
createdCompanyId,
|
||||
sessionUserId,
|
||||
isCreating,
|
||||
notificationsScope,
|
||||
notifChannels,
|
||||
notifQuietHoursActive,
|
||||
notifQuietHoursFrom,
|
||||
notifQuietHoursTo,
|
||||
notifReminderRules,
|
||||
notifSelectedClientId,
|
||||
setNotificationsScope,
|
||||
setNotifChannels,
|
||||
setNotifQuietHoursActive,
|
||||
setNotifQuietHoursFrom,
|
||||
setNotifQuietHoursTo,
|
||||
setNotifReminderRules,
|
||||
setNotifSelectedClientId,
|
||||
setIsCreating,
|
||||
handleActionSuccess
|
||||
}: UseNotificationsHandlersDeps) {
|
||||
const toggleNotifChannel = (channel: NotificationChannel) => {
|
||||
setNotifChannels(prev =>
|
||||
prev.includes(channel) ? prev.filter(c => c !== channel) : [...prev, channel]
|
||||
);
|
||||
};
|
||||
|
||||
const toggleNotifReminder = (minutes: number) => {
|
||||
const exists = notifReminderRules.some(r => r.offset === minutes);
|
||||
if (exists) {
|
||||
setNotifReminderRules(prev => prev.filter(r => r.offset !== minutes));
|
||||
} else {
|
||||
setNotifReminderRules(prev => [...prev, { offset: minutes, enabled: true }]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectNotifScope = (scope: "org" | "client") => {
|
||||
setNotificationsScope(scope);
|
||||
setNotifChannels([]);
|
||||
setNotifQuietHoursActive(false);
|
||||
setNotifQuietHoursFrom("22:00");
|
||||
setNotifQuietHoursTo("08:00");
|
||||
setNotifReminderRules([]);
|
||||
setNotifSelectedClientId(null);
|
||||
};
|
||||
|
||||
const handleSaveNotifications = async () => {
|
||||
if (!createdCompanyId || isCreating) return;
|
||||
if (notificationsScope === "client" && !notifSelectedClientId) return;
|
||||
setIsCreating(true);
|
||||
try {
|
||||
if (notificationsScope === "org") {
|
||||
const quietHours = notifQuietHoursActive
|
||||
? { from: notifQuietHoursFrom, to: notifQuietHoursTo }
|
||||
: null;
|
||||
await API.post<any>("notifications/policy/save", {
|
||||
companyId: createdCompanyId,
|
||||
sessionUser: sessionUserId,
|
||||
defaultChannels: notifChannels,
|
||||
timezone: "America/Argentina/Buenos_Aires",
|
||||
quietHours: quietHours || undefined,
|
||||
reminderRules: notifReminderRules
|
||||
});
|
||||
} else if (notificationsScope === "client") {
|
||||
const preferredChannels = notifChannels as NotificationChannel[];
|
||||
const mutedChannels = ALL_NOTIF_CHANNELS.filter(c => !preferredChannels.includes(c));
|
||||
await API.post<any>("notifications/override/save", {
|
||||
clientId: notifSelectedClientId,
|
||||
companyId: createdCompanyId,
|
||||
sessionUser: sessionUserId,
|
||||
preferredChannels,
|
||||
mutedChannels
|
||||
});
|
||||
}
|
||||
handleActionSuccess();
|
||||
} catch (error: any) {
|
||||
console.error("Error guardando notificaciones:", error);
|
||||
alert(error?.message || "Hubo un error al guardar las notificaciones.");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
toggleNotifChannel,
|
||||
toggleNotifReminder,
|
||||
handleSelectNotifScope,
|
||||
handleSaveNotifications
|
||||
};
|
||||
}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import API from "@services/Api.Service";
|
||||
import { ReservationPeriodDuration, ReservationPeriodsSummary } from "@models/SchedulesEnabled.type";
|
||||
|
||||
type UseReservationPeriodHandlersDeps = {
|
||||
createdCompanyId: string | null;
|
||||
sessionUserId: string;
|
||||
isCreating: boolean;
|
||||
reservationPeriodScope: "employee" | "all" | null;
|
||||
reservationPeriodDuration: ReservationPeriodDuration | null;
|
||||
reservationPeriodEmployeesLoading: boolean;
|
||||
reservationPeriodEmployeesError: string | null;
|
||||
allEmployees: any[];
|
||||
targetEmployeeId: string | null;
|
||||
setIsCreating: (value: boolean) => void;
|
||||
setIsSuccess: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export function useReservationPeriodHandlers({
|
||||
createdCompanyId,
|
||||
sessionUserId,
|
||||
isCreating,
|
||||
reservationPeriodScope,
|
||||
reservationPeriodDuration,
|
||||
reservationPeriodEmployeesLoading,
|
||||
reservationPeriodEmployeesError,
|
||||
allEmployees,
|
||||
targetEmployeeId,
|
||||
setIsCreating,
|
||||
setIsSuccess
|
||||
}: UseReservationPeriodHandlersDeps) {
|
||||
const handleExtendReservationPeriods = async () => {
|
||||
if (!createdCompanyId || !reservationPeriodScope || !reservationPeriodDuration || isCreating) return;
|
||||
if (reservationPeriodEmployeesLoading || reservationPeriodEmployeesError || allEmployees.length === 0) return;
|
||||
if (reservationPeriodScope === "employee" && !targetEmployeeId) return;
|
||||
|
||||
setIsCreating(true);
|
||||
try {
|
||||
await API.post<ReservationPeriodsSummary>("schedules-enabled/reservation-periods/extend", {
|
||||
companyId: createdCompanyId,
|
||||
scope: reservationPeriodScope,
|
||||
employeeId: reservationPeriodScope === "employee" ? targetEmployeeId : undefined,
|
||||
duration: reservationPeriodDuration,
|
||||
sessionUser: sessionUserId
|
||||
});
|
||||
setIsSuccess(true);
|
||||
} catch (error: any) {
|
||||
console.error("Error extendiendo período de reservas:", error);
|
||||
alert(error?.message || "Hubo un error al extender el período de reservas.");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return { handleExtendReservationPeriods };
|
||||
}
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
import API from "@services/Api.Service";
|
||||
|
||||
type UseWhatsAppBotHandlersDeps = {
|
||||
createdCompanyId: string | null;
|
||||
sessionUserId: string;
|
||||
organizationSubscriptions: any;
|
||||
wapAction: string | null;
|
||||
setWapAction: (value: string | null) => void;
|
||||
setWapError: (value: string | null) => void;
|
||||
setWapPhase: (value: string) => void;
|
||||
setWapQr: (value: string | null) => void;
|
||||
setWapView: (value: any) => void;
|
||||
setIsSuccess: (value: boolean) => void;
|
||||
};
|
||||
|
||||
const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export function useWhatsAppBotHandlers({
|
||||
createdCompanyId,
|
||||
sessionUserId,
|
||||
organizationSubscriptions,
|
||||
wapAction,
|
||||
setWapAction,
|
||||
setWapError,
|
||||
setWapPhase,
|
||||
setWapQr,
|
||||
setWapView,
|
||||
setIsSuccess
|
||||
}: UseWhatsAppBotHandlersDeps) {
|
||||
const loadWapView = async () => {
|
||||
if (!createdCompanyId) return;
|
||||
setWapAction("load");
|
||||
setWapError(null);
|
||||
try {
|
||||
const view = await API.post<any>("views/wap-server-view", {
|
||||
companyId: createdCompanyId,
|
||||
sessionUser: sessionUserId
|
||||
});
|
||||
setWapView(view);
|
||||
|
||||
const hasPlan = organizationSubscriptions?.[createdCompanyId]?.plan?.wapNotifications;
|
||||
if (!hasPlan) {
|
||||
setWapPhase("plan-required");
|
||||
} else if (!view?.serverId) {
|
||||
setWapPhase("assign-server");
|
||||
} else if (!view?.exists) {
|
||||
setWapPhase("create-bot");
|
||||
} else if (view?.runningState && !String(view.runningState).includes("Up")) {
|
||||
setWapPhase("start-bot");
|
||||
} else if (view?.runningState && String(view.runningState).includes("Up") && view?.botSession !== "ok") {
|
||||
setWapPhase("scan-qr");
|
||||
try {
|
||||
const qrData = await API.post<string>("wapserver/qr", {
|
||||
companyId: createdCompanyId,
|
||||
sessionUser: sessionUserId
|
||||
});
|
||||
setWapQr(qrData);
|
||||
} catch {
|
||||
setWapQr(null);
|
||||
}
|
||||
} else if (view?.runningState && String(view.runningState).includes("Up") && view?.botSession === "ok") {
|
||||
setWapPhase("bot-ready");
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Error loading WAP view:", err);
|
||||
setWapError(err?.message || "Error al verificar el estado del bot.");
|
||||
setWapPhase("error");
|
||||
} finally {
|
||||
setWapAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
const runWapAction = async (actionName: string, endpoint: string, delayMs: number, errorMessage: string) => {
|
||||
if (!createdCompanyId || wapAction) return;
|
||||
setWapAction(actionName);
|
||||
setWapError(null);
|
||||
try {
|
||||
await API.post<any>(endpoint, {
|
||||
companyId: createdCompanyId,
|
||||
sessionUser: sessionUserId
|
||||
});
|
||||
await wait(delayMs);
|
||||
await loadWapView();
|
||||
} catch (err: any) {
|
||||
console.error(`Error ${actionName} WAP bot:`, err);
|
||||
setWapError(err?.message || errorMessage);
|
||||
setWapPhase("error");
|
||||
} finally {
|
||||
setWapAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleWapVerifyQr = async () => {
|
||||
if (!createdCompanyId) return;
|
||||
setWapAction("verify");
|
||||
try {
|
||||
const view = await API.post<any>("views/wap-server-view", {
|
||||
companyId: createdCompanyId,
|
||||
sessionUser: sessionUserId
|
||||
});
|
||||
setWapView(view);
|
||||
if (view?.botSession === "ok") {
|
||||
setIsSuccess(true);
|
||||
} else {
|
||||
setWapError("Aún no se detectó la conexión. Asegurate de haber escaneado el QR y volvé a intentar.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setWapError(err?.message || "Error al verificar la conexión.");
|
||||
} finally {
|
||||
setWapAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
loadWapView,
|
||||
handleWapAssignServer: () => runWapAction("assign", "wapserver/assign", 2000, "Error al asignar el servidor."),
|
||||
handleWapCreateBot: () => runWapAction("create", "wapserver/create", 5000, "Error al crear el bot."),
|
||||
handleWapStartBot: () => runWapAction("start", "wapserver/start", 3000, "Error al iniciar el bot."),
|
||||
handleWapStopBot: () => runWapAction("stop", "wapserver/stop", 2000, "Error al detener el bot."),
|
||||
handleWapDeleteBot: () => runWapAction("delete", "wapserver/delete", 3000, "Error al eliminar el bot."),
|
||||
handleWapQuitServer: () => runWapAction("quit", "wapserver/quit", 2000, "Error al desasignar el servidor."),
|
||||
handleWapVerifyQr
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user