@eventlook/sdk 1.4.0

package/src/components/hook-form/RHFRadioGroup.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import {
+  Radio,
+  FormLabel,
+  RadioGroup,
+  FormControl,
+  FormHelperText,
+  RadioGroupProps,
+  FormControlLabel,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type Props = RadioGroupProps & {
+  name: string;
+  options: { label: React.ReactNode; value: any }[];
+  label?: string;
+  spacing?: number;
+  helperText?: React.ReactNode;
+};
+
+export default function RHFRadioGroup({
+  row,
+  name,
+  label,
+  options,
+  spacing,
+  helperText,
+  ...other
+}: Props) {
+  const { control } = useFormContext();
+
+  const labelledby = label ? `${name}-${label}` : '';
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <FormControl component="fieldset">
+          {label && (
+            <FormLabel component="legend" id={labelledby} sx={{ typography: 'body2' }}>
+              {label}
+            </FormLabel>
+          )}
+
+          <RadioGroup {...field} aria-labelledby={labelledby} row={row} {...other}>
+            {options.map((option) => (
+              <FormControlLabel
+                key={option.value}
+                value={option.value}
+                control={<Radio />}
+                label={option.label}
+                sx={{
+                  '&:not(:last-of-type)': {
+                    mb: spacing || 0,
+                  },
+                  ...(row && {
+                    mr: 0,
+                    '&:not(:last-of-type)': {
+                      mr: spacing || 2,
+                    },
+                  }),
+                }}
+              />
+            ))}
+          </RadioGroup>
+
+          {(!!error || helperText) && (
+            <FormHelperText error={!!error} sx={{ mx: 0 }}>
+              {error ? error?.message : helperText}
+            </FormHelperText>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+}

package/src/components/hook-form/RHFSelect.tsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import {
+  Box,
+  Chip,
+  Select,
+  Checkbox,
+  MenuItem,
+  TextField,
+  InputLabel,
+  SelectProps,
+  FormControl,
+  OutlinedInput,
+  TextFieldProps,
+  FormHelperText,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type RHFSelectProps = TextFieldProps & {
+  name: string;
+  native?: boolean;
+  maxHeight?: boolean | number | string;
+  children: React.ReactNode;
+};
+
+export function RHFSelect({
+  name,
+  native,
+  maxHeight = 220,
+  helperText,
+  children,
+  ...other
+}: RHFSelectProps) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          select
+          fullWidth
+          SelectProps={{
+            native,
+            MenuProps: {
+              PaperProps: {
+                sx: {
+                  ...(!native && {
+                    px: 1,
+                    maxHeight:
+                      typeof maxHeight === 'number' || typeof maxHeight === 'string'
+                        ? maxHeight
+                        : 'unset',
+                    '& .MuiMenuItem-root': {
+                      px: 1,
+                      borderRadius: 0.75,
+                      typography: 'body2',
+                      textTransform: 'capitalize',
+                    },
+                  }),
+                },
+              },
+            },
+            sx: { textTransform: 'capitalize' },
+          }}
+          error={!!error}
+          helperText={error ? error?.message : helperText}
+          {...other}
+        >
+          {children}
+        </TextField>
+      )}
+    />
+  );
+}
+
+// ----------------------------------------------------------------------
+
+type RHFMultiSelectProps = SelectProps & {
+  name: string;
+  label?: string;
+  chip?: boolean;
+  checkbox?: boolean;
+  placeholder?: string;
+  helperText?: React.ReactNode;
+  options: {
+    label: string;
+    value: string;
+  }[];
+};
+
+export function RHFMultiSelect({
+  name,
+  chip,
+  label,
+  options,
+  checkbox,
+  placeholder,
+  helperText,
+  sx,
+  ...other
+}: RHFMultiSelectProps) {
+  const { control } = useFormContext();
+
+  const renderValues = (selectedIds: string[]) => {
+    const selectedItems = options.filter((item) => selectedIds.includes(item.value));
+
+    if (!selectedItems.length && placeholder) {
+      return (
+        <Box component="em" sx={{ color: 'text.disabled' }}>
+          {placeholder}
+        </Box>
+      );
+    }
+
+    if (chip) {
+      return (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+          {selectedItems.map((item) => (
+            <Chip key={item.value} size="small" label={item.label} />
+          ))}
+        </Box>
+      );
+    }
+
+    return selectedItems.map((item) => item.label).join(', ');
+  };
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <FormControl sx={sx}>
+          {label && <InputLabel id={name}> {label} </InputLabel>}
+
+          <Select
+            {...field}
+            multiple
+            displayEmpty={!!placeholder}
+            labelId={name}
+            input={<OutlinedInput fullWidth label={label} error={!!error} />}
+            // @ts-ignore
+            renderValue={renderValues}
+            MenuProps={{
+              PaperProps: {
+                sx: { px: 1, maxHeight: 280 },
+              },
+            }}
+            {...other}
+          >
+            {placeholder && (
+              <MenuItem
+                disabled
+                value=""
+                sx={{
+                  py: 1,
+                  px: 2,
+                  borderRadius: 0.75,
+                  typography: 'body2',
+                }}
+              >
+                <em> {placeholder} </em>
+              </MenuItem>
+            )}
+
+            {options.map((option) => {
+              const selected = field.value.includes(option.value);
+
+              return (
+                <MenuItem
+                  key={option.value}
+                  value={option.value}
+                  sx={{
+                    py: 1,
+                    px: 2,
+                    borderRadius: 0.75,
+                    typography: 'body2',
+                    ...(selected && {
+                      fontWeight: 'fontWeightMedium',
+                    }),
+                    ...(checkbox && {
+                      p: 0.25,
+                    }),
+                  }}
+                >
+                  {checkbox && <Checkbox disableRipple size="small" checked={selected} />}
+
+                  {option.label}
+                </MenuItem>
+              );
+            })}
+          </Select>
+
+          {(!!error || helperText) && (
+            <FormHelperText error={!!error}>{error ? error?.message : helperText}</FormHelperText>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+}

package/src/components/hook-form/RHFSlider.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { Slider, SliderProps, FormHelperText } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type Props = SliderProps & {
+  name: string;
+  helperText?: React.ReactNode;
+};
+
+export default function RHFSlider({ name, helperText, ...other }: Props) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <div>
+          <Slider {...field} valueLabelDisplay="auto" {...other} />
+
+          {(!!error || helperText) && (
+            <FormHelperText error={!!error}>{error ? error?.message : helperText}</FormHelperText>
+          )}
+        </div>
+      )}
+    />
+  );
+}

