@eventlook/sdk 1.4.46-beta.6 → 1.4.46

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import {
   Box,
+  Button,
   Divider,
   Grid,
   IconButton,
@@ -17,12 +18,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;
@@ -187,26 +188,117 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   };
 
   return (
-    <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}
-      />
+    <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}>
+                  <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>
+          {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/TicketSelectionMap.tsx → TicketSelectionMap.tsx}

@@ -5,7 +5,6 @@ import { Button } from '@mui/material';
 import { iframe, TicketSelection } from '@seat-picker/seat-picker-sdk';
 import { useFormContext } from 'react-hook-form';
 import { ITicketForm, ITicketFormTicket, ITicketLocation } from '@utils/types/ticket.type.ts';
-import Iconify from '@components/iconify/Iconify';
 
 interface Props {
   event: IEvent;
@@ -66,7 +65,7 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
 
   return (
     <Button
-      variant="outlined"
+      variant="contained"
       onClick={() =>
         iframe.openPicker({
           eventId: String(event.id),
@@ -75,13 +74,6 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
           clientId: uuid,
         })
       }
-      sx={{
-        width: { xs: '100%' },
-        color: 'text.primary',
-        borderColor: (theme) => theme.palette.grey['300'],
-        '& .MuiButton-endIcon': { ml: 0, fontSize: '1.5em' },
-      }}
-      endIcon={<Iconify icon="eva:chevron-right-outline" />}
     >
       {t('form.labels.open_map')}
     </Button>

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

@@ -1,12 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Divider, 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 ReleaseWithMerchandise from '@form/tickets/ReleaseWithMerchandise';
+import useResponsive from '@hooks/useResponsive';
+import ReleaseWithMerchandise from '@form/ReleaseWithMerchandise';
 import { EventType } from '@utils/data/event';
 import useGlobal from '@hooks/useGlobal.ts';
 
@@ -16,6 +18,7 @@ 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');
@@ -135,7 +138,7 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
   };
 
   return (
-    <Stack spacing={1} direction="column">
+    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
       {!activeReleases && event.type !== EventType.RECURRING ? (
         <Skeleton
           variant="rounded"
@@ -166,6 +169,7 @@ 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/form/index.tsx

@@ -5,7 +5,7 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/uk';
 import 'dayjs/locale/sk';
 
-import React, { useEffect, ReactNode } from 'react';
+import React, { useEffect } from 'react';
 import TicketForm from '@form/TicketForm';
 import { GlobalProvider } from '@context/GlobalContext';
 import api from '@utils/axios';
@@ -33,7 +33,6 @@ export interface OrderFormProps {
   lang?: Languages;
   slots?: {
     showSnackbar: IGlobalContext['showSnackbar'];
-    headerSlot?: ReactNode;
   };
   user?: IUser;
   selectedReleaseId?: number;
@@ -113,7 +112,6 @@ const ClientRender: React.FC<OrderFormProps> = ({
             hasGopayIdSsr={options?.hasGopayId || false}
             isIframe={options?.isIframe}
             selectedReleaseId={selectedReleaseId}
-            headerSlot={slots?.headerSlot}
           />
         )}
       </GlobalProvider>

package/src/form/payment/FeeBox.tsx

@@ -63,6 +63,16 @@ const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
         </Stack>
         <Typography variant="subtitle1">{fCurrency(values.total, lang, event.currency)}</Typography>
       </Stack>
+      {!!values.totalFee && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: (theme) => theme.palette.grey.A700,
+          }}
+        >
+          {t('form.labels.with_fee')}
+        </Typography>
+      )}
     </Box>
   );
 };

package/src/form/payment/PaymentOverviewCheckbox.tsx

@@ -1,6 +1,14 @@
-import React, { JSX } from 'react';
-import { Button, Stack, Typography } from '@mui/material';
-import { Controller, useFormContext } from 'react-hook-form';
+import React, { JSX, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { RHFCheckbox } from '@components/hook-form';
 import useGlobal from '@hooks/useGlobal.ts';
 import { Iconify } from '@components';
 
@@ -8,55 +16,70 @@ interface Props {
   checkboxName: string;
   label: string;
   value: string | JSX.Element;
+  modal: {
+    title: string;
+    description: string | JSX.Element;
+  };
 }
 
-const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value }) => {
+const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value, modal }) => {
   const { t } = useGlobal();
-  const { control } = useFormContext();
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOpen(true);
+  };
+  const handleClose = () => setOpen(false);
 
   return (
     <>
-      <Controller
+      <RHFCheckbox
         name={checkboxName}
-        control={control}
-        render={({ field }) => (
+        label={
           <Stack
             direction="row"
             justifyContent="space-between"
             alignItems="center"
             spacing={1}
-            sx={{ width: '100%', mb: 0.5 }}
+            sx={{ width: '100%' }}
           >
             <Typography variant="caption" sx={{ flex: 1 }}>
               {label}
             </Typography>
-            <Stack direction="row" alignItems="center" spacing={1}>
-              <Typography variant="caption">{value}</Typography>
-              {!field.value && (
-                <Button
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  startIcon={<Iconify icon="carbon:add" />}
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    field.onChange(true);
-                  }}
-                  sx={{
-                    borderRadius: 1,
-                    textTransform: 'none',
-                    px: 1.5,
-                    minWidth: 96,
-                  }}
-                >
-                  {t('add')}
-                </Button>
-              )}
+            <Stack alignItems="flex-end">
+              <Typography variant="caption" fontWeight="600">
+                {value}
+              </Typography>
+              <Link variant="caption" onClick={handleOpen}>
+                {t('more_info')}
+              </Link>
             </Stack>
           </Stack>
-        )}
+        }
+        sx={{
+          width: 'calc(100% + 11px)',
+          mb: 0.5,
+          '& > .MuiTypography-root': {
+            width: '100%',
+          },
+        }}
       />
