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

package/src/form/product/ProductCard.tsx

@@ -1,108 +0,0 @@
-import { Box, Button, Card, Stack, Typography } from '@mui/material';
-import Image from '@components/Image';
-import { IEventProduct } from '@utils/types/event-product.type';
-import React, { useMemo, useState } from 'react';
-import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
-import { IEventProductForm } from '@utils/types/product.type';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
-import { getSelectedQuantityByVariant } from '@utils/product';
-import useGlobal from '@hooks/useGlobal.ts';
-import { fCurrency } from '@utils/formatNumber';
-
-interface Props {
-  eventProduct: IEventProduct;
-  eventId: number;
-  isOnlyMerchandise?: boolean;
-}
-
-const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {
-  const { t, lang } = useGlobal();
-  const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
-  const { setValue, getValues } = useFormContext<ITicketForm>();
-  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
-  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
-
-  const onSelectVariant = (selectedVariants: IEventProductForm[] | IEventProductForm) => {
-    const normalized = Array.isArray(selectedVariants) ? selectedVariants : [selectedVariants];
-    const currentProducts =
-      (getValues(`products.${eventId}`) as IEventProductForm[] | undefined) ?? [];
-    const nextProducts = [...currentProducts];
-
-    normalized.forEach((selectedVariant) => {
-      const index = nextProducts.findIndex(
-        (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
-      );
-
-      if (index >= 0) {
-        if (selectedVariant.quantity <= 0) {
-          nextProducts.splice(index, 1);
-        } else {
-          nextProducts[index] = {
-            ...nextProducts[index],
-            quantity: selectedVariant.quantity,
-          };
-        }
-      } else {
-        if (selectedVariant.quantity > 0) {
-          nextProducts.push(selectedVariant);
-        }
-      }
-    });
-
-    setValue(`products.${eventId}`, nextProducts, {
-      shouldDirty: true,
-      shouldValidate: true,
-    });
-  };
-
-  const eventNotEmpty = useMemo(() => {
-    const variantIds = new Set(eventProduct.eventProductVariants.map((variant) => variant.id));
-    return products.some(
-      (product) => product?.quantity && variantIds.has(product.eventProductVariantId)
-    );
-  }, [products, eventProduct.eventProductVariants]);
-
-  return (
-    <>
-      <Card
-        sx={{
-          p: 0,
-          borderRadius: 0,
-          boxShadow: 'none',
-          background: 'none',
-        }}
-      >
-        <Stack spacing={0}>
-          <Image
-            src={eventProduct.product.previewImage.url}
-            ratio="16/9"
-            sx={{ borderRadius: 2 }}
-          />
-          <Typography variant="h5">{eventProduct.product.name}</Typography>
-          <Box>
-            <Typography variant="h6" color="primary">
-              {eventProduct.product.priceWithVat > 0
-                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
-                : t('free')}
-            </Typography>
-          </Box>
-          <Button variant="outlined" onClick={() => setOpenVariantDialog(true)} fullWidth>
-            {eventNotEmpty ? t('change') : t('add')}
-          </Button>
-        </Stack>
-      </Card>
-      <ProductVariantsDialog
-        eventProduct={eventProduct}
-        eventId={eventId}
-        openDialog={openVariantDialog}
-        onClose={() => setOpenVariantDialog(false)}
-        callback={onSelectVariant}
-        selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
-        isOnlyMerchandise={isOnlyMerchandise}
-      />
-    </>
-  );
-};
-
-export default ProductCard;

package/src/form/product/ProductVariantsDialog.tsx

@@ -1,334 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { IEventProduct, IEventProductVariant } from '@utils/types/event-product.type';
-import Image from '@components/Image';
-import { useWatch } from 'react-hook-form';
-import { ITicketFormTicket } from '@utils/types/ticket.type';
-import { IEventProductForm } from '@utils/types/product.type';
-import { fCurrency } from '@utils/formatNumber';
-import useGlobal from '@hooks/useGlobal.ts';
-
-interface Props {
-  eventProduct: IEventProduct;
-  eventId: number;
-  openDialog: boolean;
-  callback: (variants: IEventProductForm[]) => void;
-  onClose?: () => void;
-  selectedQuantityByVariant?: Record<number, number>;
-  isOnlyMerchandise?: boolean;
-  canAddOnlyOneAtATime?: boolean;
-}
-
-const ProductVariantsDialog: React.FC<Props> = ({
-  eventProduct,
-  openDialog,
-  onClose,
-  callback,
-  selectedQuantityByVariant,
-  isOnlyMerchandise,
-  eventId,
-  canAddOnlyOneAtATime,
-}) => {
-  const { t, lang, options } = useGlobal();
-  const { showSnackbar } = useGlobal();
-  const [draftQuantities, setDraftQuantities] = useState<Record<number, number>>({});
-  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
-  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
-
-  useEffect(() => {
-    if (openDialog) {
-      const urlParams = new URLSearchParams(new URL(window.location.href).search);
-      const elementId = urlParams.get('elementId');
-      parent.postMessage({ type: 'eventlookFrameOpenDialog', name: elementId }, '*');
-    }
-  }, [openDialog]);
-
-  useEffect(() => {
-    if (openDialog) {
-      setDraftQuantities(canAddOnlyOneAtATime ? {} : (selectedQuantityByVariant ?? {}));
-    }
-  }, [openDialog, selectedQuantityByVariant, canAddOnlyOneAtATime]);
-
-  const handleOnAdd = () => {
-    const selectedVariants = eventProduct.eventProductVariants
-      .map((variant) => {
-        const quantity = draftQuantities[variant.id] ?? 0;
-        const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;
-        if (quantity <= 0 && selectedQty <= 0) return null;
-        return {
-          eventProductVariantId: variant.id,
-          productVariantId: variant.productVariant.id,
-          quantity,
-          price: variant.priceWithVat,
-          excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(
-            (method) => method.id
-          ),
-        } as IEventProductForm;
-      })
-      .filter((variant): variant is IEventProductForm => Boolean(variant));
-
-    if (selectedVariants.length === 0) {
-      showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });
-      return;
-    }
-
-    callback(selectedVariants);
-    setDraftQuantities({});
-    onClose?.();
-  };
-
-  const getUsedCount = (variant: IEventProductVariant) => {
-    let countUsed = 0;
-
-    for (const product of products) {
-      if (product.productVariantId === variant.productVariant.id) {
-        countUsed += product.quantity;
-      }
-    }
-
-    for (const ticket of tickets) {
-      if (ticket.products) {
-        for (const product of ticket.products) {
-          if (product.productVariantId === variant.productVariant.id) {
-            countUsed += product.quantity;
-          }
-        }
-      }
-    }
-    return countUsed;
-  };
-
-  const getMaxAvailable = (variant: IEventProductVariant) => {
-    if (!variant.productVariant.quantity) return Number.POSITIVE_INFINITY;
-    return variant.productVariant.quantity - variant.productVariant.sold - getUsedCount(variant);
-  };
-
-  const isVariantDisabled = (variant: IEventProductVariant) => {
-    if (!variant.productVariant.quantity) return false;
-    return getMaxAvailable(variant) <= 0;
-  };
-
-  const handleAddQuantity = (variant: IEventProductVariant) => {
-    setDraftQuantities((prev) => {
-      const current = prev[variant.id] ?? 0;
-      const next = current + 1;
-      const maxAvailable = getMaxAvailable(variant);
-      if (next > 10 || next > maxAvailable) return prev;
-      if (canAddOnlyOneAtATime) {
-        // Only allow one variant to be selected
-        return { [variant.id]: 1 };
-      }
-      return { ...prev, [variant.id]: next };
-    });
-  };
-
-  const handleRemoveQuantity = (variant: IEventProductVariant) => {
-    setDraftQuantities((prev) => {
-      const current = prev[variant.id] ?? 0;
-      const next = current - 1;
-      if (next <= 0) {
-        const { [variant.id]: _removed, ...rest } = prev;
-        return rest;
-      }
-      if (canAddOnlyOneAtATime) {
-        // Remove the only variant
-        return {};
-      }
-      return { ...prev, [variant.id]: next };
-    });
-  };
-
-  const handleRemoveProduct = () => {
-    const variantsToRemove = eventProduct.eventProductVariants
-      .filter((variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0)
-      .map(
-        (variant) =>
-          ({
-            eventProductVariantId: variant.id,
-            productVariantId: variant.productVariant.id,
-            quantity: 0,
-            price: variant.priceWithVat,
-            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(
-              (method) => method.id
-            ),
-          }) as IEventProductForm
-      );
-
-    if (variantsToRemove.length === 0) {
-      return;
-    }
-
-    callback(variantsToRemove);
-    setDraftQuantities({});
-    onClose?.();
-  };
-
-  const hasSelectedVariants = eventProduct.eventProductVariants.some(
-    (variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0
-  );
-
-  return (
-    <Dialog
-      open={openDialog}
-      onClose={() => onClose && onClose()}
-      fullWidth
-      sx={{
-        mx: 'auto',
-        width: {
-          xs: '100%',
-          sm: 'calc(100vh - 300px)',
-        },
-        minWidth: 300,
-        maxWidth: 444,
-        '& .MuiDialog-container': {
-          height: options?.isIframe ? 'auto' : '100%',
-        },
-      }}
-    >
-      <DialogTitle sx={{ textAlign: 'center', fontWeight: 700 }}>
-        {eventProduct.product.name}
-      </DialogTitle>
-      <DialogContent>
-        <Stack spacing={1}>
-          <Image
-            src={eventProduct.product.previewImage.url}
-            alt={eventProduct.product.name}
-            ratio="16/9"
-            sx={{ borderRadius: 2 }}
-          />
-          <Typography variant="body2" color="primary">
-            {t('form.labels.category')}: {eventProduct.product.category.value.text}
-          </Typography>
-          <Typography
-            variant="caption"
-            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
-          />
-        </Stack>
-      </DialogContent>
-      <DialogActions sx={{ justifyContent: 'flex-start' }}>
-        <Stack spacing={2} width="100%">
-          <Stack spacing={1.5}>
-            {eventProduct.eventProductVariants.map((variant) => {
-              const draftQty = draftQuantities[variant.id] ?? 0;
-              const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;
-              const maxAvailable = getMaxAvailable(variant);
-              const isAddDisabled = isVariantDisabled(variant) || maxAvailable <= 0;
-              const isAnotherSelected =
-                canAddOnlyOneAtATime &&
-                Object.keys(draftQuantities).length > 0 &&
-                !draftQuantities[variant.id];
-              return (
-                <Stack
-                  key={variant.id}
-                  direction="row"
-                  spacing={1}
-                  alignItems="center"
-                  width="100%"
-                >
-                  <Button
-                    onClick={() => handleAddQuantity(variant)}
-                    variant={draftQty > 0 ? 'contained' : 'outlined'}
-                    size="large"
-                    disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}
-                    sx={{
-                      minWidth: 64,
-                      height: 40,
-                      borderRadius: 1,
-                      fontWeight: 700,
-                    }}
-                  >
-                    {variant.productVariant.value}
-                  </Button>
-                  {draftQty > 0 ? (
-                    <Stack direction="row" spacing={1} alignItems="center" sx={{ flex: 1 }}>
-                      <Button
-                        variant="outlined"
-                        onClick={() => handleRemoveQuantity(variant)}
-                        disabled={draftQty < 1}
-                        sx={{ minWidth: 40, height: 40, borderRadius: 1, fontWeight: 700 }}
-                      >
-                        -
-                      </Button>
-                      <Typography
-                        sx={{
-                          minWidth: 40,
-                          textAlign: 'center',
-                          fontWeight: 700,
-                          color: 'text.secondary',
-                        }}
-                      >
-                        {draftQty}
-                      </Typography>
-                      {!canAddOnlyOneAtATime && (
-                        <Button
-                          variant="contained"
-                          onClick={() => handleAddQuantity(variant)}
-                          disabled={draftQty >= 10 || draftQty >= maxAvailable}
-                          sx={{ minWidth: 40, height: 40, borderRadius: 1, fontWeight: 700 }}
-                        >
-                          +
-                        </Button>
-                      )}
-                    </Stack>
-                  ) : (
-                    <Button
-                      variant="contained"
-                      onClick={() => handleAddQuantity(variant)}
-                      disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}
-                      sx={{
-                        flex: 1,
-                        height: 40,
-                        borderRadius: 1,
-                        fontWeight: 700,
-                        textTransform: 'none',
-                      }}
-                    >
-                      {t('add')}
-                    </Button>
-                  )}
-                  <Stack direction="row" spacing={1} alignItems="center">
-                    {selectedQty > 0 && (
-                      <Typography variant="caption" color="text.secondary">
-                        {selectedQty}x
-                      </Typography>
-                    )}
-                    <Typography variant="body1" fontWeight={600}>
-                      {variant.priceWithVat > 0
-                        ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
-                        : t('free')}
-                    </Typography>
-                  </Stack>
-                </Stack>
-              );
-            })}
-          </Stack>
-          <Stack direction="row" spacing={1} justifyContent="flex-end" width="100%">
-            {hasSelectedVariants && !canAddOnlyOneAtATime && (
-              <Button variant="outlined" color="error" onClick={handleRemoveProduct}>
-                {t('remove')}
-              </Button>
-            )}
-            {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}
-            <Button
-              variant="contained"
-              onClick={handleOnAdd}
-              disabled={!Object.values(draftQuantities).some((qty) => qty > 0)}
-            >
-              {t('add')}
-            </Button>
-          </Stack>
-        </Stack>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default ProductVariantsDialog;

package/src/form/services/index.tsx

@@ -1,217 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-  Link,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { RHFCheckbox } from '@components/hook-form';
-import { fCurrency } from '@utils/formatNumber';
-import useGlobal from '@hooks/useGlobal';
-import { Iconify } from '@components';
-import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
-import { IEvent } from '@utils/types/event.type';
-
-interface Props {
-  event: IEvent;
-}
-
-interface BorderedCheckboxProps {
-  name: string;
-  disabled: boolean;
-  title: React.ReactNode;
-  price: React.ReactNode;
-}
-
-const BorderedCheckbox: React.FC<BorderedCheckboxProps> = ({ name, disabled, title, price }) => (
-  <RHFCheckbox
-    name={name}
-    disabled={disabled}
-    label={
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        alignItems="center"
-        sx={{ width: '100%' }}
-      >
-        <Typography variant="body2" fontWeight={600}>
-          {title}
-        </Typography>
-        <Typography variant="body2" fontWeight={700} sx={{ whiteSpace: 'nowrap' }}>
-          {price}
-        </Typography>
-      </Stack>
-    }
-    sx={{
-      m: 0,
-      px: 1,
-      pr: 0.5,
-      pl: 0,
-      borderRadius: 1,
-      width: '100%',
-      border: '1px    solid',
-      borderColor: 'primary.main',
-      '& .MuiFormControlLabel-label': {
-        width: '100%',
-      },
-    }}
-  />
-);
-
-const Services: React.FC<Props> = ({ event }) => {
-  const { t, lang } = useGlobal();
-  const [open, setOpen] = useState(false);
-  const ticketInsurancePricePerUnit = Number(
-    useWatch<ITicketForm>({
-      name: 'ticketInsurancePricePerUnit',
-      defaultValue: 0,
-    }) || 0
-  );
-  const smsNotificationPrice = Number(
-    useWatch<ITicketForm>({
-      name: 'smsNotificationPrice',
-      defaultValue: 0,
-    }) || 0
-  );
-  const tickets = useWatch<ITicketForm, 'tickets'>({
-    name: 'tickets',
-    defaultValue: {},
-  });
-
-  const totalTickets = useMemo(() => {
-    const items: ITicketFormTicket[] = Object.values(tickets || {}).flat();
-    return items.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);
-  }, [tickets]);
-
-  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    setOpen(true);
-  };
-
-  const handleClose = () => setOpen(false);
-
-  return (
-    <Stack spacing={1.5}>
-      <BorderedCheckbox
-        name="ticketInsurance"
-        disabled={totalTickets <= 0}
-        title={t('event.tickets.insurance.label')}
-        price={
-          <>
-            + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
-            {t('event.tickets.insurance.per_ticket')}
-          </>
-        }
-      />
-
-      <BorderedCheckbox
-        name="smsNotification"
-        disabled={totalTickets <= 0}
-        title={t('event.tickets.sms_notification.label')}
-        price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
-      />
-
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Link variant="body2" underline="always" onClick={handleOpen} color={'text.primary'}>
-          {t('event.tickets.stepper.8.additional_info')}
-        </Link>
-      </Box>
-
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        maxWidth="sm"
-        fullWidth
-        PaperProps={{
-          sx: {
-            borderRadius: 4,
-            overflow: 'hidden',
-          },
-        }}
-      >
-        <DialogTitle
-          sx={{
-            position: 'relative',
-            textAlign: 'center',
-            fontWeight: 700,
-            fontSize: { xs: '1.5rem', sm: '1.75rem' },
-            pt: { xs: 3.5, sm: 4 },
-            pb: { xs: 2, sm: 2.5 },
-            px: { xs: 3, sm: 4 },
-          }}
-        >
-          {t('event.tickets.stepper.8.title')}
-          <IconButton
-            onClick={handleClose}
-            size="small"
-            sx={{ position: 'absolute', right: 16, top: 16 }}
-          >
-            <Iconify icon="carbon:close" />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent sx={{ px: { xs: 3, sm: 4 }, pb: { xs: 4, sm: 5 } }}>
-          <Stack spacing={3}>
-            <Box>
-              <Typography variant="subtitle2" fontWeight={700} gutterBottom>
-                {t('event.tickets.insurance.label')}
-              </Typography>
-              <Typography variant="body2" paragraph>
-                {t('event.tickets.insurance.modal.description')}
-              </Typography>
-              <Typography variant="body2" paragraph>
-                {t('event.tickets.insurance.modal.coverage')}
-              </Typography>
-              <BorderedCheckbox
-                name="ticketInsurance"
-                disabled={totalTickets <= 0}
-                title={t('event.tickets.insurance.label')}
-                price={
-                  <>
-                    + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
-                    {t('event.tickets.insurance.per_ticket')}
-                  </>
-                }
-              />
-            </Box>
-            <Divider />
-            <Box>
-              <Typography variant="subtitle2" fontWeight={700} gutterBottom>
-                {t('event.tickets.sms_notification.label')}
-              </Typography>
-              <Typography variant="body2" paragraph>
-                {t('event.tickets.sms_notification.modal.description')}
-              </Typography>
-              <BorderedCheckbox
-                name="smsNotification"
-                disabled={totalTickets <= 0}
-                title={t('event.tickets.sms_notification.label')}
-                price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
-              />
-            </Box>
-            <Button
-              variant="outlined"
-              onClick={handleClose}
-              sx={{
-                mt: 1,
-                py: 1.25,
-                borderRadius: 2,
-                fontWeight: 700,
-              }}
-            >
-              {t('close')}
-            </Button>
-          </Stack>
-        </DialogContent>
-      </Dialog>
-    </Stack>
-  );
-};
-
-export default Services;

package/src/form/shipping/ShippingSkeleton.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Skeleton, Stack, SxProps } from '@mui/material';
-
-interface Props {
-  sx?: SxProps;
-}
-
-const ShippingSkeleton: React.FC<Props> = ({ sx }) => (
-  <Stack
-    spacing={1}
-    sx={{
-      width: '100%',
-      ...sx,
-    }}
-  >
-    {[...Array(5)].map((_, index) => (
-      <Skeleton key={index} variant="rounded" sx={{ width: '100%', height: 56 }} />
-    ))}
-  </Stack>
-);
-
-export default ShippingSkeleton;