@eventlook/sdk 1.4.48 → 1.4.49-beta.1

package/src/form/PaymentOverviewBox.tsx

@@ -1,6 +1,6 @@
 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 { Box, Divider, Grid, Stack, Typography } from '@mui/material';
 import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox.tsx';
 import locationIcon from '@iconify/icons-carbon/location';
 import { getPlaceAsString } from '@utils/place';
@@ -26,6 +26,7 @@ import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shoppi
 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;
@@ -54,9 +55,9 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     totalFee,
     isPaymentVerify,
     ticketInsurance,
-    ticketInsurancePricePerUnit,
     smsNotification,
     smsNotificationPrice,
+    ticketInsurancePricePerUnit,
   } = values;
   const tickets: Record<string, ITicketFormTicket[]> = useWatch({
     name: 'tickets',
@@ -385,29 +386,29 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     }
   }, []);
 
-  const removeProduct = (variant: ISelectedProductVariant) => {
-    const { eventId, variantId } = variant;
-    const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
+  // 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];
+  //   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 };
-    }
+  //   if ((item.quantity ?? 0) <= 1) {
+  //     list.splice(idx, 1);
+  //   } else {
+  //     list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
+  //   }
 
-    const next = { ...products, [eventId]: list };
+  //   const next = { ...products, [eventId]: list };
 
-    if (list.length === 0) {
-      const { [eventId]: _removed, ...rest } = next;
-      setValue('products', rest);
-    } else {
-      setValue('products', next);
-    }
-  };
+  //   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}>
@@ -446,7 +447,8 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
               />
             }
             sx={{
-              backgroundColor: (theme) => theme.palette.grey.A100,
+              backgroundColor: (theme) =>
+                theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
               borderRadius: 1,
             }}
           >
@@ -473,15 +475,49 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
           </Stack>
         </Stack>
       )}
