Migrate billing from Paddle to Lemon Squeezy

resources/js/guest-v2/components/CompassHub.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Sheet } from '@tamagui/sheet';
 import { YStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Button } from '@tamagui/button';
@@ -42,57 +41,63 @@ export default function CompassHub({
   const close = () => onOpenChange(false);
   const { resolved } = useAppearance();
   const isDark = resolved === 'dark';
+  const [visible, setVisible] = React.useState(open);
+  const [closing, setClosing] = React.useState(false);
 
-  if (!open) {
+  React.useEffect(() => {
+    if (open) {
+      setVisible(true);
+      setClosing(false);
+      return;
+    }
+
+    if (!visible) return;
+    setClosing(true);
+    const timeout = window.setTimeout(() => {
+      setVisible(false);
+      setClosing(false);
+    }, 520);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [open, visible]);
+
+  if (!visible) {
     return null;
   }
 
   return (
-    <Sheet
-      modal
-      open={open}
-      onOpenChange={onOpenChange}
-      snapPoints={[100]}
-      snapPointsMode="percent"
-      dismissOnOverlayPress
-      dismissOnSnapToBottom
-      zIndex={100000}
-    >
-      <Sheet.Overlay
-        {...({
-          backgroundColor: isDark ? 'rgba(15, 23, 42, 0.55)' : 'rgba(15, 23, 42, 0.22)',
-          pointerEvents: 'auto',
-          onClick: close,
-          onMouseDown: close,
-          onTouchStart: close,
-        } as any)}
+    <YStack position="fixed" inset={0} zIndex={100000} pointerEvents="box-none">
+      <YStack
+        position="absolute"
+        inset={0}
+        backgroundColor={isDark ? 'rgba(15, 23, 42, 0.55)' : 'rgba(15, 23, 42, 0.22)'}
+        pointerEvents="auto"
+        onPress={close}
+        onClick={close}
+        onMouseDown={close}
+        onTouchStart={close}
       />
-      <Sheet.Frame
-        {...({
-          width: '100%',
-          height: '100%',
-          alignSelf: 'center',
-          backgroundColor: 'transparent',
-          padding: 24,
-          pointerEvents: 'box-none',
-        } as any)}
+      <YStack
+        position="absolute"
+        inset={0}
+        padding={24}
+        alignItems="center"
+        justifyContent="center"
+        pointerEvents="box-none"
       >
-        <YStack
-          position="absolute"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          pointerEvents="auto"
-          onPress={close}
-          onClick={close}
-          onTouchStart={close}
-        />
-        <YStack flex={1} alignItems="center" justifyContent="center" gap="$3" pointerEvents="auto">
+        <YStack alignItems="center" justifyContent="center" gap="$3" pointerEvents="auto">
           <Text fontSize="$5" fontFamily="$display" fontWeight="$8" color="$color">
             {title}
           </Text>
-          <YStack width={280} height={280} position="relative" className="guest-compass-flyin">
+          <YStack
+            key={closing ? 'compass-out' : 'compass-in'}
+            width={280}
+            height={280}
+            position="relative"
+            className={closing ? 'guest-compass-flyout' : 'guest-compass-flyin'}
+          >
             {quadrants.map((action, index) => (
               <Button
                 key={action.key}
@@ -144,7 +149,7 @@ export default function CompassHub({
             Tap outside to close
           </Text>
         </YStack>
-      </Sheet.Frame>
-    </Sheet>
+      </YStack>
+    </YStack>
   );
 }