@eventlook/sdk 1.4.44 → 1.4.46-beta.1

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

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import {
   Box,
-  Button,
   Divider,
   Grid,
   IconButton,
@@ -18,12 +17,12 @@ 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;
@@ -93,7 +92,7 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
     const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
       const nextRelease = releases?.find(
         (item2) =>
-          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order++
+          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order + 1
       );
       const selected = tickets.find((ticket) => ticket.releaseId === item.id);
       return !!nextRelease && item.locked && !!selected && index + 1 == tickets.length;
@@ -140,6 +139,10 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
       soldOutReleaseCategories?.map((item) => item.releaseCategoryName) || []
     );
 
+    const hasSelectableRelease = activeReleases?.some(
+      (release) => !isReleaseSelected(release.id) && !release.locked
+    );
+
     const shouldAddRow =
       (soldOutReleaseCategories &&
         selectedReleaseIsSoldOut(releases) &&
@@ -155,6 +158,7 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
     const shouldRemoveEmptyRows =
       allFilled.length > 0 &&
       tickets.length > 1 &&
+      !hasSelectableRelease &&
       (!soldOutReleaseCategories?.length || !selectedReleaseIsSoldOut(releases));
 
     if (shouldAddRow) {
@@ -172,127 +176,158 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
       ]);
       setTimeout(() => (isProcessingRef.current = false), 0);
     } else if (shouldRemoveEmptyRows) {
-      const filledTickets = tickets.filter((item) => item.releaseId && item.quantity);
-      if (filledTickets.length < tickets.length) {
+      // 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}`, filledTickets);
+        setValue(`tickets.${event.id}`, nonEmptyTickets);
         setTimeout(() => (isProcessingRef.current = false), 0);
       }
     }
   };
 
   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}>
+    <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}
+      />
+      {/* {isMobile ? (
+        <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}
+        />
+      ) : (
+        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}.quantity`}
-                    value={item.quantity}
-                    label={t('form.labels.quantity')}
+                    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`, []);
+                    }}
                   >
-                    {[...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (
+                    <MenuItem key={0} value="">
+                      {t('choose')}
+                    </MenuItem>
+                    {activeReleases?.map((activeRelease) => (
                       <MenuItem
-                        key={index2}
-                        value={index2 + 1}
-                        disabled={isQuantityDisabled(index2 + 1, item.releaseId)}
+                        key={activeRelease.id}
+                        value={activeRelease.id}
+                        disabled={
+                          isReleaseSelected(activeRelease.id) ||
+                          (activeRelease.locked &&
+                            !soldOutReleaseCategoryNames.includes(
+                              activeRelease.releaseCategoryName
+                            ))
+                        }
                       >
-                        {index2 + 1}
+                        {activeRelease.releaseCategoryName} - {activeRelease.name}:{' '}
+                        {activeRelease.price === 0
+                          ? t('free')
+                          : fCurrency(activeRelease.price, lang, event.currency)}
                       </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 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>
-          </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>
-      ))}
+            {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>
+        ))
+      )} */}
       <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/tickets/TicketSelectionMobile.tsx

@@ -0,0 +1,175 @@
+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={{
+              p: 1,
+              pb: 0,
+              borderRadius: 1,
+              bgcolor: (theme) => (isLight ? theme.palette.grey[100] : theme.palette.grey[800]),
+            }}
+          >
+            <Stack spacing={0}>
+              <Box>
+                <Typography variant="subtitle1" fontWeight={600}>
+                  {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');
@@ -42,7 +39,7 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
     const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
       const nextRelease = releases?.find(
         (item2) =>
-          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order++
+          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order + 1
       );
       const selected = tickets.find((ticket) => ticket.releaseId === item.id);
       return !!nextRelease && item.locked && !!selected && index + 1 == tickets.length;
@@ -52,6 +49,8 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
 
   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 allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
@@ -88,6 +87,10 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
       }
     }
 
+    const hasSelectableRelease = activeReleases?.some(
+      (release) => !isReleaseSelected(release.id) && !release.locked
+    );
+
     const shouldAddRow =
       (soldOutReleaseCategories &&
         selectedReleaseIsSoldOut(releases) &&
@@ -103,6 +106,7 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
     const shouldRemoveEmptyRows =
       allFilled.length > 0 &&
       tickets.length > 1 &&
+      !hasSelectableRelease &&
       (!soldOutReleaseCategories?.length || !selectedReleaseIsSoldOut(releases));
 
     if (shouldAddRow) {
@@ -120,17 +124,18 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
       ]);
       setTimeout(() => (isProcessingRef.current = false), 0);
     } else if (shouldRemoveEmptyRows) {
-      const filledTickets = tickets.filter((item) => item.releaseId && item.quantity);
-      if (filledTickets.length < tickets.length) {
+      // 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}`, filledTickets);
+        setValue(`tickets.${event.id}`, nonEmptyTickets);
         setTimeout(() => (isProcessingRef.current = false), 0);
       }
     }
   };
 
   return (
-    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
+    <Stack spacing={1} direction="column">
       {!activeReleases && event.type !== EventType.RECURRING ? (
         <Skeleton
           variant="rounded"
@@ -161,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/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',
@@ -105,6 +107,10 @@ const cs = {
         7: {
           title: 'Přidružené eventy',
         },
+        8: {
+          title: '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>.',

package/src/locales/en.tsx

@@ -7,6 +7,8 @@ const en = {
   add: 'Add',
   confirm: 'Confirm',
   cancel: 'Cancel',
+  close: 'Close',
+  remove: 'Remove',
   pay: 'Pay',
   change: 'Change',
   free: 'Free',
@@ -105,6 +107,10 @@ const en = {
         7: {
           title: 'Associated events',
         },
+        8: {
+          title: '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>.',
@@ -124,7 +130,7 @@ 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',
         },
       },

package/src/locales/es.tsx

@@ -7,6 +7,8 @@ const es = {
   add: 'Añadir',
   confirm: 'Confirmar',
   cancel: 'Cancelar',
+  close: 'Cerrar',
+  remove: 'Eliminar',
   pay: 'Pagar',
   change: 'Cambiar',
   free: 'Gratis',
@@ -105,6 +107,10 @@ const es = {
         7: {
           title: 'Eventos asociados',
         },
+        8: {
+          title: 'Servicios',
+          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>.',