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

package/src/form/ChildEventCard.tsx

@@ -1,133 +0,0 @@
-import useResponsive from '@hooks/useResponsive';
-import { Box, Button, Card, Divider, Grid, Stack, Typography } from '@mui/material';
-import { getPlaceAsString } from '@utils/place';
-import { IEvent } from '@utils/types/event.type';
-import React, { useMemo, useState } from 'react';
-import ChildEventDialog from './ChildEventDialog';
-import useGlobal from '@hooks/useGlobal';
-import { Iconify, Image, TextIconLabel } from '@components';
-import locationIcon from '@iconify/icons-carbon/location';
-import calendarIcon from '@iconify/icons-carbon/calendar';
-import userIcon from '@iconify/icons-carbon/user';
-import dayjs from 'dayjs';
-import { useWatch } from 'react-hook-form';
-import { ITicketFormTicket } from '@utils/types/ticket.type';
-import { IEventProductForm } from '@utils/types/product.type';
-
-interface Props {
-  event: IEvent;
-}
-
-const ChildEventCard: React.FC<Props> = ({ event }) => {
-  const { t } = useGlobal();
-  const xs = useResponsive('only', 'xs');
-  const md = useResponsive('only', 'md');
-  const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
-  const tickets = useWatch({
-    name: `tickets.${event.id}`,
-    defaultValue: [],
-  }) as ITicketFormTicket[];
-  const products = useWatch({
-    name: `products.${event.id}`,
-    defaultValue: [],
-  }) as IEventProductForm[];
-
-  const eventNotEmpty = useMemo(
-    () => [...tickets, ...products].some((item) => item?.quantity),
-    [tickets, products]
-  );
-
-  return (
-    <>
-      <Card sx={{ p: 2 }}>
-        <Grid container spacing={6} alignItems="stretch">
-          {/* LEFT SIDE: Image + Button */}
-          <Grid item xs={12} md={6} sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
-            <Button
-              variant="contained"
-              onClick={() => setOpenVariantDialog(true)}
-              fullWidth
-              startIcon={
-                eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
-              }
-              sx={{ mt: 2 }}
-            >
-              {eventNotEmpty ? t('change') : t('add')}
-            </Button>
-          </Grid>
-
-          {/* RIGHT SIDE: Info block with bottom aligned date + organizer */}
-          <Grid
-            item
-            xs={12}
-            md={6}
-            sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
-          >
-            <Stack spacing={2}>
-              <Typography variant="h6">{event.name}</Typography>
-
-              <TextIconLabel
-                icon={
-                  <Iconify
-                    icon={locationIcon}
-                    sx={{ mr: 0.5, mt: 0.5, width: 18, height: 18, minWidth: 18 }}
-                  />
-                }
-                value={<Box>{getPlaceAsString(event.place)}</Box>}
-                sx={{ typography: 'body3', color: 'text.secondary', alignItems: 'flex-start' }}
-              />
-            </Stack>
-
-            {/* Bottom: Date & Organizer */}
-            <Stack
-              direction={{ xs: 'column', sm: 'row', md: 'column', lg: 'row' }}
-              spacing={2}
-              p={2}
-              divider={
-                <Divider
-                  orientation={xs || md ? 'horizontal' : 'vertical'}
-                  flexItem
-                  sx={{ borderStyle: 'dashed' }}
-                />
-              }
-              sx={{
-                backgroundColor: (theme) => theme.palette.grey.A100,
-                borderRadius: 1,
-              }}
-            >
-              <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
-                <TextIconLabel
-                  icon={<Iconify icon={calendarIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
-                  value={t('form.labels.start_date')}
-                  sx={{ color: 'text.secondary' }}
-                />
-                <Typography variant="body2" fontWeight={700}>
-                  {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-                </Typography>
-              </Box>
-              <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
-                <TextIconLabel
-                  icon={<Iconify icon={userIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
-                  value={t('form.labels.organizer')}
-                  sx={{ color: 'text.secondary' }}
-                />
-                <Typography variant="body2" fontWeight={700}>
-                  {event.company.displayName}
-                </Typography>
-              </Box>
-            </Stack>
-          </Grid>
-        </Grid>
-      </Card>
-
-      <ChildEventDialog
-        event={event}
-        openDialog={openVariantDialog}
-        onClose={() => setOpenVariantDialog(false)}
-      />
-    </>
-  );
-};
-
-export default ChildEventCard;

package/src/form/ChildEventDialog.tsx

@@ -1,54 +0,0 @@
-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 './tickets/TicketWithMerchandiseSelection';
-import TicketSelection from './tickets/TicketSelection';
-import useGlobal from '@hooks/useGlobal';
-import MerchandiseSelection from './merchandise/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

@@ -1,28 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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={{ xs: 1, md: 2 }}>
-      <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

@@ -1,55 +0,0 @@
-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/OrderSuccess.tsx

@@ -1,91 +0,0 @@
-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;