@eventlook/sdk 1.4.0

package/src/form/PaymentOverviewBox.tsx

@@ -0,0 +1,581 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Iconify, Image, TextIconLabel } from '@components';
+import { Box, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
+import locationIcon from '@iconify/icons-carbon/location';
+import { getPlaceAsString } from '@utils/place';
+import { LoadingButton } from '@mui/lab';
+import { OverviewCard } from '@form/style';
+import { IEvent } from '@utils/types/event.type';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
+import useResponsive from '@hooks/useResponsive';
+import { calculatePriceWithDiscount } from '@utils/price';
+import FeeBox from '@form/payment/FeeBox';
+import { IPromoCode } from '@utils/types/promo-code.type';
+import { fCurrency } from '@utils/formatNumber';
+import { IEventProductForm, ISelectedProductVariant } from '@utils/types/product.type';
+import { isEqual } from 'lodash';
+import calendarIcon from '@iconify/icons-carbon/calendar';
+import userIcon from '@iconify/icons-carbon/user';
+import { EventType } from '@utils/data/event';
+import dayjs from 'dayjs';
+import useGlobal from '@hooks/useGlobal.ts';
+import { getCreateShoppingCart, recalculateCart } from '@modules/shopping-cart.ts';
+import { ICalculateShoppingCartDto, IShoppingCart } from '@utils/types/shopping-cart.type.ts';
+import { PromoCodeTypes } from '@utils/data/promo-code.ts';
+import { useFirstRender } from '@hooks/useFirstRender.ts';
+import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
+import useDebounce from '@hooks/useDebounce';
+
+interface Props {
+  event: IEvent;
+}
+
+const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
+  const { t, lang, options } = useGlobal();
+  const firstRender = useFirstRender();
+  const secondRender = useRef(false);
+  const lastCartRef = useRef<IShoppingCart | null>(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<ITicketForm>();
+  const values = watch();
+  const {
+    total,
+    uuid,
+    firstName,
+    lastName,
+    email,
+    gender,
+    birthdate,
+    phone,
+    promoCodes,
+    shipping,
+    totalFee,
+  } = values;
+  const tickets: Record<string, ITicketFormTicket[]> = useWatch({
+    name: 'tickets',
+    defaultValue: {},
+  });
+  const flatTickets: ITicketFormTicket[] = useMemo(() => Object.values(tickets).flat(), [tickets]);
+  const products: Record<string, IEventProductForm[]> = useWatch({
+    name: 'products',
+    defaultValue: {},
+  });
+  const flatProducts: IEventProductForm[] = useMemo(
+    () => Object.values(products).flat(),
+    [products]
+  );
+  const eventTimeslotId: number | null = useWatch({ name: 'eventTimeslotId' });
+  const paymentMethodId: number | null = useWatch({ name: 'paymentMethodId' });
+  const paymentMethodOptionId: number | null = 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: ISelectedProductVariant[] = [];
+    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<ICalculateShoppingCartDto>(
+    () => ({
+      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;
+        },
+        {} as Record<number, ITicketFormTicket[]>
+      ),
+      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;
+        },
+        {} as Record<number, IEventProductForm[]>
+      ),
+      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: IShoppingCart, 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: [] as IPromoCode[],
+    };
+
+    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: IShoppingCart = 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: any) => {
+    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: IShoppingCart, recalculate = false) => {
+    if (isEqual(lastCartRef.current, newCart)) {
+      return;
+    }
+
+    lastCartRef.current = newCart;
+    setShoppingCartValues(newCart, recalculate);
+  };
+
+  const recalculateItems = useCallback(async (body: ICalculateShoppingCartDto) => {
+    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: ISelectedProductVariant) => {
+    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 (
+    <OverviewCard id="overview-card" stickyHeaderTop={options?.stickyHeaderTop || 0}>
+      {!isMobile && (
+        <Stack className="overview-card__event-info" p={2} spacing={2}>
+          <Typography variant="h6">{event.name}</Typography>
+          <Box>
+            <Grid container spacing={1}>
+              <Grid item xs={6}>
+                <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
+              </Grid>
+              <Grid item xs={6}>
+                <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' }}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+          <Divider sx={{ borderStyle: 'dashed' }} />
+          <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>
+        </Stack>
+      )}
+      <Stack className="overview-card__order-info" p={2} spacing={1}>
+        {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
+        {selectedTickets.map((ticket, index) => (
+          <Box key={index}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+              <Typography variant="caption">
+                {ticket.quantity}x {ticket.itemName}
+              </Typography>
+              <Typography variant="caption">
+                {fCurrency(
+                  calculatePriceWithDiscount(
+                    ticket.price,
+                    promoCodesValues.percent,
+                    promoCodesValues.fixedDevidedTickets
+                  ) * Number(ticket.quantity),
+                  lang,
+                  event.currency
+                )}
+              </Typography>
+            </Stack>
+            {ticket.products.map((product, index2) => (
+              <Stack
+                key={index2}
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+                spacing={2}
+              >
+                <Typography variant="caption">
+                  - {product.quantity}x {product.name}
+                </Typography>
+                <Typography variant="caption">
+                  {product.price > 0
+                    ? fCurrency(
+                        calculatePriceWithDiscount(
+                          product.price,
+                          promoCodesValues.productDiscountPercent,
+                          promoCodesValues.fixedDevidedProducts
+                            ? promoCodesValues.fixedDevidedProducts * product.quantity
+                            : 0
+                        ),
+                        lang,
+                        event.currency
+                      )
+                    : t('free')}
+                </Typography>
+              </Stack>
+            ))}
+          </Box>
+        ))}
+        {selectedVariants.map((variant, index) => (
+          <Box key={index}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+              <Typography variant="caption">
+                {variant.quantity}x {variant.name}
+              </Typography>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <Typography variant="caption">
+                  {fCurrency(
+                    calculatePriceWithDiscount(
+                      variant.price,
+                      promoCodesValues.productDiscountPercent,
+                      promoCodesValues.fixedDevidedProducts
+                        ? promoCodesValues.fixedDevidedProducts * variant.quantity
+                        : 0
+                    ),
+                    lang,
+                    event.currency
+                  )}
+                </Typography>
+                <IconButton onClick={() => removeProduct(variant)} color="primary" size="small">
+                  <Iconify icon="carbon:trash-can" />
+                </IconButton>
+              </Stack>
+            </Stack>
+          </Box>
+        ))}
+        {!!shippingFee && (
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+            <Typography variant="caption">{t('form.labels.shipping_fee')}</Typography>
+            <Typography variant="caption">
+              {fCurrency(shippingFee, lang, event.currency)}
+            </Typography>
+          </Stack>
+        )}
+        {!!total && !!totalFee && (
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+            <Typography variant="caption">{t('form.labels.service_fee')}</Typography>
+            <Typography variant="caption">{getFee}</Typography>
+          </Stack>
+        )}
+        {((!!selectedTickets.length && isMobile) || !isMobile) && (
+          <Divider sx={{ borderStyle: 'dashed' }} />
+        )}
+        <FeeBox event={event} />
+        <LoadingButton type="submit" variant="contained" size="large" fullWidth>
+          {t('buy')}
+        </LoadingButton>
+      </Stack>
+    </OverviewCard>
+  );
+};
+
+export default PaymentOverviewBox;

package/src/form/PaymentPending.tsx

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