@eventlook/sdk 1.4.3 → 1.4.5-1.beta.1

package/src/form/tickets/TicketWithMerchandiseSelection.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+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 { IEvent } from '@utils/types/event.type';
+import ReleaseWithMerchandise from '@form/tickets/ReleaseWithMerchandise';
+import { EventType } from '@utils/data/event';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  event: IEvent;
+}
+
+const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
+  const { t } = useGlobal();
+  const { setValue, watch } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${event.id}`, defaultValue: [] });
+  const eventTimeslotId = watch('eventTimeslotId');
+  const isProcessingRef = useRef(false);
+  const { data: activeReleases, mutate } = useEventActiveReleases(
+    event.id,
+    false,
+    event.type === EventType.RECURRING ? eventTimeslotId : undefined
+  );
+
+  useEffect(() => {
+    if (!isProcessingRef.current) selectedTickets();
+  }, [tickets, activeReleases]);
+
+  const countReleaseCategories = (): number => {
+    const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
+    return Object.keys(grouped).length;
+  };
+
+  const selectedReleaseIsSoldOut = (releases: IReleaseShort[] | undefined) => {
+    const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
+      const nextRelease = releases?.find(
+        (item2) =>
+          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order + 1
+      );
+      const selected = tickets.find((ticket) => ticket.releaseId === item.id);
+      const maxSelectable = Math.min(item.availableTickets || 0, MAX_TICKETS_PER_ORDER);
+
+      return (
+        !!nextRelease &&
+        item.locked &&
+        !!selected &&
+        Number(selected.quantity) >= maxSelectable &&
+        index + 1 == tickets.length
+      );
+    });
+    return lockedSelectedReleases && lockedSelectedReleases.includes(true);
+  };
+
+  const countUnlockedReleases = () => activeReleases?.filter((item) => !item.locked).length || 0;
+
+  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
+
+  const selectedTickets = async () => {
+    const releases = await mutate();
+    const currentReleases = releases || activeReleases || [];
+    const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
+
+    const soldOutReleaseCategories = currentReleases.filter((release) =>
+      tickets.find(
+        (ticket) =>
+          release.id === ticket.releaseId &&
+          Number(ticket.quantity) >= Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER)
+      )
+    );
+
+    // Unlock next releases when current release is sold out
+    if (currentReleases.length) {
+      let hasChanges = false;
+      const updatedReleases = currentReleases.map((release) => {
+        const previousRelease = currentReleases.find(
+          (item) =>
+            item.releaseCategoryName === release.releaseCategoryName &&
+            item.order === release.order - 1
+        );
+
+        if (!release.locked || !previousRelease) return release;
+
+        const previousTicket = tickets.find((ticket) => ticket.releaseId === previousRelease.id);
+        const previousMaxSelectable = Math.min(
+          previousRelease.availableTickets || 0,
+          MAX_TICKETS_PER_ORDER
+        );
+        const shouldUnlock = Number(previousTicket?.quantity || 0) >= previousMaxSelectable;
+
+        if (!shouldUnlock) return release;
+
+        hasChanges = true;
+        return { ...release, locked: false };
+      });
+
+      if (hasChanges) {
+        await mutate(updatedReleases, false);
+      }
+    }
+
+    const hasSelectableRelease = currentReleases.some(
+      (release) => !isReleaseSelected(release.id) && !release.locked
+    );
+
+    const shouldAddRow =
+      (soldOutReleaseCategories &&
+        selectedReleaseIsSoldOut(releases) &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (currentReleases.length &&
+        soldOutReleaseCategories.length &&
+        currentReleases.length > tickets.length &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (tickets.length < countReleaseCategories() && !allFilled.length);
+
+    const shouldRemoveEmptyRows =
+      allFilled.length > 0 &&
+      tickets.length > 1 &&
+      !hasSelectableRelease &&
+      (!soldOutReleaseCategories?.length || !selectedReleaseIsSoldOut(releases));
+
+    if (shouldAddRow) {
+      isProcessingRef.current = true;
+      setValue(`tickets.${event.id}`, [
+        ...tickets,
+        {
+          releaseId: '',
+          quantity: '',
+          itemName: '',
+          price: 0,
+          products: [],
+          extraFields: [],
+        },
+      ]);
+      setTimeout(() => (isProcessingRef.current = false), 0);
+    } else if (shouldRemoveEmptyRows) {
+      // Only remove completely empty rows (no releaseId), keep rows where user started selecting
+      const nonEmptyTickets = tickets.filter((item) => item.releaseId);
+      if (nonEmptyTickets.length < tickets.length) {
+        isProcessingRef.current = true;
+        setValue(`tickets.${event.id}`, nonEmptyTickets);
+        setTimeout(() => (isProcessingRef.current = false), 0);
+      }
+    }
+  };
+
+  return (
+    <Stack spacing={1} direction="column">
+      {!activeReleases && event.type !== EventType.RECURRING ? (
+        <Skeleton
+          variant="rounded"
+          sx={{
+            width: '100%',
+            height: (theme) => theme.spacing(7.5),
+          }}
+        />
+      ) : (
+        activeReleases
+          ?.filter((release) => !release.locked || isReleaseSelected(release.id))
+          .map((release, index) => (
+            <ReleaseWithMerchandise
+              key={release.id}
+              eventId={event.id}
+              release={release}
+              activeReleases={activeReleases}
+              currency={event.currency}
+              index={index}
+            />
+          ))
+      )}
+      {!activeReleases && event.type === EventType.RECURRING && (
+        <Typography variant="h5">{t('event.tickets.stepper.1.select_timeslot')}</Typography>
+      )}
+      {!!activeReleases && !activeReleases.length && (
+        <Typography variant="h5">{t('event.tickets.stepper.1.no_tickets')}</Typography>
+      )}
+      <Box>
+        <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
+          *{t('event.tickets.stepper.1.max_ticket_quantity')}
+        </Typography>
+      </Box>
+    </Stack>
+  );
+};
+
+export default TicketWithMerchandiseSelection;

package/src/hooks/useScrollToFirstError.ts

@@ -0,0 +1,99 @@
+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): string => {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(value);
+  }
+
+  // Fallback: escape all CSS special characters manually
+  return value.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
+};
+
+type ScrollToFirstErrorMethods<T extends FieldValues> = Pick<
+  UseFormReturn<T, object, undefined>,
+  'setFocus'
+>;
+
+export default function useScrollToFirstError<T extends FieldValues>({
+  setFocus,
+}: ScrollToFirstErrorMethods<T>) {
+  return useCallback(
+    (errors: FieldErrors<T>) => {
+      const firstError = getFirstError(errors);
+      if (!firstError) {
+        return;
+      }
+
+      // Re-query the DOM instead of relying on potentially stale refs
+      const fieldName = String(firstError.name);
+      const scrollTarget =
+        document.querySelector<HTMLElement>(`[name="${escapeSelectorValue(fieldName)}"]`) ||
+        document.getElementById(fieldName);
+
+      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);
+      }
+    },
+    [setFocus]
+  );
+}

package/src/locales/cs.tsx

@@ -7,13 +7,17 @@ const cs = {
   add: 'Přidat',
   confirm: 'Potvrdit',
   cancel: 'Zrušit',
+  close: 'Zavřít',
+  remove: 'Odstranit',
   pay: 'Zaplatit',
   change: 'Změnit',
+  free: 'Zdarma',
   back_to_tickets: 'Zpět na vstupenky',
   unselected: 'Nevybráno',
   go_home: 'Přejít na úvodní stránku',
   apple_wallet: 'Stáhnout do Apple Wallet',
   google_wallet: 'Stáhnout do Google Wallet',
+  more_info: 'Více informací',
   shipping_method: {
     types: {
       PACKETA: 'Zásilkovna',
@@ -37,10 +41,11 @@ 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',
+      ticket_insurance: 'Pojištění vstupenek',
       price_including_service_fee: 'Cena zahrnuje servisní poplatek v hodnotě {{fee}}.',
       price_including_service_fee_percentage:
         'Cena zahrnuje servisní poplatek v výši {{percentage}} z celkové částky.',
@@ -48,6 +53,12 @@ const cs = {
       original_price: 'Původní cena',
       ticket: 'Vstupenka',
       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',
+      ticket_quantity_decrease: 'Snížit počet vstupenek',
+      ticket_quantity_increase: 'Zvýšit počet vstupenek',
     },
     validation: {
       required: 'Toto pole je povinné.',
@@ -56,6 +67,9 @@ const cs = {
       invalid_date: 'Datum není platné.',
       terms_and_conditions: 'Musíte souhlasit s obchodními podmínkami.',
       promo_code_invalid: 'Slevový kód není platný.',
+      promo_code_applied: 'Tento slevový kód již byl použit.',
+      promo_code_cant_combine: 'Tento slevový kód nelze kombinovat s jinými kódy.',
+      min_purchase_not_met: 'Minimální částka nákupu nebyla dosažena: ',
       count_tickets_or_products: 'Musíte vybrat alespoň 1 vstupenku nebo produkt.',
     },
   },
@@ -97,9 +111,42 @@ const cs = {
         7: {
           title: 'Přidružené eventy',
         },
+        8: {
+          title: 'Dodatečné 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',
+        modal: {
+          description:
+            'Pojištění vstupenek Vám poskytuje ochranu v případě, že se nebudete moci zúčastnit akce z důvodu nemoci, úrazu nebo jiných nepředvídatelných událostí.',
+          coverage:
+            'Pojištění pokrývá: nemoc, úraz, náhlá hospitalizace, karanténa nebo jiné nepředvídatelné události, které Vám zabrání v účasti na akci.',
+          price: 'Cena pojištění',
+        },
+      },
+      sms_notification: {
+        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',
+      },
+      shipping: {
+        choose_address: 'Vybrat adresu',
+      },
       order_success: {
         title: 'Vstupenky byly úspěšně zarezervovány. Teď už zbývá jenom zaplatit.',
         description:
@@ -134,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

@@ -7,13 +7,17 @@ const en = {
   add: 'Add',
   confirm: 'Confirm',
   cancel: 'Cancel',
+  close: 'Close',
+  remove: 'Remove',
   pay: 'Pay',
   change: 'Change',
+  free: 'Free',
   back_to_tickets: 'Back to tickets',
   unselected: 'Unselected',
   go_home: 'Go to homepage',
   apple_wallet: 'Download to Apple Wallet',
   google_wallet: 'Download to Google Wallet',
+  more_info: 'More information',
   shipping_method: {
     types: {
       PACKETA: 'Packeta',
@@ -41,6 +45,7 @@ const en = {
       with_fee: 'incl. service fee',
       service_fee: 'Service fee',
       shipping_fee: 'Shipping',
+      ticket_insurance: 'Ticket insurance',
       price_including_service_fee: 'The price includes a service fee of {{fee}}.',
       price_including_service_fee_percentage:
         'The price includes a service fee of {{percentage}} of the total amount.',
@@ -48,6 +53,12 @@ const en = {
       original_price: 'Original price',
       ticket: 'Ticket',
       category: 'Category',
+      sms_notification: 'SMS notification',
+      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.',
@@ -56,6 +67,9 @@ const en = {
       invalid_date: 'Date is not valid.',
       terms_and_conditions: 'You must agree to the terms and conditions.',
       promo_code_invalid: 'Promo code is not valid.',
+      promo_code_applied: 'This promo code has already been applied.',
+      promo_code_cant_combine: 'This promo code cannot be combined with other codes.',
+      min_purchase_not_met: 'Minimum purchase amount not met: ',
       count_tickets_or_products: 'You must select at least 1 ticket or product.',
     },
   },
@@ -97,9 +111,43 @@ const en = {
         7: {
           title: 'Associated events',
         },
+        8: {
+          title: 'Additional services',
+          additional_info: 'More information about services',
+        },
       },
       terms_and_conditions:
-        'By submitting the order, I agree to the <0>Terms and Conditions</0> of {{termsAndConditionsCompanies}} and acknowledge the <1>Privacy Policy</1>.',
+        'I agree with the <0>Terms and Conditions</0> {{termsAndConditionsCompanies}} and the <1>Privacy Policy</1>.',
+      insurance: {
+        label: 'Ticket insurance',
+        per_ticket: 'pc',
+        modal: {
+          title: 'Ticket Insurance',
+          description:
+            'Ticket insurance provides you with protection in case you cannot attend the event due to illness, injury, or other unforeseen circumstances.',
+          coverage:
+            'Insurance covers: illness, injury, sudden hospitalization, quarantine, or other unforeseen events that prevent you from attending the event.',
+          price: 'Insurance price',
+        },
+      },
+      sms_notification: {
+        label: 'SMS event reminder',
+        modal: {
+          description:
+            "Event reminder the day before: SMS will notify you about the upcoming event so you don't forget and have time to prepare.",
+          price: 'SMS event reminder price',
+        },
+      },
+      merchandise: {
+        show_sizes: 'Show sizes',
+        show_added: 'Show added',
+      },
+      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:
@@ -134,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

@@ -7,13 +7,17 @@ const es = {
   add: 'Añadir',
   confirm: 'Confirmar',
   cancel: 'Cancelar',
+  close: 'Cerrar',
+  remove: 'Eliminar',
   pay: 'Pagar',
   change: 'Cambiar',
+  free: 'Gratis',
   back_to_tickets: 'Volver a las entradas',
   unselected: 'No seleccionado',
   go_home: 'Ir a la página principal',
   apple_wallet: 'Descargar en Apple Wallet',
   google_wallet: 'Descargar en Google Wallet',
+  more_info: 'Más información',
   shipping_method: {
     types: {
       PACKETA: 'Packeta',
@@ -41,6 +45,7 @@ const es = {
       with_fee: 'incl. tarifa de servicio',
       service_fee: 'Tarifa de servicio',
       shipping_fee: 'Envío',
+      ticket_insurance: 'Seguro de entrada',
       price_including_service_fee: 'El precio incluye una tarifa de servicio de {{fee}}.',
       price_including_service_fee_percentage:
         'El precio incluye una tarifa de servicio del {{percentage}} del importe total.',
@@ -48,6 +53,12 @@ const es = {
       original_price: 'Precio original',
       ticket: 'Entrada',
       category: 'Categoría',
+      sms_notification: 'Notificación SMS',
+      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.',
@@ -56,6 +67,9 @@ const es = {
       invalid_date: 'La fecha no es válida.',
       terms_and_conditions: 'Debes aceptar los términos y condiciones.',
       promo_code_invalid: 'El código promocional no es válido.',
+      promo_code_applied: 'Este código promocional ya ha sido aplicado.',
+      promo_code_cant_combine: 'Este código promocional no se puede combinar con otros códigos.',
+      min_purchase_not_met: 'No se alcanzó el monto mínimo de compra: ',
       count_tickets_or_products: 'Debes seleccionar al menos 1 entrada o producto.',
     },
   },
@@ -97,9 +111,43 @@ const es = {
         7: {
           title: 'Eventos asociados',
         },
+        8: {
+          title: 'Servicios adicionales',
+          additional_info: 'Más información sobre los servicios',
+        },
       },
       terms_and_conditions:
-        'Al enviar el pedido, acepto los <0>Términos y Condiciones</0> de {{termsAndConditionsCompanies}} y reconozco la <1>Política de Privacidad</1>.',
+        'Estoy de acuerdo con los <0>Términos y Condiciones</0> de {{termsAndConditionsCompanies}} y la <1>Política de Privacidad</1>.',
+      insurance: {
+        label: 'Seguro de entrada',
+        per_ticket: 'pc',
+        modal: {
+          title: 'Seguro de entrada',
+          description:
+            'El seguro de entradas te ofrece protección en caso de que no puedas asistir al evento debido a enfermedad, lesión u otras circunstancias imprevistas.',
+          coverage:
+            'El seguro cubre: enfermedad, lesión, hospitalización repentina, cuarentena u otros acontecimientos imprevistos que te impidan asistir al evento.',
+          price: 'Precio del seguro',
+        },
+      },
+      sms_notification: {
+        label: 'Recordatorio del evento por SMS',
+        modal: {
+          description:
+            'Recordatorio del evento el día anterior: el SMS te avisará sobre el evento próximo para que no lo olvides y tengas tiempo de prepararte.',
+          price: 'Precio del recordatorio por SMS del evento',
+        },
+      },
+      merchandise: {
+        show_sizes: 'Mostrar tallas',
+        show_added: 'Mostrar añadidos',
+      },
+      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:
@@ -135,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',
     },
   },
 };