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;