From f164d3e4727907d6921920a1532fe60cdefe36bf Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <tilak.gondi@rakuten.com>
Date: Tue, 5 Mar 2024 12:56:32 +0900
Subject: [PATCH 1/7] MiniApp FinishedLoading implementation

---
 js-miniapp-bridge/src/common-bridge.ts | 16 +++++++++++
 js-miniapp-sample/src/pages/landing.js | 37 +++++++++++++++++++++++++-
 js-miniapp-sdk/src/modules/utils.ts    |  9 +++++++
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/js-miniapp-bridge/src/common-bridge.ts b/js-miniapp-bridge/src/common-bridge.ts
index c40a373f..2fe05484 100644
--- a/js-miniapp-bridge/src/common-bridge.ts
+++ b/js-miniapp-bridge/src/common-bridge.ts
@@ -735,6 +735,22 @@ export class MiniAppBridge {
     });
   }
 
+  /**
+   * Associating miniAppFinishedLoading function to MiniAppBridge object.
+   * @returns Promise resolve with string
+   * Host app can implement an iterface miniAppFinishedLoading to perform any operations after the miniapp is loaded.
+   */
+  miniAppFinishedLoading() {
+    return new Promise<string>((resolve, reject) => {
+      return this.executor.exec(
+        'miniAppFinishedLoading',
+        {},
+        success => resolve(success),
+        error => reject(error)
+      );
+    });
+  }
+
   /**
    * This will retrieve the list of products details available for In-App Purchases associated with Mini App in the Platform.
    * @returns List of In-app purchase products
diff --git a/js-miniapp-sample/src/pages/landing.js b/js-miniapp-sample/src/pages/landing.js
index a1eac4b5..d9512103 100644
--- a/js-miniapp-sample/src/pages/landing.js
+++ b/js-miniapp-sample/src/pages/landing.js
@@ -10,6 +10,7 @@ import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
 import SettingsApplicationsRoundedIcon from '@mui/icons-material/SettingsApplicationsRounded';
 import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import SystemUpdateIcon from '@mui/icons-material/SystemUpdate';
+import MobileHostAppIcon from '@mui/icons-material/SendToMobile';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -82,6 +83,7 @@ const useStyles = makeStyles((theme) => ({
 const Landing = (props: LandingProps) => {
   const classes = useStyles();
   const [darkMode, setDarkMode] = useState(false);
+  const [hostNotified, setHostNotified] = useState(false);
 
   useEffect(() => {
     try {
@@ -101,9 +103,19 @@ const Landing = (props: LandingProps) => {
     }
   }, [props]);
 
+  useEffect(() => {
+    try {
+      if (document.readyState === 'complete') {
+        miniAppDidFinishLoad();
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
   function getDarkMode() {
     MiniApp.miniappUtils
-      .isDarkMode()
+      .isDarkModes()
       .then((response) => {
         setDarkMode(response);
       })
@@ -112,6 +124,18 @@ const Landing = (props: LandingProps) => {
       });
   }
 
+  function miniAppDidFinishLoad() {
+    MiniApp.miniappUtils
+      .miniAppFinishedLoading()
+      .then((response) => {
+        console.log(response);
+        setHostNotified(true);
+      })
+      .catch((miniAppError) => {
+        console.log('miniAppFinishedLoading - Error: ', miniAppError);
+      });
+  }
+
   return (
     <CardContent className={classes.content}>
       <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
@@ -223,6 +247,17 @@ const Landing = (props: LandingProps) => {
             secondary={String(props.hostBuildType) || '-'}
           />
         </ListItem>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <MobileHostAppIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="HostApp Notified For Missing Assets:"
+            secondary={String(hostNotified)}
+          />
+        </ListItem>
         <ListItem>
           <ListItemAvatar>
             <Avatar>
diff --git a/js-miniapp-sdk/src/modules/utils.ts b/js-miniapp-sdk/src/modules/utils.ts
index d7156935..6ae1760f 100644
--- a/js-miniapp-sdk/src/modules/utils.ts
+++ b/js-miniapp-sdk/src/modules/utils.ts
@@ -22,6 +22,12 @@ export interface MiniAppUtilsProvider {
    */
   closeMiniApp(withConfirmation: boolean): Promise<string>;
 
