@eventlook/sdk 1.4.49-beta.4 → 1.4.49-beta.6

package/src/form/product/ProductCard.tsx

@@ -12,6 +12,7 @@ import {
   Typography,
 } from '@mui/material';
 import Image from '@components/Image';
+import { Iconify } from '@components/iconify';
 import { IEventProduct } from '@utils/types/event-product.type';
 import React, { useMemo, useState } from 'react';
 import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
@@ -115,6 +116,72 @@ const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise
     });
   };
 
+  const simpleProductQuantityControl =
+    simpleProductQuantity > 0 ? (
+      <Stack direction="row" spacing={1} alignItems="center" width="100%">
+        <IconButton
+          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity - 1)}
+          disabled={simpleProductQuantity <= 0}
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            p: 0,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Iconify icon="eva:minus-fill" width={18} height={18} />
+        </IconButton>
+        <Box
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 700,
+          }}
+        >
+          {simpleProductQuantity}
+        </Box>
+        <IconButton
+          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity + 1)}
+          disabled={simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0}
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            p: 0,
+            borderRadius: 1,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            '&:hover': { bgcolor: 'primary.dark' },
+            '&.Mui-disabled': {
+              bgcolor: 'action.disabledBackground',
+              color: 'action.disabled',
+            },
+          }}
+        >
+          <Iconify icon="eva:plus-fill" width={18} height={18} />
+        </IconButton>
+      </Stack>
+    ) : (
+      <Button
+        variant="contained"
+        onClick={() => onChangeSimpleProductQuantity(1)}
+        disabled={simpleProductMaxAvailable <= 0}
+        fullWidth
+      >
+        {t('add')}
+      </Button>
+    );
+
   return (
     <>
       <Card
@@ -152,67 +219,7 @@ const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise
             )}
           </Stack>
           {isSimpleProduct ? (
-            simpleProductQuantity > 0 ? (
-              <Stack direction="row" spacing={1} alignItems="center" width="100%">
-                <IconButton
-                  onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity - 1)}
-                  disabled={simpleProductQuantity <= 0}
-                  sx={{
-                    flex: '1 1 0',
-                    height: 36,
-                    p: 0,
-                    borderRadius: 1,
-                    border: '1px solid',
-                    borderColor: 'grey.300',
-                  }}
-                >
-                  -
-                </IconButton>
-                <Box
-                  sx={{
-                    flex: '1 1 0',
-                    height: 36,
-                    borderRadius: 1,
-                    border: '1px solid',
-                    borderColor: 'grey.300',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontWeight: 700,
-                  }}
-                >
-                  {simpleProductQuantity}
-                </Box>
-                <IconButton
-                  onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity + 1)}
-                  disabled={simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0}
-                  sx={{
-                    flex: '1 1 0',
-                    height: 36,
-                    p: 0,
-                    borderRadius: 1,
-                    bgcolor: 'primary.main',
-                    color: 'primary.contrastText',
-                    '&:hover': { bgcolor: 'primary.dark' },
-                    '&.Mui-disabled': {
-                      bgcolor: 'action.disabledBackground',
-                      color: 'action.disabled',
-                    },
-                  }}
-                >
-                  +
-                </IconButton>
-              </Stack>
-            ) : (
-              <Button
-                variant="contained"
-                onClick={() => onChangeSimpleProductQuantity(1)}
-                disabled={simpleProductMaxAvailable <= 0}
-                fullWidth
-              >
-                {t('add')}
-              </Button>
-            )
+            simpleProductQuantityControl
           ) : (
             <Button
               variant={eventNotEmpty ? 'contained' : 'outlined'}
@@ -270,18 +277,16 @@ const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise
         </DialogContent>
         <DialogActions sx={{ px: 3, pb: 3 }}>
           <Stack spacing={1} width="100%">
+            {simpleProductQuantityControl}
             <Button
-              variant="contained"
-              onClick={() => {
-                onChangeSimpleProductQuantity(simpleProductQuantity + 1);
-                setOpenSimpleProductDialog(false);
-              }}
-              disabled={simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0}
+              variant="outlined"
+              onClick={() => setOpenSimpleProductDialog(false)}
               fullWidth
+              sx={{
+                color: 'inherit',
+                borderColor: (theme) => theme.palette.grey[300],
+              }}
             >
-              {t('add')}
-            </Button>
-            <Button variant="outlined" onClick={() => setOpenSimpleProductDialog(false)} fullWidth>
               {t('close')}
             </Button>
           </Stack>

package/src/form/product/ProductVariantsDialog.tsx

@@ -63,7 +63,11 @@ const ProductVariantsDialog: React.FC<Props> = ({
       .map((variant) => {
         const quantity = draftQuantities[variant.id] ?? 0;
         const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;
-        if (quantity <= 0 && selectedQty <= 0) return null;
+        if (canAddOnlyOneAtATime) {
+          if (quantity <= 0) return null;
+        } else if (quantity <= 0 && selectedQty <= 0) {
+          return null;
+        }
         return {
           eventProductVariantId: variant.id,
           productVariantId: variant.productVariant.id,
@@ -290,6 +294,7 @@ const ProductVariantsDialog: React.FC<Props> = ({
                       <Button
                         variant="outlined"
                         onClick={() => handleRemoveQuantity(variant)}
+                        aria-label={t('components.product_variant_dialog.decrease_quantity')}
                         disabled={draftQty < 1}
                         sx={{
                           minWidth: 0,
@@ -324,6 +329,7 @@ const ProductVariantsDialog: React.FC<Props> = ({
                         <Button
                           variant="contained"
                           onClick={() => handleAddQuantity(variant)}
+                          aria-label={t('components.product_variant_dialog.increase_quantity')}
                           disabled={draftQty >= 10 || draftQty >= maxAvailable}
                           sx={{ minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 }}
                         >
@@ -375,7 +381,18 @@ const ProductVariantsDialog: React.FC<Props> = ({
                 {t('remove')}
               </Button>
             )}
-            {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}
+            {onClose && (
+              <Button
+                onClick={onClose}
+                sx={{
+                  border: 1,
+                  color: 'inherit',
+                  borderColor: (theme) => theme.palette.grey[300],
+                }}
+              >
+                {t('cancel')}
+              </Button>
+            )}
             <Button variant="contained" onClick={handleOnAdd} disabled={!hasDraftSelection}>
               {t('confirm')}
             </Button>

package/src/form/style.ts

@@ -5,6 +5,12 @@ export const OverviewCard = styled(Card)<{ stickyHeaderTop: number }>(
   ({ theme, stickyHeaderTop }) => ({
     position: 'sticky',
     top: stickyHeaderTop,
+    borderRadius: theme.spacing(2),
+
+    [theme.breakpoints.down('sm')]: {
+      borderRadius: theme.spacing(1),
+      boxShadow: 'none',
+    },
   })
 );
 
@@ -21,7 +27,7 @@ export const ShippingMethodItem = styled(Box, {
   }`,
   marginTop: theme.spacing(1),
   width: '100%',
-  padding: `0 ${theme.spacing(2)}`,
+  padding: `0 0 0 ${theme.spacing(2)}`,
   transitionDuration: '.3s',
 
   '& > .MuiFormControlLabel-root': {

package/src/form/tickets/TicketQuantityControl.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Button, IconButton, Stack } from '@mui/material';
 import { Iconify } from '@components/iconify';
+import useGlobal from '@hooks/useGlobal';
 
 interface TicketQuantityControlProps {
   quantity: number;
@@ -23,11 +24,14 @@ const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
   onIncrement,
   onAddFirst,
 }) => {
+  const { t } = useGlobal();
+
   if (quantity > 0) {
     return (
       <Stack direction="row" spacing={{ xs: 0.5, md: 1 }} alignItems="center">
         <IconButton
           onClick={onDecrement}
+          aria-label={t('form.labels.ticket_quantity_decrease')}
           disabled={isDisabled || quantity <= 0}
           sx={{
             width: { xs: 36, md: 40 },
@@ -56,6 +60,7 @@ const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
         </Box>
         <IconButton
           onClick={onIncrement}
+          aria-label={t('form.labels.ticket_quantity_increase')}
           disabled={isDisabled || !canAddMore}
           sx={{
             width: { xs: 36, md: 40 },
@@ -76,6 +81,7 @@ const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
     <Button
       variant="contained"
       onClick={onAddFirst}
+      aria-label={addLabel}
       disabled={isDisabled || !canAddFirst}
       sx={{
         height: { xs: 36, md: 40 },

package/src/hooks/useScrollToFirstError.ts

@@ -53,22 +53,23 @@ const getFirstError = <T extends FieldValues>(
   return null;
 };
 
-const escapeSelectorValue = (value: string) => {
+const escapeSelectorValue = (value: string): string => {
   if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
     return CSS.escape(value);
   }
 
-  return value.replace(/"/g, '\\"');
+  // Fallback: escape all CSS special characters manually
+  return value.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
 };
 
 type ScrollToFirstErrorMethods<T extends FieldValues> = Pick<
-  UseFormReturn<T, any, any>,
+  UseFormReturn<T, object, undefined>,
   'setFocus'
 >;
 
-export default function useScrollToFirstError<T extends FieldValues>(
-  methods: ScrollToFirstErrorMethods<T>
-) {
+export default function useScrollToFirstError<T extends FieldValues>({
+  setFocus,
+}: ScrollToFirstErrorMethods<T>) {
   return useCallback(
     (errors: FieldErrors<T>) => {
       const firstError = getFirstError(errors);
@@ -76,19 +77,23 @@ export default function useScrollToFirstError<T extends FieldValues>(
         return;
       }
 
-      methods.setFocus(firstError.name);
-
+      // Re-query the DOM instead of relying on potentially stale refs
+      const fieldName = String(firstError.name);
       const scrollTarget =
-        firstError.ref ||
-        document.querySelector<HTMLElement>(
-          `[name="${escapeSelectorValue(String(firstError.name))}"]`
-        );
+        document.querySelector<HTMLElement>(`[name="${escapeSelectorValue(fieldName)}"]`) ||
+        document.getElementById(fieldName);
 
-      scrollTarget?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
+      if (scrollTarget) {
+        scrollTarget.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+        scrollTarget.focus({ preventScroll: true });
+      } else {
+        // Fallback to RHF's setFocus if no DOM element found
+        setFocus(firstError.name);
+      }
     },
-    [methods]
+    [setFocus]
   );
 }

package/src/locales/cs.tsx

@@ -57,6 +57,8 @@ const cs = {
       open_map: 'Otevřít mapu',
       payment_overview_open: 'Otevřít přehled platby',
       payment_overview_close: 'Zavřít přehled platby',
+      ticket_quantity_decrease: 'Snížit počet vstupenek',
+      ticket_quantity_increase: 'Zvýšit počet vstupenek',
     },
     validation: {
       required: 'Toto pole je povinné.',
@@ -142,6 +144,9 @@ const cs = {
       services: {
         add_tickets_first: 'Nejdříve prosím přidejte vstupenky',
       },
+      shipping: {
+        choose_address: 'Vybrat adresu',
+      },
       order_success: {
         title: 'Vstupenky byly úspěšně zarezervovány. Teď už zbývá jenom zaplatit.',
         description:
@@ -176,6 +181,8 @@ const cs = {
   components: {
     product_variant_dialog: {
       select_variant: 'Musíte vybrat variantu produktu.',
+      decrease_quantity: 'Snížit množství varianty produktu',
+      increase_quantity: 'Zvýšit množství varianty produktu',
     },
   },
 };

package/src/locales/en.tsx

@@ -57,6 +57,8 @@ const en = {
       open_map: 'Open map',
       payment_overview_open: 'Open payment overview',
       payment_overview_close: 'Close payment overview',
+      ticket_quantity_decrease: 'Decrease ticket quantity',
+      ticket_quantity_increase: 'Increase ticket quantity',
     },
     validation: {
       required: 'This field is required.',
@@ -143,6 +145,9 @@ const en = {
       services: {
         add_tickets_first: 'Please add tickets first',
       },
+      shipping: {
+        choose_address: 'Choose address',
+      },
       order_success: {
         title: 'Tickets have been successfully reserved. Now you just need to pay.',
         description:
@@ -177,6 +182,8 @@ const en = {
   components: {
     product_variant_dialog: {
       select_variant: 'You must select a product variant',
+      decrease_quantity: 'Decrease product variant quantity',
+      increase_quantity: 'Increase product variant quantity',
     },
   },
 };

package/src/locales/es.tsx

@@ -57,6 +57,8 @@ const es = {
       open_map: 'Abrir mapa',
       payment_overview_open: 'Abrir resumen de pago',
       payment_overview_close: 'Cerrar resumen de pago',
+      ticket_quantity_decrease: 'Disminuir cantidad de entradas',
+      ticket_quantity_increase: 'Aumentar cantidad de entradas',
     },
     validation: {
       required: 'Este campo es obligatorio.',
@@ -143,6 +145,9 @@ const es = {
       services: {
         add_tickets_first: 'Por favor, agregue entradas primero',
       },
+      shipping: {
+        choose_address: 'Elegir dirección',
+      },
       order_success: {
         title: 'Las entradas han sido reservadas con éxito. Ahora solo tienes que pagar.',
         description:
@@ -178,6 +183,8 @@ const es = {
   components: {
     product_variant_dialog: {
       select_variant: 'Debes seleccionar una variante de producto',
+      decrease_quantity: 'Disminuir cantidad de variante de producto',
+      increase_quantity: 'Aumentar cantidad de variante de producto',
     },
   },
 };

package/src/locales/pl.tsx

@@ -57,6 +57,8 @@ const pl = {
       open_map: 'Otwórz mapę',
       payment_overview_open: 'Otwórz podsumowanie płatności',
       payment_overview_close: 'Zamknij podsumowanie płatności',
+      ticket_quantity_decrease: 'Zmniejsz liczbę biletów',
+      ticket_quantity_increase: 'Zwiększ liczbę biletów',
     },
     validation: {
       required: 'To pole jest wymagane.',
@@ -143,6 +145,9 @@ const pl = {
       services: {
         add_tickets_first: 'Najpierw dodaj bilety',
       },
+      shipping: {
+        choose_address: 'Wybierz adres',
+      },
       order_success: {
         title: 'Bilety zostały pomyślnie zarezerwowane. Teraz wystarczy zapłacić.',
         description:
@@ -176,6 +181,8 @@ const pl = {
   components: {
     product_variant_dialog: {
       select_variant: 'Musisz wybrać wariant produktu',
+      decrease_quantity: 'Zmniejsz ilość wariantu produktu',
+      increase_quantity: 'Zwiększ ilość wariantu produktu',
     },
   },
 };

package/src/locales/sk.tsx

@@ -57,6 +57,8 @@ const sk = {
       open_map: 'Otvoriť mapu',
       payment_overview_open: 'Otvoriť prehľad platby',
       payment_overview_close: 'Zavrieť prehľad platby',
+      ticket_quantity_decrease: 'Znížiť počet vstupeniek',
+      ticket_quantity_increase: 'Zvýšiť počet vstupeniek',
     },
     validation: {
       required: 'Toto pole je povinné.',
@@ -143,6 +145,9 @@ const sk = {
       services: {
         add_tickets_first: 'Najskôr prosím pridajte lístky',
       },
+      shipping: {
+        choose_address: 'Vybrať adresu',
+      },
       order_success: {
         title: 'Vstupenky boli úspešne rezervované. Teraz už len zaplatiť.',
         description:
@@ -177,6 +182,8 @@ const sk = {
   components: {
     product_variant_dialog: {
       select_variant: 'Musíte vybrať variant produktu',
+      decrease_quantity: 'Znížiť množstvo variantu produktu',
+      increase_quantity: 'Zvýšiť množstvo variantu produktu',
     },
   },
 };

package/src/locales/uk.tsx

@@ -57,6 +57,8 @@ const uk = {
       open_map: 'Відкрити карту',
       payment_overview_open: 'Відкрити огляд платежу',
       payment_overview_close: 'Закрити огляд платежу',
+      ticket_quantity_decrease: 'Зменшити кількість квитків',
+      ticket_quantity_increase: 'Збільшити кількість квитків',
     },
     validation: {
       required: "Це поле обов'язкове.",
@@ -143,6 +145,9 @@ const uk = {
       services: {
         add_tickets_first: 'Будь ласка, спочатку додайте квитки',
       },
+      shipping: {
+        choose_address: 'Вибрати адресу',
+      },
       order_success: {
         title: 'Квитки успішно зарезервовані. Тепер залишилося оплатити.',
         description:
@@ -177,6 +182,8 @@ const uk = {
   components: {
     product_variant_dialog: {
       select_variant: 'Ви повинні вибрати варіант продукту',
+      decrease_quantity: 'Зменшити кількість варіанту продукту',
+      increase_quantity: 'Збільшити кількість варіанту продукту',
     },
   },
 };

package/src/hooks/useConsentScrollOnDrawerOpen.ts

@@ -1,73 +0,0 @@
-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]);
-}