@eventlook/sdk 1.4.0

package/src/form/index.tsx

@@ -0,0 +1,120 @@
+import 'dayjs/locale/cs';
+import 'dayjs/locale/en';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import 'dayjs/locale/uk';
+import 'dayjs/locale/sk';
+
+import React, { useEffect } from 'react';
+import TicketForm from '@form/TicketForm';
+import { GlobalProvider } from '@context/GlobalContext';
+import api from '@utils/axios';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localeData from 'dayjs/plugin/localeData';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import { Languages } from '@utils/data/language';
+import useEvent from '@hooks/data/useEvent';
+import { IContent, IGlobalContext, IGlobalContextOptions } from '@utils/types/global.type';
+import { IUser } from '@utils/types/user.type';
+import TicketFormSkeleton from '@components/TicketFormSkeleton';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import ClientOnly from '@components/ClientOnly';
+import { csCZ, enUS, ukUA, esES, deDE, skSK } from '@mui/x-date-pickers/locales';
+
+export interface OrderFormProps {
+  eventSlug: string;
+  apiUrl: string;
+  callbacks: IGlobalContext['callbacks'];
+  links: IGlobalContext['links'];
+  lang?: Languages;
+  slots?: {
+    showSnackbar: IGlobalContext['showSnackbar'];
+  };
+  user?: IUser;
+  selectedReleaseId?: number;
+  options?: IGlobalContextOptions;
+  content?: IContent;
+}
+
+const ClientRender: React.FC<OrderFormProps> = ({
+  eventSlug,
+  apiUrl,
+  lang,
+  slots,
+  options,
+  callbacks,
+  selectedReleaseId,
+  links,
+  content,
+}) => {
+  api.defaults.baseURL = apiUrl;
+  dayjs.extend(utc);
+  dayjs.extend(timezone);
+  dayjs.extend(localeData);
+  dayjs.extend(updateLocale);
+
+  ['cs', 'en', 'de', 'es', 'uk', 'sk'].forEach((loc) => {
+    dayjs.updateLocale(loc, { weekStart: 1 });
+  });
+
+  const { data, error } = useEvent(eventSlug);
+
+  useEffect(() => {
+    window.dataLayer = window.dataLayer || [];
+  }, []);
+
+  useEffect(() => {
+    api.defaults.headers['Accept-Language'] = lang || Languages.CS;
+  }, [lang]);
+
+  const getLocalizationProviderLocaleText = () => {
+    switch (lang) {
+      case 'en':
+        return enUS.components.MuiLocalizationProvider.defaultProps.localeText;
+      case 'de':
+        return deDE.components.MuiLocalizationProvider.defaultProps.localeText;
+      case 'uk':
+        return ukUA.components.MuiLocalizationProvider.defaultProps.localeText;
+      case 'es':
+        return esES.components.MuiLocalizationProvider.defaultProps.localeText;
+      case 'sk':
+        return skSK.components.MuiLocalizationProvider.defaultProps.localeText;
+      default:
+        return csCZ.components.MuiLocalizationProvider.defaultProps.localeText;
+    }
+  };
+
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterDayjs}
+      adapterLocale={lang || Languages.CS}
+      localeText={getLocalizationProviderLocaleText()}
+    >
+      <GlobalProvider
+        lang={lang || Languages.CS}
+        showSnackbar={slots?.showSnackbar}
+        callbacks={callbacks}
+        links={links}
+        options={options}
+        content={content}
+      >
+        {!data || !!error ? (
+          <TicketFormSkeleton />
+        ) : (
+          <TicketForm event={data} hasGopayIdSsr={false} selectedReleaseId={selectedReleaseId} />
+        )}
+      </GlobalProvider>
+    </LocalizationProvider>
+  );
+};
+
+export default function Index(props: OrderFormProps) {
+  return (
+    <ClientOnly>
+      <ClientRender {...props} />
+    </ClientOnly>
+  );
+}