+  /**
+   * Miniapp can notify the host app that it has finished loading using this call.
+   * Host app can implement this interface to perform any other actions after the miniapp has loaded.
+   */
+  miniAppFinishedLoading(): Promise<string>;
+
   /**
    * Interface that is used to get the Color theme used in the Host application
    */
@@ -44,6 +50,9 @@ export class MiniAppUtils implements MiniAppUtilsProvider {
   closeMiniApp(withConfirmation: boolean): Promise<string> {
     return getBridge().closeMiniApp(withConfirmation);
   }
+  miniAppFinishedLoading(): Promise<string> {
+    return getBridge().miniAppFinishedLoading();
+  }
   setCloseAlert(alertInfo: CloseAlertInfo): Promise<string> {
     return getBridge().setCloseAlert(alertInfo);
   }

From 10d378e0b9930e4508d9cffd05bcf29693ed7316 Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <tilak.gondi@rakuten.com>
Date: Thu, 7 Mar 2024 11:29:00 +0900
Subject: [PATCH 2/7] Update landing.js

---
 js-miniapp-sample/src/pages/landing.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js-miniapp-sample/src/pages/landing.js b/js-miniapp-sample/src/pages/landing.js
index d9512103..a0d03282 100644
--- a/js-miniapp-sample/src/pages/landing.js
+++ b/js-miniapp-sample/src/pages/landing.js
@@ -115,7 +115,7 @@ const Landing = (props: LandingProps) => {
 
   function getDarkMode() {
     MiniApp.miniappUtils
-      .isDarkModes()
+      .isDarkMode()
       .then((response) => {
         setDarkMode(response);
       })
@@ -254,7 +254,7 @@ const Landing = (props: LandingProps) => {
             </Avatar>
           </ListItemAvatar>
           <ListItemText
-            primary="HostApp Notified For Missing Assets:"
+            primary="HostApp Notified:"
             secondary={String(hostNotified)}
           />
         </ListItem>

From bb00ebc7acbcc7ef15c35281a040d251f17bb12f Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <115203844+GondiTilak@users.noreply.github.com>
Date: Thu, 7 Mar 2024 13:09:56 +0900
Subject: [PATCH 3/7] Update js-miniapp-bridge/src/common-bridge.ts

Co-authored-by: leojoseph.r <58416454+rleojoseph@users.noreply.github.com>
---
 js-miniapp-bridge/src/common-bridge.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js-miniapp-bridge/src/common-bridge.ts b/js-miniapp-bridge/src/common-bridge.ts
index 2fe05484..e4e9bf10 100644
--- a/js-miniapp-bridge/src/common-bridge.ts
+++ b/js-miniapp-bridge/src/common-bridge.ts
@@ -744,7 +744,7 @@ export class MiniAppBridge {
     return new Promise<string>((resolve, reject) => {
       return this.executor.exec(
         'miniAppFinishedLoading',
-        {},
+        null,
         success => resolve(success),
         error => reject(error)
       );

From 554e96801520603f90aa12caeafd0a3fff50fecd Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <tilak.gondi@rakuten.com>
Date: Thu, 7 Mar 2024 17:59:16 +0900
Subject: [PATCH 4/7] Updating change log and readme files.

---
 js-miniapp-sample/src/pages/landing.js |  1 -
 js-miniapp-sdk/CHANGELOG.md            |  1 +
 js-miniapp-sdk/README.md               | 26 ++++++++++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/js-miniapp-sample/src/pages/landing.js b/js-miniapp-sample/src/pages/landing.js
index a0d03282..cc9bb8f9 100644
--- a/js-miniapp-sample/src/pages/landing.js
+++ b/js-miniapp-sample/src/pages/landing.js
@@ -128,7 +128,6 @@ const Landing = (props: LandingProps) => {
     MiniApp.miniappUtils
       .miniAppFinishedLoading()
       .then((response) => {
-        console.log(response);
         setHostNotified(true);
       })
       .catch((miniAppError) => {
diff --git a/js-miniapp-sdk/CHANGELOG.md b/js-miniapp-sdk/CHANGELOG.md
index e52f9f06..866ea049 100644
--- a/js-miniapp-sdk/CHANGELOG.md
+++ b/js-miniapp-sdk/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### 1.20.0 (2024-xx-xx)
 - **Feature:** Added new interfaces `set(key: string, value: string)`, `get(key: string)`, `remove(key: string)`, `clearMiniAppPreferences()` which uses the native storage features like Shared Preferences/User defaults to store anything from MiniApp.
 - **Feature:** Updated HostEnvironmentInfo to have `hostBuildType`, `deviceToken` and `pushToken`
+- **Feature:** Added new interface `miniAppFinishedLoading()` which can be used by miniapp to notify the host app that it has finished loading.
 - **Fix:** Few Contacts with special characters is failed to retrieve, its fixed now
 
 ### 1.19.0 (2023-11-02)
diff --git a/js-miniapp-sdk/README.md b/js-miniapp-sdk/README.md
index e2b0964a..5f1d829a 100644
--- a/js-miniapp-sdk/README.md
+++ b/js-miniapp-sdk/README.md
@@ -1186,6 +1186,32 @@ import MiniApp from 'js-miniapp-sdk';
   MiniApp.miniappUtils.sendAnalytics(analyticsInfo);
 ```
 
+<div id='miniapp-finished-loading'/>
+
+## MiniApp Finished Loading <small style="color:green;font-size: 12px">Available from v1.20.0</small>
+
+<dl>
+<dd>
+
+**API:** [Platform.isDarkMode](api/interfaces/miniapputilsprovider.html#miniAppFinishedLoading)
+
+Using the following interface the Miniapp can notify the host app that it has finished loading.
+
+```javascript
+import MiniApp from 'js-miniapp-sdk';
+
+MiniApp.miniappUtils
+  .miniAppFinishedLoading()
+  .then((response) => {
+    console.log(response);
+  })
+  .catch((miniAppError) => {
+    console.log('miniAppFinishedLoading - Error: ', miniAppError);
+  });
+```
+
+</dd>
+
 <div id='get-cookies'/>
 
 ## Get Cookies from host application <small style="color:green;font-size: 12px">Available from v1.19.0</small>

From 33012d912638c3135e4e22b36437d13de00aeaaa Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <tilak.gondi@rakuten.com>
Date: Fri, 8 Mar 2024 17:13:58 +0900
Subject: [PATCH 5/7] Updated as per PR comments.

---
 js-miniapp-bridge/src/common-bridge.ts |  2 +-
 js-miniapp-sample/src/App.js           | 45 ++++++++++++++++++++++++++
 js-miniapp-sample/src/pages/landing.js | 33 -------------------
 js-miniapp-sdk/README.md               |  3 +-
 4 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/js-miniapp-bridge/src/common-bridge.ts b/js-miniapp-bridge/src/common-bridge.ts
index e4e9bf10..19edfa16 100644
--- a/js-miniapp-bridge/src/common-bridge.ts
+++ b/js-miniapp-bridge/src/common-bridge.ts
@@ -738,7 +738,7 @@ export class MiniAppBridge {
   /**
    * Associating miniAppFinishedLoading function to MiniAppBridge object.
    * @returns Promise resolve with string
-   * Host app can implement an iterface miniAppFinishedLoading to perform any operations after the miniapp is loaded.
+   * Host app can implement an interface miniAppFinishedLoading to perform any operations after the miniapp is loaded.
    */
   miniAppFinishedLoading() {
     return new Promise<string>((resolve, reject) => {
diff --git a/js-miniapp-sample/src/App.js b/js-miniapp-sample/src/App.js
index 78425825..7400b91f 100644
--- a/js-miniapp-sample/src/App.js
+++ b/js-miniapp-sample/src/App.js
@@ -3,26 +3,71 @@ import ConsoleView from './pages/console-view';
 
 import { makeStyles, ThemeProvider } from '@material-ui/core';
 import { Provider } from 'react-redux';
+import { useEffect, useState } from 'react';
 
 import Home from './pages/home';
 import store from './services/store';
 import Theme from './theme';
+import MiniApp from 'js-miniapp-sdk';
 
 const useStyles = makeStyles((theme) => ({
   App: {
     width: '100%',
     textAlign: 'center',
   },
+  toastStyle: {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    padding: '10px',
+    backgroundColor: '#444',
+    color: 'white',
+    borderRadius: '5px',
+    zIndex: '9999',
+    textAlign: 'center'
+  },
 }));
 
+
 function App() {
   const classes = useStyles();
+  const [isToastVisible, setToastVisible] = useState(false);
+  
+  useEffect(() => {
+    try {
+      if (document.readyState === 'complete') {
+        miniAppDidFinishLoad();
+        console.log("Called Miniapp FinishedLoad()")
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
+  function miniAppDidFinishLoad() {
+    MiniApp.miniappUtils
+      .miniAppFinishedLoading()
+      .then((response) => {
+        console.log(response);
+        setToastVisible(true);
+        const timer = setTimeout(() => setToastVisible(false), 5000);
+        return () => clearTimeout(timer);
+      })
+      .catch((miniAppError) => {
+        console.log('miniAppFinishedLoading - Error: ', miniAppError);
+      });
+  }
+
   return (
     <Provider store={store}>
       <ThemeProvider theme={Theme}>
         <div className={classes.App}>
           <Home />
           <ConsoleView />
+          {isToastVisible && (
+            <div className={classes.toastStyle}>HostApp was notified successfully.</div>
+          )}
         </div>
       </ThemeProvider>
     </Provider>
diff --git a/js-miniapp-sample/src/pages/landing.js b/js-miniapp-sample/src/pages/landing.js
index cc9bb8f9..8aef3905 100644
--- a/js-miniapp-sample/src/pages/landing.js
+++ b/js-miniapp-sample/src/pages/landing.js
@@ -10,7 +10,6 @@ import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
 import SettingsApplicationsRoundedIcon from '@mui/icons-material/SettingsApplicationsRounded';
 import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import SystemUpdateIcon from '@mui/icons-material/SystemUpdate';
-import MobileHostAppIcon from '@mui/icons-material/SendToMobile';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -103,16 +102,6 @@ const Landing = (props: LandingProps) => {
     }
   }, [props]);
 
-  useEffect(() => {
-    try {
-      if (document.readyState === 'complete') {
-        miniAppDidFinishLoad();
-      }
-    } catch (e) {
-      console.log(e);
-    }
-  }, []);
-
   function getDarkMode() {
     MiniApp.miniappUtils
       .isDarkMode()
@@ -124,17 +113,6 @@ const Landing = (props: LandingProps) => {
       });
   }
 
-  function miniAppDidFinishLoad() {
-    MiniApp.miniappUtils
-      .miniAppFinishedLoading()
-      .then((response) => {
-        setHostNotified(true);
-      })
-      .catch((miniAppError) => {
-        console.log('miniAppFinishedLoading - Error: ', miniAppError);
-      });
-  }
-
   return (
     <CardContent className={classes.content}>
       <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
@@ -246,17 +224,6 @@ const Landing = (props: LandingProps) => {
             secondary={String(props.hostBuildType) || '-'}
           />
         </ListItem>
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <MobileHostAppIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="HostApp Notified:"
-            secondary={String(hostNotified)}
-          />
-        </ListItem>
         <ListItem>
           <ListItemAvatar>
             <Avatar>
diff --git a/js-miniapp-sdk/README.md b/js-miniapp-sdk/README.md
index 5f1d829a..de06b091 100644
--- a/js-miniapp-sdk/README.md
+++ b/js-miniapp-sdk/README.md
@@ -144,6 +144,7 @@ Here is the example of manifest. You can also see [it](https://github.com/rakute
 - [Send Analytics](#send-analytics)
 - [Get Cookies](#get-cookies)
 - [MiniApp Storage][#miniapp-storage]
+- [MiniApp Finished Loading](#miniapp-finished-loading)
 
 
 ### Retrieve a unique ID
@@ -1193,7 +1194,7 @@ import MiniApp from 'js-miniapp-sdk';
 <dl>
 <dd>
 
-**API:** [Platform.isDarkMode](api/interfaces/miniapputilsprovider.html#miniAppFinishedLoading)
+**API:** [Platform.miniAppFinishedLoading](api/interfaces/miniapputilsprovider.html#miniAppFinishedLoading)
 
 Using the following interface the Miniapp can notify the host app that it has finished loading.
 

From ff6b9f04c266a14c36cf6251516031cea3919003 Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <tilak.gondi@rakuten.com>
Date: Fri, 8 Mar 2024 17:25:43 +0900
Subject: [PATCH 6/7] Fix Lint issue and removed unused lines.

---
 js-miniapp-sample/src/App.js           | 13 +++++++------
 js-miniapp-sample/src/pages/landing.js |  1 -
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js-miniapp-sample/src/App.js b/js-miniapp-sample/src/App.js
index 7400b91f..772fcc5f 100644
--- a/js-miniapp-sample/src/App.js
+++ b/js-miniapp-sample/src/App.js
@@ -25,20 +25,19 @@ const useStyles = makeStyles((theme) => ({
     color: 'white',
     borderRadius: '5px',
     zIndex: '9999',
-    textAlign: 'center'
+    textAlign: 'center',
   },
 }));
 
-
 function App() {
   const classes = useStyles();
   const [isToastVisible, setToastVisible] = useState(false);
-  
+
   useEffect(() => {
     try {
       if (document.readyState === 'complete') {
         miniAppDidFinishLoad();
-        console.log("Called Miniapp FinishedLoad()")
+        console.log('Called Miniapp FinishedLoad()');
       }
     } catch (e) {
       console.log(e);
@@ -49,7 +48,7 @@ function App() {
     MiniApp.miniappUtils
       .miniAppFinishedLoading()
       .then((response) => {
-        console.log(response);
+        console.log('miniAppFinishedLoading(): ', response);
         setToastVisible(true);
         const timer = setTimeout(() => setToastVisible(false), 5000);
         return () => clearTimeout(timer);
@@ -66,7 +65,9 @@ function App() {
           <Home />
           <ConsoleView />
           {isToastVisible && (
-            <div className={classes.toastStyle}>HostApp was notified successfully.</div>
+            <div className={classes.toastStyle}>
+              HostApp was notified successfully.
+            </div>
           )}
         </div>
       </ThemeProvider>
diff --git a/js-miniapp-sample/src/pages/landing.js b/js-miniapp-sample/src/pages/landing.js
index 8aef3905..a1eac4b5 100644
--- a/js-miniapp-sample/src/pages/landing.js
+++ b/js-miniapp-sample/src/pages/landing.js
@@ -82,7 +82,6 @@ const useStyles = makeStyles((theme) => ({
 const Landing = (props: LandingProps) => {
   const classes = useStyles();
   const [darkMode, setDarkMode] = useState(false);
-  const [hostNotified, setHostNotified] = useState(false);
 
   useEffect(() => {
     try {

From e71ad7f3f97d63c0088aee13797b83bef9fc4d69 Mon Sep 17 00:00:00 2001
From: "tilak.gondi" <tilak.gondi@rakuten.com>
Date: Fri, 8 Mar 2024 17:32:00 +0900
Subject: [PATCH 7/7] Update App.js

Fixed sonar cloud code smells.
---
 js-miniapp-sample/src/App.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/js-miniapp-sample/src/App.js b/js-miniapp-sample/src/App.js
index 772fcc5f..1bd97e1f 100644
--- a/js-miniapp-sample/src/App.js
+++ b/js-miniapp-sample/src/App.js
@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ConsoleView from './pages/console-view';
 
 import { makeStyles, ThemeProvider } from '@material-ui/core';
 import { Provider } from 'react-redux';
-import { useEffect, useState } from 'react';
 
 import Home from './pages/home';
 import store from './services/store';
@@ -31,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
 
 function App() {
   const classes = useStyles();
-  const [isToastVisible, setToastVisible] = useState(false);
+  const [toastVisible, setToastVisible] = useState(false);
 
   useEffect(() => {
     try {
@@ -64,7 +63,7 @@ function App() {
         <div className={classes.App}>
           <Home />
           <ConsoleView />
-          {isToastVisible && (
+          {toastVisible && (
             <div className={classes.toastStyle}>
               HostApp was notified successfully.
             </div>