From d1e45235e888bcbfea2fa3e0a3ca67ad13888273 Mon Sep 17 00:00:00 2001
From: Joonas Sandell <me@joonassandell.com>
Date: Sat, 14 Sep 2024 20:22:02 +0300
Subject: [PATCH] Remove touch handlers, allow card switch from top

---
 app/dynamic-pay-button/DynamicPayButton.tsx |  8 +-------
 app/dynamic-pay-button/components/Card.tsx  | 15 +++++++--------
 app/dynamic-pay-button/types.ts             |  8 +-------
 package.json                                |  2 +-
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/app/dynamic-pay-button/DynamicPayButton.tsx b/app/dynamic-pay-button/DynamicPayButton.tsx
index 2ee8b44..8350512 100644
--- a/app/dynamic-pay-button/DynamicPayButton.tsx
+++ b/app/dynamic-pay-button/DynamicPayButton.tsx
@@ -9,7 +9,6 @@ import { Content } from './components/Content';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import {
   type DynamicBuyButtonContextProps,
-  type DynamicBuyButtonProps,
   type TabContentProps,
   TABS,
 } from './';
@@ -27,10 +26,7 @@ import { TabsList } from './components/TabsList';
  *
  * @author Joonas Sandell <me@joonassandell.com>
  */
-export const DynamicPayButton = ({
-  onCardTouchEnd,
-  onCardTouchStart,
-}: DynamicBuyButtonProps) => {
+export const DynamicPayButton = () => {
   const [ccv, setCcv] = useState<string>('');
   const [icon, setIcon] = useState(<CreditCard />);
   const [loading, setLoading] = useState(false);
@@ -112,8 +108,6 @@ export const DynamicPayButton = ({
               handleOpen,
               inputRef,
               loading,
-              onCardTouchEnd,
-              onCardTouchStart,
               open,
               overflow,
               selectedTab,
diff --git a/app/dynamic-pay-button/components/Card.tsx b/app/dynamic-pay-button/components/Card.tsx
index f2bfe07..3973785 100644
--- a/app/dynamic-pay-button/components/Card.tsx
+++ b/app/dynamic-pay-button/components/Card.tsx
@@ -21,8 +21,7 @@ export const Card = ({
   variant = 'visa',
   ...props
 }: CardProps) => {
-  const { onCardTouchEnd, onCardTouchStart, overflow, setOverflow } =
-    useDynamicPayButton();
+  const { overflow, setOverflow } = useDynamicPayButton();
   const [flip, setFlip] = useState(false);
   const x = useMotionValue(0);
   const scale = useTransform(x, [-150, 0, 150], [0.8, 1, 0.8]);
@@ -33,10 +32,12 @@ export const Card = ({
 
   const handleDragEndOffset: DragHandlers['onDragEnd'] = (e, info) => {
     if (front) {
-      if (info.offset.x < -100) {
-        onDragEndOffset && onDragEndOffset(e, info);
-      }
-      if (info.offset.x > 100 || info.offset.y > 50) {
+      if (
+        info.offset.x < -100 ||
+        info.offset.x > 100 ||
+        info.offset.y < -50 ||
+        info.offset.y > 50
+      ) {
         onDragEndOffset && onDragEndOffset(e, info);
       }
     }
@@ -57,8 +58,6 @@ export const Card = ({
       initial={false}
       onDragEnd={handleDragEndOffset}
       onDragStart={() => !overflow && setOverflow(true)}
-      onTouchEnd={e => onCardTouchEnd && onCardTouchEnd(e)}
-      onTouchStart={e => onCardTouchStart && onCardTouchStart(e)}
       style={{
         perspective: 1000,
         rotate,
diff --git a/app/dynamic-pay-button/types.ts b/app/dynamic-pay-button/types.ts
index ebb3b9e..6226778 100644
--- a/app/dynamic-pay-button/types.ts
+++ b/app/dynamic-pay-button/types.ts
@@ -5,17 +5,11 @@ import {
   type PropsWithChildren,
   type RefObject,
   type SetStateAction,
-  type TouchEventHandler,
 } from 'react';
 import { type DragHandlers, type HTMLMotionProps } from 'framer-motion';
 import { type TabsContentProps } from '@radix-ui/react-tabs';
 
-export interface DynamicBuyButtonProps {
-  onCardTouchEnd?: TouchEventHandler<HTMLDivElement>;
-  onCardTouchStart?: TouchEventHandler<HTMLDivElement>;
-}
-
-export interface DynamicBuyButtonContextProps extends DynamicBuyButtonProps {
+export interface DynamicBuyButtonContextProps {
   ccv: string;
   handleOpen: () => void;
   inputRef: RefObject<HTMLInputElement>;
diff --git a/package.json b/package.json
index 2a63339..66144ec 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@joonassandell/ui-lab",
   "description": "User interface laboratory by Joonas Sandell",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "author": {
     "name": "Joonas Sandell",