package/src/form/payment/FeeBox.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Box, Stack, Tooltip, Typography } from '@mui/material';
+import { OrderFeeType } from '@utils/data/order';
+import { fCurrency, fPercent } from '@utils/formatNumber';
+import { Iconify } from '@components/iconify';
+import { IEvent } from '@utils/types/event.type';
+import useResponsive from '@hooks/useResponsive';
+import { useFormContext } from 'react-hook-form';
+import { ITicketForm } from '@utils/types/ticket.type';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  event: IEvent;
+  align?: 'left' | 'right';
+}
+
+const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
+  const { t, lang } = useGlobal();
+  const xs = useResponsive('only', 'xs');
+  const { watch } = useFormContext<ITicketForm>();
+  const values = watch();
+  const isRight = align === 'right';
+
+  return (
+    <Box mb={1} textAlign={isRight ? 'right' : undefined}>
+      {values.promoCode && (
+        <Stack
+          direction="row"
+          justifyContent={isRight ? 'flex-end' : 'space-between'}
+          alignItems="center"
+          spacing={1}
+          sx={{ color: (theme) => theme.palette.grey.A700 }}
+        >
+          <Typography variant="caption" sx={{ textAlign: 'right' }}>
+            {t('form.labels.original_price')}:
+          </Typography>
+          <Typography variant="caption" sx={{ textDecoration: 'line-through' }}>
+            {fCurrency(values.originalPrice, lang, event.currency)}
+          </Typography>
+        </Stack>
+      )}
+      <Stack
+        direction="row"
+        justifyContent={isRight ? 'flex-end' : 'space-between'}
+        alignItems="center"
+        spacing={1}
+      >
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <Tooltip
+            title={t('form.labels.price_including_service_fee', {
+              fee: fCurrency(values.totalFee ?? 0, lang, event.currency),
+            })}
+            placement={xs ? 'top' : 'left'}
+            arrow
+            sx={{ cursor: 'help' }}
+          >
+            <Stack alignItems="center">
+              <Iconify icon="carbon:information-filled" />
+            </Stack>
+          </Tooltip>
+          <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
+            {t('form.labels.total')}:
+          </Typography>
+        </Stack>
+        <Typography variant="subtitle1">{fCurrency(values.total, lang, event.currency)}</Typography>
+      </Stack>
+      {!!values.totalFee && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: (theme) => theme.palette.grey.A700,
+          }}
+        >
+          {t('form.labels.with_fee')}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default FeeBox;

package/src/form/payment/PaymentSkeleton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Skeleton, Stack, SxProps } from '@mui/material';
+
+interface Props {
+  sx?: SxProps;
+}
+
+const PaymentSkeleton: React.FC<Props> = ({ sx }) => (
+  <Stack
+    spacing={1}
+    sx={{
+      width: '100%',
+      ...sx,
+    }}
+  >
+    {[...Array(5)].map((_, index) => (
+      <Skeleton key={index} variant="rounded" sx={{ width: '100%', height: 56 }} />
+    ))}
+  </Stack>
+);
+
+export default PaymentSkeleton;

package/src/form/product/ProductCard.tsx

