@eventlook/sdk 1.4.46-beta.7 → 1.4.46

package/src/form/ReleaseWithMerchandise.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
+import { Iconify } from '@components/iconify';
+import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
+import { IReleaseShort } from '@utils/types/release.type';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { IEventProductForm } from '@utils/types/product.type';
+import { fCurrency } from '@utils/formatNumber';
+import { Currencies } from '@utils/data/currency';
+import { getSelectedQuantityByVariant } from '@utils/product';
+import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  eventId: number;
+  release: IReleaseShort;
+  activeReleases: IReleaseShort[];
+  currency: Currencies;
+  index: number;
+}
+
+const ReleaseWithMerchandise: React.FC<Props> = ({
+  eventId,
+  release,
+  activeReleases,
+  currency,
+  index,
+}) => {
+  const { t, lang } = useGlobal();
+  const [openVariantDialog, setOpenVariantDialog] = useState<'add' | 'increase' | null>(null);
+  const { setValue } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+  const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+  const countTickets = addedRelease?.quantity || 0;
+
+  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
+
+  const getSelectedQuantity = (id: number) =>
+    tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
+
+  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+    return availableQuantity > 10 ? 10 : availableQuantity;
+  };
+
+  const isMaxQuantity = (releaseId: number) => {
+    const release = tickets.find((ticket) => ticket.releaseId === releaseId);
+    if (!release) return false;
+    return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
+  };
+
+  const addRelease = (product?: IEventProductForm) => {
+    setValue(`tickets.${eventId}`, [
+      ...tickets,
+      {
+        releaseId: release.id,
+        quantity: 1,
+        itemName: '',
+        price: 0,
+        products: product ? [product] : [],
+        extraFields: release.extraFields?.length
+          ? [
+              release.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+              })),
+            ]
+          : [],
+      },
+    ]);
+    setOpenVariantDialog(null);
+  };
+
+  const increaseQuantity = (product?: IEventProductForm) => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) + 1;
+      const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+      setValue(
+        `tickets.${eventId}`,
+        tickets.map((ticket) =>
+          ticket.releaseId === release.id
+            ? {
+                ...ticket,
+                quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
+                products: product ? [...ticket.products, product] : ticket.products,
+                extraFields: release.extraFields?.length
+                  ? [
+                      ...ticket.extraFields,
+                      release.extraFields.map((field) => ({
+                        eventExtraFieldId: field.id,
+                        value: '',
+                      })),
+                    ]
+                  : [],
+              }
+            : ticket
+        )
+      );
+      setOpenVariantDialog(null);
+    }
+  };
+
+  const decreaseQuantity = useCallback(() => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) - 1;
+      if (newQuantity < 1) {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.filter((ticket) => ticket.releaseId !== release.id)
+        );
+      } else {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.map((ticket) => {
+            if (ticket.releaseId !== release.id) return ticket;
+
+            return {
+              ...ticket,
+              quantity: newQuantity,
+              products: ticket?.products?.slice(0, -1), // non-mutating "pop"
+              extraFields: ticket?.extraFields?.slice(0, -1),
+            };
+          })
+        );
+      }
+    }
+  }, [tickets, release.id, setValue]);
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={1}>
+        <Stack
+          direction="row"
+          spacing={1}
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 }}
+        >
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              <Iconify
+                icon="ion:ticket-outline"
+                color="primary.main"
+                sx={{ width: 24, height: 24 }}
+              />
+              {release.product && (
+                <>
+                  <Typography fontSize={20} lineHeight={1}>
+                    +
+                  </Typography>
+                  <Iconify
+                    icon="lucide-lab:shirt-t"
+                    color="primary.main"
+                    sx={{ width: 24, height: 24 }}
+                  />
+                </>
+              )}
+            </Stack>
+            <Typography color="grey.500">
+              {release.releaseCategoryName} - {release.name} -{' '}
+              {fCurrency(release.price, lang, currency)}
+            </Typography>
+          </Stack>
+          {isReleaseSelected(release.id) ? (
+            <Stack direction="row" spacing={1} py={0.5}>
+              <IconButton onClick={() => decreaseQuantity()} size="small" color="primary">
+                <Iconify icon="eva:minus-fill" />
+              </IconButton>
+              <Typography color="grey.500">{getSelectedQuantity(release.id)}</Typography>
+              <IconButton
+                onClick={() =>
+                  release.product ? setOpenVariantDialog('increase') : increaseQuantity()
+                }
+                size="small"
+                color="primary"
+                disabled={isMaxQuantity(release.id)}
+              >
+                <Iconify icon="eva:plus-fill" />
+              </IconButton>
+            </Stack>
+          ) : (
+            <Button
+              onClick={() =>
+                !release.locked && (release.product ? setOpenVariantDialog('add') : addRelease())
+              }
+              variant="contained"
+              disabled={release.locked}
+            >
+              {t('add')}
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+      <Typography
+        variant="caption"
+        content="div"
+        mt={2}
+        mb={release.extraFields?.length ? 2 : 0}
+        display="block"
+      >
+        {release.description}
+      </Typography>
+      {release.extraFields && release.extraFields.length > 0 && (
+        <ReleaseExtraFields
+          release={release}
+          eventId={eventId}
+          releaseIndex={index}
+          quantity={countTickets}
+        />
+      )}
+      {release.product && (
+        <ProductVariantsDialog
+          eventProduct={release.product}
+          openDialog={!!openVariantDialog}
+          callback={openVariantDialog === 'increase' ? increaseQuantity : addRelease}
+          onClose={() => setOpenVariantDialog(null)}
+          selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+          eventId={eventId}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ReleaseWithMerchandise;

package/src/form/TicketForm.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from '@mui/material';
 import dayjs from 'dayjs';
-import TicketSelection from '@form/tickets/TicketSelection';
+import TicketSelection from '@form/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
 import EmailConfirmation from '@form/EmailConfirmation';
@@ -44,8 +44,8 @@ import {
 import ReleaseCountdown from '@form/ReleaseCountdown';
 import { cloneObject } from '@utils/global';
 import PaymentPending from '@form/PaymentPending';
-import MerchandiseSelection from '@form/merchandise/MerchandiseSelection';
-import TicketWithMerchandiseSelection from '@form/tickets/TicketWithMerchandiseSelection';
+import MerchandiseSelection from '@form/MerchandiseSelection';
+import TicketWithMerchandiseSelection from '@form/TicketWithMerchandiseSelection';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import Shipping from '@form/Shipping';
 import useErrors from '@hooks/useErrors';
@@ -53,12 +53,9 @@ import { EventType } from '@utils/data/event';
 import TimeslotSelection from '@form/TimeslotSelection';
 import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
-import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
+import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 import ChildEventSection from './ChildEvents';
-import TicketSelectionMap from '@form/tickets/TicketSelectionMap';
-import PaymentOverviewDrawer from './PaymentOverviewDrawer';
-import { getPlaceAsString } from '@utils/place';
-import Services from '@form/services';
+import TicketSelectionMap from '@form/TicketSelectionMap.tsx';
 
 interface Props {
   event: IEvent;
@@ -66,7 +63,6 @@ interface Props {
   selectedReleaseId?: number;
   isIframe?: boolean;
   isInline?: boolean;
-  headerSlot?: React.ReactNode;
 }
 
 const TicketForm: React.FC<Props> = ({
@@ -75,7 +71,6 @@ const TicketForm: React.FC<Props> = ({
   selectedReleaseId,
   isIframe,
   isInline,
-  headerSlot,
 }) => {
   const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
     useGlobal();
@@ -449,7 +444,7 @@ const TicketForm: React.FC<Props> = ({
   }, [window.location.search]);
 
   useEffect(() => {
-    const subscription = methods.watch((value) => {
+    const subscription = methods.watch((value, { name }) => {
       if (
         JSON.stringify(defaultValues) !== JSON.stringify(value) &&
         !hasFiredBeginCheckout.current
@@ -476,7 +471,7 @@ const TicketForm: React.FC<Props> = ({
   useEffect(() => {
     if (hasGopayId || isPaying || paymentRedirect) {
       if (options?.autoscrollAfterViewChange) {
-        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_CONTAINER_ID);
+        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_ID);
         if (orderForm) {
           orderForm.scrollIntoView({ behavior: 'smooth' });
         }
@@ -488,7 +483,7 @@ const TicketForm: React.FC<Props> = ({
     return <ReleaseCountdown event={event} setShowReleaseDate={setShowReleaseDate} />;
 
   return (
-    <Box id={EVENTLOOK_ORDER_FORM_CONTAINER_ID}>
+    <Box id={EVENTLOOK_ORDER_FORM_ID}>
       {hasGopayId ? (
         <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
@@ -501,56 +496,32 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        <FormProvider
-          methods={methods}
-          // @ts-ignore
-          onSubmit={methods.handleSubmit(onSubmit)}
-          formId={EVENTLOOK_ORDER_FORM_ID}
-        >
-          <Stack
+        // @ts-ignore
+        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
+          <Typography
             className="overview-card__event-info"
             display={{ md: 'none' }}
+            variant="h4"
             sx={{
               mb: 2,
             }}
           >
-            <Typography variant="h3" component="h1">
-              {event.name}
-            </Typography>
-            <Typography variant="h5" component="h2">
-              {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-            </Typography>
-            <Typography variant="body2" mt={1}>
-              {getPlaceAsString(event.place)}
-            </Typography>
-            {headerSlot ? <>{headerSlot}</> : null}
-          </Stack>
+            {event.name} - {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+          </Typography>
           <Grid container spacing={2}>
             <Grid item xs={12} md={8}>
-              <Stepper
-                orientation="vertical"
-                sx={(theme) => ({
-                  [theme.breakpoints.down('sm')]: {
-                    '& .MuiStepContent-root': {
-                      borderLeftWidth: 0,
-                      paddingLeft: 0,
-                      marginLeft: 0,
-                    },
-                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
-                  },
-                })}
-              >
+              <Stepper orientation="vertical">
                 {event.type === EventType.RECURRING && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
+                    <StepContent>
                       <TimeslotSelection event={event} />
                     </StepContent>
                   </Step>
                 )}
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
+                  <StepContent>
                     {event.mapId && seatingIframeUrl ? (
                       <TicketSelectionMap event={event} />
                     ) : event.hasMerchandise ? (
@@ -563,7 +534,7 @@ const TicketForm: React.FC<Props> = ({
                 {event.hasMerchandise && eventProducts.length && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
+                    <StepContent>
                       <MerchandiseSelection
                         eventProducts={eventProducts}
                         eventId={event.id}
@@ -572,30 +543,24 @@ const TicketForm: React.FC<Props> = ({
                     </StepContent>
                   </Step>
                 )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
-                    <Services event={event} />
-                  </StepContent>
-                </Step>
                 {event.children.length && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
+                    <StepContent>
                       <ChildEventSection events={event.children} />
                     </StepContent>
                   </Step>
                 )}
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
+                  <StepContent>
                     <ContactPerson event={event} />
                   </StepContent>
                 </Step>
                 {event.hasMerchandise && showShippingMethods() && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
+                    <StepContent>
                       <Shipping event={event} />
                     </StepContent>
                   </Step>
@@ -606,12 +571,12 @@ const TicketForm: React.FC<Props> = ({
                       `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
                     )}
                   </StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
+                  <StepContent>
                     <Payment event={event} />
                   </StepContent>
                 </Step>
               </Stepper>
-              <Stack mt={2} ml={{ xs: 1, md: 4 }}>
+              <Stack mt={2} ml={4}>
                 <RHFCheckbox
                   name="termsAndConditions"
                   label={
@@ -631,13 +596,10 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
+            <Grid item xs={12} md={4}>
               <PaymentOverviewBox event={event} />
             </Grid>
           </Grid>
-
-          <PaymentOverviewDrawer event={event} totalPrice={values.total} />
-
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}
@@ -651,7 +613,7 @@ const TicketForm: React.FC<Props> = ({
 };
 
 const CustomLink: React.FC<PropsWithChildren<LinkProps>> = ({ href = '', children, ...other }) => (
-  <Link href={href} {...other} sx={{ color: 'inherit', textDecoration: 'underline' }}>
+  <Link href={href} {...other}>
     {children}
   </Link>
 );

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

@@ -1,23 +1,36 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { Box, Divider, Stack, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  IconButton,
+  MenuItem,
+  Skeleton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { RHFSelect } from '@components/hook-form';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
+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;
 }
 
 const TicketSelection: React.FC<Props> = ({ event }) => {
-  const { t } = useGlobal();
+  const { t, lang } = useGlobal();
   const isMobile = useResponsive('down', 'md');
   const { setValue, watch } = useFormContext<ITicketForm>();
   const tickets = useWatch({
@@ -65,11 +78,11 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
     );
   };
 
-  // const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
-  //   const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
-  //   const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
-  //   return availableQuantity > 10 ? 10 : availableQuantity;
-  // };
+  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+    return availableQuantity > 10 ? 10 : availableQuantity;
+  };
 
   const countReleaseCategories = (): number => {
     const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
@@ -175,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>