Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 10x 10x 1x 10x 10x 10x | /**
* SlotTemplatePreview Component (Story 5.1 - Task 3b)
*
* Preview card showing event type configuration details
* Features:
* - Displays slot count range (min-max)
* - Shows slot duration
* - Displays default capacity
* - Shows typical start-end times
* - Material-UI Card layout
* - i18n compliance (all text uses react-i18next)
* - Generated types from OpenAPI spec (ADR-006)
*/
import React from 'react';
import { Card, CardContent, Typography, Chip, Stack } from '@mui/material';
import { useTranslation } from 'react-i18next';
import type { components } from '@/types/generated/events-core-api.types';
// Import generated types from OpenAPI spec (ADR-006 compliance)
type EventType = components['schemas']['EventType'];
type EventSlotConfigurationResponse = components['schemas']['EventSlotConfigurationResponse'];
interface SlotTemplatePreviewProps {
eventType: EventType;
slotConfiguration: EventSlotConfigurationResponse;
}
/**
* Helper function to format event type names for display
*/
function formatEventTypeName(type: EventType, t: (key: string) => string): string {
const typeMap: Record<EventType, string> = {
FULL_DAY: t('form.eventTypes.fullDay'),
AFTERNOON: t('form.eventTypes.afternoon'),
EVENING: t('form.eventTypes.evening'),
};
return typeMap[type] || type;
}
export const SlotTemplatePreview: React.FC<SlotTemplatePreviewProps> = ({
eventType,
slotConfiguration,
}) => {
const { t } = useTranslation('events');
const { minSlots, maxSlots, slotDuration, typicalStartTime, typicalEndTime, defaultCapacity } =
slotConfiguration;
return (
<Card variant="outlined" data-testid="slot-template-preview">
<CardContent>
<Typography variant="h6" gutterBottom>
{formatEventTypeName(eventType, t)} {t('slotPreview.title', { type: '' }).trim()}
</Typography>
<Stack direction="row" spacing={1} sx={{ mb: 2 }} flexWrap="wrap">
<Chip
label={`${minSlots}-${maxSlots} ${t('slotPreview.slots')}`}
size="small"
color="primary"
/>
<Chip label={`${slotDuration} min each`} size="small" />
<Chip label={`${t('slotPreview.capacity')}: ${defaultCapacity}`} size="small" />
</Stack>
{typicalStartTime && typicalEndTime && (
<Typography variant="body2" color="text.secondary">
{t('slotPreview.timing')}: {typicalStartTime} - {typicalEndTime}
</Typography>
)}
</CardContent>
</Card>
);
};
|