@eventlook/sdk 1.4.4 → 1.4.5-1.beta.2

package/dist/types/hooks/data/useShoppingCart.d.ts

@@ -1,8 +0,0 @@
-import { IShoppingCart, ICalculateShoppingCartDto } from '@utils/types/shopping-cart.type';
-export default function useShoppingCart(body: ICalculateShoppingCartDto): {
-    data: IShoppingCart | undefined;
-    error: any;
-    isValidating: boolean;
-    mutate: import("swr").KeyedMutator<IShoppingCart>;
-    isLoading: boolean;
-};

package/src/form/MerchandiseSelection.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Grid } from '@mui/material';
-import ProductCard from '@form/product/ProductCard';
-import { IEventProduct } from '@utils/types/event-product.type';
-import CustomSkeleton from '@components/CustomSkeleton';
-
-interface Props {
-  eventProducts: IEventProduct[];
-  eventId: number;
-  isLoading?: boolean;
-}
-
-const MerchandiseSelection: React.FC<Props> = ({ eventProducts, eventId, isLoading }) => (
-  <Grid container spacing={3}>
-    {isLoading
-      ? [...Array(3)].map((item) => (
-          <Grid key={item} item xs={12} md={4}>
-            <CustomSkeleton height={334} />
-          </Grid>
-        ))
-      : eventProducts.map((eventProduct) => (
-          <Grid key={eventProduct.id} item xs={12} md={4}>
-            <ProductCard eventProduct={eventProduct} eventId={eventId} isOnlyMerchandise />
-          </Grid>
-        ))}
-  </Grid>
-);
-
-export default MerchandiseSelection;

package/src/form/ReleaseWithMerchandise.tsx

