From df76caecdd08503986aa7bd5494661104775b073 Mon Sep 17 00:00:00 2001
From: Aman Chaturvedi <aman.chaturvedi@navi.com>
Date: Wed, 11 Sep 2024 15:41:20 +0530
Subject: [PATCH] TP-80461 | App update screen added

---
 src/assets/icons/CosmosLargeIcon.tsx | 51 ++++++++++++++++++++++++++++
 src/common/AppUpdate.tsx             | 46 +++++++++++++++++++++++++
 src/common/BlockerScreen.tsx         | 10 ++----
 3 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/icons/CosmosLargeIcon.tsx
 create mode 100644 src/common/AppUpdate.tsx

diff --git a/src/assets/icons/CosmosLargeIcon.tsx b/src/assets/icons/CosmosLargeIcon.tsx
new file mode 100644
index 00000000..bdf75723
--- /dev/null
+++ b/src/assets/icons/CosmosLargeIcon.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Svg, { G, Mask, Path, Defs, ClipPath, Rect } from 'react-native-svg';
+
+const CosmosLargeIcon = () => (
+  <Svg width={90} height={90} viewBox="0 0 90 90" fill="none">
+    <G clipPath="url(#clip0_1734_11059)">
+      <Mask id="mask0_1734_11059" maskUnits="userSpaceOnUse" x={0} y={0} width={90} height={90}>
+        <Path d="M90 0H0V90H90V0Z" fill="white" />
+      </Mask>
+      <G mask="url(#mask0_1734_11059)">
+        <Path d="M90 0H0V90H90V0Z" fill="white" />
+        <Path d="M90 0H0V90H90V0Z" fill="#1D2678" />
+        <Path
+          d="M14.8164 65.1048C14.8164 62.2809 16.9831 60.2454 19.7415 60.2454C23.5507 60.2454 24.339 63.5954 24.339 63.5954H22.8278C22.8278 63.5954 22.1049 61.691 19.7415 61.691C17.7715 61.691 16.3914 63.0693 16.3914 65.1066C16.3914 67.1441 17.7697 68.5224 19.7415 68.5224C22.1722 68.5224 22.8932 66.4213 22.8932 66.4213H24.4046C24.4046 66.4213 23.4195 69.968 19.7415 69.968C16.9831 69.968 14.8164 67.9325 14.8164 65.1084V65.1048Z"
+          fill="white"
+        />
+        <Path
+          d="M25.3945 65.1048C25.3945 62.3464 27.4956 60.2451 30.3197 60.2451C33.1437 60.2451 35.2448 62.3464 35.2448 65.1048C35.2448 67.8633 33.1437 69.9644 30.3197 69.9644C27.4956 69.9644 25.3945 67.8633 25.3945 65.1048ZM33.6698 65.1048C33.6698 63.0692 32.2897 61.689 30.3197 61.689C28.3496 61.689 26.9695 63.0675 26.9695 65.1048C26.9695 67.1421 28.3496 68.5205 30.3197 68.5205C32.2897 68.5205 33.6698 67.1403 33.6698 65.1048Z"
+          fill="white"
+        />
+        <Path
+          d="M36.2305 66.9438H37.8072C37.8072 66.9438 38.0695 68.5862 40.105 68.5862C41.5507 68.5862 42.1406 67.9943 42.1406 67.2059C42.1406 65.2359 36.6237 66.2864 36.6237 63.0019C36.6237 61.5561 37.9366 60.2434 40.0395 60.2434C43.2568 60.2434 43.6518 62.9364 43.6518 62.9364H42.075C42.075 62.9364 41.8785 61.6235 40.0395 61.6235C38.7923 61.6235 38.2004 62.2153 38.2004 62.9364C38.2004 64.9064 43.7173 63.9213 43.7173 67.1404C43.7173 68.6516 42.4046 69.9645 40.105 69.9645C36.6237 69.9645 36.2305 66.9438 36.2305 66.9438Z"
+          fill="white"
+        />
+        <Path
+          d="M45.1619 60.5073H47.6582L50.1545 66.2209H50.4821L52.9784 60.5073H55.4091V69.7021H53.8979V63.2657L54.029 62.0185H53.8979L51.4672 67.601H49.1021L46.6714 62.0185H46.5402L46.6714 63.2657V69.7021H45.1602V60.5073H45.1619Z"
+          fill="white"
+        />
+        <Path
+          d="M56.8555 65.1048C56.8555 62.3464 58.9566 60.2451 61.7807 60.2451C64.6046 60.2451 66.7057 62.3464 66.7057 65.1048C66.7057 67.8633 64.6046 69.9644 61.7807 69.9644C58.9566 69.9644 56.8555 67.8633 56.8555 65.1048ZM65.1307 65.1048C65.1307 63.0692 63.7507 61.689 61.7807 61.689C59.8105 61.689 58.4305 63.0675 58.4305 65.1048C58.4305 67.1421 59.8105 68.5205 61.7807 68.5205C63.7507 68.5205 65.1307 67.1403 65.1307 65.1048Z"
+          fill="white"
+        />
+        <Path
+          d="M67.6914 66.9438H69.2682C69.2682 66.9438 69.5304 68.5862 71.566 68.5862C73.0118 68.5862 73.6017 67.9943 73.6017 67.2059C73.6017 65.2359 68.0848 66.2864 68.0848 63.0019C68.0848 61.5561 69.3975 60.2434 71.5006 60.2434C74.7177 60.2434 75.1129 62.9364 75.1129 62.9364H73.5361C73.5361 62.9364 73.3394 61.6235 71.5006 61.6235C70.2532 61.6235 69.6616 62.2153 69.6616 62.9364C69.6616 64.9064 75.1785 63.9213 75.1785 67.1404C75.1785 68.6516 73.8657 69.9645 71.566 69.9645C68.0848 69.9645 67.6914 66.9438 67.6914 66.9438Z"
+          fill="white"
+        />
+        <Path
+          d="M44.3499 31.3462C43.7121 30.7368 42.8652 30.3984 41.9847 30.3984H29.3477V51.1018H36.3527V37.0917H43.3578V48.7669C43.3578 50.0566 44.403 51.1018 45.6928 51.1018H50.3628V38.5568C50.3628 37.6215 49.9802 36.7267 49.3034 36.08L44.3499 31.3462Z"
+          fill="#22D081"
+        />
+        <Path d="M43.3555 19.9688V26.662H53.7853V37.0916H60.4785V19.9688H43.3555Z" fill="#22D081" />
+      </G>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_1734_11059">
+        <Rect width={90} height={90} rx={16} fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default CosmosLargeIcon;
diff --git a/src/common/AppUpdate.tsx b/src/common/AppUpdate.tsx
new file mode 100644
index 00000000..9688b32f
--- /dev/null
+++ b/src/common/AppUpdate.tsx
@@ -0,0 +1,46 @@
+import { StyleSheet, View } from 'react-native';
+import React from 'react';
+import Text from '@rn-ui-lib/components/Text';
+import Layout from '@screens/layout/Layout';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import NavigationHeader from '@rn-ui-lib/components/NavigationHeader';
+import CosmosLargeIcon from '@assets/icons/CosmosLargeIcon';
+import Button from '@rn-ui-lib/components/Button';
+
+interface IAppUpdate {
+  onAppUpdate: () => void;
+}
+
+const AppUpdate: React.FC<IAppUpdate> = ({ onAppUpdate }) => {
+  return (
+    <Layout>
+      <View style={[GenericStyles.fill]}>
+        <NavigationHeader title="App Update" titleStyle={GenericStyles.pl16} />
+        <View style={[GenericStyles.fill, GenericStyles.centerAligned, GenericStyles.ph24]}>
+          <CosmosLargeIcon />
+          <Text dark bold style={styles.heading}>
+            We are better than ever!
+          </Text>
+          <Text light style={GenericStyles.centerAlignedText}>
+            We have launched a new and improved version. Please update the COSMOS app to get the
+            best experience.
+          </Text>
+        </View>
+        <View style={[GenericStyles.elevation10, GenericStyles.p16, GenericStyles.whiteBackground]}>
+          <Button title="Update now" onPress={onAppUpdate} style={GenericStyles.w100} />
+        </View>
+      </View>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  heading: {
+    fontWeight: 'bold',
+    fontSize: 20,
+    marginTop: 24,
+    marginBottom: 16,
+  },
+});
+
+export default AppUpdate;
diff --git a/src/common/BlockerScreen.tsx b/src/common/BlockerScreen.tsx
index 0a4ccfd4..60c4d8ce 100644
--- a/src/common/BlockerScreen.tsx
+++ b/src/common/BlockerScreen.tsx
@@ -25,6 +25,7 @@ import {
   installApk,
   openFallbackLonghornLink,
 } from '@actions/appDownloadAction';
+import AppUpdate from './AppUpdate';
 
 interface IBlockerScreen {
   children?: ReactNode;
@@ -145,14 +146,7 @@ const BlockerScreen = (props: IBlockerScreen) => {
   };
 
   if (shouldUpdate) {
-    const { heading, instructions } = BLOCKER_SCREEN_DATA.UNINSTALL_APP;
-    return (
-      <BlockerInstructions
-        heading={heading}
-        instructions={instructions}
-        actionBtn={{ title: 'Update app', action: handleAppUpdate }}
-      />
-    );
+    return <AppUpdate onAppUpdate={handleAppUpdate} />;
   }
 
   if (!isTimeSynced) {