FAB fix | TP-61793 | TP-61794 | TP-61795 (#10558) (#10580) (#10630)

App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx

@@ -55,8 +55,8 @@ const QuoteOfferScreen = ({
 
   const fabTextStyle = useAnimatedStyle(() => {
     return {
-      maxWidth: withTiming(
-        y.value < lastScrollPosition.value || y.value <= 0 ? "100%" : 0,
+      width: withTiming(
+        y.value < lastScrollPosition.value || y.value <= 0 ? 90 : 0,
         { duration: 100 }
       ),
       paddingRight: withTiming(

App/common/constants/StringConstant.ts

@@ -27,3 +27,4 @@ export const QUOTE_APOLOGY_BUTTON = "Buy new policy";
 export const QUOTE_PATCH_FAIL_TOAST = "Failed. Try again";
 export const QUOTE_ID = "quoteId";
 export const BUILD_CONFIG_DETAILS = "BUILD_CONFIG_DETAILS";
+export const SPACE_UNICODE = "\u00A0"

App/common/utilities/MiscUtils.ts

@@ -1,6 +1,6 @@
-
 import { CtaData } from "../interface";
 import { logToSentry } from "../hooks/useSentryLogging";
+import { SPACE_UNICODE } from "../constants/StringConstant";
 
 export function getScreenNameFromCtaData(ctaData: CtaData): string | undefined {
   const splitDeeplink = ctaData.url?.split("/");
@@ -48,7 +48,12 @@ export function updateValueByKeyPath<T>(
       currentObj[lastKey] = newValue;
     } catch (exception) {
       logToSentry(
-        `Key path not valid: ${keyPath} | Faulty key: ${lastKey} | MethodName: ${arguments.callee.name}`);
+        `Key path not valid: ${keyPath} | Faulty key: ${lastKey} | MethodName: ${arguments.callee.name}`
+      );
     }
   }
 }
+
+export const getTextWithHtmlSpace = (text?: string) => {
+  return text?.split(" ").join(SPACE_UNICODE);
+};

components/widgets/fab/FAB.tsx

@@ -25,8 +25,8 @@ 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";
+import { getTextWithHtmlSpace } from "../../../App/common/utilities/MiscUtils";
 
 const FAB = ({
   widgetData,
@@ -96,6 +96,7 @@ const FAB = ({
   });
 
   const isDraggable = widgetData?.properties?.isDraggable ?? true;
+  const buttonText = getTextWithHtmlSpace(widgetData?.buttonTitle?.text)
 
   const fabContent = (
     <Animated.View style={[styles.rootStyles, animatedRootStyles]}>
@@ -116,7 +117,9 @@ const FAB = ({
           )}
           {widgetData?.buttonTitle?.text && (
             <Animated.View style={[styles.buttonTitle, scrollStyle]}>
-              <StyledText textFieldData={widgetData?.buttonTitle} />
+              <Animated.Text style={widgetData?.buttonTitle?.textStyle}>
+                {buttonText}
+              </Animated.Text>
             </Animated.View>
           )}
           {widgetData.lottieData &&

components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx

@@ -115,7 +115,7 @@ const FooterWithCardWidget = ({
       : ButtonState.ENABLED;
 
   return (
-    <View>
+    <View style={styles.container}>
       {widgetData?.cardInfo?.title?.text &&
         widgetData?.cardInfo?.rightTitle?.text && (
           <TouchableOpacity onPress={cardAction} activeOpacity={1}>

components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts

@@ -1,27 +1,31 @@
 import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
+  container: {
+    flexDirection: "column",
+    shadowColor: "black",
+    shadowOpacity: 1,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: -16 },
+    elevation: 15,
+    borderRadius: 12,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: "hidden",
+  },
   cardContainer: {
     backgroundColor: "#E7F8EE",
     flexDirection: "row",
     justifyContent: "space-between",
     paddingVertical: 8,
     paddingHorizontal: 16,
-    borderRadius: 16,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    shadowColor: "black",
-    shadowOpacity: 0.26,
-    shadowOffset: { width: 0, height: 3 },
-    shadowRadius: 10,
-    elevation: 10,
   },
   rowContainer: {
     backgroundColor: "#FFFFFF",
     flexDirection: "row",
     justifyContent: "space-between",
     paddingBottom: 32,
-    paddingTop: 11,
+    paddingTop: 12,
     paddingHorizontal: 16,
   },
   roundedRowContainer: {
@@ -31,14 +35,6 @@ const styles = StyleSheet.create({
     paddingBottom: 32,
     paddingTop: 16,
     paddingHorizontal: 16,
-    borderRadius: 16,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    shadowColor: "black",
-    shadowOpacity: 0.26,
-    shadowOffset: { width: 0, height: 3 },
-    shadowRadius: 10,
-    elevation: 10,
   },
   centerTitleContainer: {
     flexDirection: "row",
@@ -46,14 +42,6 @@ const styles = StyleSheet.create({
     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,
   },
   greenSeparatorContainer: {
     paddingHorizontal: 16,