horacio/turnosxpress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mejorar la legibilidad y estructura del componente OnboardingServiceFlow

Browse Source
This commit is contained in:
Horacio Daniel Ros
2026-09-15 10:09:06 -03:00
parent 28727e2630
commit 35a132a288
1 changed files with 521 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
txclient/src/app/admin/assistant/components/StepEngine/flows/OnboardingServiceFlow.tsx
+315 -153
View File
@@ -39,13 +39,47 @@ type OnboardingServiceFlowProps = {
}; };
export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps) { export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps) {
const { heatMapFraction, currentStepIndex, handleNext, serviceName, setServiceName, serviceDescription, setServiceDescription, handleKeyDown, serviceLength, setServiceLength, handleCreateService, isCreating, servicePrice, setServicePrice, serviceLimit, setServiceLimit, serviceCreateError, handleUploadServiceImage, serviceImage, setServiceImage, isStandaloneNewService, handleAssignCreatedServiceToMe, handleShowCollaboratorAssignment, handleToggleServiceCollaborator, handleAssignCreatedServiceToCollaborators, handleFinishWithoutAssignment, serviceAssignmentError, serviceAssignmentWarning, serviceAssignmentMode, serviceAssignmentCollaborators, selectedServiceCollaboratorIds, isLoadingServiceCollaborators } = props; const {
heatMapFraction,
currentStepIndex,
handleNext,
serviceName,
setServiceName,
serviceDescription,
setServiceDescription,
handleKeyDown,
serviceLength,
setServiceLength,
handleCreateService,
isCreating,
servicePrice,
setServicePrice,
serviceLimit,
setServiceLimit,
serviceCreateError,
handleUploadServiceImage,
serviceImage,
setServiceImage,
isStandaloneNewService,
handleAssignCreatedServiceToMe,
handleShowCollaboratorAssignment,
handleToggleServiceCollaborator,
handleAssignCreatedServiceToCollaborators,
handleFinishWithoutAssignment,
serviceAssignmentError,
serviceAssignmentWarning,
serviceAssignmentMode,
serviceAssignmentCollaborators,
selectedServiceCollaboratorIds,
isLoadingServiceCollaborators,
} = props;
const [isCustomDuration, setIsCustomDuration] = React.useState(false); const [isCustomDuration, setIsCustomDuration] = React.useState(false);
const [customDurationValue, setCustomDurationValue] = React.useState(""); const [customDurationValue, setCustomDurationValue] = React.useState("");
const fraction = heatMapFraction || 60; const fraction = heatMapFraction || 60;
const durationOptions = [fraction, fraction * 2, fraction * 3, fraction * 4]; const durationOptions = [fraction, fraction * 2, fraction * 3, fraction * 4];
const customDurationMinutes = Number(customDurationValue); const customDurationMinutes = Number(customDurationValue);
const isValidCustomDuration = Number.isInteger(customDurationMinutes) && customDurationMinutes > 0; const isValidCustomDuration =
Number.isInteger(customDurationMinutes) && customDurationMinutes > 0;
const selectDurationOption = (duration: number) => { const selectDurationOption = (duration: number) => {
setIsCustomDuration(false); setIsCustomDuration(false);
@@ -73,7 +107,13 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
onNext={handleNext} onNext={handleNext}
nextLabel="Comenzar" nextLabel="Comenzar"
> >
<div style={{ color: "rgba(255, 255, 255, 0.7)", textAlign: "center", padding: "10px" }}> <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! Vamos a crear el primer servicio de tu negocio. ¡Es muy fácil!
</div> </div>
</QuestionCard> </QuestionCard>
@@ -85,7 +125,9 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
onNext={handleNext} onNext={handleNext}
disableNext={serviceName.trim().length < 3 || serviceDescription.trim().length < 5} disableNext={serviceName.trim().length < 3 || serviceDescription.trim().length < 5}
> >
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}> <div
style={{ display: "flex", flexDirection: "column", gap: "15px", width: "100%" }}
>
<QuestionInput <QuestionInput
placeholder="Ej. Corte clásico con lavado" placeholder="Ej. Corte clásico con lavado"
value={serviceName} value={serviceName}
@@ -97,7 +139,10 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
value={serviceDescription} value={serviceDescription}
onChange={(e) => setServiceDescription(e.target.value)} onChange={(e) => setServiceDescription(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (serviceName.trim().length >= 3 && serviceDescription.trim().length >= 5) { if (
serviceName.trim().length >= 3 &&
serviceDescription.trim().length >= 5
) {
handleKeyDown(e, handleNext); handleKeyDown(e, handleNext);
} }
}} }}
@@ -112,12 +157,21 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
onNext={handleNext} onNext={handleNext}
disableNext={!serviceLength || (isCustomDuration && !isValidCustomDuration)} disableNext={!serviceLength || (isCustomDuration && !isValidCustomDuration)}
> >
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', width: '100%', justifyContent: 'center' }}> <div
{durationOptions.map(val => { style={{
display: "flex",
gap: "10px",
flexWrap: "wrap",
width: "100%",
justifyContent: "center",
}}
>
{durationOptions.map((val) => {
const hours = Math.floor(val / 60); const hours = Math.floor(val / 60);
const minutes = val % 60; const minutes = val % 60;
const label = hours > 0 const label =
? `${hours}h ${minutes > 0 ? minutes + 'm' : ''}`.trim() hours > 0
? `${hours}h ${minutes > 0 ? minutes + "m" : ""}`.trim()
: `${minutes} min`; : `${minutes} min`;
return ( return (
@@ -125,15 +179,21 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
key={val} key={val}
onClick={() => selectDurationOption(val)} onClick={() => selectDurationOption(val)}
style={{ style={{
padding: '12px 24px', padding: "12px 24px",
borderRadius: '12px', borderRadius: "12px",
cursor: 'pointer', cursor: "pointer",
background: !isCustomDuration && serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)', background:
border: `2px solid ${!isCustomDuration && serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`, !isCustomDuration && serviceLength === val
color: 'white', ? "var(--wine-red)"
fontWeight: !isCustomDuration && serviceLength === val ? 'bold' : 'normal', : "rgba(255,255,255,0.05)",
transition: 'all 0.2s ease', border: `2px solid ${!isCustomDuration && serviceLength === val ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
fontSize: '16px' color: "white",
fontWeight:
!isCustomDuration && serviceLength === val
? "bold"
: "normal",
transition: "all 0.2s ease",
fontSize: "16px",
}} }}
> >
{label} {label}
@@ -143,22 +203,24 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
<div <div
onClick={selectCustomDuration} onClick={selectCustomDuration}
style={{ style={{
padding: '12px 24px', padding: "12px 24px",
borderRadius: '12px', borderRadius: "12px",
cursor: 'pointer', cursor: "pointer",
background: isCustomDuration ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)', background: isCustomDuration
border: `2px solid ${isCustomDuration ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`, ? "var(--wine-red)"
color: 'white', : "rgba(255,255,255,0.05)",
fontWeight: isCustomDuration ? 'bold' : 'normal', border: `2px solid ${isCustomDuration ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
transition: 'all 0.2s ease', color: "white",
fontSize: '16px' fontWeight: isCustomDuration ? "bold" : "normal",
transition: "all 0.2s ease",
fontSize: "16px",
}} }}
> >
Otro Otro
</div> </div>
</div> </div>
{isCustomDuration && ( {isCustomDuration && (
<div style={{ width: '100%', marginTop: '16px' }}> <div style={{ width: "100%", marginTop: "16px" }}>
<QuestionInput <QuestionInput
type="number" type="number"
min="1" min="1"
@@ -173,7 +235,14 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
}} }}
autoFocus autoFocus
/> />
<div style={{ color: 'rgba(255,255,255,0.6)', fontSize: '13px', marginTop: '8px', textAlign: 'center' }}> <div
style={{
color: "rgba(255,255,255,0.6)",
fontSize: "13px",
marginTop: "8px",
textAlign: "center",
}}
>
Ingresá la duración total del servicio expresada en minutos. Ingresá la duración total del servicio expresada en minutos.
</div> </div>
</div> </div>
@@ -183,16 +252,31 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
<QuestionCard <QuestionCard
isActive={currentStepIndex === 3} isActive={currentStepIndex === 3}
title="3. Precio y Cupos" title="3. Precio y Cupos"
description="¿Cuánto cuesta y a cuántas personas puedes atender a la vez en este servicio?" description="¿Cuánto cuesta y a cuántas personas puede atender cada profesional a la vez en este servicio?"
onNext={handleCreateService} onNext={handleCreateService}
disableNext={isCreating} disableNext={isCreating}
nextLabel={isCreating ? "Guardando..." : "Crear Servicio"} nextLabel={isCreating ? "Guardando..." : "Crear Servicio"}
> >
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%' }}> <div
style={{ display: "flex", flexDirection: "column", gap: "20px", width: "100%" }}
>
<div> <div>
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Precio Original</div> <div style={{ color: "white", marginBottom: "10px", fontSize: "14px" }}>
<div style={{ position: 'relative' }}> Precio Original
<span style={{ position: 'absolute', left: '15px', top: '50%', transform: 'translateY(-50%)', color: 'white', fontSize: '18px' }}>$</span> </div>
<div style={{ position: "relative" }}>
<span
style={{
position: "absolute",
left: "15px",
top: "50%",
transform: "translateY(-50%)",
color: "white",
fontSize: "18px",
}}
>
$
</span>
<input <input
type="text" type="text"
inputMode="decimal" inputMode="decimal"
@@ -200,35 +284,40 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
value={servicePrice} value={servicePrice}
onChange={(e) => setServicePrice(e.target.value)} onChange={(e) => setServicePrice(e.target.value)}
style={{ style={{
width: '100%', width: "100%",
padding: '15px 15px 15px 35px', padding: "15px 15px 15px 35px",
borderRadius: '12px', borderRadius: "12px",
border: '1px solid rgba(255,255,255,0.2)', border: "1px solid rgba(255,255,255,0.2)",
background: 'rgba(255,255,255,0.05)', background: "rgba(255,255,255,0.05)",
color: 'white', color: "white",
fontSize: '18px', fontSize: "18px",
outline: 'none' outline: "none",
}} }}
/> />
</div> </div>
</div> </div>
<div> <div>
<div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Cupos Simultáneos (Por defecto 1)</div> <div style={{ color: "white", marginBottom: "10px", fontSize: "14px" }}>
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}> Cupos Simultáneos (Por defecto 1)
{[1, 2, 3, 5, 10].map(val => ( </div>
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
{[1, 2, 3, 5, 10].map((val) => (
<div <div
key={val} key={val}
onClick={() => setServiceLimit(val)} onClick={() => setServiceLimit(val)}
style={{ style={{
padding: '8px 16px', padding: "8px 16px",
borderRadius: '8px', borderRadius: "8px",
cursor: 'pointer', cursor: "pointer",
background: serviceLimit === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)', background:
border: `1px solid ${serviceLimit === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`, serviceLimit === val
color: 'white', ? "var(--wine-red)"
fontWeight: serviceLimit === val ? 'bold' : 'normal', : "rgba(255,255,255,0.1)",
transition: 'all 0.2s ease' 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} {val}
@@ -237,16 +326,18 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
</div> </div>
</div> </div>
{serviceCreateError && ( {serviceCreateError && (
<div style={{ <div
padding: '14px 16px', style={{
borderRadius: '12px', padding: "14px 16px",
background: 'rgba(255, 99, 132, 0.12)', borderRadius: "12px",
border: '1px solid rgba(255, 99, 132, 0.35)', background: "rgba(255, 99, 132, 0.12)",
color: '#fecdd3', border: "1px solid rgba(255, 99, 132, 0.35)",
fontSize: '14px', color: "#fecdd3",
fontSize: "14px",
lineHeight: 1.5, lineHeight: 1.5,
textAlign: 'center' textAlign: "center",
}}> }}
>
{serviceCreateError} {serviceCreateError}
</div> </div>
)} )}
@@ -259,30 +350,50 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
description="Sube una foto representativa para que los clientes sepan qué ofreces. (Opcional)" description="Sube una foto representativa para que los clientes sepan qué ofreces. (Opcional)"
onNext={handleUploadServiceImage} onNext={handleUploadServiceImage}
disableNext={isCreating} disableNext={isCreating}
nextLabel={isCreating ? "Subiendo..." : (serviceImage ? (isStandaloneNewService ? "Subir y continuar" : "Subir y Finalizar") : "Omitir por ahora")} nextLabel={
isCreating
? "Subiendo..."
: serviceImage
? isStandaloneNewService
? "Subir y continuar"
: "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)",
}}
> >
<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 ? ( {serviceImage ? (
<img <img
src={URL.createObjectURL(serviceImage)} src={URL.createObjectURL(serviceImage)}
alt="Preview" alt="Preview"
style={{ width: '100%', height: '100%', objectFit: 'cover' }} style={{ width: "100%", height: "100%", objectFit: "cover" }}
/> />
) : ( ) : (
<span style={{ color: 'rgba(255,255,255,0.6)' }}>Toca para seleccionar imagen</span> <span style={{ color: "rgba(255,255,255,0.6)" }}>
Toca para seleccionar imagen
</span>
)} )}
<input <input
type="file" type="file"
@@ -293,27 +404,29 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
} }
}} }}
style={{ style={{
position: 'absolute', position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: "100%",
height: '100%', height: "100%",
opacity: 0, opacity: 0,
cursor: 'pointer' cursor: "pointer",
}} }}
/> />
</div> </div>
{serviceCreateError && ( {serviceCreateError && (
<div style={{ <div
padding: '14px 16px', style={{
borderRadius: '12px', padding: "14px 16px",
background: 'rgba(255, 99, 132, 0.12)', borderRadius: "12px",
border: '1px solid rgba(255, 99, 132, 0.35)', background: "rgba(255, 99, 132, 0.12)",
color: '#fecdd3', border: "1px solid rgba(255, 99, 132, 0.35)",
fontSize: '14px', color: "#fecdd3",
fontSize: "14px",
lineHeight: 1.5, lineHeight: 1.5,
textAlign: 'center' textAlign: "center",
}}> }}
>
{serviceCreateError} {serviceCreateError}
</div> </div>
)} )}
@@ -326,21 +439,28 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
title="¿Quién brinda este servicio?" title="¿Quién brinda este servicio?"
description="Asigná este servicio a un colaborador para que pueda recibir reservas. Si todavía no querés hacerlo, podés configurarlo después." description="Asigná este servicio a un colaborador para que pueda recibir reservas. Si todavía no querés hacerlo, podés configurarlo después."
> >
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px', width: '100%' }}> <div
style={{
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
}}
>
<button <button
type="button" type="button"
onClick={handleAssignCreatedServiceToMe} onClick={handleAssignCreatedServiceToMe}
disabled={isCreating} disabled={isCreating}
style={{ style={{
padding: '14px 18px', padding: "14px 18px",
borderRadius: '12px', borderRadius: "12px",
border: '1px solid var(--wine-red)', border: "1px solid var(--wine-red)",
background: 'var(--wine-red)', background: "var(--wine-red)",
color: 'white', color: "white",
fontSize: '16px', fontSize: "16px",
fontWeight: 'bold', fontWeight: "bold",
cursor: isCreating ? 'not-allowed' : 'pointer', cursor: isCreating ? "not-allowed" : "pointer",
opacity: isCreating ? 0.7 : 1 opacity: isCreating ? 0.7 : 1,
}} }}
> >
{isCreating ? "Asignando..." : "Yo"} {isCreating ? "Asignando..." : "Yo"}
@@ -350,23 +470,49 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
onClick={handleShowCollaboratorAssignment} onClick={handleShowCollaboratorAssignment}
disabled={isCreating || isLoadingServiceCollaborators} disabled={isCreating || isLoadingServiceCollaborators}
style={{ style={{
padding: '14px 18px', padding: "14px 18px",
borderRadius: '12px', borderRadius: "12px",
border: serviceAssignmentMode === "collaborators" ? '1px solid var(--wine-red)' : '1px solid rgba(255,255,255,0.2)', border:
background: serviceAssignmentMode === "collaborators" ? 'rgba(128, 0, 64, 0.35)' : 'rgba(255,255,255,0.05)', serviceAssignmentMode === "collaborators"
color: 'white', ? "1px solid var(--wine-red)"
fontSize: '16px', : "1px solid rgba(255,255,255,0.2)",
cursor: isCreating || isLoadingServiceCollaborators ? 'not-allowed' : 'pointer', background:
opacity: isCreating || isLoadingServiceCollaborators ? 0.7 : 1 serviceAssignmentMode === "collaborators"
? "rgba(128, 0, 64, 0.35)"
: "rgba(255,255,255,0.05)",
color: "white",
fontSize: "16px",
cursor:
isCreating || isLoadingServiceCollaborators
? "not-allowed"
: "pointer",
opacity: isCreating || isLoadingServiceCollaborators ? 0.7 : 1,
}} }}
> >
{isLoadingServiceCollaborators ? "Cargando colaboradores..." : "Uno o más colaboradores"} {isLoadingServiceCollaborators
? "Cargando colaboradores..."
: "Uno o más colaboradores"}
</button> </button>
{serviceAssignmentMode === "collaborators" && ( {serviceAssignmentMode === "collaborators" && (
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}> <div
{serviceAssignmentCollaborators.length === 0 && !isLoadingServiceCollaborators && ( style={{
<div style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px', textAlign: 'center' }}> display: "flex",
No encontramos colaboradores activos para esta organización. flexDirection: "column",
gap: "10px",
width: "100%",
}}
>
{serviceAssignmentCollaborators.length === 0 &&
!isLoadingServiceCollaborators && (
<div
style={{
color: "rgba(255,255,255,0.7)",
fontSize: "14px",
textAlign: "center",
}}
>
No encontramos colaboradores activos para esta
organización.
</div> </div>
)} )}
<CollaboratorPicker <CollaboratorPicker
@@ -380,17 +526,28 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
<button <button
type="button" type="button"
onClick={handleAssignCreatedServiceToCollaborators} onClick={handleAssignCreatedServiceToCollaborators}
disabled={isCreating || selectedServiceCollaboratorIds.length === 0} disabled={
isCreating ||
selectedServiceCollaboratorIds.length === 0
}
style={{ style={{
padding: '14px 18px', padding: "14px 18px",
borderRadius: '12px', borderRadius: "12px",
border: '1px solid var(--wine-red)', border: "1px solid var(--wine-red)",
background: 'var(--wine-red)', background: "var(--wine-red)",
color: 'white', color: "white",
fontSize: '16px', fontSize: "16px",
fontWeight: 'bold', fontWeight: "bold",
cursor: isCreating || selectedServiceCollaboratorIds.length === 0 ? 'not-allowed' : 'pointer', cursor:
opacity: isCreating || selectedServiceCollaboratorIds.length === 0 ? 0.7 : 1 isCreating ||
selectedServiceCollaboratorIds.length === 0
? "not-allowed"
: "pointer",
opacity:
isCreating ||
selectedServiceCollaboratorIds.length === 0
? 0.7
: 1,
}} }}
> >
{isCreating ? "Asignando..." : "Asignar servicio"} {isCreating ? "Asignando..." : "Asignar servicio"}
@@ -405,43 +562,49 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
onClick={handleFinishWithoutAssignment} onClick={handleFinishWithoutAssignment}
disabled={isCreating} disabled={isCreating}
style={{ style={{
padding: '14px 18px', padding: "14px 18px",
borderRadius: '12px', borderRadius: "12px",
border: '1px solid rgba(255,255,255,0.2)', border: "1px solid rgba(255,255,255,0.2)",
background: 'rgba(255,255,255,0.05)', background: "rgba(255,255,255,0.05)",
color: 'white', color: "white",
fontSize: '16px', fontSize: "16px",
cursor: isCreating ? 'not-allowed' : 'pointer', cursor: isCreating ? "not-allowed" : "pointer",
opacity: isCreating ? 0.7 : 1 opacity: isCreating ? 0.7 : 1,
}} }}
> >
Lo configuro después Lo configuro después
</button> </button>
<div style={{ <div
padding: '12px 14px', style={{
borderRadius: '12px', padding: "12px 14px",
background: 'rgba(245, 158, 11, 0.12)', borderRadius: "12px",
border: '1px solid rgba(245, 158, 11, 0.35)', background: "rgba(245, 158, 11, 0.12)",
color: '#fde68a', border: "1px solid rgba(245, 158, 11, 0.35)",
fontSize: '14px', color: "#fde68a",
fontSize: "14px",
lineHeight: 1.5, lineHeight: 1.5,
textAlign: 'center' textAlign: "center",
}}> }}
Si lo configurás después, el servicio no va a estar disponible para reservas hasta que lo asignes a un colaborador con horarios cargados. >
Si lo configurás después, el servicio no va a estar disponible
para reservas hasta que lo asignes a un colaborador con horarios
cargados.
</div> </div>
</> </>
)} )}
{serviceAssignmentError && ( {serviceAssignmentError && (
<div style={{ <div
padding: '12px 14px', style={{
borderRadius: '12px', padding: "12px 14px",
background: 'rgba(255, 99, 132, 0.12)', borderRadius: "12px",
border: '1px solid rgba(255, 99, 132, 0.35)', background: "rgba(255, 99, 132, 0.12)",
color: '#fecdd3', border: "1px solid rgba(255, 99, 132, 0.35)",
fontSize: '14px', color: "#fecdd3",
fontSize: "14px",
lineHeight: 1.5, lineHeight: 1.5,
textAlign: 'center' textAlign: "center",
}}> }}
>
{serviceAssignmentError} {serviceAssignmentError}
</div> </div>
)} )}
@@ -450,5 +613,4 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
)} )}
</> </>
); );
} }