@@ -1,230 +0,0 @@
-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;
-  index: number;
-}
-
-const ReleaseWithMerchandise: React.FC<Props> = ({
-  eventId,
-  release,
-  activeReleases,
-  currency,
-  index,
-}) => {
-  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 addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
-  const countTickets = addedRelease?.quantity || 0;
-
-  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}
-          releaseIndex={index}
-          quantity={countTickets}
-        />
-      )}
-      {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/TicketSelection.tsx

@@ -1,284 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import {
-  Box,
-  Divider,
-  Grid,
-  IconButton,
-  MenuItem,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { RHFSelect } from '@components/hook-form';
-import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
-import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
-import { fCurrency } from '@utils/formatNumber';
-import { Iconify } from '@components/iconify';
-import { groupBy } from '@utils/global';
-import { IReleaseShort } from '@utils/types/release.type';
-import FeeBox from '@form/payment/FeeBox';
-import { IEvent } from '@utils/types/event.type';
-import useResponsive from '@hooks/useResponsive';
-import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
-import { EventType } from '@utils/data/event';
-import useGlobal from '@hooks/useGlobal.ts';
-
-interface Props {
-  event: IEvent;
-}
-
-const TicketSelection: React.FC<Props> = ({ event }) => {
-  const { t, lang } = useGlobal();
-  const isMobile = useResponsive('down', 'md');
-  const { setValue, watch } = useFormContext<ITicketForm>();
-  const tickets = useWatch({
-    name: `tickets.${event.id}`,
-    defaultValue: [],
-  }) as ITicketFormTicket[];
-  const eventTimeslotId = watch('eventTimeslotId');
-  const [soldOutReleaseCategoryNames, setSoldOutReleaseCategoryNames] = useState<string[]>([]);
-  const { data: activeReleases, mutate } = useEventActiveReleases(
-    event.id,
-    false,
-    event.type === EventType.RECURRING ? eventTimeslotId : undefined
-  );
-
-  const showLoading = !activeReleases && event.type !== EventType.RECURRING;
-
-  useEffect(() => {
-    selectedTickets();
-  }, [tickets]);
-
-  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
-
-  const getRelease = (releaseId: number) => {
-    const release = activeReleases?.find((activeRelease) => activeRelease.id === releaseId);
-    return release ? release : null;
-  };
-
-  const getExtraFields = (releaseId: number | '', index: number) => {
-    if (!releaseId) return null;
-
-    const release = getRelease(releaseId);
-
-    if (!release || !release?.extraFields || release?.extraFields.length <= 0) return null;
-
-    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
-    const countTickets = addedRelease?.quantity || 0;
-    return (
-      <ReleaseExtraFields
-        release={release}
-        eventId={event.id}
-        releaseIndex={index}
-        quantity={countTickets}
-      />
-    );
-  };
-
-  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 countReleaseCategories = (): number => {
-    const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
-    return Object.keys(grouped).length;
-  };
-
-  const selectedReleaseIsSoldOut = (releases: IReleaseShort[] | undefined) => {
-    const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
-      const nextRelease = releases?.find(
-        (item2) =>
-          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order++
-      );
-      const selected = tickets.find((ticket) => ticket.releaseId === item.id);
-      return !!nextRelease && item.locked && !!selected && index + 1 == tickets.length;
-    });
-    return lockedSelectedReleases && lockedSelectedReleases.includes(true);
-  };
-
-  const countUnlockedReleases = () => activeReleases?.filter((item) => !item.locked).length || 0;
-
-  const countSelectedTickets = () => {
-    let count = 0;
-    for (const ticket of tickets) {
-      count += +ticket.quantity;
-    }
-
-    return count;
-  };
-
-  const isQuantityDisabled = (value: number, releaseId: number | '') => {
-    const releaseSelected = tickets.find((item) => item.releaseId === releaseId);
-    return releaseSelected && releaseSelected.quantity
-      ? countSelectedTickets() + value - releaseSelected.quantity > 10
-      : countSelectedTickets() + value > 10;
-  };
-
-  const removeTicket = (indexToRemove: number) => {
-    const activeReleases = tickets.filter((_ticket, index) => index !== indexToRemove);
-    setValue(`tickets.${event.id}`, activeReleases);
-  };
-
-  const selectedTickets = async () => {
-    const releases = await mutate();
-    const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
-
-    const soldOutReleaseCategories = activeReleases?.filter((release) =>
-      tickets.find(
-        (ticket) =>
-          release.id === ticket.releaseId &&
-          ticket.quantity === release.availableTickets &&
-          release.availableTickets !== 10
-      )
-    );
-    setSoldOutReleaseCategoryNames(
-      soldOutReleaseCategories?.map((item) => item.releaseCategoryName) || []
-    );
-
-    if (
-      (soldOutReleaseCategories &&
-        selectedReleaseIsSoldOut(releases) &&
-        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
-        !allFilled.length) ||
-      (activeReleases &&
-        soldOutReleaseCategories?.length &&
-        activeReleases?.length > tickets.length &&
-        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
-        !allFilled.length) ||
-      (tickets.length < countReleaseCategories() && !allFilled.length)
-    ) {
-      setValue(`tickets.${event.id}`, [
-        ...tickets,
-        {
-          releaseId: '',
-          quantity: '',
-          itemName: '',
-          price: 0,
-          products: [],
-          extraFields: [],
-        },
-      ]);
-    }
-  };
-
-  return (
-    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
-      {tickets.map((item, index) => (
-        <Box key={index}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} md={6}>
-              {showLoading ? (
-                <Skeleton
-                  variant="rounded"
-                  sx={{
-                    width: '100%',
-                    height: (theme) => theme.spacing(7.5),
-                  }}
-                />
-              ) : (
-                <RHFSelect
-                  name={`tickets.${event.id}.${index}.releaseId`}
-                  value={item.releaseId}
-                  label={
-                    index > 0
-                      ? t('form.labels.add_another_release')
-                      : t('form.labels.release_category_price')
-                  }
-                  maxHeight="calc(100vh - 2rem)"
-                  onChange={(e) => {
-                    setValue(`tickets.${event.id}.${index}.releaseId`, Number(e.target.value));
-                    setValue(`tickets.${event.id}.${index}.extraFields`, []);
-                  }}
-                >
-                  <MenuItem key={0} value="">
-                    {t('choose')}
-                  </MenuItem>
-                  {activeReleases?.map((activeRelease) => (
-                    <MenuItem
-                      key={activeRelease.id}
-                      value={activeRelease.id}
-                      disabled={
-                        isReleaseSelected(activeRelease.id) ||
-                        (activeRelease.locked &&
-                          !soldOutReleaseCategoryNames.includes(activeRelease.releaseCategoryName))
-                      }
-                    >
-                      {activeRelease.releaseCategoryName} - {activeRelease.name}:{' '}
-                      {activeRelease.price === 0
-                        ? t('free')
-                        : fCurrency(activeRelease.price, lang, event.currency)}
-                    </MenuItem>
-                  ))}
-                </RHFSelect>
-              )}
-            </Grid>
-            <Grid key={index} item xs={12} md={6}>
-              {showLoading ? (
-                <Skeleton
-                  variant="rounded"
-                  sx={{
-                    width: '100%',
-                    height: (theme) => theme.spacing(7.5),
-                  }}
-                />
-              ) : (
-                <Stack direction="row" alignItems="center" spacing={1}>
-                  <RHFSelect
-                    name={`tickets.${event.id}.${index}.quantity`}
-                    value={item.quantity}
-                    label={t('form.labels.quantity')}
-                  >
-                    {[...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (
-                      <MenuItem
-                        key={index2}
-                        value={index2 + 1}
-                        disabled={isQuantityDisabled(index2 + 1, item.releaseId)}
-                      >
-                        {index2 + 1}
-                      </MenuItem>
-                    ))}
-                    {!item.releaseId && (
-                      <MenuItem disabled sx={{ textTransform: 'unset!important' }}>
-                        {t('event.tickets.stepper.1.quantity_select')}
-                      </MenuItem>
-                    )}
-                  </RHFSelect>
-                  {item.releaseId && item.quantity && (
-                    <Box>
-                      <IconButton color="primary" onClick={() => removeTicket(index)}>
-                        <Iconify icon="carbon:trash-can" />
-                      </IconButton>
-                    </Box>
-                  )}
-                </Stack>
-              )}
-            </Grid>
-          </Grid>
-          {activeReleases && item.releaseId && (
-            <Typography
-              variant="caption"
-              content="div"
-              mt={2}
-              mb={getRelease(item.releaseId)?.extraFields?.length ? 2 : 0}
-              display="block"
-            >
-              {getRelease(item.releaseId)?.description ?? ''}
-            </Typography>
-          )}
-          {getExtraFields(item.releaseId, index)}
-        </Box>
-      ))}
-      <Box>
-        <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
-          *{t('event.tickets.stepper.1.max_ticket_quantity')}
-        </Typography>
-        {isMobile && <FeeBox event={event} align="right" />}
-      </Box>
-    </Stack>
-  );
-};
-
-export default TicketSelection;

