added install pwa modal

apps/amakrushi/src/components/HomePage/index.module.css

@@ -24,7 +24,7 @@
   font-weight: 700;
 }
 
-.voiceRecorder{
+.voiceRecorder {
   position: relative;
   margin: auto;
   top: 18%;
@@ -38,10 +38,11 @@
   left: 3px;
   right: 0;
   bottom: calc(40px + 1vh);
-  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out,
+    visibility 0.5s ease-in-out;
 }
 
-.invisible{
+.invisible {
   opacity: 0;
   transform: translateY(50px); /* Initial downward position */
   visibility: hidden;
@@ -53,7 +54,6 @@
   visibility: visible;
 }
 
-
 .buttonChoice {
   display: flex;
   align-items: center;
@@ -69,7 +69,7 @@
   margin-top: 2px;
 }
 
-.keyboard{
+.keyboard {
   margin: auto;
   cursor: pointer;
   position: relative;
@@ -109,7 +109,6 @@
   outline: none;
 }
 
-
 .inputBox.inputBoxOpen {
   width: 99%;
   left: 0;

apps/amakrushi/src/components/HomePage/index.tsx

@@ -22,7 +22,6 @@ import SendIcon from '../../assets/images/sendButton.png';
 import { useLocalization } from '../../hooks';
 import router from 'next/router';
 import Image from 'next/image';
-import { Button, Spinner } from '@chakra-ui/react';
 import toast from 'react-hot-toast';
 import { v4 as uuidv4 } from 'uuid';
 import RenderVoiceRecorder from '../recorder/RenderVoiceRecorder';
@@ -32,6 +31,7 @@ import DownTimePage from '../down-time-page';
 const HomePage: NextPage = () => {
   const context = useContext(AppContext);
   const t = useLocalization();
+
   const placeholder = useMemo(() => t('message.ask_ur_question'), [t]);
   const flags = useFlags([
     'en_example_ques_one',

apps/amakrushi/src/pages/_app.tsx

@@ -2,7 +2,7 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
 import ContextProvider from '../context/ContextProvider';
-import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import 'chatui/dist/index.css';
 import { Toaster } from 'react-hot-toast';
 import { useCookies } from 'react-cookie';
@@ -17,6 +17,7 @@ import { getToken } from 'firebase/messaging';
 import FcmNotification from '../utils/FcmNotification';
 import { logEvent } from 'firebase/analytics';
 import FeaturePopup from '../components/FeaturePopup';
+import { Button, Modal } from '@material-ui/core';
 
 const LaunchPage = dynamic(() => import('../components/LaunchPage'), {
   ssr: false,
@@ -38,6 +39,8 @@ const App = ({ Component, pageProps }: AppProps) => {
   const [launch, setLaunch] = useState(true);
   const [cookie, setCookie, removeCookie] = useCookies();
   const [flagsmithState, setflagsmithState] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const deferredPromptRef = useRef<any>(null);
 
   useEffect(() => {
     const isEventLogged = sessionStorage.getItem('isSplashScreenLogged');
@@ -147,6 +150,39 @@ const App = ({ Component, pageProps }: AppProps) => {
     globalThis.console.log = () => {};
   }
 
+  // For install PWA dialog box
+  useEffect(() => {
+    if (localStorage.getItem('installPwa') !== 'true') {
+      // Check if the browser has the install event
+      if ('serviceWorker' in navigator && 'PushManager' in window) {
+        setModalOpen(true);
+        window.addEventListener('beforeinstallprompt', (e) => {
+          e.preventDefault();
+          deferredPromptRef.current = e;
+        });
+      }
+    }
+  }, []);
+
+  const closeAndSetLocalStorage = () => {
+    setModalOpen(false);
+    localStorage.setItem('installPwa', 'true');
+  };
+
+  const openInstallPrompt = () => {
+    closeAndSetLocalStorage();
+    if (deferredPromptRef.current) {
+      deferredPromptRef.current.prompt();
+      deferredPromptRef.current.userChoice.then((choiceResult: any) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('App installed');
+        } else {
+          console.log('App installation declined');
+        }
+      });
+    }
+  };
+
   if (launch || !flagsmithState) {
     return <LaunchPage />;
   } else {
@@ -157,6 +193,40 @@ const App = ({ Component, pageProps }: AppProps) => {
             <div style={{ height: '100%' }}>
               <FcmNotification />
               <FeaturePopup />
+              {modalOpen && (
+                <Modal
+                  open={modalOpen}
+                  onClose={closeAndSetLocalStorage}
+                  aria-labelledby="install-modal-title"
+                  aria-describedby="install-modal-description"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  <div
+                    style={{
+                      backgroundColor: 'lightgreen',
+                      padding: '20px',
+                      borderRadius: '5px',
+                      textAlign: 'center',
+                    }}>
+                    <h2 id="install-modal-title">Install App</h2>
+                    <p id="install-modal-description">
+                      Click the button to install the app.
+                    </p>
+                    <Button
+                      onClick={openInstallPrompt}
+                      style={{
+                        marginTop: '20px',
+                        backgroundColor: 'var(--secondarygreen)',
+                        color: 'white',
+                      }}>
+                      Install
+                    </Button>
+                  </div>
+                </Modal>
+              )}
               <Toaster position="top-center" reverseOrder={false} />
               <NavBar />
               <SafeHydrate>
@@ -178,4 +248,4 @@ const App = ({ Component, pageProps }: AppProps) => {
 //   return { flagsmithState: flagsmith.getState() };
 // };
 
-export default App
+export default App;