@eventlook/sdk 1.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSuccess.js","sources":["../../../src/form/OrderSuccess.tsx"],"sourcesContent":["import { m } from 'framer-motion';\nimport { Box, Button, Typography, Stack } from '@mui/material';\nimport { Iconify } from '@components/iconify';\nimport { MotionContainer, varBounce } from '@components/animate';\nimport React, { Dispatch, SetStateAction, useEffect, useState } from 'react';\nimport useGlobal from '@hooks/useGlobal.ts';\nimport { Image } from '@components';\n\ninterface Props {\n  gwUrl: string;\n  setIsPaying: Dispatch<SetStateAction<boolean>>;\n  isIframe?: boolean;\n  isInline?: boolean;\n}\n\nconst OrderSuccess: React.FC<Props> = ({ gwUrl, setIsPaying, isIframe, isInline }) => {\n  const { t } = useGlobal();\n  const [seconds, setSeconds] = useState<number>(10);\n  const { content } = useGlobal();\n\n  useEffect(() => {\n    window.scrollTo({ top: 0 });\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setSeconds(seconds - 1);\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [seconds]);\n\n  useEffect(() => {\n    if (Number(seconds) < 0) {\n      handleRedirect();\n    }\n  }, [seconds]);\n\n  const handleRedirect = () => {\n    if (!isInline && isIframe) {\n      parent.postMessage({ type: 'eventlookFrameGopayRedirect', gwUrl }, '*');\n    } else {\n      setIsPaying(true);\n      window.location.replace(gwUrl);\n    }\n  };\n\n  return (\n    <MotionContainer sx={{ textAlign: 'center' }} className=\"iframe__order-success\">\n      <m.div variants={varBounce().in}>\n        {content?.orderConfirmation?.image ? (\n          <Image\n            src={content.orderConfirmation.image.src}\n            width=\"100%\"\n            maxWidth={content.orderConfirmation.image.maxWidth}\n          />\n        ) : (\n          <Box sx={{ fontSize: 128 }}>💸</Box>\n        )}\n      </m.div>\n\n      <Stack spacing={1} sx={{ my: 5 }}>\n        <m.div variants={varBounce().in}>\n          <Typography variant=\"h3\">\n            {content?.orderConfirmation?.title || t('event.tickets.order_success.title')}\n          </Typography>\n        </m.div>\n\n        <m.div variants={varBounce().in}>\n          <Typography sx={{ color: 'text.secondary' }} maxWidth={550} marginX=\"auto\">\n            {t('event.tickets.order_success.description', {\n              countdown: Number(seconds) < 0 ? 0 : Number(seconds),\n            })}\n          </Typography>\n        </m.div>\n      </Stack>\n\n      <Button\n        onClick={handleRedirect}\n        size=\"large\"\n        color=\"primary\"\n        variant=\"contained\"\n        endIcon={<Iconify icon=\"eva:external-link-outline\" />}\n      >\n        {t('pay')}\n      </Button>\n    </MotionContainer>\n  );\n};\n\nexport default OrderSuccess;\n"],"names":[],"mappings":"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"}

package/dist/esm/form/Payment.js

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Stack, TextField, Button, Typography, IconButton, FormControl, RadioGroup, FormControlLabel, Radio, Divider, FormHelperText } from '@mui/material';
+import useAllowedPaymentMethods from '../hooks/data/useAllowedPaymentMethods.js';
+import { useFormContext, Controller } from 'react-hook-form';
+import { PaymentWrapper, PaymentItem, PaymentSwiftWrapper } from './style.js';
+import Image from '../components/Image.js';
+import Label from '../components/Label.js';
+import PaymentSkeleton from './payment/PaymentSkeleton.js';
+import RHFRadioGroup from '../components/hook-form/RHFRadioGroup.js';
+import { postPromoCodeApply } from '../modules/promo-code.js';
+import useGlobal from '../hooks/useGlobal.js';
+import { PromoCodeTypes } from '../utils/data/promo-code.js';
+import { throttle } from 'lodash';
+import 'framer-motion';
+import '../components/animate/IconButtonAnimate.js';
+import '@mui/material/styles';
+import '@mui/material/useMediaQuery';
+import Iconify from '../components/iconify/Iconify.js';
+
+const Payment = ({ event }) => {
+    const { t, lang } = useGlobal();
+    const { showSnackbar } = useGlobal();
+    const { data, isLoading } = useAllowedPaymentMethods(event.currency);
+    const { control, watch, setValue } = useFormContext();
+    const paymentMethodId = watch('paymentMethodId');
+    const paymentMethodOptionId = watch('paymentMethodOptionId');
+    const [promoCode, setPromoCode] = useState('');
+    const [promoCodeError, setPromoCodeError] = useState(null);
+    const [combine, setCombine] = useState(true);
+    const promoCodes = watch('promoCodes');
+    const originalPrice = watch('originalPrice');
+    const handleSubmit = throttle(async () => {
+        if (!promoCode) {
+            setPromoCodeError(t('form.validation.required'));
+            return;
+        }
+        try {
+            if (promoCodes.find((i) => i.code === promoCode)) {
+                setPromoCodeError(t('form.validation.promo_code_applied'));
+                return;
+            }
+            if (!combine) {
+                setPromoCodeError(t('form.validation.promo_code_cant_combine'));
+                return;
+            }
+            const res = await postPromoCodeApply(promoCode, event.id);
+            const promo = res.data.data;
+            if (promo && promo.minPurchaseAmount && promo.minPurchaseAmount > originalPrice) {
+                setPromoCodeError(t('form.validation.min_purchase_not_met') +
+                    promo.minPurchaseAmount +
+                    ' ' +
+                    event.currency);
+                return;
+            }
+            if (!promo.combine && promoCodes.length === 0) {
+                setCombine(false);
+            }
+            else if (!promo.combine) {
+                setPromoCodeError(t('form.validation.promo_code_cant_combine'));
+                return;
+            }
+            setValue('promoCodes', [...promoCodes, promo]);
+            showSnackbar(res.message);
+            setPromoCodeError(null);
+            setValue('promoCode', promo);
+            setPromoCode('');
+        }
+        catch (err) {
+            setPromoCodeError(t('form.validation.promo_code_invalid'));
+            console.error(err);
+            setValue('promoCode', null);
+        }
+    }, 1000, { leading: true, trailing: false } // Allow immediate execution but prevent spam
+    );
+    const removePromoCode = (promoCodeToRemove) => {
+        const newPromoCodes = promoCodes.filter((promoC) => promoC.code !== promoCodeToRemove);
+        if (!newPromoCodes.find((promoC) => promoC.combine))
+            setCombine(true);
+        setValue('promoCodes', newPromoCodes);
+    };
+    const handleKeyDown = async (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (promoCode)
+                await handleSubmit();
+        }
+    };
+    useEffect(() => {
+        if (promoCodes.length === 0)
+            return;
+        const highest = promoCodes.sort((a, b) => b.minPurchaseAmount - a.minPurchaseAmount)[0]
+            .minPurchaseAmount;
+        if (originalPrice < highest) {
+            const newPromoCodes = promoCodes.filter((promoCode) => promoCode.minPurchaseAmount <= originalPrice);
+            if (newPromoCodes.length === 0) {
+                setCombine(true);
+            }
+            setValue('promoCodes', newPromoCodes);
+        }
+    }, [originalPrice]);
+    useEffect(() => {
+        if (data) {
+            if (!paymentMethodId && !!data.length) {
+                setValue('paymentMethodId', data[0].id);
+            }
+            const selectedPayment = data && data?.length && data.find((payment) => payment.id === Number(paymentMethodId));
+            if (selectedPayment && !!selectedPayment.options.length && !paymentMethodOptionId) {
+                setValue('paymentMethodOptionId', selectedPayment.options[0].id);
+            }
+            else if (selectedPayment && !!selectedPayment.options.length && !!paymentMethodOptionId) {
+                const existingOption = selectedPayment.options.find((option) => option.id === Number(paymentMethodOptionId));
+                if (!existingOption) {
+                    setValue('paymentMethodOptionId', selectedPayment.options[0].id);
+                }
+            }
+            else if (selectedPayment && !selectedPayment?.options.length) {
+                setValue('paymentMethodOptionId', null);
+            }
+        }
+    }, [data, paymentMethodId, paymentMethodOptionId]);
+    return (React.createElement(Box, null,
+        React.createElement(Box, { className: "payment__promo-code" },
+            React.createElement(Stack, { direction: "row", spacing: 2 },
+                React.createElement(TextField, { name: "promoCode", size: "small", label: t('form.labels.promo_code'), value: promoCode, onChange: (e) => setPromoCode(e.target.value), onBlur: (e) => {
+                        if (!e.target.value.trim())
+                            setPromoCodeError(null);
+                    }, onKeyDown: handleKeyDown, error: !!promoCodeError, helperText: promoCodeError, fullWidth: true }),
+                React.createElement(Box, null,
+                    React.createElement(Button, { size: "large", type: "button", variant: "contained", onClick: handleSubmit, disabled: !promoCode, sx: { height: 51 } }, t('apply')))),
+            React.createElement(Stack, { paddingTop: 3, direction: "column", spacing: 1 }, promoCodes.length > 0 &&
+                promoCodes.map((item) => (React.createElement(Stack, { marginTop: 3, direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 2, key: item.code },
+                    React.createElement(React.Fragment, null,
+                        React.createElement(Stack, { direction: "row", alignItems: "center" },
+                            React.createElement(Label, { variant: "filled", sx: { textTransform: 'none', cursor: 'pointer' } }, item.code),
+                            React.createElement(Typography, { variant: "subtitle2", sx: { ml: 1 } },
+                                "-",
+                                ' ',
+                                item.value +
+                                    `${item.type === PromoCodeTypes.FIXED ? ' ' + event.currency : '%'}`)),
+                        React.createElement(Box, null,
+                            React.createElement(IconButton, { color: "primary", onClick: () => removePromoCode(item.code), "aria-label": "delete" },
+                                React.createElement(Iconify, { icon: "carbon:trash-can" }))))))))),
+        React.createElement(Typography, { variant: "h4", mt: 2 }, t('event.tickets.stepper.3.subtitle')),
+        isLoading ? (React.createElement(PaymentSkeleton, { sx: { marginTop: 1 } })) : (React.createElement(PaymentWrapper, null,
+            React.createElement(Controller, { name: "paymentMethodId", control: control, render: ({ field, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset" },
+                    React.createElement(RadioGroup, { ...field }, data &&
+                        data?.length &&
+                        data?.map((payment) => (React.createElement(PaymentItem, { key: payment.type, active: !!paymentMethodId && Number(paymentMethodId) === payment.id },
+                            React.createElement(FormControlLabel, { value: payment.id, control: React.createElement(Radio, null), label: React.createElement(Stack, { direction: "row", alignItems: "center" },
+                                    React.createElement(Typography, { sx: {
+                                            marginRight: 2,
+                                        } }, payment.label[lang]),
+                                    React.createElement(Image, { src: payment.image.url, sx: {
+                                            height: '20px',
+                                            '& .wrapper img': {
+                                                objectFit: 'contain',
+                                            },
+                                        } })), sx: {
+                                    '&:not(:last-of-type)': {
+                                        mb: 0,
+                                    },
+                                } }),
+                            !!payment.options.length &&
+                                !!paymentMethodId &&
+                                Number(paymentMethodId) === payment.id && (React.createElement(PaymentSwiftWrapper, null,
+                                React.createElement(Divider, { sx: { mb: 2 } }),
+                                React.createElement(RHFRadioGroup, { name: "paymentMethodOptionId", row: true, options: payment.options
+                                        .filter((item) => !item.label.en.includes('eshop.api.swifts'))
+                                        .map((option) => ({
+                                        label: (React.createElement(Stack, { direction: "row", alignItems: "center" },
+                                            React.createElement(Image, { src: option.image.url, sx: {
+                                                    width: 'auto',
+                                                    height: '15px',
+                                                    maxWidth: '70px',
+                                                    display: 'inline-block',
+                                                    marginRight: 1,
+                                                    '& .wrapper img': {
+                                                        objectFit: 'contain',
+                                                        objectPosition: 'left',
+                                                    },
+                                                } }),
+                                            React.createElement(Typography, { variant: "body2" }, option.label[lang]))),
+                                        value: option.id,
+                                    })) }))))))),
+                    !!error && (React.createElement(FormHelperText, { error: !!error, sx: { mx: 0 } }, error?.message)))) })))));
+};
+
+export { Payment as default };
+//# sourceMappingURL=Payment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Payment.js","sources":["../../../src/form/Payment.tsx"],"sourcesContent":["import React, { KeyboardEvent, useEffect, useState } from 'react';\nimport {\n  Box,\n  Button,\n  Divider,\n  FormControl,\n  FormControlLabel,\n  FormHelperText,\n  IconButton,\n  Radio,\n  RadioGroup,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport useAllowedPaymentMethods from '@hooks/data/useAllowedPaymentMethods';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { PaymentItem, PaymentWrapper, PaymentSwiftWrapper } from '@form/style';\nimport Image from '@components/Image';\nimport Label from '@components/Label';\nimport PaymentSkeleton from '@form/payment/PaymentSkeleton';\nimport { RHFRadioGroup } from '@components/hook-form';\nimport { postPromoCodeApply } from '@modules/promo-code';\nimport { IEvent } from '@utils/types/event.type';\nimport { ITicketForm } from '@utils/types/ticket.type';\nimport useGlobal from '@hooks/useGlobal.ts';\nimport { IPromoCode } from '@utils/types/promo-code.type';\nimport { PromoCodeTypes } from '@utils/data/promo-code';\nimport { throttle } from 'lodash';\nimport { Iconify } from '@components';\n\ninterface Props {\n  event: IEvent;\n}\n\nconst Payment: React.FC<Props> = ({ event }) => {\n  const { t, lang } = useGlobal();\n  const { showSnackbar } = useGlobal();\n  const { data, isLoading } = useAllowedPaymentMethods(event.currency);\n  const { control, watch, setValue } = useFormContext<ITicketForm>();\n  const paymentMethodId = watch('paymentMethodId');\n  const paymentMethodOptionId = watch('paymentMethodOptionId');\n  const [promoCode, setPromoCode] = useState<string>('');\n  const [promoCodeError, setPromoCodeError] = useState<string | null>(null);\n  const [combine, setCombine] = useState<boolean>(true);\n  const promoCodes: IPromoCode[] = watch('promoCodes');\n  const originalPrice: number = watch('originalPrice');\n\n  const handleSubmit = throttle(\n    async () => {\n      if (!promoCode) {\n        setPromoCodeError(t('form.validation.required'));\n        return;\n      }\n\n      try {\n        if (promoCodes.find((i) => i.code === promoCode)) {\n          setPromoCodeError(t('form.validation.promo_code_applied'));\n          return;\n        }\n        if (!combine) {\n          setPromoCodeError(t('form.validation.promo_code_cant_combine'));\n          return;\n        }\n\n        const res = await postPromoCodeApply(promoCode, event.id);\n        const promo = res.data.data;\n\n        if (promo && promo.minPurchaseAmount && promo.minPurchaseAmount > originalPrice) {\n          setPromoCodeError(\n            t('form.validation.min_purchase_not_met') +\n              promo.minPurchaseAmount +\n              ' ' +\n              event.currency\n          );\n          return;\n        }\n\n        if (!promo.combine && promoCodes.length === 0) {\n          setCombine(false);\n        } else if (!promo.combine) {\n          setPromoCodeError(t('form.validation.promo_code_cant_combine'));\n          return;\n        }\n\n        setValue('promoCodes', [...promoCodes, promo]);\n        showSnackbar(res.message);\n        setPromoCodeError(null);\n        setValue('promoCode', promo);\n        setPromoCode('');\n      } catch (err) {\n        setPromoCodeError(t('form.validation.promo_code_invalid'));\n        console.error(err);\n        setValue('promoCode', null);\n      }\n    },\n    1000,\n    { leading: true, trailing: false } // Allow immediate execution but prevent spam\n  );\n\n  const removePromoCode = (promoCodeToRemove: string) => {\n    const newPromoCodes: IPromoCode[] = promoCodes.filter(\n      (promoC) => promoC.code !== promoCodeToRemove\n    );\n\n    if (!newPromoCodes.find((promoC) => promoC.combine)) setCombine(true);\n\n    setValue('promoCodes', newPromoCodes);\n  };\n\n  const handleKeyDown = async (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      if (promoCode) await handleSubmit();\n    }\n  };\n\n  useEffect(() => {\n    if (promoCodes.length === 0) return;\n\n    const highest = promoCodes.sort((a, b) => b.minPurchaseAmount - a.minPurchaseAmount)[0]\n      .minPurchaseAmount;\n\n    if (originalPrice < highest) {\n      const newPromoCodes = promoCodes.filter(\n        (promoCode) => promoCode.minPurchaseAmount <= originalPrice\n      );\n      if (newPromoCodes.length === 0) {\n        setCombine(true);\n      }\n      setValue('promoCodes', newPromoCodes);\n    }\n  }, [originalPrice]);\n\n  useEffect(() => {\n    if (data) {\n      if (!paymentMethodId && !!data.length) {\n        setValue('paymentMethodId', data[0].id);\n      }\n      const selectedPayment =\n        data && data?.length && data.find((payment) => payment.id === Number(paymentMethodId));\n      if (selectedPayment && !!selectedPayment.options.length && !paymentMethodOptionId) {\n        setValue('paymentMethodOptionId', selectedPayment.options[0].id);\n      } else if (selectedPayment && !!selectedPayment.options.length && !!paymentMethodOptionId) {\n        const existingOption = selectedPayment.options.find(\n          (option) => option.id === Number(paymentMethodOptionId)\n        );\n        if (!existingOption) {\n          setValue('paymentMethodOptionId', selectedPayment.options[0].id);\n        }\n      } else if (selectedPayment && !selectedPayment?.options.length) {\n        setValue('paymentMethodOptionId', null);\n      }\n    }\n  }, [data, paymentMethodId, paymentMethodOptionId]);\n\n  return (\n    <Box>\n      <Box className=\"payment__promo-code\">\n        <Stack direction=\"row\" spacing={2}>\n          <TextField\n            name=\"promoCode\"\n            size=\"small\"\n            label={t('form.labels.promo_code')}\n            value={promoCode}\n            onChange={(e) => setPromoCode(e.target.value)}\n            onBlur={(e) => {\n              if (!e.target.value.trim()) setPromoCodeError(null);\n            }}\n            onKeyDown={handleKeyDown}\n            error={!!promoCodeError}\n            helperText={promoCodeError}\n            fullWidth\n          />\n          <Box>\n            <Button\n              size=\"large\"\n              type=\"button\"\n              variant=\"contained\"\n              onClick={handleSubmit}\n              disabled={!promoCode}\n              sx={{ height: 51 }}\n            >\n              {t('apply')}\n            </Button>\n          </Box>\n        </Stack>\n        <Stack paddingTop={3} direction=\"column\" spacing={1}>\n          {promoCodes.length > 0 &&\n            promoCodes.map((item: IPromoCode) => (\n              <Stack\n                marginTop={3}\n                direction=\"row\"\n                alignItems=\"center\"\n                justifyContent=\"space-between\"\n                spacing={2}\n                key={item.code}\n              >\n                <>\n                  <Stack direction=\"row\" alignItems=\"center\">\n                    <Label variant=\"filled\" sx={{ textTransform: 'none', cursor: 'pointer' }}>\n                      {item.code}\n                    </Label>\n                    <Typography variant=\"subtitle2\" sx={{ ml: 1 }}>\n                      -{' '}\n                      {item.value +\n                        `${item.type === PromoCodeTypes.FIXED ? ' ' + event.currency : '%'}`}\n                    </Typography>\n                  </Stack>\n                  <Box>\n                    <IconButton\n                      color=\"primary\"\n                      onClick={() => removePromoCode(item.code)}\n                      aria-label=\"delete\"\n                    >\n                      <Iconify icon=\"carbon:trash-can\" />\n                    </IconButton>\n                  </Box>\n                </>\n              </Stack>\n            ))}\n        </Stack>\n      </Box>\n\n      <Typography variant=\"h4\" mt={2}>\n        {t('event.tickets.stepper.3.subtitle')}\n      </Typography>\n\n      {isLoading ? (\n        <PaymentSkeleton sx={{ marginTop: 1 }} />\n      ) : (\n        <PaymentWrapper>\n          <Controller\n            name=\"paymentMethodId\"\n            control={control}\n            render={({ field, fieldState: { error } }) => (\n              <FormControl component=\"fieldset\">\n                <RadioGroup {...field}>\n                  {data &&\n                    data?.length &&\n                    data?.map((payment) => (\n                      <PaymentItem\n                        key={payment.type}\n                        active={!!paymentMethodId && Number(paymentMethodId) === payment.id}\n                      >\n                        <FormControlLabel\n                          value={payment.id}\n                          control={<Radio />}\n                          label={\n                            <Stack direction=\"row\" alignItems=\"center\">\n                              <Typography\n                                sx={{\n                                  marginRight: 2,\n                                }}\n                              >\n                                {payment.label[lang]}\n                              </Typography>\n                              <Image\n                                src={payment.image.url}\n                                sx={{\n                                  height: '20px',\n                                  '& .wrapper img': {\n                                    objectFit: 'contain',\n                                  },\n                                }}\n                              />\n                            </Stack>\n                          }\n                          sx={{\n                            '&:not(:last-of-type)': {\n                              mb: 0,\n                            },\n                          }}\n                        />\n                        {!!payment.options.length &&\n                          !!paymentMethodId &&\n                          Number(paymentMethodId) === payment.id && (\n                            <PaymentSwiftWrapper>\n                              <Divider sx={{ mb: 2 }} />\n                              <RHFRadioGroup\n                                name=\"paymentMethodOptionId\"\n                                row\n                                options={payment.options\n                                  .filter((item) => !item.label.en.includes('eshop.api.swifts'))\n                                  .map((option) => ({\n                                    label: (\n                                      <Stack direction=\"row\" alignItems=\"center\">\n                                        <Image\n                                          src={option.image.url}\n                                          sx={{\n                                            width: 'auto',\n                                            height: '15px',\n                                            maxWidth: '70px',\n                                            display: 'inline-block',\n                                            marginRight: 1,\n                                            '& .wrapper img': {\n                                              objectFit: 'contain',\n                                              objectPosition: 'left',\n                                            },\n                                          }}\n                                        />\n                                        <Typography variant=\"body2\">\n                                          {option.label[lang]}\n                                        </Typography>\n                                      </Stack>\n                                    ),\n                                    value: option.id,\n                                  }))}\n                              />\n                            </PaymentSwiftWrapper>\n                          )}\n                      </PaymentItem>\n                    ))}\n                </RadioGroup>\n\n                {!!error && (\n                  <FormHelperText error={!!error} sx={{ mx: 0 }}>\n                    {error?.message}\n                  </FormHelperText>\n                )}\n              </FormControl>\n            )}\n          />\n        </PaymentWrapper>\n      )}\n    </Box>\n  );\n};\n\nexport default Payment;\n"],"names":[],"mappings":"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"}

