@eventlook/sdk 1.4.46-beta.7 → 1.4.46

package/src/form/product/ProductVariantsDialog.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  Box,
+  Badge,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
+  IconButton,
   Stack,
   Typography,
 } from '@mui/material';
@@ -16,16 +17,16 @@ 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: (variants: IEventProductForm[]) => void;
+  callback: (variant: IEventProductForm) => void;
   onClose?: () => void;
   selectedQuantityByVariant?: Record<number, number>;
   isOnlyMerchandise?: boolean;
-  canAddOnlyOneAtATime?: boolean;
 }
 
 const ProductVariantsDialog: React.FC<Props> = ({
@@ -36,11 +37,13 @@ const ProductVariantsDialog: React.FC<Props> = ({
   selectedQuantityByVariant,
   isOnlyMerchandise,
   eventId,
-  canAddOnlyOneAtATime,
 }) => {
   const { t, lang, options } = useGlobal();
   const { showSnackbar } = useGlobal();
-  const [draftQuantities, setDraftQuantities] = useState<Record<number, number>>({});
+  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: [] });
 
@@ -53,41 +56,43 @@ const ProductVariantsDialog: React.FC<Props> = ({
   }, [openDialog]);
 
   useEffect(() => {
-    if (openDialog) {
-      setDraftQuantities(canAddOnlyOneAtATime ? {} : (selectedQuantityByVariant ?? {}));
+    if (isVariantClicked) {
+      setVariantQuantity(
+        selectedQuantityByVariant &&
+          selectedVariant &&
+          selectedQuantityByVariant[selectedVariant.eventProductVariantId] !== undefined
+          ? selectedQuantityByVariant[selectedVariant.eventProductVariantId]
+          : 1
+      );
+      setIsVariantClicked(false);
     }
-  }, [openDialog, selectedQuantityByVariant, canAddOnlyOneAtATime]);
+  }, [selectedVariant, isVariantClicked]);
 
-  const handleOnAdd = () => {
-    const selectedVariants = eventProduct.eventProductVariants
-      .map((variant) => {
-        const quantity = draftQuantities[variant.id] ?? 0;
-        const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;
-        if (quantity <= 0 && selectedQty <= 0) return null;
-        return {
-          eventProductVariantId: variant.id,
-          productVariantId: variant.productVariant.id,
-          quantity,
-          price: variant.priceWithVat,
-          excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(
-            (method) => method.id
-          ),
-        } as IEventProductForm;
-      })
-      .filter((variant): variant is IEventProductForm => Boolean(variant));
+  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);
+  };
 
-    if (selectedVariants.length === 0) {
+  const handleOnAdd = () => {
+    if (!selectedVariant) {
       showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });
       return;
     }
-
-    callback(selectedVariants);
-    setDraftQuantities({});
+    callback(selectedVariant);
+    setSelectedVariant(null);
     onClose?.();
   };
 
