@eventlook/sdk 1.4.0

package/src/form/ChildEventDialog.tsx

@@ -0,0 +1,54 @@
+import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
+import { Dialog, DialogContent, Stack, Step, StepContent, StepLabel, Stepper } from '@mui/material';
+import { IEvent } from '@utils/types/event.type';
+import React from 'react';
+import TicketWithMerchandiseSelection from './TicketWithMerchandiseSelection';
+import TicketSelection from './TicketSelection';
+import useGlobal from '@hooks/useGlobal';
+import MerchandiseSelection from './MerchandiseSelection';
+
+interface Props {
+  event: IEvent;
+  openDialog: boolean;
+  onClose?: () => void;
+}
+
+const ChildEventDialog: React.FC<Props> = ({ event, openDialog, onClose }) => {
+  const { t } = useGlobal();
+  const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
+
+  return (
+    <Dialog open={openDialog} onClose={() => onClose && onClose()} fullWidth>
+      <DialogContent>
+        <Stack spacing={1}>
+          <Stepper orientation="vertical">
+            <Step active>
+              <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
+              <StepContent>
+                {event.hasMerchandise ? (
+                  <TicketWithMerchandiseSelection event={event} />
+                ) : (
+                  <TicketSelection event={event} />
+                )}
+              </StepContent>
+            </Step>
+            {event.hasMerchandise && eventProducts.length && (
+              <Step active>
+                <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
+                <StepContent>
+                  <MerchandiseSelection
+                    eventProducts={eventProducts}
+                    eventId={event.id}
+                    isLoading={isLoading}
+                  />
+                </StepContent>
+              </Step>
+            )}
+          </Stepper>
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ChildEventDialog;

package/src/form/ChildEvents.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import CustomSkeleton from '@components/CustomSkeleton';
+import { Grid } from '@mui/material';
+import { IEvent } from '@utils/types/event.type';
+import ChildEventCard from './ChildEventCard';
+
+interface Props {
+  events: IEvent[];
+  isLoading?: boolean;
+}
+
+const ChildEventSection: React.FC<Props> = ({ events, isLoading }) => (
+  <Grid container spacing={3}>
+    {isLoading
+      ? [...Array(3)].map((item) => (
+          <Grid key={item} item xs={12} md={12}>
+            <CustomSkeleton height={334} />
+          </Grid>
+        ))
+      : events?.map((event) => (
+          <Grid key={event.id} item xs={12} md={12}>
+            <ChildEventCard event={event} />
+          </Grid>
+        ))}
+  </Grid>
+);
+
+export default ChildEventSection;

package/src/form/ContactPerson.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Grid, MenuItem } from '@mui/material';
+import { RHFSelect, RHFTextField } from '@components/hook-form';
+import RHFDatePicker from '@components/hook-form/RHFDatePicker';
+import { Gender } from '@utils/data/gender';
+import RHFPhone from '@components/hook-form/RHFPhone';
+import dayjs from 'dayjs';
+import { IEvent } from '@utils/types/event.type';
+import { MuiTelInputCountry } from 'mui-tel-input';
+import ExtraField from '@form/extra-field/ExtraField';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  event: IEvent;
+}
+
+const ContactPerson: React.FC<Props> = ({ event }) => {
+  const { t, content } = useGlobal();
+
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12} md={6}>
+        <RHFTextField name="firstName" label={t('form.labels.first_name')} />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <RHFTextField name="lastName" label={t('form.labels.last_name')} />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <RHFTextField name="email" label={t('form.labels.email')} />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <RHFPhone
+          name="phone"
+          label={t('form.labels.phone')}
+          defaultCountry={event.place.countryCode as MuiTelInputCountry}
+        />
+      </Grid>
+      {!content?.form?.disableBirthDate && (
+        <Grid item xs={12} md={6}>
+          <RHFDatePicker
+            name="birthdate"
+            label={t('form.labels.birthdate')}
+            openTo="year"
+            views={['year', 'month', 'day']}
+            maxDate={dayjs()}
+          />
+        </Grid>
+      )}
+      {!content?.form?.disableGender && (
+        <Grid item xs={12} md={6}>
+          <RHFSelect name="gender" label={t('form.labels.gender')}>
+            <MenuItem value={Gender.MALE}>{t('form.labels.male')}</MenuItem>
+            <MenuItem value={Gender.FEMALE}>{t('form.labels.female')}</MenuItem>
+            <MenuItem value={Gender.OTHER}>{t('form.labels.other')}</MenuItem>
+          </RHFSelect>
+        </Grid>
+      )}
+      {event?.extraFields.map((field, index) => (
+        <Grid key={field.id} item xs={12} md={6}>
+          <ExtraField extraField={field} name={`extraFields.${index}.value`} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default ContactPerson;

package/src/form/EmailConfirmation.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import ConfirmDialog from '@components/confirm-dialog';
+import { Box, Typography } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { ITicketForm } from '@utils/types/ticket.type';
+import { LoadingButton } from '@mui/lab';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+const EmailConfirmation: React.FC<Props> = ({ open, onClose, onConfirm }) => {
+  const { t } = useGlobal();
+  const {
+    watch,
+    formState: { isSubmitting },
+  } = useFormContext<ITicketForm>();
+  const email = watch('email');
+  return (
+    <ConfirmDialog
+      title={t('event.tickets.email_confirmation.title')}
+      maxWidth="md"
+      open={open}
+      onClose={onClose}
+      content={
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography
+            sx={{
+              fontSize: {
+                xs: '1.2rem',
+                sm: '1.5rem',
+                md: '2.5rem',
+              },
+              fontWeight: 700,
+            }}
+          >
+            {email}
+          </Typography>
+          {/*<Typography>{t('event.tickets.email_confirmation.description')}</Typography>*/}
+        </Box>
+      }
+      action={
+        <LoadingButton variant="contained" onClick={onConfirm} loading={isSubmitting}>
+          {t('confirm')}
+        </LoadingButton>
+      }
+      sx={{ textAlign: 'center' }}
+    />
+  );
+};
+
+export default EmailConfirmation;

package/src/form/MerchandiseSelection.tsx

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

package/src/form/OrderSuccess.tsx

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

package/src/form/Payment.tsx

@@ -0,0 +1,330 @@
+import React, { KeyboardEvent, useEffect, useState } from 'react';
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  IconButton,
+  Radio,
+  RadioGroup,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import useAllowedPaymentMethods from '@hooks/data/useAllowedPaymentMethods';
+import { Controller, useFormContext } from 'react-hook-form';
+import { PaymentItem, PaymentWrapper, PaymentSwiftWrapper } from '@form/style';
+import Image from '@components/Image';
+import Label from '@components/Label';
+import PaymentSkeleton from '@form/payment/PaymentSkeleton';
+import { RHFRadioGroup } from '@components/hook-form';
+import { postPromoCodeApply } from '@modules/promo-code';
+import { IEvent } from '@utils/types/event.type';
+import { ITicketForm } from '@utils/types/ticket.type';
+import useGlobal from '@hooks/useGlobal.ts';
+import { IPromoCode } from '@utils/types/promo-code.type';
+import { PromoCodeTypes } from '@utils/data/promo-code';
+import { throttle } from 'lodash';
+import { Iconify } from '@components';
+
+interface Props {
+  event: IEvent;
+}
+
+const Payment: React.FC<Props> = ({ event }) => {
+  const { t, lang } = useGlobal();
+  const { showSnackbar } = useGlobal();
+  const { data, isLoading } = useAllowedPaymentMethods(event.currency);
+  const { control, watch, setValue } = useFormContext<ITicketForm>();
+  const paymentMethodId = watch('paymentMethodId');
+  const paymentMethodOptionId = watch('paymentMethodOptionId');
+  const [promoCode, setPromoCode] = useState<string>('');
+  const [promoCodeError, setPromoCodeError] = useState<string | null>(null);
+  const [combine, setCombine] = useState<boolean>(true);
+  const promoCodes: IPromoCode[] = watch('promoCodes');
+  const originalPrice: number = 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: string) => {
+    const newPromoCodes: IPromoCode[] = promoCodes.filter(
+      (promoC) => promoC.code !== promoCodeToRemove
+    );
+
+    if (!newPromoCodes.find((promoC) => promoC.combine)) setCombine(true);
+
+    setValue('promoCodes', newPromoCodes);
+  };
+
+  const handleKeyDown = async (e: KeyboardEvent<HTMLDivElement>) => {
+    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 (
+    <Box>
+      <Box className="payment__promo-code">
+        <Stack direction="row" spacing={2}>
+          <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
+          />
+          <Box>
+            <Button
+              size="large"
+              type="button"
+              variant="contained"
+              onClick={handleSubmit}
+              disabled={!promoCode}
+              sx={{ height: 51 }}
+            >
+              {t('apply')}
+            </Button>
+          </Box>
+        </Stack>
+        <Stack paddingTop={3} direction="column" spacing={1}>
+          {promoCodes.length > 0 &&
+            promoCodes.map((item: IPromoCode) => (
+              <Stack
+                marginTop={3}
+                direction="row"
+                alignItems="center"
+                justifyContent="space-between"
+                spacing={2}
+                key={item.code}
+              >
+                <>
+                  <Stack direction="row" alignItems="center">
+                    <Label variant="filled" sx={{ textTransform: 'none', cursor: 'pointer' }}>
+                      {item.code}
+                    </Label>
+                    <Typography variant="subtitle2" sx={{ ml: 1 }}>
+                      -{' '}
+                      {item.value +
+                        `${item.type === PromoCodeTypes.FIXED ? ' ' + event.currency : '%'}`}
+                    </Typography>
+                  </Stack>
+                  <Box>
+                    <IconButton
+                      color="primary"
+                      onClick={() => removePromoCode(item.code)}
+                      aria-label="delete"
+                    >
+                      <Iconify icon="carbon:trash-can" />
+                    </IconButton>
+                  </Box>
+                </>
+              </Stack>
+            ))}
+        </Stack>
+      </Box>
+
+      <Typography variant="h4" mt={2}>
+        {t('event.tickets.stepper.3.subtitle')}
+      </Typography>
+
+      {isLoading ? (
+        <PaymentSkeleton sx={{ marginTop: 1 }} />
+      ) : (
+        <PaymentWrapper>
+          <Controller
+            name="paymentMethodId"
+            control={control}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl component="fieldset">
+                <RadioGroup {...field}>
+                  {data &&
+                    data?.length &&
+                    data?.map((payment) => (
+                      <PaymentItem
+                        key={payment.type}
+                        active={!!paymentMethodId && Number(paymentMethodId) === payment.id}
+                      >
+                        <FormControlLabel
+                          value={payment.id}
+                          control={<Radio />}
+                          label={
+                            <Stack direction="row" alignItems="center">
+                              <Typography
+                                sx={{
+                                  marginRight: 2,
+                                }}
+                              >
+                                {payment.label[lang]}
+                              </Typography>
+                              <Image
+                                src={payment.image.url}
+                                sx={{
+                                  height: '20px',
+                                  '& .wrapper img': {
+                                    objectFit: 'contain',
+                                  },
+                                }}
+                              />
+                            </Stack>
+                          }
+                          sx={{
+                            '&:not(:last-of-type)': {
+                              mb: 0,
+                            },
+                          }}
+                        />
+                        {!!payment.options.length &&
+                          !!paymentMethodId &&
+                          Number(paymentMethodId) === payment.id && (
+                            <PaymentSwiftWrapper>
+                              <Divider sx={{ mb: 2 }} />
+                              <RHFRadioGroup
+                                name="paymentMethodOptionId"
+                                row
+                                options={payment.options
+                                  .filter((item) => !item.label.en.includes('eshop.api.swifts'))
+                                  .map((option) => ({
+                                    label: (
+                                      <Stack direction="row" alignItems="center">
+                                        <Image
+                                          src={option.image.url}
+                                          sx={{
+                                            width: 'auto',
+                                            height: '15px',
+                                            maxWidth: '70px',
+                                            display: 'inline-block',
+                                            marginRight: 1,
+                                            '& .wrapper img': {
+                                              objectFit: 'contain',
+                                              objectPosition: 'left',
+                                            },
+                                          }}
+                                        />
+                                        <Typography variant="body2">
+                                          {option.label[lang]}
+                                        </Typography>
+                                      </Stack>
+                                    ),
+                                    value: option.id,
+                                  }))}
+                              />
+                            </PaymentSwiftWrapper>
+                          )}
+                      </PaymentItem>
+                    ))}
+                </RadioGroup>
+
+                {!!error && (
+                  <FormHelperText error={!!error} sx={{ mx: 0 }}>
+                    {error?.message}
+                  </FormHelperText>
+                )}
+              </FormControl>
+            )}
+          />
+        </PaymentWrapper>
+      )}
+    </Box>
+  );
+};
+
+export default Payment;