@eventlook/sdk 1.4.0

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@eventlook/sdk",
+  "version": "1.4.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "browser": "./dist/esm/index.js",
+      "node": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c && tsc -p tsconfig.build.json",
+    "prepare": "yarn run build",
+    "watch:rollup": "rollup -c -w",
+    "watch:push": "chokidar 'dist/**/*' -c 'yalc push --changed'",
+    "dev": "concurrently \"yarn watch:rollup\" \"yarn watch:push\"",
+    "publish": "npm publish",
+    "lint:fix": "eslint --fix --ext .ts,.tsx .",
+    "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
+    "format": "yarn lint:fix && yarn prettier"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@hookform/resolvers": "^5.0.1",
+    "@iconify/icons-carbon": "^1.2.20",
+    "@iconify/react": "^6.0.0",
+    "@mui/lab": "^5.0.0-alpha.87",
+    "@mui/material": "^5.8.5",
+    "@mui/x-date-pickers": "^6.3.0",
+    "axios": "^1.9.0",
+    "dayjs": "^1.11.13",
+    "framer-motion": "^12.12.1",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "lottie-react": "^2.4.1",
+    "mui-tel-input": "^9.0.0",
+    "numeral": "^2.0.6",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.56.4",
+    "react-lazy-load-image-component": "^1.6.3",
+    "swr": "^2.3.3",
+    "yup": "^1.6.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@hookform/resolvers": "^5.0.1",
+    "@iconify/icons-carbon": "^1.2.20",
+    "@iconify/react": "^6.0.0",
+    "@mui/lab": "^5.0.0-alpha.87",
+    "@mui/material": "^5.8.5",
+    "@mui/x-date-pickers": "^6.3.0",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.20",
+    "@types/numeral": "^2.0.5",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "axios": "^1.9.0",
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^9.1.2",
+    "dayjs": "^1.11.13",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "framer-motion": "^12.12.1",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "lottie-react": "^2.4.1",
+    "mui-tel-input": "^9.0.0",
+    "numeral": "^2.0.6",
+    "prettier": "^3.5.3",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.56.4",
+    "react-lazy-load-image-component": "^1.6.3",
+    "rollup": "^4.41.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "swr": "^2.3.3",
+    "tslib": "^2.8.1",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.32.1",
+    "yup": "^1.6.1"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false,
+    "form-data": false
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,56 @@
+import typescript from '@rollup/plugin-typescript';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+
+export default {
+  input: './src/index.ts',
+  output: [
+    {
+      dir: 'dist/cjs',
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+    {
+      dir: 'dist/esm',
+      format: 'esm',
+      sourcemap: true,
+      exports: 'named',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  ],
+  preserveEntrySignatures: 'strict',
+  plugins: [
+    peerDepsExternal(),
+    json({
+      compact: true,
+      preferConst: true,
+      namedExports: true,
+    }),
+    resolve({
+      browser: true,
+      preferBuiltins: false,
+      moduleDirectories: ['node_modules'],
+    }),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+    }),
+    replace({
+      preventAssignment: true,
+      values: {
+        'require("form-data")': '{}',
+        "require('form-data')": '{}',
+        'require("zlib")': '{}',
+        "require('zlib')": '{}',
+      },
+    }),
+  ],
+  external: ['react', 'react-dom', 'fs', 'path', 'http', 'https', 'stream', 'swr', 'mui-tel-input'],
+};

package/src/@types/index.d.ts

@@ -0,0 +1,34 @@
+import { IGopay } from '@utils/types/gopay.type';
+
+export {};
+declare global {
+  interface Window {
+    dataLayer: any;
+    _gopay: IGopay;
+    Packeta: Packeta;
+  }
+}
+
+interface Packeta {
+  Widget: {
+    backupUrl: string;
+    baseUrl: string;
+    close: (point) => void;
+    errorUrl: string;
+    healthUrl: string;
+    initIframe: (apiKey, callback, opts, inElement) => void;
+    pick: (
+      apiKey?: string,
+      callback: (branch: any) => void,
+      opts?: PacketaOptions,
+      inElement?: string
+    ) => void;
+    versions: { backup: 'backup'; base: 'base'; error: 'error' };
+  };
+}
+
+interface PacketaOptions {
+  language: string;
+}
+
+window._gopay = window._gopay || {};

