diff --git a/txclient/src/app/admin/assistant/components/StepEngine/flows/OnboardingServiceFlow.tsx b/txclient/src/app/admin/assistant/components/StepEngine/flows/OnboardingServiceFlow.tsx index adcd600..364d0fb 100644 --- a/txclient/src/app/admin/assistant/components/StepEngine/flows/OnboardingServiceFlow.tsx +++ b/txclient/src/app/admin/assistant/components/StepEngine/flows/OnboardingServiceFlow.tsx @@ -39,13 +39,47 @@ type 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 [customDurationValue, setCustomDurationValue] = React.useState(""); const fraction = heatMapFraction || 60; const durationOptions = [fraction, fraction * 2, fraction * 3, fraction * 4]; const customDurationMinutes = Number(customDurationValue); - const isValidCustomDuration = Number.isInteger(customDurationMinutes) && customDurationMinutes > 0; + const isValidCustomDuration = + Number.isInteger(customDurationMinutes) && customDurationMinutes > 0; const selectDurationOption = (duration: number) => { setIsCustomDuration(false); @@ -65,390 +99,518 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps) }; return ( - <> - + +
-
- 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! +
+ - +
-
- setServiceName(e.target.value)} - autoFocus - /> - setServiceDescription(e.target.value)} + setServiceName(e.target.value)} + autoFocus + /> + setServiceDescription(e.target.value)} + onKeyDown={(e) => { + if ( + serviceName.trim().length >= 3 && + serviceDescription.trim().length >= 5 + ) { + handleKeyDown(e, handleNext); + } + }} + /> +
+ + + +
+ {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 ( +
selectDurationOption(val)} + style={{ + padding: "12px 24px", + borderRadius: "12px", + cursor: "pointer", + background: + !isCustomDuration && serviceLength === val + ? "var(--wine-red)" + : "rgba(255,255,255,0.05)", + border: `2px solid ${!isCustomDuration && serviceLength === val ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`, + color: "white", + fontWeight: + !isCustomDuration && serviceLength === val + ? "bold" + : "normal", + transition: "all 0.2s ease", + fontSize: "16px", + }} + > + {label} +
+ ); + })} +
+ Otro +
+
+ {isCustomDuration && ( +
+ updateCustomDuration(e.target.value)} onKeyDown={(e) => { - if (serviceName.trim().length >= 3 && serviceDescription.trim().length >= 5) { + if (isValidCustomDuration) { handleKeyDown(e, handleNext); } }} + autoFocus /> -
- - - -
- {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 ( -
selectDurationOption(val)} - style={{ - padding: '12px 24px', - borderRadius: '12px', - cursor: 'pointer', - background: !isCustomDuration && serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)', - border: `2px solid ${!isCustomDuration && serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`, - color: 'white', - fontWeight: !isCustomDuration && serviceLength === val ? 'bold' : 'normal', - transition: 'all 0.2s ease', - fontSize: '16px' - }} - > - {label} -
- ); - })} -
- Otro + Ingresá la duración total del servicio expresada en minutos.
- {isCustomDuration && ( -
- updateCustomDuration(e.target.value)} - onKeyDown={(e) => { - if (isValidCustomDuration) { - handleKeyDown(e, handleNext); - } + )} + + + +
+
+
+ Precio Original +
+
+ + $ + + 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", }} - autoFocus /> -
- Ingresá la duración total del servicio expresada en minutos. -
+
+
+ +
+
+ Cupos Simultáneos (Por defecto 1) +
+
+ {[1, 2, 3, 5, 10].map((val) => ( +
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} +
+ ))} +
+
+ {serviceCreateError && ( +
+ {serviceCreateError}
)} - +
+ - +
-
-
-
Precio Original
-
- $ - 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' - }} - /> -
-
- -
-
Cupos Simultáneos (Por defecto 1)
-
- {[1, 2, 3, 5, 10].map(val => ( -
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} -
- ))} -
-
- {serviceCreateError && ( -
- {serviceCreateError} -
- )} -
- - - -
-
- {serviceImage ? ( - Preview - ) : ( - Toca para seleccionar imagen - )} - { - 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' - }} - /> -
- {serviceCreateError && ( -
- {serviceCreateError} -
- )} -
- - - {isStandaloneNewService && ( - -
-
+ {serviceCreateError && ( +
+ {serviceCreateError} +
+ )} +
+ + + {isStandaloneNewService && ( + +
+ + + {serviceAssignmentMode === "collaborators" && ( +
- {isCreating ? "Asignando..." : "Yo"} - - - {serviceAssignmentMode === "collaborators" && ( -
- {serviceAssignmentCollaborators.length === 0 && !isLoadingServiceCollaborators && ( -
- No encontramos colaboradores activos para esta organización. -
- )} - - {serviceAssignmentCollaborators.length > 0 && ( - - )} -
- )} - {!serviceAssignmentWarning && ( - <> + > + {serviceAssignmentCollaborators.length === 0 && + !isLoadingServiceCollaborators && ( +
+ No encontramos colaboradores activos para esta + organización. +
+ )} + + {serviceAssignmentCollaborators.length > 0 && ( -
+ )} + {!serviceAssignmentWarning && ( + <> + +
- 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. -
- - )} - {serviceAssignmentError && ( -
+ 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. +
+ + )} + {serviceAssignmentError && ( +
- {serviceAssignmentError} -
- )} -
- - )} - - ); - + textAlign: "center", + }} + > + {serviceAssignmentError} +
+ )} +
+ + )} + + ); }