package/src/form/TicketWithMerchandiseSelection.tsx

@@ -1,131 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
-import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
-import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
-import { groupBy } from '@utils/global';
-import { IReleaseShort } from '@utils/types/release.type';
-import FeeBox from '@form/payment/FeeBox';
-import { IEvent } from '@utils/types/event.type';
-import useResponsive from '@hooks/useResponsive';
-import ReleaseWithMerchandise from '@form/ReleaseWithMerchandise';
-import { EventType } from '@utils/data/event';
-import useGlobal from '@hooks/useGlobal.ts';
-
-interface Props {
-  event: IEvent;
-}
-
-const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
-  const { t } = useGlobal();
-  const isMobile = useResponsive('down', 'md');
-  const { setValue, watch } = useFormContext<ITicketForm>();
-  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${event.id}`, defaultValue: [] });
-  const eventTimeslotId = watch('eventTimeslotId');
-  const { data: activeReleases, mutate } = useEventActiveReleases(
-    event.id,
-    false,
-    event.type === EventType.RECURRING ? eventTimeslotId : undefined
-  );
-
-  useEffect(() => {
-    selectedTickets();
-  }, [tickets]);
-
-  const countReleaseCategories = (): number => {
-    const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
-    return Object.keys(grouped).length;
-  };
-
-  const selectedReleaseIsSoldOut = (releases: IReleaseShort[] | undefined) => {
-    const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
-      const nextRelease = releases?.find(
-        (item2) =>
-          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order++
-      );
-      const selected = tickets.find((ticket) => ticket.releaseId === item.id);
-      return !!nextRelease && item.locked && !!selected && index + 1 == tickets.length;
-    });
-    return lockedSelectedReleases && lockedSelectedReleases.includes(true);
-  };
-
-  const countUnlockedReleases = () => activeReleases?.filter((item) => !item.locked).length || 0;
-
-  const selectedTickets = async () => {
-    const releases = await mutate();
-    const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
-
-    const soldOutReleaseCategories = activeReleases?.filter((release) =>
-      tickets.find(
-        (ticket) =>
-          release.id === ticket.releaseId &&
-          ticket.quantity === release.availableTickets &&
-          release.availableTickets !== 10
-      )
-    );
-
-    if (
-      (soldOutReleaseCategories &&
-        selectedReleaseIsSoldOut(releases) &&
-        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
-        !allFilled.length) ||
-      (activeReleases &&
-        soldOutReleaseCategories?.length &&
-        activeReleases?.length > tickets.length &&
-        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
-        !allFilled.length) ||
-      (tickets.length < countReleaseCategories() && !allFilled.length)
-    ) {
-      setValue(`tickets.${event.id}`, [
-        ...tickets,
-        {
-          releaseId: '',
-          quantity: '',
-          itemName: '',
-          price: 0,
-          products: [],
-          extraFields: [],
-        },
-      ]);
-    }
-  };
-
-  return (
-    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
-      {!activeReleases && event.type !== EventType.RECURRING ? (
-        <Skeleton
-          variant="rounded"
-          sx={{
-            width: '100%',
-            height: (theme) => theme.spacing(7.5),
-          }}
-        />
-      ) : (
-        activeReleases?.map((release, index) => (
-          <ReleaseWithMerchandise
-            key={release.id}
-            eventId={event.id}
-            release={release}
-            activeReleases={activeReleases}
-            currency={event.currency}
-            index={index}
-          />
-        ))
-      )}
-      {!activeReleases && event.type === EventType.RECURRING && (
-        <Typography variant="h5">{t('event.tickets.stepper.1.select_timeslot')}</Typography>
-      )}
-      {!!activeReleases && !activeReleases.length && (
-        <Typography variant="h5">{t('event.tickets.stepper.1.no_tickets')}</Typography>
-      )}
-      <Box>
-        <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
-          *{t('event.tickets.stepper.1.max_ticket_quantity')}
-        </Typography>
-        {isMobile && <FeeBox event={event} align="right" />}
-      </Box>
-    </Stack>
-  );
-};
-
-export default TicketWithMerchandiseSelection;