-      <Stack className="overview-card__order-info" p={2} spacing={1}>
+      <Stack
+        className="overview-card__order-info"
+        p={2}
+        pt={{ xs: 0, sm: 2 }}
+        spacing={0.75}
+        useFlexGap
+      >
         {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
+
+        {!!selectedTickets.length && (
+          <Stack spacing={0.5}>
+            {/* 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' }} />
+          </Stack>
+        )}
         {selectedTickets.map((ticket, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-              <Typography variant="caption">
+              <Typography variant="body2">
                 {ticket.quantity}x {ticket.itemName}
               </Typography>
-              <Typography variant="caption">
+              <Typography variant="body2">
                 {fCurrency(
                   calculatePriceWithDiscount(
                     ticket.price,
@@ -501,10 +537,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
                 alignItems="center"
                 spacing={2}
               >
-                <Typography variant="caption">
+                <Typography variant="body2">
                   - {product.quantity}x {product.name}
                 </Typography>
-                <Typography variant="caption">
+                <Typography variant="body2">
                   {product.price > 0
                     ? fCurrency(
                         calculatePriceWithDiscount(
@@ -526,118 +562,49 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         {selectedVariants.map((variant, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-              <Typography variant="caption">
+              <Typography variant="body2">
                 {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>
+              <Typography variant="body2">
+                {fCurrency(
+                  calculatePriceWithDiscount(
+                    variant.price,
+                    promoCodesValues.productDiscountPercent,
+                    promoCodesValues.fixedDevidedProducts
+                      ? promoCodesValues.fixedDevidedProducts * variant.quantity
+                      : 0
+                  ),
+                  lang,
+                  event.currency
+                )}
+              </Typography>
             </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>
-        )}
-        {ticketInsurance && totalItemCount.totalTickets > 0 && (
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="caption">{t('form.labels.ticket_insurance')}</Typography>
-            <Typography variant="caption">
-              {fCurrency(values.ticketInsurancePrice, lang, event.currency)}
-            </Typography>
-          </Stack>
-        )}
-        {smsNotification && totalItemCount.totalTickets > 0 && (
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="caption">{t('form.labels.sms_notification')}</Typography>
-            <Typography variant="caption">
-              {fCurrency(values.smsNotificationPrice, lang, event.currency)}
-            </Typography>
+            <Typography variant="body2">{t('form.labels.shipping_fee')}</Typography>
+            <Typography variant="body2">{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>
+            <Typography variant="body2">{t('form.labels.service_fee')}</Typography>
+            <Typography variant="body2">{getFee}</Typography>
           </Stack>
         )}
         {((!!selectedTickets.length && isMobile) || !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={*/}
-            {/*    <>*/}
-            {/*      + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
-            {/*      {t('event.tickets.insurance.per_ticket')}*/}
-            {/*    </>*/}
-            {/*  }*/}
-            {/*  modal={{*/}
-            {/*    title: t('event.tickets.insurance.label'),*/}
-            {/*    description: (*/}
-            {/*      <>*/}
-            {/*        <Typography variant="body2" paragraph>*/}
-            {/*          {t('event.tickets.insurance.modal.description')}*/}
-            {/*        </Typography>*/}
-            {/*        <Typography variant="body2" paragraph>*/}
-            {/*          {t('event.tickets.insurance.modal.coverage')}*/}
-            {/*        </Typography>*/}
-            {/*        <Typography variant="body2" sx={{ fontWeight: 600 }}>*/}
-            {/*          {t('event.tickets.insurance.modal.price')}:{' '}*/}
-            {/*          {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
-            {/*          {t('event.tickets.insurance.per_ticket')}*/}
-            {/*        </Typography>*/}
-            {/*      </>*/}
-            {/*    ),*/}
-            {/*  }}*/}
-            {/*/>*/}
-            <PaymentOverviewCheckbox
-              checkboxName="smsNotification"
-              label={t('event.tickets.sms_notification.label')}
-              value={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
-              modal={{
-                title: t('event.tickets.sms_notification.label'),
-                description: (
-                  <>
-                    <Typography variant="body2" paragraph>
-                      {t('event.tickets.sms_notification.modal.description')}
-                    </Typography>
-                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                      {t('event.tickets.sms_notification.modal.price')}:{' '}
-                      {fCurrency(smsNotificationPrice, lang, event.currency)}
-                    </Typography>
-                  </>
-                ),
-              }}
-            />
-            <Divider sx={{ borderStyle: 'dashed' }} />
-          </>
-        )}
         <FeeBox event={event} />
-        <LoadingButton type="submit" variant="contained" size="large" fullWidth>
+        <LoadingButton
+          type="submit"
+          form={EVENTLOOK_ORDER_FORM_ID}
+          variant="contained"
+          size="large"
+          fullWidth
+          sx={{ height: { xs: 36, md: 40 } }}
+        >
           {t(isPaymentVerify ? 'verify' : 'buy')}
         </LoadingButton>
       </Stack>

package/src/form/PaymentOverviewDrawer.tsx

@@ -0,0 +1,238 @@
+import { Box, Button, SwipeableDrawer, Typography } from '@mui/material';
+import React, { useEffect } from 'react';
+import { useRef, useState } from 'react';
+import PaymentOverviewBox from './PaymentOverviewBox';
+import { IEvent } from '@utils/types/event.type';
+import useGlobal from '@hooks/useGlobal';
+import { fCurrency } from '@utils/formatNumber';
+import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
+
+interface Props {
+  event: IEvent;
+  totalPrice: number;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const swipeAreaWidth = 56;
+
+const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChange }) => {
+  const { t, lang } = useGlobal();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const touchStartYRef = useRef<number | null>(null);
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const prevYRef = useRef<number>(Number.POSITIVE_INFINITY);
+
+  // Opens drawer when scrolling down
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (totalPrice <= 0) return;
+          const currentY = entry.boundingClientRect.y;
+          const isScrollingDown = currentY < prevYRef.current;
+
+          if (entry.isIntersecting && isScrollingDown) {
+            openDrawerHandler();
+          }
+
+          prevYRef.current = currentY;
+        });
+      },
+      {
+        threshold: 0,
+        rootMargin: '0px 0px 0px 0px',
+      }
+    );
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.unobserve(sentinel);
+    };
+  }, [totalPrice]);
+
+  const toggleDrawer = () => {
+    setOpenDrawer((prev) => {
+      const next = !prev;
+      onOpenChange?.(next);
+      return next;
+    });
+  };
+
+  const openDrawerHandler = () => {
+    setOpenDrawer(true);
+    onOpenChange?.(true);
+  };
+
+  const closeDrawerHandler = () => {
+    setOpenDrawer(false);
+    onOpenChange?.(false);
+  };
+
+  const handleClosedTabTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+    touchStartYRef.current = event.touches[0]?.clientY ?? null;
+  };
+
+  const handleClosedTabTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {
+    const startY = touchStartYRef.current;
+    const endY = event.changedTouches[0]?.clientY;
+
+    if (startY === null || typeof endY !== 'number') {
+      touchStartYRef.current = null;
+      return;
+    }
+
+    const swipeDistance = startY - endY;
+    if (swipeDistance > 24) {
+      openDrawerHandler();
+    }
+
+    touchStartYRef.current = null;
+  };
+
+  return (
+    <Box sx={{ display: { md: 'none' } }}>
+      {/* Sentinel element for intersection observer */}
+      <Box ref={sentinelRef} sx={{ height: 1, visibility: 'hidden' }} />
+
+      {/* Drawer Tab */}
+      {!openDrawer && (
+        <Box
+          onTouchStart={handleClosedTabTouchStart}
+          onTouchEnd={handleClosedTabTouchEnd}
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: (theme) => theme.palette.background.paper,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+            zIndex: 1300,
+          }}
+        >
+          <Box
+            role="button"
+            aria-label={t('form.labels.payment_overview_open')}
+            onClick={toggleDrawer}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              cursor: 'pointer',
+              width: '100%',
+              py: 1,
+            }}
+          >
+            <Box
+              sx={{
+                width: 30,
+                height: 6,
+                backgroundColor: (theme) => theme.palette.grey[300],
+                borderRadius: 3,
+              }}
+            />
+          </Box>
+          <Box
+            sx={{
+              width: '100%',
+              px: 2,
+              pb: 2,
+            }}
+          >
+            <Typography
+              sx={{
+                fontWeight: 'bold',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <span>{t('form.labels.total')}:</span>
+              <span>{fCurrency(totalPrice, lang, event.currency)}</span>
+            </Typography>
+
+            <Button
+              type="submit"
+              form={EVENTLOOK_ORDER_FORM_ID}
+              variant="contained"
+              size="large"
+              fullWidth
+              sx={{ mt: 1, height: { xs: 36, md: 40 } }}
+            >
+              {t('buy')}
+            </Button>
+          </Box>
+        </Box>
+      )}
+
+      {/* Drawer Content */}
+      <SwipeableDrawer
+        anchor="bottom"
+        open={openDrawer}
+        onClose={closeDrawerHandler}
+        onOpen={openDrawerHandler}
+        swipeAreaWidth={swipeAreaWidth}
+        disableSwipeToOpen={false}
+        keepMounted
+        sx={{ display: { md: 'none' } }}
+        ModalProps={{
+          disableScrollLock: true,
+          keepMounted: false,
+          BackdropProps: {
+            sx: { background: 'rgba(0,0,0,0)' },
+            onClick: (event: React.MouseEvent<HTMLDivElement>) => {
+              event.stopPropagation();
+            },
+          },
+        }}
+        PaperProps={{
+          sx: {
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+            overflow: 'hidden',
+          },
+        }}
+      >
+        <Box
+          role="button"
+          aria-label={t('form.labels.payment_overview_close')}
+          onClick={toggleDrawer}
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: (theme) => theme.palette.background.paper,
+            cursor: 'pointer',
+            py: 1,
+          }}
+        >
+          <Box
+            sx={{
+              width: 30,
+              height: 6,
+              backgroundColor: (theme) => theme.palette.grey[300],
+              borderRadius: 3,
+            }}
+          />
+        </Box>
+        <Box
+          sx={{
+            height: '100%',
+            overflow: 'auto',
+          }}
+        >
+          <PaymentOverviewBox event={event} />
+        </Box>
+      </SwipeableDrawer>
+    </Box>
+  );
+};
+
+export default PaymentOverviewDrawer;

