@eventlook/sdk 1.5.0-beta.6 → 1.5.0-beta.8

package/src/form/PaymentOverviewDrawer.tsx

@@ -0,0 +1,445 @@
+import { Box, Button, SwipeableDrawer, Typography } from '@mui/material';
+import React, { useEffect, 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';
+
+interface Props {
+  event: IEvent;
+  totalPrice: number;
+  termsAndConditionsRef?: React.RefObject<HTMLElement | null>;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const swipeAreaWidth = 120;
+
+const clearResetPulledPastTimeout = (timeoutRef: { current: number | null }) => {
+  if (timeoutRef.current !== null) {
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  }
+};
+
+const PaymentOverviewDrawer: React.FC<Props> = ({
+  event,
+  totalPrice,
+  termsAndConditionsRef,
+  onOpenChange,
+}) => {
+  const { t, lang } = useGlobal();
+  const [isDrawerOpened, setIsDrawerOpened] = useState(false);
+  const [isOpeningGesture, setIsOpeningGesture] = useState(false);
+  const [hasPulledPastClosedTabHeight, setHasPulledPastClosedTabHeight] = useState(false);
+  const [isDrawerHidden, setIsDrawerHidden] = useState(false);
+  const [closedTabHeight, setClosedTabHeight] = useState(0);
+  const openingTouchStartYRef = useRef<number | null>(null);
+  const openDrawerRef = useRef(false);
+  const isOpeningGestureRef = useRef(false);
+  const shouldReopenOnScrollUpRef = useRef(false);
+  const lastScrollYRef = useRef(0);
+  const isScrollingDownRef = useRef(false);
+  const wasAtPageBottomRef = useRef(false);
+  const resetPulledPastTimeoutRef = useRef<number | null>(null);
+  const closedTabRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    openDrawerRef.current = isDrawerOpened;
+  }, [isDrawerOpened]);
+
+  useEffect(() => {
+    isOpeningGestureRef.current = isOpeningGesture;
+  }, [isOpeningGesture]);
+
+  // reopens the drawer when user scrolls up and the drawer was closed by scrolling down to the bottom of the page
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const atBottomThreshold = 8;
+    lastScrollYRef.current = window.scrollY;
+    isScrollingDownRef.current = false;
+    wasAtPageBottomRef.current =
+      window.innerHeight + window.scrollY >=
+      document.documentElement.scrollHeight - atBottomThreshold;
+
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      const isScrollingUp = currentY < lastScrollYRef.current;
+      const isScrollingDown = currentY > lastScrollYRef.current;
+      const isAtPageBottom =
+        window.innerHeight + currentY >= document.documentElement.scrollHeight - atBottomThreshold;
+
+      isScrollingDownRef.current = isScrollingDown;
+
+      if (
+        isScrollingUp &&
+        wasAtPageBottomRef.current &&
+        shouldReopenOnScrollUpRef.current &&
+        !openDrawerRef.current
+      ) {
+        shouldReopenOnScrollUpRef.current = false;
+        setIsDrawerHidden(false);
+        openDrawerHandler();
+      }
+
+      wasAtPageBottomRef.current = isAtPageBottom;
+      lastScrollYRef.current = currentY;
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    const closedTab = closedTabRef.current;
+    if (!closedTab) return;
+
+    const updateClosedTabHeight = () => {
+      setClosedTabHeight(closedTab.offsetHeight);
+    };
+
+    updateClosedTabHeight();
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateClosedTabHeight();
+    });
+
+    resizeObserver.observe(closedTab);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(
+    () => () => {
+      clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    },
+    []
+  );
+
+  useEffect(() => {
+    const termsAndConditionsElement = termsAndConditionsRef?.current;
+    if (!termsAndConditionsElement) {
+      return;
+    }
+
+    if (!('IntersectionObserver' in window)) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        const hasReachedTermsSection = entry?.isIntersecting ?? false;
+        const shouldAutoCloseDrawer = hasReachedTermsSection;
+        const shouldHideDrawerTab =
+          hasReachedTermsSection && !openDrawerRef.current && !isOpeningGestureRef.current;
+        setIsDrawerHidden(shouldHideDrawerTab);
+
+        if (shouldAutoCloseDrawer && openDrawerRef.current && isScrollingDownRef.current) {
+          closeDrawerHandler({ shouldReopenOnScrollUp: true });
+          setIsDrawerHidden(true);
+        }
+      },
+      {
+        root: null,
+        threshold: 0,
+        rootMargin: '0px 0px -40% 0px',
+      }
+    );
+
+    observer.observe(termsAndConditionsElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [termsAndConditionsRef]);
+
+  const toggleDrawer = () => {
+    if (openDrawerRef.current) {
+      closeDrawerHandler();
+      return;
+    }
+
+    openDrawerHandler();
+  };
+
+  const openDrawerHandler = () => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    setIsOpeningGesture(false);
+    setHasPulledPastClosedTabHeight(false);
+    openingTouchStartYRef.current = null;
+    shouldReopenOnScrollUpRef.current = false;
+    setIsDrawerOpened(true);
+    onOpenChange?.(true);
+  };
+
+  const closeDrawerHandler = ({
+    shouldReopenOnScrollUp = false,
+  }: { shouldReopenOnScrollUp?: boolean } = {}) => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    setIsOpeningGesture(false);
+    setHasPulledPastClosedTabHeight(false);
+    openingTouchStartYRef.current = null;
+    shouldReopenOnScrollUpRef.current = shouldReopenOnScrollUp;
+    setIsDrawerOpened(false);
+    onOpenChange?.(false);
+  };
+
+  const scheduleResetPulledPastTimeout = () => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    resetPulledPastTimeoutRef.current = window.setTimeout(() => {
+      if (!openDrawerRef.current) {
+        setHasPulledPastClosedTabHeight(false);
+      }
+    }, 180);
+  };
+
+  const handleGestureStart = (startY: number | null) => {
+    openingTouchStartYRef.current = startY;
+    setIsOpeningGesture(true);
+    setHasPulledPastClosedTabHeight(false);
+  };
+
+  const handleGestureMove = (currentY?: number) => {
+    if (!isOpeningGestureRef.current) return;
+
+    const startY = openingTouchStartYRef.current;
+    if (startY === null || typeof currentY !== 'number') return;
+
+    const pullDistance = startY - currentY;
+    const currentClosedTabHeight = closedTabRef.current?.offsetHeight ?? 0;
+    setHasPulledPastClosedTabHeight(
+      currentClosedTabHeight > 0 && pullDistance >= currentClosedTabHeight
+    );
+  };
+
+  const handleGestureCancel = () => {
+    openingTouchStartYRef.current = null;
+    setIsOpeningGesture(false);
+    setHasPulledPastClosedTabHeight(false);
+  };
+
+  const handleGestureEnd = ({
+    shouldResetTouchStart = false,
+  }: { shouldResetTouchStart?: boolean } = {}) => {
+    if (shouldResetTouchStart) {
+      openingTouchStartYRef.current = null;
+    }
+
+    if (!isDrawerOpened) {
+      setIsOpeningGesture(false);
+      scheduleResetPulledPastTimeout();
+    }
+  };
+
+  return (
+    <Box sx={{ display: { md: 'none' } }}>
+      {/* Drawer Tab */}
+      <Box
+        ref={closedTabRef}
+        sx={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: (theme) => theme.palette.background.paper,
+          borderTopLeftRadius: isOpeningGesture || isDrawerOpened ? 0 : 16,
+          borderTopRightRadius: isOpeningGesture || isDrawerOpened ? 0 : 16,
+          boxShadow:
+            isOpeningGesture || isDrawerOpened ? 'none' : '0 -8px 10px 2px rgba(0,0,0,0.2)',
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          opacity: isDrawerHidden ? 0 : 1,
+          transform: isDrawerHidden ? 'translateY(calc(100% + 12px))' : 'translateY(0)',
+          transition:
+            'opacity 180ms ease, transform 180ms ease, border-radius 120ms ease, box-shadow 120ms ease',
+          pointerEvents: 'none',
+        }}
+      >
+        {!isDrawerOpened && (
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              py: 1,
+            }}
+          >
+            <Box
+              sx={{
+                width: 80,
+                height: 6,
+                backgroundColor: (theme) => theme.palette.grey[300],
+                borderRadius: 3,
+                opacity: isOpeningGesture ? 0 : 1,
+                transition: 'opacity 120ms ease',
+              }}
+            />
+          </Box>
+        )}
+        <Box
+          role="button"
+          aria-label={t('form.labels.payment_overview_open')}
+          onClick={toggleDrawer}
+          onTouchStart={(event: React.TouchEvent<HTMLDivElement>) => {
+            handleGestureStart(event.touches[0]?.clientY ?? null);
+          }}
+          onMouseDown={() => {
+            handleGestureStart(null);
+          }}
+          onTouchMove={(event: React.TouchEvent<HTMLDivElement>) => {
+            handleGestureMove(event.touches[0]?.clientY);
+          }}
+          onTouchCancel={handleGestureCancel}
+          onTouchEnd={() => {
+            handleGestureEnd({ shouldResetTouchStart: true });
+          }}
+          onMouseUp={() => {
+            handleGestureEnd();
+          }}
+          sx={{
+            width: '100%',
+            px: 2,
+            pb: 2,
+            pointerEvents: isDrawerOpened || isDrawerHidden ? 'none' : 'auto',
+            cursor: 'pointer',
+          }}
+        >
+          <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}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+            variant="contained"
+            size="large"
+            fullWidth
+            sx={{ mt: 1, height: { xs: 36, md: 40 } }}
+          >
+            {t('buy')}
+          </Button>
+        </Box>
+      </Box>
+
+      {/* Drawer Content */}
+      <SwipeableDrawer
+        anchor="bottom"
+        open={isDrawerOpened}
+        onClose={() => closeDrawerHandler()}
+        onOpen={() => openDrawerHandler()}
+        swipeAreaWidth={swipeAreaWidth}
+        allowSwipeInChildren
+        disableSwipeToOpen={isDrawerHidden}
+        keepMounted
+        SwipeAreaProps={{
+          onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => {
+            handleGestureStart(event.touches[0]?.clientY ?? null);
+          },
+          onMouseDown: () => {
+            handleGestureStart(null);
+          },
+          onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => {
+            handleGestureMove(event.touches[0]?.clientY);
+          },
+          onTouchCancel: handleGestureCancel,
+          onTouchEnd: () => {
+            handleGestureEnd({ shouldResetTouchStart: true });
+          },
+          onMouseUp: () => {
+            handleGestureEnd();
+          },
+        }}
+        sx={{
+          display: { md: 'none' },
+          pointerEvents: isDrawerOpened ? 'none' : 'auto',
+          '& .MuiDrawer-paper': {
+            pointerEvents: 'auto',
+          },
+          '& .MuiSwipeArea-root': {
+            pointerEvents: 'auto',
+          },
+        }}
+        ModalProps={{
+          disableScrollLock: true,
+          keepMounted: false,
+          disableAutoFocus: true,
+          disableRestoreFocus: true,
+          disableEnforceFocus: true,
+          BackdropProps: {
+            sx: {
+              background: 'none',
+              pointerEvents: 'none',
+            },
+          },
+        }}
+        PaperProps={{
+          sx: {
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+            overflow: 'hidden',
+            mb:
+              isDrawerOpened ||
+              (!isDrawerOpened && (isOpeningGesture || hasPulledPastClosedTabHeight))
+                ? `${closedTabHeight}px`
+                : 0,
+            transition: 'none',
+          },
+        }}
+      >
+        <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: 80,
+              height: 6,
+              backgroundColor: (theme) => theme.palette.grey[300],
+              borderRadius: 3,
+            }}
+          />
+        </Box>
+        <Box
+          sx={{
+            height: '100%',
+            overflow: 'auto',
+          }}
+        >
+          <PaymentOverviewBox event={event} hideBuyButton />
+        </Box>
+      </SwipeableDrawer>
+    </Box>
+  );
+};
+
+export default PaymentOverviewDrawer;

