TP-86177 | Regression Testing Click handling fix (#12806)

components/StyledImage.tsx

@@ -21,6 +21,8 @@ export const StyledImage = ({
 
   const { cta, actions } = imageFieldData;
 
+  const isInteractive = (cta && handleClick) || (actions && handleActions);
+
   const handleImageClick = () => {
     if (actions && handleActions) {
       handleActions(null, actions);
@@ -29,16 +31,17 @@ export const StyledImage = ({
     }
   };
 
-  return (
-    <TouchableOpacity
-      disabled={!(cta || actions)}
-      activeOpacity={1}
-      onPress={handleImageClick}
-    >
+  return isInteractive ? (
+    <TouchableOpacity activeOpacity={1} onPress={handleImageClick}>
       <Image
         source={{ uri: imageFieldData?.url }}
         style={imageFieldData?.imageStyle}
       />
     </TouchableOpacity>
+  ) : (
+    <Image
+      source={{ uri: imageFieldData?.url }}
+      style={imageFieldData?.imageStyle}
+    />
   );
 };

components/widgets/styled-lottie/StyledLottie.tsx

@@ -38,9 +38,10 @@ export const StyledLottie = ({
   }, [lottieFieldData]);
 
   if (!lottieFieldData?.url) return <></>;
-  return (
+  const { cta, actions } = lottieFieldData;
+  const isInteractive = (cta && handleClick) || (actions && handleActions);
+  return isInteractive ? (
     <TouchableOpacity
-      disabled={!(lottieFieldData.cta || lottieFieldData.actions)}
       onPress={handleLottieClick}
       style={styles.touchableOpacity}
       activeOpacity={1}
@@ -53,5 +54,13 @@ export const StyledLottie = ({
         style={[styles.lottie, lottieFieldData?.lottieStyle]}
       />
     </TouchableOpacity>
+  ) : (
+    <LottieView
+      ref={animationRef}
+      source={{ uri: lottieFieldData?.url }}
+      autoPlay={lottieFieldData?.autoPlay ?? true}
+      loop={lottieFieldData?.loop ?? true}
+      style={[styles.lottie, lottieFieldData?.lottieStyle]}
+    />
   );
 };

components/widgets/styled-text/StyledText.tsx

@@ -127,22 +127,24 @@ const StyledTextComponent = ({
     actionPayloadList: GenericActionPayload | undefined,
   ) => void;
 }) => {
+  const { cta, actions } = textFieldData;
+
   const handleTextClick = () => {
-    const { cta, actions } = textFieldData;
     if (actions && handleActions) {
       handleActions(null, actions);
     } else if (cta && handleClick) {
       handleClick(cta);
     }
   };
-  return (
-    <TouchableOpacity
-      disabled={!(textFieldData.cta || textFieldData.actions)}
-      onPress={handleTextClick}
-      activeOpacity={1}
-    >
+
+  const isInteractive = (cta && handleClick) || (actions && handleActions);
+
+  return isInteractive ? (
+    <TouchableOpacity onPress={handleTextClick} activeOpacity={1}>
       <TextComponent textFieldData={textFieldData} />
     </TouchableOpacity>
+  ) : (
+    <TextComponent textFieldData={textFieldData} />
   );
 };