From a5db8f794470babe3d8d6ff89d9ad785a63f0d67 Mon Sep 17 00:00:00 2001 From: Somarapu Vamshi Date: Wed, 18 Dec 2024 18:35:28 +0530 Subject: [PATCH] NTP-12975 | multi plan v2 changes (#14236) --- App/Container/Navi-Insurance/Styles/index.ts | 3 + App/common/constants/FabIconConstants.ts | 7 + App/common/constants/WidgetNameConstants.ts | 3 + App/common/constants/index.ts | 1 + .../components/GradientBorderData.ts | 6 + .../interface/components/GradientData.ts | 8 ++ .../widgets/widgetData/FabWidgetData.ts | 1 + .../SelectCardWithDetailListData.ts | 34 ++++- ...tleWithHorizontalCarouselListWidgetData.ts | 8 ++ App/common/widgets/widgetResolver.tsx | 13 ++ .../gradient-border/GradientBorder.tsx | 51 +++++++ components/widgets/fab/FAB.tsx | 14 +- components/widgets/fab/FABStyle.ts | 119 ++++++++++------ components/widgets/index.tsx | 1 + .../ItemCardWithTag.tsx | 129 ++++++++++++++++++ .../SelectCardWithTagListItems.tsx | 76 +++++++++++ .../SelectCardWithTagListItemsStyles.ts | 90 ++++++++++++ .../TitleWithHorizontalCarouselListWidget.tsx | 46 +++++-- ...leWithHorizontalCarouselListWidgetStyle.ts | 9 ++ 19 files changed, 559 insertions(+), 60 deletions(-) create mode 100644 App/common/constants/FabIconConstants.ts create mode 100644 App/common/interface/components/GradientBorderData.ts create mode 100644 App/common/interface/components/GradientData.ts create mode 100644 components/reusable/gradient-border/GradientBorder.tsx create mode 100644 components/widgets/select-card-with-tag-list-items/ItemCardWithTag.tsx create mode 100644 components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItems.tsx create mode 100644 components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItemsStyles.ts diff --git a/App/Container/Navi-Insurance/Styles/index.ts b/App/Container/Navi-Insurance/Styles/index.ts index 9d121757ad..690c78b58e 100644 --- a/App/Container/Navi-Insurance/Styles/index.ts +++ b/App/Container/Navi-Insurance/Styles/index.ts @@ -57,6 +57,9 @@ export const commonStyles = StyleSheet.create({ width16: { width: 16, }, + overflowHidden: { + overflow: "hidden", + }, }); export const commonHeaderShadowStyle = ( diff --git a/App/common/constants/FabIconConstants.ts b/App/common/constants/FabIconConstants.ts new file mode 100644 index 0000000000..a87a86f57d --- /dev/null +++ b/App/common/constants/FabIconConstants.ts @@ -0,0 +1,7 @@ +export enum FabIconSize { + SMALL = "small", + LARGE = "large", +} + +export const FAB_WIDTH_LARGE = 48; +export const FAB_WIDTH_SMALL = 44; diff --git a/App/common/constants/WidgetNameConstants.ts b/App/common/constants/WidgetNameConstants.ts index 840e64784b..5e43f584e0 100644 --- a/App/common/constants/WidgetNameConstants.ts +++ b/App/common/constants/WidgetNameConstants.ts @@ -31,3 +31,6 @@ export const TITLE_WITH_HORIZONTAL_CAROUSEL_LIST_WIDGET = export const TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET = "TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET"; + +export const SELECT_CARD_WITH_TAG_LIST_ITEMS_WIDGET = + "SELECT_CARD_WITH_TAG_LIST_ITEMS_WIDGET"; diff --git a/App/common/constants/index.ts b/App/common/constants/index.ts index 240187cb47..1df1f1e73e 100644 --- a/App/common/constants/index.ts +++ b/App/common/constants/index.ts @@ -10,3 +10,4 @@ export * from "./StringConstant"; export * from "./WidgetNameConstants"; export * from "./StatusCodeConstant"; export * from "./BuildConfigConstants"; +export * from "./FabIconConstants"; diff --git a/App/common/interface/components/GradientBorderData.ts b/App/common/interface/components/GradientBorderData.ts new file mode 100644 index 0000000000..70fccec525 --- /dev/null +++ b/App/common/interface/components/GradientBorderData.ts @@ -0,0 +1,6 @@ +export interface GradientBorderData { + gradientColors?: string[]; + orientation?: string; + borderRadius?: number; + borderWidth?: number; +} diff --git a/App/common/interface/components/GradientData.ts b/App/common/interface/components/GradientData.ts new file mode 100644 index 0000000000..eae3dd7334 --- /dev/null +++ b/App/common/interface/components/GradientData.ts @@ -0,0 +1,8 @@ +import { ViewStyle } from "react-native"; + +export interface GradientData { + gradientColors?: string[]; + defaultColors?: string[]; + orientation?: string; + style?: ViewStyle; +} diff --git a/App/common/interface/widgets/widgetData/FabWidgetData.ts b/App/common/interface/widgets/widgetData/FabWidgetData.ts index e299953c91..1bf5bb57a6 100644 --- a/App/common/interface/widgets/widgetData/FabWidgetData.ts +++ b/App/common/interface/widgets/widgetData/FabWidgetData.ts @@ -18,4 +18,5 @@ export interface FabWidgetData extends GenericWidgetData { export interface FabProperties { isDraggable?: boolean; startingPosition?: number; + fabIconSize?: string; } diff --git a/App/common/interface/widgets/widgetData/SelectCardWithDetailListData.ts b/App/common/interface/widgets/widgetData/SelectCardWithDetailListData.ts index c3f0f86365..e48549f2cd 100644 --- a/App/common/interface/widgets/widgetData/SelectCardWithDetailListData.ts +++ b/App/common/interface/widgets/widgetData/SelectCardWithDetailListData.ts @@ -1,8 +1,11 @@ import { ViewStyle } from "react-native"; -import { GenericWidgetData } from "../Widget"; -import { ImageFieldData, TextFieldData } from "./TitleWidgetData"; -import { GenericActionPayload } from "../../../actions/GenericAction"; import { AnalyticsEvent, CtaData } from "../.."; +import { GenericActionPayload } from "../../../actions/GenericAction"; +import { GradientBorderData } from "../../components/GradientBorderData"; +import { GradientData } from "../../components/GradientData"; +import { GenericWidgetData } from "../Widget"; +import { ButtonData } from "./FooterWithCardWidgetData"; +import { ImageFieldData, TextFieldData } from "./TitleWidgetData"; export interface ContainerTag { tagTitle?: TextFieldData; @@ -21,7 +24,23 @@ export interface Item { details?: Detail[]; itemType?: string; dependentWidgets?: any; - analyticEvents?: ItemAnalyticsEvents + analyticEvents?: ItemAnalyticsEvents; + cardImage?: ImageFieldData; + tag?: TagDataItem[]; + listData?: ListData; + leftFooter?: ButtonData; +} + +export interface TagDataItem { + title?: TextFieldData; + gradientBorderData?: GradientBorderData; + gradientData?: GradientData; + tagContainer?: ViewStyle; +} + +export interface ListData { + items: TextFieldData[]; + listStyle?: ViewStyle; } interface WidgetMetaData { @@ -55,16 +74,17 @@ export interface ItemCardProps { onSelect?: () => void; showContainerTag?: string; containerTag?: ContainerTag; + handleActions?: (screenActionPayload?: GenericActionPayload) => void; } export interface ItemDetailProps { detail?: Detail; selected?: boolean; handleClick?: (cta: CtaData) => void; - showBorder? : boolean; + showBorder?: boolean; } export interface ItemAnalyticsEvents { - onViewEvent?: AnalyticsEvent - onSelectedEvent?: AnalyticsEvent + onViewEvent?: AnalyticsEvent; + onSelectedEvent?: AnalyticsEvent; } diff --git a/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts index b69f44fb91..9642328235 100644 --- a/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts +++ b/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts @@ -1,8 +1,10 @@ import { ViewStyle } from "react-native"; import { AnalyticsEvent, CtaData } from "../.."; import { GenericActionPayload } from "../../../actions/GenericAction"; +import { ItemSeparatorData } from "../../components/ItemSeparatorData"; import { GenericWidgetData } from "../Widget"; import { TextFieldData } from "./TitleWidgetData"; +import { ListItem } from "./TitleWithListWidgetData"; export interface TitleWithHorizontalCarouselListWidgetData extends GenericWidgetData { @@ -13,6 +15,10 @@ export interface TitleWithHorizontalCarouselListWidgetData selectedItemContainerStyles?: ViewStyle; widgetMetaData?: WidgetMetaData; containerStyles?: ViewStyle; + separatorData?: ItemSeparatorData; + flatListContainerStyles?: ViewStyle; + titleContainerStyles?: ViewStyle; + selectedTitleContainerStyles?: ViewStyle; } export interface CarouselListData { @@ -20,6 +26,7 @@ export interface CarouselListData { selectedState: StateData; unSelectedState: StateData; dependentWidgets: any; + separatorData: ItemSeparatorData; } export interface WidgetMetaData { @@ -29,6 +36,7 @@ export interface WidgetMetaData { export interface StateData { title: TextFieldData; + listData: ListItem[]; } export interface TitleWithHorizontalCarouselListWidgetProps { widgetData: TitleWithHorizontalCarouselListWidgetData; diff --git a/App/common/widgets/widgetResolver.tsx b/App/common/widgets/widgetResolver.tsx index 526dc58f75..bd41d44834 100644 --- a/App/common/widgets/widgetResolver.tsx +++ b/App/common/widgets/widgetResolver.tsx @@ -11,6 +11,7 @@ import { HeroSectionWidget, ListItemWidget, SelectCardWithDetailListWidget, + SelectCardWithTagListItems, SliderWidget, SpacerWidget, SumInsuredWidget, @@ -49,6 +50,7 @@ import { TITLE_WITH_COLUMN_WIDGET, TITLE_WITH_LIST_WIDGET, TITLE_WITH_HORIZONTAL_CAROUSEL_LIST_WIDGET, + SELECT_CARD_WITH_TAG_LIST_ITEMS_WIDGET, } from "../constants"; import { CtaData } from "../interface"; import { GenericWidgetData, Widget } from "../interface/widgets/Widget"; @@ -342,6 +344,17 @@ function resolveWidgetView( handleClick={handleClick} /> ); + case SELECT_CARD_WITH_TAG_LIST_ITEMS_WIDGET: + return ( + + ); default: return ; } diff --git a/components/reusable/gradient-border/GradientBorder.tsx b/components/reusable/gradient-border/GradientBorder.tsx new file mode 100644 index 0000000000..d7866258be --- /dev/null +++ b/components/reusable/gradient-border/GradientBorder.tsx @@ -0,0 +1,51 @@ +import { View, ViewStyle } from "react-native"; +import { NaviLinearGradient } from "../../../App/common/hooks/useGradient"; +import { GradientBorderData } from "../../../App/common/interface/components/GradientBorderData"; +import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles"; + +const GradientBorder = ({ + gradientBorderData, + children, + style, +}: { + gradientBorderData?: GradientBorderData; + children?: React.ReactNode; + style?: ViewStyle; +}) => { + let data = gradientBorderData; + let gradientColors = data?.gradientColors; + let orientation = gradientBorderData?.orientation; + let borderWidth = gradientBorderData?.borderWidth; + let outerRadius = gradientBorderData?.borderRadius || 0; + let innerRadius = Math.max(outerRadius - (borderWidth || 0), 0); + + return ( + + + {children} + + + ); +}; + +export default GradientBorder; diff --git a/components/widgets/fab/FAB.tsx b/components/widgets/fab/FAB.tsx index c10f9362f8..f273ac5b71 100644 --- a/components/widgets/fab/FAB.tsx +++ b/components/widgets/fab/FAB.tsx @@ -23,13 +23,18 @@ import Animated, { useSharedValue, } from "react-native-reanimated"; import { GenericActionPayload } from "../../../App/common/actions/GenericAction"; +import { + FAB_WIDTH_LARGE, + FAB_WIDTH_SMALL, + FabIconSize, + OsTypeConstants, +} from "../../../App/common/constants"; import { NativeEventNameConstants } from "../../../App/common/constants/EventNameConstants"; import { CtaData } from "../../../App/common/interface"; import { FabWidgetData } from "../../../App/common/interface/widgets/widgetData/FabWidgetData"; import { getTextWithHtmlSpace } from "../../../App/common/utilities/MiscUtils"; import { StyledImage } from "../../StyledImage"; -import { FAB_HEIGHT, styles } from "./FABStyle"; -import { OsTypeConstants } from "../../../App/common/constants"; +import { createStyles } from "./FABStyle"; const FAB = ({ widgetData, @@ -69,6 +74,11 @@ const FAB = ({ }, [widgetData]); const FAB_STARTING_POSITION = widgetData?.properties?.startingPosition ?? 145; + const getFabWidth = (fabIconSize?: string) => + fabIconSize === FabIconSize.SMALL ? FAB_WIDTH_SMALL : FAB_WIDTH_LARGE; + const FAB_WIDTH = getFabWidth(widgetData?.properties?.fabIconSize); + const styles = createStyles(FAB_WIDTH); + const FAB_HEIGHT = FAB_WIDTH; const fabPositionY = useSharedValue(-FAB_STARTING_POSITION); diff --git a/components/widgets/fab/FABStyle.ts b/components/widgets/fab/FABStyle.ts index 08eaa2f136..1aa0ee482f 100644 --- a/components/widgets/fab/FABStyle.ts +++ b/components/widgets/fab/FABStyle.ts @@ -1,46 +1,79 @@ -import { StyleSheet } from "react-native"; +import { StyleSheet, ViewStyle } from "react-native"; +import { FAB_WIDTH_SMALL } from "../../../App/common/constants/FabIconConstants"; -export const FAB_WIDTH = 48; -export const FAB_HEIGHT = FAB_WIDTH; -export const FAB_BORDER_RADIUS = FAB_WIDTH / 2; +const BASE_ROOT_STYLES: ViewStyle = { + position: "absolute", + bottom: 0, + right: 20, +}; -export const FAB_MARGIN_BOTTOM = 0; +const SMALL_FAB_ICON_ROOT_STYLES: ViewStyle = { + ...BASE_ROOT_STYLES, + paddingBottom: 1, + paddingRight: 1, + backgroundColor: "#BED7FF", +}; -export const styles = StyleSheet.create({ - rootStyles: { - borderRadius: FAB_BORDER_RADIUS, - position: "absolute", - bottom: FAB_MARGIN_BOTTOM, - right: 20, - }, - fabButtonStyles: { - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - backgroundColor: "#0047D6", - height: FAB_HEIGHT, - borderRadius: FAB_BORDER_RADIUS, - }, - lottie: { - height: FAB_HEIGHT, - width: FAB_WIDTH, - }, - topLottie: { - position: "absolute", - top: 0, - left: 0, - height: 16, - width: 16, - }, - image: { - height: FAB_HEIGHT, - width: FAB_WIDTH, - justifyContent: "center", - alignItems: "center", - }, - buttonTitle: { - height: 22, - paddingRight: 16, - width: "auto", - } -}); +const BASE_FAB_BUTTON_STYLES: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", +}; + +const SMALL_FAB_BUTTON_STYLES: ViewStyle = { + ...BASE_FAB_BUTTON_STYLES, + backgroundColor: "#EAF2FF", + borderColor: "#BED7FF", + borderWidth: 1, + shadowOffset: { width: 1, height: 5 }, + shadowOpacity: 0, + shadowRadius: 0, + shadowColor: "#BED7FF", + elevation: 3, +}; + +const LARGE_FAB_BUTTON_STYLES: ViewStyle = { + ...BASE_FAB_BUTTON_STYLES, + backgroundColor: "#0047D6", +}; + +export const createStyles = (fabWidth: number) => { + const fabHeight = fabWidth; + const fabBorderRadius = fabWidth / 2; + const isSmall = fabWidth === FAB_WIDTH_SMALL; + const buttonTitleHeight = isSmall ? 19 : 22; + + return StyleSheet.create({ + rootStyles: { + ...(isSmall ? SMALL_FAB_ICON_ROOT_STYLES : BASE_ROOT_STYLES), + borderRadius: fabBorderRadius, + }, + fabButtonStyles: { + ...(isSmall ? SMALL_FAB_BUTTON_STYLES : LARGE_FAB_BUTTON_STYLES), + height: fabHeight, + borderRadius: fabBorderRadius, + }, + lottie: { + height: fabHeight, + width: fabWidth, + }, + topLottie: { + position: "absolute", + top: 0, + left: 0, + height: 16, + width: 16, + }, + image: { + height: fabHeight, + width: fabWidth, + justifyContent: "center", + alignItems: "center", + }, + buttonTitle: { + height: buttonTitleHeight, + paddingRight: 16, + width: "auto", + }, + }); +}; diff --git a/components/widgets/index.tsx b/components/widgets/index.tsx index b7af7f8e31..12677a3478 100644 --- a/components/widgets/index.tsx +++ b/components/widgets/index.tsx @@ -23,3 +23,4 @@ export { default as TitleWithListWidget } from "./title-with-list-widget/TitleWi export { default as ListItemWidget } from "./list-item-with-icon-widget/ListItemWidget"; export { default as CardWithListItemsWidget } from "./card-with-list-items-widget/CardWithListItemsWidget"; export { default as TitleWithHorizontalCarouselListWidget } from "./title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget"; +export { default as SelectCardWithTagListItems } from "./select-card-with-tag-list-items/SelectCardWithTagListItems"; diff --git a/components/widgets/select-card-with-tag-list-items/ItemCardWithTag.tsx b/components/widgets/select-card-with-tag-list-items/ItemCardWithTag.tsx new file mode 100644 index 0000000000..a9d2b7d776 --- /dev/null +++ b/components/widgets/select-card-with-tag-list-items/ItemCardWithTag.tsx @@ -0,0 +1,129 @@ +import { useEffect } from "react"; +import { FlatList, TouchableOpacity, View } from "react-native"; +import { StyledImage, StyledText } from ".."; +import { SelectButtonType } from "../../../App/common/constants"; +import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent"; +import { NaviLinearGradient } from "../../../App/common/hooks/useGradient"; +import { + ButtonData, + CardFooterCtaButtonProps, + ItemCardProps, +} from "../../../App/common/interface/widgets/widgetData"; +import { SelectButton } from "../../reusable"; +import CtaButton from "../../reusable/cta-button/CtaButton"; +import GradientBorder from "../../reusable/gradient-border/GradientBorder"; +import { styles } from "./SelectCardWithTagListItemsStyles"; + +const CardFooterCtaButton = ({ + buttonState, + buttonData, + handleFooterButtonClick, +}: CardFooterCtaButtonProps) => { + return ( + handleFooterButtonClick?.(buttonData)} + style={buttonData?.buttonStyle} + > + {buttonData?.title && } + + ); +}; + +export const ItemCardWithTag = ({ + handleClick, + item, + selected, + onSelect, + showContainerTag, + containerTag, + handleActions, +}: ItemCardProps) => { + useEffect(() => { + item?.analyticEvents?.onViewEvent && + sendAsAnalyticsEvent(item?.analyticEvents?.onViewEvent); + }, []); + + const handleFooterButtonClick = (buttonData?: ButtonData) => { + if (!buttonData) return; + + const { actions, cta } = buttonData; + + if (actions && handleActions) { + handleActions(actions); + } else if (cta && handleClick) { + handleClick(cta); + } + }; + + return ( + + + + {item?.cardImage && ( + + )} + + {item?.title?.text && } + {item?.subtitle?.text && ( + + )} + + + + + + {item?.tag && + item?.tag?.map((tagItem, index) => ( + + + {tagItem?.title && } + + + ))} + + {item?.listData && ( + ( + + )} + keyExtractor={(item, index) => + item?.id || item?.text || index.toString() + } + nestedScrollEnabled={true} + /> + )} + + {item?.leftFooter && ( + + + + )} + + ); +}; diff --git a/components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItems.tsx b/components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItems.tsx new file mode 100644 index 0000000000..44bcb119d6 --- /dev/null +++ b/components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItems.tsx @@ -0,0 +1,76 @@ +import { useEffect, useState } from "react"; +import { TitleWidget } from ".."; +import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent"; +import { + Item, + SelectCardWithDetailListProps, +} from "../../../App/common/interface/widgets/widgetData"; +import { ItemCardWithTag } from "./ItemCardWithTag"; +import { styles } from "./SelectCardWithTagListItemsStyles"; + +const SelectCardWithTagListItems = ({ + widgetData, + widgetStyle, + handleActions, + handleClick, + widgetIndex, +}: SelectCardWithDetailListProps) => { + const [selectedItem, setSelectedItem] = useState( + widgetData?.widgetMetaData?.selectedItem, + ); + + const handleSelect = (itemType?: string) => { + setSelectedItem(itemType); + const item = widgetData?.items?.find(item => item?.itemType === itemType); + item?.analyticEvents?.onSelectedEvent && + sendAsAnalyticsEvent(item?.analyticEvents?.onSelectedEvent); + if (item?.dependentWidgets) { + handleActions( + item?.dependentWidgets, + widgetData?.widgetMetaData?.onValueChangeAction, + ); + } + }; + + useEffect(() => { + const item = widgetData?.items?.find( + item => item?.itemType === selectedItem, + ); + if (item?.dependentWidgets) { + handleActions( + item.dependentWidgets, + widgetData?.widgetMetaData?.onValueChangeAction, + ); + } + }, [ + widgetData?.items + ?.map(item => JSON.stringify(item?.dependentWidgets)) + .join(","), + ]); + + return ( + <> + + {widgetData?.items?.map((item: Item) => { + return ( + handleSelect(item?.itemType)} + /> + ); + })} + + ); +}; + +export default SelectCardWithTagListItems; diff --git a/components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItemsStyles.ts b/components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItemsStyles.ts new file mode 100644 index 0000000000..401882aaa2 --- /dev/null +++ b/components/widgets/select-card-with-tag-list-items/SelectCardWithTagListItemsStyles.ts @@ -0,0 +1,90 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + card: { + backgroundColor: "#ffffff", + borderRadius: 8, + paddingTop: 20, + paddingHorizontal: 16, + paddingBottom: 20, + marginTop: 15, + marginBottom: 5, + width: "100%", + borderColor: "#EBEBEB", + borderWidth: 1, + position: "relative", + elevation: 5, + shadowColor: "#D1D9E6", + shadowOffset: { width: 3, height: 3 }, + shadowOpacity: 0.3, + shadowRadius: 33, + }, + selectedCard: { + borderColor: "#1F002A", + backgroundColor: "#FFFFFF", + shadowColor: "#000000", + shadowOffset: { width: 3, height: 3 }, + shadowOpacity: 0.3, + shadowRadius: 16, + elevation: 5, + }, + detailCardContainer: { + borderRadius: 4, + overflow: "hidden", + }, + detailCard: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + backgroundColor: "#F5F5F5", + paddingHorizontal: 12, + paddingVertical: 8, + }, + detailLeftText: { + flexDirection: "row", + justifyContent: "flex-start", + }, + alignStart: { + flexDirection: "row", + alignItems: "flex-start", + }, + borderBottom: { + borderBottomWidth: 1, + borderBottomColor: "#E3E5E5", + }, + selectedDetailCard: { + backgroundColor: "#FFFFFF", + }, + headerContainer: { + flexDirection: "row", + justifyContent: "space-between", + marginBottom: 16, + }, + tag: { + justifyContent: "flex-start", + alignItems: "flex-end", + top: 14, + right: -3, + position: "absolute", + }, + tagContainer: { + backgroundColor: "#3C7DFF", + paddingHorizontal: 8, + paddingVertical: 4, + borderTopStartRadius: 2, + borderTopEndRadius: 2, + borderBottomStartRadius: 2, + }, + rightTextStyle: { paddingVertical: 8, paddingLeft: 8 }, + textContainer: { + alignItems: "flex-start", + }, + tagTextContainer: { + alignItems: "flex-start", + }, + footerContainer: { + flexDirection: "row", + alignItems: "center", + }, +}); diff --git a/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx index ec4fbd82bb..796cc9d0ae 100644 --- a/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx +++ b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx @@ -6,8 +6,10 @@ import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEven import { AnalyticsEvent } from "../../../App/common/interface"; import { CarouselListData, + ListItem, TitleWithHorizontalCarouselListWidgetProps, } from "../../../App/common/interface/widgets/widgetData"; +import { ItemSeparator } from "../../reusable"; import styles from "./TitleWithHorizontalCarouselListWidgetStyle"; const TitleWithHorizontalCarouselListWidget = ({ @@ -42,25 +44,50 @@ const TitleWithHorizontalCarouselListWidget = ({ } }; + const renderListItem = ({ item }: { item: ListItem }) => ( + + {item?.title && } + {item?.rightTitle && } + + ); const CarouselItem = ({ item }: { item: CarouselListData }) => { const isSelected = selectedItem === item?.id; const containerStyles = [ widgetData?.defaultItemContainerStyles, isSelected && widgetData?.selectedItemContainerStyles, ]; + const listData = isSelected + ? item?.selectedState?.listData + : item?.unSelectedState?.listData; return ( handleSelectItem(item)} activeOpacity={1} > - + + + + {!isSelected && widgetData?.separatorData && ( + + )} + + {listData && ( + + {listData?.map(listItem => renderListItem({ item: listItem }))} + + )} ); }; @@ -97,7 +124,10 @@ const TitleWithHorizontalCarouselListWidget = ({ renderItem={({ item }) => } keyExtractor={item => item?.id.toString()} showsHorizontalScrollIndicator={false} - contentContainerStyle={styles.flatListContainer} + contentContainerStyle={[ + styles.flatListContainer, + widgetData?.flatListContainerStyles, + ]} overScrollMode={"never"} /> diff --git a/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts index 91b2c9f1b8..6118ad3534 100644 --- a/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts +++ b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts @@ -6,6 +6,15 @@ const styles = StyleSheet.create({ paddingRight: 8, paddingVertical: 14, }, + listItem: { + flexDirection: "row", + justifyContent: "space-between", + backgroundColor: "#FFF", + }, + listContainer: { + paddingHorizontal: 12, + paddingTop: 12, + }, }); export default styles;