varnitgoyal95/super-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

TP-84151 | Waiting Period Screen + Atomic Components Action Handling cleanup (#12576)

Browse Source 
Co-authored-by: Somarapu Vamshi <somarapu.vamshi@navi.com>
This commit is contained in:
Kshitij Pramod Ghongadi
2024-09-24 23:09:17 +05:30
committed by GitHub
parent 6d8f1b2933
commit ab74346b98
36 changed files with 797 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/widgets/hero-section-widget/HeroSectionWidget.tsx
View File

@@ -19,9 +19,14 @@ const HeroSectionWidget = ({
>
<View style={styles.container}>
<View style={styles.rowContainer}>
{widgetData?.title?.text && (
<StyledText textFieldData={widgetData?.title} />
)}
<View style={styles.columnContainer}>
{widgetData?.title?.text && (
<StyledText textFieldData={widgetData?.title} />
)}
{widgetData?.subtitle?.text && (
<StyledText textFieldData={widgetData?.subtitle} />
)}
</View>
{widgetData?.image?.url && (
<StyledImage imageFieldData={widgetData?.image} />
)}

8
components/widgets/hero-section-widget/HeroSectionWidgetStyles.ts
View File

@@ -9,7 +9,13 @@ const styles = StyleSheet.create({
},
rowContainer: {
flexDirection: "row",
justifyContent: "space-between"
justifyContent: "space-between",
},
columnContainer: {
flexDirection: "column",
alignItems: "flex-start",
flexGrow: 1,
flexBasis: 0,
},
calloutContainer: {
flexShrink: 1,

24
components/widgets/index.tsx
View File

@@ -1,8 +1,22 @@
export { StyledText } from "./styled-text/StyledText";
export { StyledImage } from "../StyledImage";
export { default as TitleWidget } from "./title-widget/TitleWidget";
export { default as ComparisonWidget } from "./ComparisonWidget";
export { default as HeaderLottieAnimationWidget } from "./HeaderLottieAnimationWidget";
export { default as HeaderWithAssetsWidget } from "./HeaderWithAssetsWidget";
export { default as SliderWidget } from "./SliderWidget";
export { default as TitleWithAssetsWidget } from "./TitleWithAssetsWidget";
export { default as CardWithIconWidget } from "./card-with-icon-widget/CardWithIconWidget";
export { default as FAB } from "./fab/FAB";
export { default as FooterWithCardWidget } from "./footer-with-card-widget/FooterWithCardWidget";
export { default as TitleWithAssetBackgroundWidget } from "./title-with-asset-background/TitleWithAssetBackground";
export { default as SelectCardWithDetailListWidget } from "./select-card-with-detail-list/SelectCardWithDetailList";
export { default as TableWidget } from "./table-widget/Table";
export { default as GridWithCardWidget } from "./grid-with-card-widget/GridWithCardWidget";
export { default as HeroSectionWidget } from "./hero-section-widget/HeroSectionWidget";
export { default as SelectCardWithDetailListWidget } from "./select-card-with-detail-list/SelectCardWithDetailList";
export { default as SpacerWidget } from "./spacer-widget/SpacerWidget";
export { StyledText } from "./styled-text/StyledText";
export { default as SumInsuredWidget } from "./sum-insured-carousel-widget/SumInsuredWidget";
export { default as TableWidget } from "./table-widget/Table";
export { default as TitleRightTitleWithContentListWidget } from "./title-right-title-with-content-list-widget/TitleRightTitleWithContentListWidget";
export { default as TitleSubtitleWithAssetWidget } from "./title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget";
export { default as TitleWidget } from "./title-widget/TitleWidget";
export { default as TitleWithAssetBackgroundWidget } from "./title-with-asset-background/TitleWithAssetBackground";
export { default as TitleWithColumnWidget } from "./title-with-column-widget/TitleWithColumnWidget";
export { default as TitleWithListWidget } from "./title-with-list-widget/TitleWithListWidget";

20
components/widgets/styled-lottie/StyledLottie.tsx
View File

@@ -1,6 +1,7 @@
import LottieView from "lottie-react-native";
import React, { useEffect, useRef } from "react";
import { TouchableOpacity } from "react-native";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { CtaData } from "../../../App/common/interface";
import { LottieFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
import styles from "./StyledLottieComponentStyle";
@@ -8,12 +9,26 @@ import styles from "./StyledLottieComponentStyle";
export const StyledLottie = ({
lottieFieldData,
handleClick,
handleActions,
}: {
lottieFieldData: LottieFieldData;
handleClick?: (ctaData: CtaData) => void;
handleActions?: (
value: any | undefined | null,
actionPayloadList: GenericActionPayload | undefined,
) => void;
}) => {
const animationRef = useRef<LottieView | null>(null);
const handleLottieClick = () => {
const { cta, actions } = lottieFieldData;
if (actions && handleActions) {
handleActions(null, actions);
} else if (cta && handleClick) {
handleClick(cta);
}
};
useEffect(() => {
const timeoutId = setTimeout(() => {
animationRef.current?.play();
@@ -25,9 +40,8 @@ export const StyledLottie = ({
if (!lottieFieldData?.url) return <></>;
return (
<TouchableOpacity
onPress={() => {
lottieFieldData.cta && handleClick && handleClick(lottieFieldData.cta);
}}
disabled={!(lottieFieldData.cta || lottieFieldData.actions)}
onPress={handleLottieClick}
style={styles.touchableOpacity}
activeOpacity={1}
>

171
components/widgets/styled-text/StyledText.tsx
View File

@@ -1,6 +1,8 @@
import React from "react";
import { View } from "react-native";
import { TouchableOpacity, View } from "react-native";
import Animated from "react-native-reanimated";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { CtaData } from "../../../App/common/interface";
import {
ImageFieldData,
LottieFieldData,
@@ -13,13 +15,17 @@ import styles from "./StyledTextComponentStyle";
export const StyledText = ({
textFieldData,
handleClick,
handleActions,
}: {
textFieldData: TextFieldData;
handleClick?: (ctaData: CtaData) => void;
handleActions?: (
value: any | undefined | null,
actionPayloadList: GenericActionPayload | undefined,
) => void;
}) => {
let renderedText: string[] = [textFieldData.text];
let substringStyleMap: SubstringStyle[] = [];
let textFieldString: string = textFieldData.text || "";
let text: string = textFieldData.text;
let topImage: ImageFieldData | undefined =
textFieldData?.textDrawableData?.top;
let bottomImage: ImageFieldData | undefined =
@@ -38,6 +44,112 @@ export const StyledText = ({
let rightLottie: LottieFieldData | undefined =
textFieldData?.textDrawableData?.rightLottie;
return (
<View style={[styles.columnContainer, textFieldData.viewStyle]}>
{topImage && (
<StyledImage
imageFieldData={topImage}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{topLottie && (
<StyledLottie
lottieFieldData={topLottie}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
<View style={styles.rowContainer}>
{leftImage && (
<StyledImage
imageFieldData={leftImage}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{leftLottie && (
<StyledLottie
lottieFieldData={leftLottie}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{text && (
<StyledTextComponent
textFieldData={textFieldData}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{rightImage && (
<StyledImage
imageFieldData={rightImage}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{rightLottie && (
<StyledLottie
lottieFieldData={rightLottie}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
</View>
{bottomImage && (
<StyledImage
imageFieldData={bottomImage}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{bottomLottie && (
<StyledLottie
lottieFieldData={bottomLottie}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
</View>
);
};
const StyledTextComponent = ({
textFieldData,
handleClick,
handleActions,
}: {
textFieldData: TextFieldData;
handleClick?: (ctaData: CtaData) => void;
handleActions?: (
value: any | undefined | null,
actionPayloadList: GenericActionPayload | undefined,
) => void;
}) => {
const handleTextClick = () => {
const { cta, actions } = textFieldData;
if (actions && handleActions) {
handleActions(null, actions);
} else if (cta && handleClick) {
handleClick(cta);
}
};
return (
<TouchableOpacity
disabled={!(textFieldData.cta || textFieldData.actions)}
onPress={handleTextClick}
activeOpacity={1}
>
<TextComponent textFieldData={textFieldData} />
</TouchableOpacity>
);
};
const TextComponent = ({ textFieldData }: { textFieldData: TextFieldData }) => {
let substringStyleMap: SubstringStyle[] = [];
let textFieldString: string = textFieldData.text || "";
textFieldData.substringStyles?.forEach(({ substring, textStyle }, index) => {
textFieldString = substringStyleMap?.pop()?.substring || textFieldData.text;
const splitArray = textFieldString.split(substring);
@@ -53,36 +165,25 @@ export const StyledText = ({
};
substringStyleMap = [...substringStyleMap, part1, part2, part3];
});
return (
<View style={[styles.columnContainer, textFieldData.viewStyle]}>
{topImage && <StyledImage imageFieldData={topImage} />}
{topLottie && <StyledLottie lottieFieldData={topLottie} />}
<View style={styles.rowContainer}>
{leftImage && <StyledImage imageFieldData={leftImage} />}
{leftLottie && <StyledLottie lottieFieldData={leftLottie} />}
<Animated.Text
ellipsizeMode={textFieldData.ellipsizeMode}
numberOfLines={textFieldData.numberOfLines}
style={textFieldData.textStyle || undefined}
>
{substringStyleMap.length !== 0
? substringStyleMap.map((substringStyle, index) => {
return (
<Animated.Text
style={substringStyle.textStyle || undefined}
key={index}
>
{substringStyle.substring}
</Animated.Text>
);
})
: textFieldData.text}
</Animated.Text>
{rightImage && <StyledImage imageFieldData={rightImage} />}
{rightLottie && <StyledLottie lottieFieldData={rightLottie} />}
</View>
{bottomImage && <StyledImage imageFieldData={bottomImage} />}
{bottomLottie && <StyledLottie lottieFieldData={bottomLottie} />}
</View>
<Animated.Text
ellipsizeMode={textFieldData.ellipsizeMode}
numberOfLines={textFieldData.numberOfLines}
style={textFieldData.textStyle || undefined}
>
{substringStyleMap.length !== 0
? substringStyleMap.map((substringStyle, index) => {
return (
<Animated.Text
style={substringStyle.textStyle || undefined}
key={index}
>
{substringStyle.substring}
</Animated.Text>
);
})
: textFieldData.text}
</Animated.Text>
);
};

89
components/widgets/title-right-title-with-content-list-widget/TitleRightTitleWithContentListWidget.tsx Normal file
View File

@@ -0,0 +1,89 @@
import { useCallback } from "react";
import { FlatList, View } from "react-native";
import {
TitleRightTitleWithContentListWidgetDataItem,
TitleRightTitleWithContentListWidgetDataItemProps,
TitleRightTitleWithContentListWidgetProps,
} from "../../../App/common/interface/widgets/widgetData";
import { createThrottledHandler } from "../../../App/common/utilities/ThrottleUtil";
import { ItemSeparator } from "../../reusable";
import { StyledText } from "../styled-text/StyledText";
import styles from "./TitleRightTitleWithContentListWidgetStyles";
const TitleRightTitleWithContentListWidget = ({
widgetData,
widgetStyle,
handleActions,
handleClick,
widgetIndex,
}: TitleRightTitleWithContentListWidgetProps) => {
const throttledHandleActions = useCallback(
createThrottledHandler(action => handleActions(null, action), 700),
[widgetData],
);
return (
<FlatList
data={widgetData.listData}
renderItem={({
item,
}: {
item: TitleRightTitleWithContentListWidgetDataItem;
}) => (
<ListItemComponent
item={item}
handleActions={throttledHandleActions}
handleClick={handleClick}
/>
)}
ItemSeparatorComponent={() => (
<ItemSeparator separatorData={widgetData.separatorData!!} />
)}
keyExtractor={(item, index) => item.id || index.toString()}
/>
);
};
const ListItemComponent = ({
item,
handleActions,
handleClick,
}: TitleRightTitleWithContentListWidgetDataItemProps) => {
return (
<View style={styles.columnContainer}>
<View style={styles.rowContainer}>
{item.title && (
<StyledText
textFieldData={item.title}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{item.rightTitle && (
<StyledText
textFieldData={item.rightTitle}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
</View>
<View style={styles.contentContainer}>
{item.subtitle && (
<StyledText
textFieldData={item.subtitle}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
{item.content && (
<StyledText
textFieldData={item.content}
handleClick={handleClick}
handleActions={handleActions}
/>
)}
</View>
</View>
);
};
export default TitleRightTitleWithContentListWidget;

18
components/widgets/title-right-title-with-content-list-widget/TitleRightTitleWithContentListWidgetStyles.ts Normal file
View File

@@ -0,0 +1,18 @@
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
rowContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
},
columnContainer: {
flexDirection: "column",
},
contentContainer: {
flexDirection: "column",
alignItems: "flex-start",
},
});
export default styles;

24
components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
View File

@@ -11,7 +11,7 @@ import { StyledImage } from "../../StyledImage";
import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
import { styles } from "./TitleWithColumnWidgetStyle";
export const TitleWithColumnWidget = ({
const TitleWithColumnWidget = ({
widgetData,
widgetStyle,
handleActions,
@@ -22,7 +22,7 @@ export const TitleWithColumnWidget = ({
widgetStyle: ViewStyle;
handleActions: (
value?: any | undefined | null,
screenActionPayload?: GenericActionPayload
screenActionPayload?: GenericActionPayload,
) => void;
handleClick?: (cta: CtaData) => void;
widgetIndex: number;
@@ -39,9 +39,13 @@ export const TitleWithColumnWidget = ({
return (
<View style={styles.columnItem}>
{imageData?.url && <StyledImage imageFieldData={imageData} />}
{imageData?.url && title?.text && <View style={commonStyles.verticalSpacer16} />}
{imageData?.url && title?.text && (
<View style={commonStyles.verticalSpacer16} />
)}
{title?.text && <StyledText textFieldData={title} />}
{title?.text && subtitle?.text && <View style={commonStyles.verticalSpacer4} />}
{title?.text && subtitle?.text && (
<View style={commonStyles.verticalSpacer4} />
)}
{subtitle?.text && <StyledText textFieldData={subtitle} />}
</View>
);
@@ -50,8 +54,12 @@ export const TitleWithColumnWidget = ({
return (
<View style={styles.container}>
<View style={styles.columnContainer}>
{widgetData.title?.text && <StyledText textFieldData={widgetData.title} />}
{widgetData.title?.text && <View style={commonStyles.verticalSpacer24} />}
{widgetData.title?.text && (
<StyledText textFieldData={widgetData.title} />
)}
{widgetData.title?.text && (
<View style={commonStyles.verticalSpacer24} />
)}
<View style={styles.rowContainer}>
<ColumnItem
imageData={widgetData.leftIcon}
@@ -67,4 +75,6 @@ export const TitleWithColumnWidget = ({
</View>
</View>
);
};
};
export default TitleWithColumnWidget;

2
components/widgets/title-with-list-widget/TitleWithListWidget.tsx
View File

@@ -1,5 +1,5 @@
import throttle from "lodash/throttle";
import React, { useCallback, useEffect } from "react";
import { useCallback, useEffect } from "react";
import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";