@eventlook/sdk 1.4.49-beta.4 → 1.4.49-beta.6

package/src/form/PaymentOverviewDrawer.tsx

@@ -10,184 +10,386 @@ import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 interface Props {
   event: IEvent;
   totalPrice: number;
+  termsAndConditionsRef?: React.RefObject<HTMLElement | null>;
   onOpenChange?: (open: boolean) => void;
 }
 
-const swipeAreaWidth = 56;
+const swipeAreaWidth = 120;
 
-const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChange }) => {
+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 [openDrawer, setOpenDrawer] = useState(false);
-  const touchStartYRef = useRef<number | null>(null);
+  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);
 
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const prevYRef = useRef<number>(Number.POSITIVE_INFINITY);
+  useEffect(() => {
+    openDrawerRef.current = isDrawerOpened;
+  }, [isDrawerOpened]);
 
-  // Opens drawer when scrolling down
   useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
+    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) => {
-        entries.forEach((entry) => {
-          if (totalPrice <= 0) return;
-          const currentY = entry.boundingClientRect.y;
-          const isScrollingDown = currentY < prevYRef.current;
-
-          if (entry.isIntersecting && isScrollingDown) {
-            openDrawerHandler();
-          }
+        const entry = entries[0];
+        const hasReachedTermsSection = entry?.isIntersecting ?? false;
+        const shouldAutoCloseDrawer = hasReachedTermsSection;
+        const shouldHideDrawerTab =
+          hasReachedTermsSection && !openDrawerRef.current && !isOpeningGestureRef.current;
+        setIsDrawerHidden(shouldHideDrawerTab);
 
-          prevYRef.current = currentY;
-        });
+        if (shouldAutoCloseDrawer && openDrawerRef.current && isScrollingDownRef.current) {
+          closeDrawerHandler({ shouldReopenOnScrollUp: true });
+          setIsDrawerHidden(true);
+        }
       },
       {
+        root: null,
         threshold: 0,
-        rootMargin: '0px 0px 0px 0px',
+        rootMargin: '0px 0px -40% 0px',
       }
     );
 
-    observer.observe(sentinel);
+    observer.observe(termsAndConditionsElement);
 
     return () => {
-      observer.unobserve(sentinel);
+      observer.disconnect();
     };
-  }, [totalPrice]);
+  }, [termsAndConditionsRef]);
 
   const toggleDrawer = () => {
-    setOpenDrawer((prev) => {
-      const next = !prev;
-      onOpenChange?.(next);
-      return next;
-    });
+    if (openDrawerRef.current) {
+      closeDrawerHandler();
+      return;
+    }
+
+    openDrawerHandler();
   };
 
   const openDrawerHandler = () => {
-    setOpenDrawer(true);
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    setIsOpeningGesture(false);
+    setHasPulledPastClosedTabHeight(false);
+    openingTouchStartYRef.current = null;
+    shouldReopenOnScrollUpRef.current = false;
+    setIsDrawerOpened(true);
     onOpenChange?.(true);
   };
 
-  const closeDrawerHandler = () => {
-    setOpenDrawer(false);
+  const closeDrawerHandler = ({
+    shouldReopenOnScrollUp = false,
+  }: { shouldReopenOnScrollUp?: boolean } = {}) => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    setIsOpeningGesture(false);
+    setHasPulledPastClosedTabHeight(false);
+    openingTouchStartYRef.current = null;
+    shouldReopenOnScrollUpRef.current = shouldReopenOnScrollUp;
+    setIsDrawerOpened(false);
     onOpenChange?.(false);
   };
 
-  const handleClosedTabTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
-    touchStartYRef.current = event.touches[0]?.clientY ?? null;
+  const scheduleResetPulledPastTimeout = () => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    resetPulledPastTimeoutRef.current = window.setTimeout(() => {
+      if (!openDrawerRef.current) {
+        setHasPulledPastClosedTabHeight(false);
+      }
+    }, 180);
   };
 
-  const handleClosedTabTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {
-    const startY = touchStartYRef.current;
-    const endY = event.changedTouches[0]?.clientY;
+  const handleGestureStart = (startY: number | null) => {
+    openingTouchStartYRef.current = startY;
+    setIsOpeningGesture(true);
+    setHasPulledPastClosedTabHeight(false);
+  };
 
-    if (startY === null || typeof endY !== 'number') {
-      touchStartYRef.current = null;
-      return;
-    }
+  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 swipeDistance = startY - endY;
-    if (swipeDistance > 24) {
-      openDrawerHandler();
+  const handleGestureEnd = ({
+    shouldResetTouchStart = false,
+  }: { shouldResetTouchStart?: boolean } = {}) => {
+    if (shouldResetTouchStart) {
+      openingTouchStartYRef.current = null;
     }
 
-    touchStartYRef.current = null;
+    if (!isDrawerOpened) {
+      setIsOpeningGesture(false);
+      scheduleResetPulledPastTimeout();
+    }
   };
 
   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
+        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
-            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,
+                width: 80,
                 height: 6,
                 backgroundColor: (theme) => theme.palette.grey[300],
                 borderRadius: 3,
+                opacity: isOpeningGesture ? 0 : 1,
+                transition: 'opacity 120ms ease',
               }}
             />
           </Box>