package/src/components/ClientOnly.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import TicketFormSkeleton from '@components/TicketFormSkeleton';
+
+const ClientOnly = ({ children }: { children: React.ReactNode }) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return <TicketFormSkeleton />;
+
+  return <>{children}</>;
+};
+
+export default ClientOnly;

package/src/components/CustomSkeleton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Skeleton, SkeletonProps } from '@mui/material';
+
+const CustomSkeleton: React.FC<SkeletonProps> = ({ sx, ...other }) => (
+  <Skeleton
+    {...other}
+    sx={{
+      transform: 'none',
+      borderRadius: 1,
+      ...sx,
+    }}
+  />
+);
+
+export default CustomSkeleton;

package/src/components/Image.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { LazyLoadImage, LazyLoadImageProps } from 'react-lazy-load-image-component';
+import { Theme } from '@mui/material/styles';
+import { Box, BoxProps, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export type ImageRatio = '4/3' | '3/4' | '6/4' | '4/6' | '16/9' | '9/16' | '21/9' | '9/21' | '1/1';
+
+type IProps = BoxProps & LazyLoadImageProps;
+
+interface Props extends IProps {
+  sx?: SxProps<Theme>;
+  ratio?: ImageRatio;
+  disabledEffect?: boolean;
+  objectFit?: 'cover' | 'contain';
+}
+
+export default function Image({
+  ratio,
+  disabledEffect = false,
+  effect = 'blur',
+  objectFit = 'cover',
+  sx,
+  ...other
+}: Props) {
+  if (ratio) {
+    return (
+      <Box
+        component="span"
+        sx={{
+          width: 1,
+          lineHeight: 0,
+          display: 'block',
+          overflow: 'hidden',
+          position: 'relative',
+          pt: getRatio(ratio),
+          '& .wrapper': {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            lineHeight: 0,
+            position: 'absolute',
+            backgroundSize: 'cover !important',
+          },
+          ...sx,
+        }}
+      >
+        <Box
+          component={LazyLoadImage}
+          wrapperClassName="wrapper"
+          effect={disabledEffect ? undefined : effect}
+          placeholderSrc="/assets/img_placeholder.svg"
+          sx={{ width: 1, height: 1, objectFit: 'cover' }}
+          {...other}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        lineHeight: 1,
+        display: 'block',
+        overflow: 'hidden',
+        '& .wrapper': { width: 1, height: 1, backgroundSize: 'cover !important' },
+        ...sx,
+      }}
+    >
+      <Box
+        component={LazyLoadImage}
+        wrapperClassName="wrapper"
+        effect={disabledEffect ? undefined : effect}
+        placeholderSrc="/assets/img_placeholder.svg"
+        sx={{ width: 1, height: 1, objectFit }}
+        {...other}
+      />
+    </Box>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function getRatio(ratio = '1/1') {
+  return {
+    '4/3': 'calc(100% / 4 * 3)',
+    '3/4': 'calc(100% / 3 * 4)',
+    '6/4': 'calc(100% / 6 * 4)',
+    '4/6': 'calc(100% / 4 * 6)',
+    '16/9': 'calc(100% / 16 * 9)',
+    '9/16': 'calc(100% / 9 * 16)',
+    '21/9': 'calc(100% / 21 * 9)',
+    '9/21': 'calc(100% / 9 * 21)',
+    '1/1': '100%',
+  }[ratio];
+}

package/src/components/Label.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { alpha, Theme, useTheme, styled } from '@mui/material/styles';
+import { BoxProps } from '@mui/material';
+// theme
+import { ColorSchema } from '@utils/types/palette.type.ts';
+
+// ----------------------------------------------------------------------
+
+type LabelColor = 'default' | ColorSchema;
+
+type LabelVariant = 'filled' | 'outlined' | 'ghost';
+
+const RootStyle = styled('span')(({
+  theme,
+  ownerState,
+}: {
+  theme: Theme;
+  ownerState: {
+    color: LabelColor;
+    variant: LabelVariant;
+  };
+}) => {
+  const isLight = theme.palette.mode === 'light';
+  const { color, variant } = ownerState;
+
+  const styleFilled = (color: ColorSchema) => ({
+    color: theme.palette[color].contrastText,
+    backgroundColor: theme.palette[color].main,
+  });
+
+  const styleOutlined = (color: ColorSchema) => ({
+    color: theme.palette[color].main,
+    backgroundColor: 'transparent',
+    border: `1px solid ${theme.palette[color].main}`,
+  });
+
+  const styleGhost = (color: ColorSchema) => ({
+    color: theme.palette[color][isLight ? 'dark' : 'light'],
+    backgroundColor: alpha(theme.palette[color].main, 0.16),
+  });
+
+  return {
+    height: 22,
+    minWidth: 22,
+    lineHeight: 0,
+    borderRadius: 6,
+    cursor: 'default',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    padding: theme.spacing(0, 1),
+    color: theme.palette.grey[800],
+    fontSize: theme.typography.pxToRem(12),
+    fontFamily: theme.typography.fontFamily,
+    backgroundColor: theme.palette.grey[300],
+    fontWeight: theme.typography.fontWeightBold,
+
+    ...(color !== 'default'
+      ? {
+          ...(variant === 'filled' && { ...styleFilled(color) }),
+          ...(variant === 'outlined' && { ...styleOutlined(color) }),
+          ...(variant === 'ghost' && { ...styleGhost(color) }),
+        }
+      : {
+          ...(variant === 'outlined' && {
+            backgroundColor: 'transparent',
+            color: theme.palette.text.primary,
+            border: `1px solid ${alpha(theme.palette.grey['500'], 0.32)}`,
+          }),
+          ...(variant === 'ghost' && {
+            color: isLight ? theme.palette.text.secondary : theme.palette.common.white,
+            backgroundColor: alpha(theme.palette.grey['500'], 0.16),
+          }),
+        }),
+  };
+});
+
+// ----------------------------------------------------------------------
+
+interface LabelProps extends BoxProps {
+  color?: LabelColor;
+  variant?: LabelVariant;
+}
+
+export default function Label({ color = 'default', variant = 'ghost', children, sx }: LabelProps) {
+  const theme = useTheme();
+
+  return (
+    <RootStyle ownerState={{ color, variant }} sx={sx} theme={theme}>
+      {children}
+    </RootStyle>
+  );
+}

package/src/components/TextIconLabel.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ReactElement } from 'react';
+import { Stack, StackProps, SxProps } from '@mui/material';
+
+interface Props extends StackProps {
+  icon: ReactElement;
+  value: any;
+  endIcon?: boolean;
+  sx?: SxProps;
+}
+
+export default function TextIconLabel({ icon, value, endIcon = false, sx, ...other }: Props) {
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      sx={{
+        typography: 'body2',
+        ...sx,
+      }}
+      {...other}
+    >
+      {!endIcon && icon}
+      {value}
+      {endIcon && icon}
+    </Stack>
+  );
+}