package/src/components/hook-form/RHFSwitch.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { Switch, FormControlLabel, FormControlLabelProps, FormHelperText } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends Omit<FormControlLabelProps, 'control'> {
+  name: string;
+  helperText?: React.ReactNode;
+}
+
+export default function RHFSwitch({ name, helperText, ...other }: Props) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <div>
+          <FormControlLabel control={<Switch {...field} checked={field.value} />} {...other} />
+
+          {(!!error || helperText) && (
+            <FormHelperText error={!!error}>{error ? error?.message : helperText}</FormHelperText>
+          )}
+        </div>
+      )}
+    />
+  );
+}

package/src/components/hook-form/RHFTextField.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { TextField, TextFieldProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type Props = TextFieldProps & {
+  name: string;
+};
+
+export default function RHFTextField({ name, helperText, ...other }: Props) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          fullWidth
+          value={typeof field.value === 'number' && field.value === 0 ? '' : field.value}
+          error={!!error}
+          helperText={error ? error?.message : helperText}
+          {...other}
+        />
+      )}
+    />
+  );
+}

package/src/components/hook-form/index.ts

@@ -0,0 +1,11 @@
+export * from './RHFSelect';
+export * from './RHFCheckbox';
+
+export { default } from './FormProvider';
+
+export { default as RHFCodes } from './RHFCodes';
+export { default as RHFSwitch } from './RHFSwitch';
+export { default as RHFSlider } from './RHFSlider';
+export { default as RHFTextField } from './RHFTextField';
+export { default as RHFRadioGroup } from './RHFRadioGroup';
+export { default as RHFAutocomplete } from './RHFAutocomplete';

