@eventlook/sdk 1.4.4 → 1.4.5-1.beta.2

package/src/form/TicketForm.tsx

@@ -3,6 +3,7 @@ import PaymentSuccess from '@form/PaymentSuccess';
 import FormProvider, { RHFCheckbox } from '@components/hook-form';
 import {
   Box,
+  Divider,
   Grid,
   Link,
   LinkProps,
@@ -14,7 +15,7 @@ import {
   Typography,
 } from '@mui/material';
 import dayjs from 'dayjs';
-import TicketSelection from '@form/TicketSelection';
+import TicketSelection from '@form/tickets/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
 import EmailConfirmation from '@form/EmailConfirmation';
@@ -44,17 +45,22 @@ import {
 import ReleaseCountdown from '@form/ReleaseCountdown';
 import { cloneObject } from '@utils/global';
 import PaymentPending from '@form/PaymentPending';
-import MerchandiseSelection from '@form/MerchandiseSelection';
-import TicketWithMerchandiseSelection from '@form/TicketWithMerchandiseSelection';
+import MerchandiseSelection from '@form/merchandise/MerchandiseSelection';
+import TicketWithMerchandiseSelection from '@form/tickets/TicketWithMerchandiseSelection';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import Shipping from '@form/Shipping';
 import useErrors from '@hooks/useErrors';
 import { EventType } from '@utils/data/event';
 import TimeslotSelection from '@form/TimeslotSelection';
 import useGlobal from '@hooks/useGlobal';
+import useScrollToFirstError from '@hooks/useScrollToFirstError';
 import { Trans } from '@components/Trans';
-import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
+import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_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';
 
 interface Props {
   event: IEvent;
@@ -62,22 +68,43 @@ interface Props {
   selectedReleaseId?: number;
   isIframe?: boolean;
   isInline?: boolean;
+  headerSlot?: React.ReactNode;
 }
 
+const getCartUniqueItemCount = (formValues: ITicketForm) => {
+  const flatTickets = Object.values(formValues.tickets ?? {}).flat();
+  const ticketsCount = flatTickets.reduce(
+    (sum, ticket) => sum + (Number(ticket.quantity) > 0 ? 1 : 0),
+    0
+  );
+  const ticketsWithProductsCount = flatTickets.reduce(
+    (sum, ticket) => sum + ((ticket.products?.length ?? 0) > 0 ? 1 : 0),
+    0
+  );
+  const productsCount = Object.values(formValues.products ?? {})
+    .flat()
+    .reduce((sum, product) => sum + (Number(product.quantity) || 0), 0);
+
+  return ticketsCount + ticketsWithProductsCount + productsCount;
+};
+
 const TicketForm: React.FC<Props> = ({
   event,
   hasGopayIdSsr,
   selectedReleaseId,
   isIframe,
   isInline,
+  headerSlot,
 }) => {
-  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content } = useGlobal();
+  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
+    useGlobal();
   const { transformErrors } = useErrors(t('event.tickets.error.order'));
   const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
   const [paymentRedirect, setPaymentRedirect] = useState<string | null>(null);
   const [hasGopayId, setHasGopayId] = useState<boolean>(hasGopayIdSsr);
   const [isPaying, setIsPaying] = useState<boolean>(false);
   const [formStep, setFormStep] = useState<number>(1);
+  const [isPaymentOverviewDrawerOpen, setIsPaymentOverviewDrawerOpen] = useState<boolean>(false);
   const [showReleaseDate, setShowReleaseDate] = useState(
     dayjs(event.releaseDate).diff(dayjs()) > 0
   );
@@ -86,6 +113,8 @@ const TicketForm: React.FC<Props> = ({
   const hasFiredViewCart = useRef(false);
   const hasFiredBeginCheckout = useRef(false);
   const hasFiredPaymentMethod = useRef(false);
+  const termsAndConditionsRef = useRef<HTMLDivElement | null>(null);
+
   const item: IEcommerce = {
     currency: event.currency,
     items: [
@@ -212,8 +241,12 @@ const TicketForm: React.FC<Props> = ({
       paymentMethodId: null,
       paymentMethodOptionId: null,
       termsAndConditions: false,
+      ticketInsurance: false,
+      ticketInsurancePrice: 0,
+      ticketInsurancePricePerUnit: 0,
+      smsNotification: false,
+      smsNotificationPrice: 0,
       iframeCampaignId: undefined,
-      promoCode: null,
       promoCodes: [],
       products: {},
       shipping: {
@@ -268,14 +301,41 @@ const TicketForm: React.FC<Props> = ({
     //   }
     //   return true;
     // }),
-    shipping: Yup.object().shape({
-      shippingMethodId: Yup.number().nullable(),
-      branchId: Yup.string().nullable(),
-      price: Yup.number(),
-    }),
+    shipping: Yup.object()
+      .shape({
+        shippingMethodId: Yup.number().nullable(),
+        branchId: Yup.string().nullable(),
+        price: Yup.number(),
+      })
+      .test('shipping-method-required', t('form.validation.required'), function (value) {
+        if (!event.hasMerchandise) {
+          return true;
+        }
+
+        const formValues = this.parent as ITicketForm;
+        const hasProducts = Object.values(formValues.products ?? {}).some((arr) => arr.length > 0);
+        const allTickets = Object.values(formValues.tickets ?? {}).flat();
+        const hasTicketProducts = allTickets.some((ticket) => (ticket.products?.length ?? 0) > 0);
+        const requiresShipping = hasProducts || hasTicketProducts;
+
+        if (!requiresShipping) {
+          return true;
+        }
+
+        if (value?.shippingMethodId !== null && value?.shippingMethodId !== undefined) {
+          return true;
+        }
+
+        return this.createError({
+          path: 'shipping.shippingMethodId',
+          message: t('form.validation.required'),
+        });
+      }),
     paymentMethodId: Yup.number().nullable().required(t('form.validation.required')),
     paymentMethodOptionId: Yup.number().nullable(),
     termsAndConditions: Yup.boolean().isTrue(t('form.validation.terms_and_conditions')),
+    ticketInsurance: Yup.boolean(),
+    smsNotification: Yup.boolean(),
     extraFields: Yup.array().of(
       Yup.object().shape({
         value: Yup.string().test('is-required', function (value) {
@@ -298,15 +358,11 @@ const TicketForm: React.FC<Props> = ({
     defaultValues,
   });
   const values = methods.watch();
+  const cartItemCount = getCartUniqueItemCount(values);
+  const onInvalid = useScrollToFirstError(methods);
 
   const onSubmit = async (values: ITicketForm) => {
-    const allTickets = Object.values(values.tickets).flat();
-    if (
-      allTickets.length === 1 &&
-      !allTickets[0].releaseId &&
-      !allTickets[0].quantity &&
-      !values.products.length
-    ) {
+    if (cartItemCount <= 0) {
       showSnackbar(t('form.validation.count_tickets_or_products'), {
         variant: 'error',
       });
@@ -318,6 +374,7 @@ const TicketForm: React.FC<Props> = ({
     } else {
       try {
         const data: ITicketBody = cloneObject(values);
+        data.paymentMethodId = Number(values.paymentMethodId);
         data.promoCodeIds = values.promoCodes?.map((item) => item.id);
         const urlParams = new URLSearchParams(window.location.search);
         const iframeCallback = urlParams.get('callback');
@@ -333,12 +390,15 @@ const TicketForm: React.FC<Props> = ({
                 itemName: item.itemName,
                 products: item.products,
                 extraFields: item.extraFields,
+                eventTimeslotId: item.eventTimeslotId,
+                location: item.location,
               }));
             return acc;
           },
           {} as Record<number, ITicketFormTicket[]>
         );
         const { data: orderData } = await postOrder(data);
+        localStorage.removeItem('cartToken');
         const items = [
           ...orderData.tickets.map((ticket) => ({
             item_id: ticket.number,
@@ -432,7 +492,7 @@ const TicketForm: React.FC<Props> = ({
   }, [window.location.search]);
 
   useEffect(() => {
-    const subscription = methods.watch((value, { name }) => {
+    const subscription = methods.watch((value) => {
       if (
         JSON.stringify(defaultValues) !== JSON.stringify(value) &&
         !hasFiredBeginCheckout.current
@@ -459,7 +519,7 @@ const TicketForm: React.FC<Props> = ({
   useEffect(() => {
     if (hasGopayId || isPaying || paymentRedirect) {
       if (options?.autoscrollAfterViewChange) {
-        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_ID);
+        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_CONTAINER_ID);
         if (orderForm) {
           orderForm.scrollIntoView({ behavior: 'smooth' });
         }
@@ -471,9 +531,9 @@ const TicketForm: React.FC<Props> = ({
     return <ReleaseCountdown event={event} setShowReleaseDate={setShowReleaseDate} />;
 
   return (
-    <Box id={EVENTLOOK_ORDER_FORM_ID}>
+    <Box id={EVENTLOOK_ORDER_FORM_CONTAINER_ID}>
       {hasGopayId ? (
-        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} />
+        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
         <PaymentPending />
       ) : paymentRedirect ? (
@@ -484,33 +544,68 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        // @ts-ignore
-        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
-          <Typography
+        <FormProvider
+          methods={methods}
+          // @ts-ignore
+          onSubmit={methods.handleSubmit(onSubmit, onInvalid)}
+          formId={EVENTLOOK_ORDER_FORM_ID}
+        >
+          <Stack
             className="overview-card__event-info"
             display={{ md: 'none' }}
-            variant="h4"
             sx={{
               mb: 2,
             }}
           >
-            {event.name} - {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-          </Typography>
-          <Grid container spacing={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>
+          <Grid
+            container
+            spacing={2}
+            sx={{
+              pb: {
+                xs: isPaymentOverviewDrawerOpen ? cartItemCount * 4 + 18 : 0,
+                md: 0,
+              },
+            }}
+          >
             <Grid item xs={12} md={8}>
-              <Stepper orientation="vertical">
+              <Stepper
+                orientation="vertical"
+                sx={(theme) => ({
+                  [theme.breakpoints.down('sm')]: {
+                    '& .MuiStepContent-root': {
+                      borderLeftWidth: 0,
+                      paddingLeft: 0,
+                      marginLeft: 0,
+                    },
+                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
+                  },
+                })}
+              >
                 {event.type === EventType.RECURRING && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <TimeslotSelection event={event} />
                     </StepContent>
                   </Step>
                 )}
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
-                  <StepContent>
-                    {event.hasMerchandise ? (
+                  <StepContent sx={{ pr: { xs: 0 } }}>
+                    {event.mapId && seatingIframeUrl ? (
+                      <TicketSelectionMap event={event} />
+                    ) : event.hasMerchandise ? (
                       <TicketWithMerchandiseSelection event={event} />
                     ) : (
                       <TicketSelection event={event} />
@@ -520,7 +615,7 @@ const TicketForm: React.FC<Props> = ({
                 {event.hasMerchandise && eventProducts.length && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <MerchandiseSelection
                         eventProducts={eventProducts}
                         eventId={event.id}
@@ -529,24 +624,30 @@ 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>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <ChildEventSection events={event.children} />
                     </StepContent>
                   </Step>
                 )}
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
-                  <StepContent>
+                  <StepContent sx={{ pr: { xs: 0 } }}>
                     <ContactPerson event={event} />
                   </StepContent>
                 </Step>
                 {event.hasMerchandise && showShippingMethods() && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <Shipping event={event} />
                     </StepContent>
                   </Step>
@@ -557,12 +658,17 @@ const TicketForm: React.FC<Props> = ({
                       `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
                     )}
                   </StepLabel>
-                  <StepContent>
+                  <StepContent sx={{ pr: { xs: 0 } }}>
                     <Payment event={event} />
                   </StepContent>
                 </Step>
               </Stepper>
-              <Stack mt={2} ml={4}>
+              <Stack
+                ref={termsAndConditionsRef}
+                mt={2}
+                ml={{ xs: 1, md: 4 }}
+                sx={{ scrollMarginBottom: { xs: 220, md: 0 } }}
+              >
                 <RHFCheckbox
                   name="termsAndConditions"
                   label={
@@ -582,15 +688,28 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4}>
-              <PaymentOverviewBox event={event} />
+            <Grid item xs={12} sx={{ display: { xs: 'block', md: 'none' } }}>
+              <Divider sx={{ borderStyle: 'dashed' }} />
+            </Grid>
+            <Grid item xs={12} md={4} mt={{ xs: 0, md: 0 }}>
+              <PaymentOverviewBox event={event} withoutPadding />
             </Grid>
           </Grid>
+
+          {!isIframe && (
+            <PaymentOverviewDrawer
+              event={event}
+              totalPrice={values.total}
+              termsAndConditionsRef={termsAndConditionsRef}
+              onOpenChange={setIsPaymentOverviewDrawerOpen}
+            />
+          )}
+
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}
             // @ts-ignore
-            onConfirm={methods.handleSubmit(onSubmit)}
+            onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
           />
         </FormProvider>
       )}
@@ -599,7 +718,7 @@ const TicketForm: React.FC<Props> = ({
 };
 
 const CustomLink: React.FC<PropsWithChildren<LinkProps>> = ({ href = '', children, ...other }) => (
-  <Link href={href} {...other}>
+  <Link href={href} {...other} sx={{ color: 'inherit', textDecoration: 'underline' }}>
     {children}
   </Link>
 );

package/src/form/extra-field/ExtraField.tsx

@@ -8,7 +8,9 @@ import useGlobal from '@hooks/useGlobal.ts';
 
 interface Props {
   extraField: IEventExtraField;
-  name: `extraFields.${number}.value` | `tickets.${number}.extraFields.${number}.${number}.value`;
+  name:
+    | `extraFields.${number}.value`
+    | `tickets.${number}.${number}.extraFields.${number}.${number}.value`;
   size?: 'small' | 'medium';
 }
 

package/src/form/extra-field/ReleaseExtraFields.tsx

@@ -78,7 +78,7 @@ const ReleaseExtraFields: React.FC<Props> = ({ release, eventId, releaseIndex, q
                 <Grid key={field.id} item xs={12} md={6}>
                   <ExtraField
                     extraField={field}
-                    name={`tickets.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}
+                    name={`tickets.${eventId}.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}
                     size="small"
                   />
                 </Grid>

package/src/form/index.tsx

@@ -5,7 +5,7 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/uk';
 import 'dayjs/locale/sk';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode } from 'react';
 import TicketForm from '@form/TicketForm';
 import { GlobalProvider } from '@context/GlobalContext';
 import api from '@utils/axios';
@@ -27,11 +27,13 @@ import { csCZ, enUS, ukUA, esES, deDE, skSK } from '@mui/x-date-pickers/locales'
 export interface OrderFormProps {
   eventSlug: string;
   apiUrl: string;
+  seatingIframeUrl?: string;
   callbacks: IGlobalContext['callbacks'];
   links: IGlobalContext['links'];
   lang?: Languages;
   slots?: {
     showSnackbar: IGlobalContext['showSnackbar'];
+    headerSlot?: ReactNode;
   };
   user?: IUser;
   selectedReleaseId?: number;
@@ -42,6 +44,7 @@ export interface OrderFormProps {
 const ClientRender: React.FC<OrderFormProps> = ({
   eventSlug,
   apiUrl,
+  seatingIframeUrl,
   lang,
   slots,
   options,
@@ -100,6 +103,7 @@ const ClientRender: React.FC<OrderFormProps> = ({
         links={links}
         options={options}
         content={content}
+        seatingIframeUrl={seatingIframeUrl}
       >
         {!data || !!error ? (
           <TicketFormSkeleton />
@@ -109,6 +113,7 @@ const ClientRender: React.FC<OrderFormProps> = ({
             hasGopayIdSsr={options?.hasGopayId || false}
             isIframe={options?.isIframe}
             selectedReleaseId={selectedReleaseId}
+            headerSlot={slots?.headerSlot}
           />
         )}
       </GlobalProvider>

package/src/form/merchandise/MerchandiseSelection.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import { IEventProduct } from '@utils/types/event-product.type';
+import CustomSkeleton from '@components/CustomSkeleton';
+import MerchandiseSlider from './MerchandiseSlider';
+
+interface Props {
+  eventProducts: IEventProduct[];
+  eventId: number;
+  isLoading?: boolean;
+}
+
+const MerchandiseSelection: React.FC<Props> = ({ eventProducts, eventId, isLoading }) =>
+  isLoading ? (
+    [...Array(3)].map((item) => (
+      <Grid key={item} item xs={12} md={4}>
+        <CustomSkeleton height={334} />
+      </Grid>
+    ))
+  ) : (
+    <MerchandiseSlider eventProducts={eventProducts} eventId={eventId} />
+  );
+
+export default MerchandiseSelection;

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Box, SxProps } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { IEventProduct } from '@utils/types/event-product.type';
+import ProductCard from '@form/product/ProductCard';
+
+interface Props {
+  sx?: SxProps;
+  eventProducts: IEventProduct[];
+  eventId: number;
+}
+
+const MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {
+  const [emblaRef] = useEmblaCarousel();
+  const theme = useTheme();
+
+  return (
+    <Box sx={sx}>
+      <Box
+        sx={{
+          overflow: 'hidden',
+          padding: theme.spacing(8, 3),
+          margin: theme.spacing(-8, -2.5),
+        }}
+      >
+        <Box ref={emblaRef} className="embla" sx={{ overflow: 'visible' }}>
+          <Box
+            className="embla__container"
+            sx={{
+              display: 'flex',
+            }}
+          >
+            {eventProducts.map((eventProduct, index) => (
+              <Box
+                key={`event-slide-${index}`}
+                className="embla__slide"
+                sx={{
+                  flex: `0 0 ${eventProducts.length > 1 ? '78%' : '100%'}`,
+                  minWidth: 0,
+                  maxWidth: 220,
+                  margin: `0 ${theme.spacing(0.5)}`,
+                  transition: 'opacity 0.2s ease',
+                  [theme.breakpoints.up('sm')]: {
+                    flex: '0 0 43%',
+                  },
+                  [theme.breakpoints.up('md')]: {
+                    flex: '0 0 33.3333%',
+                  },
+                }}
+              >
+                <ProductCard eventProduct={eventProduct} eventId={eventId} isOnlyMerchandise />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default MerchandiseSlider;

package/src/form/payment/FeeBox.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { Box, Stack, Tooltip, Typography } from '@mui/material';
-import { OrderFeeType } from '@utils/data/order';
-import { fCurrency, fPercent } from '@utils/formatNumber';
-import { Iconify } from '@components/iconify';
+import { Box, Stack, Typography } from '@mui/material';
+import { fCurrency } from '@utils/formatNumber';
 import { IEvent } from '@utils/types/event.type';
-import useResponsive from '@hooks/useResponsive';
 import { useFormContext } from 'react-hook-form';
 import { ITicketForm } from '@utils/types/ticket.type';
 import useGlobal from '@hooks/useGlobal.ts';
@@ -16,14 +13,13 @@ interface Props {
 
 const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
   const { t, lang } = useGlobal();
-  const xs = useResponsive('only', 'xs');
   const { watch } = useFormContext<ITicketForm>();
   const values = watch();
   const isRight = align === 'right';
 
   return (
     <Box mb={1} textAlign={isRight ? 'right' : undefined}>
-      {values.promoCode && (
+      {values.promoCodes.length > 0 && (
         <Stack
           direction="row"
           justifyContent={isRight ? 'flex-end' : 'space-between'}
@@ -45,35 +41,11 @@ const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
         alignItems="center"
         spacing={1}
       >
-        <Stack direction="row" alignItems="center" spacing={1}>
-          <Tooltip
-            title={t('form.labels.price_including_service_fee', {
-              fee: fCurrency(values.totalFee ?? 0, lang, event.currency),
-            })}
-            placement={xs ? 'top' : 'left'}
-            arrow
-            sx={{ cursor: 'help' }}
-          >
-            <Stack alignItems="center">
-              <Iconify icon="carbon:information-filled" />
-            </Stack>
-          </Tooltip>
-          <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
-            {t('form.labels.total')}:
-          </Typography>
-        </Stack>
+        <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
+          {t('form.labels.total')}:
+        </Typography>
         <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>
   );
 };