plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
71 lines (70 loc) • 3.56 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePlazbotContext } from '../../context/PlazbotContext';
import { resolveIcon } from '../../styles/icons';
function extractAvailability(result) {
if (!result || typeof result !== 'object')
return {};
return result;
}
function formatDate(dateStr) {
if (!dateStr)
return '';
try {
return new Date(dateStr).toLocaleDateString('es', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
});
}
catch {
return dateStr;
}
}
export function AvailabilityCard({ action, onSlotSelect, style }) {
const { theme, iconMode } = usePlazbotContext();
const data = extractAvailability(action.result);
const slots = data.slots ?? data.availableSlots ?? [];
return (_jsxs("div", { style: {
borderRadius: theme.borderRadius,
backgroundColor: theme.cardBg,
border: `1px solid ${theme.borderColor}`,
overflow: 'hidden',
fontFamily: theme.fontFamily,
animation: 'plazbot-scale-in 0.2s ease-out',
...style,
}, children: [_jsxs("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '10px 14px',
borderBottom: `1px solid ${theme.borderColor}`,
fontSize: theme.fontSizeSm,
}, children: [resolveIcon('availability', iconMode) && _jsx("span", { style: { fontSize: '14px' }, children: resolveIcon('availability', iconMode) }), _jsx("span", { style: { fontWeight: 500, color: theme.textColor }, children: "Disponibilidad" }), data.date && (_jsx("span", { style: { color: theme.textSecondary, marginLeft: 'auto' }, children: formatDate(data.date) }))] }), _jsx("div", { style: {
padding: '12px 14px',
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
}, children: slots.length > 0 ? (slots.map((slot, i) => (_jsxs("button", { onClick: () => onSlotSelect?.(slot), style: {
padding: '8px 14px',
borderRadius: theme.borderRadius,
border: `1px solid ${theme.borderColor}`,
backgroundColor: theme.surfaceColor,
color: theme.textColor,
fontSize: theme.fontSizeSm,
fontFamily: theme.fontFamily,
cursor: onSlotSelect ? 'pointer' : 'default',
transition: 'border-color 0.15s, background-color 0.15s',
fontWeight: 500,
}, onMouseEnter: (e) => {
if (!onSlotSelect)
return;
e.target.style.borderColor = theme.primaryColor;
e.target.style.backgroundColor = theme.primaryColor + '10';
}, onMouseLeave: (e) => {
if (!onSlotSelect)
return;
e.target.style.borderColor = theme.borderColor;
e.target.style.backgroundColor = theme.surfaceColor;
}, children: [slot.start, slot.end && ` - ${slot.end}`] }, i)))) : (_jsx("div", { style: { color: theme.textSecondary, fontSize: theme.fontSizeSm }, children: "No hay horarios disponibles" })) })] }));
}