package/src/form/PaymentPending.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, useEffect, useState } from 'react';
 import { Box, Typography } from '@mui/material';
 import bankTransferAnimation from '../utils/data/lottie/bank-transfer.json';
 import { varBounce } from '@components/animate';
@@ -9,6 +9,23 @@ const Lottie = lazy(() => import('lottie-react'));
 
 const PaymentPending: React.FC = () => {
   const { t } = useGlobal();
+  const [LottieComponent, setLottieComponent] = useState<React.ComponentType<any> | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    let isMounted = true;
+
+    import('lottie-react').then((module) => {
+      if (isMounted) {
+        setLottieComponent(() => module.default);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
 
   return (
     <Box textAlign="center">
@@ -18,9 +35,7 @@ const PaymentPending: React.FC = () => {
         </Typography>
       </m.div>
       <Box maxWidth={600} mx="auto">
-        <Suspense fallback={null}>
-          <Lottie animationData={bankTransferAnimation} />
-        </Suspense>
+        {LottieComponent ? <LottieComponent animationData={bankTransferAnimation} /> : null}
       </Box>
     </Box>
   );

package/src/form/ReleaseWithMerchandise.tsx

@@ -52,7 +52,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
     return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
   };
 
-  const addRelease = (product?: IEventProductForm) => {
+  const addRelease = (variants?: IEventProductForm[]) => {
     setValue(`tickets.${eventId}`, [
       ...tickets,
       {
@@ -60,7 +60,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
         quantity: 1,
         itemName: '',
         price: 0,
-        products: product ? [product] : [],
+        products: variants?.length ? variants : [],
         extraFields: release.extraFields?.length
           ? [
               release.extraFields.map((field) => ({
@@ -74,7 +74,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
     setOpenVariantDialog(null);
   };
 
-  const increaseQuantity = (product?: IEventProductForm) => {
+  const increaseQuantity = (variants?: IEventProductForm[]) => {
     const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
     if (addedRelease) {
       const newQuantity = Number(addedRelease.quantity) + 1;
@@ -86,7 +86,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
             ? {
                 ...ticket,
                 quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
-                products: product ? [...ticket.products, product] : ticket.products,
+                products: variants?.length ? [...ticket.products, ...variants] : ticket.products,
                 extraFields: release.extraFields?.length
                   ? [
                       ...ticket.extraFields,

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 (
     <>
@@ -141,11 +141,30 @@ 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}
+                          sx={{
+                            '& .MuiFormControlLabel-labelPlacementEnd': {
+                              mr: 0,
+                              width: '100%',
+                            },
+                          }}
                         >
                           <FormControlLabel
                             value={shippingMethod.id}
@@ -157,35 +176,31 @@ const Shipping: React.FC<Props> = ({ event }) => {
                                 alignItems="center"
                                 width="100%"
                               >
-                                <Stack direction="row" alignItems="center">
-                                  <Box
-                                    sx={{
-                                      marginRight: 2,
-                                    }}
-                                  >
+                                <Stack direction="column">
+                                  <Stack direction="row" alignItems="center" spacing={1}>
                                     <Typography sx={{ lineHeight: 1.2 }}>
                                       {t(`shipping_method.types.${shippingMethod.type}`)}
                                     </Typography>
-                                    {displayBranchName &&
-                                      shippingMethod.type === ShippingTypes.PACKETA &&
-                                      shippingMethod.id === Number(shippingMethodId) && (
-                                        <Typography variant="caption" sx={{ lineHeight: 1 }}>
-                                          {displayBranchName}
-                                        </Typography>
-                                      )}
-                                  </Box>
-                                  {paymentImages[shippingMethod.type]}
+                                    {paymentImages[shippingMethod.type]}
+                                  </Stack>
+                                  {displayBranchName &&
+                                    shippingMethod.type === ShippingTypes.PACKETA &&
+                                    shippingMethod.id === Number(shippingMethodId) && (
+                                      <Typography variant="caption" sx={{ lineHeight: 1 }}>
+                                        {displayBranchName}
+                                      </Typography>
+                                    )}
                                 </Stack>
                                 {shippingMethod.type === ShippingTypes.PACKETA &&
-                                  shippingMethod.id === Number(shippingMethodId) &&
-                                  branchId && (
+                                  shippingMethod.id === Number(shippingMethodId) && (
                                     <Box>
                                       <Button
                                         onClick={handleChangeBranch}
                                         variant="outlined"
                                         size="small"
+                                        sx={{ px: 1, whiteSpace: 'nowrap' }}
                                       >
-                                        {t('change')}
+                                        {t('event.tickets.shipping.choose_address')}
                                       </Button>
                                     </Box>
                                   )}