@eventlook/sdk 1.4.48 → 1.4.49-beta.2

package/src/form/{TicketSelection.tsx → tickets/TicketSelection.tsx}

@@ -1,36 +1,23 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import {
-  Box,
-  Button,
-  Divider,
-  Grid,
-  IconButton,
-  MenuItem,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { RHFSelect } from '@components/hook-form';
+import { Box, Divider, Stack, Typography } from '@mui/material';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
-import { fCurrency } from '@utils/formatNumber';
-import { Iconify } from '@components/iconify';
 import { groupBy } from '@utils/global';
 import { IReleaseShort } from '@utils/types/release.type';
-import FeeBox from '@form/payment/FeeBox';
 import { IEvent } from '@utils/types/event.type';
 import useResponsive from '@hooks/useResponsive';
 import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
 import { EventType } from '@utils/data/event';
 import useGlobal from '@hooks/useGlobal.ts';
+import TicketSelectionMobile from './TicketSelectionMobile';
 
 interface Props {
   event: IEvent;
 }
 
 const TicketSelection: React.FC<Props> = ({ event }) => {
-  const { t, lang } = useGlobal();
+  const { t } = useGlobal();
   const isMobile = useResponsive('down', 'md');
   const { setValue, watch } = useFormContext<ITicketForm>();
   const tickets = useWatch({
@@ -78,11 +65,11 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
     );
   };
 
-  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
-    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
-    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
-    return availableQuantity > 10 ? 10 : availableQuantity;
-  };
+  // const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+  //   const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+  //   const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+  //   return availableQuantity > 10 ? 10 : availableQuantity;
+  // };
 
   const countReleaseCategories = (): number => {
     const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
@@ -188,117 +175,26 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   };
 
   return (
-    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
-      {tickets.map((item, index) => (
-        <Box key={index}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} md={6}>
-              {showLoading ? (
-                <Skeleton
-                  variant="rounded"
-                  sx={{
-                    width: '100%',
-                    height: (theme) => theme.spacing(7.5),
-                  }}
-                />
-              ) : (
-                <RHFSelect
-                  name={`tickets.${event.id}.${index}.releaseId`}
-                  value={item.releaseId}
-                  label={
-                    index > 0
-                      ? t('form.labels.add_another_release')
-                      : t('form.labels.release_category_price')
-                  }
-                  maxHeight="calc(100vh - 2rem)"
-                  onChange={(e) => {
-                    setValue(`tickets.${event.id}.${index}.releaseId`, Number(e.target.value));
-                    setValue(`tickets.${event.id}.${index}.extraFields`, []);
-                  }}
-                >
-                  <MenuItem key={0} value="">
-                    {t('choose')}
-                  </MenuItem>
-                  {activeReleases?.map((activeRelease) => (
-                    <MenuItem
-                      key={activeRelease.id}
-                      value={activeRelease.id}
-                      disabled={
-                        isReleaseSelected(activeRelease.id) ||
-                        (activeRelease.locked &&
-                          !soldOutReleaseCategoryNames.includes(activeRelease.releaseCategoryName))
-                      }
-                    >
-                      {activeRelease.releaseCategoryName} - {activeRelease.name}:{' '}
-                      {activeRelease.price === 0
-                        ? t('free')
-                        : fCurrency(activeRelease.price, lang, event.currency)}
-                    </MenuItem>
-                  ))}
-                </RHFSelect>
-              )}
-            </Grid>
-            <Grid key={index} item xs={12} md={6}>
-              {showLoading ? (
-                <Skeleton
-                  variant="rounded"
-                  sx={{
-                    width: '100%',
-                    height: (theme) => theme.spacing(7.5),
-                  }}
-                />
-              ) : (
-                <Stack direction="row" alignItems="center" spacing={1}>
-                  <RHFSelect
-                    name={`tickets.${event.id}.${index}.quantity`}
-                    value={item.quantity}
-                    label={t('form.labels.quantity')}
-                  >
-                    {[...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (
-                      <MenuItem
-                        key={index2}
-                        value={index2 + 1}
-                        disabled={isQuantityDisabled(index2 + 1, item.releaseId)}
-                      >
-                        {index2 + 1}
-                      </MenuItem>
-                    ))}
-                    {!item.releaseId && (
-                      <MenuItem disabled sx={{ textTransform: 'unset!important' }}>
-                        {t('event.tickets.stepper.1.quantity_select')}
-                      </MenuItem>
-                    )}
-                  </RHFSelect>
-                  {item.releaseId && item.quantity && (
-                    <Box>
-                      <IconButton color="primary" onClick={() => removeTicket(index)}>
-                        <Iconify icon="carbon:trash-can" />
-                      </IconButton>
-                    </Box>
-                  )}
-                </Stack>
-              )}
-            </Grid>
-          </Grid>
-          {activeReleases && item.releaseId && (
-            <Typography
-              variant="caption"
-              content="div"
-              mt={2}
-              mb={getRelease(item.releaseId)?.extraFields?.length ? 2 : 0}
-              display="block"
-            >
-              {getRelease(item.releaseId)?.description ?? ''}
-            </Typography>
-          )}
-          {getExtraFields(item.releaseId, index)}
-        </Box>
-      ))}
+    <Stack
+      spacing={3}
+      direction="column"
+      divider={!isMobile ? <Divider sx={{ borderStyle: 'dashed' }} /> : undefined}
+    >
+      <TicketSelectionMobile
+        event={event}
+        activeReleases={activeReleases}
+        showLoading={showLoading}
+        soldOutReleaseCategoryNames={soldOutReleaseCategoryNames}
+        tickets={tickets}
+        isQuantityDisabled={isQuantityDisabled}
+        setValue={setValue as (name: string, value: any) => void}
+        removeTicket={removeTicket}
+        getExtraFields={getExtraFields}
+      />
       <Box>
         <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
           *{t('event.tickets.stepper.1.max_ticket_quantity')}
         </Typography>
-        {isMobile && <FeeBox event={event} align="right" />}
       </Box>
     </Stack>
   );

