111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
import React from "react";
|
|
import { View } from "react-native";
|
|
import { FlatList } from "react-native-gesture-handler";
|
|
import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
|
|
import { CtaData } from "../../../App/common/interface";
|
|
import {
|
|
KeyValueInfoData,
|
|
PremiumDetailsBottomSheetData,
|
|
} from "../../../App/common/interface/widgets/modalData/PremiumDetailsBottomSheetData";
|
|
import { StyledImage } from "../../StyledImage";
|
|
import CtaButton from "../../reusable/cta-button/CtaButton";
|
|
import { HorizontalDashedSeparator } from "../../reusable/item-separator/dashed-separator/DashedSeparator";
|
|
import { CardComponent } from "../../widgets/footer-with-card-widget/FooterWithCardWidget";
|
|
import { StyledText } from "../../widgets/styled-text/StyledText";
|
|
import TitleWidget from "../../widgets/title-widget/TitleWidget";
|
|
import styles from "./TitleWithListBottomSheetStyle";
|
|
|
|
const PremiumDetailsRowComponent = ({ item }: { item: KeyValueInfoData }) => {
|
|
const rowVisibility = !!item.key?.text;
|
|
return rowVisibility ? (
|
|
<View style={styles.columnContainer}>
|
|
<View style={styles.rowContainer}>
|
|
<View style={styles.leftContent}>
|
|
{item.key && <StyledText textFieldData={item.key} />}
|
|
{item.displayRightOfKey?.text && (
|
|
<StyledText textFieldData={item.displayRightOfKey} />
|
|
)}
|
|
</View>
|
|
<View style={styles.rightContent}>
|
|
{item.displayLeftOfValue && (
|
|
<StyledText textFieldData={item.displayLeftOfValue} />
|
|
)}
|
|
{item.value && <StyledText textFieldData={item.value} />}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<></>
|
|
);
|
|
};
|
|
|
|
const PremiumDetailsBottomSheet = ({
|
|
bottomSheetData,
|
|
handleModalClick,
|
|
}: {
|
|
bottomSheetData: PremiumDetailsBottomSheetData | undefined;
|
|
handleModalClick: (cta: CtaData) => void;
|
|
}) => {
|
|
const handleFooterButtonClick = () => {
|
|
{
|
|
if (handleModalClick) {
|
|
handleModalClick(bottomSheetData?.button?.cta!!)!!;
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={bottomSheetData?.viewStyle}>
|
|
<TitleWidget
|
|
widgetData={bottomSheetData!!}
|
|
widgetStyle={{ paddingHorizontal: 16 }}
|
|
handleActions={() => {}}
|
|
widgetIndex={0}
|
|
/>
|
|
{bottomSheetData?.infoTitle?.text && (
|
|
<View style={styles.infoContainer}>
|
|
{bottomSheetData?.infoIcon?.url && (
|
|
<StyledImage imageFieldData={bottomSheetData?.infoIcon} />
|
|
)}
|
|
<StyledText textFieldData={bottomSheetData?.infoTitle} />
|
|
</View>
|
|
)}
|
|
|
|
<FlatList
|
|
data={bottomSheetData?.detailedPremiumBreakUp}
|
|
renderItem={({ item }) => <PremiumDetailsRowComponent item={item} />}
|
|
keyExtractor={(item, index) => item.key?.text || index.toString()}
|
|
/>
|
|
{bottomSheetData?.showDivider && (
|
|
<HorizontalDashedSeparator style={styles.dividerStyle} />
|
|
)}
|
|
<FlatList
|
|
data={bottomSheetData?.detailedTenureInfo}
|
|
renderItem={({ item }) => <PremiumDetailsRowComponent item={item} />}
|
|
keyExtractor={(item, index) => item.key?.text || index.toString()}
|
|
/>
|
|
<View style={commonStyles.verticalSpacer32} />
|
|
{bottomSheetData?.calloutCardInfo?.title?.text && (
|
|
<CardComponent
|
|
cardInfo={bottomSheetData.calloutCardInfo}
|
|
style={styles.cardContainer}
|
|
/>
|
|
)}
|
|
<CtaButton
|
|
state={bottomSheetData?.button?.state}
|
|
onPress={handleFooterButtonClick}
|
|
style={{
|
|
...commonStyles.height54,
|
|
...bottomSheetData?.button?.buttonStyle,
|
|
}}
|
|
>
|
|
{bottomSheetData?.button?.title && (
|
|
<StyledText textFieldData={bottomSheetData?.button?.title} />
|
|
)}
|
|
</CtaButton>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default PremiumDetailsBottomSheet;
|