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

package/src/form/PaymentOverviewBox.tsx

@@ -1,615 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Iconify, Image, TextIconLabel } from '@components';
-import { Box, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
-import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox.tsx';
-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 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 { calculateCart, getCart } from '@modules/shopping-cart.ts';
-import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shopping-cart.type.ts';
-import { PromoCodeTypes } from '@utils/data/promo-code.ts';
-import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
-import useDebounce from '@hooks/useDebounce';
-import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
-
-interface Props {
-  event: IEvent;
-}
-
-const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
-  const { t, lang, options } = useGlobal();
-  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,
-    isPaymentVerify,
-    ticketInsurance,
-    smsNotification,
-    smsNotificationPrice,
-    ticketInsurancePricePerUnit,
-  } = 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,
-      eventId: event.id,
-      tickets: Object.fromEntries(
-        Object.entries(values.tickets).map(([id, items]) => [
-          id,
-          items
-            .filter((item) => item.quantity && item.releaseId)
-            .map((item) => ({
-              ...item,
-              eventTimeslotId: eventTimeslotId ?? null,
-            })),
-        ])
-      ),
-      products: Object.fromEntries(
-        Object.entries(values.products).map(([id, items]) => [
-          id,
-          items.map(
-            ({
-              eventProductVariantId,
-              productVariantId,
-              quantity,
-              price,
-              excludedShippingMethodIds,
-            }) => ({
-              eventProductVariantId,
-              productVariantId,
-              quantity,
-              price,
-              excludedShippingMethodIds,
-            })
-          ),
-        ])
-      ),
-      shipping: {
-        shippingMethodId: shipping?.shippingMethodId ?? null,
-        branchId: shipping?.branchId ?? null,
-        price: shipping?.price ?? 0,
-      },
-      promoCodeIds: promoCodes?.map((p) => p.id) ?? null,
-      language: lang,
-      firstName,
-      lastName,
-      email,
-      phone,
-      birthdate,
-      gender,
-      paymentMethodId: paymentMethodId ? Number(paymentMethodId) : null,
-      paymentMethodOptionId: paymentMethodOptionId ? Number(paymentMethodOptionId) : null,
-      ticketInsurance,
-      smsNotification,
-    }),
-    [
-      uuid,
-      event.id,
-      tickets,
-      products,
-      shipping,
-      promoCodes,
-      lang,
-      firstName,
-      lastName,
-      email,
-      phone,
-      birthdate,
-      gender,
-      paymentMethodId,
-      paymentMethodOptionId,
-      eventTimeslotId,
-      ticketInsurance,
-      smsNotification,
-    ]
-  );
-
-  const debouncedShoppingCartBody = useDebounce(shoppingCartBody, 300);
-
-  const setShoppingCartValues = (data: IShoppingCartDto, recalculate = false) => {
-    if (!recalculate) {
-      const hasTickets =
-        !!data.tickets && typeof data.tickets === 'object' && Object.keys(data.tickets).length > 0;
-
-      if (hasTickets) {
-        setValue('tickets', data.tickets);
-      }
-
-      const hasProducts =
-        !!data.products &&
-        typeof data.products === 'object' &&
-        Object.keys(data.products).length > 0;
-
-      if (hasProducts) {
-        setValue('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);
-    setValue('ticketInsurance', data.ticketInsurance.enabled);
-    setValue('ticketInsurancePrice', data.ticketInsurance.price);
-    setValue('ticketInsurancePricePerUnit', data.ticketInsurance.pricePerUnit);
-    setValue('smsNotification', data.smsNotification.enabled);
-    setValue('smsNotificationPrice', data.smsNotification.price);
-  };
-
-  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]);
-
-  const hasOrderId = useMemo(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.has('id');
-  }, []);
-
-  useEffect(() => {
-    if (!hasOrderId) {
-      recalculateItems(debouncedShoppingCartBody);
-    }
-  }, [debouncedShoppingCartBody, hasOrderId]);
-
-  /** 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 recalculateItems = useCallback(async (body: ICalculateShoppingCartDto) => {
-    try {
-      const isInitial = !body.uuid;
-
-      let response: any;
-      if (isInitial) {
-        const existing = localStorage.getItem('cartToken');
-        const storedUuid =
-          existing && existing !== 'undefined' && existing !== 'null' ? existing : null;
-        response = await getCart(body.eventId, storedUuid);
-      } else {
-        response = await calculateCart(body);
-      }
-
-      const cart = response?.data;
-
-      if (cart) {
-        if (cart.uuid) {
-          localStorage.setItem('cartToken', cart.uuid);
-        }
-        setShoppingCartValues(cart, !isInitial);
-      }
-    } catch (err) {
-      console.error('Error calculating 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.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
-              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.length && (
-          <>
-            {/* TODO: Uncomment this when Colonnade response - must update terms and conditions and email info */}
-            <PaymentOverviewCheckbox
-              checkboxName="ticketInsurance"
-              label={t('event.tickets.insurance.label')}
-              value={
-                <>
-                  {ticketInsurance && totalItemCount.totalTickets > 0 ? '' : '+ '}
-                  {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
-                  {t('event.tickets.insurance.per_ticket')}
-                </>
-              }
-            />
-            <PaymentOverviewCheckbox
-              checkboxName="smsNotification"
-              label={t('event.tickets.sms_notification.label')}
-              value={
-                <>
-                  {smsNotification && totalItemCount.totalTickets > 0 ? '' : '+ '}
-                  {fCurrency(smsNotificationPrice, lang, event.currency)}
-                </>
-              }
-            />
-            <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"
-          form={EVENTLOOK_ORDER_FORM_ID}
-          variant="contained"
-          size="large"
-          fullWidth
-        >
-          {t(isPaymentVerify ? 'verify' : 'buy')}
-        </LoadingButton>
-      </Stack>
-    </OverviewCard>
-  );
-};
-
-export default PaymentOverviewBox;