@lookiero/checkout 9.2.0 → 9.4.0-beta.0

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.tsx

@@ -1,6 +1,6 @@
-import { animated, useSpring } from "@react-spring/native";
 import React, { FC } from "react";
 import { Pressable, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { Button, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
@@ -35,8 +35,18 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
     values: { items: totalCheckoutItemsKept.toString() },
   });
 
-  const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
-  const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
+  const collapsedOpacity = useSharedValue(collapsed ? 1 : 0);
+  collapsedOpacity.value = collapsed ? 1 : 0;
+  const collapsedAnimatedStyle = useAnimatedStyle(
+    () => ({ opacity: withTiming(collapsedOpacity.value) }),
+    [collapsedOpacity.value],
+  );
+  const notCollapsedOpacity = useSharedValue(collapsed ? 0 : 1);
+  notCollapsedOpacity.value = collapsed ? 0 : 1;
+  const notCollapsedAnimatedStyle = useAnimatedStyle(
+    () => ({ opacity: withTiming(notCollapsedOpacity.value) }),
+    [notCollapsedOpacity.value],
+  );
 
   return (
     <>
@@ -51,7 +61,7 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
       )}
 
       {collapsed && collapsible ? (
-        <animated.View style={[style.collapsed, { opacity: collapsedStyle.opacitiy }]}>
+        <Animated.View key="collapsed" style={[style.collapsed, collapsedAnimatedStyle]}>
           <View style={style.collapsedContent}>
             <Text level={1} style={style.totalCollapsed} detail>
               {totalText} {totalCheckoutItemsKeptText}
@@ -64,15 +74,15 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
               {submitButtonText}
             </Button>
           </View>
-        </animated.View>
+        </Animated.View>
       ) : (
-        <animated.View style={{ opacity: notCollapsedStyle.opacitiy }}>
+        <Animated.View key="not-collapsed" style={notCollapsedAnimatedStyle}>
           <Pricing pricing={pricing} totalCheckoutItemsKept={totalCheckoutItemsKept} />
 
           <Button testID="submit-checkout-button" onPress={onSubmit}>
             {submitButtonText}
           </Button>
-        </animated.View>
+        </Animated.View>
       )}
     </>
   );

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/__snapshots__/CollapsiblePricing.test.tsx.snap

@@ -91,6 +91,14 @@ exports[`Pricing component matches the snapshot for collaped pricing: collapsed
     </Text>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 1,
+        },
+      }
+    }
     style={
       {
         "flexDirection": "row",
@@ -391,6 +399,14 @@ exports[`Pricing component matches the snapshot for non-collaped pricing: non-co
     </Text>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 1,
+        },
+      }
+    }
     style={
       {
         "flexDirection": "row",

package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/__snapshots__/CheckoutItemsTabs.test.tsx.snap

@@ -193,6 +193,12 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
         </Text>
       </View>
       <View
+        collapsable={false}
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
         style={
           {
             "backgroundColor": "#0C0A0A",
@@ -200,22 +206,23 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
             "display": "flex",
             "height": 2,
             "left": 0,
-            "opacity": 0,
             "position": "absolute",
-            "transform": [
-              {
-                "translateX": 0,
-              },
-            ],
-            "width": 0,
           }
         }
       />
     </View>
     <View
+      collapsable={false}
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
       style={
         {
-          "opacity": 0,
+          "opacity": 1,
           "paddingBottom": 24,
           "paddingHorizontal": 24,
           "paddingTop": 8,

package/src/shared/ui/components/atoms/field/Field.tsx

@@ -1,6 +1,6 @@
-import { animated, useSpring } from "@react-spring/native";
 import React, { FC, useCallback, useState } from "react";
 import { LayoutChangeEvent, StyleProp, TextStyle, View, ViewStyle } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { Text } from "@lookiero/aurora";
 import { theme } from "@lookiero/sty-psp-ui";
 import { style } from "./Field.style";
@@ -23,30 +23,30 @@ const Field: FC<FieldProps> = ({ label, isFocused = false, style: customStyle })
   const [width, setWidth] = useState<number>(0);
   const handleOnLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => setWidth(layout.width), []);
 
-  const springs = useSpring(
-    isFocused
-      ? { scale: SCALE, translateY: -14, translateX: -(((1 - SCALE) * width) / 2 + space1) }
-      : { scale: 1, translateY: space4, translateX: 0 },
+  const scale = useSharedValue(isFocused ? SCALE : 1);
+  scale.value = isFocused ? SCALE : 1;
+  const translateY = useSharedValue(isFocused ? -14 : space4);
+  translateY.value = isFocused ? -14 : space4;
+  const translateX = useSharedValue(isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0);
+  translateX.value = isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0;
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [
+        { scale: withTiming(scale.value) },
+        { translateY: withTiming(translateY.value) },
+        { translateX: withTiming(translateX.value) },
+      ],
+    }),
+    [scale.value, translateX.value, translateY.value],
   );
 
   return (
-    <animated.View
-      pointerEvents="none"
-      style={[
-        {
-          transform: [{ scale: springs.scale }, { translateY: springs.translateY }, { translateX: springs.translateX }],
-        },
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        customStyle?.field,
-      ]}
-      onLayout={handleOnLayout}
-    >
+    <Animated.View pointerEvents="none" style={[customStyle?.field, animatedStyle]} onLayout={handleOnLayout}>
       <Text level={1} numberOfLines={1} style={[style.fieldText, customStyle?.fieldText]} detail>
         {label}
       </Text>
       <View style={[style.fieldBackground, { opacity: isFocused ? 1 : 0 }]} />
-    </animated.View>
+    </Animated.View>
   );
 };
 

package/src/shared/ui/components/atoms/field/__snapshots__/Field.test.tsx.snap

@@ -30,6 +30,24 @@ exports[`Field atom matches the snapshot for a non-focused: non-focused 1`] = `
     <RCTSafeAreaView />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+            {
+              "translateY": 16,
+            },
+            {
+              "translateX": 0,
+            },
+          ],
+        },
+      }
+    }
     onLayout={[Function]}
     pointerEvents="none"
     style={
@@ -124,6 +142,24 @@ exports[`Field atom matches the snapshot for focused: focused 1`] = `
     <RCTSafeAreaView />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 0.75,
+            },
+            {
+              "translateY": -14,
+            },
+            {
+              "translateX": -4,
+            },
+          ],
+        },
+      }
+    }
     onLayout={[Function]}
     pointerEvents="none"
     style={

package/src/shared/ui/components/molecules/inputField/__snapshots__/InputField.test.tsx.snap

@@ -45,6 +45,24 @@ exports[`InputField molecule matches the snapshot 1`] = `
     testID="input-field"
   >
     <View
+      collapsable={false}
+      jestAnimatedStyle={
+        {
+          "value": {
+            "transform": [
+              {
+                "scale": 0.75,
+              },
+              {
+                "translateY": -14,
+              },
+              {
+                "translateX": -4,
+              },
+            ],
+          },
+        }
+      }
       onLayout={[Function]}
       pointerEvents="none"
       style={