-          <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={{
-              width: '100%',
-              px: 2,
-              pb: 2,
+              fontWeight: 'bold',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
             }}
           >
-            <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>
+            <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={openDrawer}
-        onClose={closeDrawerHandler}
-        onOpen={openDrawerHandler}
+        open={isDrawerOpened}
+        onClose={() => closeDrawerHandler()}
+        onOpen={() => openDrawerHandler()}
         swipeAreaWidth={swipeAreaWidth}
-        disableSwipeToOpen={false}
+        allowSwipeInChildren
+        disableSwipeToOpen={isDrawerHidden}
         keepMounted
-        sx={{ display: { md: 'none' } }}
+        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: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%)' },
-            onClick: (event: React.MouseEvent<HTMLDivElement>) => {
-              event.stopPropagation();
+            sx: {
+              background: 'none',
+              pointerEvents: 'none',
             },
           },
         }}
@@ -197,6 +399,12 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
             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',
           },
         }}
       >
@@ -215,7 +423,7 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
         >
           <Box
             sx={{
-              width: 30,
+              width: 80,
               height: 6,
               backgroundColor: (theme) => theme.palette.grey[300],
               borderRadius: 3,
@@ -228,7 +436,7 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
             overflow: 'auto',
           }}
         >
-          <PaymentOverviewBox event={event} />
+          <PaymentOverviewBox event={event} hideBuyButton />
         </Box>
       </SwipeableDrawer>
     </Box>

package/src/form/Shipping.tsx

@@ -160,6 +160,12 @@ const Shipping: React.FC<Props> = ({ event }) => {
                             key={shippingMethod.id}
                             active={Number(shippingMethodId) === shippingMethod.id}
                             hasError={!!error}
+                            sx={{
+                              '& .MuiFormControlLabel-labelPlacementEnd': {
+                                mr: 0,
+                                width: '100%',
+                              },
+                            }}
                           >
                             <FormControlLabel
                               value={shippingMethod.id}
@@ -171,24 +177,20 @@ 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) && (
@@ -197,8 +199,9 @@ const Shipping: React.FC<Props> = ({ event }) => {
                                           onClick={handleChangeBranch}
                                           variant="outlined"
                                           size="small"
+                                          sx={{ px: 1, whiteSpace: 'nowrap' }}
                                         >
-                                          {t('change')}
+                                          {t('event.tickets.shipping.choose_address')}
                                         </Button>
                                       </Box>
                                     )}

package/src/form/TicketForm.tsx

@@ -3,6 +3,7 @@ import PaymentSuccess from '@form/PaymentSuccess';
 import FormProvider, { RHFCheckbox } from '@components/hook-form';
 import {
   Box,
+  Divider,
   Grid,
   Link,
   LinkProps,
@@ -52,7 +53,6 @@ import useErrors from '@hooks/useErrors';
 import { EventType } from '@utils/data/event';
 import TimeslotSelection from '@form/TimeslotSelection';
 import useGlobal from '@hooks/useGlobal';
-import useConsentScrollOnDrawerOpen from '@hooks/useConsentScrollOnDrawerOpen';
 import useScrollToFirstError from '@hooks/useScrollToFirstError';
 import { Trans } from '@components/Trans';
 import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
@@ -115,11 +115,6 @@ const TicketForm: React.FC<Props> = ({
   const hasFiredPaymentMethod = useRef(false);
   const termsAndConditionsRef = useRef<HTMLDivElement | null>(null);
 
-  useConsentScrollOnDrawerOpen({
-    isDrawerOpen: isPaymentOverviewDrawerOpen,
-    consentRef: termsAndConditionsRef,
-  });
-
   const item: IEcommerce = {
     currency: event.currency,
     items: [
@@ -693,14 +688,18 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
-              <PaymentOverviewBox event={event} />
+            <Grid item xs={12} sx={{ display: { xs: 'block', md: 'none' } }}>
+              <Divider sx={{ borderStyle: 'dashed' }} />
+            </Grid>
+            <Grid item xs={12} md={4} mt={{ xs: 0, md: 0 }}>
+              <PaymentOverviewBox event={event} withoutPadding />
             </Grid>
           </Grid>
 
           <PaymentOverviewDrawer
             event={event}
             totalPrice={values.total}
+            termsAndConditionsRef={termsAndConditionsRef}
             onOpenChange={setIsPaymentOverviewDrawerOpen}
           />