package/src/components/TicketFormSkeleton.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box, Grid, Typography, Divider, Stack } from '@mui/material';
+import CustomSkeleton from '@components/CustomSkeleton';
+
+const TicketFormSkeleton: React.FC = () => (
+  <Grid container spacing={2}>
+    <Grid item xs={12} md={8}>
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
+        </Typography>
+        <Grid container spacing={2} mb={2}>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12}>
+            <CustomSkeleton variant="text" width="60%" />
+          </Grid>
+        </Grid>
+
+        <Divider sx={{ my: 3 }} />
+
+        {/* Krok 2 – Kontaktní osoba */}
+        <Typography variant="h6" gutterBottom>
+          <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
+        </Typography>
+        <Grid container spacing={2} mb={2}>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+        </Grid>
+
+        <Divider sx={{ my: 3 }} />
+
+        {/* Krok 3 – Způsoby platby */}
+        <Typography variant="h6" gutterBottom>
+          <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
+        </Typography>
+        <Grid container spacing={2} mb={2}>
+          <Grid item xs={12} md={8}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+          <Grid item xs={12} md={4}>
+            <CustomSkeleton variant="rectangular" height={56} />
+          </Grid>
+        </Grid>
+
+        <Typography variant="subtitle1" gutterBottom>
+          <CustomSkeleton variant="text" sx={{ maxWidth: 300 }} />
+        </Typography>
+        <Stack spacing={2}>
+          <CustomSkeleton variant="rectangular" height={64} />
+          <CustomSkeleton variant="rectangular" height={64} />
+        </Stack>
+      </Box>
+    </Grid>
+    <Grid item xs={12} md={4}>
+      <Box>
+        <CustomSkeleton height={370} />
+      </Box>
+    </Grid>
+  </Grid>
+);
+
+export default TicketFormSkeleton;

