[MALI-1458] Get feature list changes (#296)

* [MALI-1458] Get feature list changes

* Prettier fix

* SonarCloud fix

js-miniapp-bridge/src/common-bridge.ts

@@ -883,6 +883,23 @@ export class MiniAppBridge {
   clearMiniAppPreferences() {
     return this.preferences.clearMiniAppPreferences();
   }
+
+  /**
+   * This interface will get you the list of all features that is supported by the SDK and Host application
+   * @returns List of features for eg., ["GET_UNIQUE_ID", "GET_USERNAME", "GET_PROFILE_PHOTO", "IS_DARK_MODE"]
+   */
+  getFeatureList() {
+    return new Promise<string[]>((resolve, reject) => {
+      return this.executor.exec(
+        'getFeatureList',
+        null,
+        response => {
+          resolve(JSON.parse(response) as string[]);
+        },
+        error => reject(parseMiniAppError(error))
+      );
+    });
+  }
 }
 
 /**

js-miniapp-sample/src/pages/feature-list.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+
+import { makeStyles } from '@material-ui/core';
+import MiniApp from 'js-miniapp-sdk';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Brightness1Icon from '@mui/icons-material/Brightness1';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    height: '25%',
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    fontSize: 18,
+    color: theme.color.primary,
+    fontWeight: 'bold',
+  },
+  card: {
+    marginTop: '40px',
+  },
+  actions: {
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  button: {
+    marginTop: '20px',
+    width: '80%',
+    maxWidth: 280,
+  },
+  textfield: {
+    width: '80%',
+    maxWidth: 300,
+    '& input': {
+      color: theme.color.primary,
+      lineHeight: '1.5em',
+      fontSize: '1.2em',
+      background: 'white',
+    },
+  },
+  scrollable: {
+    overflowY: 'auto',
+    width: '100%',
+    paddingBottom: 20,
+  },
+}));
+
+function FeatureListComponent() {
+  const classes = useStyles();
+  const [featureList, setFeatureList] = useState();
+  useEffect(() => {
+    try {
+      getFeatureList();
+    } catch (e) {
+      console.log(e);
+    }
+  });
+
+  function getFeatureList() {
+    MiniApp.miniappUtils
+      .getFeatureList()
+      .then((response) => {
+        setFeatureList(response);
+        console.log('getFeatureList SUCCESS: ', response);
+      })
+      .catch((error) => {
+        console.log('getFeatureList ERROR: ', error);
+      });
+  }
+
+  return (
+    <div className={classes.scrollable}>
+      {featureList &&
+        featureList.map((item) => (
+          <ListItem key={item} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                <Brightness1Icon />
+              </ListItemIcon>
+              <ListItemText primary={item} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+    </div>
+  );
+}
+
+export default FeatureListComponent;

js-miniapp-sample/src/routes.js

@@ -23,6 +23,7 @@ import ShareIcon from '@material-ui/icons/Share';
 import StorageIcon from '@material-ui/icons/Storage';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
 import ArtTrackIcon from '@material-ui/icons/ArtTrack';
+import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
 
 import Ads from './pages/ads';
 import { CloseConfirmAlert } from './pages/app-close-alert';
@@ -47,6 +48,7 @@ import WebLocation from './pages/web-location';
 import WindowActions from './pages/window-actions';
 import CookieManagerComponent from './pages/cookie-manager';
 import { MiniAppPreferenceComponent } from './pages/miniapp-preferences';
+import FeatureListComponent from './pages/feature-list';
 
 //default root location when using ios
 const iosHomeNavLink = { navLink: '/index.html', label: 'Home' };
@@ -117,6 +119,10 @@ const miniAppPreferenceNavLink = {
   navLink: '/miniapp-preference',
   label: 'MiniApp Preference',
 };
+const miniFeatureListNavLink = {
+  navLink: '/miniapp-feature-list',
+  label: 'Feature List',
+};
 
 const navLinks = [
   iosHomeNavLink,
@@ -145,6 +151,7 @@ const navLinks = [
   universalBridgeNavLink,
   colorThemeNavLink,
   cookieManagerNavLink,
+  miniFeatureListNavLink,
 ];
 
 const homeItem = [
@@ -289,6 +296,12 @@ const appItems = [
     navLink: cookieManagerNavLink.navLink,
     element: <CookieManagerComponent />,
   },
+  {
+    icon: <FormatListNumberedIcon />,
+    label: miniFeatureListNavLink.label,
+    navLink: miniFeatureListNavLink.navLink,
+    element: <FeatureListComponent />,
+  },
 ];
 
 const navItems: Object[] = homeItem.concat(

js-miniapp-sdk/CHANGELOG.md

@@ -4,6 +4,7 @@
 - **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`
 - **Fix:** Few Contacts with special characters is failed to retrieve, its fixed now
+- **Feature:** Added new interface `getFeatureList()` that will return the list if features supported by the Host and MiniApp SDK.
 
 ### 1.19.0 (2023-11-02)
 - **Feature:** Added new interface `getAllCookies()` to get `CookieInfo` which contains `name` and `value` of the cookie

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]
+- [Get Feature list][#get-feature-list]
 
 
 ### Retrieve a unique ID
@@ -1308,6 +1309,29 @@ MiniApp.preferences
 
 ```
 
+
+<div id='get-feature-list'/>
+
+## Get feature list <small style="color:green;font-size: 12px">Available from v1.20.0</small>
+
+This interface will help the MiniApps to get the list of features that is supported by the MiniApp native SDK also with the list of other features that is supported by the Host app
+
+```javascript
+import MiniApp from 'js-miniapp-sdk';
+
+MiniApp.miniappUtils
+  .getFeatureList()
+  .then((response) => {
+    // Array of strings/features that is supported
+    // For eg., ["GET_USERNAME", "IS_DARK_MODE", "GET_ALL_COOKIES"]
+    console.log(response);
+  })
+  .catch((error) => {
+    console.log(error);
+  });
+
+```
+
 ## Advanced Usage
 
 <dl>

js-miniapp-sdk/src/modules/utils.ts

@@ -37,6 +37,11 @@ export interface MiniAppUtilsProvider {
    * @param analyticsInfo Analytics info
    */
   sendAnalytics(analytics: MAAnalyticsInfo): Promise<string>;
+
+  /**
+   * Interface to get list of features supported by the SDK and Host
+   */
+  getFeatureList(): Promise<string[]>;
 }
 
 /** @internal */
@@ -59,4 +64,7 @@ export class MiniAppUtils implements MiniAppUtilsProvider {
     }
     return Promise.reject('sendAnalytics Error');
   }
+  getFeatureList(): Promise<string[]> {
+    return getBridge().getFeatureList();
+  }
 }