+
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+        <DialogTitle
+          sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+        >
+          {modal.title}
+          <IconButton onClick={handleClose} size="small">
+            <Iconify icon="carbon:close" />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Typography variant="body2">{modal.description}</Typography>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };

package/src/form/product/ProductCard.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Card, Stack, Typography } from '@mui/material';
+import { Button, Card, Stack, Typography } from '@mui/material';
+import { Iconify } from '@components/iconify';
 import Image from '@components/Image';
 import { IEventProduct } from '@utils/types/event-product.type';
 import React, { useMemo, useState } from 'react';
@@ -8,7 +9,6 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import { getSelectedQuantityByVariant } from '@utils/product';
 import useGlobal from '@hooks/useGlobal.ts';
-import { fCurrency } from '@utils/formatNumber';
 
 interface Props {
   eventProduct: IEventProduct;
@@ -17,88 +17,73 @@ interface Props {
 }
 
 const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {
-  const { t, lang } = useGlobal();
+  const { t } = useGlobal();
   const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
-  const { setValue, getValues } = useFormContext<ITicketForm>();
+  const { setValue } = useFormContext<ITicketForm>();
   const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
   const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
 
-  const onSelectVariant = (selectedVariants: IEventProductForm[] | IEventProductForm) => {
-    const normalized = Array.isArray(selectedVariants) ? selectedVariants : [selectedVariants];
-    const currentProducts =
-      (getValues(`products.${eventId}`) as IEventProductForm[] | undefined) ?? [];
-    const nextProducts = [...currentProducts];
-
-    normalized.forEach((selectedVariant) => {
-      const index = nextProducts.findIndex(
-        (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
-      );
+  const onSelectVariant = (selectedVariant: IEventProductForm) => {
+    const variant = products.find(
+      (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
+    );
 
-      if (index >= 0) {
-        if (selectedVariant.quantity <= 0) {
-          nextProducts.splice(index, 1);
-        } else {
-          nextProducts[index] = {
-            ...nextProducts[index],
-            quantity: selectedVariant.quantity,
-          };
-        }
+    if (variant) {
+      if (selectedVariant.quantity === 0) {
+        setValue(
+          `products.${eventId}`,
+          products.filter(
+            (product) => product.eventProductVariantId !== variant.eventProductVariantId
+          )
+        );
       } else {
-        if (selectedVariant.quantity > 0) {
-          nextProducts.push(selectedVariant);
-        }
+        setValue(
+          `products.${eventId}`,
+          products.map((product) => {
+            if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {
+              return {
+                ...product,
+                quantity: selectedVariant.quantity,
+              };
+            }
+            return product;
+          })
+        );
       }
-    });
-
-    setValue(`products.${eventId}`, nextProducts, {
-      shouldDirty: true,
-      shouldValidate: true,
-    });
+    } else if (selectedVariant.quantity !== 0) {
+      setValue(`products.${eventId}`, [...products, selectedVariant]);
+    }
   };
 
-  const eventNotEmpty = useMemo(() => {
-    const variantIds = new Set(eventProduct.eventProductVariants.map((variant) => variant.id));
-    return products.some(
-      (product) => product?.quantity && variantIds.has(product.eventProductVariantId)
-    );
-  }, [products, eventProduct.eventProductVariants]);
+  const eventNotEmpty = useMemo(() => products.some((product) => product?.quantity), [products]);
 
   return (
     <>
-      <Card
-        sx={{
-          p: 0,
-          borderRadius: 0,
-          boxShadow: 'none',
-          background: 'none',
-        }}
-      >
-        <Stack spacing={0}>
-          <Image
-            src={eventProduct.product.previewImage.url}
-            ratio="21/9"
-            sx={{ borderRadius: 1, maxHeight: 96 }}
-          />
+      <Card sx={{ p: 2 }}>
+        <Stack spacing={1}>
+          <Image src={eventProduct.product.previewImage.url} ratio="1/1" sx={{ borderRadius: 2 }} />
           <Typography variant="h5">{eventProduct.product.name}</Typography>
-          <Box>
-            <Typography variant="body2" color="text.primary">
-              {eventProduct.product.priceWithVat > 0
-                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
-                : t('free')}
-            </Typography>
-          </Box>
+          <Typography
+            variant="caption"
+            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
+            sx={{
+              height: 44,
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          />
           <Button
-            variant={eventNotEmpty ? 'contained' : 'outlined'}
+            variant="contained"
             onClick={() => setOpenVariantDialog(true)}
             fullWidth
-            sx={{
-              color: eventNotEmpty ? (theme) => theme.palette.common.white : 'inherit',
-              borderColor: (theme) => theme.palette.grey[300],
-            }}
+            startIcon={
+              eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
+            }
           >
-            {eventNotEmpty
-              ? t('event.tickets.merchandise.show_added')
-              : t('event.tickets.merchandise.show_sizes')}
+            {eventNotEmpty ? t('change') : t('add')}
           </Button>
         </Stack>
       </Card>