@eventlook/sdk 1.4.0

package/src/form/PaymentSuccess.tsx

@@ -0,0 +1,400 @@
+import { Iconify, Image, MotionContainer, varBounce } from '@components';
+import { Box, Button, Card, Grid, LinearProgress, Link, Typography } from '@mui/material';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { getSearchParamsInObject } from '@utils/url';
+import { postOrderPaid } from '@modules/order';
+import { m } from 'framer-motion';
+import { GopayState } from '@utils/data/gopay';
+import { PropsWithChildren } from '@utils/types/global.type';
+import { IPaidTicket } from '@utils/types/ticket.type';
+import useResponsive from '@hooks/useResponsive';
+import { getPlaceAsString } from '@utils/place';
+import { fCurrency, fData } from '@utils/formatNumber';
+import { useTheme } from '@mui/material/styles';
+import { IPaidProduct } from '@utils/types/product.type';
+import dayjs from 'dayjs';
+import useGlobal from '@hooks/useGlobal';
+import { Trans } from '@components/Trans';
+
+interface Props {
+  setIsPaying: Dispatch<SetStateAction<boolean>>;
+  isIframe?: boolean;
+}
+
+const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
+  const { showSnackbar, t, lang, callbacks, content } = useGlobal();
+  const theme = useTheme();
+  const defaultState = 'PROCESSING';
+  const errorState = 'ERROR';
+  const [tickets, setTickets] = useState<IPaidTicket[]>([]);
+  const [products, setProducts] = useState<IPaidProduct[]>([]);
+  const [state, setState] = useState<string>(defaultState);
+  const [title, setTitle] = useState<string>(t('event.tickets.payment_success.loading'));
+  const [description, setDescription] = useState<string | null>(null);
+  const [gwUrl, setGwUrl] = useState<string>('');
+  const isMobile = useResponsive('down', 'sm');
+
+  useEffect(() => {
+    setIsPaying(false);
+    checkStatus();
+  }, []);
+
+  const checkStatus = async () => {
+    const searchParams = getSearchParamsInObject(window.location.search);
+    const paymentId = searchParams.id;
+
+    try {
+      const { data } = await postOrderPaid({
+        gopayId: Number(paymentId),
+      });
+      const tickets = data.tickets;
+      setTickets(tickets);
+      const products = data.products;
+      setProducts(products);
+      setState(data.state);
+      setGwUrl(data.gwUrl);
+      switch (data.state) {
+        case GopayState.PAID:
+          setTitle('event.tickets.payment_success.paid.title');
+          break;
+        default:
+          setTitle('event.tickets.payment_success.unpaid');
+          setDescription('event.tickets.payment_success.unpaid_description');
+          break;
+      }
+    } catch (error: any) {
+      setState(errorState);
+      setTitle(error.message);
+      showSnackbar(error.message, { variant: 'error' });
+    }
+  };
+
+  return (
+    <MotionContainer className="iframe__payment-success">
+      {state === GopayState.PAID ? (
+        <Box>
+          <Grid container spacing={3} mb={6}>
+            <Grid display="flex" item xs={12} sm={6} alignItems="center">
+              <m.div variants={varBounce().in}>
+                <Typography
+                  variant="h5"
+                  component="div"
+                  color="primary.main"
+                  mb={2}
+                  sx={{ textTransform: 'uppercase' }}
+                >
+                  <Trans
+                    text={
+                      content?.paymentConfirmation?.status ||
+                      'event.tickets.payment_success.paid.status'
+                    }
+                  />
+                </Typography>
+                <Typography variant="h1" mb={4}>
+                  <Trans
+                    text={
+                      content?.paymentConfirmation?.title ||
+                      'event.tickets.payment_success.paid.title'
+                    }
+                  />
+                </Typography>
+                <Typography
+                  variant="subtitle1"
+                  component="div"
+                  color="text.secondary"
+                  sx={{ maxWidth: 450 }}
+                >
+                  <Trans
+                    text={
+                      content?.paymentConfirmation?.subtitle ||
+                      'event.tickets.payment_success.paid.subtitle'
+                    }
+                  />
+                </Typography>
+              </m.div>
+            </Grid>
+            {!isMobile && (
+              <Grid item xs={12} sm={6} display="flex" justifyContent="center">
+                <m.div variants={varBounce().in}>
+                  {content?.paymentConfirmation?.image ? (
+                    <Image
+                      src={content.paymentConfirmation.image.src}
+                      width="100%"
+                      maxWidth={content.paymentConfirmation.image.maxWidth}
+                    />
+                  ) : (
+                    <Image
+                      src="https://eventigo.s3-central.vshosting.cloud/production/payment_success.png"
+                      alt="Payment success"
+                      maxWidth={400}
+                    />
+                  )}
+                </m.div>
+              </Grid>
+            )}
+          </Grid>
+          {tickets.length > 0 && (
+            <>
+              <m.div variants={varBounce().in}>
+                <Typography variant="h2" textAlign="center" mb={4}>
+                  {t('event.tickets.payment_success.paid.tickets')}
+                </Typography>
+              </m.div>
+              <Grid container justifyContent="center" spacing={5} mb={6}>
+                {tickets.map((item, index) => (
+                  <Grid key={index} item xs={12} sm={6} textAlign="center">
+                    <m.div variants={varBounce().in}>
+                      <Card sx={{ px: 2, py: 4 }}>
+                        <Box
+                          component="div"
+                          display="inline-block"
+                          sx={{
+                            width: 28,
+                            height: 28,
+                            borderRadius: '50%',
+                            backgroundColor: 'primary.main',
+                            color: 'grey.0',
+                            fontWeight: 700,
+                          }}
+                          mb={2}
+                        >
+                          {index + 1}
+                        </Box>
+                        <Typography variant="h3">{item.eventName}</Typography>
+                        <Typography variant="h6" mb={2}>
+                          {getPlaceAsString(item.location)}
+                        </Typography>
+                        <Typography variant="h3">{item.releaseCategoryName}</Typography>
+                        {item.firstName && item.lastName && (
+                          <Typography variant="h5">{`${item.firstName} ${item.lastName}`}</Typography>
+                        )}
+                        <Typography variant="h5" mb={3}>
+                          {fCurrency(item.price, lang, item.currency)}
+                        </Typography>
+                        {item.eventTimeslot && (
+                          <Typography variant="h5">
+                            {dayjs(item.eventTimeslot.startDate).format('DD.MM.YYYY HH:mm')}
+                          </Typography>
+                        )}
+                        <Image
+                          src={item.qrUrl}
+                          alt="QR Code"
+                          maxWidth={200}
+                          border={`3px solid ${theme.palette.grey['800']}`}
+                          mb={2}
+                        />
+                        {item.pdfUrl && (
+                          <Button
+                            href={item.pdfUrl}
+                            target="_blank"
+                            variant="contained"
+                            sx={{ mb: 2 }}
+                          >
+                            {t('event.tickets.payment_success.paid.button')}
+                          </Button>
+                        )}
+                        {item.applePassWalletUrl && (
+                          <Link href={item.applePassWalletUrl} target="_blank" display="block">
+                            <Box sx={{ maxWidth: 180, mx: 'auto', mb: 2 }}>
+                              <Image
+                                src={`https://eventigo.s3-central.vshosting.cloud/production/apple-wallet/${lang}.png`}
+                                alt={t('apple_wallet')}
+                                objectFit="contain"
+                                sx={{ height: 47 }}
+                              />
+                            </Box>
+                          </Link>
+                        )}
+                        {item.googlePassWalletUrl && (
+                          <Link href={item.googlePassWalletUrl} target="_blank" display="block">
+                            <Box sx={{ maxWidth: 180, mx: 'auto', mb: 2 }}>
+                              <Image
+                                src={`https://eventigo.s3-central.vshosting.cloud/production/google-wallet/${lang}.png`}
+                                alt={t('google_wallet')}
+                                objectFit="contain"
+                                sx={{ height: 47 }}
+                              />
+                            </Box>
+                          </Link>
+                        )}
+                        <Box
+                          maxWidth={300}
+                          mx="auto"
+                          px={2}
+                          borderRadius={1}
+                          color="grey.0"
+                          sx={{
+                            fontWeight: 700,
+                            backgroundColor: 'primary.main',
+                          }}
+                          className="iframe__payment-success__ticket"
+                        >
+                          {item.number}
+                        </Box>
+                      </Card>
+                    </m.div>
+                  </Grid>
+                ))}
+              </Grid>
+            </>
+          )}
+          {products.length > 0 && (
+            <>
+              <m.div variants={varBounce().in}>
+                <Typography variant="h2" textAlign="center" mb={4}>
+                  {t('event.tickets.payment_success.paid.products')}
+                </Typography>
+              </m.div>
+              <Grid container justifyContent="center" spacing={5} mb={6}>
+                {products.map((item, index) => (
+                  <Grid key={index} item xs={12} sm={6} md={4} textAlign="center">
+                    <m.div variants={varBounce().in}>
+                      <Card sx={{ px: 2, py: 4 }}>
+                        <Box
+                          component="div"
+                          display="inline-block"
+                          sx={{
+                            width: 28,
+                            height: 28,
+                            borderRadius: '50%',
+                            backgroundColor: 'primary.main',
+                            color: 'grey.0',
+                            fontWeight: 700,
+                          }}
+                          mb={2}
+                        >
+                          {index + 1}
+                        </Box>
+                        <Typography variant="h3">{item.name}</Typography>
+                        <Typography variant="h6" mb={2}>
+                          {item.variantName}
+                        </Typography>
+                        <Typography variant="h5" mb={3}>
+                          {fCurrency(item.price, lang, item.currency)}
+                        </Typography>
+                        <Image
+                          src={item.imageUrl}
+                          alt="Product preview"
+                          maxWidth={200}
+                          mb={2}
+                          borderRadius={2}
+                        />
+                      </Card>
+                    </m.div>
+                  </Grid>
+                ))}
+              </Grid>
+            </>
+          )}
+          {!isIframe && (
+            <Box textAlign="center">
+              <CustomButton
+                onClick={callbacks.homepage}
+                startIcon={<Iconify icon="eva:home-fill" />}
+              >
+                {t('go_home')}
+              </CustomButton>
+            </Box>
+          )}
+        </Box>
+      ) : (
+        <Box sx={{ textAlign: 'center', py: 4 }}>
+          <m.div variants={varBounce().in}>
+            <Typography variant="h4" sx={{ mb: 2, maxWidth: 600, mx: 'auto' }}>
+              <Trans
+                text={title}
+                components={{
+                  br: <br key="br" />,
+                }}
+              />
+            </Typography>
+            {description && (
+              <Typography variant="body1" sx={{ mb: 2, maxWidth: 600, mx: 'auto' }}>
+                <Trans
+                  text={description}
+                  components={{
+                    br: <br key="br" />,
+                  }}
+                />
+              </Typography>
+            )}
+          </m.div>
+          {state === errorState ? (
+            <>
+              <m.div variants={varBounce().in}>
+                <Iconify
+                  icon="eva:close-circle-fill"
+                  sx={{
+                    color: 'error.main',
+                    width: (theme) => theme.spacing(20),
+                    height: (theme) => theme.spacing(20),
+                  }}
+                />
+              </m.div>
+              {!isIframe && (
+                <Button
+                  onClick={callbacks.tickets}
+                  startIcon={<Iconify icon="eva:arrow-back-fill" />}
+                >
+                  {t('back_to_tickets')}
+                </Button>
+              )}
+            </>
+          ) : state !== defaultState ? (
+            <>
+              <m.div variants={varBounce().in}>
+                <Iconify
+                  icon="eva:alert-triangle-fill"
+                  sx={{
+                    color: 'warning.main',
+                    width: (theme) => theme.spacing(20),
+                    height: (theme) => theme.spacing(20),
+                  }}
+                />
+              </m.div>
+              {!isIframe && (
+                <CustomButton url={gwUrl} endIcon={<Iconify icon="eva:external-link-outline" />}>
+                  {t('pay')}
+                </CustomButton>
+              )}
+            </>
+          ) : (
+            <LinearProgress sx={{ width: 1, maxWidth: 320, mx: 'auto' }} />
+          )}
+        </Box>
+      )}
+    </MotionContainer>
+  );
+};
+
+interface ButtonProps {
+  onClick?: () => void;
+  url?: string;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+}
+
+const CustomButton: React.FC<PropsWithChildren<ButtonProps>> = ({
+  onClick,
+  url,
+  children,
+  startIcon,
+  endIcon,
+}) => (
+  <Button
+    onClick={onClick}
+    href={url}
+    size="large"
+    color="primary"
+    variant="contained"
+    startIcon={startIcon}
+    endIcon={endIcon}
+    sx={{
+      mt: 2,
+    }}
+  >
+    {children}
+  </Button>
+);
+
+export default PaymentSuccess;