package/dist/esm/form/PaymentOverviewBox.js

@@ -0,0 +1,401 @@
+import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import 'framer-motion';
+import { Stack, Typography, Box, Grid, Divider, IconButton } from '@mui/material';
+import '../components/animate/IconButtonAnimate.js';
+import useResponsive from '../hooks/useResponsive.js';
+import Iconify from '../components/iconify/Iconify.js';
+import Image from '../components/Image.js';
+import TextIconLabel from '../components/TextIconLabel.js';
+import locationIcon from '@iconify/icons-carbon/location';
+import { getPlaceAsString } from '../utils/place.js';
+import { LoadingButton } from '@mui/lab';
+import { OverviewCard } from './style.js';
+import { useFormContext, useWatch } from 'react-hook-form';
+import useEventActiveReleases from '../hooks/data/useEventActiveReleases.js';
+import { calculatePriceWithDiscount } from '../utils/price.js';
+import FeeBox from './payment/FeeBox.js';
+import { fCurrency } from '../utils/formatNumber.js';
+import { isEqual } from 'lodash';
+import calendarIcon from '@iconify/icons-carbon/calendar';
+import userIcon from '@iconify/icons-carbon/user';
+import { EventType } from '../utils/data/event.js';
+import dayjs from 'dayjs';
+import useGlobal from '../hooks/useGlobal.js';
+import { getCreateShoppingCart, recalculateCart } from '../modules/shopping-cart.js';
+import { PromoCodeTypes } from '../utils/data/promo-code.js';
+import { useFirstRender } from '../hooks/useFirstRender.js';
+import useActiveEventProducts from '../hooks/data/useActiveEventProducts.js';
+import useDebounce from '../hooks/useDebounce.js';
+
+const PaymentOverviewBox = ({ event }) => {
+    const { t, lang, options } = useGlobal();
+    const firstRender = useFirstRender();
+    const secondRender = useRef(false);
+    const lastCartRef = useRef(null);
+    const xs = useResponsive('only', 'xs');
+    const md = useResponsive('only', 'md');
+    const isMobile = useResponsive('down', 'md');
+    const { data: eventProducts } = useActiveEventProducts(event.id, true);
+    const [shippingFee, setShippingFee] = useState(0);
+    const { setValue, watch } = useFormContext();
+    const values = watch();
+    const { total, uuid, firstName, lastName, email, gender, birthdate, phone, promoCodes, shipping, totalFee, } = values;
+    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 eventTimeslotId = useWatch({ name: 'eventTimeslotId' });
+    const paymentMethodId = useWatch({ name: 'paymentMethodId' });
+    const paymentMethodOptionId = useWatch({ name: 'paymentMethodOptionId' });
+    const { data: activeReleases } = useEventActiveReleases(event.id, true, event.type === EventType.RECURRING ? eventTimeslotId : undefined);
+    const selectedTickets = useMemo(() => flatTickets
+        .filter((ticket) => ticket.quantity)
+        .map((ticket) => {
+        const release = activeReleases?.find((release) => release.id === ticket.releaseId);
+        return {
+            itemName: release ? `${release.releaseCategoryName} - ${release.name}` : '',
+            price: release?.price || 0,
+            quantity: ticket.quantity,
+            releaseId: ticket.releaseId,
+            products: ticket.products.map((product) => {
+                const variant = release?.product?.eventProductVariants.find((variant) => variant.id === product.eventProductVariantId);
+                return {
+                    ...product,
+                    name: release?.product && variant
+                        ? `${release.product.product.name} - ${variant.productVariant.value}`
+                        : '',
+                    price: variant?.priceWithVat ?? product.price ?? 0,
+                };
+            }),
+        };
+    }), [flatTickets, activeReleases]);
+    const selectedVariants = useMemo(() => {
+        const selectedVariants = [];
+        for (const [eventId, productArray] of Object.entries(products))
+            for (const product of productArray) {
+                for (const eventProduct of eventProducts) {
+                    for (const variant of eventProduct.eventProductVariants) {
+                        if (product.eventProductVariantId === variant.id) {
+                            selectedVariants.push({
+                                variantId: product.eventProductVariantId,
+                                eventId: eventId,
+                                name: `${eventProduct.product.name} - ${variant.productVariant.value}`,
+                                price: variant.priceWithVat * product.quantity,
+                                quantity: product.quantity,
+                            });
+                        }
+                    }
+                }
+            }
+        return selectedVariants;
+    }, [event, flatProducts]);
+    const getFee = useMemo(() => fCurrency(totalFee ?? 0, lang, event.currency), [totalFee]);
+    const shoppingCartBody = useMemo(() => ({
+        uuid: uuid,
+        eventId: event.id,
+        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: Number(eventTimeslotId) || null,
+            }));
+            return acc;
+        }, {}),
+        products: Object.entries(values.products).reduce((acc, [eventId, items]) => {
+            acc[Number(eventId)] = items.map((item) => ({
+                eventProductVariantId: item.eventProductVariantId,
+                productVariantId: item.productVariantId,
+                quantity: item.quantity,
+                price: item.price,
+                excludedShippingMethodIds: item.excludedShippingMethodIds,
+            }));
+            return acc;
+        }, {}),
+        shipping: {
+            shippingMethodId: shipping?.shippingMethodId ? Number(shipping.shippingMethodId) : null,
+            branchId: shipping?.branchId,
+            price: shipping?.price ? Number(shipping.price) : 0,
+        },
+        promoCodeIds: promoCodes?.map((p) => p.id) || null,
+        language: lang,
+        firstName,
+        lastName,
+        email,
+        phone,
+        birthdate,
+        gender,
+        paymentMethodId: paymentMethodId === null ? null : Number(paymentMethodId),
+        paymentMethodOptionId: paymentMethodOptionId === null ? null : Number(paymentMethodOptionId),
+    }), [
+        uuid,
+        event.id,
+        tickets,
+        products,
+        shipping.shippingMethodId,
+        shipping.branchId,
+        shipping.price,
+        promoCodes,
+        lang,
+        firstName,
+        lastName,
+        email,
+        phone,
+        birthdate,
+        gender,
+        paymentMethodId,
+        paymentMethodOptionId,
+        eventTimeslotId,
+    ]);
+    const debouncedShoppingCartBody = useDebounce(shoppingCartBody, 300);
+    const setShoppingCartValues = (data, recalculate = false) => {
+        if (!recalculate) {
+            const hasTickets = !!data.tickets && typeof data.tickets === 'object' && Object.keys(data.tickets).length > 0;
+            if (hasTickets) {
+                setValue('tickets', { ...tickets, ...data.tickets });
+            }
+            const hasProducts = !!data.products &&
+                typeof data.products === 'object' &&
+                Object.keys(data.products).length > 0;
+            if (hasProducts) {
+                setValue('products', { ...products, ...data.products });
+            }
+            setValue('promoCodes', data.promoCodes || []);
+            setValue('uuid', data.uuid);
+            setValue('firstName', data.firstName || '');
+            setValue('lastName', data.lastName || '');
+            setValue('gender', data.gender || '');
+            setValue('birthdate', data.birthdate ? dayjs(data.birthdate) : null);
+            setValue('email', data.email || '');
+            setValue('phone', data.phone || '');
+            setValue('paymentMethodId', data.paymentMethodId ? data.paymentMethodId : null);
+            setValue('paymentMethodOptionId', data.paymentMethodOptionId ? data.paymentMethodOptionId : null);
+            setValue('shipping', data.shipping || { shippingMethodId: null, branchId: null, price: 0 });
+        }
+        const allTickets = Object.values(data?.tickets || {}).flat();
+        if (allTickets.length && allTickets[0]?.eventTimeslotId) {
+            setValue('eventTimeslotId', allTickets[0].eventTimeslotId);
+        }
+        setValue('originalPrice', data.originalPrice);
+        setValue('total', data.totalPrice || 0);
+        const feeTotal = (data.serviceFee ?? 0) + (data.paymentMethodFee ?? 0);
+        setValue('totalFee', feeTotal);
+        setShippingFee(data.shippingFee);
+    };
+    const totalItemCount = useMemo(() => {
+        const count = {
+            total: 0,
+            totalTickets: 0,
+            totalProducts: 0,
+        };
+        for (const ticket of flatTickets) {
+            if (!ticket.quantity)
+                continue;
+            count.total += ticket.quantity;
+            count.totalTickets += ticket.quantity;
+            for (const product of ticket.products || []) {
+                count.total += product.quantity;
+                count.totalProducts += product.quantity;
+            }
+        }
+        for (const product of flatProducts || []) {
+            count.total += product.quantity;
+            count.totalProducts += product.quantity;
+        }
+        return count;
+    }, [flatTickets, flatProducts]);
+    const promoCodesValues = useMemo(() => {
+        const discount = {
+            fixed: 0,
+            fixedDevided: 0,
+            fixedDevidedTickets: 0,
+            fixedDevidedProducts: 0,
+            percent: 0,
+            ticketsDiscountFixed: 0,
+            productDiscountFixed: 0,
+            productDiscountPercent: 0,
+            promoCodes: [],
+        };
+        promoCodes.forEach((promoCode) => {
+            const { type, applyDiscountToProducts, value } = promoCode;
+            if (type === PromoCodeTypes.PERCENTAGE) {
+                if (applyDiscountToProducts) {
+                    discount.productDiscountPercent += value;
+                }
+                discount.percent += value;
+            }
+            else if (type === PromoCodeTypes.FIXED) {
+                if (applyDiscountToProducts) {
+                    discount.productDiscountFixed += value;
+                }
+                else {
+                    discount.ticketsDiscountFixed += value;
+                }
+                discount.fixed += value;
+            }
+        });
+        discount.fixedDevidedProducts = discount.productDiscountFixed
+            ? Math.ceil((discount.productDiscountFixed / totalItemCount.total) * 100) / 100
+            : 0;
+        discount.fixedDevidedTickets =
+            Math.ceil((discount.ticketsDiscountFixed / totalItemCount.totalTickets) * 100) / 100;
+        discount.fixedDevidedTickets += discount.fixedDevidedProducts;
+        return discount;
+    }, [promoCodes, flatTickets, flatProducts]);
+    useEffect(() => {
+        if (!secondRender.current) {
+            secondRender.current = true;
+        }
+        else {
+            return;
+        }
+        (async () => {
+            const existing = localStorage.getItem('cartToken');
+            const res = await getCreateShoppingCart(existing, event.id);
+            const data = res.data;
+            localStorage.setItem('cartToken', data.uuid);
+            setShoppingCartValues(data);
+        })();
+    }, []);
+    useEffect(() => {
+        if (firstRender) {
+            return;
+        }
+        recalculateItems(debouncedShoppingCartBody);
+    }, [debouncedShoppingCartBody]);
+    /** Iframe code **/
+    useEffect(() => {
+        window.addEventListener('message', messageListener, false);
+        return () => {
+            window.removeEventListener('message', messageListener, false);
+        };
+    }, []);
+    const messageListener = async (event) => {
+        if (event.data.type === 'eventlookFrameScrollTop') {
+            const dialog = document.getElementById('overview-card');
+            if (dialog) {
+                dialog.style.top = `${event.data.scrollTop}px`;
+            }
+        }
+    };
+    /** End Iframe code **/
+    const updateCartIfChanged = (newCart, recalculate = false) => {
+        if (isEqual(lastCartRef.current, newCart)) {
+            return;
+        }
+        lastCartRef.current = newCart;
+        setShoppingCartValues(newCart, recalculate);
+    };
+    const recalculateItems = useCallback(async (body) => {
+        const { uuid } = body;
+        if (!uuid)
+            return;
+        try {
+            const response = await recalculateCart(body);
+            const cart = response?.data?.data;
+            if (cart) {
+                updateCartIfChanged(cart, true);
+            }
+        }
+        catch (err) {
+            console.error('Error recalculating cart:', err);
+        }
+    }, []);
+    const removeProduct = (variant) => {
+        const { eventId, variantId } = variant;
+        const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
+        const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
+        if (idx === -1)
+            return;
+        const item = list[idx];
+        if ((item.quantity ?? 0) <= 1) {
+            list.splice(idx, 1);
+        }
+        else {
+            list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
+        }
+        const next = { ...products, [eventId]: list };
+        if (list.length === 0) {
+            const { [eventId]: _removed, ...rest } = next;
+            setValue('products', rest);
+        }
+        else {
+            setValue('products', next);
+        }
+    };
+    return (React.createElement(OverviewCard, { id: "overview-card", stickyHeaderTop: options?.stickyHeaderTop || 0 },
+        !isMobile && (React.createElement(Stack, { className: "overview-card__event-info", p: 2, spacing: 2 },
+            React.createElement(Typography, { variant: "h6" }, event.name),
+            React.createElement(Box, null,
+                React.createElement(Grid, { container: true, spacing: 1 },
+                    React.createElement(Grid, { item: true, xs: 6 },
+                        React.createElement(Image, { src: event.image.url, alt: event.name, ratio: "16/9", borderRadius: 2 })),
+                    React.createElement(Grid, { item: true, xs: 6 },
+                        React.createElement(TextIconLabel, { icon: React.createElement(Iconify, { icon: locationIcon, sx: { mr: 0.5, mt: 0.5, width: 18, height: 18, minWidth: 18 } }), value: React.createElement(Box, null, getPlaceAsString(event.place)), sx: { typography: 'body3', color: 'text.secondary', alignItems: 'flex-start' } })))),
+            React.createElement(Divider, { sx: { borderStyle: 'dashed' } }),
+            React.createElement(Stack, { direction: { xs: 'column', sm: 'row', md: 'column', lg: 'row' }, spacing: 2, p: 2, divider: React.createElement(Divider, { orientation: xs || md ? 'horizontal' : 'vertical', flexItem: true, sx: { borderStyle: 'dashed' } }), sx: {
+                    backgroundColor: (theme) => theme.palette.grey.A100,
+                    borderRadius: 1,
+                } },
+                React.createElement(Box, { width: { sm: '50%', md: '100%', lg: '50%' } },
+                    React.createElement(TextIconLabel, { icon: React.createElement(Iconify, { icon: calendarIcon, sx: { minWidth: 20, height: 20, mr: 1 } }), value: t('form.labels.start_date'), sx: { color: 'text.secondary' } }),
+                    React.createElement(Typography, { variant: "body2", fontWeight: 700 }, dayjs(event.startDate).format('DD.MM.YYYY HH:mm'))),
+                React.createElement(Box, { width: { sm: '50%', md: '100%', lg: '50%' } },
+                    React.createElement(TextIconLabel, { icon: React.createElement(Iconify, { icon: userIcon, sx: { minWidth: 20, height: 20, mr: 1 } }), value: t('form.labels.organizer'), sx: { color: 'text.secondary' } }),
+                    React.createElement(Typography, { variant: "body2", fontWeight: 700 }, event.company.displayName))))),
+        React.createElement(Stack, { className: "overview-card__order-info", p: 2, spacing: 1 },
+            !!selectedTickets.length && !isMobile && React.createElement(Divider, { sx: { borderStyle: 'dashed' } }),
+            selectedTickets.map((ticket, index) => (React.createElement(Box, { key: index },
+                React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                    React.createElement(Typography, { variant: "caption" },
+                        ticket.quantity,
+                        "x ",
+                        ticket.itemName),
+                    React.createElement(Typography, { variant: "caption" }, fCurrency(calculatePriceWithDiscount(ticket.price, promoCodesValues.percent, promoCodesValues.fixedDevidedTickets) * Number(ticket.quantity), lang, event.currency))),
+                ticket.products.map((product, index2) => (React.createElement(Stack, { key: index2, direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                    React.createElement(Typography, { variant: "caption" },
+                        "- ",
+                        product.quantity,
+                        "x ",
+                        product.name),
+                    React.createElement(Typography, { variant: "caption" }, product.price > 0
+                        ? fCurrency(calculatePriceWithDiscount(product.price, promoCodesValues.productDiscountPercent, promoCodesValues.fixedDevidedProducts
+                            ? promoCodesValues.fixedDevidedProducts * product.quantity
+                            : 0), lang, event.currency)
+                        : t('free')))))))),
+            selectedVariants.map((variant, index) => (React.createElement(Box, { key: index },
+                React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                    React.createElement(Typography, { variant: "caption" },
+                        variant.quantity,
+                        "x ",
+                        variant.name),
+                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                        React.createElement(Typography, { variant: "caption" }, fCurrency(calculatePriceWithDiscount(variant.price, promoCodesValues.productDiscountPercent, promoCodesValues.fixedDevidedProducts
+                            ? promoCodesValues.fixedDevidedProducts * variant.quantity
+                            : 0), lang, event.currency)),
+                        React.createElement(IconButton, { onClick: () => removeProduct(variant), color: "primary", size: "small" },
+                            React.createElement(Iconify, { icon: "carbon:trash-can" }))))))),
+            !!shippingFee && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                React.createElement(Typography, { variant: "caption" }, t('form.labels.shipping_fee')),
+                React.createElement(Typography, { variant: "caption" }, fCurrency(shippingFee, lang, event.currency)))),
+            !!total && !!totalFee && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                React.createElement(Typography, { variant: "caption" }, t('form.labels.service_fee')),
+                React.createElement(Typography, { variant: "caption" }, getFee))),
+            ((!!selectedTickets.length && isMobile) || !isMobile) && (React.createElement(Divider, { sx: { borderStyle: 'dashed' } })),
+            React.createElement(FeeBox, { event: event }),
+            React.createElement(LoadingButton, { type: "submit", variant: "contained", size: "large", fullWidth: true }, t('buy')))));
+};
+
+export { PaymentOverviewBox as default };
+//# sourceMappingURL=PaymentOverviewBox.js.map