@eventlook/sdk 1.4.42 → 1.4.44

package/src/form/PaymentOverviewBox.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Iconify, Image, TextIconLabel } from '@components';
 import { Box, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
 import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox.tsx';
@@ -16,16 +16,14 @@ import FeeBox from '@form/payment/FeeBox';
 import { IPromoCode } from '@utils/types/promo-code.type';
 import { fCurrency } from '@utils/formatNumber';
 import { IEventProductForm, ISelectedProductVariant } from '@utils/types/product.type';
-import { isEqual } from 'lodash';
 import calendarIcon from '@iconify/icons-carbon/calendar';
 import userIcon from '@iconify/icons-carbon/user';
 import { EventType } from '@utils/data/event';
 import dayjs from 'dayjs';
 import useGlobal from '@hooks/useGlobal.ts';
-import { getCreateShoppingCart, recalculateCart } from '@modules/shopping-cart.ts';
-import { ICalculateShoppingCartDto, IShoppingCart } from '@utils/types/shopping-cart.type.ts';
+import { calculateCart, getCart } from '@modules/shopping-cart.ts';
+import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shopping-cart.type.ts';
 import { PromoCodeTypes } from '@utils/data/promo-code.ts';
-import { useFirstRender } from '@hooks/useFirstRender.ts';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import useDebounce from '@hooks/useDebounce';
 
@@ -35,9 +33,6 @@ interface Props {
 
 const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
   const { t, lang, options } = useGlobal();
-  const firstRender = useFirstRender();
-  const secondRender = useRef(false);
-  const lastCartRef = useRef<IShoppingCart | null>(null);
   const xs = useResponsive('only', 'xs');
   const md = useResponsive('only', 'md');
   const isMobile = useResponsive('down', 'md');
@@ -139,44 +134,45 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
 
   const shoppingCartBody = useMemo<ICalculateShoppingCartDto>(
     () => ({
-      uuid: uuid,
+      uuid,
       eventId: event.id,
-      tickets: Object.entries(values.tickets).reduce(
-        (acc, [eventId, items]) => {
-          acc[Number(eventId)] = items
-            .filter((item) => !!item.quantity && !!item.releaseId)
+      tickets: Object.fromEntries(
+        Object.entries(values.tickets).map(([id, items]) => [
+          id,
+          items
+            .filter((item) => item.quantity && item.releaseId)
             .map((item) => ({
-              releaseId: Number(item.releaseId),
-              quantity: Number(item.quantity),
-              price: Number(item.price),
-              itemName: item.itemName,
-              products: item.products,
-              extraFields: item.extraFields,
-              eventTimeslotId: Number(eventTimeslotId) || null,
-            }));
-          return acc;
-        },
-        {} as Record<number, ITicketFormTicket[]>
+              ...item,
+              eventTimeslotId: eventTimeslotId ?? null,
+            })),
+        ])
       ),
-      products: Object.entries(values.products).reduce(
-        (acc, [eventId, items]) => {
-          acc[Number(eventId)] = items.map((item) => ({
-            eventProductVariantId: item.eventProductVariantId,
-            productVariantId: item.productVariantId,
-            quantity: item.quantity,
-            price: item.price,
-            excludedShippingMethodIds: item.excludedShippingMethodIds,
-          }));
-          return acc;
-        },
-        {} as Record<number, IEventProductForm[]>
+      products: Object.fromEntries(
+        Object.entries(values.products).map(([id, items]) => [
+          id,
+          items.map(
+            ({
+              eventProductVariantId,
+              productVariantId,
+              quantity,
+              price,
+              excludedShippingMethodIds,
+            }) => ({
+              eventProductVariantId,
+              productVariantId,
+              quantity,
+              price,
+              excludedShippingMethodIds,
+            })
+          ),
+        ])
       ),
       shipping: {
-        shippingMethodId: shipping?.shippingMethodId ? Number(shipping.shippingMethodId) : null,
-        branchId: shipping?.branchId,
-        price: shipping?.price ? Number(shipping.price) : 0,
+        shippingMethodId: shipping?.shippingMethodId ?? null,
+        branchId: shipping?.branchId ?? null,
+        price: shipping?.price ?? 0,
       },
-      promoCodeIds: promoCodes?.map((p) => p.id) || null,
+      promoCodeIds: promoCodes?.map((p) => p.id) ?? null,
       language: lang,
       firstName,
       lastName,
@@ -184,8 +180,8 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
       phone,
       birthdate,
       gender,
-      paymentMethodId: paymentMethodId === null ? null : Number(paymentMethodId),
-      paymentMethodOptionId: paymentMethodOptionId === null ? null : Number(paymentMethodOptionId),
+      paymentMethodId: paymentMethodId ? Number(paymentMethodId) : null,
+      paymentMethodOptionId: paymentMethodOptionId ? Number(paymentMethodOptionId) : null,
       ticketInsurance,
       smsNotification,
     }),
@@ -194,9 +190,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
       event.id,
       tickets,
       products,
-      shipping.shippingMethodId,
-      shipping.branchId,
-      shipping.price,
+      shipping,
       promoCodes,
       lang,
       firstName,
@@ -215,13 +209,13 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
 
   const debouncedShoppingCartBody = useDebounce(shoppingCartBody, 300);
 
-  const setShoppingCartValues = (data: IShoppingCart, recalculate = false) => {
+  const setShoppingCartValues = (data: IShoppingCartDto, recalculate = false) => {
     if (!recalculate) {
       const hasTickets =
         !!data.tickets && typeof data.tickets === 'object' && Object.keys(data.tickets).length > 0;
 
       if (hasTickets) {
-        setValue('tickets', { ...tickets, ...data.tickets });
+        setValue('tickets', data.tickets);
       }
 
       const hasProducts =
@@ -230,7 +224,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         Object.keys(data.products).length > 0;
 
       if (hasProducts) {
-        setValue('products', { ...products, ...data.products });
+        setValue('products', data.products);
       }
 
       setValue('promoCodes', data.promoCodes || []);
@@ -259,11 +253,11 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     setValue('totalFee', feeTotal);
 
     setShippingFee(data.shippingFee);
-    setValue('ticketInsurance', data.ticketInsurance || false);
-    setValue('ticketInsurancePrice', data.ticketInsurancePrice || 0);
-    setValue('ticketInsurancePricePerUnit', data.ticketInsurancePricePerUnit || 0);
-    setValue('smsNotification', data.smsNotification || false);
-    setValue('smsNotificationPrice', data.smsNotificationPrice || 0);
+    setValue('ticketInsurance', data.ticketInsurance.enabled);
+    setValue('ticketInsurancePrice', data.ticketInsurance.price);
+    setValue('ticketInsurancePricePerUnit', data.ticketInsurance.pricePerUnit);
+    setValue('smsNotification', data.smsNotification.enabled);
+    setValue('smsNotificationPrice', data.smsNotification.price);
   };
 
   const totalItemCount = useMemo(() => {
@@ -335,30 +329,16 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     return discount;
   }, [promoCodes, flatTickets, flatProducts]);
 
-  useEffect(() => {
-    if (!secondRender.current) {
-      secondRender.current = true;
-    } else {
-      return;
-    }
-
-    (async () => {
-      const existing = localStorage.getItem('cartToken');
-      const res = await getCreateShoppingCart(existing, event.id);
-      const data: IShoppingCart = res.data;
-
-      localStorage.setItem('cartToken', data.uuid);
-      setShoppingCartValues(data);
-    })();
+  const hasOrderId = useMemo(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has('id');
   }, []);
 
   useEffect(() => {
-    if (firstRender) {
-      return;
+    if (!hasOrderId) {
+      recalculateItems(debouncedShoppingCartBody);
     }
-
-    recalculateItems(debouncedShoppingCartBody);
-  }, [debouncedShoppingCartBody]);
+  }, [debouncedShoppingCartBody, hasOrderId]);
 
   /** Iframe code **/
   useEffect(() => {
@@ -378,27 +358,30 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
   };
   /** End Iframe code **/
 
-  const updateCartIfChanged = (newCart: IShoppingCart, recalculate = false) => {
-    if (isEqual(lastCartRef.current, newCart)) {
-      return;
-    }
-
-    lastCartRef.current = newCart;
-    setShoppingCartValues(newCart, recalculate);
-  };
-
   const recalculateItems = useCallback(async (body: ICalculateShoppingCartDto) => {
-    const { uuid } = body;
-    if (!uuid) return;
     try {
-      const response = await recalculateCart(body);
-      const cart = response?.data?.data;
+      const isInitial = !body.uuid;
+
+      let response: any;
+      if (isInitial) {
+        const existing = localStorage.getItem('cartToken');
+        const storedUuid =
+          existing && existing !== 'undefined' && existing !== 'null' ? existing : null;
+        response = await getCart(body.eventId, storedUuid);
+      } else {
+        response = await calculateCart(body);
+      }
+
+      const cart = response?.data;
 
       if (cart) {
-        updateCartIfChanged(cart, true);
+        if (cart.uuid) {
+          localStorage.setItem('cartToken', cart.uuid);
+        }
+        setShoppingCartValues(cart, !isInitial);
       }
     } catch (err) {
-      console.error('Error recalculating cart:', err);
+      console.error('Error calculating cart:', err);
     }
   }, []);
 

package/src/form/TicketForm.tsx

@@ -220,7 +220,6 @@ const TicketForm: React.FC<Props> = ({
       smsNotification: false,
       smsNotificationPrice: 0,
       iframeCampaignId: undefined,
-      promoCode: null,
       promoCodes: [],
       products: {},
       shipping: {
@@ -327,6 +326,7 @@ const TicketForm: React.FC<Props> = ({
     } else {
       try {
         const data: ITicketBody = cloneObject(values);
+        data.paymentMethodId = Number(values.paymentMethodId);
         data.promoCodeIds = values.promoCodes?.map((item) => item.id);
         const urlParams = new URLSearchParams(window.location.search);
         const iframeCallback = urlParams.get('callback');
@@ -343,14 +343,14 @@ const TicketForm: React.FC<Props> = ({
                 products: item.products,
                 extraFields: item.extraFields,
                 eventTimeslotId: item.eventTimeslotId,
-                locationId: item.location?.id,
-                locationDescription: item.location?.locationDescription,
+                location: item.location,
               }));
             return acc;
           },
           {} as Record<number, ITicketFormTicket[]>
         );
         const { data: orderData } = await postOrder(data);
+        localStorage.removeItem('cartToken');
         const items = [
           ...orderData.tickets.map((ticket) => ({
             item_id: ticket.number,

package/src/form/TicketSelection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import {
   Box,
@@ -39,6 +39,7 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   }) as ITicketFormTicket[];
   const eventTimeslotId = watch('eventTimeslotId');
   const [soldOutReleaseCategoryNames, setSoldOutReleaseCategoryNames] = useState<string[]>([]);
+  const isProcessingRef = useRef(false);
   const { data: activeReleases, mutate } = useEventActiveReleases(
     event.id,
     false,
@@ -48,8 +49,8 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   const showLoading = !activeReleases && event.type !== EventType.RECURRING;
 
   useEffect(() => {
-    selectedTickets();
-  }, [tickets]);
+    if (!isProcessingRef.current) selectedTickets();
+  }, [tickets, activeReleases]);
 
   const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
 
@@ -139,7 +140,7 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
       soldOutReleaseCategories?.map((item) => item.releaseCategoryName) || []
     );
 
-    if (
+    const shouldAddRow =
       (soldOutReleaseCategories &&
         selectedReleaseIsSoldOut(releases) &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
@@ -149,8 +150,15 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
         activeReleases?.length > tickets.length &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
         !allFilled.length) ||
-      (tickets.length < countReleaseCategories() && !allFilled.length)
-    ) {
+      (tickets.length < countReleaseCategories() && !allFilled.length);
+
+    const shouldRemoveEmptyRows =
+      allFilled.length > 0 &&
+      tickets.length > 1 &&
+      (!soldOutReleaseCategories?.length || !selectedReleaseIsSoldOut(releases));
+
+    if (shouldAddRow) {
+      isProcessingRef.current = true;
       setValue(`tickets.${event.id}`, [
         ...tickets,
         {
@@ -162,6 +170,14 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
           extraFields: [],
         },
       ]);
+      setTimeout(() => (isProcessingRef.current = false), 0);
+    } else if (shouldRemoveEmptyRows) {
+      const filledTickets = tickets.filter((item) => item.releaseId && item.quantity);
+      if (filledTickets.length < tickets.length) {
+        isProcessingRef.current = true;
+        setValue(`tickets.${event.id}`, filledTickets);
+        setTimeout(() => (isProcessingRef.current = false), 0);
+      }
     }
   };
 

package/src/form/TicketWithMerchandiseSelection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
@@ -22,6 +22,7 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
   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,
@@ -29,8 +30,8 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
   );
 
   useEffect(() => {
-    selectedTickets();
-  }, [tickets]);
+    if (!isProcessingRef.current) selectedTickets();
+  }, [tickets, activeReleases]);
 
   const countReleaseCategories = (): number => {
     const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
@@ -64,7 +65,30 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
       )
     );
 
-    if (
+    // Unlock next releases when current release is sold out
+    if (soldOutReleaseCategories?.length && activeReleases) {
+      let hasChanges = false;
+      const updatedReleases = activeReleases.map((release) => {
+        // For each sold-out release, find and unlock the next one
+        const soldOutRelease = soldOutReleaseCategories.find(
+          (soldOut) =>
+            soldOut.releaseCategoryName === release.releaseCategoryName &&
+            soldOut.order === release.order - 1 &&
+            release.locked
+        );
+        if (soldOutRelease) {
+          hasChanges = true;
+          return { ...release, locked: false };
+        }
+        return release;
+      });
+
+      if (hasChanges) {
+        await mutate(updatedReleases, false);
+      }
+    }
+
+    const shouldAddRow =
       (soldOutReleaseCategories &&
         selectedReleaseIsSoldOut(releases) &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
@@ -74,8 +98,15 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
         activeReleases?.length > tickets.length &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
         !allFilled.length) ||
-      (tickets.length < countReleaseCategories() && !allFilled.length)
-    ) {
+      (tickets.length < countReleaseCategories() && !allFilled.length);
+
+    const shouldRemoveEmptyRows =
+      allFilled.length > 0 &&
+      tickets.length > 1 &&
+      (!soldOutReleaseCategories?.length || !selectedReleaseIsSoldOut(releases));
+
+    if (shouldAddRow) {
+      isProcessingRef.current = true;
       setValue(`tickets.${event.id}`, [
         ...tickets,
         {
@@ -87,6 +118,14 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
           extraFields: [],
         },
       ]);
+      setTimeout(() => (isProcessingRef.current = false), 0);
+    } else if (shouldRemoveEmptyRows) {
+      const filledTickets = tickets.filter((item) => item.releaseId && item.quantity);
+      if (filledTickets.length < tickets.length) {
+        isProcessingRef.current = true;
+        setValue(`tickets.${event.id}`, filledTickets);
+        setTimeout(() => (isProcessingRef.current = false), 0);
+      }
     }
   };
 

package/src/form/payment/FeeBox.tsx

@@ -1,7 +1,6 @@
 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 { fCurrency } from '@utils/formatNumber';
 import { Iconify } from '@components/iconify';
 import { IEvent } from '@utils/types/event.type';
 import useResponsive from '@hooks/useResponsive';
@@ -23,7 +22,7 @@ const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
 
   return (
     <Box mb={1} textAlign={isRight ? 'right' : undefined}>
-      {values.promoCode && (
+      {values.promoCodes.length > 0 && (
         <Stack
           direction="row"
           justifyContent={isRight ? 'flex-end' : 'space-between'}

package/src/locales/cs.tsx

@@ -61,6 +61,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.',
     },
   },

package/src/locales/en.tsx

@@ -61,6 +61,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.',
     },
   },

package/src/locales/es.tsx

@@ -61,6 +61,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.',
     },
   },

package/src/locales/pl.tsx

@@ -61,6 +61,9 @@ const pl = {
       invalid_date: 'Data jest nieprawidłowa.',
       terms_and_conditions: 'Musisz zaakceptować regulamin.',
       promo_code_invalid: 'Kod promocyjny jest nieprawidłowy.',
+      promo_code_applied: 'Ten kod promocyjny został już zastosowany.',
+      promo_code_cant_combine: 'Ten kod promocyjny nie może być łączony z innymi kodami.',
+      min_purchase_not_met: 'Minimalna kwota zakupu nie została osiągnięta: ',
       count_tickets_or_products: 'Musisz wybrać co najmniej 1 bilet lub produkt.',
     },
   },

package/src/locales/sk.tsx

@@ -61,6 +61,9 @@ const sk = {
       invalid_date: 'Dátum nie je platný.',
       terms_and_conditions: 'Musíte súhlasiť s podmienkami.',
       promo_code_invalid: 'Promo kód nie je platný.',
+      promo_code_applied: 'Tento promo kód už bol použitý.',
+      promo_code_cant_combine: 'Tento promo kód nemožno kombinovať s inými kódmi.',
+      min_purchase_not_met: 'Minimálna suma nákupu nebola dosiahnutá: ',
       count_tickets_or_products: 'Musíte vybrať aspoň 1 vstupenku alebo produkt.',
     },
   },

package/src/locales/uk.tsx

@@ -61,6 +61,9 @@ const uk = {
       invalid_date: 'Дата недійсна.',
       terms_and_conditions: 'Ви повинні погодитися з умовами.',
       promo_code_invalid: 'Промокод недійсний.',
+      promo_code_applied: 'Цей промокод вже було застосовано.',
+      promo_code_cant_combine: 'Цей промокод не можна комбінувати з іншими кодами.',
+      min_purchase_not_met: 'Мінімальну суму покупки не досягнуто: ',
       count_tickets_or_products: 'Виберіть хоча б 1 квиток або продукт.',
     },
   },

package/src/modules/shopping-cart.ts

@@ -1,16 +1,19 @@
 import api from '@utils/axios';
 import { IResponse } from '@utils/types/global.type.ts';
-import { ICalculateShoppingCartDto, IShoppingCart } from '@utils/types/shopping-cart.type.ts';
+import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shopping-cart.type.ts';
 
-export const getCreateShoppingCart = (uuid: string | null, eventId: number) =>
-  api
-    .post('/v1/shopping-cart', {
-      eventId,
-      uuid,
-    })
-    .then((res) => res.data.data);
+export const getCart = (
+  eventId: number,
+  uuid?: string | null
+): Promise<IResponse<IShoppingCartDto>> => {
+  const params = new URLSearchParams({ eventId: eventId.toString() });
+  if (uuid) {
+    params.append('uuid', uuid);
+  }
+  return api.get(`/v1/shopping-cart?${params.toString()}`).then((res) => res.data.data);
+};
 
-export const recalculateCart = (
+export const calculateCart = (
   data: ICalculateShoppingCartDto
-): Promise<IResponse<{ data: IShoppingCart }>> =>
-  api.post('/v1/shopping-cart/recalculate', data).then((res) => res.data);
+): Promise<IResponse<IShoppingCartDto>> =>
+  api.post('/v1/shopping-cart', data).then((res) => res.data.data);

package/src/utils/data/shopping-cart.ts

@@ -0,0 +1,5 @@
+export enum ShoppingCartStatus {
+  NEW = 'NEW',
+  ABANDONED = 'ABANDONED',
+  COMPLETED = 'COMPLETED',
+}