package/src/form/ReleaseCountdown.tsx

@@ -0,0 +1,51 @@
+import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import { IEvent } from '@utils/types/event.type';
+import useCountdown from '@hooks/useCountdown';
+import dayjs from 'dayjs';
+import { Box, Stack, Typography } from '@mui/material';
+import useGlobal from '@hooks/useGlobal';
+import { Trans } from '@components/Trans';
+
+interface Props {
+  event: IEvent;
+  setShowReleaseDate: Dispatch<SetStateAction<boolean>>;
+}
+
+const ReleaseCountdown: React.FC<Props> = ({ event, setShowReleaseDate }) => {
+  const { t } = useGlobal();
+  const { days, hours, minutes, seconds } = useCountdown(dayjs(event.releaseDate).toDate());
+
+  useEffect(() => {
+    if (dayjs(event.releaseDate).diff(dayjs()) < 0) {
+      setShowReleaseDate(false);
+    }
+  }, [seconds, event]);
+
+  return (
+    <Stack alignItems="center" spacing={2} py={4} textAlign="center">
+      <Typography variant="h3">{t('event.tickets.release_countdown.title')}</Typography>
+      <Typography variant="h1">
+        <Trans
+          text="event.tickets.release_countdown.countdown"
+          values={{
+            days,
+            hours,
+            minutes,
+            seconds,
+          }}
+          components={{
+            span: (
+              <Box
+                component="span"
+                className="iframe__release-countdown"
+                sx={{ color: 'primary.main' }}
+              />
+            ),
+          }}
+        />
+      </Typography>
+    </Stack>
+  );
+};
+
+export default ReleaseCountdown;