package/src/components/iconify/Iconify.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Icon, IconifyIcon } from '@iconify/react';
+import { Box, BoxProps, SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+
+interface Props extends BoxProps {
+  sx?: SxProps<Theme>;
+  icon: IconifyIcon | string;
+}
+
+export default function Iconify({ icon, sx, ...other }: Props) {
+  return <Box component={Icon} icon={icon} sx={{ ...sx }} {...other} />;
+}

package/src/components/iconify/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export { default as Iconify } from './Iconify';

package/src/components/iconify/types.ts

@@ -0,0 +1,5 @@
+import { IconifyIcon } from '@iconify/react';
+
+// ----------------------------------------------------------------------
+
+export type IconifyProps = IconifyIcon | string;

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './animate';
+
+export * from './iconify';
+
+export { default as Image } from './Image';
+export { default as TextIconLabel } from './TextIconLabel';

package/src/context/GlobalContext.tsx

@@ -0,0 +1,90 @@
+import React, { createContext, ReactNode, useMemo, useState } from 'react';
+import { IGlobalContext } from '@utils/types/global.type';
+import { Languages } from '@utils/data/language';
+import * as locales from '@locales';
+import { getNestedValue } from '@utils/global.ts';
+
+const initialState: IGlobalContext = {
+  lang: Languages.CS,
+  setGlobal: (value: Partial<IGlobalContext>) => {},
+  showSnackbar: (text: string, options?: { variant: 'success' | 'error' }) => {},
+  t: (key) => key,
+  callbacks: {
+    homepage: () => {},
+    tickets: () => {},
+    detail: () => {},
+  },
+  links: {
+    termsAndConditions: '',
+    gdpr: '',
+  },
+};
+
+const GlobalContext = createContext(initialState);
+
+type Props = {
+  children: ReactNode;
+  lang: Languages;
+  callbacks: IGlobalContext['callbacks'];
+  links: IGlobalContext['links'];
+  showSnackbar?: IGlobalContext['showSnackbar'];
+  options?: IGlobalContext['options'];
+  content?: IGlobalContext['content'];
+};
+
+function GlobalProvider({
+  children,
+  lang,
+  showSnackbar,
+  callbacks,
+  links,
+  options,
+  content,
+}: Props) {
+  const [global, setGlobal] = useState<IGlobalContext>({
+    ...initialState,
+    showSnackbar: showSnackbar || initialState.showSnackbar,
+    lang,
+    callbacks,
+    links,
+    options,
+    content,
+  });
+
+  const handleSetGlobal = (value: Partial<IGlobalContext>) => {
+    setGlobal({
+      ...global,
+      ...value,
+      options: {
+        ...global.options,
+        ...value.options,
+      },
+    });
+  };
+
+  const t = (key: string, params?: Record<string, string | number>) => {
+    const translation = (locales as Record<Languages, any>)[lang];
+    let template = getNestedValue(translation, key) || key;
+
+    if (params) {
+      for (const [paramKey, paramValue] of Object.entries(params)) {
+        template = template.replaceAll(`{{${paramKey}}}`, String(paramValue));
+      }
+    }
+
+    return template;
+  };
+
+  const memoizedValue = useMemo(
+    () => ({
+      ...global,
+      setGlobal: handleSetGlobal,
+      t,
+    }),
+    [global]
+  );
+
+  return <GlobalContext.Provider value={memoizedValue}>{children}</GlobalContext.Provider>;
+}
+
+export { GlobalProvider, GlobalContext };

package/src/form/ChildEventCard.tsx

@@ -0,0 +1,132 @@
+import useResponsive from '@hooks/useResponsive';
+import { Box, Button, Card, Divider, Grid, Stack, Typography } from '@mui/material';
+import { getPlaceAsString } from '@utils/place';
+import { IEvent } from '@utils/types/event.type';
+import React, { useMemo, useState } from 'react';
+import ChildEventDialog from './ChildEventDialog';
+import useGlobal from '@hooks/useGlobal';
+import { Iconify, Image, TextIconLabel } from '@components';
+import locationIcon from '@iconify/icons-carbon/location';
+import calendarIcon from '@iconify/icons-carbon/calendar';
+import userIcon from '@iconify/icons-carbon/user';
+import dayjs from 'dayjs';
+import { useWatch } from 'react-hook-form';
+import { ITicketFormTicket } from '@utils/types/ticket.type';
+import { IEventProductForm } from '@utils/types/product.type';
+
+interface Props {
+  event: IEvent;
+}
+
+const ChildEventCard: React.FC<Props> = ({ event }) => {
+  const { t } = useGlobal();
+  const xs = useResponsive('only', 'xs');
+  const md = useResponsive('only', 'md');
+  const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
+  const tickets = useWatch({
+    name: `tickets.${event.id}`,
+    defaultValue: [],
+  }) as ITicketFormTicket[];
+  const products = useWatch({
+    name: `products.${event.id}`,
+    defaultValue: [],
+  }) as IEventProductForm[];
+
+  const eventNotEmpty = useMemo(() => {
+    return [...tickets, ...products].some((item) => item?.quantity);
+  }, [tickets, products]);
+
+  return (
+    <>
+      <Card sx={{ p: 2 }}>
+        <Grid container spacing={6} alignItems="stretch">
+          {/* LEFT SIDE: Image + Button */}
+          <Grid item xs={12} md={6} sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
+            <Button
+              variant="contained"
+              onClick={() => setOpenVariantDialog(true)}
+              fullWidth
+              startIcon={
+                eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
+              }
+              sx={{ mt: 2 }}
+            >
+              {eventNotEmpty ? t('change') : t('add')}
+            </Button>
+          </Grid>
+
+          {/* RIGHT SIDE: Info block with bottom aligned date + organizer */}
+          <Grid
+            item
+            xs={12}
+            md={6}
+            sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
+          >
+            <Stack spacing={2}>
+              <Typography variant="h6">{event.name}</Typography>
+
+              <TextIconLabel
+                icon={
+                  <Iconify
+                    icon={locationIcon}
+                    sx={{ mr: 0.5, mt: 0.5, width: 18, height: 18, minWidth: 18 }}
+                  />
+                }
+                value={<Box>{getPlaceAsString(event.place)}</Box>}
+                sx={{ typography: 'body3', color: 'text.secondary', alignItems: 'flex-start' }}
+              />
+            </Stack>
+
+            {/* Bottom: Date & Organizer */}
+            <Stack
+              direction={{ xs: 'column', sm: 'row', md: 'column', lg: 'row' }}
+              spacing={2}
+              p={2}
+              divider={
+                <Divider
+                  orientation={xs || md ? 'horizontal' : 'vertical'}
+                  flexItem
+                  sx={{ borderStyle: 'dashed' }}
+                />
+              }
+              sx={{
+                backgroundColor: (theme) => theme.palette.grey.A100,
+                borderRadius: 1,
+              }}
+            >
+              <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
+                <TextIconLabel
+                  icon={<Iconify icon={calendarIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
+                  value={t('form.labels.start_date')}
+                  sx={{ color: 'text.secondary' }}
+                />
+                <Typography variant="body2" fontWeight={700}>
+                  {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+                </Typography>
+              </Box>
+              <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
+                <TextIconLabel
+                  icon={<Iconify icon={userIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
+                  value={t('form.labels.organizer')}
+                  sx={{ color: 'text.secondary' }}
+                />
+                <Typography variant="body2" fontWeight={700}>
+                  {event.company.displayName}
+                </Typography>
+              </Box>
+            </Stack>
+          </Grid>
+        </Grid>
+      </Card>
+
+      <ChildEventDialog
+        event={event}
+        openDialog={openVariantDialog}
+        onClose={() => setOpenVariantDialog(false)}
+      />
+    </>
+  );
+};
+
+export default ChildEventCard;