package/src/form/Shipping.tsx

@@ -46,7 +46,6 @@ const Shipping: React.FC<Props> = ({ event }) => {
     [products]
   );
   const shippingMethodId = watch('shipping.shippingMethodId');
-  const branchId = watch('shipping.branchId');
   const [displayBranchName, setDisplayBranchName] = useState<string | null>(null);
   const [firstRender, setFirstRender] = useState<boolean>(true);
   const filteredShippingMethods = useMemo(
@@ -83,9 +82,21 @@ const Shipping: React.FC<Props> = ({ event }) => {
     }
   };
 
+  const openPacketaWidget = () => {
+    const interval = setInterval(() => {
+      if (window.Packeta && window.Packeta.Widget) {
+        clearInterval(interval);
+        window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
+          language: lang,
+        });
+      }
+    }, 100);
+  };
+
   const handleChangeBranch = () => {
     setValue('shipping.branchId', null);
     setDisplayBranchName(null);
+    openPacketaWidget();
   };
 
   useEffect(() => {
@@ -103,25 +114,14 @@ const Shipping: React.FC<Props> = ({ event }) => {
     if (selectedShippingMethod) {
       setValue('shipping.price', selectedShippingMethod.price);
 
-      if (selectedShippingMethod.type === ShippingTypes.PACKETA) {
-        if (!branchId) {
-          const interval = setInterval(() => {
-            if (window.Packeta && window.Packeta.Widget) {
-              clearInterval(interval);
-              window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
-                language: lang,
-              });
-            }
-          }, 100);
-        }
-      } else {
+      if (selectedShippingMethod.type !== ShippingTypes.PACKETA) {
         setValue('shipping.branchId', null);
         setDisplayBranchName(null);
       }
     } else {
       setValue('shipping.price', 0);
     }
-  }, [shippingMethodId, shippingMethods, branchId]);
+  }, [shippingMethodId, shippingMethods]);
 
   return (
     <>
@@ -142,11 +142,24 @@ const Shipping: React.FC<Props> = ({ event }) => {
                   control={control}
                   render={({ field, fieldState: { error } }) => (
                     <FormControl component="fieldset" sx={{ width: '100%' }}>
-                      <RadioGroup {...field}>
+                      <RadioGroup
+                        {...field}
+                        onChange={(event, value) => {
+                          field.onChange(event);
+                          const selectedShippingMethod = filteredShippingMethods.find(
+                            (method) => method.id === Number(value)
+                          );
+
+                          if (selectedShippingMethod?.type === ShippingTypes.PACKETA) {
+                            openPacketaWidget();
+                          }
+                        }}
+                      >
                         {filteredShippingMethods.map((shippingMethod) => (
                           <ShippingMethodItem
                             key={shippingMethod.id}
                             active={Number(shippingMethodId) === shippingMethod.id}
+                            hasError={!!error}
                           >
                             <FormControlLabel
                               value={shippingMethod.id}
@@ -178,8 +191,7 @@ const Shipping: React.FC<Props> = ({ event }) => {
                                     {paymentImages[shippingMethod.type]}
                                   </Stack>
                                   {shippingMethod.type === ShippingTypes.PACKETA &&
-                                    shippingMethod.id === Number(shippingMethodId) &&
-                                    branchId && (
+                                    shippingMethod.id === Number(shippingMethodId) && (
                                       <Box>
                                         <Button
                                           onClick={handleChangeBranch}