package/src/form/{TicketSelectionMap.tsx → tickets/TicketSelectionMap.tsx}

@@ -5,6 +5,7 @@ import { Button } from '@mui/material';
 import { iframe, TicketSelection } from '@seat-picker/seat-picker-sdk';
 import { useFormContext } from 'react-hook-form';
 import { ITicketForm, ITicketFormTicket, ITicketLocation } from '@utils/types/ticket.type.ts';
+import Iconify from '@components/iconify/Iconify';
 
 interface Props {
   event: IEvent;
@@ -65,7 +66,7 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
 
   return (
     <Button
-      variant="contained"
+      variant="outlined"
       onClick={() =>
         iframe.openPicker({
           eventId: String(event.id),
@@ -74,6 +75,13 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
           clientId: uuid,
         })
       }
+      sx={{
+        width: { xs: '100%' },
+        color: 'text.primary',
+        borderColor: (theme) => theme.palette.grey['300'],
+        '& .MuiButton-endIcon': { ml: 0, fontSize: '1.5em' },
+      }}
+      endIcon={<Iconify icon="eva:chevron-right-outline" />}
     >
       {t('form.labels.open_map')}
     </Button>

package/src/form/tickets/TicketSelectionMobile.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Box, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { fCurrency } from '@utils/formatNumber';
+import { IEvent } from '@utils/types/event.type';
+import { IReleaseShort } from '@utils/types/release.type';
+import { ITicketFormTicket } from '@utils/types/ticket.type';
+import useGlobal from '@hooks/useGlobal';
+import ReleaseDescription from './ReleaseDescription';
+import TicketQuantityControl from './TicketQuantityControl';
+
+interface Props {
+  event: IEvent;
+  activeReleases?: IReleaseShort[];
+  showLoading: boolean;
+  soldOutReleaseCategoryNames: string[];
+  tickets: ITicketFormTicket[];
+  isQuantityDisabled: (value: number, releaseId: number | '') => boolean;
+  setValue: (name: string, value: any) => void;
+  removeTicket: (indexToRemove: number) => void;
+  getExtraFields: (releaseId: number | '', index: number) => React.ReactNode;
+}
+
+const TicketSelectionMobile: React.FC<Props> = ({
+  event,
+  activeReleases,
+  showLoading,
+  soldOutReleaseCategoryNames,
+  tickets,
+  isQuantityDisabled,
+  setValue,
+  removeTicket,
+  getExtraFields,
+}) => {
+  const { t, lang } = useGlobal();
+  const [expandedReleaseIds, setExpandedReleaseIds] = useState<Record<number, boolean>>({});
+  const theme = useTheme();
+  const isLight = theme.palette.mode === 'light';
+
+  const getReleaseTitle = (release: IReleaseShort) =>
+    release.releaseCategoryName || release.name || '';
+
+  const getTicketIndexByRelease = (releaseId: number) =>
+    tickets.findIndex((ticket) => ticket.releaseId === releaseId);
+
+  const getReleaseQuantity = (releaseId: number) => {
+    const ticket = tickets.find((t) => t.releaseId === releaseId);
+    return Number(ticket?.quantity || 0);
+  };
+
+  const updateReleaseQuantity = (release: IReleaseShort, nextQuantity: number) => {
+    const maxAvailable = Math.min(release.availableTickets || 0, 10);
+    const clampedQuantity = Math.max(0, Math.min(nextQuantity, maxAvailable));
+    const ticketIndex = getTicketIndexByRelease(release.id);
+
+    if (clampedQuantity <= 0) {
+      if (ticketIndex >= 0) removeTicket(ticketIndex);
+      return;
+    }
+
+    if (ticketIndex >= 0) {
+      setValue(`tickets.${event.id}.${ticketIndex}.quantity`, clampedQuantity);
+      return;
+    }
+
+    setValue(`tickets.${event.id}`, [
+      ...tickets,
+      {
+        releaseId: release.id,
+        quantity: clampedQuantity,
+        itemName: getReleaseTitle(release),
+        price: release.price || 0,
+        products: [],
+        extraFields: [],
+      },
+    ]);
+  };
+
+  const toggleReleaseDescription = (releaseId: number) =>
+    setExpandedReleaseIds((prev) => ({
+      ...prev,
+      [releaseId]: !prev[releaseId],
+    }));
+
+  if (showLoading) {
+    return (
+      <Stack spacing={2}>
+        {[...Array(2)].map((_, index) => (
+          <Skeleton
+            key={index}
+            variant="rounded"
+            sx={{
+              width: '100%',
+              height: (theme) => theme.spacing(12),
+            }}
+          />
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack spacing={2}>
+      {activeReleases?.map((release) => {
+        const quantity = getReleaseQuantity(release.id);
+        const ticketIndex = getTicketIndexByRelease(release.id);
+        const maxAvailable = Math.min(release.availableTickets || 0, 10);
+        const isLocked =
+          release.locked && !soldOutReleaseCategoryNames.includes(release.releaseCategoryName);
+        const isDisabled = isLocked && quantity === 0;
+        const canAddFirst = maxAvailable > 0 && !isQuantityDisabled(1, release.id);
+        const canAddMore = quantity < maxAvailable && !isQuantityDisabled(quantity + 1, release.id);
+
+        return (
+          <Box
+            key={release.id}
+            sx={{
+              pt: 1,
+              pr: 0.5,
+              pb: 0.5,
+              pl: 2,
+              borderRadius: 1,
+              bgcolor: (theme) => (isLight ? theme.palette.grey[100] : theme.palette.grey[800]),
+            }}
+          >
+            <Stack spacing={0}>
+              <Box>
+                <Typography variant="subtitle2" fontWeight={700}>
+                  {getReleaseTitle(release)}
+                </Typography>
+              </Box>
+
+              <Stack direction="row" alignItems="center" justifyContent="space-between">
+                <Stack>
+                  <Typography variant="body2">
+                    {release.price === 0
+                      ? t('free')
+                      : fCurrency(release.price, lang, event.currency)}
+                  </Typography>
+
+                  <ReleaseDescription
+                    description={release.description}
+                    isExpanded={Boolean(expandedReleaseIds[release.id])}
+                    onToggle={() => toggleReleaseDescription(release.id)}
+                    moreInfoLabel={t('more_info')}
+                  />
+                </Stack>
+
+                <TicketQuantityControl
+                  quantity={quantity}
+                  isDisabled={isDisabled}
+                  canAddFirst={canAddFirst}
+                  canAddMore={canAddMore}
+                  addLabel={t('add')}
+                  onDecrement={() => updateReleaseQuantity(release, quantity - 1)}
+                  onIncrement={() => updateReleaseQuantity(release, quantity + 1)}
+                  onAddFirst={() => updateReleaseQuantity(release, 1)}
+                />
+              </Stack>
+
+              <ReleaseDescription
+                description={release.description}
+                isExpanded={Boolean(expandedReleaseIds[release.id])}
+                onToggle={() => toggleReleaseDescription(release.id)}
+                moreInfoLabel={t('more_info')}
+                showCollapse
+              />
+
+              {ticketIndex >= 0 && getExtraFields(release.id, ticketIndex)}
+            </Stack>
+          </Box>
+        );
+      })}
+    </Stack>
+  );
+};
+
+export default TicketSelectionMobile;

package/src/form/{TicketWithMerchandiseSelection.tsx → tickets/TicketWithMerchandiseSelection.tsx}

@@ -1,14 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
 import { groupBy } from '@utils/global';
 import { IReleaseShort } from '@utils/types/release.type';
-import FeeBox from '@form/payment/FeeBox';
 import { IEvent } from '@utils/types/event.type';
-import useResponsive from '@hooks/useResponsive';
-import ReleaseWithMerchandise from '@form/ReleaseWithMerchandise';
+import ReleaseWithMerchandise from '@form/tickets/ReleaseWithMerchandise';
 import { EventType } from '@utils/data/event';
 import useGlobal from '@hooks/useGlobal.ts';
 
@@ -18,7 +16,6 @@ interface Props {
 
 const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
   const { t } = useGlobal();
-  const isMobile = useResponsive('down', 'md');
   const { setValue, watch } = useFormContext<ITicketForm>();
   const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${event.id}`, defaultValue: [] });
   const eventTimeslotId = watch('eventTimeslotId');
@@ -138,7 +135,7 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
   };
 
   return (
-    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
+    <Stack spacing={1} direction="column">
       {!activeReleases && event.type !== EventType.RECURRING ? (
         <Skeleton
           variant="rounded"
@@ -169,7 +166,6 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
         <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
           *{t('event.tickets.stepper.1.max_ticket_quantity')}
         </Typography>
-        {isMobile && <FeeBox event={event} align="right" />}
       </Box>
     </Stack>
   );

package/src/hooks/useConsentScrollOnDrawerOpen.ts

@@ -0,0 +1,73 @@
+import { RefObject, useEffect, useState } from 'react';
+
+interface UseConsentScrollOnDrawerOpenProps {
+  isDrawerOpen: boolean;
+  consentRef: RefObject<HTMLElement | null>;
+}
+
+export default function useConsentScrollOnDrawerOpen({
+  isDrawerOpen,
+  consentRef,
+}: UseConsentScrollOnDrawerOpenProps) {
+  const [isNearConsentSection, setIsNearConsentSection] = useState(false);
+
+  useEffect(() => {
+    const consentElement = consentRef.current;
+    if (!consentElement) {
+      return;
+    }
+
+    if (!('IntersectionObserver' in window)) {
+      setIsNearConsentSection(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        setIsNearConsentSection(entry.isIntersecting);
+      },
+      {
+        root: null,
+        threshold: 0,
+        rootMargin: '0px 0px 140px 0px',
+      }
+    );
+
+    observer.observe(consentElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [consentRef]);
+
+  useEffect(() => {
+    if (!isDrawerOpen) {
+      return;
+    }
+
+    if (window.matchMedia('(min-width:900px)').matches) {
+      return;
+    }
+
+    if (!isNearConsentSection) {
+      return;
+    }
+
+    let frameId = 0;
+    let frameId2 = 0;
+    frameId = window.requestAnimationFrame(() => {
+      frameId2 = window.requestAnimationFrame(() => {
+        consentRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.cancelAnimationFrame(frameId2);
+    };
+  }, [consentRef, isDrawerOpen, isNearConsentSection]);
+}

package/src/hooks/useScrollToFirstError.ts

@@ -0,0 +1,94 @@
+import { useCallback } from 'react';
+import { FieldError, FieldErrors, FieldValues, Path, UseFormReturn } from 'react-hook-form';
+
+type FirstError<T extends FieldValues> = {
+  name: Path<T>;
+  ref?: HTMLElement | null;
+};
+
+const isFieldError = (value: unknown): value is FieldError =>
+  !!value && typeof value === 'object' && ('type' in value || 'message' in value);
+
+const getFirstError = <T extends FieldValues>(
+  errors: FieldErrors<T>,
+  parentPath = ''
+): FirstError<T> | null => {
+  for (const [key, value] of Object.entries(errors)) {
+    if (!value) {
+      continue;
+    }
+
+    const fieldPath = parentPath ? `${parentPath}.${key}` : key;
+
+    if (isFieldError(value)) {
+      return {
+        name: fieldPath as Path<T>,
+        ref: value.ref instanceof HTMLElement ? value.ref : null,
+      };
+    }
+
+    if (Array.isArray(value)) {
+      for (let index = 0; index < value.length; index++) {
+        const nestedError = value[index] as FieldErrors<T> | undefined;
+        if (!nestedError) {
+          continue;
+        }
+
+        const firstNestedError = getFirstError(
+          nestedError,
+          parentPath ? `${parentPath}.${key}.${index}` : `${key}.${index}`
+        );
+        if (firstNestedError) {
+          return firstNestedError;
+        }
+      }
+    } else if (typeof value === 'object') {
+      const firstNestedError = getFirstError(value as FieldErrors<T>, fieldPath);
+      if (firstNestedError) {
+        return firstNestedError;
+      }
+    }
+  }
+
+  return null;
+};
+
+const escapeSelectorValue = (value: string) => {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(value);
+  }
+
+  return value.replace(/"/g, '\\"');
+};
+
+type ScrollToFirstErrorMethods<T extends FieldValues> = Pick<
+  UseFormReturn<T, any, any>,
+  'setFocus'
+>;
+
+export default function useScrollToFirstError<T extends FieldValues>(
+  methods: ScrollToFirstErrorMethods<T>
+) {
+  return useCallback(
+    (errors: FieldErrors<T>) => {
+      const firstError = getFirstError(errors);
+      if (!firstError) {
+        return;
+      }
+
+      methods.setFocus(firstError.name);
+
+      const scrollTarget =
+        firstError.ref ||
+        document.querySelector<HTMLElement>(
+          `[name="${escapeSelectorValue(String(firstError.name))}"]`
+        );
+
+      scrollTarget?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    },
+    [methods]
+  );
+}

package/src/locales/cs.tsx

@@ -7,6 +7,8 @@ const cs = {
   add: 'Přidat',
   confirm: 'Potvrdit',
   cancel: 'Zrušit',
+  close: 'Zavřít',
+  remove: 'Odstranit',
   pay: 'Zaplatit',
   change: 'Změnit',
   free: 'Zdarma',
@@ -39,7 +41,7 @@ const cs = {
       promo_code: 'Slevový kód',
       start_date: 'Datum konání',
       organizer: 'Pořadatel',
-      total: 'Celkem ',
+      total: 'Celkem',
       with_fee: 'vč. servisního poplatku',
       service_fee: 'Servisní poplatek',
       shipping_fee: 'Doprava',
@@ -53,6 +55,8 @@ const cs = {
       category: 'Kategorie',
       sms_notification: 'SMS notifikace',
       open_map: 'Otevřít mapu',
+      payment_overview_open: 'Otevřít přehled platby',
+      payment_overview_close: 'Zavřít přehled platby',
     },
     validation: {
       required: 'Toto pole je povinné.',
@@ -105,9 +109,13 @@ const cs = {
         7: {
           title: 'Přidružené eventy',
         },
+        8: {
+          title: 'EventLook služby',
+          additional_info: 'Více informací ke službám',
+        },
       },
       terms_and_conditions:
-        'Odesláním objednávky souhlasím s <0>Obchodními podmínkami</0> {{termsAndConditionsCompanies}} a beru na vědomí <1>Zásady soukromí</1>.',
+        'Souhlasím s <0>Obchodními podmínkami</0> {{termsAndConditionsCompanies}} a <1>Zásady soukromí</1>.',
       insurance: {
         label: 'Pojištění vstupenek',
         per_ticket: 'ks',
@@ -120,13 +128,20 @@ const cs = {
         },
       },
       sms_notification: {
-        label: 'SMS připomenutí termínu akce',
+        label: 'SMS připomenutí termínu',
         modal: {
           description:
             'Připomínka akce den předem: SMS vás upozorní na blížící se událost, abyste na ni nezapomněli a stihli se včas připravit.',
           price: 'Cena SMS připomenutí termínu akce',
         },
       },
+      merchandise: {
+        show_sizes: 'Zobrazit velikosti',
+        show_added: 'Zobrazit přidané',
+      },
+      services: {
+        add_tickets_first: 'Nejdříve prosím přidejte vstupenky',
+      },
       order_success: {
         title: 'Vstupenky byly úspěšně zarezervovány. Teď už zbývá jenom zaplatit.',
         description: