@eventlook/sdk 1.4.46-beta.2 → 1.4.46-beta.4

package/dist/cjs/form/Shipping.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useEventShippingMethods = require('../hooks/data/useEventShippingMethods.js');
+var ShippingSkeleton = require('./shipping/ShippingSkeleton.js');
+var material = require('@mui/material');
+var style = require('./style.js');
+var Iconify = require('../components/iconify/Iconify.js');
+var reactHookForm = require('react-hook-form');
+var shippingMethod = require('../utils/data/shipping-method.js');
+var useGlobal = require('../hooks/useGlobal.js');
+var ScriptLoader = require('./ScriptLoader.js');
+
+const Shipping = ({ event }) => {
+    const { t, lang, options } = useGlobal.default();
+    const { data: shippingMethods, isLoading } = useEventShippingMethods.default(event.id, {
+        currency: event.currency,
+    });
+    const { control, watch, setValue } = reactHookForm.useFormContext();
+    const tickets = reactHookForm.useWatch({
+        name: 'tickets',
+        defaultValue: {},
+    });
+    const flatTickets = React.useMemo(() => Object.values(tickets).flat(), [tickets]);
+    const products = reactHookForm.useWatch({
+        name: 'products',
+        defaultValue: {},
+    });
+    const flatProducts = React.useMemo(() => Object.values(products).flat(), [products]);
+    const shippingMethodId = watch('shipping.shippingMethodId');
+    const branchId = watch('shipping.branchId');
+    const [displayBranchName, setDisplayBranchName] = React.useState(null);
+    const [firstRender, setFirstRender] = React.useState(true);
+    const filteredShippingMethods = React.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 = {
+        [shippingMethod.ShippingTypes.PACKETA]: (React.createElement(Iconify.default, { icon: "arcticons:packeta", color: "rgb(186,27,2)", width: 32, height: 32 })),
+        [shippingMethod.ShippingTypes.PICK_UP]: React.createElement(Iconify.default, { 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);
+    };
+    React.useEffect(() => {
+        if (firstRender && filteredShippingMethods.length === 1) {
+            setValue('shipping.shippingMethodId', filteredShippingMethods[0].id);
+            setFirstRender(false);
+        }
+    }, [firstRender, filteredShippingMethods]);
+    React.useEffect(() => {
+        const selectedShippingMethod = shippingMethods.find((method) => method.id === Number(shippingMethodId));
+        if (selectedShippingMethod) {
+            setValue('shipping.price', selectedShippingMethod.price);
+            if (selectedShippingMethod.type === shippingMethod.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.default, null),
+        React.createElement("div", null, isLoading ? (React.createElement(ShippingSkeleton.default, null)) : (React.createElement(React.Fragment, null, filteredShippingMethods.length === 0 ? (React.createElement(material.Typography, { variant: "h4", color: "error" }, t('event.tickets.stepper.5.error'))) : (React.createElement(React.Fragment, null,
+            React.createElement(reactHookForm.Controller, { name: "shipping.shippingMethodId", control: control, render: ({ field, fieldState: { error } }) => (React.createElement(material.FormControl, { component: "fieldset", sx: { width: '100%' } },
+                    React.createElement(material.RadioGroup, { ...field }, filteredShippingMethods.map((shippingMethod$1) => (React.createElement(style.ShippingMethodItem, { key: shippingMethod$1.id, active: Number(shippingMethodId) === shippingMethod$1.id },
+                        React.createElement(material.FormControlLabel, { value: shippingMethod$1.id, control: React.createElement(material.Radio, null), label: React.createElement(material.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%" },
+                                React.createElement(material.Stack, { direction: "row", alignItems: "center" },
+                                    React.createElement(material.Box, { sx: {
+                                            marginRight: 2,
+                                        } },
+                                        React.createElement(material.Typography, { sx: { lineHeight: 1.2 } }, t(`shipping_method.types.${shippingMethod$1.type}`)),
+                                        displayBranchName &&
+                                            shippingMethod$1.type === shippingMethod.ShippingTypes.PACKETA &&
+                                            shippingMethod$1.id === Number(shippingMethodId) && (React.createElement(material.Typography, { variant: "caption", sx: { lineHeight: 1 } }, displayBranchName))),
+                                    paymentImages[shippingMethod$1.type]),
+                                shippingMethod$1.type === shippingMethod.ShippingTypes.PACKETA &&
+                                    shippingMethod$1.id === Number(shippingMethodId) &&
+                                    branchId && (React.createElement(material.Box, null,
+                                    React.createElement(material.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(material.FormHelperText, { error: !!error, sx: { mx: 0 } }, error?.message)))) }))))))));
+};
+
+exports.default = Shipping;
+//# sourceMappingURL=Shipping.js.map

package/dist/cjs/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":["useGlobal","useEventShippingMethods","useFormContext","useWatch","useMemo","useState","ShippingTypes","Iconify","useEffect","ScriptLoader","ShippingSkeleton","Typography","Controller","FormControl","RadioGroup","shippingMethod","ShippingMethodItem","FormControlLabel","Radio","Stack","Box","Button","FormHelperText"],"mappings":"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"}

package/dist/cjs/form/TicketForm.js

@@ -0,0 +1,488 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OrderSuccess = require('./OrderSuccess.js');
+var PaymentSuccess = require('./PaymentSuccess.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var material = require('@mui/material');
+var RHFCheckbox = require('../components/hook-form/RHFCheckbox.js');
+var FormProvider = require('../components/hook-form/FormProvider.js');
+var dayjs = require('dayjs');
+var TicketSelection = require('./tickets/TicketSelection.js');
+var ContactPerson = require('./ContactPerson.js');
+var Payment = require('./Payment.js');
+var EmailConfirmation = require('./EmailConfirmation.js');
+var url = require('../utils/url.js');
+var Yup = require('yup');
+var yup = require('@hookform/resolvers/yup');
+var order = require('../modules/order.js');
+var PaymentOverviewBox = require('./PaymentOverviewBox.js');
+var gtm = require('../utils/gtm.js');
+var ReleaseCountdown = require('./ReleaseCountdown.js');
+var global$1 = require('../utils/global.js');
+var PaymentPending = require('./PaymentPending.js');
+var MerchandiseSelection = require('./merchandise/MerchandiseSelection.js');
+var TicketWithMerchandiseSelection = require('./tickets/TicketWithMerchandiseSelection.js');
+var useActiveEventProducts = require('../hooks/data/useActiveEventProducts.js');
+var Shipping = require('./Shipping.js');
+var useErrors = require('../hooks/useErrors.js');
+var event = require('../utils/data/event.js');
+var TimeslotSelection = require('./TimeslotSelection.js');
+var useGlobal = require('../hooks/useGlobal.js');
+var Trans = require('../components/Trans.js');
+var global = require('../utils/data/global.js');
+var ChildEvents = require('./ChildEvents.js');
+var TicketSelectionMap = require('./tickets/TicketSelectionMap.js');
+var PaymentOverviewDrawer = require('./PaymentOverviewDrawer.js');
+var place = require('../utils/place.js');
+var index = require('./services/index.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var Yup__namespace = /*#__PURE__*/_interopNamespaceDefault(Yup);
+
+const TicketForm = ({ event: event$1, hasGopayIdSsr, selectedReleaseId, isIframe, isInline, headerSlot, }) => {
+    const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } = useGlobal.default();
+    const { transformErrors } = useErrors.default(t('event.tickets.error.order'));
+    const { data: eventProducts, isLoading } = useActiveEventProducts.default(event$1.id);
+    const [paymentRedirect, setPaymentRedirect] = React.useState(null);
+    const [hasGopayId, setHasGopayId] = React.useState(hasGopayIdSsr);
+    const [isPaying, setIsPaying] = React.useState(false);
+    const [formStep, setFormStep] = React.useState(1);
+    const [showReleaseDate, setShowReleaseDate] = React.useState(dayjs(event$1.releaseDate).diff(dayjs()) > 0);
+    const [matchIsValidTel, setMatchIsValidTel] = React.useState(() => false);
+    const isNotReleased = dayjs(event$1.releaseDate).diff(dayjs()) > 0;
+    const hasFiredViewCart = React.useRef(false);
+    const hasFiredBeginCheckout = React.useRef(false);
+    const hasFiredPaymentMethod = React.useRef(false);
+    const item = {
+        currency: event$1.currency,
+        items: [
+            {
+                item_id: `event_${event$1.id}`,
+                item_name: event$1.name,
+                quantity: 1,
+            },
+        ],
+    };
+    const pixels = {
+        fb_pixel_id: event$1.facebookPixel?.facebookId,
+        tiktok_pixel_id: event$1.tiktokPixel?.tiktokId,
+    };
+    React.useEffect(() => {
+        import('mui-tel-input').then((mod) => {
+            setMatchIsValidTel(() => mod.matchIsValidTel);
+        });
+    }, []);
+    React.useEffect(() => {
+        setGlobal({
+            options: {
+                isIframe: isIframe === undefined ? false : isIframe,
+            },
+        });
+        if (!isIframe &&
+            event$1 &&
+            (isNotReleased ||
+                (!!event$1.releaseEndDate && dayjs(event$1.releaseEndDate).isBefore(dayjs())) ||
+                dayjs(event$1.endDate).isBefore(dayjs()) ||
+                event$1.isSoldout ||
+                event$1.dateUnknown ||
+                event$1.isCanceled)) {
+            callbacks.detail();
+        }
+        if (event$1 && !hasGopayId && !hasFiredViewCart.current) {
+            if (isIframe) {
+                setTimeout(() => {
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: gtm.getGtmPageView(location.href),
+                    }, '*');
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: gtm.getGtmViewCart(item, pixels),
+                    }, '*');
+                }, 1000);
+            }
+            else {
+                gtm.gtmViewCart(item, pixels);
+            }
+            hasFiredViewCart.current = true;
+        }
+        if (!hasFiredPaymentMethod.current) {
+            const item = {
+                currency: event$1.currency,
+                value: 0,
+                payment_type: 'PAYMENT_CARD',
+                items: [],
+            };
+            if (isIframe) {
+                setTimeout(() => {
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: gtm.getGtmAddPaymentInfo(item, pixels, user ? gtm.mapUserToUserData(user) : undefined),
+                    }, '*');
+                }, 1000);
+            }
+            else {
+                gtm.gtmAddPaymentInfo(item, pixels);
+            }
+            hasFiredPaymentMethod.current = true;
+        }
+    }, [event$1]);
+    const defaultValues = React.useMemo(() => {
+        const makeTicket = (overrides = {}) => ({
+            releaseId: '',
+            quantity: '',
+            itemName: '',
+            price: 0,
+            products: [],
+            extraFields: [],
+            ...overrides,
+        });
+        const tickets = {
+            [String(event$1.id)]: [
+                makeTicket({
+                    releaseId: selectedReleaseId ?? '',
+                }),
+            ],
+        };
+        event$1.children?.forEach((child) => {
+            tickets[String(child.id)] = [makeTicket()];
+        });
+        return {
+            uuid: null,
+            eventId: event$1.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,
+            ticketInsurance: false,
+            ticketInsurancePrice: 0,
+            ticketInsurancePricePerUnit: 0,
+            smsNotification: false,
+            smsNotificationPrice: 0,
+            iframeCampaignId: undefined,
+            promoCodes: [],
+            products: {},
+            shipping: {
+                shippingMethodId: null,
+                branchId: null,
+                price: 0,
+            },
+            extraFields: event$1?.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+            })) || [],
+            selectedDate: null,
+            eventTimeslotId: null,
+            isPaymentVerify: false,
+        };
+    }, [user]);
+    const ValidationSchema = Yup__namespace.object().shape({
+        firstName: Yup__namespace.string().required(t('form.validation.required')),
+        lastName: Yup__namespace.string().required(t('form.validation.required')),
+        email: Yup__namespace.string().email(t('form.validation.email')).required(t('form.validation.required')),
+        phone: Yup__namespace.string()
+            .required(t('form.validation.required'))
+            .test('phone-checker', t('form.validation.phone'), (value) => value ? matchIsValidTel(value) : false),
+        birthdate: Yup__namespace.object()
+            .nullable()
+            .default(null)
+            .when([], {
+            is: () => !content?.form?.disableBirthDate,
+            then: (s) => s.required(t('form.validation.required')),
+            otherwise: (s) => s.notRequired(),
+        }),
+        gender: Yup__namespace.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__namespace.object().shape({
+            shippingMethodId: Yup__namespace.number().nullable(),
+            branchId: Yup__namespace.string().nullable(),
+            price: Yup__namespace.number(),
+        }),
+        paymentMethodId: Yup__namespace.number().nullable().required(t('form.validation.required')),
+        paymentMethodOptionId: Yup__namespace.number().nullable(),
+        termsAndConditions: Yup__namespace.boolean().isTrue(t('form.validation.terms_and_conditions')),
+        ticketInsurance: Yup__namespace.boolean(),
+        smsNotification: Yup__namespace.boolean(),
+        extraFields: Yup__namespace.array().of(Yup__namespace.object().shape({
+            value: Yup__namespace.string().test('is-required', function (value) {
+                const options = this.options;
+                if (event$1.extraFields[options.index].required && !value) {
+                    return this.createError({
+                        message: t('form.validation.required'),
+                    });
+                }
+                return true;
+            }),
+        })),
+    });
+    const methods = reactHookForm.useForm({
+        // @ts-ignore
+        resolver: yup.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 = global$1.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');
+                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,
+                        eventTimeslotId: item.eventTimeslotId,
+                        location: item.location,
+                    }));
+                    return acc;
+                }, {});
+                const { data: orderData } = await order.postOrder(data);
+                localStorage.removeItem('cartToken');
+                const items = [
+                    ...orderData.tickets.map((ticket) => ({
+                        item_id: ticket.number,
+                        item_name: `${orderData.orderEntity.event.name} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
+                        price: ticket.price,
+                        quantity: 1,
+                    })),
+                ];
+                if (orderData.orderEntity.extraFee) {
+                    items.push({
+                        item_id: 'service_fee',
+                        item_name: `Service fee`,
+                        price: orderData.orderEntity.extraFee,
+                        quantity: 1,
+                    });
+                }
+                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,
+                };
+                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: gtm.getGtmPurchase(null),
+                    }, '*');
+                    parent.postMessage({
+                        type: 'eventlookFrameGtm',
+                        item: gtm.getGtmPurchase(item, pixels, userData),
+                    }, '*');
+                }
+                else {
+                    gtm.gtmPurchase(null);
+                    gtm.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;
+    };
+    React.useEffect(() => {
+        methods.reset(defaultValues);
+    }, [user, defaultValues]);
+    React.useEffect(() => {
+        const searchParams = url.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]);
+    React.useEffect(() => {
+        const subscription = methods.watch((value) => {
+            if (JSON.stringify(defaultValues) !== JSON.stringify(value) &&
+                !hasFiredBeginCheckout.current) {
+                if (isIframe) {
+                    setTimeout(() => {
+                        parent.postMessage({
+                            type: 'eventlookFrameGtm',
+                            item: gtm.getGtmBeginCheckout(item, pixels),
+                        }, '*');
+                    }, 1000);
+                }
+                else {
+                    gtm.gtmBeginCheckout(item, pixels, user ? gtm.mapUserToUserData(user) : undefined);
+                }
+                hasFiredBeginCheckout.current = true;
+            }
+        });
+        return () => subscription.unsubscribe();
+    }, [methods.watch, defaultValues]);
+    React.useEffect(() => {
+        if (hasGopayId || isPaying || paymentRedirect) {
+            if (options?.autoscrollAfterViewChange) {
+                const orderForm = document.getElementById(global.EVENTLOOK_ORDER_FORM_CONTAINER_ID);
+                if (orderForm) {
+                    orderForm.scrollIntoView({ behavior: 'smooth' });
+                }
+            }
+        }
+    }, [hasGopayId, isPaying, paymentRedirect]);
+    if (isIframe && isNotReleased && showReleaseDate)
+        return React.createElement(ReleaseCountdown.default, { event: event$1, setShowReleaseDate: setShowReleaseDate });
+    return (React.createElement(material.Box, { id: global.EVENTLOOK_ORDER_FORM_CONTAINER_ID }, hasGopayId ? (React.createElement(PaymentSuccess.default, { setIsPaying: setIsPaying, isIframe: isIframe, pixels: pixels })) : isPaying ? (React.createElement(PaymentPending.default, null)) : paymentRedirect ? (React.createElement(OrderSuccess.default, { gwUrl: paymentRedirect, isIframe: isIframe, setIsPaying: setIsPaying, isInline: isInline })) : (React.createElement(FormProvider.default, { methods: methods, 
+        // @ts-ignore
+        onSubmit: methods.handleSubmit(onSubmit), formId: global.EVENTLOOK_ORDER_FORM_ID },
+        React.createElement(material.Stack, { className: "overview-card__event-info", display: { md: 'none' }, sx: {
+                mb: 2,
+            } },
+            React.createElement(material.Typography, { variant: "h3", component: "h1" }, event$1.name),
+            React.createElement(material.Typography, { variant: "h4", component: "h2" }, dayjs(event$1.startDate).format('DD.MM.YYYY HH:mm')),
+            React.createElement(material.Typography, { variant: "body2" }, place.getPlaceAsString(event$1.place)),
+            headerSlot ? React.createElement(React.Fragment, null, headerSlot) : null),
+        React.createElement(material.Grid, { container: true, spacing: 2 },
+            React.createElement(material.Grid, { item: true, xs: 12, md: 8 },
+                React.createElement(material.Stepper, { orientation: "vertical", sx: (theme) => ({
+                        [theme.breakpoints.down('sm')]: {
+                            '& .MuiStepContent-root': {
+                                borderLeftWidth: 0,
+                                paddingLeft: 0,
+                                marginLeft: 0,
+                            },
+                            '& .MuiStepConnector-line': { borderLeftWidth: 0 },
+                        },
+                    }) },
+                    event$1.type === event.EventType.RECURRING && (React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.6.title')),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(TimeslotSelection.default, { event: event$1 })))),
+                    React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.1.title')),
+                        React.createElement(material.StepContent, null, event$1.mapId && seatingIframeUrl ? (React.createElement(TicketSelectionMap.default, { event: event$1 })) : event$1.hasMerchandise ? (React.createElement(TicketWithMerchandiseSelection.default, { event: event$1 })) : (React.createElement(TicketSelection.default, { event: event$1 })))),
+                    event$1.hasMerchandise && eventProducts.length && (React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.4.title')),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(MerchandiseSelection.default, { eventProducts: eventProducts, eventId: event$1.id, isLoading: isLoading })))),
+                    React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.8.title')),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(index.default, { event: event$1 }))),
+                    event$1.children.length && (React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.7.title')),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(ChildEvents.default, { events: event$1.children })))),
+                    React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.2.title')),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(ContactPerson.default, { event: event$1 }))),
+                    event$1.hasMerchandise && showShippingMethods() && (React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t('event.tickets.stepper.5.title')),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(Shipping.default, { event: event$1 })))),
+                    React.createElement(material.Step, { active: true },
+                        React.createElement(material.StepLabel, null, t(`event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`)),
+                        React.createElement(material.StepContent, null,
+                            React.createElement(Payment.default, { event: event$1 })))),
+                React.createElement(material.Stack, { mt: 2, ml: { xs: 1, md: 4 } },
+                    React.createElement(RHFCheckbox.RHFCheckbox, { name: "termsAndConditions", label: React.createElement(Trans.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(material.Grid, { item: true, xs: 12, md: 4, sx: { display: { xs: 'none', md: 'block' } } },
+                React.createElement(PaymentOverviewBox.default, { event: event$1 }))),
+        React.createElement(PaymentOverviewDrawer.default, { event: event$1, totalPrice: values.total }),
+        React.createElement(EmailConfirmation.default, { open: formStep === 2 && !isIframe, onClose: () => setFormStep(1), 
+            // @ts-ignore
+            onConfirm: methods.handleSubmit(onSubmit) })))));
+};
+const CustomLink = ({ href = '', children, ...other }) => (React.createElement(material.Link, { href: href, ...other }, children));
+
+exports.default = TicketForm;
+//# sourceMappingURL=TicketForm.js.map