Quote Page V2 | TP-61793 | TP-61794 | TP-61795 (#10440)

2024-04-18 15:45:20 +05:30
parent c6850bb4ad
commit 0e71fc57cf
28 changed files with 675 additions and 65 deletions
--- 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,
--- 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 <View style={[styles.horizontalDashedDivider, style]} />;
@@ -8,3 +10,61 @@ export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => {
 export const VerticalDashedSeparator = ({ style }: { style: ViewStyle }) => {
  return <View style={[styles.verticalDashedDivider, style]} />;
 };
+
+export const GradientHorizontalDashedSeparator = ({
+  height,
+  colorsArray,
+}: {
+  height: number;
+  colorsArray: string[];
+}) => {
+  return (
+    <View style={{ height: height }}>
+      <NaviLinearGradient
+        gradientColors={colorsArray}
+        orientation={Orientation.HORIZONTAL}
+        style={styles.gradientContainer}
+      >
+        <View style={styles.gradientDashedDivider} />
+      </NaviLinearGradient>
+    </View>
+  );
+};
+
+export const CustomHorizontalDashedSeparator = ({
+  height,
+  width,
+  space,
+  backgroundColor,
+  colorsArray,
+  dashesCount,
+}: {
+  height?: number;
+  width?: number;
+  space?: number;
+  backgroundColor?: string;
+  colorsArray?: string[];
+  dashesCount?: number;
+}) => {
+  return (
+    <View style={{ height: height }}>
+      <NaviLinearGradient
+        gradientColors={colorsArray}
+        orientation={Orientation.HORIZONTAL}
+        style={styles.customGradientContainer}
+      >
+        {[...Array(dashesCount ? dashesCount : 1000).keys()].map((_, index) => (
+          <View
+            key={`dash_${index}`}
+            style={{
+              width: space ? space : styles.customGradient.width,
+              height: height? height : styles.customGradient.height,
+              marginLeft: width? width : styles.customGradient.marginLeft,
+              backgroundColor: backgroundColor? backgroundColor : styles.customGradient.backgroundColor,
+            }}
+          />
+        ))}
+      </NaviLinearGradient>
+    </View>
+  );
+};
--- 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;
--- a/components/widgets/HeaderWithAssetsWidget.tsx
+++ b/components/widgets/HeaderWithAssetsWidget.tsx
@@ -67,18 +67,20 @@ const HeaderWithAssetsWidget = ({
      {widgetData.centerTitle && (
        <StyledText textFieldData={widgetData?.centerTitle} />
      )}
-      {widgetData.rightIcon && (
-        <StyledImage
-          imageFieldData={widgetData?.rightIcon}
-          handleClick={handleClick}
-        />
-      )}
-      {widgetData.rightLottie && (
-        <StyledLottie
-          lottieFieldData={widgetData?.rightLottie}
-          handleClick={handleClick}
-        />
-      )}
+      {widgetData.rightIcon &&
+        (widgetData.isRightAssetVisible === false ? false : true) && (
+          <StyledImage
+            imageFieldData={widgetData?.rightIcon}
+            handleClick={handleClick}
+          />
+        )}
+      {widgetData.rightLottie &&
+        (widgetData.isRightAssetVisible === false ? false : true) && (
+          <StyledLottie
+            lottieFieldData={widgetData?.rightLottie}
+            handleClick={handleClick}
+          />
+        )}
    </View>
  );
 };
--- 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}
      >
        <Animated.View style={styles.fabButtonStyles}>
-          <Animated.View style={styles.lottie}>
-            {widgetData?.lottieData && (
-              <StyledLottie lottieFieldData={widgetData?.lottieData} />
+          {widgetData.topLottieData && (
+            <Animated.View style={styles.topLottie}>
+              <StyledLottie lottieFieldData={widgetData?.topLottieData} />
+            </Animated.View>
+          )}
+          {widgetData?.imageData && (
+            <Animated.View style={styles.image}>
+              <StyledImage imageFieldData={widgetData?.imageData} />
+            </Animated.View>
+          )}
+          {widgetData?.buttonTitle?.text && (
+            <Animated.View style={[styles.buttonTitle, scrollStyle]}>
+              <StyledText textFieldData={widgetData?.buttonTitle} />
+            </Animated.View>
+          )}
+          {widgetData.lottieData &&
+            !!!widgetData.topLottieData &&
+            !!!widgetData.imageData &&
+            !!!widgetData.buttonTitle?.text && (
+              <Animated.View style={styles.lottie}>
+                <StyledLottie lottieFieldData={widgetData?.lottieData} />
+              </Animated.View>
            )}
-          </Animated.View>
        </Animated.View>
      </TapGestureHandler>
    </Animated.View>
  );

+  /* remove backward compatibility code in next release */
+
  return isDraggable ? (
    <PanGestureHandler onHandlerStateChange={_onPanHandlerStateChange}>
      {fabContent}
--- 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",
+  }
 });
