@eventlook/sdk 1.4.0

package/dist/esm/form/Shipping.js

@@ -0,0 +1,115 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import useEventShippingMethods from '../hooks/data/useEventShippingMethods.js';
+import ShippingSkeleton from './shipping/ShippingSkeleton.js';
+import { Typography, FormControl, RadioGroup, FormControlLabel, Stack, Box, Button, Radio, FormHelperText } from '@mui/material';
+import { ShippingMethodItem } from './style.js';
+import Iconify from '../components/iconify/Iconify.js';
+import { useFormContext, useWatch, Controller } from 'react-hook-form';
+import { ShippingTypes } from '../utils/data/shipping-method.js';
+import useGlobal from '../hooks/useGlobal.js';
+import ScriptLoader from './ScriptLoader.js';
+
+const Shipping = ({ event }) => {
+    const { t, lang, options } = useGlobal();
+    const { data: shippingMethods, isLoading } = useEventShippingMethods(event.id, {
+        currency: event.currency,
+    });
+    const { control, watch, setValue } = useFormContext();
+    const tickets = useWatch({
+        name: 'tickets',
+        defaultValue: {},
+    });
+    const flatTickets = useMemo(() => Object.values(tickets).flat(), [tickets]);
+    const products = useWatch({
+        name: 'products',
+        defaultValue: {},
+    });
+    const flatProducts = useMemo(() => Object.values(products).flat(), [products]);
+    const shippingMethodId = watch('shipping.shippingMethodId');
+    const branchId = watch('shipping.branchId');
+    const [displayBranchName, setDisplayBranchName] = useState(null);
+    const [firstRender, setFirstRender] = useState(true);
+    const filteredShippingMethods = useMemo(() => shippingMethods?.filter((shippingMethod) => !flatProducts?.find((product) => product.excludedShippingMethodIds?.includes(shippingMethod?.id)) &&
+        !flatTickets.find((ticket) => ticket.products.find((product) => product.excludedShippingMethodIds?.includes(shippingMethod?.id)))), [shippingMethods, shippingMethodId, flatTickets, flatProducts]);
+    const paymentImages = {
+        [ShippingTypes.PACKETA]: (React.createElement(Iconify, { icon: "arcticons:packeta", color: "rgb(186,27,2)", width: 32, height: 32 })),
+        [ShippingTypes.PICK_UP]: React.createElement(Iconify, { icon: "flowbite:store-solid", width: 32, height: 32 }),
+    };
+    const onSelectBranch = (branch) => {
+        if (branch) {
+            setValue('shipping.branchId', branch.id);
+            setDisplayBranchName(branch.name);
+        }
+        else {
+            setValue('shipping.shippingMethodId', null);
+            setValue('shipping.branchId', null);
+            setDisplayBranchName(null);
+        }
+    };
+    const handleChangeBranch = () => {
+        setValue('shipping.branchId', null);
+        setDisplayBranchName(null);
+    };
+    useEffect(() => {
+        if (firstRender && filteredShippingMethods.length === 1) {
+            setValue('shipping.shippingMethodId', filteredShippingMethods[0].id);
+            setFirstRender(false);
+        }
+    }, [firstRender, filteredShippingMethods]);
+    useEffect(() => {
+        const selectedShippingMethod = shippingMethods.find((method) => method.id === Number(shippingMethodId));
+        if (selectedShippingMethod) {
+            setValue('shipping.price', selectedShippingMethod.price);
+            if (selectedShippingMethod.type === ShippingTypes.PACKETA) {
+                if (!branchId) {
+                    const interval = setInterval(() => {
+                        if (window.Packeta && window.Packeta.Widget) {
+                            clearInterval(interval);
+                            window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
+                                language: lang,
+                            });
+                        }
+                    }, 100);
+                }
+            }
+            else {
+                setValue('shipping.branchId', null);
+                setDisplayBranchName(null);
+            }
+        }
+        else {
+            setValue('shipping.price', 0);
+        }
+    }, [shippingMethodId, shippingMethods, branchId]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScriptLoader, null),
+        React.createElement("div", null, isLoading ? (React.createElement(ShippingSkeleton, null)) : (React.createElement(React.Fragment, null, filteredShippingMethods.length === 0 ? (React.createElement(Typography, { variant: "h4", color: "error" }, t('event.tickets.stepper.5.error'))) : (React.createElement(React.Fragment, null,
+            React.createElement(Controller, { name: "shipping.shippingMethodId", control: control, render: ({ field, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset", sx: { width: '100%' } },
+                    React.createElement(RadioGroup, { ...field }, filteredShippingMethods.map((shippingMethod) => (React.createElement(ShippingMethodItem, { key: shippingMethod.id, active: Number(shippingMethodId) === shippingMethod.id },
+                        React.createElement(FormControlLabel, { value: shippingMethod.id, control: React.createElement(Radio, null), label: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%" },
+                                React.createElement(Stack, { direction: "row", alignItems: "center" },
+                                    React.createElement(Box, { sx: {
+                                            marginRight: 2,
+                                        } },
+                                        React.createElement(Typography, { sx: { lineHeight: 1.2 } }, t(`shipping_method.types.${shippingMethod.type}`)),
+                                        displayBranchName &&
+                                            shippingMethod.type === ShippingTypes.PACKETA &&
+                                            shippingMethod.id === Number(shippingMethodId) && (React.createElement(Typography, { variant: "caption", sx: { lineHeight: 1 } }, displayBranchName))),
+                                    paymentImages[shippingMethod.type]),
+                                shippingMethod.type === ShippingTypes.PACKETA &&
+                                    shippingMethod.id === Number(shippingMethodId) &&
+                                    branchId && (React.createElement(Box, null,
+                                    React.createElement(Button, { onClick: handleChangeBranch, variant: "outlined", size: "small" }, t('change'))))), sx: {
+                                '&:not(:last-of-type)': {
+                                    mb: 0,
+                                },
+                                '& .MuiFormControlLabel-label': {
+                                    width: '100%',
+                                    mr: 0,
+                                },
+                            } }))))),
+                    !!error && (React.createElement(FormHelperText, { error: !!error, sx: { mx: 0 } }, error?.message)))) }))))))));
+};
+
+export { Shipping as default };
+//# sourceMappingURL=Shipping.js.map