@@ -0,0 +1,105 @@
+import { Button, Card, Stack, Typography } from '@mui/material';
+import { Iconify } from '@components/iconify';
+import Image from '@components/Image';
+import { IEventProduct } from '@utils/types/event-product.type';
+import React, { useMemo, useState } from 'react';
+import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
+import { IEventProductForm } from '@utils/types/product.type';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import { getSelectedQuantityByVariant } from '@utils/product';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  eventProduct: IEventProduct;
+  eventId: number;
+  isOnlyMerchandise?: boolean;
+}
+
+const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {
+  const { t } = useGlobal();
+  const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
+  const { setValue } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+
+  const onSelectVariant = (selectedVariant: IEventProductForm) => {
+    const variant = products.find(
+      (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
+    );
+
+    if (variant) {
+      if (selectedVariant.quantity === 0) {
+        setValue(
+          `products.${eventId}`,
+          products.filter(
+            (product) => product.eventProductVariantId !== variant.eventProductVariantId
+          )
+        );
+      } else {
+        setValue(
+          `products.${eventId}`,
+          products.map((product) => {
+            if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {
+              return {
+                ...product,
+                quantity: selectedVariant.quantity,
+              };
+            }
+            return product;
+          })
+        );
+      }
+    } else if (selectedVariant.quantity !== 0) {
+      setValue(`products.${eventId}`, [...products, selectedVariant]);
+    }
+  };
+
+  const eventNotEmpty = useMemo(() => {
+    return products.some((product) => product?.quantity);
+  }, [products]);
+
+  return (
+    <>
+      <Card sx={{ p: 2 }}>
+        <Stack spacing={1}>
+          <Image src={eventProduct.product.previewImage.url} ratio="1/1" sx={{ borderRadius: 2 }} />
+          <Typography variant="h5">{eventProduct.product.name}</Typography>
+          <Typography
+            variant="caption"
+            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
+            sx={{
+              height: 44,
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          />
+          <Button
+            variant="contained"
+            onClick={() => setOpenVariantDialog(true)}
+            fullWidth
+            startIcon={
+              eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
+            }
+          >
+            {eventNotEmpty ? t('change') : t('add')}
+          </Button>
+        </Stack>
+      </Card>
+      <ProductVariantsDialog
+        eventProduct={eventProduct}
+        eventId={eventId}
+        openDialog={openVariantDialog}
+        onClose={() => setOpenVariantDialog(false)}
+        callback={onSelectVariant}
+        selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+        isOnlyMerchandise={isOnlyMerchandise}
+      />
+    </>
+  );
+};
+
+export default ProductCard;

package/src/form/product/ProductVariantsDialog.tsx

@@ -0,0 +1,276 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { IEventProduct, IEventProductVariant } from '@utils/types/event-product.type';
+import Image from '@components/Image';
+import { useWatch } from 'react-hook-form';
+import { ITicketFormTicket } from '@utils/types/ticket.type';
+import { IEventProductForm } from '@utils/types/product.type';
+import { fCurrency } from '@utils/formatNumber';
+import useGlobal from '@hooks/useGlobal.ts';
+import { Iconify } from '@components';
+
+interface Props {
+  eventProduct: IEventProduct;
+  eventId: number;
+  openDialog: boolean;
+  callback: (variant: IEventProductForm) => void;
+  onClose?: () => void;
+  selectedQuantityByVariant?: Record<number, number>;
+  isOnlyMerchandise?: boolean;
+}
+
+const ProductVariantsDialog: React.FC<Props> = ({
+  eventProduct,
+  openDialog,
+  onClose,
+  callback,
+  selectedQuantityByVariant,
+  isOnlyMerchandise,
+  eventId,
+}) => {
+  const { t, lang, options } = useGlobal();
+  const { showSnackbar } = useGlobal();
+  const [selectedVariant, setSelectedVariant] = useState<IEventProductForm | null>(null);
+  const [variantPrice, setVariantPrice] = useState<number | null>(null);
+  const [variantQuantity, setVariantQuantity] = useState<number>(1);
+  const [isVariantClicked, setIsVariantClicked] = useState(false);
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+
+  useEffect(() => {
+    if (openDialog) {
+      const urlParams = new URLSearchParams(new URL(window.location.href).search);
+      const elementId = urlParams.get('elementId');
+      parent.postMessage({ type: 'eventlookFrameOpenDialog', name: elementId }, '*');
+    }
+  }, [openDialog]);
+
+  useEffect(() => {
+    if (isVariantClicked) {
+      setVariantQuantity(
+        selectedQuantityByVariant &&
+          selectedVariant &&
+          selectedQuantityByVariant[selectedVariant.eventProductVariantId] !== undefined
+          ? selectedQuantityByVariant[selectedVariant.eventProductVariantId]
+          : 1
+      );
+      setIsVariantClicked(false);
+    }
+  }, [selectedVariant, isVariantClicked]);
+
+  const handleOnClick = (variant: IEventProductVariant) => {
+    setVariantPrice(variant.priceWithVat);
+    setSelectedVariant({
+      eventProductVariantId: variant.id,
+      productVariantId: variant.productVariant.id,
+      quantity: 1,
+      price: variant.priceWithVat,
+      excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+    });
+    setIsVariantClicked(true);
+  };
+
+  const handleOnAdd = () => {
+    if (!selectedVariant) {
+      showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });
+      return;
+    }
+    callback(selectedVariant);
+    setSelectedVariant(null);
+    onClose?.();
+  };
+
+  const isVariantDisabled = (variant: IEventProductVariant) => {
+    let countUsed = 0;
+    let selectedVariantQuantity = 0;
+
+    for (const product of products) {
+      if (product.productVariantId === variant.productVariant.id) {
+        countUsed += product.quantity;
+      }
+    }
+
+    for (const ticket of tickets) {
+      if (ticket.products) {
+        for (const product of ticket.products) {
+          if (product.productVariantId === variant.productVariant.id) {
+            countUsed += product.quantity;
+            selectedVariantQuantity = product.quantity;
+          }
+        }
+      }
+    }
+
+    return (
+      (variant.productVariant.quantity &&
+        countUsed + variant.productVariant.sold >= variant.productVariant.quantity) ||
+      selectedVariantQuantity >= 10
+    );
+  };
+
+  const isVariantSoldOut = () => {
+    const variant = eventProduct.eventProductVariants.find(
+      (product) => product.id === selectedVariant?.eventProductVariantId
+    );
+    let countUsed = variantQuantity;
+
+    for (const ticket of tickets) {
+      if (ticket.products) {
+        for (const product of ticket.products) {
+          if (product.productVariantId === variant?.productVariant.id) {
+            countUsed += product.quantity;
+          }
+        }
+      }
+    }
+
+    if (variant && variant.productVariant.quantity) {
+      if (
+        variant.productVariant.sold + countUsed >= variant.productVariant.quantity ||
+        variantQuantity >= 10
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const handleAddQuantity = () => {
+    setVariantQuantity(variantQuantity + 1);
+    setSelectedVariant((prevState) => {
+      if (!prevState) return null;
+      return {
+        ...prevState,
+        quantity: variantQuantity + 1,
+      };
+    });
+  };
+
+  const handleRemoveQuantity = () => {
+    if (variantQuantity > 0) {
+      setVariantQuantity(variantQuantity - 1);
+    }
+    setSelectedVariant((prevState) => {
+      if (!prevState) return null;
+      return {
+        ...prevState,
+        quantity: variantQuantity - 1,
+      };
+    });
+  };
+
+  return (
+    <Dialog
+      open={openDialog}
+      onClose={() => onClose && onClose()}
+      fullWidth
+      sx={{
+        mx: 'auto',
+        width: {
+          xs: '100%',
+          sm: 'calc(100vh - 300px)',
+        },
+        minWidth: 300,
+        maxWidth: 444,
+        '& .MuiDialog-container': {
+          height: options?.isIframe ? 'auto' : '100%',
+        },
+      }}
+    >
+      <DialogTitle />
+      <DialogContent>
+        <Stack spacing={1}>
+          <Image
+            src={eventProduct.product.previewImage.url}
+            alt={eventProduct.product.name}
+            ratio="1/1"
+            sx={{ borderRadius: 2 }}
+          />
+          <Typography variant="h5">{eventProduct.product.name}</Typography>
+          <Typography variant="body2" color="primary">
+            {t('form.labels.category')}: {eventProduct.product.category.value.text}
+          </Typography>
+          <Typography
+            variant="caption"
+            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
+          />
+        </Stack>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: 'flex-start' }}>
+        <Stack spacing={2} width="100%">
+          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap textAlign="left">
+            {eventProduct.eventProductVariants.map((variant) => (
+              <Button
+                key={variant.id}
+                onClick={() => handleOnClick(variant)}
+                variant={
+                  variant.id === selectedVariant?.eventProductVariantId ? 'contained' : 'outlined'
+                }
+                size="large"
+                disabled={isOnlyMerchandise ? false : isVariantDisabled(variant)}
+              >
+                <Badge
+                  color="primary"
+                  badgeContent={
+                    selectedQuantityByVariant ? selectedQuantityByVariant[variant.id] : 0
+                  }
+                  sx={{ position: 'unset' }}
+                >
+                  {variant.productVariant.value}
+                </Badge>
+              </Button>
+            ))}
+          </Stack>
+          <Stack direction="row" justifyContent="space-between" alignItems="center" pt={1}>
+            {selectedVariant && isOnlyMerchandise && (
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <IconButton
+                  size="small"
+                  color="primary"
+                  onClick={handleRemoveQuantity}
+                  disabled={variantQuantity < 1}
+                >
+                  <Iconify icon="eva:minus-fill" />
+                </IconButton>
+                <Typography color="grey.500">{variantQuantity}</Typography>
+                <IconButton
+                  size="small"
+                  color="primary"
+                  onClick={handleAddQuantity}
+                  disabled={isVariantSoldOut()}
+                >
+                  <Iconify icon="eva:plus-fill" />
+                </IconButton>
+              </Stack>
+            )}
+            <Typography variant="h4" textAlign="right" mt={0}>
+              {variantPrice !== null
+                ? variantPrice > 0
+                  ? fCurrency(variantPrice, lang, eventProduct.product.currency)
+                  : t('free')
+                : t('unselected')}
+            </Typography>
+          </Stack>
+          <Stack direction="row" spacing={1} justifyContent="flex-end" width="100%">
+            {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}
+            <Button variant="contained" onClick={handleOnAdd} disabled={!selectedVariant}>
+              {t('add')}
+            </Button>
+          </Stack>
+        </Stack>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ProductVariantsDialog;

package/src/form/shipping/ShippingSkeleton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Skeleton, Stack, SxProps } from '@mui/material';
+
+interface Props {
+  sx?: SxProps;
+}
+
+const ShippingSkeleton: React.FC<Props> = ({ sx }) => (
+  <Stack
+    spacing={1}
+    sx={{
+      width: '100%',
+      ...sx,
+    }}
+  >
+    {[...Array(5)].map((_, index) => (
+      <Skeleton key={index} variant="rounded" sx={{ width: '100%', height: 56 }} />
+    ))}
+  </Stack>
+);
+
+export default ShippingSkeleton;

package/src/form/style.ts

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material/styles';
+import { Box, Card, FormControl } from '@mui/material';
+
+export const OverviewCard = styled(Card)<{ stickyHeaderTop: number }>(
+  ({ theme, stickyHeaderTop }) => ({
+    position: 'sticky',
+    top: stickyHeaderTop,
+  })
+);
+
+export const ShippingMethodItem = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active: boolean }>(({ theme, active }) => ({
+  borderRadius: theme.spacing(1),
+  border: `1px solid ${active ? theme.palette.primary.main : theme.palette.grey.A200}`,
+  marginTop: theme.spacing(1),
+  width: '100%',
+  padding: `0 ${theme.spacing(2)}`,
+  transitionDuration: '.3s',
+
+  '& > .MuiFormControlLabel-root': {
+    width: '100%',
+    padding: `${theme.spacing(1)} 0`,
+  },
+}));
+
+export const PaymentWrapper = styled(FormControl)(() => ({
+  width: '100%',
+}));
+
+export const PaymentItem = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active: boolean }>(({ theme, active }) => ({
+  borderRadius: theme.spacing(1),
+  border: `1px solid ${active ? theme.palette.primary.main : theme.palette.grey.A200}`,
+  marginTop: theme.spacing(1),
+  width: '100%',
+  padding: `0 ${theme.spacing(2)}`,
+  transitionDuration: '.3s',
+
+  '& > .MuiFormControlLabel-root': {
+    width: '100%',
+    padding: `${theme.spacing(1)} 0`,
+  },
+}));
+
+export const PaymentSwiftWrapper = styled(Box)(() => ({
+  width: '100%',
+}));