NTP-41760 | changed card footer view handling (#15211)

components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FlatList, TouchableOpacity, View } from "react-native";
+import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
 import { StyledImage, StyledText } from "..";
 import { TimeoutConstants } from "../../../App/common/constants";
 import {
@@ -16,12 +16,17 @@ const CardFooterCtaButton = ({
   buttonState,
   buttonData,
   handleFooterButtonClick,
+  style,
 }: CardFooterCtaButtonProps) => {
+  const combinedStyle: ViewStyle | undefined = style
+    ? ([buttonData?.buttonStyle, style].filter(Boolean) as ViewStyle)
+    : buttonData?.buttonStyle;
+
   return (
     <CtaButton
       state={buttonState}
       onPress={() => handleFooterButtonClick?.(buttonData)}
-      style={buttonData?.buttonStyle}
+      style={combinedStyle}
     >
       {buttonData?.title && <StyledText textFieldData={buttonData.title} />}
     </CtaButton>
@@ -62,6 +67,10 @@ const CardWithListItemsWidget = ({
     screenState === ScreenState.OVERLAY
       ? ButtonState.LOADING
       : ButtonState.ENABLED;
+
+  const showLeftFooter =
+    widgetData?.leftFooter?.title?.text && widgetData?.leftFooter?.cta;
+  const showRightFooter = widgetData?.rightFooter?.title?.text;
   return (
     <TouchableOpacity onPress={handleCardClick} activeOpacity={1}>
       <View style={styles.columnContainer}>
@@ -104,17 +113,27 @@ const CardWithListItemsWidget = ({
             item?.id || item?.text || index.toString()
           }
         />
-        {(widgetData?.leftFooter || widgetData?.rightFooter) && (
+        {(showLeftFooter || showRightFooter) && (
           <View style={styles.footerContainer}>
-            <CardFooterCtaButton
-              buttonData={widgetData?.leftFooter}
-              handleFooterButtonClick={handleFooterButtonClick}
-            />
-            <CardFooterCtaButton
-              buttonState={buttonState}
-              buttonData={widgetData?.rightFooter}
-              handleFooterButtonClick={handleFooterButtonClick}
-            />
+            {showLeftFooter && (
+              <CardFooterCtaButton
+                buttonData={widgetData?.leftFooter}
+                handleFooterButtonClick={handleFooterButtonClick}
+                style={
+                  showRightFooter ? undefined : styles.singleFooterContainer
+                }
+              />
+            )}
+            {showRightFooter && (
+              <CardFooterCtaButton
+                buttonState={buttonState}
+                buttonData={widgetData?.rightFooter}
+                handleFooterButtonClick={handleFooterButtonClick}
+                style={
+                  showLeftFooter ? undefined : styles.singleFooterContainer
+                }
+              />
+            )}
           </View>
         )}
       </View>

components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx

@@ -28,6 +28,10 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
+  singleFooterContainer: {
+    flex: 1,
+    marginStart: 0,
+  },
 });
 
 export default styles;