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

package/src/form/PaymentOverviewDrawer.tsx

@@ -1,169 +0,0 @@
-import { Box, Button, Drawer, styled, Typography } from '@mui/material';
-import { grey } from '@mui/material/colors';
-import React from 'react';
-import { useEffect, useRef, useState } from 'react';
-import PaymentOverviewBox from './PaymentOverviewBox';
-import { IEvent } from '@utils/types/event.type';
-import useGlobal from '@hooks/useGlobal';
-import { fCurrency } from '@utils/formatNumber';
-import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
-
-interface Props {
-  event: IEvent;
-  totalPrice: number;
-}
-
-const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice }) => {
-  const { t, lang } = useGlobal();
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const prevYRef = useRef<number>(Number.POSITIVE_INFINITY);
-
-  // Opens drawer when scrolling down
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (totalPrice <= 0) return;
-          const currentY = entry.boundingClientRect.y;
-          const isScrollingDown = currentY < prevYRef.current;
-
-          if (entry.isIntersecting && isScrollingDown) {
-            setOpenDrawer(true);
-          }
-
-          prevYRef.current = currentY;
-        });
-      },
-      {
-        threshold: 0,
-        rootMargin: '0px 0px -40% 0px',
-      }
-    );
-
-    observer.observe(sentinel);
-
-    return () => {
-      observer.unobserve(sentinel);
-    };
-  }, [totalPrice]);
-
-  const toggleDrawer = () => {
-    setOpenDrawer((prev) => !prev);
-  };
-
-  const Puller = styled('div')(({ theme }) => ({
-    width: 30,
-    height: 6,
-    backgroundColor: grey[300],
-    borderRadius: 3,
-    margin: 'auto',
-    marginTop: 12,
-    ...theme.applyStyles('dark', {
-      backgroundColor: grey[700],
-    }),
-  }));
-
-  return (
-    <Box sx={{ display: { md: 'none' } }}>
-      {/* Sentinel element for intersection observer */}
-      <Box ref={sentinelRef} sx={{ height: 1, visibility: 'hidden' }} />
-
-      {/* Drawer Tab */}
-      {!openDrawer && (
-        <Box
-          sx={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundColor: (theme) => theme.palette.background.paper,
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
-            zIndex: 1300,
-          }}
-          // onClick={toggleDrawer}
-        >
-          <Puller onClick={toggleDrawer} />
-          <Box
-            sx={{
-              width: '100%',
-              px: 2,
-              pb: 2,
-            }}
-          >
-            <Typography
-              sx={{
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}
-            >
-              <span>{t('form.labels.total')}:</span>
-              <span>{fCurrency(totalPrice, lang, event.currency)}</span>
-            </Typography>
-
-            <Button
-              type="submit"
-              form={EVENTLOOK_ORDER_FORM_ID}
-              variant="contained"
-              size="large"
-              fullWidth
-              sx={{ mt: 1 }}
-            >
-              {t('buy')}
-            </Button>
-          </Box>
-        </Box>
-      )}
-
-      {/* Drawer Content */}
-      <Drawer
-        anchor="bottom"
-        open={openDrawer}
-        onClose={toggleDrawer}
-        sx={{ display: { md: 'none' } }}
-        ModalProps={{
-          disableScrollLock: true,
-          BackdropProps: {
-            sx: { background: 'rgba(0,0,0,0)' },
-            onClick: toggleDrawer,
-          },
-        }}
-        PaperProps={{
-          sx: {
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
-          },
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            backgroundColor: (theme) => theme.palette.background.paper,
-            py: 1,
-          }}
-        >
-          <Puller onClick={toggleDrawer} />
-        </Box>
-        <Box
-          sx={{
-            height: '100%',
-            overflow: 'auto',
-          }}
-        >
-          <PaymentOverviewBox event={event} />
-        </Box>
-      </Drawer>
-    </Box>
-  );
-};
-
-export default PaymentOverviewDrawer;

package/src/form/PaymentPending.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
-import Lottie from 'lottie-react';
-import bankTransferAnimation from '../utils/data/lottie/bank-transfer.json';
-import { varBounce } from '@components/animate';
-import { m } from 'framer-motion';
-import useGlobal from '@hooks/useGlobal.ts';
-
-const PaymentPending: React.FC = () => {
-  const { t } = useGlobal();
-
-  return (
-    <Box textAlign="center">
-      <m.div variants={varBounce().in}>
-        <Typography variant="h4" sx={{ mb: 2, maxWidth: 600, mx: 'auto' }}>
-          {t('event.tickets.payment_pending')}
-        </Typography>
-      </m.div>
-      <Box maxWidth={600} mx="auto">
-        {/* <Lottie animationData={bankTransferAnimation} /> */}
-      </Box>
-    </Box>
-  );
-};
-
-export default PaymentPending;

package/src/form/PaymentSuccess.tsx

@@ -1,443 +0,0 @@
-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 } 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';
-import { getGtmPurchasePaid, gtmPurchasePaid, mapUserToUserData } from '@utils/gtm.ts';
-import { IPixels } from '@utils/types/gtm.type.ts';
-
-interface Props {
-  setIsPaying: Dispatch<SetStateAction<boolean>>;
-  isIframe?: boolean;
-  pixels?: IPixels;
-}
-
-const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
-  const { showSnackbar, t, lang, callbacks, content, user } = 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);
-
-      const items = [
-        ...data.tickets.map((ticket) => ({
-          item_id: ticket.number,
-          item_name: `${ticket.eventName} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
-          price: ticket.price,
-          quantity: 1,
-        })),
-      ];
-      if (data.extraFee) {
-        items.push({
-          item_id: 'service_fee',
-          item_name: `Service fee`,
-          price: data.extraFee,
-          quantity: 1,
-        });
-      }
-      const item = {
-        currency: data.currency,
-        value: data.totalPrice,
-        tax: 0,
-        payment_type: data.paymentType,
-        transaction_id: String(data.orderNumber),
-        coupon: data?.promoCodes?.map((p) => p.code) || [],
-        items,
-      };
-
-      switch (data.state) {
-        case GopayState.PAID:
-          setTitle('event.tickets.payment_success.paid.title');
-          if (isIframe) {
-            setTimeout(() => {
-              parent.postMessage(
-                {
-                  type: 'eventlookFrameGtm',
-                  item: getGtmPurchasePaid(item, pixels),
-                },
-                '*'
-              );
-            }, 1000);
-          } else {
-            gtmPurchasePaid(item, pixels, user ? mapUserToUserData(user) : undefined);
-          }
-          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

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