package/src/components/Trans.tsx

@@ -0,0 +1,114 @@
+import React, { JSX } from 'react';
+import useGlobal from '@hooks/useGlobal.ts';
+
+type TransProps = {
+  text: string;
+  values?: Record<string, string | number>;
+  components?: Record<string | number, JSX.Element>;
+  enableMarkdown?: boolean;
+  pluralRules?: {
+    [key: string]: string;
+  };
+};
+
+export const Trans: React.FC<TransProps> = ({
+  text,
+  values = {},
+  components = {},
+  enableMarkdown = false,
+}) => {
+  const { t } = useGlobal();
+  const interpolated = t(text, values);
+  const content = parseWithComponents(interpolated, components, enableMarkdown);
+  return <>{content}</>;
+};
+
+const parseMarkdown = (text: string): React.ReactNode[] => {
+  const boldItalicRegex = /(\*\*|__)(.*?)\1|_(.*?)_|`(.*?)`/g;
+  const nodes: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = boldItalicRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+
+    const [, , boldText, italicText, codeText] = match;
+    const content = boldText || italicText || codeText;
+
+    if (boldText) {
+      nodes.push(<strong key={match.index}>{boldText}</strong>);
+    } else if (italicText) {
+      nodes.push(<em key={match.index}>{italicText}</em>);
+    } else if (codeText) {
+      nodes.push(<code key={match.index}>{codeText}</code>);
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+
+  return nodes;
+};
+
+const parseWithComponents = (
+  str: string,
+  components: Record<string | number, JSX.Element>,
+  enableMarkdown: boolean
+): React.ReactNode[] => {
+  const nodes: React.ReactNode[] = [];
+  const tagRegex = /<(\d+)>(.*?)<\/\1>|<(\w+)\s*\/?>/gs;
+
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = tagRegex.exec(str)) !== null) {
+    const matchStart = match.index;
+    const matchEnd = tagRegex.lastIndex;
+
+    if (matchStart > lastIndex) {
+      const beforeText = str.slice(lastIndex, matchStart);
+      nodes.push(...(enableMarkdown ? parseMarkdown(beforeText) : [beforeText]));
+    }
+
+    const numberedKey = match[1];
+    const numberedContent = match[2];
+    const namedComponentKey = match[3];
+    const key = matchStart;
+
+    if (numberedKey !== undefined) {
+      const component = components[numberedKey];
+      const children = enableMarkdown ? parseMarkdown(numberedContent) : [numberedContent];
+
+      if (React.isValidElement(component)) {
+        nodes.push(React.cloneElement(component, { key }, children));
+      } else {
+        nodes.push(...children);
+      }
+    } else if (namedComponentKey !== undefined) {
+      const component = components[namedComponentKey];
+
+      // Oprava: vytvoř nový element, i když to není validní prvek
+      if (React.isValidElement(component)) {
+        nodes.push(React.cloneElement(component, { key }));
+      } else if (typeof namedComponentKey === 'string') {
+        nodes.push(React.createElement(namedComponentKey, { key }));
+      } else {
+        nodes.push('');
+      }
+    }
+
+    lastIndex = matchEnd;
+  }
+
+  if (lastIndex < str.length) {
+    const after = str.slice(lastIndex);
+    nodes.push(...(enableMarkdown ? parseMarkdown(after) : [after]));
+  }
+
+  return nodes;
+};