TF-4122 Display CTA to download mobile application in main screen

web/index.html

@@ -37,7 +37,6 @@
 
   <script type="application/javascript" src="assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
   <script type="application/javascript" src="assets/packages/flutter_charset_detector_web/assets/web/jschardet.min.js" defer></script>
-  <script src="splash/splash.js"></script>
   <script src="worker_service/worker_service.js"></script>
   <script src="i18n/translater.js"></script>
   <script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>
@@ -48,7 +47,7 @@
     <img src="splash/img/icon_twp.png" alt="Twake Workplace logo" class="bottom-image">
 
     <div class="smart-banner">
-        <button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
+        <button class="button close" onClick="closeSmartBanner()">
             <picture class="close-icon">
                 <source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: light)">
                 <source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: dark)">
@@ -66,7 +65,7 @@
                 <div class="banner-description" id="banner-description-id"></div>
             </span>
             <span style="flex: 1"></span>
-            <span class="open-button" id="open-button-id" onClick= {handleOpenTwakeMailApp()}></span>
+            <span class="open-button" id="open-button-id" onClick="openTwakeMailApp()"></span>
         </div>
     </div>
 

web/splash/splash.js

@@ -1,5 +0,0 @@
-function removeSplashFromWeb() {
-  document.getElementById("splash")?.remove();
-  document.getElementById("splash-branding")?.remove();
-  document.body.style.background = "transparent";
-}

web/splash/style.css

@@ -29,32 +29,6 @@ body {
   width:100%; height:100%;
 }
 
-.cover {
-  display:block;
-  width:100%; height:100%;
-  object-fit: cover;
-}
-
-.bottom {
-  position: absolute;
-  bottom: 5%;
-  left: 50%;
-  -ms-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
-}
-
-.bottomLeft {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.bottomRight {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
 .bottom-image {
     position: absolute; /* Position relative to the .container */
     bottom: 40px; /* 40px from the bottom */

web/worker_service/style.css

@@ -1,6 +1,7 @@
 .smart-banner {
   display: none;
   position: fixed;
+  z-index: 9999999; /* always above Flutter canvas */
   left: 14px;
   right: 14px;
   border-radius: 10px;

web/worker_service/worker_service.js

@@ -1,66 +1,117 @@
 const androidStore = 'https://play.google.com/store/apps/details?id=com.linagora.android.teammail';
 const iosStore = 'https://apps.apple.com/app/twake-mail/id1587086189';
+const openAppDeepLink = 'twakemail.mobile://openapp';
 const iosPlatform = 'iOS';
 const androidPlatform = 'android';
 const otherPlatform = 'other';
 
-function handleContinueTwakeMailOnWeb() {
-  console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
-  closeSmartBanner();
-}
-
 function getPlatform() {
-  console.info('[TwakeMail] getPlatform(): ', navigator.userAgent);
+  const ua = navigator.userAgent || navigator.vendor || window.opera;
-  if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+  console.info('[TwakeMail] getPlatform():', ua);
-    return iosPlatform;
+  if (/iPhone|iPad|iPod/i.test(ua)) return iosPlatform;
-  }
+  if (/Android/i.test(ua)) return androidPlatform;
-  if (/Android/i.test(navigator.userAgent)) {
-    return androidPlatform;
-  }
   return otherPlatform;
 }
 
-function handleOpenTwakeMailApp() {
+function openTwakeMailApp() {
   const os = getPlatform();
   console.info('[TwakeMail] handleOpenTwakeMailApp() - OS:', os);
-  if (os === androidPlatform) {
+
-    document.location.replace(androidStore);
+  let fallbackTimer;
-  } else if (os === iosPlatform) {
+  let hiddenAt = null;
-    document.location.replace(iosStore);
+
+  const clearFallback = (reason) => {
+    if (fallbackTimer) clearTimeout(fallbackTimer);
+    console.info(`[TwakeMail] Cancel store redirect: ${reason}`);
+    window.removeEventListener('blur', onBlur);
+    document.removeEventListener('visibilitychange', onVisibility);
+    window.removeEventListener('pagehide', onPageHide);
+  };
+
+  const onVisibility = () => {
+    if (document.hidden) {
+      hiddenAt = Date.now();
+      clearFallback('document hidden (user left browser)');
     }
+  };
+
+  const onBlur = () => {
+    hiddenAt = Date.now();
+    clearFallback('window blurred (likely app opened)');
+  };
+
+  const onPageHide = () => clearFallback('page hidden');
+
+  document.addEventListener('visibilitychange', onVisibility);
+  window.addEventListener('blur', onBlur);
+  window.addEventListener('pagehide', onPageHide);
+
+  const tryOpen = (deeplink, storeUrl) => {
+    const start = Date.now();
+    window.location.href = deeplink;
+
+    // fallback only if still visible after 1500 ms AND page wasn’t hidden recently
+    fallbackTimer = setTimeout(() => {
+      if (!document.hidden && (!hiddenAt || Date.now() - hiddenAt > 800)) {
+        console.info('[TwakeMail] Deep link failed — redirecting to store.');
+        window.location.href = storeUrl;
+      } else {
+        console.info('[TwakeMail] App likely opened — skip store redirect.');
+      }
+    }, 1500);
+  };
+
+  if (os === androidPlatform) {
+    tryOpen(openAppDeepLink, androidStore);
+  } else if (os === iosPlatform) {
+    tryOpen(openAppDeepLink, iosStore);
+  } else {
+    console.info('[TwakeMail] Unsupported platform. No app open.');
+  }
+
+  closeSmartBanner();
 }
 
 function initialTmailApp() {
   const os = getPlatform();
   const originInUrl = window.location;
 
-  console.info('[TwakeMail] initialWorkerService(): OriginInUrl:', originInUrl);
+  console.info('[TwakeMail] initialTmailApp(): OriginInUrl:', originInUrl);
 
-  //   For desktop, we don't show the open on app popup
+  // Skip displaying the banner on desktop browsers
   if (os === otherPlatform || typeof window === 'undefined') {
+    console.info('[TwakeMail] Skipping smart-banner on desktop.');
     return;
   }
 
-  if (window.location.pathname.includes('/login')) {
+  // By default, show the banner on mobile
-    console.info('[TwakeMail] initialWorkerService(): Login callback');
+  showSmartBanner();
-    handleContinueTwakeMailOnWeb();
+
-  } else {
+  // Ensure the banner stays on top after Flutter re-renders
-    openSmartBanner();
+  const observer = new MutationObserver(() => {
-  }
+    const banner = document.querySelector('.smart-banner');
+    if (banner) banner.style.zIndex = '9999999';
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
 }
 
-function openSmartBanner() {
+function showSmartBanner() {
-  console.info('[TwakeMail] openSmartBanner(): Open the smart banner.');
+  console.info('[TwakeMail] showSmartBanner(): Displaying the smart banner.');
-  const smartBanner = document.querySelector(".smart-banner");
+  const smartBanner = document.querySelector('.smart-banner');
+  if (!smartBanner) return;
+
   smartBanner.style.display = "block";
-  document.body.style.overflow = "hidden";
+  smartBanner.style.zIndex = '9999999';
   smartBanner.style.top = "16px";
+  document.body.style.overflow = "hidden";
 }
 
 function closeSmartBanner() {
   console.info('[TwakeMail] closeSmartBanner(): Closing the smart banner.');
-  const smartBanner = document.querySelector(".smart-banner");
+  const smartBanner = document.querySelector('.smart-banner');
+  if (!smartBanner) return;
+
   smartBanner.style.display = "none";
-  document.body.style.overflow = "auto";
   smartBanner.style.top = 0;
+  document.body.style.overflow = "auto";
 }