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

package/src/form/payment/PaymentOverviewCheckbox.tsx

@@ -0,0 +1,88 @@
+import React, { JSX } from 'react';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+import useGlobal from '@hooks/useGlobal.ts';
+import { Iconify } from '@components';
+
+interface Props {
+  checkboxName: string;
+  label: string;
+  value: string | JSX.Element;
+}
+
+const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value }) => {
+  const { t } = useGlobal();
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Controller
+        name={checkboxName}
+        control={control}
+        render={({ field }) => (
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            useFlexGap
+            spacing={1}
+            sx={{ width: '100%', mb: 0.5 }}
+          >
+            <Typography variant="body2" sx={{ flex: 1 }}>
+              {label}
+            </Typography>
+            <Box
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Typography
+                variant="body2"
+                sx={{
+                  mr: field.value ? 0 : 1,
+                  ...(field.value
+                    ? {
+                        position: 'absolute',
+                        right: 0,
+                      }
+                    : {}),
+                }}
+              >
+                {value}
+              </Typography>
+              <Button
+                variant="outlined"
+                color="primary"
+                size="small"
+                startIcon={<Iconify icon="carbon:add" />}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  field.onChange(true);
+                }}
+                sx={{
+                  borderRadius: 1,
+                  textTransform: 'none',
+                  px: 1,
+                  width: 96,
+                  minWidth: 96,
+                  color: 'text.primary',
+                  visibility: field.value ? 'hidden' : 'visible',
+                  pointerEvents: field.value ? 'none' : 'auto',
+                }}
+                tabIndex={field.value ? -1 : 0}
+                aria-hidden={field.value}
+              >
+                {t('add')}
+              </Button>
+            </Box>
+          </Stack>
+        )}
+      />
+    </>
+  );
+};
+
+export default PaymentOverviewCheckbox;

package/src/form/product/ProductCard.tsx

@@ -1,6 +1,18 @@
-import { Button, Card, Stack, Typography } from '@mui/material';
-import { Iconify } from '@components/iconify';
+import {
+  Box,
+  Button,
+  Card,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+} from '@mui/material';
 import Image from '@components/Image';
+import { Iconify } from '@components/iconify';
 import { IEventProduct } from '@utils/types/event-product.type';
 import React, { useMemo, useState } from 'react';
 import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