--- 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 = ({
    <View>
      {widgetData?.cardInfo?.title?.text &&
        widgetData?.cardInfo?.rightTitle?.text && (
-        <TouchableWithoutFeedback onPress={() => {
-          throttledHandleActions({
-            action: widgetData?.action,
-            actionEvent:
-              widgetData?.cardAction?.metaData?.at(0)
-                ?.analyticsEventProperties,
-          });
-        }
-          }>
+          <TouchableOpacity onPress={cardAction} activeOpacity={1}>
            <CardComponent
              cardInfo={widgetData.cardInfo}
              style={styles.cardContainer}
            />
-          </TouchableWithoutFeedback>
+            <View style={styles.greenSeparatorContainer}>
+              <HorizontalDashedSeparator style={styles.greenSeparator} />
+            </View>
+          </TouchableOpacity>
        )}
+
+      {widgetData?.cardInfo?.centerTitle?.text && (
+        <View style={styles.centerTitleContainer}>
+          <StyledText textFieldData={widgetData.cardInfo.centerTitle} />
+        </View>
+      )}
+      {widgetData?.cardInfo?.dashedSeparator && (
+        <View style={styles.dashedSeparatorContainer}>
+          <GradientHorizontalDashedSeparator
+            height={1.5}
+            colorsArray={[Colors.white, Colors.silver, Colors.white]}
+          />
+        </View>
+      )}
+
      <View style={getViewStyle()}>
        <View style={commonStyles.flex_1}>
-          <TouchableOpacity onPress={() => {
-            throttledHandleActions({
-              action: widgetData?.action,
-              actionEvent:
-                widgetData?.titleAction?.metaData?.at(0)
-                  ?.analyticsEventProperties,
-            });
-          }}>
+          <TouchableOpacity onPress={titleAction} activeOpacity={1}>
            <TitleWidget
              widgetData={widgetData}
              widgetStyle={styles.titleContainer}
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 32,
-    paddingTop: 20,
+    paddingTop: 12,
    paddingHorizontal: 16,
  },
  roundedRowContainer: {
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 32,
-    paddingTop: 20,
+    paddingTop: 16,
    paddingHorizontal: 16,
    borderRadius: 16,
    borderBottomLeftRadius: 0,
@@ -40,6 +40,34 @@ const styles = StyleSheet.create({
    shadowRadius: 10,
    elevation: 10,
  },
+  centerTitleContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    backgroundColor: "#FFFFFF",
+    paddingHorizontal: 30,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    shadowColor: "black",
+    shadowOpacity: 1,
+    shadowOffset: { width: 0, height: -16 },
+    shadowRadius: 8,
+    elevation: 12,
+    borderWidth: 1
+  },
+  greenSeparatorContainer: {
+    paddingHorizontal: 16,
+    backgroundColor: "#FFFFFF",
+    paddingBottom: 8,
+  },
+  greenSeparator: {
+    borderBottomColor: "#E7F8EE",
+  },
+  dashedSeparatorContainer: {
+    paddingHorizontal: 16,
+    backgroundColor: "#FFFFFF",
+  },
  titleContainer: {
    flexDirection: "column",
    justifyContent: "space-between",
--- a/components/widgets/gradient-text/GradientText.tsx
+++ b/components/widgets/gradient-text/GradientText.tsx
@@ -0,0 +1,33 @@
+import MaskedView from "@react-native-masked-view/masked-view";
+import LinearGradient from "react-native-linear-gradient";
+import { Text } from "react-native";
+import { TextFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
+import { isValidHexColors } from "../../../App/common/utilities/ValidateColors";
+
+export const GradientText = ({
+  textFieldData,
+  colorsArray,
+}: {
+  textFieldData: TextFieldData;
+  colorsArray?: string[];
+}) => {
+  return (
+    <GradientMask colorsArray={colorsArray} textStyle={textFieldData.textStyle}>
+      {textFieldData.text}
+    </GradientMask>
+  );
+};
+
+export const GradientMask = (props: any) => {
+  return (
+    <MaskedView maskElement={<Text {...props} style={props.textStyle} />}>
+      <LinearGradient
+        colors={isValidHexColors(props.colorsArray)}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+      >
+        <Text {...props} style={[props.textStyle, { opacity: 0 }]} />
+      </LinearGradient>
+    </MaskedView>
+  );
+};
--- 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,
  },
 });

--- a/components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx
+++ 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 (
+      <View style={styles.strip}>
+        <StripImage
+          image={stripData?.firstIcon}
+          imageStyle={styles.firstStripImage}
+        />
+        <StripImage
+          image={stripData?.secondIcon}
+          imageStyle={styles.secondStripImage}
+        />
+        {stripData.stripTitle && (
+          <View style={styles.stripTitle}>
+            <GradientText
+              textFieldData={stripData.stripTitle}
+              colorsArray={stripData.stripTitleGradient}
+            />
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const StripImage = ({
+    image,
+    imageStyle,
+  }: {
+    image?: ImageFieldData;
+    imageStyle?: ViewStyle;
+  }) => {
+    return (
+      <View style={imageStyle}>
+        {image && <StyledImage imageFieldData={image} />}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {widgetData?.backgroundIcon && (
+        <StyledImage imageFieldData={widgetData?.backgroundIcon} />
+      )}
+      {widgetData?.title?.text && (
+        <View style={styles.title}>
+          <StyledText textFieldData={widgetData?.title} />
+        </View>
+      )}
+      {widgetData.middleStrip && (
+        <TouchableOpacity
+          style={styles.stripContainer}
+          onPress={() => {
+            handleClick &&
+              widgetData?.footerButton?.cta &&
+              handleClick(widgetData?.footerButton?.cta);
+          }}
+          activeOpacity={1}
+        >
+          <Strip stripData={widgetData?.middleStrip} />
+        </TouchableOpacity>
+      )}
+      {widgetData.footerButton && (
+        <CtaButton
+          style={styles.footer}
+          onPress={() => {
+            handleClick &&
+              widgetData?.footerButton?.cta &&
+              handleClick(widgetData?.footerButton?.cta);
+          }}
+        >
+          {widgetData.footerButton?.title?.text && (
+            <StyledText textFieldData={widgetData.footerButton?.title} />
+          )}
+        </CtaButton>
+      )}
+    </View>
+  );
+};
--- a/components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts
+++ 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,
+  },
+});
--- a/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
+++ 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 (
+      <View style={styles.columnItem}>
+        {imageData?.url && <StyledImage imageFieldData={imageData} />}
+        {imageData?.url && title?.text && <View style={commonStyles.verticalSpacer16} />}
+        {title?.text && <StyledText textFieldData={title} />}
+        {title?.text && subtitle?.text && <View style={commonStyles.verticalSpacer4} />}
+        {subtitle?.text && <StyledText textFieldData={subtitle} />}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.columnContainer}>
+        {widgetData.title?.text && <StyledText textFieldData={widgetData.title} />}
+        {widgetData.title?.text && <View style={commonStyles.verticalSpacer24} />}
+        <View style={styles.rowContainer}>
+          <ColumnItem
+            imageData={widgetData.leftIcon}
+            title={widgetData.leftTitle}
+            subtitle={widgetData.leftSubtitle}
+          />
+          <ColumnItem
+            imageData={widgetData.rightIcon}
+            title={widgetData.rightTitle}
+            subtitle={widgetData.rightSubtitle}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts
+++ 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",
+  },
+});