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

package/src/form/PaymentOverviewDrawer.tsx

@@ -0,0 +1,446 @@
+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;
+  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,6 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Typography } from '@mui/material';
-import Lottie from 'lottie-react';
 import bankTransferAnimation from '../utils/data/lottie/bank-transfer.json';
 import { varBounce } from '@components/animate';
 import { m } from 'framer-motion';
@@ -8,6 +7,23 @@ import useGlobal from '@hooks/useGlobal.ts';
 
 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">
@@ -17,7 +33,7 @@ const PaymentPending: React.FC = () => {
         </Typography>
       </m.div>
       <Box maxWidth={600} mx="auto">
-        <Lottie animationData={bankTransferAnimation} />
+        {LottieComponent ? <LottieComponent animationData={bankTransferAnimation} /> : null}
       </Box>
     </Box>
   );

package/src/form/PaymentSuccess.tsx

@@ -9,20 +9,23 @@ import { PropsWithChildren } from '@utils/types/global.type';
 import { IPaidTicket } from '@utils/types/ticket.type';
 import useResponsive from '@hooks/useResponsive';
 import { getPlaceAsString } from '@utils/place';
-import { fCurrency, fData } from '@utils/formatNumber';
+import { fCurrency } from '@utils/formatNumber';
 import { useTheme } from '@mui/material/styles';
 import { IPaidProduct } from '@utils/types/product.type';
 import dayjs from 'dayjs';
 import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
+import { getGtmPurchasePaid, gtmPurchasePaid, mapUserToUserData } from '@utils/gtm.ts';
+import { IPixels } from '@utils/types/gtm.type.ts';
 
 interface Props {
   setIsPaying: Dispatch<SetStateAction<boolean>>;
   isIframe?: boolean;
+  pixels?: IPixels;
 }
 
-const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
-  const { showSnackbar, t, lang, callbacks, content } = useGlobal();
+const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
+  const { showSnackbar, t, lang, callbacks, content, user } = useGlobal();
   const theme = useTheme();
   const defaultState = 'PROCESSING';
   const errorState = 'ERROR';
@@ -53,9 +56,49 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
       setProducts(products);
       setState(data.state);
       setGwUrl(data.gwUrl);
+
+      const items = [
+        ...data.tickets.map((ticket) => ({
+          item_id: ticket.number,
+          item_name: `${ticket.eventName} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
+          price: ticket.price,
+          quantity: 1,
+        })),
+      ];
+      if (data.extraFee) {
+        items.push({
+          item_id: 'service_fee',
+          item_name: `Service fee`,
+          price: data.extraFee,
+          quantity: 1,
+        });
+      }
+      const item = {
+        currency: data.currency,
+        value: data.totalPrice,
+        tax: 0,
+        payment_type: data.paymentType,
+        transaction_id: String(data.orderNumber),
+        coupon: data?.promoCodes?.map((p) => p.code) || [],
+        items,
+      };
+
       switch (data.state) {
         case GopayState.PAID:
           setTitle('event.tickets.payment_success.paid.title');
+          if (isIframe) {
+            setTimeout(() => {
+              parent.postMessage(
+                {
+                  type: 'eventlookFrameGtm',
+                  item: getGtmPurchasePaid(item, pixels),
+                },
+                '*'
+              );
+            }, 1000);
+          } else {
+            gtmPurchasePaid(item, pixels, user ? mapUserToUserData(user) : undefined);
+          }
           break;
         default:
           setTitle('event.tickets.payment_success.unpaid');

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,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}
@@ -158,35 +177,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>
                                     )}