package/dist/esm/form/Shipping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shipping.js","sources":["../../../src/form/Shipping.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport useEventShippingMethods from '@hooks/data/useEventShippingMethods';\nimport { IEvent } from '@utils/types/event.type';\nimport ShippingSkeleton from '@form/shipping/ShippingSkeleton';\nimport {\n  Box,\n  Button,\n  FormControl,\n  FormControlLabel,\n  FormHelperText,\n  Radio,\n  RadioGroup,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport { ShippingMethodItem } from '@form/style';\nimport { Iconify } from '@components/iconify';\nimport { Controller, useFormContext, useWatch } from 'react-hook-form';\nimport { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';\nimport { ShippingTypes } from '@utils/data/shipping-method';\nimport useGlobal from '@hooks/useGlobal';\nimport ScriptLoader from '@form/ScriptLoader';\nimport { IEventProductForm } from '@utils/types/product.type';\n\ninterface Props {\n  event: IEvent;\n}\n\nconst Shipping: React.FC<Props> = ({ event }) => {\n  const { t, lang, options } = useGlobal();\n  const { data: shippingMethods, isLoading } = useEventShippingMethods(event.id, {\n    currency: event.currency,\n  });\n  const { control, watch, setValue } = useFormContext<ITicketForm>();\n  const tickets: Record<string, ITicketFormTicket[]> = useWatch({\n    name: 'tickets',\n    defaultValue: {},\n  });\n  const flatTickets: ITicketFormTicket[] = useMemo(() => Object.values(tickets).flat(), [tickets]);\n  const products: Record<string, IEventProductForm[]> = useWatch({\n    name: 'products',\n    defaultValue: {},\n  });\n  const flatProducts: IEventProductForm[] = useMemo(\n    () => Object.values(products).flat(),\n    [products]\n  );\n  const shippingMethodId = watch('shipping.shippingMethodId');\n  const branchId = watch('shipping.branchId');\n  const [displayBranchName, setDisplayBranchName] = useState<string | null>(null);\n  const [firstRender, setFirstRender] = useState<boolean>(true);\n  const filteredShippingMethods = useMemo(\n    () =>\n      shippingMethods?.filter(\n        (shippingMethod) =>\n          !flatProducts?.find((product) =>\n            product.excludedShippingMethodIds?.includes(shippingMethod?.id)\n          ) &&\n          !flatTickets.find((ticket) =>\n            ticket.products.find((product) =>\n              product.excludedShippingMethodIds?.includes(shippingMethod?.id)\n            )\n          )\n      ),\n    [shippingMethods, shippingMethodId, flatTickets, flatProducts]\n  );\n\n  const paymentImages = {\n    [ShippingTypes.PACKETA]: (\n      <Iconify icon=\"arcticons:packeta\" color=\"rgb(186,27,2)\" width={32} height={32} />\n    ),\n    [ShippingTypes.PICK_UP]: <Iconify icon=\"flowbite:store-solid\" width={32} height={32} />,\n  };\n\n  const onSelectBranch = (branch: any) => {\n    if (branch) {\n      setValue('shipping.branchId', branch.id);\n      setDisplayBranchName(branch.name);\n    } else {\n      setValue('shipping.shippingMethodId', null);\n      setValue('shipping.branchId', null);\n      setDisplayBranchName(null);\n    }\n  };\n\n  const handleChangeBranch = () => {\n    setValue('shipping.branchId', null);\n    setDisplayBranchName(null);\n  };\n\n  useEffect(() => {\n    if (firstRender && filteredShippingMethods.length === 1) {\n      setValue('shipping.shippingMethodId', filteredShippingMethods[0].id);\n      setFirstRender(false);\n    }\n  }, [firstRender, filteredShippingMethods]);\n\n  useEffect(() => {\n    const selectedShippingMethod = shippingMethods.find(\n      (method) => method.id === Number(shippingMethodId)\n    );\n\n    if (selectedShippingMethod) {\n      setValue('shipping.price', selectedShippingMethod.price);\n\n      if (selectedShippingMethod.type === ShippingTypes.PACKETA) {\n        if (!branchId) {\n          const interval = setInterval(() => {\n            if (window.Packeta && window.Packeta.Widget) {\n              clearInterval(interval);\n              window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {\n                language: lang,\n              });\n            }\n          }, 100);\n        }\n      } else {\n        setValue('shipping.branchId', null);\n        setDisplayBranchName(null);\n      }\n    } else {\n      setValue('shipping.price', 0);\n    }\n  }, [shippingMethodId, shippingMethods, branchId]);\n\n  return (\n    <>\n      <ScriptLoader />\n      <div>\n        {isLoading ? (\n          <ShippingSkeleton />\n        ) : (\n          <>\n            {filteredShippingMethods.length === 0 ? (\n              <Typography variant=\"h4\" color=\"error\">\n                {t('event.tickets.stepper.5.error')}\n              </Typography>\n            ) : (\n              <>\n                <Controller\n                  name=\"shipping.shippingMethodId\"\n                  control={control}\n                  render={({ field, fieldState: { error } }) => (\n                    <FormControl component=\"fieldset\" sx={{ width: '100%' }}>\n                      <RadioGroup {...field}>\n                        {filteredShippingMethods.map((shippingMethod) => (\n                          <ShippingMethodItem\n                            key={shippingMethod.id}\n                            active={Number(shippingMethodId) === shippingMethod.id}\n                          >\n                            <FormControlLabel\n                              value={shippingMethod.id}\n                              control={<Radio />}\n                              label={\n                                <Stack\n                                  direction=\"row\"\n                                  justifyContent=\"space-between\"\n                                  alignItems=\"center\"\n                                  width=\"100%\"\n                                >\n                                  <Stack direction=\"row\" alignItems=\"center\">\n                                    <Box\n                                      sx={{\n                                        marginRight: 2,\n                                      }}\n                                    >\n                                      <Typography sx={{ lineHeight: 1.2 }}>\n                                        {t(`shipping_method.types.${shippingMethod.type}`)}\n                                      </Typography>\n                                      {displayBranchName &&\n                                        shippingMethod.type === ShippingTypes.PACKETA &&\n                                        shippingMethod.id === Number(shippingMethodId) && (\n                                          <Typography variant=\"caption\" sx={{ lineHeight: 1 }}>\n                                            {displayBranchName}\n                                          </Typography>\n                                        )}\n                                    </Box>\n                                    {paymentImages[shippingMethod.type]}\n                                  </Stack>\n                                  {shippingMethod.type === ShippingTypes.PACKETA &&\n                                    shippingMethod.id === Number(shippingMethodId) &&\n                                    branchId && (\n                                      <Box>\n                                        <Button\n                                          onClick={handleChangeBranch}\n                                          variant=\"outlined\"\n                                          size=\"small\"\n                                        >\n                                          {t('change')}\n                                        </Button>\n                                      </Box>\n                                    )}\n                                </Stack>\n                              }\n                              sx={{\n                                '&:not(:last-of-type)': {\n                                  mb: 0,\n                                },\n                                '& .MuiFormControlLabel-label': {\n                                  width: '100%',\n                                  mr: 0,\n                                },\n                              }}\n                            />\n                          </ShippingMethodItem>\n                        ))}\n                      </RadioGroup>\n\n                      {!!error && (\n                        <FormHelperText error={!!error} sx={{ mx: 0 }}>\n                          {error?.message}\n                        </FormHelperText>\n                      )}\n                    </FormControl>\n                  )}\n                />\n              </>\n            )}\n          </>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default Shipping;\n"],"names":[],"mappings":"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"}

package/dist/esm/form/TicketForm.js

@@ -0,0 +1,432 @@
+import OrderSuccess from './OrderSuccess.js';
+import PaymentSuccess from './PaymentSuccess.js';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { Box, Typography, Grid, Stepper, Step, StepLabel, StepContent, Stack, Link } from '@mui/material';
+import { RHFCheckbox } from '../components/hook-form/RHFCheckbox.js';
+import FormProvider from '../components/hook-form/FormProvider.js';
+import dayjs from 'dayjs';
+import TicketSelection from './TicketSelection.js';
+import ContactPerson from './ContactPerson.js';
+import Payment from './Payment.js';
+import EmailConfirmation from './EmailConfirmation.js';
+import { getSearchParamsInObject } from '../utils/url.js';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { postOrder } from '../modules/order.js';
+import PaymentOverviewBox from './PaymentOverviewBox.js';
+import { getGtmPageView, getGtmViewCart, gtmViewCart, getGtmAddPaymentInfo, mapUserToUserData, gtmAddPaymentInfo, getGtmBeginCheckout, gtmBeginCheckout, getGtmPurchase, gtmPurchase } from '../utils/gtm.js';
+import ReleaseCountdown from './ReleaseCountdown.js';
+import { cloneObject } from '../utils/global.js';
+import PaymentPending from './PaymentPending.js';
+import MerchandiseSelection from './MerchandiseSelection.js';
+import TicketWithMerchandiseSelection from './TicketWithMerchandiseSelection.js';
+import useActiveEventProducts from '../hooks/data/useActiveEventProducts.js';
+import Shipping from './Shipping.js';
+import useErrors from '../hooks/useErrors.js';
+import { EventType } from '../utils/data/event.js';
+import TimeslotSelection from './TimeslotSelection.js';
+import useGlobal from '../hooks/useGlobal.js';
+import { Trans } from '../components/Trans.js';
+import { EVENTLOOK_ORDER_FORM_ID } from '../utils/data/global.js';
+import ChildEventSection from './ChildEvents.js';
+
+const TicketForm = ({ event, hasGopayIdSsr, selectedReleaseId, isIframe, isInline, }) => {
+    const { t, setGlobal, callbacks, links, user, options, showSnackbar, content } = useGlobal();
+    const { transformErrors } = useErrors(t('event.tickets.error.order'));
+    const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
+    const [paymentRedirect, setPaymentRedirect] = useState(null);
+    const [hasGopayId, setHasGopayId] = useState(hasGopayIdSsr);
+    const [isPaying, setIsPaying] = useState(false);
+    const [formStep, setFormStep] = useState(1);
+    const [showReleaseDate, setShowReleaseDate] = useState(dayjs(event.releaseDate).diff(dayjs()) > 0);
+    const [matchIsValidTel, setMatchIsValidTel] = useState(() => false);
+    const isNotReleased = dayjs(event.releaseDate).diff(dayjs()) > 0;
+    const hasFiredViewCart = useRef(false);
+    const hasFiredBeginCheckout = useRef(false);
+    const hasFiredPaymentMethod = useRef(false);
+    const item = {
+        currency: event.currency,
+        items: [
+            {
+                item_id: `event_${event.id}`,
+                item_name: event.name,
+                quantity: 1,
+            },
+        ],
+    };
+    const pixels = {
+        fb_pixel_id: event.facebookPixel?.facebookId,
+        tiktok_pixel_id: event.tiktokPixel?.tiktokId,
+    };
+    useEffect(() => {
+        import('mui-tel-input').then((mod) => {
+            setMatchIsValidTel(() => mod.matchIsValidTel);
+        });
+    }, []);
+    useEffect(() => {
+        setGlobal({
+            options: {
+                isIframe: isIframe === undefined ? false : isIframe,
+            },
+        });
+        if (!isIframe &&
+            event &&
+            (isNotReleased ||
+                (!!event.releaseEndDate && dayjs(event.releaseEndDate).isBefore(dayjs())) ||
+                dayjs(event.endDate).isBefore(dayjs()) ||
+                event.isSoldout ||
+                event.dateUnknown ||
+                event.isCanceled)) {
+            callbacks.detail();
+        }
+        if (event && !hasGopayId && !hasFiredViewCart.current) {
+            if (isIframe) {
+                setTimeout(() => {
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: getGtmPageView(location.href),
+                    }, '*');
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: getGtmViewCart(item, pixels),
+                    }, '*');
+                }, 1000);
+            }
+            else {
+                gtmViewCart(item, pixels);
+            }
+            hasFiredViewCart.current = true;
+        }
+        if (!hasFiredPaymentMethod.current) {
+            const item = {
+                currency: event.currency,
+                value: 0,
+                payment_type: 'PAYMENT_CARD',
+                items: [],
+            };
+            if (isIframe) {
+                setTimeout(() => {
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: getGtmAddPaymentInfo(item, pixels, user ? mapUserToUserData(user) : undefined),
+                    }, '*');
+                }, 1000);
+            }
+            else {
+                gtmAddPaymentInfo(item, pixels);
+            }
+            hasFiredPaymentMethod.current = true;
+        }
+    }, [event]);
+    const defaultValues = useMemo(() => {
+        const makeTicket = (overrides = {}) => ({
+            releaseId: '',
+            quantity: '',
+            itemName: '',
+            price: 0,
+            products: [],
+            extraFields: [],
+            ...overrides,
+        });
+        const tickets = {
+            [String(event.id)]: [
+                makeTicket({
+                    releaseId: selectedReleaseId ?? '',
+                }),
+            ],
+        };
+        event.children?.forEach((child) => {
+            tickets[String(child.id)] = [makeTicket()];
+        });
+        return {
+            uuid: null,
+            eventId: event.id,
+            tickets,
+            total: 0,
+            originalPrice: 0,
+            firstName: user?.firstName || '',
+            lastName: user?.lastName || '',
+            email: user?.email || '',
+            phone: user?.phone || '',
+            birthdate: user?.birthdate ? dayjs(user.birthdate) : null,
+            gender: user?.gender || '',
+            callback: '',
+            paymentMethodId: null,
+            paymentMethodOptionId: null,
+            termsAndConditions: false,
+            iframeCampaignId: undefined,
+            promoCode: null,
+            promoCodes: [],
+            products: {},
+            shipping: {
+                shippingMethodId: null,
+                branchId: null,
+                price: 0,
+            },
+            extraFields: event?.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+            })) || [],
+            selectedDate: null,
+            eventTimeslotId: null,
+        };
+    }, [user]);
+    const ValidationSchema = Yup.object().shape({
+        firstName: Yup.string().required(t('form.validation.required')),
+        lastName: Yup.string().required(t('form.validation.required')),
+        email: Yup.string().email(t('form.validation.email')).required(t('form.validation.required')),
+        phone: Yup.string()
+            .required(t('form.validation.required'))
+            .test('phone-checker', t('form.validation.phone'), (value) => value ? matchIsValidTel(value) : false),
+        birthdate: Yup.object()
+            .nullable()
+            .default(null)
+            .when([], {
+            is: () => !content?.form?.disableBirthDate,
+            then: (s) => s.required(t('form.validation.required')),
+            otherwise: (s) => s.notRequired(),
+        }),
+        gender: Yup.string().when([], {
+            is: () => !content?.form?.disableGender,
+            then: (schema) => schema.required(t('form.validation.required')),
+            otherwise: (schema) => schema.notRequired(),
+        }),
+        // tickets: Yup.object().test('tickets-validation', function (tickets) {
+        //   if (!tickets || typeof tickets !== 'object') return false;
+        //   for (const key of Object.keys(tickets)) {
+        //     const arr = tickets[key];
+        //     if (!Array.isArray(arr)) return false;
+        //     for (const t of arr) {
+        //       if (!t.releaseId || !t.quantity) {
+        //         return this.createError({ message: 'Invalid ticket selection' });
+        //       }
+        //     }
+        //   }
+        //   return true;
+        // }),
+        shipping: Yup.object().shape({
+            shippingMethodId: Yup.number().nullable(),
+            branchId: Yup.string().nullable(),
+            price: Yup.number(),
+        }),
+        paymentMethodId: Yup.number().nullable().required(t('form.validation.required')),
+        paymentMethodOptionId: Yup.number().nullable(),
+        termsAndConditions: Yup.boolean().isTrue(t('form.validation.terms_and_conditions')),
+        extraFields: Yup.array().of(Yup.object().shape({
+            value: Yup.string().test('is-required', function (value) {
+                const options = this.options;
+                if (event.extraFields[options.index].required && !value) {
+                    return this.createError({
+                        message: t('form.validation.required'),
+                    });
+                }
+                return true;
+            }),
+        })),
+    });
+    const methods = useForm({
+        // @ts-ignore
+        resolver: yupResolver(ValidationSchema),
+        defaultValues,
+    });
+    const values = methods.watch();
+    const onSubmit = async (values) => {
+        const allTickets = Object.values(values.tickets).flat();
+        if (allTickets.length === 1 &&
+            !allTickets[0].releaseId &&
+            !allTickets[0].quantity &&
+            !values.products.length) {
+            showSnackbar(t('form.validation.count_tickets_or_products'), {
+                variant: 'error',
+            });
+            return;
+        }
+        if (formStep === 1 && !isIframe) {
+            setFormStep(2);
+        }
+        else {
+            try {
+                const data = cloneObject(values);
+                data.promoCodeIds = values.promoCodes?.map((item) => item.id);
+                const urlParams = new URLSearchParams(window.location.search);
+                const iframeCallback = urlParams.get('callback');
+                data.callback = isIframe && iframeCallback ? String(iframeCallback) : window.location.href;
+                data.tickets = Object.entries(values.tickets).reduce((acc, [eventId, items]) => {
+                    acc[Number(eventId)] = items
+                        .filter((item) => !!item.quantity && !!item.releaseId)
+                        .map((item) => ({
+                        releaseId: Number(item.releaseId),
+                        quantity: Number(item.quantity),
+                        price: Number(item.price),
+                        itemName: item.itemName,
+                        products: item.products,
+                        extraFields: item.extraFields,
+                    }));
+                    return acc;
+                }, {});
+                const { data: orderData } = await postOrder(data);
+                const item = {
+                    uuid: values.uuid,
+                    currency: orderData.orderEntity.currency,
+                    value: orderData.orderEntity.totalPrice,
+                    tax: 0,
+                    payment_type: orderData.orderEntity.paymentType,
+                    transaction_id: String(orderData.orderEntity.number),
+                    coupon: orderData?.orderEntity?.promoCodes?.map((p) => p.code) || [],
+                    items: [
+                        ...orderData.tickets.map((ticket) => ({
+                            item_id: ticket.number,
+                            item_name: `${orderData.orderEntity.event.name} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
+                            price: ticket.price,
+                            quantity: 1,
+                        })),
+                        {
+                            item_id: 'service_fee',
+                            item_name: `Service fee`,
+                            price: orderData.orderEntity.extraFee,
+                            quantity: 1,
+                        },
+                    ],
+                };
+                const userData = {
+                    fn: orderData.customer.firstName,
+                    ln: orderData.customer.lastName,
+                    em: orderData.customer.email,
+                    ph: orderData.customer.phone,
+                };
+                if (isIframe) {
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: getGtmPurchase(null),
+                    }, '*');
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: getGtmPurchase(item, pixels, userData),
+                    }, '*');
+                }
+                else {
+                    gtmPurchase(null);
+                    gtmPurchase(item, pixels, userData);
+                }
+                setPaymentRedirect(orderData.gwUrl);
+                methods.reset();
+            }
+            catch (err) {
+                transformErrors(err.message);
+            }
+        }
+    };
+    const showShippingMethods = () => {
+        const hasProducts = Object.values(values.products ?? {}).some((arr) => arr.length > 0);
+        const ticketArrays = Object.values(values.tickets ?? {});
+        const allTickets = ticketArrays.flat();
+        const hasTicketProducts = allTickets.some((t) => (t.products?.length ?? 0) > 0);
+        const showShippingMethods = hasProducts || hasTicketProducts;
+        if (values.shipping.shippingMethodId !== null && !showShippingMethods) {
+            methods.setValue('shipping', { shippingMethodId: null, branchId: null, price: 0 });
+        }
+        return showShippingMethods;
+    };
+    useEffect(() => {
+        methods.reset(defaultValues);
+    }, [user, defaultValues]);
+    useEffect(() => {
+        const searchParams = getSearchParamsInObject(window.location.search);
+        const paymentId = searchParams.id;
+        const iframeCampaignId = Number(searchParams.iframeCampaignId);
+        setHasGopayId(!!paymentId);
+        if (!isNaN(iframeCampaignId)) {
+            methods.setValue('iframeCampaignId', iframeCampaignId);
+        }
+    }, [window.location.search]);
+    useEffect(() => {
+        const subscription = methods.watch((value, { name }) => {
+            if (JSON.stringify(defaultValues) !== JSON.stringify(value) &&
+                !hasFiredBeginCheckout.current) {
+                if (isIframe) {
+                    setTimeout(() => {
+                        parent.postMessage({
+                            type: 'eventlookFrameGtm',
+                            item: getGtmBeginCheckout(item, pixels),
+                        }, '*');
+                    }, 1000);
+                }
+                else {
+                    gtmBeginCheckout(item, pixels, user ? mapUserToUserData(user) : undefined);
+                }
+                hasFiredBeginCheckout.current = true;
+            }
+        });
+        return () => subscription.unsubscribe();
+    }, [methods.watch, defaultValues]);
+    useEffect(() => {
+        if (hasGopayId || isPaying || paymentRedirect) {
+            if (options?.autoscrollAfterViewChange) {
+                const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_ID);
+                if (orderForm) {
+                    orderForm.scrollIntoView({ behavior: 'smooth' });
+                }
+            }
+        }
+    }, [hasGopayId, isPaying, paymentRedirect]);
+    if (isIframe && isNotReleased && showReleaseDate)
+        return React.createElement(ReleaseCountdown, { event: event, setShowReleaseDate: setShowReleaseDate });
+    return (React.createElement(Box, { id: EVENTLOOK_ORDER_FORM_ID }, hasGopayId ? (React.createElement(PaymentSuccess, { setIsPaying: setIsPaying, isIframe: isIframe })) : isPaying ? (React.createElement(PaymentPending, null)) : paymentRedirect ? (React.createElement(OrderSuccess, { gwUrl: paymentRedirect, isIframe: isIframe, setIsPaying: setIsPaying, isInline: isInline })) : (
+    // @ts-ignore
+    React.createElement(FormProvider, { methods: methods, onSubmit: methods.handleSubmit(onSubmit) },
+        React.createElement(Typography, { className: "overview-card__event-info", display: { md: 'none' }, variant: "h4", sx: {
+                mb: 2,
+            } },
+            event.name,
+            " - ",
+            dayjs(event.startDate).format('DD.MM.YYYY HH:mm')),
+        React.createElement(Grid, { container: true, spacing: 2 },
+            React.createElement(Grid, { item: true, xs: 12, md: 8 },
+                React.createElement(Stepper, { orientation: "vertical" },
+                    event.type === EventType.RECURRING && (React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.6.title')),
+                        React.createElement(StepContent, null,
+                            React.createElement(TimeslotSelection, { event: event })))),
+                    React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.1.title')),
+                        React.createElement(StepContent, null, event.hasMerchandise ? (React.createElement(TicketWithMerchandiseSelection, { event: event })) : (React.createElement(TicketSelection, { event: event })))),
+                    event.hasMerchandise && eventProducts.length && (React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.4.title')),
+                        React.createElement(StepContent, null,
+                            React.createElement(MerchandiseSelection, { eventProducts: eventProducts, eventId: event.id, isLoading: isLoading })))),
+                    event.children.length && (React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.7.title')),
+                        React.createElement(StepContent, null,
+                            React.createElement(ChildEventSection, { events: event.children })))),
+                    React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.2.title')),
+                        React.createElement(StepContent, null,
+                            React.createElement(ContactPerson, { event: event }))),
+                    event.hasMerchandise && showShippingMethods() && (React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.5.title')),
+                        React.createElement(StepContent, null,
+                            React.createElement(Shipping, { event: event })))),
+                    React.createElement(Step, { active: true },
+                        React.createElement(StepLabel, null, t('event.tickets.stepper.3.title')),
+                        React.createElement(StepContent, null,
+                            React.createElement(Payment, { event: event })))),
+                React.createElement(Stack, { mt: 2, ml: 4 },
+                    React.createElement(RHFCheckbox, { name: "termsAndConditions", label: React.createElement(Trans, { text: "event.tickets.terms_and_conditions", values: {
+                                termsAndConditionsCompanies: options?.termsAndConditionsCompanies
+                                    ? options.termsAndConditionsCompanies.join(t('and'))
+                                    : ['Eventlook', 'GoPay'].join(` ${t('and')} `),
+                            }, components: {
+                                0: React.createElement(CustomLink, { key: 2, href: links.termsAndConditions, target: "_blank" }),
+                                1: React.createElement(CustomLink, { key: 1, href: links.gdpr, target: "_blank" }),
+                            } }) }))),
+            React.createElement(Grid, { item: true, xs: 12, md: 4 },
+                React.createElement(PaymentOverviewBox, { event: event }))),
+        React.createElement(EmailConfirmation, { open: formStep === 2 && !isIframe, onClose: () => setFormStep(1), 
+            // @ts-ignore
+            onConfirm: methods.handleSubmit(onSubmit) })))));
+};
+const CustomLink = ({ href = '', children, ...other }) => (React.createElement(Link, { href: href, ...other }, children));
+
+export { TicketForm as default };
+//# sourceMappingURL=TicketForm.js.map