-  const getUsedCount = (variant: IEventProductVariant) => {
+  const isVariantDisabled = (variant: IEventProductVariant) => {
     let countUsed = 0;
+    let selectedVariantQuantity = 0;
 
     for (const product of products) {
       if (product.productVariantId === variant.productVariant.id) {
@@ -100,104 +105,70 @@ const ProductVariantsDialog: React.FC<Props> = ({
         for (const product of ticket.products) {
           if (product.productVariantId === variant.productVariant.id) {
             countUsed += product.quantity;
+            selectedVariantQuantity = product.quantity;
           }
         }
       }
     }
-    return countUsed;
-  };
 
-  const getMaxAvailable = (variant: IEventProductVariant) => {
-    if (!variant.productVariant.quantity) return Number.POSITIVE_INFINITY;
-    return variant.productVariant.quantity - variant.productVariant.sold - getUsedCount(variant);
+    return (
+      (variant.productVariant.quantity &&
+        countUsed + variant.productVariant.sold >= variant.productVariant.quantity) ||
+      selectedVariantQuantity >= 10
+    );
   };
 
-  const isVariantDisabled = (variant: IEventProductVariant) => {
-    if (!variant.productVariant.quantity) return false;
-    return getMaxAvailable(variant) <= 0;
-  };
+  const isVariantSoldOut = () => {
+    const variant = eventProduct.eventProductVariants.find(
+      (product) => product.id === selectedVariant?.eventProductVariantId
+    );
+    let countUsed = variantQuantity;
 
-  const handleAddQuantity = (variant: IEventProductVariant) => {
-    setDraftQuantities((prev) => {
-      const current = prev[variant.id] ?? 0;
-      const next = current + 1;
-      const maxAvailable = getMaxAvailable(variant);
-      if (next > 10 || next > maxAvailable) return prev;
-      if (canAddOnlyOneAtATime) {
-        // Only allow one variant to be selected
-        return { [variant.id]: 1 };
+    for (const ticket of tickets) {
+      if (ticket.products) {
+        for (const product of ticket.products) {
+          if (product.productVariantId === variant?.productVariant.id) {
+            countUsed += product.quantity;
+          }
+        }
       }
-      return { ...prev, [variant.id]: next };
-    });
-  };
+    }
 
-  const handleRemoveQuantity = (variant: IEventProductVariant) => {
-    setDraftQuantities((prev) => {
-      const current = prev[variant.id] ?? 0;
-      const next = current - 1;
-      if (next <= 0) {
-        const rest = { ...prev };
-        delete rest[variant.id];
-        return rest;
-      }
-      if (canAddOnlyOneAtATime) {
-        // Remove the only variant
-        return {};
+    if (variant && variant.productVariant.quantity) {
+      if (
+        variant.productVariant.sold + countUsed >= variant.productVariant.quantity ||
+        variantQuantity >= 10
+      ) {
+        return true;
       }
-      return { ...prev, [variant.id]: next };
-    });
+    }
+    return false;
   };
 
-  const handleRemoveProduct = () => {
-    const variantsToRemove = eventProduct.eventProductVariants
-      .filter((variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0)
-      .map(
-        (variant) =>
-          ({
-            eventProductVariantId: variant.id,
-            productVariantId: variant.productVariant.id,
-            quantity: 0,
-            price: variant.priceWithVat,
-            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(
-              (method) => method.id
-            ),
-          }) as IEventProductForm
-      );
+  const handleAddQuantity = () => {
+    setVariantQuantity(variantQuantity + 1);
+    setSelectedVariant((prevState) => {
+      if (!prevState) return null;
+      return {
+        ...prevState,
+        quantity: variantQuantity + 1,
+      };
+    });
+  };
 
-    if (variantsToRemove.length === 0) {
-      return;
+  const handleRemoveQuantity = () => {
+    if (variantQuantity > 0) {
+      setVariantQuantity(variantQuantity - 1);
     }
-
-    callback(variantsToRemove);
-    setDraftQuantities({});
-    onClose?.();
+    setSelectedVariant((prevState) => {
+      if (!prevState) return null;
+      return {
+        ...prevState,
+        quantity: variantQuantity - 1,
+      };
+    });
   };
 
-  const hasSelectedVariants = eventProduct.eventProductVariants.some(
-    (variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0
-  );
-
-  const variantsById = useMemo(
-    () => new Map(eventProduct.eventProductVariants.map((variant) => [variant.id, variant])),
-    [eventProduct.eventProductVariants]
-  );
-
-  const totalDraftPrice = useMemo(
-    () =>
-      Object.entries(draftQuantities).reduce((total, [variantId, qty]) => {
-        const variant = variantsById.get(Number(variantId));
-        if (!variant) return total;
-        return total + variant.priceWithVat * qty;
-      }, 0),
-    [draftQuantities, variantsById]
-  );
-
-  const hasDraftSelection = useMemo(
-    () =>
-      eventProduct.eventProductVariants.some((variant) => (draftQuantities[variant.id] ?? 0) > 0),
-    [eventProduct.eventProductVariants, draftQuantities]
-  );
-
   return (
     <Dialog
       open={openDialog}
@@ -216,19 +187,16 @@ const ProductVariantsDialog: React.FC<Props> = ({
         },
       }}
     >
-      <DialogTitle
-        sx={{ textAlign: 'center', fontWeight: 700, fontSize: { xs: '1.5rem', sm: '1.5rem' } }}
-      >
-        {eventProduct.product.name}
-      </DialogTitle>
-      <DialogContent sx={{ pb: 0 }}>
+      <DialogTitle />
+      <DialogContent>
         <Stack spacing={1}>
           <Image
             src={eventProduct.product.previewImage.url}
             alt={eventProduct.product.name}
-            ratio="16/9"
-            sx={{ borderRadius: 1 }}
+            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>
@@ -239,145 +207,64 @@ const ProductVariantsDialog: React.FC<Props> = ({
         </Stack>
       </DialogContent>
       <DialogActions sx={{ justifyContent: 'flex-start' }}>
-        <Stack spacing={1} width="100%">
-          <Stack spacing={1}>
-            {eventProduct.eventProductVariants.map((variant) => {
-              const draftQty = draftQuantities[variant.id] ?? 0;
-              const maxAvailable = getMaxAvailable(variant);
-              const isAddDisabled = isVariantDisabled(variant) || maxAvailable <= 0;
-              const isAnotherSelected =
-                canAddOnlyOneAtATime &&
-                Object.keys(draftQuantities).length > 0 &&
-                !draftQuantities[variant.id];
-              return (
-                <Stack
-                  key={variant.id}
-                  direction="row"
-                  spacing={1}
-                  alignItems="center"
-                  width="100%"
+        <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' }}
                 >
-                  <Box
-                    sx={{
-                      minWidth: 64,
-                      maxWidth: 64,
-                      height: 36,
-                      borderRadius: 1,
-                      fontWeight: 700,
-                      border: 1,
-                      borderColor: 'divider',
-                      bgcolor: 'background.paper',
-                      color: 'text.primary',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    {variant.productVariant.value}
-                  </Box>
-                  {draftQty > 0 ? (
-                    <Box
-                      sx={{
-                        flex: 1,
-                        display: 'grid',
-                        gridTemplateColumns: canAddOnlyOneAtATime
-                          ? 'repeat(2, minmax(0, 1fr))'
-                          : 'repeat(3, minmax(0, 1fr))',
-                        gap: 1,
-                        alignItems: 'center',
-                      }}
-                    >
-                      <Button
-                        variant="outlined"
-                        onClick={() => handleRemoveQuantity(variant)}
-                        disabled={draftQty < 1}
-                        sx={{
-                          minWidth: 0,
-                          height: 36,
-                          borderRadius: 1,
-                          fontWeight: 700,
-                          borderColor: 'grey.300',
-                          color: 'text.primary',
-                        }}
-                      >
-                        -
-                      </Button>
-                      <Typography
-                        sx={{
-                          minWidth: 0,
-                          height: 36,
-                          borderRadius: 1,
-                          border: 1,
-                          borderColor: 'divider',
-                          boxSizing: 'border-box',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          textAlign: 'center',
-                          fontWeight: 700,
-                          color: 'text.primary',
-                        }}
-                      >
-                        {draftQty}
-                      </Typography>
-                      {!canAddOnlyOneAtATime && (
-                        <Button
-                          variant="contained"
-                          onClick={() => handleAddQuantity(variant)}
-                          disabled={draftQty >= 10 || draftQty >= maxAvailable}
-                          sx={{ minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 }}
-                        >
-                          +
-                        </Button>
-                      )}
-                    </Box>
-                  ) : (
-                    <Button
-                      variant="contained"
-                      onClick={() => handleAddQuantity(variant)}
-                      disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}
-                      sx={{
-                        flex: 1,
-                        height: 36,
-                        borderRadius: 1,
-                        fontWeight: 700,
-                        textTransform: 'none',
-                      }}
-                    >
-                      {t('add')}
-                    </Button>
-                  )}
-
-                  <Typography variant="body1">
-                    {variant.priceWithVat > 0
-                      ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
-                      : t('free')}
-                  </Typography>
-                </Stack>
-              );
-            })}
+                  {variant.productVariant.value}
+                </Badge>
+              </Button>
+            ))}
           </Stack>
-          <Stack
-            direction="row"
-            spacing={1}
-            justifyContent="space-between"
-            alignItems="center"
-            width="100%"
-          >
-            <Typography variant="body1">{t('form.labels.total')}</Typography>
-            <Typography variant="body1" fontWeight={600}>
-              {fCurrency(totalDraftPrice, lang, eventProduct.product.currency)}
+          <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%">
-            {hasSelectedVariants && !canAddOnlyOneAtATime && (
-              <Button variant="outlined" color="error" onClick={handleRemoveProduct}>
-                {t('remove')}
-              </Button>
-            )}
             {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}
-            <Button variant="contained" onClick={handleOnAdd} disabled={!hasDraftSelection}>
-              {t('confirm')}
+            <Button variant="contained" onClick={handleOnAdd} disabled={!selectedVariant}>
+              {t('add')}
             </Button>
           </Stack>
         </Stack>

package/src/locales/cs.tsx

@@ -7,8 +7,6 @@ const cs = {
   add: 'Přidat',
   confirm: 'Potvrdit',
   cancel: 'Zrušit',
-  close: 'Zavřít',
-  remove: 'Odstranit',
   pay: 'Zaplatit',
   change: 'Změnit',
   free: 'Zdarma',
@@ -41,7 +39,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',
@@ -55,8 +53,6 @@ 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é.',
@@ -109,13 +105,9 @@ 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:
-        'Souhlasím s <0>Obchodními podmínkami</0> {{termsAndConditionsCompanies}} a <1>Zásady soukromí</1>.',
+        '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>.',
       insurance: {
         label: 'Pojištění vstupenek',
         per_ticket: 'ks',
@@ -135,13 +127,6 @@ const cs = {
           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:

package/src/locales/en.tsx

@@ -7,8 +7,6 @@ const en = {
   add: 'Add',
   confirm: 'Confirm',
   cancel: 'Cancel',
-  close: 'Close',
-  remove: 'Remove',
   pay: 'Pay',
   change: 'Change',
   free: 'Free',
@@ -55,8 +53,6 @@ const en = {
       category: 'Category',
       sms_notification: 'SMS notification',
       open_map: 'Open map',
-      payment_overview_open: 'Open payment overview',
-      payment_overview_close: 'Close payment overview',
     },
     validation: {
       required: 'This field is required.',
@@ -109,13 +105,9 @@ const en = {
         7: {
           title: 'Associated events',
         },
-        8: {
-          title: 'EventLook services',
-          additional_info: 'More information about services',
-        },
       },
       terms_and_conditions:
-        'I agree with the <0>Terms and Conditions</0> {{termsAndConditionsCompanies}} and the <1>Privacy Policy</1>.',
+        'By submitting the order, I agree to the <0>Terms and Conditions</0> of {{termsAndConditionsCompanies}} and acknowledge the <1>Privacy Policy</1>.',
       insurance: {
         label: 'Ticket insurance',
         per_ticket: 'pc',
@@ -132,17 +124,10 @@ const en = {
         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.",
+            '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',
-      },
       order_success: {
         title: 'Tickets have been successfully reserved. Now you just need to pay.',
         description:

package/src/locales/es.tsx

@@ -7,8 +7,6 @@ const es = {
   add: 'Añadir',
   confirm: 'Confirmar',
   cancel: 'Cancelar',
-  close: 'Cerrar',
-  remove: 'Eliminar',
   pay: 'Pagar',
   change: 'Cambiar',
   free: 'Gratis',
@@ -55,8 +53,6 @@ const es = {
       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',
     },
     validation: {
       required: 'Este campo es obligatorio.',
@@ -109,13 +105,9 @@ const es = {
         7: {
           title: 'Eventos asociados',
         },
-        8: {
-          title: 'EventLook servicios',
-          additional_info: 'Más información sobre los servicios',
-        },
       },
       terms_and_conditions:
-        'Estoy de acuerdo con los <0>Términos y Condiciones</0> de {{termsAndConditionsCompanies}} y la <1>Política de Privacidad</1>.',
+        'Al enviar el pedido, acepto los <0>Términos y Condiciones</0> de {{termsAndConditionsCompanies}} y reconozco la <1>Política de Privacidad</1>.',
       insurance: {
         label: 'Seguro de entrada',
         per_ticket: 'pc',
@@ -136,13 +128,6 @@ const es = {
           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',
-      },
       order_success: {
         title: 'Las entradas han sido reservadas con éxito. Ahora solo tienes que pagar.',
         description: