diff --git a/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts b/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts
index cec2411f4c..4e6f4c71cf 100644
--- a/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts
@@ -38,4 +38,5 @@ export interface CardFooterCtaButtonProps {
buttonState?: ButtonState;
buttonData?: ButtonData;
handleFooterButtonClick: (buttonData?: ButtonData) => void;
+ style?: ViewStyle;
}
diff --git a/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx b/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx
index 2e73c0588a..70d6480730 100644
--- a/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx
+++ b/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 (
handleFooterButtonClick?.(buttonData)}
- style={buttonData?.buttonStyle}
+ style={combinedStyle}
>
{buttonData?.title && }
@@ -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 (
@@ -104,17 +113,27 @@ const CardWithListItemsWidget = ({
item?.id || item?.text || index.toString()
}
/>
- {(widgetData?.leftFooter || widgetData?.rightFooter) && (
+ {(showLeftFooter || showRightFooter) && (
-
-
+ {showLeftFooter && (
+
+ )}
+ {showRightFooter && (
+
+ )}
)}
diff --git a/components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx b/components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx
index 39fa06eb13..9468237ef9 100644
--- a/components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx
+++ b/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;