@@ -9,6 +21,8 @@ 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';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 
 interface Props {
   eventProduct: IEventProduct;
@@ -17,85 +31,270 @@ interface Props {
 }
 
 const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {
-  const { t } = useGlobal();
+  const { t, lang } = useGlobal();
   const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
-  const { setValue } = useFormContext<ITicketForm>();
+  const [openSimpleProductDialog, setOpenSimpleProductDialog] = 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 isSimpleProduct = eventProduct.eventProductVariants.length === 1;
+  const simpleVariant = isSimpleProduct ? eventProduct.eventProductVariants[0] : undefined;
 
-  const onSelectVariant = (selectedVariant: IEventProductForm) => {
-    const variant = products.find(
-      (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
-    );
+  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 (variant) {
-      if (selectedVariant.quantity === 0) {
-        setValue(
-          `products.${eventId}`,
-          products.filter(
-            (product) => product.eventProductVariantId !== variant.eventProductVariantId
-          )
-        );
+      if (index >= 0) {
+        if (selectedVariant.quantity <= 0) {
+          nextProducts.splice(index, 1);
+        } else {
+          nextProducts[index] = {
+            ...nextProducts[index],
+            quantity: selectedVariant.quantity,
+          };
+        }
       } else {
-        setValue(
-          `products.${eventId}`,
-          products.map((product) => {
-            if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {
-              return {
-                ...product,
-                quantity: selectedVariant.quantity,
-              };
-            }
-            return product;
-          })
-        );
+        if (selectedVariant.quantity > 0) {
+          nextProducts.push(selectedVariant);
+        }
       }
-    } else if (selectedVariant.quantity !== 0) {
-      setValue(`products.${eventId}`, [...products, selectedVariant]);
-    }
+    });
+
+    setValue(`products.${eventId}`, nextProducts, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
   };
 
-  const eventNotEmpty = useMemo(() => products.some((product) => product?.quantity), [products]);
+  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]);
+
+  const selectedQuantityByVariant = useMemo(
+    () => getSelectedQuantityByVariant(products, tickets),
+    [products, tickets]
+  );
+
+  const simpleProductQuantity = useMemo(() => {
+    if (!simpleVariant) return 0;
+    const matched = products.find((product) => product.eventProductVariantId === simpleVariant.id);
+    return matched?.quantity ?? 0;
+  }, [products, simpleVariant]);
+
+  const simpleProductMaxAvailable = useMemo(() => {
+    if (!simpleVariant) return 0;
+    const { quantity, sold } = simpleVariant.productVariant;
+    if (!quantity) return Number.POSITIVE_INFINITY;
+    const used = selectedQuantityByVariant[simpleVariant.id] ?? 0;
+    return quantity - sold - used;
+  }, [simpleVariant, selectedQuantityByVariant]);
+
+  const onChangeSimpleProductQuantity = (nextQuantity: number) => {
+    if (!simpleVariant) return;
+    if (nextQuantity < 0 || nextQuantity > MAX_TICKETS_PER_ORDER) return;
+    if (
+      nextQuantity > simpleProductQuantity &&
+      nextQuantity - simpleProductQuantity > simpleProductMaxAvailable
+    )
+      return;
+
+    onSelectVariant({
+      eventProductVariantId: simpleVariant.id,
+      productVariantId: simpleVariant.productVariant.id,
+      quantity: nextQuantity,
+      price: simpleVariant.priceWithVat,
+      excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+    });
+  };
+
+  const simpleProductQuantityControl =
+    simpleProductQuantity > 0 ? (
+      <Stack direction="row" spacing={1} alignItems="center" width="100%">
+        <IconButton
+          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity - 1)}
+          disabled={simpleProductQuantity <= 0}
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            p: 0,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Iconify icon="eva:minus-fill" width={18} height={18} />
+        </IconButton>
+        <Box
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 700,
+          }}
+        >
+          {simpleProductQuantity}
+        </Box>
+        <IconButton
+          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity + 1)}
+          disabled={
+            simpleProductQuantity >= MAX_TICKETS_PER_ORDER || simpleProductMaxAvailable <= 0
+          }
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            p: 0,
+            borderRadius: 1,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            '&:hover': { bgcolor: 'primary.dark' },
+            '&.Mui-disabled': {
+              bgcolor: 'action.disabledBackground',
+              color: 'action.disabled',
+            },
+          }}
+        >
+          <Iconify icon="eva:plus-fill" width={18} height={18} />
+        </IconButton>
+      </Stack>
+    ) : (
+      <Button
+        variant="contained"
+        onClick={() => onChangeSimpleProductQuantity(1)}
+        disabled={simpleProductMaxAvailable <= 0}
+        fullWidth
+      >
+        {t('add')}
+      </Button>
+    );
 
   return (
     <>
-      <Card sx={{ p: 2 }}>
-        <Stack spacing={1}>
-          <Image src={eventProduct.product.previewImage.url} ratio="1/1" sx={{ borderRadius: 2 }} />
-          <Typography variant="h5">{eventProduct.product.name}</Typography>
-          <Typography
-            variant="caption"
-            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
-            sx={{
-              height: 44,
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              display: '-webkit-box',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-            }}
+      <Card
+        sx={{
+          p: 0,
+          borderRadius: 0,
+          boxShadow: 'none',
+          background: 'none',
+        }}
+      >
+        <Stack spacing={0}>
+          <Image
+            src={eventProduct.product.previewImage.url}
+            ratio="21/9"
+            sx={{ borderRadius: 1, maxHeight: 96 }}
           />
-          <Button
-            variant="contained"
-            onClick={() => setOpenVariantDialog(true)}
-            fullWidth
-            startIcon={
-              eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
-            }
-          >
-            {eventNotEmpty ? t('change') : t('add')}
-          </Button>
+          <Typography variant="h5" sx={{ fontSize: '14px', fontWeight: 700 }}>
+            {eventProduct.product.name}
+          </Typography>
+          <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
+            <Typography variant="body2" color="text.primary">
+              {eventProduct.product.priceWithVat > 0
+                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                : t('free')}
+            </Typography>
+            {isSimpleProduct && (
+              <Link
+                onClick={() => setOpenSimpleProductDialog(true)}
+                color="inherit"
+                underline="always"
+                fontSize={12}
+              >
+                {t('more_info')}
+              </Link>
+            )}
+          </Stack>
+          {isSimpleProduct ? (
+            simpleProductQuantityControl
+          ) : (
+            <Button
+              variant={eventNotEmpty ? 'contained' : 'outlined'}
+              onClick={() => setOpenVariantDialog(true)}
+              fullWidth
+              sx={{
+                color: eventNotEmpty ? (theme) => theme.palette.common.white : 'inherit',
+                borderColor: (theme) => theme.palette.grey[300],
+              }}
+            >
+              {eventNotEmpty
+                ? t('event.tickets.merchandise.show_added')
+                : t('event.tickets.merchandise.show_sizes')}
+            </Button>
+          )}
         </Stack>
       </Card>
       <ProductVariantsDialog
         eventProduct={eventProduct}
         eventId={eventId}
-        openDialog={openVariantDialog}
+        openDialog={openVariantDialog && !isSimpleProduct}
         onClose={() => setOpenVariantDialog(false)}
         callback={onSelectVariant}
-        selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+        selectedQuantityByVariant={selectedQuantityByVariant}
         isOnlyMerchandise={isOnlyMerchandise}
       />
+      <Dialog
+        open={openSimpleProductDialog && isSimpleProduct}
+        onClose={() => setOpenSimpleProductDialog(false)}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle
+          sx={{
+            textAlign: 'center',
+            fontWeight: 700,
+            fontSize: { xs: '1.5rem', sm: '2rem' },
+            mb: 2,
+          }}
+        >
+          {eventProduct.product.name}
+        </DialogTitle>
+        <DialogContent sx={{ pb: 0 }}>
+          <Stack spacing={2}>
+            <Typography
+              variant="body2"
+              dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
+            />
+            <Typography variant="body1" color="text.primary">
+              {eventProduct.product.priceWithVat > 0
+                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                : t('free')}
+            </Typography>
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 3 }}>
+          <Stack spacing={1} width="100%">
+            {simpleProductQuantityControl}
+            <Button
+              variant="outlined"
+              onClick={() => setOpenSimpleProductDialog(false)}
+              fullWidth
+              sx={{
+                color: 'inherit',
+                borderColor: (theme) => theme.palette.grey[300],
+              }}
+            >
+              {t('close')}
+            </Button>
+          </Stack>
+        </DialogActions>
+      </Dialog>
     </>
   );
 };