package/src/form/ReleaseWithMerchandise.tsx

@@ -0,0 +1,221 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
+import { Iconify } from '@components/iconify';
+import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
+import { IReleaseShort } from '@utils/types/release.type';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { IEventProductForm } from '@utils/types/product.type';
+import { fCurrency } from '@utils/formatNumber';
+import { Currencies } from '@utils/data/currency';
+import { getSelectedQuantityByVariant } from '@utils/product';
+import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  eventId: number;
+  release: IReleaseShort;
+  activeReleases: IReleaseShort[];
+  currency: Currencies;
+}
+
+const ReleaseWithMerchandise: React.FC<Props> = ({
+  eventId,
+  release,
+  activeReleases,
+  currency,
+}) => {
+  const { t, lang } = useGlobal();
+  const [openVariantDialog, setOpenVariantDialog] = useState<'add' | 'increase' | null>(null);
+  const { setValue } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+
+  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
+
+  const getSelectedQuantity = (id: number) =>
+    tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
+
+  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+    return availableQuantity > 10 ? 10 : availableQuantity;
+  };
+
+  const isMaxQuantity = (releaseId: number) => {
+    const release = tickets.find((ticket) => ticket.releaseId === releaseId);
+    if (!release) return false;
+    return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
+  };
+
+  const addRelease = (product?: IEventProductForm) => {
+    setValue(`tickets.${eventId}`, [
+      ...tickets,
+      {
+        releaseId: release.id,
+        quantity: 1,
+        itemName: '',
+        price: 0,
+        products: product ? [product] : [],
+        extraFields: release.extraFields?.length
+          ? [
+              release.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+              })),
+            ]
+          : [],
+      },
+    ]);
+    setOpenVariantDialog(null);
+  };
+
+  const increaseQuantity = (product?: IEventProductForm) => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) + 1;
+      const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+      setValue(
+        `tickets.${eventId}`,
+        tickets.map((ticket) =>
+          ticket.releaseId === release.id
+            ? {
+                ...ticket,
+                quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
+                products: product ? [...ticket.products, product] : ticket.products,
+                extraFields: release.extraFields?.length
+                  ? [
+                      ...ticket.extraFields,
+                      release.extraFields.map((field) => ({
+                        eventExtraFieldId: field.id,
+                        value: '',
+                      })),
+                    ]
+                  : [],
+              }
+            : ticket
+        )
+      );
+      setOpenVariantDialog(null);
+    }
+  };
+
+  const decreaseQuantity = useCallback(() => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) - 1;
+      if (newQuantity < 1) {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.filter((ticket) => ticket.releaseId !== release.id)
+        );
+      } else {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.map((ticket) => {
+            if (ticket.releaseId !== release.id) return ticket;
+
+            return {
+              ...ticket,
+              quantity: newQuantity,
+              products: ticket?.products?.slice(0, -1), // non-mutating "pop"
+              extraFields: ticket?.extraFields?.slice(0, -1),
+            };
+          })
+        );
+      }
+    }
+  }, [tickets, release.id, setValue]);
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={1}>
+        <Stack
+          direction="row"
+          spacing={1}
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 }}
+        >
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              <Iconify
+                icon="ion:ticket-outline"
+                color="primary.main"
+                sx={{ width: 24, height: 24 }}
+              />
+              {release.product && (
+                <>
+                  <Typography fontSize={20} lineHeight={1}>
+                    +
+                  </Typography>
+                  <Iconify
+                    icon="lucide-lab:shirt-t"
+                    color="primary.main"
+                    sx={{ width: 24, height: 24 }}
+                  />
+                </>
+              )}
+            </Stack>
+            <Typography color="grey.500">
+              {release.releaseCategoryName} - {release.name} -{' '}
+              {fCurrency(release.price, lang, currency)}
+            </Typography>
+          </Stack>
+          {isReleaseSelected(release.id) ? (
+            <Stack direction="row" spacing={1} py={0.5}>
+              <IconButton onClick={() => decreaseQuantity()} size="small" color="primary">
+                <Iconify icon="eva:minus-fill" />
+              </IconButton>
+              <Typography color="grey.500">{getSelectedQuantity(release.id)}</Typography>
+              <IconButton
+                onClick={() =>
+                  release.product ? setOpenVariantDialog('increase') : increaseQuantity()
+                }
+                size="small"
+                color="primary"
+                disabled={isMaxQuantity(release.id)}
+              >
+                <Iconify icon="eva:plus-fill" />
+              </IconButton>
+            </Stack>
+          ) : (
+            <Button
+              onClick={() =>
+                !release.locked && (release.product ? setOpenVariantDialog('add') : addRelease())
+              }
+              variant="contained"
+              disabled={release.locked}
+            >
+              {t('add')}
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+      <Typography
+        variant="caption"
+        content="div"
+        mt={2}
+        mb={release.extraFields?.length ? 2 : 0}
+        display="block"
+      >
+        {release.description}
+      </Typography>
+      {release.extraFields && release.extraFields.length > 0 && (
+        <ReleaseExtraFields release={release} eventId={eventId} />
+      )}
+      {release.product && (
+        <ProductVariantsDialog
+          eventProduct={release.product}
+          openDialog={!!openVariantDialog}
+          callback={openVariantDialog === 'increase' ? increaseQuantity : addRelease}
+          onClose={() => setOpenVariantDialog(null)}
+          selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+          eventId={eventId}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ReleaseWithMerchandise;

package/src/form/ScriptLoader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useEffect } from 'react';
+
+const ScriptLoader: React.FC = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://widget.packeta.com/v6/www/js/library.js';
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return null;
+};
+
+export default ScriptLoader;