From 0e71fc57cf1f447716ad1f98ff7463c445ed829d Mon Sep 17 00:00:00 2001 From: Prajjaval Verma Date: Thu, 18 Apr 2024 15:45:20 +0530 Subject: [PATCH] Quote Page V2 | TP-61793 | TP-61794 | TP-61795 (#10440) --- App/Container/Navi-Insurance/Styles/index.ts | 9 ++ .../quote-offer-screen/QuoteOfferScreen.tsx | 42 +++++-- .../QuoteOfferScreenStyle.ts | 1 + App/common/constants/WidgetNameConstants.ts | 2 + App/common/hooks/useGradient.tsx | 4 + .../widgets/screenData/ScreenMetaData.ts | 2 + .../widgets/widgetData/FabWidgetData.ts | 26 +++-- .../widgetData/FooterWithCardWidgetData.ts | 2 + .../widgetData/HeaderWithAssetsWidgetData.ts | 1 + .../widgetData/TitleWithAssetBackground.ts | 22 ++++ .../widgetData/TitleWithColumnWidgetData.ts | 18 +++ App/common/widgets/widgetResolver.tsx | 25 ++++ assets/colors/colors.ts | 1 + assets/mocks/mockApiResponse.json | 0 .../TitleWithStepsBottomSheetStyle.ts | 1 + .../dashed-separator/DashedSeparator.tsx | 60 ++++++++++ .../dashed-separator/DashedSeparatorStyle.ts | 26 +++++ components/widgets/HeaderWithAssetsWidget.tsx | 26 +++-- components/widgets/fab/FAB.tsx | 38 ++++++- components/widgets/fab/FABStyle.ts | 26 ++++- .../FooterWithCardWidget.tsx | 74 ++++++++---- .../FooterWithCardWidgetStyle.ts | 32 +++++- .../widgets/gradient-text/GradientText.tsx | 33 ++++++ .../StyledLottieComponentStyle.ts | 2 - .../TitleWithAssetBackground.tsx | 107 ++++++++++++++++++ .../TitleWithAssetBackgroundStyle.ts | 60 ++++++++++ .../TitleWithColumnWidget.tsx | 70 ++++++++++++ .../TitleWithColumnWidgetStyle.ts | 30 +++++ 28 files changed, 675 insertions(+), 65 deletions(-) create mode 100644 App/common/interface/widgets/widgetData/TitleWithAssetBackground.ts create mode 100644 App/common/interface/widgets/widgetData/TitleWithColumnWidgetData.ts create mode 100644 assets/mocks/mockApiResponse.json create mode 100644 components/widgets/gradient-text/GradientText.tsx create mode 100644 components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx create mode 100644 components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts create mode 100644 components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx create mode 100644 components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts diff --git a/App/Container/Navi-Insurance/Styles/index.ts b/App/Container/Navi-Insurance/Styles/index.ts index ad837bc2ea..39db99b7f0 100644 --- a/App/Container/Navi-Insurance/Styles/index.ts +++ b/App/Container/Navi-Insurance/Styles/index.ts @@ -15,6 +15,15 @@ export const commonStyles = StyleSheet.create({ verticalSpacer32: { height: 32, }, + verticalSpacer4: { + height: 4, + }, + verticalSpacer16: { + height: 16, + }, + verticalSpacer24: { + height: 24, + }, selfAlignCenter: { alignSelf: "center", }, diff --git a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx index 011ed1e037..812329f900 100644 --- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx +++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx @@ -9,6 +9,7 @@ import { import Animated, { useAnimatedStyle, useSharedValue, + withTiming, } from "react-native-reanimated"; import Colors from "../../../../../assets/colors/colors"; import BaseWidget from "../../../../../components/widgets/BaseWidget"; @@ -33,7 +34,8 @@ import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes"; import styles from "./QuoteOfferScreenStyle"; import QuoteOfferErrorScreen from "./error-screen/QuoteOfferErrorScreen"; import QuoteOfferShimmerScreen from "./shimmer-screen/QuoteOfferShimmerScreen"; - +import { FabWidgetData } from "../../../../common/interface/widgets/widgetData/FabWidgetData"; +import FAB from "../../../../../components/widgets/fab/FAB"; const QuoteOfferScreen = ({ ctaData, screenData, @@ -44,17 +46,30 @@ const QuoteOfferScreen = ({ handleActions: (screenPayload?: GenericActionPayload) => void; }) => { const y = useSharedValue(0); - // TODO: check and remove below code if it is working fine in release. - // const onScroll = useAnimatedScrollHandler({ - // onScroll: (event) => { - // y.value = event.contentOffset.y; - // }, - // }); + const lastScrollPosition = useSharedValue(0); const onScroll = (event: NativeSyntheticEvent) => { + lastScrollPosition.value = y.value; y.value = event.nativeEvent.contentOffset.y; }; + const fabTextStyle = useAnimatedStyle(() => { + return { + maxWidth: withTiming( + y.value < lastScrollPosition.value || y.value <= 0 ? "100%" : 0, + { duration: 100 } + ), + paddingRight: withTiming( + y.value < lastScrollPosition.value || y.value <= 0 ? 16 : 0, + { duration: 100 } + ), + opacity: withTiming( + y.value < lastScrollPosition.value || y.value <= 0 ? 1 : 0, + { duration: 100 } + ), + }; + }); + const headerBgStyle = useAnimatedStyle(() => { return { backgroundColor: @@ -238,6 +253,19 @@ const QuoteOfferScreen = ({ handleClick )} + {screenData?.screenMetaData?.floatingWidgets?.map( + (fabWidget: Widget, index: number) => { + return ( + + ); + } + )} ); } diff --git a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts index 64fd4e4796..efec79eb3e 100644 --- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts +++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts @@ -6,6 +6,7 @@ const styles = StyleSheet.create({ flexDirection: "column", }, header: { + width: "100%", alignItems: "stretch", position: "absolute", zIndex: 1, diff --git a/App/common/constants/WidgetNameConstants.ts b/App/common/constants/WidgetNameConstants.ts index afebaad547..2f63d07111 100644 --- a/App/common/constants/WidgetNameConstants.ts +++ b/App/common/constants/WidgetNameConstants.ts @@ -13,3 +13,5 @@ export const HEADER_LOTTIE_ANIMATION_WIDGET = "HEADER_LOTTIE_ANIMATION_WIDGET"; export const SUM_INSURED_WIDGET = "SUM_INSURED_WIDGET"; export const TITLE_SUBTITLE_WITH_ASSET_WIDGET = "TITLE_SUBTITLE_WITH_ASSET_WIDGET"; export const FAB_REQUEST_TO_CALLBACK = "FAB_REQUEST_TO_CALLBACK"; +export const TITLE_WITH_COLUMN_WIDGET = "TITLE_WITH_COLUMN_WIDGET"; +export const TITLE_WITH_ASSET_BACKGROUND_WIDGET = "TITLE_WITH_ASSET_BACKGROUND_WIDGET"; \ No newline at end of file diff --git a/App/common/hooks/useGradient.tsx b/App/common/hooks/useGradient.tsx index 61fc81edfb..0fdd6d875c 100644 --- a/App/common/hooks/useGradient.tsx +++ b/App/common/hooks/useGradient.tsx @@ -1,17 +1,20 @@ import LinearGradient from "react-native-linear-gradient"; import { isValidHexColors } from "../utilities/ValidateColors"; import { Orientation } from "../constants/StringConstant"; +import { ViewStyle } from "react-native"; export const NaviLinearGradient = ({ gradientColors, defaultColors, children, orientation, + style, }: { gradientColors?: string[]; defaultColors?: string[]; children?: React.ReactNode; orientation?: string; + style?: ViewStyle; }) => { let startValue; switch (orientation) { @@ -48,6 +51,7 @@ export const NaviLinearGradient = ({ colors={isValidHexColors(gradientColors, defaultColors)} start={startValue} end={endValue} + style={style} > {children} diff --git a/App/common/interface/widgets/screenData/ScreenMetaData.ts b/App/common/interface/widgets/screenData/ScreenMetaData.ts index 3ebb633bfb..968bec6b98 100644 --- a/App/common/interface/widgets/screenData/ScreenMetaData.ts +++ b/App/common/interface/widgets/screenData/ScreenMetaData.ts @@ -1,6 +1,8 @@ import { CtaData } from "../.."; +import { Widget } from "../Widget"; export interface ScreenMetaData { backButtonCta?: CtaData; redirectionCta?: CtaData; + floatingWidgets?: Widget[]; } diff --git a/App/common/interface/widgets/widgetData/FabWidgetData.ts b/App/common/interface/widgets/widgetData/FabWidgetData.ts index f183523202..e299953c91 100644 --- a/App/common/interface/widgets/widgetData/FabWidgetData.ts +++ b/App/common/interface/widgets/widgetData/FabWidgetData.ts @@ -1,15 +1,21 @@ import { CtaData } from "../.."; import { GenericWidgetData } from "../Widget"; -import { LottieFieldData } from "./TitleWidgetData"; - +import { + ImageFieldData, + LottieFieldData, + TextFieldData, +} from "./TitleWidgetData"; export interface FabWidgetData extends GenericWidgetData { - lottieData?: LottieFieldData; - properties?: FabProperties; - callbackCta?: CtaData; -}; + lottieData?: LottieFieldData; + buttonTitle?: TextFieldData; + topLottieData?: LottieFieldData; + imageData?: ImageFieldData; + properties?: FabProperties; + callbackCta?: CtaData; +} -export interface FabProperties { - isDraggable?: boolean; - startingPosition?: number; -} \ No newline at end of file +export interface FabProperties { + isDraggable?: boolean; + startingPosition?: number; +} diff --git a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts index 18675e27af..fd51b61470 100644 --- a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts +++ b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts @@ -22,6 +22,8 @@ export interface FinalPatchCallRequestBody { } export interface CardInfo extends GenericWidgetData { + dashedSeparator?: boolean; + centerTitle?: TextFieldData; title?: TextFieldData; rightTitle?: TextFieldData; } diff --git a/App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData.ts b/App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData.ts index 51a7ecf9fd..2ca0ee0da2 100644 --- a/App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData.ts +++ b/App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData.ts @@ -13,4 +13,5 @@ export interface HeaderWithAssetsWidgetData extends GenericWidgetData { rightIcon?: ImageFieldData; rightLottie?: LottieFieldData; action?: GenericActionPayload; + isRightAssetVisible?: boolean; } diff --git a/App/common/interface/widgets/widgetData/TitleWithAssetBackground.ts b/App/common/interface/widgets/widgetData/TitleWithAssetBackground.ts new file mode 100644 index 0000000000..95d00461b3 --- /dev/null +++ b/App/common/interface/widgets/widgetData/TitleWithAssetBackground.ts @@ -0,0 +1,22 @@ +import { GenericWidgetData } from "../Widget"; +import { ButtonData } from "./FooterWithCardWidgetData"; +import { + ImageFieldData, + LottieFieldData, + TextFieldData, +} from "./TitleWidgetData"; + +export interface TitleWithAssetBackgroundData extends GenericWidgetData { + backgroundIcon?: ImageFieldData; + backgroundLottie?: LottieFieldData; + middleStrip?: Strip; + title?: TextFieldData; + footerButton?: ButtonData +} + +export interface Strip { + firstIcon?: ImageFieldData; + secondIcon?: ImageFieldData; + stripTitle?: TextFieldData; + stripTitleGradient?: string[]; +} \ No newline at end of file diff --git a/App/common/interface/widgets/widgetData/TitleWithColumnWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithColumnWidgetData.ts new file mode 100644 index 0000000000..8de7ce1f9f --- /dev/null +++ b/App/common/interface/widgets/widgetData/TitleWithColumnWidgetData.ts @@ -0,0 +1,18 @@ +import { GenericWidgetData } from "../Widget"; +import { + ImageFieldData, + LottieFieldData, + TextFieldData, +} from "./TitleWidgetData"; + +export interface TitleWithColumnWidgetData extends GenericWidgetData { + leftIcon?: ImageFieldData; + leftLottie?: LottieFieldData; + leftTitle?: TextFieldData; + leftSubtitle?: TextFieldData; + title?: TextFieldData; + rightIcon?: ImageFieldData; + rightLottie?: LottieFieldData; + rightTitle?: TextFieldData; + rightSubtitle?: TextFieldData; +} \ No newline at end of file diff --git a/App/common/widgets/widgetResolver.tsx b/App/common/widgets/widgetResolver.tsx index 2119d4c856..f515aab0ac 100644 --- a/App/common/widgets/widgetResolver.tsx +++ b/App/common/widgets/widgetResolver.tsx @@ -24,12 +24,16 @@ import { TITLE_SUBTITLE_WITH_ASSET_WIDGET, TITLE_WIDGET, TITLE_WITH_ASSETS_WIDGET, + TITLE_WITH_ASSET_BACKGROUND_WIDGET, + TITLE_WITH_COLUMN_WIDGET, TITLE_WITH_LIST_WIDGET, } from "../constants/WidgetNameConstants"; import { CtaData } from "../interface"; import { GenericWidgetData, Widget } from "../interface/widgets/Widget"; import { SumInsuredWidgetData } from "../interface/widgets/widgetData/SumInsuredWidgetData"; import { ScreenState } from "../screen/BaseScreen"; +import { TitleWithColumnWidget } from "../../../components/widgets/title-with-column-widget/TitleWithColumnWidget"; +import { TitleWithAssetBackgroundWidget } from "../../../components/widgets/title-with-asset-background/TitleWithAssetBackground"; export const GetWidgetView = { getWidget: ( @@ -198,6 +202,27 @@ function resolveWidgetView( handleClick={handleClick} /> ); + case TITLE_WITH_COLUMN_WIDGET: + return ( + + ) + case TITLE_WITH_ASSET_BACKGROUND_WIDGET: + return ( + + ); default: return ; } diff --git a/assets/colors/colors.ts b/assets/colors/colors.ts index 986510fc13..00d852506e 100644 --- a/assets/colors/colors.ts +++ b/assets/colors/colors.ts @@ -10,6 +10,7 @@ const Colors = { lightBlue: "#EAF2FF", shimmerBgColor: "#E9E7F0", shimmerHighlightColor: "#F5F5F8", + silver: "#BCBCBC", }; export default Colors; diff --git a/assets/mocks/mockApiResponse.json b/assets/mocks/mockApiResponse.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheetStyle.ts b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheetStyle.ts index ab05f7bc7e..8d5a6d7f3d 100644 --- a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheetStyle.ts +++ b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheetStyle.ts @@ -34,6 +34,7 @@ const styles = StyleSheet.create({ stepsBulletRow: { flexDirection: "row", marginStart: 44, + marginBottom: 12, }, bulletContainer: { flex: 1, diff --git a/components/reusable/dashed-separator/DashedSeparator.tsx b/components/reusable/dashed-separator/DashedSeparator.tsx index 205d2a084d..0e6dabdb08 100644 --- a/components/reusable/dashed-separator/DashedSeparator.tsx +++ b/components/reusable/dashed-separator/DashedSeparator.tsx @@ -1,5 +1,7 @@ import { View, ViewStyle } from "react-native"; import styles from "./DashedSeparatorStyle"; +import { NaviLinearGradient } from "../../../App/common/hooks/useGradient"; +import { Orientation } from "../../../App/common/constants/StringConstant"; export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => { return ; @@ -8,3 +10,61 @@ export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => { export const VerticalDashedSeparator = ({ style }: { style: ViewStyle }) => { return ; }; + +export const GradientHorizontalDashedSeparator = ({ + height, + colorsArray, +}: { + height: number; + colorsArray: string[]; +}) => { + return ( + + + + + + ); +}; + +export const CustomHorizontalDashedSeparator = ({ + height, + width, + space, + backgroundColor, + colorsArray, + dashesCount, +}: { + height?: number; + width?: number; + space?: number; + backgroundColor?: string; + colorsArray?: string[]; + dashesCount?: number; +}) => { + return ( + + + {[...Array(dashesCount ? dashesCount : 1000).keys()].map((_, index) => ( + + ))} + + + ); +}; diff --git a/components/reusable/dashed-separator/DashedSeparatorStyle.ts b/components/reusable/dashed-separator/DashedSeparatorStyle.ts index f7eece188f..88df2fe891 100644 --- a/components/reusable/dashed-separator/DashedSeparatorStyle.ts +++ b/components/reusable/dashed-separator/DashedSeparatorStyle.ts @@ -1,4 +1,5 @@ import { StyleSheet } from "react-native"; +import Colors from "../../../assets/colors/colors"; const styles = StyleSheet.create({ horizontalDashedDivider: { @@ -17,6 +18,31 @@ const styles = StyleSheet.create({ borderRightColor: "#EBEBEB", borderRightWidth: 1, }, + gradientContainer: { + flex: 1, + flexDirection: "row", + borderRadius: 1, + overflow: "hidden", + }, + gradientDashedDivider: { + width: "100%", + height: 0, + backgroundColor: "transparent", + borderStyle: "dashed", + borderBottomColor: "white", + borderBottomWidth: 1.5, + }, + customGradientContainer: { + flex: 1, + flexDirection: "row", + overflow: "hidden", + }, + customGradient: { + width: 1, + height: 1, + marginLeft: 4, + backgroundColor: Colors.white, + }, }); export default styles; diff --git a/components/widgets/HeaderWithAssetsWidget.tsx b/components/widgets/HeaderWithAssetsWidget.tsx index 714c0daeb6..7d51b4ac70 100644 --- a/components/widgets/HeaderWithAssetsWidget.tsx +++ b/components/widgets/HeaderWithAssetsWidget.tsx @@ -67,18 +67,20 @@ const HeaderWithAssetsWidget = ({ {widgetData.centerTitle && ( )} - {widgetData.rightIcon && ( - - )} - {widgetData.rightLottie && ( - - )} + {widgetData.rightIcon && + (widgetData.isRightAssetVisible === false ? false : true) && ( + + )} + {widgetData.rightLottie && + (widgetData.isRightAssetVisible === false ? false : true) && ( + + )} ); }; diff --git a/components/widgets/fab/FAB.tsx b/components/widgets/fab/FAB.tsx index b0e12cdb1c..f44ec54a6b 100644 --- a/components/widgets/fab/FAB.tsx +++ b/components/widgets/fab/FAB.tsx @@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react"; import { StyledLottie } from "../styled-lottie/StyledLottie"; -import { NativeEventEmitter, useWindowDimensions } from "react-native"; +import { + NativeEventEmitter, + ViewStyle, + useWindowDimensions, +} from "react-native"; import { PanGestureHandler, @@ -21,11 +25,14 @@ import { NativeEventNameConstants } from "../../../App/common/constants/EventNam import { CtaData } from "../../../App/common/interface"; import { FabWidgetData } from "../../../App/common/interface/widgets/widgetData/FabWidgetData"; import { FAB_HEIGHT, styles } from "./FABStyle"; +import { StyledText } from "../styled-text/StyledText"; +import { StyledImage } from "../../StyledImage"; const FAB = ({ widgetData, handleActions, handleClick, + scrollStyle, }: { widgetData: FabWidgetData; handleActions: ( @@ -33,6 +40,7 @@ const FAB = ({ actionPayloadList: GenericActionPayload | undefined ) => void; handleClick?: (cta: CtaData) => void; + scrollStyle?: ViewStyle; }) => { const [enabled, setEnabled] = useState(true); const { height } = useWindowDimensions(); @@ -96,16 +104,36 @@ const FAB = ({ onHandlerStateChange={_onTapHandlerStateChange} > - - {widgetData?.lottieData && ( - + {widgetData.topLottieData && ( + + + + )} + {widgetData?.imageData && ( + + + + )} + {widgetData?.buttonTitle?.text && ( + + + + )} + {widgetData.lottieData && + !!!widgetData.topLottieData && + !!!widgetData.imageData && + !!!widgetData.buttonTitle?.text && ( + + + )} - ); + /* remove backward compatibility code in next release */ + return isDraggable ? ( {fabContent} diff --git a/components/widgets/fab/FABStyle.ts b/components/widgets/fab/FABStyle.ts index d15bcef555..08eaa2f136 100644 --- a/components/widgets/fab/FABStyle.ts +++ b/components/widgets/fab/FABStyle.ts @@ -1,6 +1,6 @@ import { StyleSheet } from "react-native"; -export const FAB_WIDTH = 60; +export const FAB_WIDTH = 48; export const FAB_HEIGHT = FAB_WIDTH; export const FAB_BORDER_RADIUS = FAB_WIDTH / 2; @@ -14,15 +14,33 @@ export const styles = StyleSheet.create({ right: 20, }, fabButtonStyles: { + flexDirection: "row", alignItems: "center", justifyContent: "center", - backgroundColor: "#1F002A", - width: FAB_WIDTH, + backgroundColor: "#0047D6", height: FAB_HEIGHT, borderRadius: FAB_BORDER_RADIUS, }, lottie: { height: FAB_HEIGHT, - width: "100%", + 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", + } }); diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx index 1e5814365c..115848463c 100644 --- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx +++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx @@ -19,6 +19,11 @@ import CtaButton from "../../reusable/cta-button/CtaButton"; import { StyledText } from "../styled-text/StyledText"; import TitleWidget from "../title-widget/TitleWidget"; import styles from "./FooterWithCardWidgetStyle"; +import { + GradientHorizontalDashedSeparator, + HorizontalDashedSeparator, +} from "../../reusable/dashed-separator/DashedSeparator"; +import Colors from "../../../assets/colors/colors"; export const CardComponent = ({ cardInfo, @@ -60,7 +65,8 @@ const FooterWithCardWidget = ({ }; const getViewStyle = (): ViewStyle => { - return widgetData.cardInfo?.title?.text + return widgetData.cardInfo?.title?.text || + widgetData.cardInfo?.centerTitle?.text ? styles.rowContainer : styles.roundedRowContainer; }; @@ -76,13 +82,32 @@ const FooterWithCardWidget = ({ }) => { if (!!actionEvent) sendAsAnalyticsEvent(actionEvent); handleActions(null, action); - }, 700, { - leading: true, - trailing: false, - }), + }, + 700, + { + leading: true, + trailing: false, + } + ), [widgetData] ); + const cardAction = () => { + throttledHandleActions({ + action: widgetData?.action, + actionEvent: + widgetData?.cardAction?.metaData?.at(0)?.analyticsEventProperties, + }); + }; + + const titleAction = () => { + throttledHandleActions({ + action: widgetData?.action, + actionEvent: + widgetData?.titleAction?.metaData?.at(0)?.analyticsEventProperties, + }); + }; + const buttonState = screenState === ScreenState.OVERLAY ? ButtonState.LOADING @@ -92,31 +117,34 @@ const FooterWithCardWidget = ({ {widgetData?.cardInfo?.title?.text && widgetData?.cardInfo?.rightTitle?.text && ( - { - throttledHandleActions({ - action: widgetData?.action, - actionEvent: - widgetData?.cardAction?.metaData?.at(0) - ?.analyticsEventProperties, - }); - } - }> + - + + + + )} + + {widgetData?.cardInfo?.centerTitle?.text && ( + + + + )} + {widgetData?.cardInfo?.dashedSeparator && ( + + + + )} + - { - throttledHandleActions({ - action: widgetData?.action, - actionEvent: - widgetData?.titleAction?.metaData?.at(0) - ?.analyticsEventProperties, - }); - }}> + { + return ( + + {textFieldData.text} + + ); +}; + +export const GradientMask = (props: any) => { + return ( + }> + + + + + ); +}; \ No newline at end of file diff --git a/components/widgets/styled-lottie/StyledLottieComponentStyle.ts b/components/widgets/styled-lottie/StyledLottieComponentStyle.ts index 10ab2fd1dc..5c3346198a 100644 --- a/components/widgets/styled-lottie/StyledLottieComponentStyle.ts +++ b/components/widgets/styled-lottie/StyledLottieComponentStyle.ts @@ -2,12 +2,10 @@ import { StyleSheet } from "react-native"; const styles = StyleSheet.create({ lottie: { - flex: 1, width: "100%", height: "100%", }, touchableOpacity: { - flex: 1, }, }); diff --git a/components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx b/components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx new file mode 100644 index 0000000000..c4e1db5971 --- /dev/null +++ b/components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx @@ -0,0 +1,107 @@ +import { TouchableOpacity, View, ViewStyle } from "react-native"; +import { + Strip, + TitleWithAssetBackgroundData, +} from "../../../App/common/interface/widgets/widgetData/TitleWithAssetBackground"; +import { GenericActionPayload } from "../../../App/common/actions/GenericAction"; +import { CtaData } from "../../../App/common/interface"; +import { StyledImage } from "../../StyledImage"; +import { StyledText } from "../styled-text/StyledText"; +import CtaButton from "../../reusable/cta-button/CtaButton"; +import { ImageFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData"; +import { GradientText } from "../gradient-text/GradientText"; +import { styles } from "./TitleWithAssetBackgroundStyle"; + +export const TitleWithAssetBackgroundWidget = ({ + widgetData, + widgetStyle, + handleActions, + handleClick, + widgetIndex, +}: { + widgetData: TitleWithAssetBackgroundData; + widgetStyle: ViewStyle; + handleActions: ( + value?: any | undefined | null, + screenActionPayload?: GenericActionPayload + ) => void; + handleClick?: (cta: CtaData) => void; + widgetIndex: number; +}) => { + const Strip = ({ stripData }: { stripData: Strip }) => { + return ( + + + + {stripData.stripTitle && ( + + + + )} + + ); + }; + + const StripImage = ({ + image, + imageStyle, + }: { + image?: ImageFieldData; + imageStyle?: ViewStyle; + }) => { + return ( + + {image && } + + ); + }; + + return ( + + {widgetData?.backgroundIcon && ( + + )} + {widgetData?.title?.text && ( + + + + )} + {widgetData.middleStrip && ( + { + handleClick && + widgetData?.footerButton?.cta && + handleClick(widgetData?.footerButton?.cta); + }} + activeOpacity={1} + > + + + )} + {widgetData.footerButton && ( + { + handleClick && + widgetData?.footerButton?.cta && + handleClick(widgetData?.footerButton?.cta); + }} + > + {widgetData.footerButton?.title?.text && ( + + )} + + )} + + ); +}; diff --git a/components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts b/components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts new file mode 100644 index 0000000000..cc1c04a4cf --- /dev/null +++ b/components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts @@ -0,0 +1,60 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + }, + title: { + position: "absolute", + top: 32, + alignSelf: "center", + }, + stripContainer: { + marginHorizontal: 16, + bottom: 72, + alignSelf: "center", + position: "absolute", + }, + strip: { + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "center", + width: "100%", + backgroundColor: "#E8F1FF", + borderRadius: 21, + padding: 4, + }, + firstStripImage: { + width: 34, + height: 34, + alignItems: "center", + justifyContent: "center", + borderRadius: 38, + borderWidth: 1, + borderColor: "#BED7FF", + backgroundColor: "white", + }, + secondStripImage: { + position: "absolute", + start: 27, + width: 34, + height: 34, + alignItems: "center", + justifyContent: "center", + alignSelf: "center", + borderRadius: 38, + borderWidth: 1, + borderColor: "#BED7FF", + backgroundColor: "white", + }, + stripTitle: { + paddingHorizontal: 40, + }, + footer: { + position: "absolute", + bottom: 0, + alignSelf: "center", + paddingHorizontal: 16, + paddingVertical: 10, + }, +}); \ No newline at end of file diff --git a/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx b/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx new file mode 100644 index 0000000000..19b78751b7 --- /dev/null +++ b/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx @@ -0,0 +1,70 @@ +import { View, ViewStyle } from "react-native"; +import { GenericActionPayload } from "../../../App/common/actions/GenericAction"; +import { CtaData } from "../../../App/common/interface"; +import { TitleWithColumnWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWithColumnWidgetData"; +import { StyledText } from "../styled-text/StyledText"; +import { + ImageFieldData, + TextFieldData, +} from "../../../App/common/interface/widgets/widgetData/TitleWidgetData"; +import { StyledImage } from "../../StyledImage"; +import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles"; +import { styles } from "./TitleWithColumnWidgetStyle"; + +export const TitleWithColumnWidget = ({ + widgetData, + widgetStyle, + handleActions, + handleClick, + widgetIndex, +}: { + widgetData: TitleWithColumnWidgetData; + widgetStyle: ViewStyle; + handleActions: ( + value?: any | undefined | null, + screenActionPayload?: GenericActionPayload + ) => void; + handleClick?: (cta: CtaData) => void; + widgetIndex: number; +}) => { + const ColumnItem = ({ + imageData, + title, + subtitle, + }: { + imageData?: ImageFieldData; + title?: TextFieldData; + subtitle?: TextFieldData; + }) => { + return ( + + {imageData?.url && } + {imageData?.url && title?.text && } + {title?.text && } + {title?.text && subtitle?.text && } + {subtitle?.text && } + + ); + }; + + return ( + + + {widgetData.title?.text && } + {widgetData.title?.text && } + + + + + + + ); +}; \ No newline at end of file diff --git a/components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts b/components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts new file mode 100644 index 0000000000..5b34eb555e --- /dev/null +++ b/components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts @@ -0,0 +1,30 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "white", + shadowColor: "#D1D9E6", + shadowOpacity: 1, + shadowOffset: { + width: 3, + height: 3, + }, + elevation: 5, + }, + columnContainer: { + flex: 1, + flexDirection: "column", + padding: 20, + justifyContent: "center", + }, + rowContainer: { + flex: 1, + flexDirection: "row", + justifyContent: "space-around", + }, + columnItem: { + flexDirection: "column", + alignItems: "center", + }, +});